busroute/src/pages/views/home/components/HomePage.vue

<template>
  <Layout>
    <template #left>
      <div class="left">
        <div class="left-top">
          <template
            v-for="(item, index) in leftContent.topCount"
            :key="index"
          >
            <div>
              <template
                v-for="(it, id) in item"
                :key="id"
              >
                <div>
                  <Icon
                    :name="it.icon"
                    :size="96"
                    style="margin-right: 20px;"
                  />
                  <div>
                    <p>
                      <span>{{ it.num }}</span>
                      {{ it.until }}
                    </p>
                    <p>{{ it.name }}</p>
                  </div>
                </div>
              </template>
            </div>
          </template>
        </div>
        <div class="left-content">
          <template
            v-for="(item, index) in leftContent.charts"
            :key="index"
          >
            <Box
              :width="655"
              :height="455"
              :name="item.name"
            >
              <div
                v-if="index === 0"
                class="dateChange"
              >
                <div
                  v-for="(itm, index) in item.btns"
                  :key="index"
                  :class="{ active: index === item.checkId }"
                  @click="changeFn(index, item)"
                >
                  {{ itm }}
                </div>
              </div>
              <Echart :option="item.option" />
            </Box>
          </template>
        </div>
      </div>
    </template>
    <template #center>
      <div>111111</div>
    </template>
    <template #right>
      <div class="right">
        <template
          v-for="(itemd, indexd) in rightContent"
          :key="indexd"
        >
          <Box
            :width="655"
            :height="622"
            :name="itemd.name"
          >
            <div
              v-if="indexd === 0"
              class="statistics"
            >
              <div class="statistics-top">
                <template
                  v-for="(item, index) in itemd.content[0]"
                  :key="index"
                >
                  <div>
                    <p>{{ item.num }}</p>
                    <p>{{ item.name }}</p>
                  </div>
                </template>
              </div>
              <div class="statistics-content">
                <template
                  v-for="(item, ids) in itemd.content[1]"
                  :key="ids"
                >
                  <div>
                    <Icon
                      :name="item.icon"
                      :size="74"
                    />
                    <div>
                      <p>
                        {{ item.name }}
                      </p>
                      <p>
                        <span>{{ item.num }}</span>
                        件
                      </p>
                    </div>
                  </div>
                </template>
              </div>
            </div>

            <div
              v-else
              class="classes"
            >
              <div
                v-if="indexd === 1"
                class="classes-top"
              >
                <template
                  v-for="(item, id) in itemd.content[0]"
                  :key="id"
                >
                  <div>
                    <Icon
                      :name="item.icon"
                      :size="74"
                    />
                    <div>
                      <p>
                        {{ item.name }}
                      </p>
                      <p>
                        <span>{{ item.num }}</span>
                        {{ item.util }}
                      </p>
                    </div>
                  </div>
                </template>
              </div>
              <div
                v-else-if="indexd === 2"
                class="classes-top"
              >
                <template
                  v-for="(item, id) in itemd.content[0]"
                  :key="id"
                >
                  <div>
                    <n-progress
                      type="circle"
                      :percentage="item.num"
                      :offset-degree="180"
                      :color="item.color"
                      :indicator-text-color="item.color"
                    />
                    <div>
                      <p>
                        {{ item.name }}
                      </p>
                      <p>
                        <span>{{ item.num }}</span>
                        {{ item.util }}
                      </p>
                    </div>
                  </div>
                </template>
              </div>
              <div
                v-else
                class="classes-top"
              >
                <template
                  v-for="(item, id) in itemd.content[0]"
                  :key="id"
                >
                  <div :style="`justify-content:${id !== 0 ? 'flex-start' : 'center'};`">
                    <Icon
                      v-if="id === 0"
                      :name="item.icon"
                      :size="74"
                    />
                    <n-progress
                      v-else
                      type="circle"
                      :percentage="item.num"
                      :offset-degree="180"
                      :color="item.color"
                      :indicator-text-color="item.color"
                    />
                    <div>
                      <p>
                        {{ item.name }}
                      </p>
                      <p>
                        <span>{{ item.num }}</span>
                        {{ item.util }}
                      </p>
                    </div>
                  </div>
                </template>
              </div>

              <div
                v-if="indexd === 1 || indexd === 3"
                class="classes-scroll"
              >
                <div class="classes-scroll-head">
                  <span>线路名称</span>
                  <span v-if="indexd === 1">
                    班次
                    <i>已发数/准点数</i>
                  </span>
                  <span v-else>
                    发车
                    <i>已发数/准点数</i>
                  </span>
                </div>
                <div class="scrollBox">
                  <TankSeamlessScroll
                    :step-length="60"
                    :debug="false"
                    :reverse="false"
                  >
                    <template
                      v-for="(item, index) in itemd.content[1]"
                      :key="index"
                    >
                      <div class="classes-scroll-content">
                        <div>
                          <div>
                            <span>{{ item.name }}<i>{{ item.num }}</i></span>
                            <span>始</span>
                            <span>{{ item.start }}</span>
                            <span>终</span>
                            <span>{{ item.end }}</span>
                          </div>
                          <div>{{ item.plan }}/{{ item.pratic }}</div>
                        </div>
                        <div>
                          <n-progress
                            type="line"
                            :percentage="item.pratic"
                            :show-indicator="false"
                            processing
                          />
                        </div>
                      </div>
                    </template>
                  </TankSeamlessScroll>
                </div>
              </div>
              <template v-else>
                <div
                  v-for="(item, index) in itemd.content[1]"
                  :key="index"
                  class="classes-tables"
                >
                  <div class="classes-tables-head">
                    <span
                      v-for="(itm, id) in item.head"
                      :key="id"
                    >{{ itm }}</span>
                  </div>
                  <div class="classes-tables-body">
                    <div
                      v-for="(it, ids) in item.body"
                      :key="ids"
                    >
                      <span
                        v-for="(t, d) in it"
                        :key="d"
                      >{{ t }}</span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </Box>
        </template>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import { ref } from 'vue'
