hwmom-ui/src/views/index-1.vue

<template>
  <div class="content">
    <div class="title">轮胎工厂控制中心</div>

    <div class="card card1"></div>
    <div class="text text1">质量情况</div>
    <div class="icon icon1"></div>
    <div class="text text2">100%</div>
    <div class="text text3">产品合格率</div>
    <div class="icon icon2"></div>
    <div class="text text4">98%</div>
    <div class="text text5">来料合格率</div>

    <div class="card card2"></div>
    <div class="text text6">工厂产量情况（当日）</div>
    <div class="icon icon3"></div>
    <div class="icon icon4"></div>
    <div class="icon icon5"></div>
    <div class="icon icon6"></div>
    <div class="icon icon7"></div>
    <div class="icon icon8"></div>
    <div class="text text7">95%</div>
    <div class="text text8">平均交付率</div>

    <div class="card card3"></div>
    <div class="text text9">销量</div>

    <div class="card card4"></div>
    <div class="text text10">设备运行状态</div>
    <div class="icon icon9"></div>
    <div class="text text11">设备总数</div>
    <div class="text text12">92</div>
    <div class="text text13">台</div>
    <div class="icon icon10"></div>
    <div class="text text14">90%</div>
    <div class="icon icon11"></div>
    <div class="text text15">设备开机率</div>
    <div class="icon icon12"></div>
    <div class="text text16">72</div>
    <div class="text text17">台</div>
    <div class="text text18">运行数量</div>
    <div class="icon icon13"></div>
    <div class="text text19">2</div>
    <div class="text text20">台</div>
    <div class="text text21">故障数量</div>
    <div class="icon icon14"></div>
    <div class="text text22">7</div>
    <div class="text text23">台</div>
    <div class="text text24">停机数量</div>

    <div class="card card5"></div>
    <div class="text text25">能源管理</div>
    <div class="icon icon15"></div>
    <div class="text text26">区域能耗:kw-h</div>

    <div class="card card6"></div>
    <div class="text text27">异常警告状况</div>

    <div class="icon icon16"></div>
    <div class="text text28">434</div>
    <div class="text text29">设备异常</div>

    <div class="icon icon17"></div>
    <div class="text text30">365</div>
    <div class="text text31">原料异常</div>

    <div class="icon icon18"></div>
    <div class="text text32">321</div>
    <div class="text text33">质量异常</div>

    <div class="icon icon19"></div>
    <div class="text text34">312</div>
    <div class="text text35">生产异常</div>

    <div class="icon icon20"></div>
    <div class="text text36">298</div>
    <div class="text text37">人员异常</div>

    <div class="table1">
      <div style="background-color: #05346044" class="tableTh">
        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
          工厂名称
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
          总数（单位W）
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
          合格数（单位W）
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
          一次交检合格率
        </div>
      </div>
      <vue3-scroll-seamless
        :class-options="scrollTableOption"
        :data="table1Data"
        class="case-item"
        style="height: calc(100% - 1vw);overflow: hidden;"
      >
        <div
          v-for="(item, index) in table1Data"
          :key="index"
        >
          <div style="height: 1vw"
               :style='"background-color:" + ((index % 2 === 0)? "#073978":"#00000000")'>
            <div
              class="scrollTableItem">
              {{ item.value1 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value3 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value4 }}
            </div>
          </div>
        </div>
      </vue3-scroll-seamless>
    </div>
    <div class="chart1">
      <div ref="chart1Ref" style="width: 100%;height: 100%;" />
    </div>
    <div class="chart2">
      <div ref="chart2Ref" style="width: 100%;height: 100%;" />
    </div>
    <div class="table2">
      <div class="item" v-for="i in table2Data">
        <div class="value1">
          <div class="span">
            {{ i.value1 }}
          </div>
        </div>
        <div class="value2">
          <div class="a">
            <div class="b" :style="`width:${(i.value2 / 1000) * 100}%`"></div>
          </div>
        </div>
        <div class="value3">
          <div class="span">
            {{ i.value2 }}kw
          </div>
        </div>
      </div>
    </div>
    <div class="chart3">
      <div ref="chart3Ref" style="width: 100%;height: 100%;" />
    </div>
    <div class="chart4">
      <div ref="chart4Ref" style="width: 100%;height: 100%;" />
    </div>
    <div class="chart5">
      <div ref="chart5Ref" style="width: 100%;height: 100%;" />
    </div>
  </div>
