mental-health-web/src/views/bigScreen/index.vue

<template>
  <div class="big-screen">
    <header class="item item1">
      <h1>云舒心理健康云平台</h1>
      <div class="showTime">{{ showTime }}</div>
    </header>

    <div class="main-box">
      <div class="item-left">
        <div class="item-left-1 boxall">
          <div class="alltitle">量表使用统计</div>
          <div class="boxnav">
            <v-chart :option="leftBar1Option" autoresize />
          </div>
        </div>

        <div class="item-left-2 boxall">
          <div class="alltitle">年级统计</div>
          <div class="boxnav">
            <v-chart :option="leftBar2Option" autoresize />
          </div>
        </div>
      </div>

      <div class="item-center">
        <div class="item-center-1 boxall">
          <div class="alltitle">数据统计</div>
          <div class="no">
            <div class="no-hd">
              <ul>
                <li>{{ userNum }}</li>
                <li>{{ evaluationNum }}</li>
                <li>{{ warnNum }}</li>
                <li>{{ interveneNum }}</li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>总用户数</li>
                <li>总测评数</li>
                <li>总预警数</li>
                <li>总干预数</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="item-center-2 boxall">
          <div class="alltitle">风险统计</div>
          <div class="boxnav">
            <v-chart :option="centerBar1Option" autoresize />
          </div>
        </div>

        <div class="item-center-2 boxall">
          <div class="alltitle">近12月测评数统计</div>
          <div class="boxnav">
            <v-chart :option="centerLine2Option" autoresize />
          </div>
        </div>
      </div>

      <div class="item-right">
        <div class="item-right-2 boxall">
          <div class="alltitle">最新测评数据</div>
          <div class="boxnav">
            <div class="item-th">
              <span>场次名称</span>
              <span>完成数量</span>
              <span>时间</span>
            </div>
            <vue3-seamless-scroll :list="list" class="scroll">
              <div class="item" v-for="(item, index) in list" :key="index">
                <span>{{ item.sessionName }}</span>
                <span>{{ item.value }} / {{ item.total }}</span>
                <span>{{ item.expireTime }}</span>
              </div>
            </vue3-seamless-scroll>
            <!-- <table border="0" cellspacing="0">
              <tr>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>

              </tr>
              <tr>
                <th>字段</th>
                <td>8098</td>
                <td>19.80%</td>
                <td>22</td>
                <td>368</td>
              </tr>
              <tr>
                <th>字段</th>
                <td>7506</td>
                <td>6.70%</td>
                <td>22</td>
                <td>339</td>
              </tr>
              <tr>
                <th>字段</th>
                <td>3261</td>
                <td>32.30%</td>
                <td>10</td>
                <td>325.7</td>
              </tr>
              <tr>
                <th>字段</th>
                <td>1993</td>
                <td> 201%</td>
                <td>10</td>
                <td> 199</td>
              </tr>
              <tr>
                <th>字段</th>
                <td>1993</td>
                <td> 201%</td>
                <td>10</td>
                <td> 199</td>
              </tr>
            </table> -->
          </div>
        </div>

        <div class="item-right-1 boxall">
          <div class="alltitle">预警干预统计</div>
          <div class="boxnav">
            <v-chart :option="rightBar1Option" autoresize />
          </div>
        </div>

        <div class="item-right-2 boxall">
          <div class="alltitle">预警统计</div>
          <div class="boxnav">
            <v-chart :option="rightPie2Option" autoresize />
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import '@/utils/flexible'
import * as echarts from 'echarts';
import { use } from 'echarts/core'
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
import VChart from 'vue-echarts'

import { getUserNum, getEvaluationNum, getWarnNum, getInterveneNum, getWarn4All, getPublishNum, getGrade, getConclusion, getMonthEvaluation, getPublish, getHalfMonth } from '@/api/index'

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
]);

let showTime = ref('')
let timer: any = null

function time() {
  let dt = new Date();
  let y = dt.getFullYear();
  let mt = dt.getMonth() + 1;
  let day = dt.getDate();
  let h = dt.getHours();//获取时
  let m = dt.getMinutes();//获取分
  let s = dt.getSeconds();//获取秒
  showTime.value = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
}

const list = ref([])
async function getPublishData() {
  const res = await getPublish()
  list.value = res.data
}

const userNum = ref(0)
async function getUserNumData() {
  const res = await getUserNum()
  userNum.value = res.data
}

