<template>
  <div class="box">
    <div class="title">
      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
      <p>碳排放量统计</p>
      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
    </div>
    <div class="containter">
      <div class="left">
        <div class="jrtj">
          <p class="title">接入统计</p>
          <div class="insides">
            <div class="con" v-for="item in tjlist">
              <img src="../assets/tan/组 3128.png" alt="" />
              <div class="r_con">
                <p>{{ item.count }}</p>
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>
          <div class="centers">
            <p>100</p>
            <p>总接入数量</p>
            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
          </div>
        </div>
        <div class="ssfhzs">
          <p class="title">实时负荷走势</p>
          <ul class="typeBox">
            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
              总量
            </li>
            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
              发电
            </li>
            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
              石化
            </li>
            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
              钢铁
            </li>
            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
              有色
            </li>
          </ul>
          <div id="ssfhzs"></div>
        </div>
        <div class="ynl">
          <p class="title">碳排放趋势</p>
          <div id="ynl"></div>
        </div>
      </div>
      <div class="right">
        <div class="tyjg">
          <p class="title">碳源结构</p>
          <div id="tyjg">
            <div class="t_content">
              <div class="left">
                <div
                  v-for="(item, index) in controls1"
                  :key="index"
                  class="t_con"
                >
                  <p class="t_name">{{ item.name }}</p>
                  <p class="t_footer">
                    <span class="t_count">{{ item.count }}</span>
                    <span class="t_img1" v-if="item.isShow == true">
                      {{ item.percent }}
                      <img src="../assets/tan/325数值上升.png" alt="" />
                    </span>
                    <span class="t_img2" v-else>
                      {{ item.percent }}%
                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
                    </span>
                  </p>
                </div>
              </div>
              <div class="cen_img">
                <img src="../assets/tan/组 3141.png" alt="" />
              </div>
              <div class="right">
                <div
                  v-for="(item, index) in controls2"
                  :key="index"
                  class="t_con"
                >
                  <p class="t_name">{{ item.name }}</p>
                  <p class="t_footer">
                    <span class="t_count">{{ item.count }}</span>
                    <span class="t_img1" v-if="item.isShow == true">
                      {{ item.percent }}
                      <img src="../assets/tan/325数值上升.png" alt="" />
                    </span>
                    <span class="t_img2" v-else>
                      {{ item.percent }}%
                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nyxhqk">
          <p class="title">主要能源消耗情况</p>
          <div id="nyxhqk"></div>
        </div>
        <div class="qyydlpm">
          <p class="title">
            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
          </p>
          <ul class="list">
            <li v-for="(item, index) in list" :style="listClass(index)">
              <p>{{ index + 1 }}</p>
              <p>{{ item.name }}</p>
              <p>{{ item.value }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div id="map"></div>
      <div class="tooltip">
        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
        <div class="title1">碳排放监测数据总览</div>
        <div class="txt">
          <div class="one">
            <span>接入用户数:</span>
            <p style="color: #d9e363">
              300<span style="color: #d9e363">户</span>
            </p>
          </div>
          <div class="two">
            <span>碳排放总量:</span>
            <p style="color: #44bfd6">
              450<span style="color: #44bfd6">万千瓦时</span>
            </p>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="qyhyfb">
          <p class="title">企业行业分布</p>
          <div id="qyhyfb"></div>
        </div>
        <div class="hytpfzl">
          <p class="title">行业碳排放总量</p>
          <div id="hytpfzl">
            <div id="dl"></div>
            <div id="gt"></div>
            <div id="sn"></div>
            <div id="zj"></div>
            <div id="sh"></div>
            <div id="hg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import * as echarts from "echarts";
const fontSizeRem = (size) => {
  const clientWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  if (!clientWidth) return;
  console.log(clientWidth);
  let fontSize = clientWidth / 1920; //尺寸大小
  return size * fontSize;
};
import * as echarts from "echarts";
// import { fontSizeRem } from "../assets/function";
export default {
  data() {
    return {
      res: "日",
      type: "总量",
      tjlist: [
        {
          name: "工业生产",
          count: "10",
        },
        {
          name: "商业楼宇",
          count: "22",
        },
        {
          name: "公共建设",
          count: "18",
        },
        {
          name: "其他",
          count: "50",
        },
      ],
      controls2: [
        {
          name: "汽油（万升）",
          count: "2566",
          isShow: true,
          percent: "10",
        },
        {
          name: "柴油（万升）",
          count: "6566",
          isShow: true,
          percent: "10",
        },
        {
          name: "煤（吨）",
          count: "4566",
          isShow: true,
          percent: "10",
        },
      ],
      controls1: [
        {
          name: "电（万度）",
          count: "4566",
          isShow: true,
          percent: "10",
        },

        {
          name: "水（万吨）",
          count: "5566",
          isShow: false,
          percent: "10",
        },

        {
          name: "燃气（立方）",
          count: "7566",
          isShow: true,
          percent: "10",
        },
      ],
      list: [
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
        {
          name: "济南综合新能源服务有线公司",
          value: "236",
        },
      ],
      option: {
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "cross",
        //     label: {
        //       backgroundColor: "#6a7985",
        //     },
        //   },
        // },
        // legend: {
        //     left: "right",
        //     data: [
        //         { icon: "roundRect", name: "昨日" },
        //         { icon: "roundRect", name: "今日" },
        //     ],
        //     textStyle: {
        //         fontSize: 14,
        //         fontFamily: "AlibabaPuHuiTi",
        //         fontWeight: 400,
        //         color: "rgba(255,255,255,0.8)",
        //     },
        // },

        grid: {
          left: "4%",
          right: "4%",
          bottom: "3%",
          top: "20%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                // .0625rem /* 12/192 */
                // fontSize: fontSizeRem(12),
                fontSize: "0.625rem",
                fontFamily: "AlibabaPuHuiTi",
                fontWeight: 400,
                color: "rgba(255,255,255,0.8)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:万吨标煤",
            nameTextStyle: {
              color: "#fff",
              // .072917rem /* 14/192 */
              // fontSize: fontSizeRem(14),
              fontSize: "0.72rem",
              padding: fontSizeRem(10),
            },
            axisLabel: {
              show: true,
              textStyle: {
                // fontSize: fontSizeRem(14),
                fontSize: "0.72rem",
                fontFamily: "AlibabaPuHuiTi",
                fontWeight: 400,
                color: "rgba(255,255,255,0.8)",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "line",
            stack: "Total",
            smooth: true,
            // .010417rem /* 2/192 */
            lineStyle: {
              // width: fontSizeRem(2),
              width: "0.10rem",
              color: "#29F1FA",
            },
            showSymbol: false,
            itemStyle: {
              color: "#29F1FA",
            },
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(7, 51, 99)",
                },
                {
                  offset: 1,
                  color: "rgb(7, 67, 103)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [
              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
            ],
          },
        ],
      },
      option1: {
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "cross",
        //     label: {
        //       backgroundColor: "#6a7985",
        //     },
        //   },
        // },
        legend: {
          left: "right",
          top: 40,
          data: [
            { icon: "", name: "2022" },
            { icon: "", name: "2023" },
          ],
          textStyle: {
            // fontSize: fontSizeRem(14),
            fontSize: "0.72rem",
            fontFamily: "AlibabaPuHuiTi",
            fontWeight: 400,
            color: "rgba(255,255,255,0.8)",
          },
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "3%",
          top: "30%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                // .0625rem /* 12/192 */
                fontSize: fontSizeRem(12),
                fontSize: "0.625rem",
                fontFamily: "AlibabaPuHuiTi",
                fontWeight: 400,
                color: "rgba(255,255,255,0.8)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:万吨",
            nameTextStyle: {
              color: "#fff",
              fontSize: fontSizeRem(14),
              padding: 10,
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: fontSizeRem(14),
                fontFamily: "AlibabaPuHuiTi",
                fontWeight: 400,
                color: "rgba(255,255,255,0.8)",
              },
            },
          },
        ],
        series: [
          {
            name: "2022",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: fontSizeRem(2),
              color: "#FDCC00",
            },
            showSymbol: false,
            itemStyle: {
              color: "#FDCC00",
            },
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(7, 51, 99)",
                },
                {
                  offset: 1,
                  color: "rgb(7, 67, 103)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [
              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
            ],
          },
          {
            name: "2023",
            type: "line",
            // stack: "Total",
            smooth: true,
            lineStyle: {
              width: 2,
              color: "#1B7EF2",
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: "#1B7EF2",
            },
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(7, 51, 96)",
                },
                {
                  offset: 1,
                  color: "rgb(9, 58, 117)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [
              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
              120, 150, 180,
            ],
          },
        ],
      },
      circles1: {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          // {
          //     text: "单位：%",
          //     top: 0,
          //     left: 0,
          //     textStyle: {
          //         fontWeight: "normal",
          //         fontSize: 16,
          //         color: "#fff",
          //     },
          // },
          {
            text: "{a|" + Math.round((845 * 100) / 100) + "}",
            show: true,
            x: "center",
            y: "36%",
            textStyle: {
              rich: {
                a: {
                  fontSize: fontSizeRem(16),
                  color: "#FFFFFF",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "电力",
            x: "center",
            y: "50%",
            borderColor: "#fff",
            textStyle: {
              fontWeight: "normal",
              fontSize: fontSizeRem(12),
              color: "#fff",
            },
          },
        ],
        polar: {
          center: ["50%", "40%"],
          radius: ["60%", "75%"],
        },
        angleAxis: {
          max: 1000,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [845],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(19, 84, 146, .4)",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#005DCF",
                  },
                  {
                    offset: 1,
                    color: "#00CCFF",
                  },
                ]),
              },
            },
          },
        ],
      },
      circles2: {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          // {
          //     text: "单位：%",
          //     top: 0,
          //     left: 0,
          //     textStyle: {
          //         fontWeight: "normal",
          //         fontSize: 16,
          //         color: "#fff",
          //     },
          // },
          {
            text: "{a|" + Math.round((845 * 100) / 100) + "}",
            show: true,
            x: "center",
            y: "36%",
            textStyle: {
              rich: {
                a: {
                  fontSize: fontSizeRem(16),
                  color: "#FFFFFF",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "钢铁",
            x: "center",
            y: "50%",
            borderColor: "#fff",
            textStyle: {
              fontWeight: "normal",
              fontSize: fontSizeRem(12),
              color: "#fff",
            },
          },
        ],
        polar: {
          center: ["50%", "40%"],
          radius: ["60%", "75%"],
        },
        angleAxis: {
          max: 1000,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [845],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(19, 84, 146, .4)",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#005DCF",
                  },
                  {
                    offset: 1,
                    color: "#00CCFF",
                  },
                ]),
              },
            },
          },
        ],
      },
      circles3: {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          // {
          //     text: "单位：%",
          //     top: 0,
          //     left: 0,
          //     textStyle: {
          //         fontWeight: "normal",
          //         fontSize: 16,
          //         color: "#fff",
          //     },
          // },
          {
            text: "{a|" + Math.round((845 * 100) / 100) + "}",
            show: true,
            x: "center",
            y: "36%",
            textStyle: {
              rich: {
                a: {
                  fontSize: fontSizeRem(16),
                  color: "#FFFFFF",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "水泥",
            x: "center",
            y: "50%",
            borderColor: "#fff",
            textStyle: {
              fontWeight: "normal",
              fontSize: fontSizeRem(12),
              color: "#fff",
            },
          },
        ],
        polar: {
          center: ["50%", "40%"],
          radius: ["60%", "75%"],
        },
        angleAxis: {
          max: 1000,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [845],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(19, 84, 146, .4)",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#005DCF",
                  },
                  {
                    offset: 1,
                    color: "#00CCFF",
                  },
                ]),
              },
            },
          },
        ],
      },
      circles4: {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          // {
          //     text: "单位：%",
          //     top: 0,
          //     left: 0,
          //     textStyle: {
          //         fontWeight: "normal",
          //         fontSize: 16,
          //         color: "#fff",
          //     },
          // },
          {
            text: "{a|" + Math.round((845 * 100) / 100) + "}",
            show: true,
            x: "center",
            y: "35%",
            textStyle: {
              rich: {
                a: {
                  fontSize: fontSizeRem(16),
                  color: "#FFFFFF",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "治金",
            x: "center",
            y: "50%",
            borderColor: "#fff",
            textStyle: {
              fontWeight: "normal",
              fontSize: fontSizeRem(12),
              color: "#fff",
            },
          },
        ],
        polar: {
          center: ["50%", "40%"],
          radius: ["60%", "75%"],
        },
        angleAxis: {
          max: 1000,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [845],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(19, 84, 146, .4)",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#005DCF",
                  },
                  {
                    offset: 1,
                    color: "#00CCFF",
                  },
                ]),
              },
            },
          },
        ],
      },
      circles5: {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          // {
          //     text: "单位：%",
          //     top: 0,
          //     left: 0,
          //     textStyle: {
          //         fontWeight: "normal",
          //         fontSize: 16,
          //         color: "#fff",
          //     },
          // },
          {
            text: "{a|" + Math.round((845 * 100) / 100) + "}",
            show: true,
            x: "center",
            y: "36%",
            textStyle: {
              rich: {
                a: {
                  fontSize: fontSizeRem(16),
                  color: "#FFFFFF",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "石化",
            x: "center",
            y: "50%",
            borderColor: "#fff",
            textStyle: {
              fontWeight: "normal",
              fontSize: fontSizeRem(12),
              color: "#fff",
            },
          },
        ],
        polar: {
          center: ["50%", "40%"],
          radius: ["60%", "75%"],
        },
        angleAxis: {
          max: 1000,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [845],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(19, 84, 146, .4)",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#005DCF",
                  },
                  {
                    offset: 1,
                    color: "#00CCFF",
                  },
                ]),
              },
            },
          },
        ],
      },
      circles6: {
        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
        title: [
          // {
          //     text: "单位：%",
          //     top: 0,
          //     left: 0,
          //     textStyle: {
          //         fontWeight: "normal",
          //         fontSize: 16,
          //         color: "#fff",
          //     },
          // },
          {
            text: "{a|" + Math.round((845 * 100) / 100) + "}",
            show: true,
            x: "center",
            y: "36%",
            textStyle: {
              rich: {
                a: {
                  fontSize: fontSizeRem(16),
                  color: "#FFFFFF",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "化工",
            x: "center",
            y: "50%",
            borderColor: "#fff",
            textStyle: {
              fontWeight: "normal",
              fontSize: fontSizeRem(12),
              color: "#fff",
            },
          },
        ],
        polar: {
          center: ["50%", "40%"],
          radius: ["60%", "75%"],
        },
        angleAxis: {
          max: 1000,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [845],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(19, 84, 146, .4)",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#005DCF",
                  },
                  {
                    offset: 1,
                    color: "#00CCFF",
                  },
                ]),
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    listClass(index) {
      if (index == 0) {
        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
      } else if (index == 1) {
        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
      } else if (index == 2) {
        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
      }
    },
    defineEcharts(dom, option) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom, null, {
        devicePixelRatio: 10, // 设置为2或更高的值
      });
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //用户行业占比
    initYhhyzb() {
      let color = [
        "#2B4C86",
        "#86ACCE ",
        "#9CA5B4",
        "#23BAA6",
        "#459EA2",
        "#2B7DE4",
        "#7C7062",
        "#6B7BC0",
        "#294A83",
      ];
      let echartData = [
        {
          name: "发电行业",
          value: "20",
        },
        {
          name: "石化行业",
          value: "20",
        },
        {
          name: "化工行业",
          value: "30",
        },
        {
          name: "建材行业",
          value: "20",
        },
        {
          name: "钢铁行业",
          value: "20",
        },
        {
          name: "有色行业",
          value: "20",
        },
        {
          name: "造纸行业",
          value: "20",
        },
        {
          name: "航空行业",
          value: "20",
        },
        {
          name: "其他行业",
          value: "20",
        },
      ];
      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);

      let option = {
        color: color,
        // tooltip: {
        //   trigger: "item",
        // },
        title: [
          {
            text:
              "{val|" +
              echartData[0].value +
              "%" +
              "}\n{name|" +
              echartData[0].name +
              "}",
            top: "center",
            left: "34%",
            textStyle: {
              rich: {
                name: {
                  fontSize: fontSizeRem(12),
                  fontWeight: "normal",
                  color: "#fff",
                  align: "center",
                  padding: [10, 0],
                },
                val: {
                  fontSize: fontSizeRem(24),
                  fontWeight: "bold",
                  align: "center",
                  color: "#fff",
                },
              },
            },
          },
        ],
        legend: {
          orient: "vertical",
          icon: "circle",
          x: "70%",
          y: "20%",
          itemWidth: 12,
          itemHeight: 12,
          align: "left",
          textStyle: {
            color: "#",
            rich: {
              name: {
                fontSize: fontSizeRem(12),
              },
              value: {
                fontSize: fontSizeRem(16),
                padding: [0, 5, 0, 15],
              },
              unit: {
                fontSize: fontSizeRem(12),
              },
            },
          },
          formatter: function (name) {
            let res = echartData.filter((v) => v.name === name);
            res = res[0] || {};
            let unit = res.unit || "";
            return (
              "{name|" +
              name +
              "}  {value|" +
              res.value +
              "%" +
              "}{unit|" +
              unit +
              "}"
            );
          },
        },
        series: [
          {
            type: "pie",
            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
            animation: false, // 禁止动画效果
            radius: ["45%", "60%"],
            center: ["40%", "50%"],
            data: echartData,

            itemStyle: {
              normal: {
                borderWidth: 0,
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
      };
      this.defineEcharts("qyhyfb", option);
    },
    initMap() {
      //后端返回的数据
      var data = [
        {
          name: "济南市",
          value: 1,
          coord: [117.000923, 36.675807],
        },
        {
          name: "青岛市",
          value: 2,
          coord: [120.382639, 36.067082],
        },
        {
          name: "淄博市",
          value: 3,
          coord: [118.059134, 36.804685],
        },
        {
          name: "枣庄市",
          value: 4,
          coord: [117.557964, 34.856424],
        },
        {
          name: "东营市",
          value: 5,
          coord: [118.674767, 37.434751],
        },
        {
          name: "烟台市",
          value: 6,
          coord: [121.447935, 37.463822],
        },
        {
          name: "潍坊市",
          value: 7,
          coord: [119.161756, 36.706774],
        },
        {
          name: "济宁市",
          value: 8,
          coord: [116.587245, 35.415393],
        },
        {
          name: "泰安市",
          value: 9,
          coord: [117.089415, 36.188078],
        },
        {
          name: "威海市",
          value: 10,
          coord: [122.120419, 37.513068],
        },
        {
          name: "日照市",
          value: 11,
          coord: [119.526888, 35.416377],
        },
        {
          name: "临沂市",
          value: 12,
          coord: [118.356448, 35.104672],
        },
        {
          name: "德州市",
          value: 13,
          coord: [116.357465, 37.434093],
        },
        {
          name: "聊城市",
          value: 14,
          coord: [115.986869, 36.455829],
        },
        {
          name: "滨州市",
          value: 15,
          coord: [118.016974, 37.383542],
        },
        {
          name: "菏泽市",
          value: 16,
          coord: [115.469381, 35.246531],
        },
      ];
      var chartDom = document.getElementById("map");
      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      //获取山东地图数据。
      $.get(
        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
        function (geojson) {
          echarts.registerMap("山东", geojson);
          let option = {
            series: [
              {
                tooltip: {
                  trigger: "item",
                  // show: false,
                },
                name: "山东",
                type: "map",
                map: "山东",
                boxDepth: 60, //地图倾斜度
                regionHeight: 6, //地图厚度
                aspectScale: 0.9, //地图长宽比
                emphasis: {
                  itemStyle: {
                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
                    borderWidth: 2, // 高亮时的边框宽度
                  },
                  label: {
                    fontSize: 12, // 选中地图文字字号和字体颜色
                    color: "#fff",
                  },
                },
                label: {
                  show: true, //是否显示市
                  formatter: function (params) {
                    var name = params.name;
                    var value = params.value;
                    var text = ` {fline|${value}}\n{tline|${name}} `;
                    return text;
                  },
                  textStyle: {
                    color: "#000", //文字颜色
                    fontSize: 16, //文字大小
                    fontFamily: "微软雅黑",
                    // backgroundColor: {
                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
                    // },
                    // padding: [15, 20],
                  },
                  rich: {
                    fline: {
                      padding: [0, 35],
                      color: "#FDCC00",
                      fontSize: 14,
                      fontWeight: 600,
                    },
                    tline: {
                      padding: [0, 27],
                      color: "#fff",
                      fontSize: 12,
                    },
                  },
                },
                itemStyle: {
                  opacity: 0.8, // 透明度
                  borderWidth: 2, //分界线宽度
                  borderColor: "#0699E4", //分界线颜色
                  areaColor: {
                    x: 0.5,
                    y: 0.7,
                    r: 0.5,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(20,110,230,0.4)",
                      },
                      {
                        offset: 1,
                        color: "rgba(6,33,121,0.4)",
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
                groundplane: {
                  show: true,
                },
                data: data,
                z: 999,
                shading: "realistic",
                // 真实感材质相关配置 shading: 'realistic'时有效
                realisticMaterial: {
                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                  roughness: 0.8, // 调整光照模型的粗糙度
                  metalness: 0.0, // 调整金属感，0.0 为非金属
                  roughnessAdjust: 0,
                },
                viewControl: {
                  distance: 90, // 地图视角 控制初始大小
                  rotateSensitivity: 0, // 旋转
                  zoomSensitivity: 1.5, // 缩放
                },
                zoom: 1.25,
              },
            ],
            animation: true,
          };

          myChart.setOption(option);
          myChart.on("click", chartClick);
          //点击地图区域事件
          function chartClick(param) {
            console.log(param);
            myChart.setOption(option, false);
            window.addEventListener("resize", function () {
              myChart.resize();
            });
            // var selectedPro = param.name;
            // if (!cityProper[selectedPro]) {
            //   option.series.splice(1);
            //   option.legend = null;
            //   option.visualMap = null;
            //   myChart.setOption(option, true);
            //   return;
            // }
            //获取点击区域数据
            // $.get(cityProper[selectedPro], function (geojson) {
            //   echarts.registerMap(selectedPro, geojson);
            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
            //   option.series[0] = {
            //     name: "",
            //     type: "map",
            //     map: selectedPro,
            //     boxDepth: 80, //地图倾斜度
            //     regionHeight: 5, //地图厚度
            //     itemStyle: {
            //       normal: {
            //         label: {
            //           show: true,
            //         },
            //       },
            //       emphasis: {
            //         label: {
            //           show: true,
            //         },
            //       },
            //     },
            //     groundplane: {
            //       show: false,
            //     },
            //     data: data,
            //     shading: "realistic",
            //     // 真实感材质相关配置 shading: 'realistic'时有效
            //     realisticMaterial: {
            //       detailTexture: "#fff", // 纹理贴图
            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
            //       metalness: 0, // 0材质是非金属 ，1金属
            //       roughnessAdjust: 0,
            //     },
            //     viewControl: {
            //       distance: 30, // 地图视角 控制初始大小
            //       rotateSensitivity: 1, // 旋转
            //       zoomSensitivity: 1, // 缩放
            //     },
            //   };
            //   myChart.setOption(option);
            // });
          }
        }
      );
    },
    nyxhqk() {
      var attaData1 = [62, 52, 34, 61, 75, 140];
      var attaData2 = [162, 152, 134, 161, 115, 150];
      let option = {
        // backgroundColor: "#000",
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 60,
          left: 60,
          bottom: 20,
          right: 40,
        },
        legend: {
          left: "center",
          top: 40,
          data: [
            {
              name: "2020",
              icon: "rect",
            },
            {
              name: "2021",
              icon: "rect",
            },
          ],
          textStyle: {
            fontSize: 14,
            fontWeight: 400,
            color: "rgba(255,255,255,0.8)",
          },
        },
        xAxis: {
          show: false,
          type: "value",
          name: "",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              type: "dashed",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              type: "dashed",
            },
          },
        },
        yAxis: {
          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "2020",
            type: "bar",
            barWidth: 8,
            zlevel: 2,
            itemStyle: {
              borderRadius: 4,
              color: "#12FFFA",
            },
            data: attaData1,
            showBackground: true, //柱状背景
            backgroundStyle: {
              //背景颜色，加透明度
              color: "#0E296D",
            },
          },
          {
            name: "2021",
            type: "bar",
            barWidth: 8,
            zlevel: 2,
            itemStyle: {
              color: "#FF8B4D",
              borderRadius: 4,
            },
            data: attaData2,
            showBackground: true, //柱状背景
            backgroundStyle: {
              //背景颜色，加透明度
              color: "#0E296D",
            },
          },
        ],
      };
      this.defineEcharts("nyxhqk", option);
    },
  },
  mounted() {
    console.log(fontSizeRem(22));
    console.log(fontSizeRem(100));
    this.initYhhyzb();
    this.defineEcharts("ssfhzs", this.option);
    this.defineEcharts("ynl", this.option1);
    // this.dl();
    this.defineEcharts("dl", this.circles1);
    this.defineEcharts("gt", this.circles2);
    this.defineEcharts("sn", this.circles3);
    this.defineEcharts("zj", this.circles4);
    this.defineEcharts("sh", this.circles5);
    this.defineEcharts("hg", this.circles6);
    this.nyxhqk();
    this.initMap();
  },
  beforeDestroy() {
    //离开页面后，删除屏幕监听，防止监听事件一直存在
    window.removeEventListener("resize", this.getResize);
  },
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;

  .title {
    width: 100%;
    height: 76px;
    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    p {
      width: 527px;
      height: 47px;
      font-size: 44px;
      // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
      font-weight: 600;
      line-height: 47px;
      letter-spacing: 3px;
      color: #fff;
      margin-left: -60px;
    }

    img:nth-of-type(1) {
      width: 231px;
      height: 59px;
    }

    img:nth-of-type(2) {
      width: 158px;
      height: 28px;
    }
  }

  .containter {
    width: 100%;
    height: 967px;
    display: flex;
    position: relative;
    justify-content: space-between;

    .left {
      width: 436px;
      height: 100%;

      .jrtj {
        height: 294px;
        width: 100%;
        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
        background-size: cover;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18;
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        .centers {
          width: 217px;
          height: 126px;
          position: absolute;
          // left: 70px;
          // top: 50px;
          left: 0.45rem;
          top: 0.45rem;
          // text-align: center;
          display: block;

          p:nth-child(1) {
            width: 81px;
            height: 25px;
            font-size: 24;
            text-align: center;
            font-weight: 500;
            color: #29f1fa;
            line-height: 22px;
            position: absolute;
            left: 72px;
            // top: 50px;
            top: 0.13rem;
          }

          p:nth-child(2) {
            // width: 71px;
            height: 25px;
            text-align: center;
            font-size: 12;
            font-weight: 250;
            color: #ffffff;
            line-height: 22px;
            position: absolute;
            left: 72px;
            top: 0.25rem;
            // top: 80px;
          }

          img {
            width: 217px;
            height: 126px;
          }
        }

        .insides {
          margin-top: 56px;
          width: 436px;
          height: 294px;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          position: relative;

          .con {
            width: 156px;
            display: flex;

            img {
              width: 50px;
              height: 60px;
              display: block;
            }

            p:nth-child(1) {
              color: #fff;
            }

            p:nth-child(2) {
              width: 56px;
              height: 22px;
              font-size: 14;
              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
              font-weight: 300;
              color: #7dd9dd;
              line-height: 22px;
            }
          }
        }
      }

      .ssfhzs {
        height: 315px;
        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
        background-size: cover;
        margin-top: 6px;
        position: relative;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        .typeBox {
          list-style: none;
          display: flex;
          position: absolute;
          top: 54px;
          right: 20px;
          // left: 50%;
          // transform: translateX(-50%);

          li {
            width: 39px;
            height: 21px;
            background: rgba(29, 29, 29, 0.5);
            border-radius: 2px 2px 2px 2px;
            font-size: 14px;
            border: 1px solid #666666;
            text-align: center;
            margin: 2.5px;
            cursor: pointer;
          }

          .active {
            background: rgba(10, 167, 255, 0.3);
            border: 1px solid #0aa7ff;
          }
        }

        #ssfhzs {
          position: absolute;
          width: 100%;
          height: 210px;
          bottom: 10px;
        }
      }

      .ynl {
        height: 325px;
        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
        background-size: cover;
        margin-top: 6px;

        position: relative;

        .title {
          position: absolute;
          left: 190px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          // font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        .typeBox {
          list-style: none;
          display: flex;
          position: absolute;
          top: 54px;
          left: 50%;
          transform: translateX(-50%);

          li {
            width: 39px;
            height: 21px;
            background: rgba(29, 29, 29, 0.5);
            border-radius: 2px 2px 2px 2px;
            font-size: 14px;
            border: 1px solid #666666;
            text-align: center;
            margin: 2.5px;
            cursor: pointer;
          }

          .active {
            background: rgba(10, 167, 255, 0.3);
            border: 1px solid #0aa7ff;
          }
        }

        #ynl {
          position: absolute;
          width: 100%;
          height: 300px;
          bottom: 10px;
        }
      }
    }

    .right {
      width: 436px;
      height: 100%;

      .tyjg {
        height: 294px;
        width: 100%;
        background: url("../assets/tan/组\ 3142.png");
        background-size: cover;
        position: relative;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        #tyjg {
          width: 100%;
          height: 100%;

          .t_content {
            width: 100%;
            height: 300px;
            display: flex;
            justify-content: space-around;
            // flex-wrap: wrap;
            // align-content: space-between;
          }

          .cen_img {
            width: 159px;
            height: 159px;
            border: none;
            display: block;
            margin: 0 auto;
            margin-top: 90px;

            img {
              width: 159px;
              height: 159px;
              border: none;
              display: block;
              margin: 0 auto;
            }
          }

          .t_con {
            width: 106px;
            height: 60px;
            margin-left: 20px;
            margin-top: 60px;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            padding: 2px;
            border: 1px solid #6bfffe;
            text-align: center;
            box-sizing: border-box;

            .t_name {
              width: 90px;
              height: 30px;
              font-size: 12px;
              // font-family: Source Han Sans, Source Han Sans;
              font-weight: 350;
              color: #ffffff;
              line-height: 30px;
              display: block;
            }

            .t.footer {
              display: flex;

              .t_count {
                width: 42px;
                height: 36px;
                font-size: 18px;
                // font-family: Source Han Sans, Source Han Sans;
                font-weight: 500;
                color: #ffffff;
                line-height: 36px;
                display: block;
              }

              .t_img1 {
                width: 25px;
                height: 36px;
                font-size: 12px;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #0cd9b5;
                line-height: 36px;
                display: block;
              }

              .t_img2 {
                padding: 0;
                width: 25px;
                height: 36px;
                font-size: 12px;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                line-height: 36px;
                color: #f71f1f;
                display: block;

                img {
                  width: 12px;
                  height: 12px;
                }
              }
            }
          }

          .t_con:nth-child(n + 2) {
            margin-top: 20px;
          }
        }
      }

      .nyxhqk {
        height: 294px;
        width: 100%;
        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
        background-size: cover;
        position: relative;
        margin-top: 6px;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        #nyxhqk {
          width: 100%;
          height: 100%;
        }

        .pic {
          width: 300px;
          position: absolute;
          height: 150px;
          top: 100px;
          left: 40px;
        }
      }

      .qyydlpm {
        height: 353px;
        width: 100%;
        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
        background-size: cover;
        position: relative;
        margin-top: 6px;

        .title {
          position: absolute;
          left: 136px;
          width: 246px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
          display: flex;
          // justify-content: flex-start;

          .danwei {
            // position: absolute;
            // right: 50px;
            width: 75px;
            height: 14px;
            font-size: 12px;
            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
            font-weight: 400;
            color: #ffffff;
            line-height: 14px;
            display: block;
          }
        }

        .list {
          list-style: none;
          height: 300px;
          width: 100%;
          float: left;
          margin-top: 50px;

          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px 0 30px;
            box-sizing: border-box;
            margin: 9px;

            p:nth-of-type(1) {
              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
              width: 24px;
              height: 16px;
              line-height: 16px;
              background: rgba(34, 23, 23, 0.1);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
              text-align: center;
              border: 1px solid #b1b1b1;
              background-size: cover;
            }

            p:nth-of-type(2) {
              width: 190px;
              height: 12px;
              font-size: 14px;
              font-family: "AlibabaPuHuiTi";
              font-weight: 400;
              color: rgba(255, 255, 255, 0.8);
              line-height: 12px;
            }

            p:nth-of-type(3) {
              width: 27px;
              height: 12px;
              font-size: 14px;
              font-family: "AlibabaPuHuiTi";
              font-weight: 500;
              color: rgba(255, 255, 255, 0.8);
              line-height: 12px;
            }
          }
        }
      }
    }

    .footer {
      position: absolute;
      width: 994px;
      height: 325px;
      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
      // background-size: cover;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;

      .qyhyfb {
        width: 492px;
        height: 100%;
        background: url(../assets/tan/组\ 3126.png);
        background-size: cover;
        position: relative;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        #qyhyfb {
          width: 100%;
          height: 300px;
        }
      }

      .hytpfzl {
        width: 492px;
        height: 100%;
        background: url(../assets/tan/组\ 3126.png);
        background-size: cover;
        position: relative;

        .title {
          position: absolute;
          left: 160px;
          width: 144px;
          height: 36px;
          font-size: 18px;
          font-family: "Source Han Sans";
          font-weight: 700;
          color: rgba(255, 255, 255, 0.87);
          line-height: 36px;
        }

        #hytpfzl {
          width: 100%;
          height: 100%;
          padding-top: 50px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-content: center;
          // align-items: center;

          #dl,
          #gt,
          #sn,
          #zj,
          #sh,
          #hg {
            width: 132px;
            height: 132px;
            // background-color: red;
          }
        }
      }
    }

    #map {
      width: 994px;
      position: absolute;
      height: 627px;
      left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
    }
    .tooltip {
      position: absolute;
      width: 281px;
      height: 170px;
      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
      background-size: cover;
      z-index: 1;
      top: 418px;
      right: 542px;
      padding: 14px;
      box-sizing: border-box;
      padding-top: 36px;

      img {
        position: absolute;
        width: 11px;
        height: 11px;
        top: 42px;
        right: 14px;
        cursor: pointer;
        margin-right: 14px;
      }

      .title1 {
        height: 27px;
        font-size: 22px;
        font-family: "YouSheBiaoTiHei";
        font-weight: 400;
        color: #60edff;
        line-height: 25px;
        margin-bottom: 10px;
      }

      .txt {
        display: flex;
        flex-direction: column;
        width: 100%;
        font-family: "AlibabaPuHuiTi";

        div {
          display: flex;
          align-items: center;
          margin: 10px;
          margin-left: 0;

          span:nth-of-type(1) {
            width: 89px;
            height: 21px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.87);
            line-height: 20px;
          }

          p {
            width: 143px;
            height: 21px;
            font-size: 30px;
            font-weight: 700;
            line-height: 20px;

            span {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