import Box from '@/components/box.vue'
import TankSeamlessScroll from 'tank-vue3-seamless-scroll'
import { graphic } from 'echarts'
import Echart from '@/components/chart.vue'

const datas = [
  {
    value: 99,
    name: '系列一'
  },
  {
    value: 97,
    name: '系列二'
  },
  {
    value: 94,
    name: '系列三'
  },
  {
    value: 90,
    name: '系列四'
  },
  {
    value: 88,
    name: '系列五'
  },
  {
    value: 84,
    name: '系列6'
  },
  {
    value: 81,
    name: '系列7'
  },
  {
    value: 79,
    name: '系列8'
  },
  {
    value: 75,
    name: '系列9'
  },
  {
    value: 65.88,
    name: '系列a'
  }
]

const leftContent = ref({
  topCount: [
    [
      {
        num: 6.8, icon: '11', name: '总刷卡量', until: '亿人次'
      },
      {
        num: 6.8, icon: '12', name: '总客流量', until: '亿人次'
      },
      {
        num: 6.8, icon: '13', name: '安全行驶', until: '万公里'
      }
    ],
    [
      {
        num: 6.8, icon: '14', name: '累计减少碳排放', until: '吨'
      },
      {
        num: 6.8, icon: '15', name: '累计责任事故率', until: '起/百万公里'
      },
      {
        num: 6.8, icon: '16', name: '乘客满意度', until: '%'
      }
    ]
  ],
  charts: [
    {
      name: '客运量',
      option: {
        grid: {
          containLabel: true,
          top: 100,
          bottom: 100
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 45,
          lett: 'center',
          itemGap: 30,
          textStyle: {
            fontSize: 18,
            color: '#C9D2FA'
          }
        },
        xAxis: {
          triggerEvent: true,
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月'
          ],
          axisLabel: {
            interval: 0,
            fontSize: 18,
            color: '#C9D2FA'
          }
        },
        yAxis: [
          {
            splitNumber: 2,
            axisLabel: {
              fontSize: 18,
              color: '#C9D2FA'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#3E4A82'
              }
            }
          },
          {
            splitNumber: 2,
            position: 'right', // 放在右边
            axisLabel: {
              fontSize: 18,
              color: '#C9D2FA',
              formatter(value: number) {
                // 在标签后面添加百分号
                return `${value}%`
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#3E4A82'
              }
            }
          }
        ],
        series: [
          {
            name: '客运量',
            type: 'bar',
            silent: true,
            itemStyle: {
              color: '#2F8FFF'
            },
            barWidth: 30,
            data: [ 200, 108, 200, 40, 210, 100 ]
          },
          {
            name: '同比增长率',
            type: 'line',
            yAxisIndex: 1, // 与第二个 y 轴关联
            itemStyle: {
              color: 'yellow' // 设置折线颜色为黄色
            },
            data: [ 100, 80, 120, 60, 90, 70 ] // 折线图的数据
          }
        ]
      },
      btns: [ '总', '年', '月', '日' ],
      checkId: 0
    },
    {
      name: '消费占比',
      option: {
        title: {
          text: '跳槽率19.5%', // 图标内容文本
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              formatter: '{b}\n{d}%',
              color: 'white'
            },
            data: [
              { key: 2, name: '0次', value: 30619 },
              { key: 2, name: '1次', value: 5921 },
              { key: 2, name: '2次', value: 1153 },
              { key: 2, name: '3次', value: 266 },
              { key: 2, name: '大于3次', value: 87 },
              { key: 2, name: '大于4次', value: 999 },
              { key: 2, name: '12次', value: 5921 },
              { key: 2, name: '22次', value: 1153 },
              { key: 2, name: '32次', value: 266 },
              { key: 2, name: '大于32次', value: 87 },
              { key: 2, name: '大于42次', value: 999 }
            ]
          }
        ]
      }
    },
    {
      name: '客流排名',
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 20,
          left: 20,
          bottom: 20,
          right: 20,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: [ '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区' ],
          axisLabel: {
            fontSize: 18,
            color: '#fff',
            margin: 10,
            rich: {
              a1: {
                backgroundColor: '#FFFF0050',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FFFF00',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a2: {
                backgroundColor: '#F2F2F250',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#F2F2F2',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a3: {
                backgroundColor: '#FAAD0E50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FAAD0E',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              b: {
                backgroundColor: '#00FFFF50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#00FFFF',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              }
            },
            formatter: (params: string, _id: number) => {
              const id = _id + 1
              if (_id < 3) {
                return `{a${id}|${id}}  ${params}`
              }
              return `{b|${id}}  ${params}`
            }
          }
        },
        series: [
          {
            z: 2,
            name: 'value',
            type: 'bar',
            barWidth: 25,
            zlevel: 1,
            data: datas.map((item, i) => ({
              value: item.value,
              itemStyle: {
                color: new graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgba(24, 103, 222, 0.4)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(231, 185, 44, 1)'
                  }
                ])
              }
            })),
            label: {
              position: 'inside',
              color: '#fff',
              fontSize: 16
            },
            itemStyle: {
              borderRadius: [ 0, 15, 15, 0 ]
            }
          }
        ]
      }
    },
    {
      name: '线路客流排名',
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 20,
          left: 20,
          bottom: 20,
          right: 20,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: [ '1路(45689)', '2路(45689)', '3路(45689)', '4路(45689)', '5路(45689)', '6路(45689)', '7路(45689)', '8路(45689)' ],
          axisLabel: {
            fontSize: 18,
            color: '#fff',
            margin: 20,
            rich: {
              a1: {
                backgroundColor: '#FFFF0050',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FFFF00',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a2: {
                backgroundColor: '#F2F2F250',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#F2F2F2',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a3: {
                backgroundColor: '#FAAD0E50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FAAD0E',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              b: {
                backgroundColor: '#00FFFF50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#00FFFF',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              }
            },
            formatter: (params: string, _id: number) => {
              const id = _id + 1
              if (_id < 3) {
                return `{a${id}|${id}}  ${params}`
              }
              return `{b|${id}}  ${params}`
            }
          }
        },
        series: [
          {
            z: 2,
            name: 'value',
            type: 'bar',
            barWidth: 25,
            zlevel: 1,
            data: datas.map((item, i) => ({
              value: item.value,
              itemStyle: {
                color: new graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgba(24, 103, 222, 0.4)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(231, 185, 44, 1)'
                  }
                ])
              }
            })),
            label: {
              position: 'inside',
              color: '#fff',
              fontSize: 16
            },
            itemStyle: {
              borderRadius: [ 0, 15, 15, 0 ]
            }
          }
        ]
      }
    }
  ]
})

