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>50</li>
                <li>164</li>
                <li>87</li>
                <li>1</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">标题名称</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>字段1</span>
              <span>字段2</span>
              <span>字段3</span>
            </div>
            <vue3-seamless-scroll :list="list" class="scroll">
              <div class="item" v-for="(item, index) in list" :key="index">
                <span>{{ item.title }}</span>
                <span>{{ item.date }}</span>
                <span>{{ item.date }}</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'

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([
  {
    title: "展示数据第1条",
    date: Date.now(),
  },
  {
    title: "展示数据第2条",
    date: Date.now(),
  },
  {
    title: "展示数据第3条",
    date: Date.now(),
  },
  {
    title: "展示数据第4条",
    date: Date.now(),
  },
  {
    title: "展示数据第5条",
    date: Date.now(),
  },
  {
    title: "展示数据第6条",
    date: Date.now(),
  },
  {
    title: "展示数据第7条",
    date: Date.now(),
  },
  {
    title: "展示数据第8条",
    date: Date.now(),
  },
  {
    title: "展示数据第9条",
    date: Date.now(),
  },
]);

onMounted(() => {
  time()

  timer = setInterval(time, 1000);
});


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

const leftBar1Option = ref({
  grid: {
    left: '2%',
    top: '1%',
    right: '5%',
    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: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9']

  }, {
    axisTick: 'none',
    axisLine: 'none',
    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,.6)',
        fontSize: '14',
      }
    },
    data: [1514, 1619, 1623, 1968, 2158, 2456, 3506, 4664, 8390]

  }, {
    name: '单位：件',
    nameGap: '50',
    nameTextStyle: {
      color: 'rgba(255,255,255,.6)',
      fontSize: '16',
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(0,0,0,0)'
      }
    },
    data: [],
  }],
  series: [{
    name: '条',
    type: 'bar',
    yAxisIndex: 0,
    data: [25, 30, 34, 40, 43, 48, 52, 56, 70],
    label: {
      normal: {
        show: true,
        position: 'right',
        formatter: function (param) {
          return param.value + '%';
        },
        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
  }, {
    name: '白框',
    type: 'bar',
    yAxisIndex: 1,
    barGap: '-100%',
    data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
    barWidth: 15,
    itemStyle: {
      normal: {
        color: 'rgba(0,0,0,.2)',
        barBorderRadius: 15,
      }
    },
    z: 1
  }]
});

const leftBar2Option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['字段1', '字段2', '字段3'],
    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: ['字段1', '字段2', '字段3', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9'],
    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: [{
    name: '字段1',
    type: 'bar',
    stack: 'a',
    barWidth: '30', barGap: 0,
    itemStyle: {
      normal: {
        color: '#8bd46e',
      }
    },
    data: [331, 497, 440, 81, 163, 366, 57, 188, 172, 2295]
  },
  {
    name: '字段2',
    type: 'bar',
    stack: 'a',
    barWidth: '30', barGap: 0,
    itemStyle: {
      normal: {
        color: '#f5804d',
        barBorderRadius: 0,
      }
    },
    data: [48, -97, 56, -59, 90, 98, 64, 61, -8, 253]
  },
  {
    name: '字段3',
    type: 'bar',
    stack: 'a',
    barWidth: '30', barGap: 0,
    itemStyle: {
      normal: {
        color: '#248ff7',
        barBorderRadius: 0,
      }
    },
    data: [-13, -21, -112, 5, 0, -5, 72, -3, 8, -69]
  }
  ]
})


const centerBar1Option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  }, "grid": {
    "top": "20%",
    "right": "50",
    "bottom": "20",
    "left": "30",
  },
  legend: {
    data: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6'],
    right: 'center', width: '100%',
    textStyle: {
      color: "#fff"
    },
    itemWidth: 12,
    itemHeight: 10,
  },
  "xAxis": [
    {
      "type": "category",
      data: ['2016', '2017', '2018', '2019'],
      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,
        max: 10,
        lineStyle: { color: 'rgba(255,255,255,.1)' }
      },//左线色

    },
    {
      "type": "value",
      "name": "增速",
      "show": true,
      "axisLabel": {
        "show": true,
        fontSize: 14,
        formatter: "{value} %",
        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": "字段1",
      "type": "bar",
      "data": [36.6, 38.80, 40.84, 41.60],
      "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": "字段2",
      "type": "bar",
      "data": [14.8, 14.1, 15, 16.30],
      "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": "字段3",
      "type": "bar",
      "data": [9.2, 9.1, 9.85, 8.9],
      "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": "字段4",
      "type": "line",
      smooth: true,
      "yAxisIndex": 1,
      "data": [0, 6.01, 5.26, 1.48],
      lineStyle: {
        normal: {
          width: 2
        },
      },
      "itemStyle": {
        "normal": {
          "color": "#86d370",

        }
      },

    }
    ,
    {
      "name": "字段5",
      "type": "line",
      "yAxisIndex": 1,

      "data": [0, -4.73, 6.38, 8.67],
      lineStyle: {
        normal: {
          width: 2
        },
      },
      "itemStyle": {
        "normal": {
          "color": "#3496f8",

        }
      },
      "smooth": true
    },
    {
      "name": "字段6",
      "type": "line",
      "yAxisIndex": 1,

      "data": [0, -1.09, 8.24, -9.64],
      lineStyle: {
        normal: {
          width: 2
        },
      },
      "itemStyle": {
        "normal": {
          "color": "#fbc30d",

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

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: ['17年3月', '17年6月', '17年9月', '17年12月', '18年3月', '18年6月', '18年9月', '18年12月', '19年3月', '19年6月', '19年9月', '19年12月']

  }, {

    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: '字段1',
      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: [12.50, 14.4, 16.1, 14.9, 20.1, 17.2, 17.0, 13.42, 20.12, 18.94, 17.27, 16.10]

    }, {
      name: '字段2',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {

        normal: {
          color: 'rgba(255, 128, 128, 1)',
          width: 2
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(255, 128, 128,.2)'
          }, {
            offset: 1,
            color: 'rgba(255, 128, 128, 0)'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(255, 128, 128, 1)',
          borderColor: 'rgba(255, 128, 128, .1)',
          borderWidth: 12
        }
      },
      data: [-6.4, 0.1, 6.6, 11.2, 42.1, 26.0, 20.2, 18.31, 21.59, 24.42, 34.03, 32.9]
    },
  ]
})

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

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

    },
  ],
  "yAxis": [
    {
      "type": "value",
      "name": "单位1",
      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": "单位2",
      "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": "字段1",
      "type": "bar",
      "data": [
        18453.35, 20572.22, 24274.22, 30500.00
      ],
      "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": "字段2",
      "type": "line",
      "yAxisIndex": 1,

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

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

const rightPie2Option = ref({
  title: {
    text: '5132',
    subtext: '总体',
    x: 'center',
    y: '40%',
    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: [{
      "value": 1924,
      "name": "字段名称1"
    }, {
      "value": 1055,
      "name": "字段名称2"
    }, {
      "value": 1532,
      "name": "字段名称3"
    }
    ].sort(function (a, b) {
      return a.value - b.value
    }),
    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,

      }
    }
  }]
})
</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: .25rem;

        ul {
          display: flex;

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

    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 {
        flex: 0 1 33.33%;
      }
    }

    .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 {
        flex: 0 1 33.33%;
      }
    }
  }
}
</style>