<template>
  <div id="home">
    <!-- <div
      style="
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
      "
    >
    <div
      class="my-charts"
      style="height: 500px; width: 500px"
      ref="myChart"
    ></div>
    <p style="font-size: 28px;">后台项目进度</p></div> -->
    <!-- <div class="post">
        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
        <div class="bg4"></div>
        <div class="bg5"></div>
    </div>
    <div style="text-align: center;">
        <button id="actives">融合</button>
    </div> -->
    工作台
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // var ast = document.getElementById("actives");
    // ast.addEventListener("click", function () {
    //   var lis = ["bg1", "bg2", "bg4", "bg5"];
    //   var lisClass = ["anmins1", "anmins2", "anmins4", "anmins5"];
    //   for (let i = 0; i < lis.length; i++) {
    //     document.getElementsByClassName(lis[i])[0].classList.add(lisClass[i]);
    //     setTimeout(() => {
    //       document.getElementsByClassName(lis[i])[0].classList.add("ans");
    //     }, 900);
    //   }
    // });
    // this.drawLine();
  },
  methods: {
    drawLine() {
      //     var self = this
      //     // 基于准备好的dom，初始化echarts实例
      //     let myChart = this.$echarts.init(this.$refs.myChart);
      //     // 绘制图表
      //     myChart.setOption({
      //       series: [
      //         {
      //           type: "gauge",
      //           progress: {
      //             show: true,
      //             width: 14,
      //           },
      //           axisLine: {
      //             lineStyle: {
      //               width: 14,
      //             },
      //           },
      //           axisTick: {
      //             show: false,
      //           },
      //           splitLine: {
      //             length: 15,
      //             lineStyle: {
      //               width: 2,
      //               color: "#999",
      //             },
      //           },
      //           axisLabel: {
      //             distance: 25,
      //             color: "#999",
      //             fontSize: 20,
      //           },
      //           anchor: {
      //             show: true,
      //             showAbove: true,
      //             size: 21,
      //             itemStyle: {
      //               borderWidth: 10,
      //             },
      //           },
      //           title: {
      //             show: false,
      //           },
      //           detail: {
      //             valueAnimation: true,
      //             fontSize: 50,
      //             offsetCenter: [0, "70%"],
      //           },
      //           data: [
      //             {
      //               value: 70,
      //             },
      //           ],
      //         },
      //       ],
      //   });
    },
  },
};
</script>

<style lang="less" scoped>
// #home {
//   display: flex;
//   flex-wrap: wrap;
// }

.post {
  margin: 40px auto;
  width: 600px;
  height: 600px;
  position: relative;
}
.bg1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: linear-gradient(
    238deg,
    rgb(130, 255, 0) 0%,
    rgb(0, 84, 166) 100%
  );
  mix-blend-mode: overlay;
  transition: all 1s;
}

.bg2 {
  position: absolute;
  top: 0;
  left: 400px;
  width: 200px;
  height: 200px;
  background: linear-gradient(238deg, rgb(33, 200, 69) 0%, rgb(0, 0, 100) 100%);
  mix-blend-mode: multiply;
  transition: all 1s;
}

.bg3 {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 200px;
  height: 200px;
  background: linear-gradient(
    238deg,
    rgb(200, 255, 255) 48%,
    rgb(3, 0, 151) 100%
  );
  mix-blend-mode: difference;
  transition: all 1s;
}

.bg4 {
  position: absolute;
  top: 400px;
  left: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    100% 85% at 0% 100%,
    rgb(0, 0, 0) 0%,
    rgb(0, 131, 255) 50%,
    rgb(255, 0, 0) 100%
  );
  mix-blend-mode: difference;
  transition: all 1s;
}

.bg5 {
  position: absolute;
  top: 400px;
  left: 400px;
  width: 200px;
  height: 200px;
  mix-blend-mode: overlay;
  background: radial-gradient(
    100% 225% at 0% 100%,
    rgb(255, 0, 0) 0%,
    rgb(66, 255, 0) 100%
  );
  transition: all 1s;
}
.ans {
  animation: name1 5s infinite linear;
  box-shadow: 1px 1px 12px 3px rgba(0, 0, 100, 0.5);
}
@keyframes name1 {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.anmins1 {
  transform: translateX(200px) translateY(200px);
}

.anmins2 {
  transform: translateX(-200px) translateY(200px);
}

.anmins4 {
  transform: translateX(200px) translateY(-200px);
}

.anmins5 {
  transform: translateX(-200px) translateY(-200px);
}
#actives {
  padding: 0px 20px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  border-radius: 8px;
  color: #eee;
  background: linear-gradient(
    238deg,
    rgb(102, 175, 172) 0%,
    rgb(0, 0, 100) 100%
  );
  height: 40px;
  border: none;
  cursor: pointer;
  transition: all 0.4s;
}
#actives:hover {
  box-shadow: 1px 1px 12px 3px rgba(0, 0, 100, 0.5);
  color: antiquewhite;
  transform: scale(1.05);
}
</style>