const rightContent = ref([
  {
    name: '舆情统计',
    content: [
      [
        { name: '报警总数', num: 0 },
        { name: '报警企业', num: 0 },
        { name: '待反馈', num: 0 },
        { name: '待解除', num: 0 }
      ],
      [
        { name: '事件', num: 0, icon: '17' },
        { name: '舆情', num: 0, icon: '18' },
        { name: '高风险', num: 0, icon: '19' },
        { name: '汛情', num: 0, icon: '20' },
        { name: '网络检查', num: 0, icon: '21' },
        { name: '火险', num: 0, icon: '22' },
        { name: '驾驶员报警', num: 0, icon: '23' },
        { name: '充电', num: 0, icon: '24' },
        { name: '电池高温', num: 0, icon: '25' }
      ]
    ]
  },
  {
    name: '班次完成率',
    content: [
      [
        {
          name: '昨日总班次', num: 100, icon: '26', util: '次'
        },
        {
          name: '昨日完成率', num: 100, icon: '27', util: '%'
        }
      ],
      [
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        }
      ]
    ]
  },
  {
    name: '班次准点率',
    content: [
      [
        {
          name: '昨日首末班准点率', num: 70, icon: '26', util: '%', color: '#00FFFF'
        },
        {
          name: '昨日中途站准点率', num: 70, icon: '29', util: '%', color: '#FAAD0E'
        }
      ],
      [
        {
          head: [ '今日首班', '方向', '计划', '实际', '状态' ],
          body: [
            [ '2路（45567）', '下行', '07:00', '8:00', '1' ],
            [ '2路（45567）', '下行', '07:00', '8:00', '1' ],
            [ '2路（45567）', '下行', '07:00', '8:00', '1' ]
          ]
        },
        {
          head: [ '昨日末班', '方向', '计划', '实际', '状态' ],
          body: [
            [ '2路（45567）', '下行', '07:00', '8:00', '1' ],
            [ '2路（45567）', '下行', '07:00', '8:00', '1' ],
            [ '2路（45567）', '下行', '07:00', '8:00', '1' ]
          ]
        }
      ]
    ]
  },
  {
    name: '发车准点率',
    content: [
      [
        {
          name: '昨日准点班次数', num: 70, icon: '26', util: '次', color: '#04FF77'
        },
        {
          name: '昨日准点率', num: 70, icon: '29', util: '%', color: '#04FF77'
        }
      ],
      [
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        }
      ]
    ]
  }
] as any)