const evaluationNum = ref(0)
async function getEvaluationNumData() {
  const res = await getEvaluationNum()
  evaluationNum.value = res.data
}

const warnNum = ref(0)
async function getWarnNumData() {
  const res = await getWarnNum()
  warnNum.value = res.data
}

const interveneNum = ref(0)
async function getInterveneNumData() {
  const res = await getInterveneNum()
  interveneNum.value = res.data
}

onMounted(() => {
  time()

  timer = setInterval(time, 1000);

  getUserNumData()
  getEvaluationNumData()
  getWarnNumData()
  getInterveneNumData()

  getPublishNumData()
  getGradeData()
  getWarn4AllData()
  getConclusionData()
  getMonthEvaluationData()
  getPublishData()
  getHalfMonthData()
});


onBeforeUnmount(() => {
  clearInterval(timer);
});

const leftBar1Option = ref({
  grid: {
    left: '2%',
    top: '1%',
    right: '7%',
    bottom: '0%',
    containLabel: true
  },
  xAxis: [{
    show: false,
  }],
  yAxis: [{
    axisTick: 'none',
    axisLine: 'none',
    offset: '7',
    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,.6)',
        fontSize: '14',
      }
    },
    data: []
  }],
  series: [{
    name: '量表使用统计',
    type: 'bar',
    yAxisIndex: 0,
    data: [],
    label: {
      normal: {
        show: true,
        position: 'right',
        textStyle: {
          color: 'rgba(255,255,255,.8)',
          fontSize: '12',
        }
      }
    },
    barWidth: 15,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
          offset: 0,
          color: '#03c893'
        },
        {
          offset: 1,
          color: '#0091ff'
        }
        ]),
        barBorderRadius: 15,
      }
    },
    z: 2
  }]
});

async function getPublishNumData() {
  const res = await getPublishNum()
  let yAxisData: any[] = []
  let data: any[] = []
  res.data.forEach((v: any) => {
    yAxisData.push(v.name)
    data.push(v.value)
  });

  leftBar1Option.value.yAxis[0].data = yAxisData
  leftBar1Option.value.series[0].data = data
}

const leftBar2Option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['发布数', '测评数'],
    right: 'center',
    top: 0,
    textStyle: {
      color: "#fff"
    },
    itemWidth: 12,
    itemHeight: 10,
    // itemGap: 35
  },
  grid: {
    left: '0',
    right: '20',
    bottom: '0',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: 'white'

      }
    },
    axisLabel: {
      //rotate:-90,
      formatter: function (value: any) { return value.split("").join("\n"); },
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 14,
      },
      lineStyle: {
        color: 'rgba(255,255,255,0.3)'
      }
    }
  },

  yAxis: {
    type: 'value',
    splitNumber: 4,
    axisTick: { show: false },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.1)'
      }
    },
    axisLabel: {
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 14,
      }
    },
    axisLine: { show: false },
  },

  series: []
})

async function getGradeData() {
  const res = await getGrade()
  let xAxisData: any[] = []
  let seriesPublishData: any[] = []
  let seriesEvaluationData: any[] = []

  res.data.forEach((v: any) => {
    xAxisData.push(v.name)
    seriesPublishData.push(v.value)
    seriesEvaluationData.push(v.spareValue)
  });

  const seriesData = [{ name: '发布数', data: seriesPublishData, type: 'bar' }, { name: '测评数', data: seriesEvaluationData, type: 'bar' }]
  leftBar2Option.value.xAxis.data = xAxisData
  leftBar2Option.value.series = seriesData
}

