<template>
  <div>
    <div class="card h292">
      <screen-title-red>
        <div slot="left" class="screen-title-left">组织建设</div>
        <div slot="right" class="screen-title-right" @click="handelClickOrg">
          <span>组织架构</span>
        </div>
      </screen-title-red>
      <div class="card-item-zzjs">
        <div class="top">
          <div class="item" v-for="(item, index) in typeList" :key="index">
            <div class="imgBox">
              <img :src="item.imgSrc" alt="" />
            </div>
            <div class="num">{{ item.num }}</div>
            <div
              class="agency"
              style="color: #fbe9c5 !important; margin-top: 8px"
            >
              {{ item.type }}
            </div>
            <div class="bubbles">
              <span
                class="bubble"
                v-for="(item, index) in bubbleList"
                :key="index"
                :style="{
                  '--w': item.w,
                  '--c': item.c,
                  '--x': item.x,
                  '--d':
                    parseInt(bubbleList.length / 2) +
                    1 -
                    Math.abs(index - parseInt(bubbleList.length / 2)),
                }"
              ></span>
            </div>
          </div>
        </div>
        <div class="bot">
          <div class="bot-item">
            <div>
              <img :src="require('@/assets/images/icon/dyzxhRed.png')" />
            </div>
            <div class="bot-item-val">
              <div class="bot-item-val-num">{{ 692 }}</div>
              <div class="bot-item-val-title">党员中心户</div>
            </div>
          </div>
          <div class="bot-item">
            <div>
              <img :src="require('@/assets/images/icon/dysRed.png')" />
            </div>
            <div class="bot-item-val">
              <div class="bot-item-val-num">{{ 4127 }}</div>
              <div class="bot-item-val-title">党员数</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card h292" style="margin-top: 8px">
      <screen-title-red>
        <div slot="left" class="screen-title-left">微网格</div>
      </screen-title-red>
      <div class="card-item-tag">
        <!-- <p class="tag" v-for="(item, index) in tagList" :key="index">
          <span class="tag-name">{{ item.name }}</span>
          <span class="tag-value">{{ item.value }}</span>
        </p> -->
        <div class="wwgCenter">
          <div class="wwgCenterZhuan"></div>
          <div class="wwgCenterWjx"></div>
          <div class="wwgCenterTitle">移风店镇</div>
        </div>
        <div class="wwgBot">
          <div class="cundian" v-for="(item, index) in tagList" :key="index">
            <div class="wwgdd">
              <img :src="require('@/assets/images/common/wwgdd.png')" />
            </div>
            <div class="cunTitle">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card h292 m-top12">
      <screen-title-red>
        <div slot="left" class="screen-title-left">党员分析</div>
      </screen-title-red>
      <div class="card-item-dyfx">
        <div class="card-item-dyfx-left">
          <div class="top-title">
            <div>
              <img :src="require('@/assets/images/icon/dyfxDian.png')" />
            </div>
            <div class="title-txt">移风共富</div>
          </div>
          <div class="content">
            <div class="content-left">
              <div class="content-left-icon">
                <img :src="require('@/assets/images/icon/gfgsIcon.png')" />
              </div>
              <div class="content-left-name">共富公司</div>
            </div>
            <div class="content-right">
              <span class="content-right-num">4 </span>家
            </div>
          </div>
          <div class="bottom-list">
            <div
              class="bottom-list-item"
              v-for="(item, index) in yfgfList"
              :key="item.companyName + index"
            >
              <span>{{ index + 1 }}</span> {{ item.companyName }}
            </div>
          </div>
        </div>
        <div class="card-item-dyfx-right">
          <div class="top-title">
            <div>
              <img :src="require('@/assets/images/icon/dyfxDian.png')" />
            </div>
            <div class="title-txt">移风阵地</div>
          </div>
          <div class="content">
            <div class="content-left">
              <div class="content-left-icon">
                <img :src="require('@/assets/images/icon/gmdIcon.png')" />
              </div>
              <div class="content-left-name">观摩点</div>
            </div>
            <div class="content-right">
              <span class="content-right-num">3 </span>处
            </div>
          </div>
          <div class="bottom-list">
            <div
              class="bottom-list-item"
              v-for="(item, index) in yfzdList"
              :key="item.jdName + index"
            >
              <span class="bottom-list-item-span">{{ index + 1 }}</span
              >{{ item.jdName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { partyOrgCategoryAndQuantity } from "@/api/hsyf";
const RADIUS = 100; // 3d球的半径
const FALLLENGTH = 500;
let CX = null;
let CY = null;

class Tag {
  constructor(el, x, y, z) {
    this.el = el;
    this.x = x;
    this.y = y;
    this.z = z;
  }

  move() {
    const scale = FALLLENGTH / (FALLLENGTH - this.z);
    const alpha = (this.z + RADIUS) / (3 * RADIUS);
    const left = this.x + CX - this.el.offsetWidth / 2 + "px"; // 水平偏移
    const top = this.y + CY - this.el.offsetHeight / 1 + "px"; // 竖直偏移
    this.el.style.opacity = alpha;
    this.el.style.zIndex = parseInt(scale * 100);
    this.el.style.transform = `translate(${left},${top}) scale(${scale}) rotate(0deg)`; // 将rotate改为0度
  }
}
export default {
  data() {
    return {
      agencyList: [
        { num: 11, agency: "党委" },
        { num: 97, agency: "党支部" },
        { num: 235, agency: "党小组" },
        { num: 3496, agency: "党员" },
      ],
      typeList: [
        {
          imgSrc: require("@/assets/images/icon/zdwRed.png"),
          type: "镇党委",
          num: 12,
        },
        {
          imgSrc: require("@/assets/images/icon/xcdwRed.png"),
          type: "新村党委",
          num: 36,
        },
        {
          imgSrc: require("@/assets/images/icon/zrcdzbRed.png"),
          type: "自然村党支部",
          num: 14,
        },
        {
          imgSrc: require("@/assets/images/icon/wgdxzRed.png"),
          type: "网格党小组",
          num: 14,
        },
      ],

      peiOption: null,
      optionData: [
        {
          name: "20-40岁", // 名称
          value: 19, // 值
          itemStyle: {
            // 颜色 紫色
            color: "rgba(227,235,45,1)",
          },
        },
        {
          name: "40-60岁", // 蓝色
          value: 13,
          itemStyle: {
            color: "rgba(19,141,255,1)",
          },
        },
        {
          name: "60-80岁", // 绿色
          value: 15,
          itemStyle: {
            color: "rgba(253, 112, 0, 1)",
          },
        },
        {
          name: "80岁以上", // 橙色
          value: 16,
          itemStyle: {
            color: "rgba(21, 214, 131, 1)",
          },
        },
      ],
      barOption: null,
      optionDataB: [
        {
          name: "移风村",
          value: 1242,
        },
        {
          name: "上泊新村",
          value: 986,
        },
        {
          name: "河流新村",
          value: 744,
        },
        {
          name: "滨河村",
          value: 653,
        },
        {
          name: "大坝新村",
          value: 498,
        },
      ],
      tagworpList: [
        {
          label: "上泊新村",
          id: "1697533359860244481",
        },
        {
          label: "滨河村",
          id: "1704030137514287105",
        },
        {
          label: "湍湾新村",
          id: "1704036500462198786",
        },
        {
          label: "七级村",
          id: "1704313950756757506",
        },
        {
          label: "沽河村",
          id: "1704324481563582466",
        },
        {
          label: "太祉庄村",
          id: "1704327114084933633",
        },
        {
          label: "河流新村",
          id: "1704331366425518081",
        },
        {
          label: "大坝新村",
          id: "1704396342955696130",
        },
        {
          label: "双塔村",
          id: "1704331366425518081",
        },
        {
          label: "移风村",
          id: "1704331366425518081",
        },
      ],
      tagList: [
        {
          name: "上泊新村委员会",
          id: "1697533359860244481",
        },
        {
          name: "滨河村委员会",
          id: "1704030137514287105",
        },
        {
          name: "湍湾新村委员会",
          id: "1704036500462198786",
        },
        {
          name: "七级村委员会",
          id: "1704313950756757506",
        },
        {
          name: "沽河村委员会",
          id: "1704324481563582466",
        },
        {
          name: "太祉庄村委员会",
          id: "1704327114084933633",
        },
        {
          name: "河流新村委员会",
          id: "1704331366425518081",
        },
        {
          name: "大坝新村委员会",
          id: "1704396342955696130",
        },
        {
          name: "双塔村委员会",
          id: "1704331366425518081",
        },
        {
          name: "移风村委员会",
          id: "1704331366425518081",
        },
      ],
      tempList: [],
      bubbleList: [
        {
          w: 8,
          x: 10,
        },
        {
          w: 9,
          x: 50,
        },
        {
          w: 4,
          x: 30,
        },
        {
          w: 5,
          x: 80,
        },
        {
          w: 4,
          x: 30,
        },
        {
          w: 4,
          x: 70,
        },
        {
          w: 6,
          x: 20,
        },
        {
          w: 8,
          x: 50,
        },
        {
          w: 4,
          x: 60,
        },
        {
          w: 6,
          x: 65,
        },
      ],
      yfgfList: [
        { companyName: "青岛益成河农业科技有限公司" },
        { companyName: "青岛滨源农产品有限公司" },
        { companyName: "青岛上泊建晟建设发展有限公司" },
        { companyName: "青岛圆可方诚工贸有限公司" },
      ],
      yfzdList: [
        { jdName: "大欧鸟笼乡村记忆馆" },
        { jdName: "七彩田园" },
        { jdName: "中共即墨县委纪念馆" },
      ],
    };
  },
  created() {
    this.bubbleList.forEach((i, index) => {
      this.$set(
        i,
        "c",
        this.forArrayValue(["#00BABC", "#009FA4", "#00FFC0"], index)
      );
    });
    this.getData();
  },
  mounted() {
    this.$nextTick(function () {
      this.initTag();
      this.animate();
      this.initBarAge();
      this.initBar();
    });
  },
  beforeDestroy() {},
  methods: {
    ...mapActions({
      // set_garden: 'SET_GARDEN',
      set_organization: "SET_ORGANIZATION",
    }),
    getData() {
      // fetch(
      //   "https://yifengdian-smps.elinkservice.cn/api/resi/partymember/yifengScreen/partyOrgCategoryAndQuantity"
      // ).then((res) => {
      //   console.log('res::', res);
      // });
      partyOrgCategoryAndQuantity().then((res) => {
        console.log("tongle?", res);
      });
    },
    forArrayValue(array, sort) {
      return array[sort % array.length];
    },
    handelClickOrg() {
      this.set_organization(true);
    },

    initTag() {
      const tags = document.querySelectorAll(".tag");
      const wrap = document.querySelector(".card-item-tag");
      const len = tags.length;
      // let valueList = Array.from(new Set(this.tagList.map(i => i.value)));
      // let min = Math.min(...valueList);
      CX = wrap.offsetWidth / 2;
      CY = wrap.offsetHeight / 2;
      tags.forEach((i, index) => {
        // let fontScale = this.tagList[index].value / min * 16;
        // i.style.fontSize = fontScale > 30 ? '30px' : fontScale + 'px';
        // i.style.color = colors[parseInt(Math.random() * 10)];
        const k = -1 + (2 * (index + 1) - 1) / len;
        const a = Math.acos(k);
        const b = a * Math.sqrt(len * Math.PI);
        const x = RADIUS * 1.15 * Math.sin(a) * Math.cos(b);
        const y = RADIUS * Math.sin(a) * Math.sin(b);
        const z = RADIUS * Math.cos(a);
        const tag = new Tag(i, x, y, z);
        this.tempList.push(tag);
      });
    },
    rotateX() {
      const angleX = Math.PI / 8000;
      const cos = Math.cos(angleX);
      const sin = Math.sin(angleX);
      this.tempList.forEach((i) => {
        const y1 = i.y * cos - i.z * sin;
        const z1 = i.z * cos + i.y * sin;
        i.y = y1;
        i.z = z1;
      });
    },
    rotateY() {
      const angleY = Math.PI / 200;
      const cos = Math.cos(angleY);
      const sin = Math.sin(angleY);
      this.tempList.forEach((i) => {
        const x1 = i.x * cos - i.z * sin;
        const z1 = i.z * cos + i.x * sin;
        i.x = x1;
        i.z = z1;
      });
    },
    animate() {
      this.rotateX();
      this.rotateY();
      this.tempList.forEach((i) => {
        i.move();
      });
      requestAnimationFrame(this.animate);
    },
    initBarAge() {
      // eslint-disable-next-line no-undef
      const myChart = echarts.init(document.getElementById("charts"));
      const option = {
        grid: {
          left: "2%",
          right: "2%",
          top: "15%",
          bottom: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          formatter: function (params, ticket, callback) {
            var res = params.name + " : " + params.value;
            return res;
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#174489",
              width: "3",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#BDCEEA",
            fontSize: "10",
            rotate: 45, // 旋转角度，单位为度
          },
          data: ["20-40岁", "40-60岁", "60-80岁", "80岁以上"],
        },

        yAxis: {
          show: false,
        },
        series: [
          {
            name: "leftA",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 1, color: "rgb(83, 180, 255,0)" }, // 底部颜色
                    { offset: 0, color: "#5098fb" }, // 顶部颜色
                  ],
                },
                barBorderRadius: [0, 0, 0, 0],
              },
            },
            data: [220, 182, 191, 234],
          },
          {
            name: "rightA",
            tooltip: {
              show: false,
            },
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 1, color: "rgb(83, 180, 255,0)" }, // 底部颜色
                    { offset: 0, color: "#207dfb" }, // 顶部颜色
                  ],
                },
                barBorderRadius: [0, 0, 0, 0],
              },
            },
            data: [220, 182, 191, 234],
            barGap: 0,
          },
          {
            name: "topA",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#53b4ff",
                // borderWidth: 1,
                // borderColor: '#00183F',
                opacity: "1",
                shadowColor: "rgb(0,0,0,0.1)",
                shadowOffsetX: "0.5",
                shadowOffsetY: "0.5",
              },
            },
            label: {
              show: false,
              color: "#04F9FD",
              offset: [0, 0],
              position: "top",
              fontSize: "16",
              fontWeight: "normal",
            },
            symbol: "diamond",
            symbolRotate: 0,
            symbolSize: ["25", "12"],
            symbolOffset: ["0", "-8"],
            symbolPosition: "end",
            data: [220, 182, 191, 234],
            z: 3,
          },
        ],
      };
      myChart.setOption(option);
    },
    initBar() {
      // eslint-disable-next-line no-undef
      const myChart = echarts.init(document.getElementById("chartsBar"));
      this.barOption = this.getBar(this.optionDataB);
      myChart.setOption(this.barOption);
    },
    getBar(data) {
      const symbolData = data.map((item) => ({
        symbolPosition: "end",
        value: item.value,
      }));
      const arrByKey = data.map((item) => item.value);
      const option = {
        // backgroundColor: '#000000',
        grid: {
          top: 10,
          bottom: -0.5,
          // right: 0,
          left: 0,
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: symbolData,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: arrByKey,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              shadowOffsetX: "-50px",
              color: ["#DBE9FF"],
              align: "right",
              verticalAlign: "bottom",
              // lineHeight: 40,
              fontSize: 14,
              formatter: function (value, index) {
                // return (data[index].value / data[index].sum) * 100
                return value;
              },
            },
          },
        ],
        series: [
          {
            name: "XXX",
            type: "pictorialBar",
            symbol:
              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAs1JREFUOE+9lE1vW0UUhp8zc+/1zY0dV6RuZJSFoWWLWoVNEQh3hRTBBsGCX8COv5Bkyc9gw6IVSyR2zQLRbgKCtpFABiRkKQK11MT2te/HzCE3cUxaHJVKiJFmMdKZR+/5eoX/+Mjz8lR1/kdE9On//wpYQXZA3trFdLsniN2j2wW/c/TYFvGn4GcCt1XNO3vY1Q3sEtjBQ4xTdFLim21cH1wX3Knac4GVqltgrvUI3AWieo0oNwTTCcYkiPUUbsrUXiT/FsoPjtRW0IXACrYLtgMBA+IsIjEFsZZEccB6KG4tK/1PQRD+aFeYtiEXcCwCVrA9CF6E0A9ZOhxRD2ss24C6VX+tZvRdS5Wy+8xF0e00ZTRpkb0G5RPAWfdkf5+g1SI69CReqGtEI/SshYF/PTb+fYHLpXIn1+ATl/FdCqPJr2QbG5TzlM/C7CVqTlmu1airpxHCS5G4t0OrmwKrpeebTOXTrLRfNWo8/H1M+sca2Q2Rsur0cQ1nQPv9b9SSZRJ1NAQuBOpejY2+FwpvVnG553YmwS3vuK/KILWMGo+ZdDrkMhudU6Dp9QhHF1mqe+o4WlHo34iN/9AYrgKPCidfZGq/zOGXWBjmlmE6Ji3WyDc4SXeu8KaqXe8TNVdYijNWg7DYTKx8JMLLzmsv9/L51AdfO+HAFIwaCUMZk/ZPYNUMPjnYqmr7EKUHx7V7JQ6Kj63IDQcPslJvFhreUxgUGWPxjJqGyQ9t8u4OXrb/hv1DYbtOzZXF5UYkm6WynKvcdWp7UpKVhjSyjBkw7XQomA3ywl1W1eMaNq8QPn5EM7K0vOIy4dB5vC/IkiFTrpCd3YpFxnLclGpft8Dc6RO+EBOEFjMdY1dWYFpS/plR0qZ4ul7nAuduAuYSmATMQR+5vo7fA/8z+H3Qs65ynu3Nd/nU5yqb2ppFV9a0BbrI954JfF6j/d+AfwETJFsk0SzcoQAAAABJRU5ErkJggg==",
            symbolSize: [10, 2, 10, 2],
            symbolRotate: 45,
            symbolOffset: [5, 0],
            z: 12,
            itemStyle: {
              normal: {
                color: "#cde0ef",
                // image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAs1JREFUOE+9lE1vW0UUhp8zc+/1zY0dV6RuZJSFoWWLWoVNEQh3hRTBBsGCX8COv5Bkyc9gw6IVSyR2zQLRbgKCtpFABiRkKQK11MT2te/HzCE3cUxaHJVKiJFmMdKZR+/5eoX/+Mjz8lR1/kdE9On//wpYQXZA3trFdLsniN2j2wW/c/TYFvGn4GcCt1XNO3vY1Q3sEtjBQ4xTdFLim21cH1wX3Knac4GVqltgrvUI3AWieo0oNwTTCcYkiPUUbsrUXiT/FsoPjtRW0IXACrYLtgMBA+IsIjEFsZZEccB6KG4tK/1PQRD+aFeYtiEXcCwCVrA9CF6E0A9ZOhxRD2ss24C6VX+tZvRdS5Wy+8xF0e00ZTRpkb0G5RPAWfdkf5+g1SI69CReqGtEI/SshYF/PTb+fYHLpXIn1+ATl/FdCqPJr2QbG5TzlM/C7CVqTlmu1airpxHCS5G4t0OrmwKrpeebTOXTrLRfNWo8/H1M+sca2Q2Rsur0cQ1nQPv9b9SSZRJ1NAQuBOpejY2+FwpvVnG553YmwS3vuK/KILWMGo+ZdDrkMhudU6Dp9QhHF1mqe+o4WlHo34iN/9AYrgKPCidfZGq/zOGXWBjmlmE6Ji3WyDc4SXeu8KaqXe8TNVdYijNWg7DYTKx8JMLLzmsv9/L51AdfO+HAFIwaCUMZk/ZPYNUMPjnYqmr7EKUHx7V7JQ6Kj63IDQcPslJvFhreUxgUGWPxjJqGyQ9t8u4OXrb/hv1DYbtOzZXF5UYkm6WynKvcdWp7UpKVhjSyjBkw7XQomA3ywl1W1eMaNq8QPn5EM7K0vOIy4dB5vC/IkiFTrpCd3YpFxnLclGpft8Dc6RO+EBOEFjMdY1dWYFpS/plR0qZ4ul7nAuduAuYSmATMQR+5vo7fA/8z+H3Qs65ynu3Nd/nU5yqb2ppFV9a0BbrI954JfF6j/d+AfwETJFsk0SzcoQAAAABJRU5ErkJggg==',
              },
            },
            data: symbolData,
          },
          {
            name: "条",
            type: "bar",
            showBackground: true,
            barBorderRadius: 30,
            yAxisIndex: 0,
            data: data,
            barWidth: 5,
            // align: left,
            itemStyle: {
              normal: {
                // eslint-disable-next-line no-undef
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#1f4889",
                    },

                    {
                      offset: 1,
                      color: "#2caffd",
                    },
                  ],
                  false
                ),
                // barBorderRadius: 10
              },
              // color: '#A71A2B',
              // barBorderRadius: 4,
            },
            label: {
              normal: {
                color: "#DBE9FF",
                show: true,
                position: [0, "-15px"],
                textStyle: {
                  fontSize: 14,
                },
                formatter: function (a, b) {
                  return a.name;
                },
              },
            },
          },
        ],
      };
      return option;
    },
  },
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
@import "~@/views/next/screen-content-left/hsyf-left/index.scss";
@keyframes spin {
  0% {
    transform: rotate(0deg);
  } /* 初始状态，角度为0度 */
  100% {
    transform: rotate(360deg);
  } /* 结束状态，角度为360度 */
}

