ll

liukangdong

2024-10-24 8f4771b3b83a496643b72a45a1a9dcb32a6bb2c8

ll

 pda/pages/index/center.vue

@@ -50,7 +50,7 @@
                    <text class="label">总运输量</text>

                    <text class="value">{{ item.totalNum }}万支</text>

                </view>

                <view class="line" v-if="item.type != 4">

                <view class="line" v-if="item.carrierName">

                    <text class="label">运输公司</text>

                    <text class="value">{{ item.carrierName }}</text>

                </view>

@@ -115,7 +115,7 @@
                                <text class="label">总运输量</text>

                                <text class="value">{{ item.totalNum }}万支</text>

                            </view>

                            <view class="line" v-if="item.type != 4">

                            <view class="line" v-if="item.carrierName">

                                <text class="label">运输公司</text>

                                <text class="value">{{ item.carrierName }}</text>

                            </view>

@@ -182,7 +182,7 @@
            <view class="TransformModal">

                <view class="title">转移月台</view>

                <view class="transform_list">

                    <view class="line" @click="transformPlatClick(item)" v-for="item in activePlatformGroup.platformList"

                    <view class="line" @click="transformPlatClick(item)" v-for="item in TransferList"

                        :key="item.id">

                        <view class="name">{{ item.name }}</view>

                        <view class="status" :class="{ green: item.workStatus == 1 }">({{ item.workStatus == 0 ? "空闲" : "作业中" }})

@@ -245,7 +245,8 @@
                callType: 1,



                transformPlatId: '', // è½¬ç§»è®°å½•æœˆå°id

                transformId: '', // è½¬ç§»è®°å½•ä»»åŠ¡id

                transformId: '', // è½¬ç§»è®°å½•ä»»åŠ¡id
                TransferList: [],

                wmsInfo: {},
                timer: null

            }

@@ -256,7 +257,17 @@
            //     this.getPlatformGroup()

            // }, 1000 * 30)

        },

        methods: {

        methods: {
            getTransferList() {
                getPlatformWorkData({
                    platformId: this.activePlatform.id
                }).then(res => {
                    console.log('res.data', res.data);
                    if(res.data && res.data.platformJobList){
                        this.TransferList = res.data.platformJobList
                    }
                })
            },

            getPlatformGroup() {

                getPlatformGroupList({

                    queryData: 1,

@@ -275,15 +286,19 @@
                    }

                })

            },

            getPlatformTask() {

            getPlatformTask() {
                uni.showLoading({title:"加载中..."})

                getPlatformWorkData({

                    platformId: this.activePlatform.id

                }).then(res => {

                }).then(res => {
                    uni.hideLoading()

                    this.platformTaskInfo = res.data

                    this.circulInitTaskList()

                    setInterval(() => {

                        this.circulInitTaskList()

                    }, 1000)

                }, () => {
                    uni.hideLoading()
                })

            },

            circulInitTaskList() {

@@ -470,7 +485,8 @@
                    activePlatform

                } = this

                this.transformId = item.id

                this.transformPlatId = activePlatform.id

                this.transformPlatId = activePlatform.id
                this.getTransferList()

                this.showTransform = true

            },

            handleErr(item) {


 pda/pages/index/queueup.vue

@@ -58,7 +58,7 @@
          <text class="label">总运输量</text>
          <text class="value">{{ item.totalNum }}万支</text>
        </view>
        <view class="line" v-if="item.type != 4">
        <view class="line" v-if="item.carrierName">
          <text class="label">运输公司</text>
          <text class="value">{{ item.carrierName }}</text>
        </view>

 screen/src/router/index.js

@@ -6,7 +6,7 @@
  routes: [
    {
      path: '/',
      component: () => import('../views/FireFighting.vue')
      component: () => import('../views/TaskEfficiency.vue')
    },
    {
      path: '/PlatformCall', // æœˆå°å«å·å¤§å±
@@ -38,6 +38,11 @@
      name: 'FireFighting',
      component: () => import('../views/FireFighting.vue')
    },
    {
      path: '/TaskEfficiency', //内场调度看板 -作业能效
      name: 'TaskEfficiency',
      component: () => import('../views/TaskEfficiency.vue')
    },
  ]
})


 screen/src/views/FireFighting.vue

@@ -84,28 +84,28 @@
                <img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt="">
                <div class="content">
                  <div class="name">报警</div>
                  <div class="num">12</div>
                  <div class="num num2">12</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt="">
                <div class="content">
                  <div class="name">故障</div>
                  <div class="num">12</div>
                  <div class="num num3">12</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_lixian@2x.png" alt="">
                <div class="content">
                  <div class="name">离线</div>
                  <div class="num">12</div>
                  <div class="num num4">12</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
                <div class="content">
                  <div class="name">屏蔽</div>
                  <div class="num">12</div>
                  <div class="num num5">12</div>
                </div>
              </div>
            </div>
@@ -903,32 +903,42 @@
              font-size: 12px;
              color: #D2E0FF;

              span {
                font-weight: bold;
                font-size: 30px;
                margin-right: 5px;
                font-weight: 600;
                background-image: -webkit-linear-gradient(top,
                    #01D9FE 0%,
                    #01D9FE 60%,
                    #fff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
              font-weight: bold;
              font-size: 30px;
              margin-right: 5px;
              font-weight: 600;
              background-image: -webkit-linear-gradient(top,
                  #01D9FE 0%,
                  #01D9FE 60%,
                  #fff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

              .today {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #20FFC5 50%,
                    #20FFC5 100%);
              }
            .num2 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #dd4c26 50%,
                  #e43724 100%);
            }
            .num3 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #e9bf43 50%,
                  #eb8131 100%);
            }
            .num4 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #9e9e9e 50%,
                  #9e9e9e 100%);
            }

              .finish {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #FFB120 50%,
                    #FFB120 100%);
              }
            .num5 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #3a83f5 50%,
                  #3a83f5 100%);
            }
          }
        }
@@ -1044,7 +1054,8 @@

          .watergage_wrap {
            text-align: center;

            position: relative;
            left: 30px;
            .watergage {
              width: 130px;
              height: 112px;
@@ -1079,6 +1090,7 @@
            position: relative;
            left: 20px;
            bottom: 10px;

            .unit {
              font-weight: 500;
              font-size: 80px;
@@ -1096,7 +1108,7 @@
              position: relative;
              bottom: 10px;
              left: 4px;
              font-size:44px;
              font-size: 44px;
              color: #869CC9;
            }


 screen/src/views/TaskEfficiency.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,819 @@
<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>
          <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()
  })
}



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


</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;

          }
        }
      }
    }

    .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>