Merge remote-tracking branch 'origin/master'

jiangping

2024-10-28 6bd673610b45c8b7af056d296dde17585c886586

 screen/src/views/TaskEfficiency.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1201 @@
<template>
  <v-scale-screen width="1920" height="960">
    <div class="main_app">
      <img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-作业效能统筹</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
          <span class="week">{{ week }}</span>
          <span class="time">{{ time }}</span>
        </div>
      </div>
      <div class="main_content">
        <div class="left_box">
          <div class="left_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日月台完成订单统计</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="car_static">
              <div class="echart_wrap">
                <div class="pie_text">
                  <div class="fs30"><strong>300</strong></div>
                  <div>完成量</div>
                </div>
                <div class="echart1" id="echart1"></div>
              </div>
              <div class="list">
                <div class="item">
                  <div class="line">
                    <div :style="{ background: colors[0] }" class="icon"></div>
                    <div class="text">安泰物流装货月台组</div>
                  </div>
                  <div :style="{ color: colors[0] }" class="num">100万支</div>
                </div>
                <div class="item">
                  <div class="line">
                    <div :style="{ background: colors[1] }" class="icon"></div>
                    <div class="text">安泰物流卸货月台组</div>
                  </div>
                  <div :style="{ color: colors[1] }" class="num">100万支</div>
                </div>
                <div class="item">
                  <div class="line">
                    <div :style="{ background: colors[2] }" class="icon"></div>
                    <div class="text">市公司卸货月台组</div>
                  </div>
                  <div :style="{ color: colors[2] }" class="num">100万支</div>
                </div>
              </div>
            </div>
          </div>
          <div class="left_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日月台工作时长趋势</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="list">
              <div class="line" v-for="item, i in 5">
                <div class="top"><span v-if="i < 3">top</span>{{ i }}</div>
                <div class="id_card">皖A12313</div>
                <div class="wrap">
                  <ChargeRate :rate="15" :color />
                </div>
                <div class="num">6小时34分钟</div>
              </div>
            </div>
          </div>
          <div class="left_box_three">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>实时作业效率</div>
              </div>
              <div class="tabs">
                <div class="tab active">出库</div>
                <div class="separate"></div>
                <div class="tab">入库</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="echart_wrap">
              <div class="echart2" id="echart2"></div>
            </div>
          </div>
        </div>
        <div class="center_box">
          <div class="center_box_one">
            <div class="static_wrap">
              <div class="item">
                <div class="name">月台数量</div>
                <div class="nums">
                  <div class="num" v-for="i in '010'">{{ i }}</div>
                </div>
              </div>
              <div class="item">
                <div class="name">空闲月台</div>
                <div class="nums">
                  <div class="num" v-for="i in '010'">{{ i }}</div>
                </div>
              </div>
              <div class="item">
                <div class="name">预约车辆</div>
                <div class="nums">
                  <div class="num" v-for="i in '010'">{{ i }}</div>
                </div>
              </div>
              <div class="item">
                <div class="name">作业车辆</div>
                <div class="nums">
                  <div class="num" v-for="i in '010'">{{ i }}</div>
                </div>
              </div>
              <div class="item">
                <div class="name">排队车辆</div>
                <div class="nums">
                  <div class="num" v-for="i in '010'">{{ i }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="center_box_two">
            <div class="videos">
              <div class="video" v-for="i in 4"></div>
            </div>
            <div class="list">
              <div class="line header">
                <div>月台名称</div>
                <div>作业车辆</div>
                <div>作业量</div>
                <div>作业时长</div>
                <div>预计完成时间</div>
                <div>月台状态</div>
              </div>
              <div class="line" v-for="i in 6">
                <div>月台名称</div>
                <div>作业车辆</div>
                <div>作业量</div>
                <div>作业时长</div>
                <div>预计完成时间</div>
                <div>月台状态</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right_box">
          <div class="right_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日车辆作业情况</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="static_wrap">
              <div class="item">
                <div class="name">签到数</div>
                <div class="num">1</div>
              </div>
              <div class="item">
                <div class="name">已叫号</div>
                <div class="num">1</div>
              </div>
              <div class="item">
                <div class="name">已作业</div>
                <div class="num">1</div>
              </div>
              <div class="item">
                <div class="name">已完成</div>
                <div class="num">1</div>
              </div>
            </div>
            <div class="echart_wrap">
              <div class="echart3" id="echart3"></div>
            </div>
            <div class="list">
              <div class="line" v-for=" i in 7">
                <div class="time_wrap">
                  <div class="time">12.40</div>
                  <div class="sp"></div>
                  <div class="dian"></div>
                </div>
                <div class="id_card">皖A12313</div>
                <div class="status">开始作业</div>
                <div class="desc">排队等待叫号</div>
              </div>
            </div>
          </div>
          <div class="right_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>实时告警</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="list">
              <div class="item" v-for="i in 5">
                <div class="icon">
                  <div class="circle"></div>
                  <div class="line"></div>
                </div>
                <div class="content">
                  <div class="header">
                    <div class="time">time</div>
                    <span class="status">中</span>
                  </div>
                  <div class="main">
                    <div class="left">
                      <div class="title">
                        <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
                        <span>告警：开车吸烟</span>
                      </div>
                      <div class="wrap">
                        <span style="margin-right: 30px;">状态：待处理</span>
                        <span>已发生：1分钟</span>
                      </div>
                    </div>
                    <div class="status">处理中</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'
import ChargeRate from '@/components/ChargeRate.vue'
import * as echarts from 'echarts'


const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
const time = ref(dayjs().format('HH:mm:ss'))
setInterval(() => {
  date.value = dayjs().format('YYYY-MM-DD')
  week.value = weekMap[new Date().getDay()]
  time.value = dayjs().format('HH:mm:ss')

}, 1000)

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const initEchart1 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart2'))
  const option = {
    grid: {
      top: '32%',
      left: '0%',
      right: '7%',
      bottom: '0%',
      containLabel: true,
    },
    legend: {
      itemGap: 24,
      data: ['分时作业量', '累计作业量'],
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      top: '6%',
      textStyle: {
        color: '#fff',
        borderColor: '#fff'
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      backgroundColor: "rgba(9, 24, 48, 0.5)",
      borderColor: "rgba(75, 253, 238, 0.4)",
      textStyle: {
        color: "#FFF",
      },
    },
    xAxis: [{
      nameGap: 5,
      type: 'category',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: {
        color: '#9eaaba',
      },
      axisTick: {
        show: false,
      },
      data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023',],
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: '#9eaaba',
        },
        offset: 0,
        name: '万支',
        type: 'value',
        axisLabel: {
          show: true,
          color: "#9eaaba",
        },
        axisLine: {
          show: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(49,105,129,0.4)",
            type: 'dashed'
          }
        },
      },
      // {
      //   nameTextStyle: {
      //     color: '#9eaaba',
      //   },
      //   offset: 0,
      //   name: '万支',
      //   type: 'value',
      //   axisLabel: {
      //     show: true,
      //     color: "#9eaaba",
      //   },
      //   axisLine: {
      //     show: true,
      //   },
      //   splitLine: {
      //     show: true,
      //     lineStyle: {
      //       width: 1,
      //       color: "rgba(49,105,129,0.4)",
      //       type: 'dashed'
      //     }
      //   },
      // }
    ],
    series: [
      {
        name: '分时作业量',
        type: 'line',
        smooth: true,
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 0,
        lineStyle: {
          color: '#2355f5',
          borderColor: '#2355f5'
        },
        label: {
          show: false,
          position: 'top',
          color: '#fff',
        },
        itemStyle: {
          color: "#2355f5",
          lineStyle: {
            width: 0,
            type: 'solid'
          }
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#2355f5'
            },
            {
              offset: 1,
              color: 'rgba(14, 31, 65,0.1)'
            }
          ], false),
          shadowColor: 'rgba(124,248,255, 0)',
          shadowBlur: 20
        },
        data: [393, 438, 485, 631, 389, 224, 287]
      },
      {
        name: '累计作业量',
        type: 'bar',
        barWidth: 6,
        label: {
          show: false,
          position: 'top',
          color: '#fff',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#63d6fa'
            },
            {
              offset: 1,
              color: '#32718d'
            }
          ], false),
          lineStyle: {
            width: 1,
            type: 'solid'
          },
          barBorderRadius: [30, 30, 0, 0],
        },
        data: [393, 438, 485, 631, 689, 524, 687]
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const initEchart3 = () => {
  const myChart = echarts.init(document.getElementById('echart3'))
  var colors = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#7fe3fc'
    },
    {
      offset: 1,
      color: '#9ce9fc'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#64d7fa'
    }, {
      offset: 1,
      color: '#7de3fc'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4679f6'
    }, {
      offset: 1,
      color: '#4674f6'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4370f2'
    }, {
      offset: 1,
      color: '#61d3f9'
    }])]
  const option = {
    color: colors,
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    series: [
      {
        type: 'funnel',
        left: '15%',
        right: '45%',
        top: '10%',
        bottom: '10%',
        minSize: '20%',
        maxSize: '80%',
        gap: 4,
        label: {
          show: false
        },

        itemStyle: {  //去掉默认白色边框线
          borderWidth: 0,
          borderColor: '#fff'
        },
        data: [
          { value: 100, name: '预约数', },
          { value: 50, name: '已进场' },
          { value: 20, name: '已作业' },
          { value: 30, name: '已离场' },
        ]
      },
      {
        type: 'funnel',
        left: '15%',
        right: '45%',
        top: '10%',
        bottom: '10%',
        minSize: '80%',
        maxSize: '80%',
        gap: 4,
        z: 1,
        label: {
          show: true,
          position: 'outside',
          formatter: '{a|{b}}  {a|{c}%}',
          rich: {
            a: {
              color: '#869CC9',
              fontSize: 13
            },
          }
        },
        labelLine: {
          show: true,
          normal: {
            length: 80,
            position: 'right',
            lineStyle: {
              width: 1,
              type: 'dashed',
              color: 'rgba(102, 160, 239,.5)'
            }
          },
        },
        itemStyle: {  //去掉默认白色边框线
          borderWidth: 0,
          borderColor: '#fff'
        },
        itemStyle: {
          normal: {
            color: 'transparent',
            borderWidth: 0,
            opacity: 1
          }
        },
        data: [
          { value: 100, name: '预约数', },
          { value: 50, name: '已进场' },
          { value: 20, name: '已作业' },
          { value: 30, name: '已离场' },
        ]
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}



onMounted(() => {
  // initEnergy()
  initEchart1()
  initEchart2()
  initEchart3()
})


</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

.main_content {
  display: flex;
  padding: 20px 25px 0;

  .left_box {
    width: 450px;
    flex-shrink: 0;

    .left_box_one {
      width: 100%;
      margin-bottom: 20px;
      border: 1px solid;

      .car_static {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 218px;

        .echart_wrap {
          position: relative;

          .pie_text {
            width: 100px;
            height: 100px;
            border: 1px dashed rgba(1, 217, 254, 0.7);
            border-radius: 50%;
            position: absolute;

            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 12px;

            .fs30 {
              font-weight: bold;
              font-size: 18px;
              margin-bottom: 4px;
            }
          }
        }

        .echart1 {
          width: 130px;
          height: 130px;
        }

        .list {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .item {
            width: 100%;
            font-size: 14px;
            margin-bottom: 14px;

            .line {
              display: flex;
              align-items: center;
              margin-bottom: 2px;

              .icon {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin-right: 10px;
                background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
              }
            }

            .num {
              margin-left: 20px;
            }
          }
        }
      }
    }

    .left_box_two {
      margin-bottom: 20px;

      .list {
        padding: 20px 24px 4px;
        height: 227px;
        border: 1px solid;

        .line {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          height: 20px;

          .top {
            font-weight: 500;
            font-size: 12px;
            width: 33px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #DBEAEA;
            box-shadow: inset 0px 0px 3px 0px #01D9FE;
            margin-right: 10px;
          }

          .id_card {
            color: #DBEAEA;
            font-weight: 500;
            margin-right: 14px;
            font-size: 14px;
          }

          .num {
            font-weight: 500;
            font-size: 13px;
            color: #DBEAEA;
            margin-left: 15px;
          }

          .wrap {
            flex: 1;
            height: 20px;
            border: 1px solid #686B6B;
          }
        }
      }
    }

    .left_box_three {
      .echart_wrap {
        width: 450px;
        height: 212px;

        .echart2 {
          width: 450px;
          height: 212px;
        }
      }
    }
  }

  .center_box {
    flex: 1;
    padding: 20px 25px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .center_box_one {
      .static_wrap {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 30px 0 10px;

        .item {
          text-align: center;

          .name {
            font-weight: 500;
            margin-bottom: 12px;
          }

          .nums {
            display: flex;

            .num {
              width: 32px;
              height: 46px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-weight: 500;
              font-size: 34px;
              background: linear-gradient(180deg, rgba(0, 148, 235, 0.61) 0%, rgba(0, 148, 235, 0) 100%);

              &:nth-of-type(2) {
                margin: 0 4px;
              }
            }
          }
        }
      }
    }

    .center_box_two {
      width: 100%;

      .videos {
        width: 100%;
        display: flex;
        margin-bottom: 15px;

        .video {
          width: 222px;
          height: 126px;
          border: 1px solid;
          margin-right: 10px;

          &:nth-last-child(1) {
            margin: 0;
          }
        }
      }

      .list {
        width: 100%;
        height: 210px;

        .line {
          display: flex;
          height: 30px;

          &:nth-of-type(2n) {
            background: rgba(12, 153, 236, 0.2);
          }

          &:nth-of-type(2n + 1) {
            background: rgba(1, 15, 35, 0.61);
            box-shadow: inset 0px 0px 40px 0px rgba(23, 51, 108, 0.66);
          }

          div {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #D2E0FF;
          }
        }

        .header {
          font-weight: 500;
          font-size: 13px;
          color: #01ABFE;
        }
      }
    }
  }

  .right_box {
    width: 450px;

    .right_box_one {
      .static_wrap {
        display: flex;
        padding: 20px 0 15px;

        .item {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .name {
            font-size: 12px;
            color: #D2E0FF;
          }

          .num {
            font-size: 22px;
            font-weight: 500;

          }
        }
      }

      .echart_wrap {
        width: 100%;

        .echart3 {
          width: 100%;
          height: 160px;
        }
      }

      .list {
        margin: 0 20px 0;
        width: 100%;
        height: 222px;

        .line {
          display: flex;
          align-items: center;
          font-size: 12px;
          height: 33px;
          color: #D2E0FF;
          width: 100%;

          .time_wrap {
            display: flex;
            align-items: center;
            width: 52px;
            color: #FFFFFF;

            .time {
              width: 40px;
              height: 18px;
              line-height: 18px;
              text-align: center;
              background: #00A68E;
              border-radius: 2px;
            }

            .sp {
              width: 10px;
              height: 1px;
              background: #00A68E;
            }

            .dian {
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background: #00A68E;
            }
          }

          .id_card {
            flex: 6;
            margin-left: 12px;
          }

          .status {
            flex: 5;
          }

          .desc {
            flex: 9;
          }
        }
      }

    }

    .right_box_two {
      padding: 20px 20px 0;

      .list {
        height: 248px;
        overflow: auto;
        margin-top: 15px;
        scrollbar-width: none;

        .item {
          display: flex;
          font-size: 13px;
          color: #D2E0FF;

          .icon {
            width: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;

            .circle {
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background: #01D9FE;
              box-shadow: 0px 0px 1px 4px #34788f;
              /* opacity: 0.52; */
            }

            .line {
              margin-top: 3px;
              width: 1px;
              flex: 1;
              background-color: #153947;
            }
          }

          .content {
            flex: 1;

            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .status {
                width: 22px;
                height: 18px;
                line-height: 18px;
                text-align: center;
                border-radius: 2px;
                border: 1px solid #01D9FE;
                font-size: 12px;
                color: #01D9FE;
              }

              .time {
                font-size: 13px;
                color: #D2E0FF;
              }
            }

            .main {
              height: 64px;
              background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%);
              border-radius: 2px 0px 0px 2px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              border: 1px solid;
              margin-bottom: 20px;
              margin-top: 8px;
              padding: 0 10px;
              border-image: linear-gradient(270deg, rgba(254, 85, 1, 0), rgba(254, 85, 1, 0.6)) 1 1;

              .left {

                .title {
                  font-size: 13px;
                  margin-bottom: 4px;
                  display: flex;
                  align-items: center;

                  .xf {
                    width: 14px;
                    height: 14px;
                    margin-right: 6px;
                  }
                }

                .wrap {
                  font-size: 12px;
                  color: rgba(255, 255, 255, 0.6);
                  padding-left: 20px;
                }
              }



              .status {
                padding: 0 8px;
                font-size: 13px;
                color: #D2E0FF;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background: #132c56;
                border-radius: 2px;
                border: 1px solid rgba(1, 147, 254, 0.6);
              }
            }
          }
        }
      }
    }
  }
}

.main_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  position: relative;
  padding: 0px 40px 16px;
  font-weight: 600;
  font-size: 36px;

  .title {
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 70%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .time_wrap {
    font-size: 26px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 50%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;

    .time {
      width: 130px;
      display: flex;
      justify-content: flex-end;
      font-size: 30px;
    }

    .week {
      margin-left: 20px;
    }
  }

  .main_header_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.com_header {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 0 13px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 66%,
        #85b4ff 72%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 14px;
    }
  }

  .tabs {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #d2e0ff;

    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      margin: 0 6px;
    }

    .active {
      color: #0094eb;
    }
  }
}

.main_app {
  width: 1920px;
  height: 960px;
  /* width: 100%;
  height: 100vh; */
  background: #0b2539;
  color: #FFFFFF;
  position: relative;
  z-index: -2;
  font-size: 14px;

  .main_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>