.card {
  width: 100%;
  background: url("~@/assets/images/common/cardBgRed.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
  @include flex(column);

  &-item-zzjs {
    @include flex(column);
    padding: 32px 25px 30px 20px;
    box-sizing: border-box;
    // height: 100%;

    // .top {
    //   display: flex;
    //   justify-content: space-between;
    //   padding: 0 10px;

    //   :nth-child(1) > .agency::after {
    //     background: #e60000;
    //   }

    //   :nth-child(2) > .agency::after {
    //     background: #ff6305;
    //   }

    //   :nth-child(3) > .agency::after {
    //     background: #ffb505;
    //   }

    //   :nth-child(4) > .agency::after {
    //     background: #fff605;
    //   }

    //   > .item {
    //     @include flex(column);
    //       position: relative;

    //     .num {
    //       font-family: pangmenzhengdao;
    //       font-size: 20px;
    //       position: relative;
    //       top: -14px;
    //     }

    //     .agency {
    //       font-size: 14px;
    //       color: #FBE9C5 !important;
    //       position: relative;

    //       &::after {
    //         content: "";
    //         width: 6px;
    //         height: 6px;
    //         border-radius: 50%;
    //         position: absolute;
    //         left: -10px;
    //         top: 7px;
    //       }
    //     }
    //   }
    // }

    .top {
      flex: 1;
      display: flex;
      justify-content: space-around;

      .item {
        @include flex(column);
        align-items: center;
        // justify-content: space-around;
        position: relative;

        .imgBox {
          width: 90px;
          height: 66px;
          background: url("~@/assets/images/common/iconBgRed.png") no-repeat !important;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 36px;
            height: 36px;
            animation: moveUpDown 3s infinite linear;
          }
        }

        .num {
          font-family: pangmenzhengdao;
          color: #ebf2fa;
          text-shadow: 0 0 10px #ffc435;
          font-size: 22px;
          margin-top: -3px;
        }

        .bubbles {
          position: absolute;
          width: 100%;
          height: 45%;
          top: -15px;
          left: 0;
          z-index: -1;
          overflow: hidden;
        }

        .bubble {
          position: absolute;
          width: calc(1px * var(--w));
          height: calc(1px * var(--w));
          background: var(--c);
          border-radius: 50%;
          left: calc(50% - calc(1px * calc(var(--w) / 2)));
          opacity: 0;
          bottom: 10%;
          animation: rise 3s infinite linear;
          animation-delay: calc(600ms * var(--d));
        }

        @keyframes rise {
          0% {
            left: calc(50% - calc(1px * calc(var(--w) / 2)));
            opacity: 0;
            bottom: 10%;
          }

          50% {
            opacity: 0.8;
          }

          100% {
            left: calc(1% * var(--x));
            bottom: 90%;
            opacity: 0;
          }
        }

        @keyframes moveUpDown {
          0% {
            transform: translateY(0);
          }

          50% {
            transform: translateY(-15px);
          }

          100% {
            transform: translateY(0);
          }
        }
      }
    }

    .bot {
      display: flex;
      justify-content: space-around;
      padding-top: 18px;
      &-item {
        width: 183px;
        height: 60px;
        background-image: linear-gradient(
          to right,
          rgba(255, 187, 123, 0.1),
          rgba(255, 187, 123, 0)
        );
        display: flex;
        &-val {
          border-left: 1px solid #fef2d5;
          margin-left: 4px;
          margin-top: 12px;
          padding-left: 16px;
          height: 36px;
          &-num {
            font-family: PangMenZhengDao;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
            line-height: 13px;
          }
          &-title {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #fbe9c5;
            line-height: 14px;
            padding-top: 10px;
          }
        }
      }
    }
  }

  &-item-tag {
    position: relative;
    width: 100%;
    height: 395px;
    padding-top: 8px;

    .wwgCenter {
      width: 142px;
      height: 142px;
      background: url("~@/assets/images/common/wwgBg.png") no-repeat;
      background-size: 100% 100%;
      padding: 17px;
      position: relative;
      left: calc(50% - 86px);
      .wwgCenterZhuan {
        width: 142px;
        height: 142px;
        background: url("~@/assets/images/common/wwgzq.png") no-repeat;
        background-size: 100% 100%;
        animation: spin 4s linear infinite;
      }
      .wwgCenterWjx {
        width: 44px;
        height: 42px;
        background: url("~@/assets/images/common/wwgxx.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: -114px;
        left: calc(50% - 22px);
      }
      .wwgCenterTitle {
        // width: 75px;
        height: 18px;
        font-family: MF LangQian (Noncommercial);
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        line-height: 24px;
        position: relative;
        top: -106px;
        left: calc(50% - 36px);
      }
    }
    .wwgBot {
      width: 282px;
      height: 72px;
      background: url("~@/assets/images/common/wwgboty.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      top: -28px;
      left: calc(50% - 141px);
      .cundian {
        position: absolute;
        width: 280px;
        display: flex;
        .cunTitle {
          font-size: 18px;
          color: #fff2d9;
        }
        .wwgdd {
          img {
            width: 24px;
            height: 24px;
          }
        }
      }
      .cundian:nth-child(1) {
        animation: dian1 8s linear infinite;
      }
      .cundian:nth-child(2) {
        animation: dian2 8s linear infinite;
      }
      .cundian:nth-child(3) {
        animation: dian3 8s linear infinite;
      }
      .cundian:nth-child(4) {
        animation: dian4 8s linear infinite;
      }
      .cundian:nth-child(5) {
        animation: dian5 12s linear infinite;
      }
      .cundian:nth-child(6) {
        animation: dian6 12s linear infinite;
      }
      .cundian:nth-child(7) {
        animation: dian7 12s linear infinite;
      }
      .cundian:nth-child(8) {
        animation: dian8 12s linear infinite;
      }
      .cundian:nth-child(9) {
        animation: dian9 12s linear infinite;
      }
      .cundian:nth-child(10) {
        animation: dian10 12s linear infinite;
      }
    }
    .tag {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      text-decoration: none;
      font-size: 18px;
      cursor: pointer;
      will-change: transform;
      color: #1dfbf6;

      span {
        display: inline-block;
      }

      .tag-value {
        // opacity: 0;
        // height: 35px;
        // padding: 0 30px 0 20px;
        // color: #f6f600;
        // line-height: 35px;
        // margin-left: 5px;
        // visibility: middle;
        // font-size: 14px;
        // transition: all 0.2s;
        // background: linear-gradient(90deg,
        //                 rgba(216, 255, 0, 0.7) 0%,
        //                 rgba(58, 51, 255, 0) 100%);
      }

      // &:hover {
      //         .tag-value {
      //                 opacity: 1;
      //         }
      // }
    }
  }

  // &-item-dyfx {
  //   display: flex;
  //   padding: 16px;
  //   flex: 1;

  //   .pei,
  //   .bar {
  //     .echarts-header {
  //       display: flex;
  //       align-items: center;

  //       :nth-child(1) {
  //         width: 18px;
  //         height: 18px;
  //         margin-right: 8px;
  //       }

  //       :nth-child(2) {
  //       }

  //       :nth-child(3) {
  //         flex: 1;
  //         height: 1px;
  //         border-top: 2px dotted #2e8bbd;
  //         margin: 0 3px;
  //       }

  //       :nth-child(4) {
  //         width: 12px;
  //         height: 12px;
  //       }
  //     }
  //   }

  //   .pei {
  //     width: 47%;
  //     @include flex(column);
  //     margin-right: 50px;
  //   }

  //   .bar {
  //     flex: 1;
  //   }
  // }
  &-item-dyfx {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    &-left,
    &-right {
      width: 214px;
      background: url("~@/assets/images/home/yfgfLeftBg.png") no-repeat;
      background-size: 100% 14px;
      background-position: center 58px;
      .top-title {
        width: 214px;
        display: flex;
        img {
          width: 18px;
          height: 18px;
          margin-top: 2px;
        }
        .title-txt {
          padding-left: 8px;
          height: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
        }
      }
      .content {
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
        &-left {
          display: flex;
          &-icon {
            width: 26px;
            img {
              width: 26px;
              height: 26px;
            }
          }
          &-name {
            padding-left: 8px;
            width: 90px;
            height: 26px;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
            line-height: 26px;
          }
        }
        &-right {
          font-weight: 500;
          &-num {
            height: 13px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
          }
        }
      }
      .bottom-list {
        padding-top: 12px;
        &-item {
          margin-top: 3px;
          &-span {
            padding-left: 10px;
            padding-right: 12px;
          }
          // width: 180px;
          height: 30px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #fbe9c5;
          line-height: 30px;
          border-bottom: 1px dashed #bb7053;
        }
        &-item:hover {
          cursor: pointer;
          color: #ffffff;
        }
      }
    }
    &-right {
      width: 190px;
      background: url("~@/assets/images/home/yfgfRightBg.png") no-repeat;
      background-size: 100% 14px;
      background-position: center 58px;
      .top-title {
        width: 190px;
      }
      .content {
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
        &-left {
          display: flex;
          &-name {
            width: 60px;
          }
        }
      }
      .bottom-list {
        &-item {
          width: 190px;
          height: 29px;
          background: rgba(187, 112, 83, 0.2);
          border-radius: 2px;
          border: 1px solid #bb7053;
        }
        &-item:hover {
          cursor: pointer;
          color: #ffffff;
          background: url("~@/assets/images/home/gmdListBg.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