const centerBar1Option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  },
  grid: {
    top: "20%",
    right: "50",
    bottom: "20",
    left: "30",
  },
  legend: {
    data: [],
    right: 'center',
    width: '100%',
    textStyle: {
      color: "#fff"
    },
    itemWidth: 12,
    itemHeight: 10,
  },
  xAxis: [
    {
      type: "category",
      data: [],
      axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
      axisLabel: {
        textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
      },
    },
  ],
  "yAxis": [
    {
      "type": "value",
      "name": "",
      axisTick: { show: false },
      splitLine: {
        show: false,

      },
      "axisLabel": {
        "show": true,
        fontSize: 14,
        color: "rgba(255,255,255,.6)"

      },
      axisLine: {
        min: 0,
        lineStyle: { color: 'rgba(255,255,255,.1)' }
      },//左线色

    },
    {
      "type": "value",
      "name": "",
      "show": true,
      "axisLabel": {
        "show": true,
        fontSize: 14,
        color: "rgba(255,255,255,.6)"
      },
      axisTick: { show: false },
      axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
      splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
    },
  ],
  "series": [
    {
      "name": "未见异常",
      "type": "bar",
      "data": [],
      "barWidth": "15%",
      "itemStyle": {
        "normal": {
          barBorderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#8bd46e'
          }, {
            offset: 1,
            color: '#09bcb7'
          }]),
        }
      },
      "barGap": "0.2"
    },
    {
      "name": "低风险",
      "type": "bar",
      "data": [],
      "barWidth": "15%",
      "itemStyle": {
        "normal": {
          barBorderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#248ff7'
          }, {
            offset: 1,
            color: '#6851f1'
          }]),
        }
      },
      "barGap": "0.2"
    },
    {
      "name": "中风险",
      "type": "bar",
      "data": [],
      "barWidth": "15%",
      "itemStyle": {
        "normal": {
          barBorderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#fccb05'
          }, {
            offset: 1,
            color: '#f5804d'
          }]),
        }
      },
      "barGap": "0.2"
    },
    {
      "name": "高风险",
      "type": "line",
      smooth: true,
      "yAxisIndex": 1,
      "data": [],
      lineStyle: {
        normal: {
          width: 2
        },
      },
      "itemStyle": {
        "normal": {
          "color": "#86d370",

        }
      },

    }
    ,
    {
      "name": "重大风险",
      "type": "line",
      "yAxisIndex": 1,

      "data": [],
      lineStyle: {
        normal: {
          width: 2
        },
      },
      "itemStyle": {
        "normal": {
          "color": "#3496f8",

        }
      },
      "smooth": true
    }
  ]
})

async function getConclusionData() {
  const res = await getConclusion()
  let noneNum: any[] = []
  let lowNum: any[] = []
  let middleNum: any[] = []
  let highNum: any[] = []
  let majorNum: any[] = []
  let xAxisData: any[] = []

  res.data.forEach(v => {
    xAxisData.push(v.name)

    noneNum.push(v.noneNum)
    lowNum.push(v.lowNum)
    middleNum.push(v.middleNum)
    highNum.push(v.highNum)
    majorNum.push(v.majorNum)
  })

  let categoryData = ['未见异常', '低风险', '中风险', '高风险', '重大风险']

  centerBar1Option.value.legend.data = categoryData
  centerBar1Option.value.xAxis[0].data = xAxisData
  centerBar1Option.value.series[0].data = noneNum
  centerBar1Option.value.series[1].data = lowNum
  centerBar1Option.value.series[2].data = middleNum
  centerBar1Option.value.series[3].data = highNum
  centerBar1Option.value.series[4].data = majorNum
}

const centerLine2Option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
    // formatter:'{c}' ,
  },
  grid: {
    left: '0',
    top: '30',
    right: '10',
    bottom: '20',
    containLabel: true
  },
  // legend: {
  //   data: ['字段1', '字段2'],
  //   right: 'center',
  //   top: 0,
  //   textStyle: {
  //     color: "#fff"
  //   },
  //   itemWidth: 12,
  //   itemHeight: 10,
  //   // itemGap: 35
  // },

  xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      rotate: -90,
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 14,

      },
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255,.1)'
      }

    },

    data: []

  }, {
    axisPointer: { show: false },
    axisLine: { show: false },
    position: 'bottom',
    offset: 20,
  }],

  yAxis: [{
    type: 'value',
    axisTick: { show: false },
    // splitNumber: 6,
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255,.1)'
      }
    },
    axisLabel: {
      formatter: "{value}",
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 14,
      },
    },

    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,.1)'
      }
    }
  }],
  series: [
    {
      name: '时间',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          color: 'rgba(228, 228, 126, 1)',
          width: 2
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(228, 228, 126, .2)'
          }, {
            offset: 1,
            color: 'rgba(228, 228, 126, 0)'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(228, 228, 126, 1)',
          borderColor: 'rgba(228, 228, 126, .1)',
          borderWidth: 12
        }
      },
      data: []

    }
  ]
})