</template>

<script setup>
import Chart from '@/components/chart.vue';
import * as echarts from 'echarts';
import chinaJson from './china.json';
const props = defineProps({
  changeType: Function
})
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
echarts.registerMap('china', chinaJson);
const scrollTableOption = ref({
  limitMoveNum: 2,
  hoverStop: true
});
const table1Data = ref([
  {
    value1: '广东工厂',
    value2: '340',
    value3: '338',
    value4: '99.1%'
  },
  {
    value1: '湖北工厂',
    value2: '390',
    value3: '381',
    value4: '97.7%'
  },
  {
    value1: '山东工厂',
    value2: '412',
    value3: '410',
    value4: '99.5%'
  }
]);
const table2Data = ref([
  {
    value1: '广东工厂',
    value2: '900'
  },
  {
    value1: '山东工厂',
    value2: '800'
  },
  {
    value1: '河北工厂',
    value2: '700'
  },
  {
    value1: '湖北工厂',
    value2: '600'
  },
  {
    value1: '河南工厂',
    value2: '500'
  }
]);
const chart1Ref = ref();
const chart2Ref = ref();
const chart3Ref = ref();
const chart4Ref = ref();
const chart5Ref = ref();
onMounted(async () => {
  await nextTick();
  let chart1 = echarts.init(chart1Ref.value);
  let chart2 = echarts.init(chart2Ref.value);
  let chart3 = echarts.init(chart3Ref.value);
  let chart4 = echarts.init(chart4Ref.value);
  let chart5 = echarts.init(chart5Ref.value);
  chart1.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '30',
      right: '5%',
      bottom: '40',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: ['广东工厂\n(半钢)', '广东工厂\n(全钢)', '河北工厂\n(半钢)', '河北工厂\n(全钢)', '山东工厂', '湖北综合\n工厂', '河南工厂'],
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#ffffff',
        interval: 0,
        fontSize: 6
      }
    },

    yAxis: {
      type: 'value',
      splitLine: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 8
      }
    },

    series: [
      {
        name: '产量',
        type: 'bar',
        data: [220, 163, 540, 452, 398, 383, 187],
        barWidth: '40%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#4BF79C' },  // 顶部
              { offset: 1, color: '#012CFF' }   // 底部
            ]
          )
        }
      }
    ]
  });
  chart2.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '30',
      right: '5%',
      bottom: '40',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#ffffff',
        interval: 0,
        fontSize: 6
      }
    },

    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#ffffff'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#ffffff',
          fontSize: 8
        }
      },
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#ffffff'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#ffffff',
          fontSize: 8
        }
      }
    ],

    series: [
      {
        name: '数量',
        type: 'bar',
        data: [387, 422, 360, 401, 445, 395, 410, 432, 378, 400, 420, 390],
        barWidth: '40%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#205FFC' },  // 顶部
              { offset: 1, color: '#00000000' }   // 底部
            ]
          )
        }
      },
      {
        name: '达成率',
        type: 'line',
        yAxisIndex: 1,
        data: [79, 82, 75, 84, 80, 78, 85, 77, 81, 83, 76, 79],
        barWidth: '40%',
        lineStyle: { width: 1, color: '#fff' }
      }
    ]
  });
  chart3.setOption({
    radar: {
      indicator: [
        { name: '温度', max: 100 },
        { name: '天气', max: 100 },
        { name: '预期', max: 100 },
        { name: '能耗', max: 100 },
        { name: '风级', max: 100 },
        { name: '湿度', max: 100 }
      ],
      radius: '80%',
      splitLine: { lineStyle: { color: '#444' } },
      splitArea: { areaStyle: { color: ['#1E2A3A', '#14202B'] } },
      axisLine: { lineStyle: { color: '#555' } },
      axisName: {
        color: '#fff',
        fontSize: 8
      },
      axisNameGap: 0
    },
    series: [
      {
        name: '指标',
        type: 'radar',
        symbol: 'none',   // ⚡ 取消拐点
        data: [
          {
            value: [80, 60, 70, 50, 90, 65],
            name: '图表1',
            areaStyle: { color: 'rgba(93, 92, 183, 0.7)' },
            lineStyle: { color: '#0000' }
          },
          {
            value: [60, 80, 55, 70, 65, 90],
            name: '图表2',
            areaStyle: { color: 'rgba(120, 107, 170, 0.7)' },
            lineStyle: { color: '#0000' }
          },
          {
            value: [70, 75, 80, 60, 85, 70],
            name: '图表3',
            areaStyle: { color: 'rgba(147, 122, 157, 0.7)' },
            lineStyle: { color: '#0000' }
          },
          {
            value: [65, 70, 75, 80, 60, 85],
            name: '图表4',
            areaStyle: { color: 'rgba(173, 138, 143, 0.7)' },
            lineStyle: { color: '#0000' }
          },
          {
            value: [85, 60, 70, 75, 80, 65],
            name: '图表5',
            areaStyle: { color: 'rgba(128, 128, 128, 0.7)' },
            lineStyle: { color: '#0000' }
          }
        ]
      }
    ]
  });
  chart4.setOption({
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: '60%',
        data: [
          { value: 1048, name: '广东工厂' },
          { value: 735, name: '山东工厂' },
          { value: 580, name: '河北工厂' },
          { value: 484, name: '湖北工厂' },
          { value: 300, name: '河南工厂' }
        ],
        label: {
          show: true,
          color: '#ffffff',   // 文字颜色
          fontSize: 4,       // 文字大小
          fontWeight: 'normal'
        },
        labelLine: {
          show: true,
          length: 3,
          length2: 3,
          smooth: 0.2,   // 平滑曲线
          lineStyle: { color: '#fff', width: 1 }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
  chart5.setOption({
    geo: {
      map: "china",
      show: false,
      // aspectScale: 0.75, //长宽比
      zoom: 1.6,
      roam: false,
      center: [104, 35],
    },
    visualMap: {
      show: false,
      min: 0,
      max: 100,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: true,
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '示例数据',
        type: 'map',
        map: 'china',
        roam: false,
        zoom: 1.6,
        center: [104, 35],
        itemStyle: {
          areaColor: '#007AA999',
          borderColor: '#fff6',
          borderWidth: 1
        },
        label: {
          show: true,
          color: '#fff',
          fontSize: 6
        },
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        showEffectOn: 'emphasis',
        zlevel: 1,
        rippleEffect: {
          period: 15,
          scale: 1,
          brushType: "fill",
        },
        hoverAnimation: true,
        itemStyle: {
          normal: {
            color: "#FEC03D",
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        data: [
          { name: '河北工厂', value: [114.5025, 38.0455] },
          { name: '山东工厂', value: [117.0009, 36.6758] },
          { name: '湖南工厂', value: [112.9823, 28.1941] },
          { name: '广东工厂', value: [113.2806, 23.1252] }
        ],
        label: {
          padding: [-16, 0, 0, 5],
          show: true,
          position: 'bottom',
          // align:'left',
          formatter: function (val) {
            return `{b|${val.data.name}}`
          },
          rich: {
            b: {
              padding: [0, 0, 0, 5],
              color: '#0FF32E',
              height: 40,
              fontSize: 12,
            },
          }
        }
      },
    ]
  });
  chart5.on('click', function(params) {
    if (params.seriesType === 'effectScatter') {
      props.changeType(1)
    }
  });
});
</script>

<style lang="less" scoped>
.content {
  min-height: calc(100vh - 84px);
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/index/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.title {
  position: absolute;
  width: 100%;
  height: 10.2%;
  background-image: url("@/assets/images/index/title.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #40C8FF;
  text-align: center;
  font-size: 1.6vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  position: absolute;
  width: 24.3%;
  height: 28%;
  background-image: url("@/assets/images/index/card.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8vw;
  white-space: nowrap;
  color: #fff;
}

.icon {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card1 {
  top: 11%;
  left: 0.55%;
}

.text1 {
  left: 0.55%;
  top: 11.21%;
  width: 24.24%;
  height: 3.11%;
}

.icon1 {
  background-image: url("@/assets/images/index/icon1.png");
  left: 2.36%;
  top: 16.21%;
  width: 4.14%;
  height: 9.25%;
}

.text2 {
  left: 6.94%;
  top: 17.40%;
  width: 3.42%;
  height: 4.49%;
  font-size: 1vw;
  color: #3AEAC2;
  font-weight: 700;
}

.text3 {
  left: 6.94%;
  top: 22.16%;
  width: 3.56%;
  height: 2.29%;
  font-size: 0.6vw;
}

.icon2 {
  background-image: url("@/assets/images/index/icon2.png");
  left: 14.13%;
  top: 16.21%;
  width: 4.14%;
  height: 9.25%;
}

.text4 {
  left: 18.72%;
  top: 17.40%;
  width: 2.67%;
  height: 4.49%;
  font-size: 1vw;
  color: #3AEAC2;
  font-weight: 700;
}

.text5 {
  left: 18.72%;
  top: 22.16%;
  width: 3.56%;
  height: 2.29%;
  font-size: 0.6vw;
}

.card2 {
  left: 0.55%;
  top: 41.06%;
}

.text6 {
  left: 0.55%;
  top: 41.52%;
  width: 24.24%;
  height: 3.11%;
}

.icon3 {
  background-image: url("@/assets/images/index/icon3.svg");
  left: 1.23%;
  top: 46.85%;
  width: 7.12%;
  height: 19.05%;
}

.icon4 {
  background-image: url("@/assets/images/index/icon4.svg");
  left: 1.47%;
  top: 47.48%;
  width: 6.67%;
  height: 17.67%;
}

.icon5 {
  background-image: url("@/assets/images/index/icon5.svg");
  left: 1.57%;
  top: 47.87%;
  width: 6.43%;
  height: 17.03%;
}

.icon6 {
  background-image: url("@/assets/images/index/icon6.svg");
  left: 1.95%;
  top: 48.76%;
  width: 5.68%;
  height: 15.18%;
}

.icon7 {
  background-image: url("@/assets/images/index/icon7.svg");
  left: 2.33%;
  top: 49.73%;
  width: 4.96%;
  height: 13.28%;
}

.icon8 {
  background-image: url("@/assets/images/index/icon8.svg");
  left: 2.60%;
  top: 50.37%;
  width: 4.45%;
  height: 11.91%;
}

.text7 {
  left: 2.60%;
  top: 50.37%;
  width: 4.45%;
  height: 9.91%;
  font-size: 1.6vw;
  font-weight: 700;
}

.text8 {
  left: 2.60%;
  top: 58.37%;
  width: 4.45%;
  height: 2%;
  font-size: 0.6vw;
}

.card3 {
  left: 0.55%;
  top: 70.53%;
}

.text9 {
  left: 0.55%;
  top: 71.02%;
  width: 24.24%;
  height: 3.11%;
}

.card4 {
  left: 74.85%;
  top: 11.99%;
}

.text10 {
  left: 74.85%;
  top: 12.53%;
  width: 24.24%;
  height: 3.11%;
}

.icon9 {
  background-image: url("@/assets/images/index/icon9.png");
  left: 79.36%;
  top: 18.77%;
  width: 5.03%;
  height: 9.52%;
}

.text11 {
  left: 84.48%;
  top: 20.33%;
  width: 2.19%;
  height: 1.65%;
  font-size: 0.6vw;
}

.text12 {
  left: 84.48%;
  top: 22.79%;
  width: 1.54%;
  height: 3.85%;
  font-size: 1vw;
  font-weight: 700;
}

.text13 {
  left: 86.07%;
  top: 23.63%;
  width: 0.62%;
  height: 1.92%;
}

.icon10 {
  background-image: url("@/assets/images/index/icon10.png");
  left: 88.40%;
  top: 15.21%;
  width: 4.21%;
  height: 11.36%;
}

.text14 {
  left: 89.66%;
  top: 17.22%;
  width: 1.68%;
  height: 2.56%;
  font-weight: 700;
}

.icon11 {
  background-image: url("@/assets/images/index/icon11.png");
  left: 88.86%;
  top: 27.39%;
  width: 3.28%;
  height: 2.11%;
}

.text15 {
  left: 89.17%;
  top: 27.56%;
  width: 2.74%;
  height: 1.65%;
  font-size: 0.6vw;
}

.icon12 {
  background-image: url("@/assets/images/index/icon12.png");
  left: 76.78%;
  top: 30.77%;
  width: 3.25%;
  height: 7.88%;
}

.text16 {
  left: 80.51%;
  top: 31.77%;
  width: 1.44%;
  height: 3.85%;
  font-size: 1vw;
  font-weight: 700;
  color: #1BF1D8;
}

.text17 {
  left: 82.16%;
  top: 32.60%;
  width: 0.62%;
  height: 1.92%;
  font-size: 0.6vw;
}

.text18 {
  left: 80.56%;
  top: 35.97%;
  width: 2.19%;
  height: 1.65%;
  font-size: 0.6vw;
}


.icon13 {
  background-image: url("@/assets/images/index/icon13.png");
  left: 84.02%;
  top: 30.77%;
  width: 3.25%;
  height: 7.88%;
}

.text19 {
  left: 87.75%;
  top: 31.77%;
  width: 0.72%;
  height: 3.85%;
  font-size: 1vw;
  font-weight: 700;
  color: #EDAD0E;
}

.text20 {
  left: 88.86%;
  top: 32.60%;
  width: 0.62%;
  height: 1.92%;
  font-size: 0.6vw;
}

.text21 {
  left: 87.78%;
  top: 35.97%;
  width: 2.19%;
  height: 1.65%;
  font-size: 0.6vw;
}

.icon14 {
  background-image: url("@/assets/images/index/icon14.png");
  left: 91.29%;
  top: 30.77%;
  width: 3.25%;
  height: 7.88%;
}

.text22 {
  left: 95.07%;
  top: 31.77%;
  width: 0.72%;
  height: 3.85%;
  font-size: 1vw;
  font-weight: 700;
  color: #F87D89;
}

.text23 {
  left: 95.99%;
  top: 32.60%;
  width: 0.62%;
  height: 1.92%;
  font-size: 0.6vw;
}

.text24 {
  left: 95.10%;
  top: 35.97%;
  width: 2.19%;
  height: 1.65%;
  font-size: 0.6vw;
}

.card5 {
  left: 74.85%;
  top: 41.82%;
}

.text25 {
  left: 74.85%;
  top: 42.12%;
  width: 24.24%;
  height: 3.11%;
}

.icon15 {
  background-image: url("@/assets/images/index/icon15.svg");
  left: 75.09%;
  top: 50.00%;
  width: 1.54%;
  height: 2.93%;
}

.text26 {
  left: 77%;
  top: 50.37%;
  width: 3.90%;
  height: 2.02%;
  font-size: 0.6vw;
}

.card6 {
  left: 74.85%;
  top: 69.85%;
}

.text27 {
  left: 74.85%;
  top: 70%;
  width: 24.24%;
  height: 3.11%;
}

.icon16 {
  background-image: url("@/assets/images/index/icon16.png");
  left: 75.62%;
  top: 78.57%;
  width: 3.97%;
  height: 5.86%;
}

.text28 {
  left: 75.62%;
  top: 74.63%;
  width: 3.97%;
  height: 3.5%;
  font-size: 1.2vw;
  font-weight: 700;
  color: #22F2FF;
}

.text29 {
  left: 75.62%;
  top: 78.53%;
  width: 3.97%;
  height: 1.54%;
  font-size: 0.6vw;
}


.icon17 {
  background-image: url("@/assets/images/index/icon16.png");
  left: 80.51%;
  top: 78.57%;
  width: 3.97%;
  height: 5.86%;
}

.text30 {
  left: 80.51%;
  top: 74.63%;
  width: 3.97%;
  height: 3.5%;
  font-size: 1.2vw;
  font-weight: 700;
  color: #22F2FF;
}

.text31 {
  left: 80.51%;
  top: 78.53%;
  width: 3.97%;
  height: 1.54%;
  font-size: 0.6vw;
}

.icon18 {
  background-image: url("@/assets/images/index/icon16.png");
  left: 84.79%;
  top: 83.97%;
  width: 3.97%;
  height: 5.86%;
}

.text32 {
  left: 84.79%;
  top: 80.07%;
  width: 3.97%;
  height: 3.5%;
  font-size: 1.2vw;
  font-weight: 700;
  color: #22F2FF;
}

.text33 {
  left: 84.79%;
  top: 83.57%;
  width: 3.97%;
  height: 1.54%;
  font-size: 0.6vw;
}

.icon19 {
  background-image: url("@/assets/images/index/icon16.png");
  left: 75.62%;
  top: 90.09%;
  width: 3.97%;
  height: 5.86%;
}

.text34 {
  left: 75.62%;
  top: 86.01%;
  width: 3.97%;
  height: 3.5%;
  font-size: 1.2vw;
  font-weight: 700;
  color: #22F2FF;
}

.text35 {
  left: 75.62%;
  top: 90.01%;
  width: 3.97%;
  height: 1.54%;
  font-size: 0.6vw;
}

.icon20 {
  background-image: url("@/assets/images/index/icon16.png");
  left: 80.51%;
  top: 90.09%;
  width: 3.97%;
  height: 5.86%;
}

.text36 {
  left: 80.51%;
  top: 86.01%;
  width: 3.97%;
  height: 3.5%;
  font-size: 1.2vw;
  font-weight: 700;
  color: #22F2FF;
}

.text37 {
  left: 80.51%;
  top: 90.01%;
  width: 3.97%;
  height: 1.54%;
  font-size: 0.6vw;
}

.table1 {
  position: absolute;
  width: 23.5%;
  height: 12%;
  top: 26%;
  left: 1%;
}

.scrollTableItem {
  width: 25%;
  display: inline-block;
  font-size: 0.6vw;
  line-height: 1vw;
  text-align: center;
  color: #2DD8FF;
  vertical-align: top;
}

.tableTh {
  width: 100%;
  height: 1vw;
  background-color: #02295D;
}

.chart1 {
  position: absolute;
  top: 45%;
  left: 8.5%;
  width: 16%;
  height: 23%;
}

.chart2 {
  position: absolute;
  top: 75%;
  left: 1%;
  width: 23.5%;
  height: 23%;
}

.table2 {
  position: absolute;
  top: 53%;
  left: 75%;
  width: 14%;
  height: 16%;

  .item {
    height: 20%;

    .value1 {
      display: inline-block;
      vertical-align: top;
      width: 3vw;
      height: 100%;
      font-size: 0.7vw;
      color: #fff;

      .span {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .value2 {
      display: inline-block;
      vertical-align: top;
      width: calc(100% - 6vw);
      height: 100%;
      color: #fff;
      position: relative;

      .a {
        position: absolute;
        width: 90%;
        height: 6px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 3px;
        background-color: #08396D;
        overflow: hidden;

        .b {
          border-radius: 3px;
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          background: linear-gradient(to right, #88F9C9, #67BBF8);
        }
      }
    }

    .value3 {
      display: inline-block;
      vertical-align: top;
      width: 3vw;
      height: 100%;
      font-size: 0.7vw;
      color: #66BBF9;

      .span {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.chart3 {
  position: absolute;
  top: 53%;
  left: 89%;
  width: 10%;
  height: 16%;
}

.chart4 {
  position: absolute;
  top: 74%;
  left: 89%;
  width: 10%;
  height: 22%;
}

.chart5 {
  position: absolute;
  top: 13%;
  left: 25%;
  width: 49.5%;
  height: 82%;
}
</style>