function changeFn(id: number, item: any) {
  item.checkId = id
}
</script>

<style lang="scss" scoped>
.left {
  padding-right: 40px;

  &-top {
    &>div {
      display: flex;
    }

    &>div:first-child,
    &>div:nth-child(2) {
      background: linear-gradient(180deg, rgba(33, 133, 232, 0.0902) 0%, rgba(0, 170, 255, 0) 99%);

      &>div {
        display: flex;
        color: white;
        text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.647058823529412);
        width: 440px;
        height: 160px;
        align-items: center;
        justify-content: center;

        &>div {

          &>p:first-child {
            font-size: 18px;

            span {
              font-size: 50px;
            }
          }

          &>p:last-child {
            font-size: 24px;
          }
        }
      }
    }
  }

  &-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    :deep(.box-content) {
      position: relative;

      .dateChange {
        position: absolute;
        width: 360px;
        height: 30px;
        border-radius: 30px;
        border: solid 1px #2185E8;
        left: 50%;
        transform: translate(-50%, 0);
        top: 10px;
        z-index: 2;
        display: flex;

        &>div {
          width: 90px;
          color: white;
          font-size: 16px;
          text-align: center;
          cursor: pointer;
          line-height: 30px;

          &:not(:first-child) {
            border-left: solid 1px #2185E8;
          }
        }

        .active {
          background: #2185e860;
        }
      }
    }

  }
}