async function getMonthEvaluationData() {
  const res = await getMonthEvaluation()

  let xAxisData = []
  let seriesData = []
  res.data.forEach(v => {
    xAxisData.push(v.name)
    seriesData.push(v.value)
  });

  centerLine2Option.value.xAxis[0].data = xAxisData
  centerLine2Option.value.series[0].data = seriesData
}

const rightBar1Option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  }, "grid": {
    "top": "15%",
    "right": "10%",
    "bottom": "20",
    "left": "10%",
  },
  legend: {
    data: ['预警数', '干预数'],
    right: 'center',
    top: 0,
    textStyle: {
      color: "#fff"
    },
    itemWidth: 12,
    itemHeight: 10,
  },
  "xAxis": [
    {
      "type": "category",

      data: [],
      axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
      axisLabel: {
        textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
      },

    },
  ],
  "yAxis": [
    {
      "type": "value",
      "name": "",
      splitLine: { show: false },
      axisTick: { show: false },
      "axisLabel": {
        "show": true,
        color: "rgba(255,255,255,.6)"

      },
      axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色

    },
    {
      "type": "value",
      "name": "",
      "show": true,
      axisTick: { show: false },
      "axisLabel": {
        "show": true,
        formatter: "{value}",
        color: "rgba(255,255,255,.6)"
      },
      axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
      splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
    },
  ],
  "series": [
    {
      "name": "预警数",
      "type": "bar",
      "data": [],
      "barWidth": "20%",

      "itemStyle": {
        "normal": {
          barBorderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#fccb05'
          }, {
            offset: 1,
            color: '#f5804d'
          }]),
        }
      },
      "barGap": "0"
    },
    {
      "name": "干预数",
      "type": "line",
      "yAxisIndex": 1,

      "data": [],
      lineStyle: {
        normal: {
          width: 2
        },
      },
      "itemStyle": {
        "normal": {
          "color": "#ff3300",

        }
      },
      "smooth": true
    }
  ]
})

async function getHalfMonthData() {
  const res = await getHalfMonth()
  let xAxisData = []
  let warnData = []
  let interveneData = []

  res.data.forEach(v => {
    xAxisData.push(v.name)
    warnData.push(v.value)
    interveneData.push(v.spareValue)
  });

  rightBar1Option.value.xAxis[0].data = xAxisData

  rightBar1Option.value.series[0].data = warnData
  rightBar1Option.value.series[1].data = interveneData
}

const rightPie2Option = ref({
  title: {
    text: '',
    subtext: '',
    x: 'center',
    y: '50%',
    textStyle: {
      color: '#fff',
      fontSize: 22,
      lineHeight: 10,
    },
    subtextStyle: {
      color: '#90979c',
      fontSize: 16,
      lineHeight: 10,

    },
  },
  tooltip: {
    trigger: 'item',
    formatter: "{b} : {c} ({d}%)"
  },

  visualMap: {
    show: false,
    min: 500,
    max: 600,
    inRange: {
      //colorLightness: [0, 1]
    }
  },
  series: [{
    name: '预警统计',
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
    data: [],
    roseType: 'radius',
    label: {
      normal: {
        formatter: ['{c|{c}人}', '{b|{b}}'].join('\n'),
        rich: {
          c: {
            color: 'rgb(241,246,104)',
            fontSize: 20,
            fontWeight: 'bold',
            lineHeight: 5
          },
          b: {
            color: 'rgb(98,137,169)',
            fontSize: 14,
            height: 44
          },
        },
      }
    },
    labelLine: {
      normal: {
        lineStyle: {
          color: 'rgb(98,137,169)',
        },
        smooth: 0.2,
        length: 10,
        length2: 20,

      }
    }
  }]
})

async function getWarn4AllData() {
  const res = await getWarn4All()

  const data = [
    { name: '未见异常', value: res.data.noneNum },
    { name: '低风险', value: res.data.lowNum },
    { name: '中风险', value: res.data.middleNum },
    { name: '高风险', value: res.data.highNum },
    { name: '重大风险', value: res.data.majorNum }
  ]

  rightPie2Option.value.series[0].data = data
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

li {
  list-style: none;
}

/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url('@/assets/font/DS-DIGIT.TTF');
}