.right {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 40px;
  white-space: nowrap;
  text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.647058823529412);

  .statistics {
    padding: 20px;

    &-top {
      display: flex;
      justify-content: space-between;

      &>div {
        width: 145px;
        height: 145px;
        font-size: 20px;
        color: #80FFFF;
        text-align: center;
        background: rgba(33, 133, 232, 0.098);
        border: 1px solid rgba(0, 255, 255, 0.298);

        &>p:first-child {
          padding-top: 33px;
          padding-bottom: 10px;
          font-weight: 700;
          font-style: normal;
          font-size: 40px;
          color: #FFFFFF;
          text-align: center;
        }

        &>p:last-child {
          font-size: 20px;
        }
      }
    }

    &-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      &>div {
        display: flex;
        width: 205px;
        overflow: hidden;
        margin-top: 40px;

        &>div {
          width: 100px;
          color: white;
          padding-left: 20px;

          &>p {
            font-size: 20px;

            span {
              font-size: 34px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }

  .classes {
    padding: 20px;

    &-top {
      display: flex;
      justify-content: space-between;

      &>div {
        width: 300px;
        height: 150px;
        font-size: 20px;
        color: #80FFFF;
        text-align: center;
        background: rgba(33, 133, 232, 0.098);
        border: 1px solid rgba(0, 255, 255, 0.298);
        display: flex;
        align-items: center;
        justify-content: center;

        &>div {
          // padding-left: 20px;
          margin-left: 10px;
          text-align: left;

          &:first-child {
            width: 99px;
            height: 99px;

          }

          &>p:last-child {
            color: white;
            font-family: 'Impact Normal', 'Impact', sans-serif;

            &>span {
              font-size: 34px;
              font-weight: 400;
              margin-right: 5px;
            }
          }
        }
      }
    }

    &-scroll {
      &-head {
        margin-top: 40px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        color: #80FFFF;

        &>span:last-child {
          color: white;

          i {
            color: #80FFFF;
          }
        }
      }

      &-content {
        font-family: Arial Normal;

        &>div:first-child {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &>div:first-child {
            display: flex;
            font-size: 18px;
            align-items: flex-end;
            text-shadow: none;

            &>span {
              &:first-child {
                width: 153px;
                height: 48px;
                border-radius: 5px;
                background: rgba(33, 133, 232, 0.298);
                border: 3px solid #80FFFF;
                font-size: 24px;
                color: white;
                text-align: center;
                line-height: 40px;
                overflow: hidden;
                margin-right: 10px;

                i {
                  font-size: 20px;
                  margin-left: 10px;
                }
              }

              &:nth-child(4),
              &:nth-child(2) {
                width: 30px;
                height: 30px;
                color: #FFFFFF;
                border-radius: 50%;
                border: 1px solid #2bb972;
                background: #2BB97249;
                text-align: center;
                line-height: 30px;
                margin: 0 5px;
              }

              &:nth-child(4) {
                border: 1px solid #E73D41;
                background: #E73D4149;
                margin-left: 10px;
              }

              &:nth-child(3),
              &:last-child {
                color: #81D3F8;
                padding-bottom: 5px;
              }
            }

          }

          &>div:last-child {
            font-size: 24px;
            text-align: right;
            color: #FFFFFF;
          }
        }

        &>div:last-child {
          height: 40px;
          padding: 13px 0;
        }
      }
    }

    .scrollBox {
      height: 270px;
      overflow: hidden;
    }

    &-tables {
      text-shadow: none;
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      text-align: center;
      font-size: 20px;
      color: #FFFFFF;

      &:nth-child(3)>div:nth-child(2)>div:last-child,
      &:nth-child(2)>div:nth-child(2)>div:first-child {
        color: #E73D41;
      }

      &:nth-child(3)>div:first-child>span:first-child {
        color: #FAAD0E;
      }

      &-head {
        display: flex;
        align-items: center;
        background: rgba(86, 137, 240, 0.298);
        height: 40px;
        margin-top: 20px;

        &>span {
          width: 112px;
          font-weight: 700;

          &:first-child {
            width: 182px;
            color: #04FF77;
          }
        }
      }

      &-body {
        color: #81D3F8;

        &>div {
          display: flex;
          align-items: center;
          height: 50px;

          &>span {
            width: 112px;

            &:first-child {
              width: 182px;
            }
          }
        }
      }
    }
  }
}
</style>