.big-screen {
  background: url('@/assets/images/bg.jpg') no-repeat top center;
  background-size: cover;
  line-height: 1.15;
  width: 100vw;
  height: 100vh;

  header {
    position: relative;
    height: 1.25rem;
    background: url('@/assets/images/head_bg.png') no-repeat;
    background-size: 100% 100%;

    h1 {
      font-size: .475rem;
      color: #fff;
      text-align: center;
      line-height: 1rem;
    }

    .showTime {
      position: absolute;
      right: .375rem;
      top: 0;
      line-height: .9375rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: .25rem;
      letter-spacing: .025rem;
      font-family: electronicFont;
    }
  }

  .main-box {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-rows: calc(100vh - 1.25rem);

    .item-left,
    .item-center,
    .item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center
    }

    .item-left-1 {
      flex: 0 1 58%;
      width: 99%;
    }

    .item-left-2 {
      flex: 0 1 40%;
      width: 99%;
    }

    .item-center-1 {
      flex: 0 1 18%;
      width: 99%;
    }

    .item-center-2 {
      flex: 0 1 40%;
      width: 99%;
    }

    .item-center-3 {
      flex: 0 1 40%;
      width: 99%;
    }

    .item-right-1 {
      flex: 0 1 32%;
      width: 99%;
    }

    .item-right-2 {
      flex: 0 1 33%;
      width: 99%;
    }

    .item-right-3 {
      flex: 0 1 33%;
      width: 99%;
    }

    .boxall {
      padding: 0.1rem;
      background: rgba(6, 48, 109, .5);
      position: relative;
      z-index: 10;
    }

    .alltitle {
      font-size: .25rem;
      color: #fff;
      line-height: .5rem;
      position: relative;
      padding-left: .15rem
    }

    .alltitle:before {
      position: absolute;
      height: .2rem;
      width: 4px;
      background: #49bcf7;
      border-radius: 5px;
      content: "";
      left: 0;
      top: 50%;
      margin-top: -.1rem;
    }

    .boxnav {
      height: calc(100% - .5rem);
    }

    .no {
      background-color: rgba(101, 132, 226, 0.1);
      padding: .0625rem;
      margin-left: .125rem;
      margin-right: .125rem;
      margin-top: 10px;

      .no-hd {
        height: .75rem;
        position: relative;
        border: 1px solid rgba(25, 186, 139, 0.17);

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          width: 30px;
          height: 10px;
          border-top: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 30px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
        }

        ul {
          display: flex;

          li {
            position: relative;
            flex: 1;
            line-height: .75rem;
            font-size: .75rem;
            color: #ffeb7b;
            text-align: center;
            font-family: 'electronicFont';

            &::after {
              content: "";
              position: absolute;
              top: 25%;
              right: 0;
              height: 50%;
              width: 1px;
              background-color: rgba(255, 255, 255, 0.2);
            }
          }
        }
      }

      .no-bd {
        height: .3125rem;

        ul {
          display: flex;

          li {
            flex: 1;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: .2rem;
            line-height: .3125rem;
          }
        }
      }
    }

    table {
      width: 100%;
      text-align: center;
      color: #fff;

    }

    table th {
      font-size: .225rem;
      background: rgba(0, 0, 0, .1);
    }

    table td {
      font-size: 0.2125rem;
      color: rgba(255, 255, 255, .6);
    }

    table th,
    table td {
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      padding: .1rem 0;
    }

    .item-th {
      border: 1px solid rgba(255, 255, 255, .1);
      padding: .1rem 0;
      font-size: .2rem;
      color: rgba(255, 255, 255, .6);
      background: rgba(0, 0, 0, .1);
      display: flex;
      align-items: center;
      justify-content: space-around;

      span:nth-child(1) {
        flex: 0 1 50%;
      }

      span:nth-child(2) {
        flex: 0 1 20%;
      }

      span:nth-child(3) {
        flex: 0 1 30%;
      }
    }

    .scroll {
      height: 2.375rem;
      width: 100%;
      overflow: hidden;
    }

    .scroll .item {
      border: 1px solid rgba(255, 255, 255, .1);
      padding: .1rem 0;
      font-size: .2rem;
      color: rgba(255, 255, 255, .6);
      display: flex;
      align-items: center;
      justify-content: space-around;

      span:nth-child(1) {
        flex: 0 1 50%;
      }

      span:nth-child(2) {
        flex: 0 1 20%;
      }

      span:nth-child(3) {
        flex: 0 1 30%;
      }
    }
  }
}
</style>