kouan-screen/src/views/screen/two-kouan-full-run-manage/index.vue

<template>
  <div class="__main">
    <headCom tab="guest"/>
    <div class="__content">
      <div class="__left">
        <div class="switch">
          <div class="switch-item __hover" :class="{active: state.switch == 1}" @click="state.switch = 1">本日</div>
          <div class="switch-item __hover" :class="{active: state.switch == 2}" @click="state.switch = 2">本周</div>
          <div class="switch-item __hover" :class="{active: state.switch == 3}" @click="state.switch = 3">本月</div>
        </div>
        <div class="__block-1 one">
          <div class="__title">
            人员<span>（人）</span>
          </div>
          <div class="__block-content">
            <div class="item">
              <div>89678</div>
              <div>进港人员</div>
            </div>
            <div class="item">
              <div>79595</div>
              <div>出境人员</div>
            </div>
            <div class="item">
              <div>808</div>
              <div>离岛人员</div>
            </div>
          </div>
        </div>
        <div class="__block-1 two">
          <div class="__title">
            人员<span>（人）</span>
          </div>
          <div class="__block-content">
            <div class="item">
              <div>89678</div>
              <div>
                <img src="./img/arrow.png"/>
                进境车辆
                <img src="./img/arrow.png"/>
              </div>
            </div>
            <div class="item">
              <div>79595</div>
              <div>
                <img src="./img/arrow.png"/>
                出境车辆
                <img src="./img/arrow.png"/>
              </div>
            </div>
            <div class="item">
              <div>808</div>
              <div>
                <img src="./img/arrow.png"/>
                离境车辆
                <img src="./img/arrow.png"/>
              </div>
            </div>
          </div>
        </div>
        <div class="__block-1 three">
          <div class="__title">
            货物
          </div>
          <div class="__block-content">
            <div class="tr">
              <div class="p1"></div>
              <div class="p2">进口</div>
              <div class="p3">出口</div>
              <div class="p4">出岛</div>
            </div>
            <div class="tr">
              <div class="p1">报关单位<span>（个）</span></div>
              <div class="p2">78023</div>
              <div class="p3">124512</div>
              <div class="p4">494289</div>
            </div>
            <div class="tr">
              <div class="p1">监管货物总值<span>（万元）</span></div>
              <div class="p2">78023</div>
              <div class="p3">124512</div>
              <div class="p4">494289</div>
            </div>
            <div class="tr">
              <div class="p1">监管货物重量<span>（万吨）</span></div>
              <div class="p2">78023</div>
              <div class="p3">124512</div>
              <div class="p4">494289</div>
            </div>
            <div class="tr">
              <div class="p1">免税额度<span>（万元）</span></div>
              <div class="p2">78023</div>
              <div class="p3">124512</div>
              <div class="p4">494289</div>
            </div>
          </div>
        </div>
        <div class="__block-1 four">
          <div class="__title">
            物品
          </div>
          <div class="__block-content">
            <div>
              <div>行李物品<span>(万件)</span></div>
              <div>1398</div>
            </div>
            <div>
              <div>免税金额<span>(万元)</span></div>
              <div>1398</div>
            </div>
          </div>
        </div>
        <div class="__block-1 five">
          <div class="__title">
            通行态势
            <div class="__buttons">
              <div class="__hover" :class="{active: state.txts.tab == 1}" @click="state.txts.tab = 1">人员</div>
              <div class="__hover" :class="{active: state.txts.tab == 2}" @click="state.txts.tab = 2">车辆</div>
              <div class="__hover" :class="{active: state.txts.tab == 3}" @click="state.txts.tab = 3">货物</div>
            </div>
          </div>
          <div class="__block-content">
            <div>
              <div>旅检闸机</div>
              <img src="./img/status-normal.png"/>
              <cardNumber :value="871277" type="type-2"/>
            </div>
          </div>
        </div>
      </div>
      <div class="__center">
        <div class="statistic">
          <div class="statistic-item">
            <span>80908</span><span>二线出岛货物总量<span>/万吨</span></span>
          </div>
          <div class="statistic-item">
            <span>80908</span><span>二线出岛申报旅客<span>/人</span></span>
          </div>
          <div class="statistic-item">
            <span>80908</span><span>二线出岛贸易总额<span>/万元</span></span>
          </div>
        </div>
        <div class="map">
          <mapChart/>
        </div>
        <div class="bottom">
          <div class="__title-1">
            设备资源控制
          </div>
          <div class="card">
            <div class="title">设备<br/>情况</div>
            <div class="list">
              <div>
                <img src="./img/bottom-icon-1.png"/>
                <div>
                  <div>旅检通道</div>
                  <div>
                    <div>16</div>
                    <div>/个</div>
                  </div>
                </div>
              </div>
              <div>
                <img src="./img/bottom-icon-2.png"/>
                <div>
                  <div>客车通道</div>
                  <div>
                    <div>16</div>
                    <div>/条</div>
                  </div>
                </div>
              </div>
              <div>
                <img src="./img/bottom-icon-3.png"/>
                <div>
                  <div>货车通道</div>
                  <div>
                    <div>16</div>
                    <div>/条</div>
                  </div>
                </div>
              </div>
              <div>
                <img src="./img/bottom-icon-4.png"/>
                <div>
                  <div>H986</div>
                  <div>
                    <div>16</div>
                    <div>/台</div>
                  </div>
                </div>
              </div>
              <div>
                <img src="./img/bottom-icon-5.png"/>
                <div>
                  <div>X光机</div>
                  <div>
                    <div>16</div>
                    <div>/台</div>
                  </div>
                </div>
              </div>
              <div>
                <img src="./img/bottom-icon-6.png"/>
                <div>
                  <div>毫米波</div>
                  <div>
                    <div>16</div>
                    <div>/台</div>
                  </div>
                </div>
              </div>
              <div>
                <img src="./img/bottom-icon-7.png"/>
                <div>
                  <div>视频点位</div>
                  <div>
                    <div>167</div>
                    <div>/台</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="__right">
        <div class="__block-1 six">
          <div class="__title">
            新海港口岸概况
          </div>
          <div class="__block-content">
            <div>
              <div class="left"></div>
              <div class="right">
                <div>
                  <img src="./img/six-icon-1.png"/>
                  <div>
                    <div>建筑总面积</div>
                    <div>21<span>/万平方米</span></div>
                  </div>
                </div>
                <div>
                  <img src="./img/six-icon-2.png"/>
                  <div>
                    <div>客运枢纽</div>
                    <div>8.3<span>/万平方米</span></div>
                  </div>
                </div>
                <div>
                  <img src="./img/six-icon-3.png"/>
                  <div>
                    <div>GTC</div>
                    <div>12.7<span>/万平方米</span></div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="__title-1">年设计通关能力</div>
              <div class="card">
                <div>
                  <img src="./img/six-icon-4.png"/>
                  <div>
                    <div>旅客吞吐量</div>
                    <div>1800<span>/万人次</span></div>
                  </div>
                </div>
                <div>
                  <img src="./img/six-icon-5.png"/>
                  <div>
                    <div>车辆吞吐量</div>
                    <div>180<span>/万车次</span></div>
                  </div>
                </div>
                <div>
                  <img src="./img/six-icon-6.png"/>
                  <div>
                    <div>滚装吞吐量</div>
                    <div>180<span>/万车次</span></div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="__title-1">规划定位和目标</div>
              <div class="text">
                海口新海港位于海口市新海港临港生态新城规划范围内，新城未来规划功能为“一枢纽、三中心、两地”。“一枢纽”即海南陆岛综合交通枢纽，“三中心”即海口市港航现代服务中心、购物中心、休闲娱乐中心，“两地”即海口市全城旅游集散地和精品旅游目的地。海口国际免税城毗邻新海港，项目以免税为核心，涵盖有税零售、文化娱乐、商务办公、餐饮住宿等多元素的复合型旅游零售综合体，建成后将成为自贸港人流和免税品重要集散基地。
              </div>
            </div>
            <div class="button __hover">进入港区</div>
          </div>
        </div>
        <div class="__block-1 seven">
          <div class="__title">
            新海港口岸概况
            <div class="__buttons">
              <div class="__hover" :class="{active: state.kouan.tab == 1}" @click="state.kouan.tab = 1">今日</div>
              <div class="__hover" :class="{active: state.kouan.tab == 2}" @click="state.kouan.tab = 2">本周</div>
              <div class="__hover" :class="{active: state.kouan.tab == 3}" @click="state.kouan.tab = 3">本月</div>
            </div>
          </div>
          <div class="__block-content">
            <div>
              <img src="./img/seven-icon-1.png"/>
              <div class="item">
                <div>预警</div>
                <div>87080<span>/人</span></div>
              </div>
              <div class="item">
                <div>查验</div>
                <div>87080<span>/人</span></div>
              </div>
              <img class="bg" src="./img/seven-icon-4.png"/>
            </div>
            <div>
              <img src="./img/seven-icon-2.png"/>
              <div class="item">
                <div>查验</div>
                <div>87080<span>/辆</span></div>
              </div>
              <img class="bg" src="./img/seven-icon-5.png"/>
            </div>
            <div>
              <img src="./img/seven-icon-3.png"/>
              <div class="item">
                <div>查验</div>
                <div>87080<span>/万吨</span></div>
              </div>
              <img class="bg" src="./img/seven-icon-6.png"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, reactive} from "vue";
import headCom from './components/head.vue'
import cardNumber from '../components/card-number/index.vue'
import mapChart from './map.vue'

const {proxy} = getCurrentInstance()
const state: any = reactive({
  switch: 1,
  txts: {
    tab: 1
  },
  kouan: {
    tab: 1
  },
})
</script>

<style lang="scss" scoped>
@use "./components/normal";
.__main {
  background-image: url("./img/bg.png");
  .__center {
    border: 1px solid;
    border-image: linear-gradient(0deg, rgba(94, 188, 245, 0.4), rgba(94, 188, 245, 0)) 1 1;
    padding: 24px 16px;
    background: rgba(4,19,35,0.5);
    justify-content: space-between;
  }
}
.switch {
  width: 456px;
  height: 32px;
  background: linear-gradient(0 , #00496F 0%, #0C4460 98%);
  border-radius: 4px 4px 4px 4px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .switch-item {
    width: 135px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    color: #C9ECFF;
    &.active {
      background-image: url("./img/button-active.png");
      background-size: 100% 100%;
    }
  }
}
.one {
  margin-top: 16px;
  .__block-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 90px;
      background-size: 100% 100%;
      &:nth-child(1) {
        background-image: url("./img/green.png");
      }
      &:nth-child(2) {
        background-image: url("./img/yellow.png");
      }
      &:nth-child(3) {
        background-image: url("./img/blue.png");
      }
      >:nth-child(1) {
        font-family: DINPro, DINPro;
        font-weight: 500;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 27px;
      }
      >:nth-child(2) {
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 19px;
      }
    }
  }
}
.two {
  margin-top: 16px;
  .__block-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 90px;
      background-size: 100% 100%;
      >:nth-child(1) {
        font-family: DINPro, DINPro;
        font-weight: bold;
        font-size: 24px;
        color: #FFFFFF;
        position: relative;
        display: flex;
        justify-content: center;
        width: 114px;
        height: 45px + 10px;
        &:after {
          content: '';
          position: absolute;
          width: 114px;
          height: 45px;
          background-image: url("./img/two-bottom.png");
          background-size: 100% 100%;
          top: 10px;
          z-index: -1;
        }
      }
      >:nth-child(2) {
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin-top: 8px;
        display: flex;
        align-items: center;
        width: 100%;
        >img {
          width: 6px;
          height: 6px;
          &:first-child {
            margin-right: auto;
            transform: rotate(-90deg);
          }
          &:last-child {
            margin-left: auto;
            transform: rotate(90deg);
          }
        }
      }
    }
  }
}
.three {
  margin-top: 16px;
  .__block-content {
    display: flex;
    flex-direction: column;
    .tr {
      height: 36px;
      display: flex;
      align-items: center;
      border-bottom: 1px dotted rgba(61,115,255,0.5);
      .p1 {
        flex: 1;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        >span {
          font-weight: 400;
          font-size: 12px;
          opacity: 0.6;
        }
      }
      .p2, .p3, .p4 {
        width: 85px;
        font-family: DINPro, DINPro;
        font-weight: bold;
        font-size: 20px;
        color: #FFFFFF;
      }
      &:nth-child(1) {
        background-color: rgba(105, 129, 255, 0.15);
        border-bottom: none;
        >div {
          font-weight: 500;
          font-size: 16px;
          color: #FFFFFF;
        }
      }
      &:nth-child(2) {
        >div {
          color: rgba(119, 157, 255, 1);
        }
      }
      &:nth-child(4) {
        >div {
          color: rgba(255, 153, 0, 1);
        }
      }
      &:nth-child(5) {
        >div {
          color: rgba(2, 234, 147, 1);
        }
      }
    }
  }
}
.four {
  margin-top: 16px;
  .__block-content {
    display: flex;
    gap: 16px;
    >div {
      flex: 1;
      height: 71px;
      background-size: 100% 100%;
      position: relative;
      &:nth-child(1) {
        background-image: url("./img/four-bg-1.png");
      }
      &:nth-child(2) {
        background-image: url("./img/four-bg-2.png");
      }
      >:nth-child(1) {
        line-height: 26px;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        position: absolute;
        top: 5px;
        right: 8px;
        >span {
          font-weight: 400;
          font-size: 12px;
          color: rgba(255,255,255,0.6);
        }
      }
      >:nth-child(2) {
        font-family: DINPro, DINPro;
        font-weight: bold;
        font-size: 22px;
        color: #3FD87C;
        right: 8px;
        bottom: 4px;
        position: absolute;
      }
    }
  }
}
.five {
  margin-top: 16px;
  flex: 1;
  .__block-content {
    display: flex;
    flex-direction: column;
    >div {
      width: 100%;
      height: 36px;
      background: rgba(0,170,255,0.1);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid rgba(0,170,255,0.5);
      display: flex;
      align-items: center;
      padding: 0 14px;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      >img {
        width: 44px;
        height: 18px;
        margin-left: 10px;
      }
      .card-number {
        margin-left: auto;
      }
    }
  }
}
.six {
  flex: 1;
  .__block-content {
    display: flex;
    flex-direction: column;
    >:nth-child(1) {
      display: flex;
      gap: 24px;
      .left {
        width: 247px;
        height: 134px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #1CFEFF;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        >div {
          display: flex;
          align-items: center;
          gap: 10px;
          >img {
            width: 32px;
            height: 32px;
            gap: 10px;
          }
          >div {
            >:nth-child(1) {
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;
              display: flex;
              flex-direction: column;
            }
            >:nth-child(2) {
              font-family: DINPro, DINPro;
              font-weight: bold;
              font-size: 18px;
              color: #1CFEFF;
              >span {
                font-weight: 400;
                font-size: 10px;
                color: #FFFFFF;
              }
            }
          }
        }
      }
    }
    >:nth-child(2) {
      margin-top: 24px;
      .__title-1 {
        margin-bottom: 16px;
      }
      .card {
        display: flex;
        gap: 10px;
        >div {
          flex: 1;
          height: 61px;
          background-color: #053466;
          border: 1px solid;
          border-image: radial-gradient(circle, rgba(0, 170, 255, 1), rgba(0, 141, 255, 0.5)) 1 1;
          display: flex;
          align-items: center;
          >img {
            width: 42px;
            height: 36px;
            margin: 0 4px;
          }
          >div {
            >:nth-child(1) {
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;
            }
            >:nth-child(2) {
              font-family: DINPro, DINPro;
              font-weight: 500;
              font-size: 20px;
              color: #1CFEFF;
              >span {
                font-weight: 400;
                font-size: 10px;
                color: #FFFFFF;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
    >:nth-child(3) {
      flex: 1;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .__title-1 {
        margin-bottom: 16px;
      }
      .text {
        flex: 1;
        font-weight: 400;
        font-size: 14px;
        color: rgba(255,255,255,0.6);
        line-height: 22px;
        overflow-y: auto;
      }
    }
    .button {
      margin: 24px auto 0;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      width: 84px;
      height: 30px;
      background: linear-gradient( 0, #46AC6F 0%, #0F5548 100%);
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.seven {
  margin-top: 16px;
  .__block-content {
    display: flex;
    flex-direction: column;
    gap: 13px;
    >div {
      width: 100%;
      height: 76px;
      background: linear-gradient( 180deg, rgba(1,20,42,0.77) 0%, rgba(7,61,120,0.77) 100%);
      box-shadow: inset 0px 0px 30px 0px rgba(3,110,226,0.4);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #417BD6;
      display: flex;
      align-items: center;
      position: relative;
      >img {
        width: 68px;
        height: 68px;
        margin-left: 10px;
        margin-right: 16px;
      }
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        &:nth-child(3) {
          position: relative;
          margin-left: 48px;
          &:before {
            content: '';
            width: 1px;
            height: 40px;
            background-color: #1CFEFF;
            opacity: 0.5;
            position: absolute;
            left: -24px;
          }
        }
        >:nth-child(1) {
          font-weight: 500;
          font-size: 16px;
          color: #FFFFFF;
        }
        >:nth-child(2) {
          font-family: DINPro, DINPro;
          font-weight: bold;
          font-size: 28px;
          color: #00D798;
          >span {
            font-weight: 400;
            font-size: 10px;
            color: #FFFFFF;
          }
        }
      }
      .bg {
        position: absolute;
        width: 44px;
        height: 40px;
        right: 0px;
      }
    }
  }
}
.statistic {
  display: flex;
  justify-content: space-around;
  margin-top: 4px;
  .statistic-item {
    width: 263px;
    height: 74px;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 90px;
    position: relative;
    &:nth-child(1) {
      background-image: url("./img/statistic-bg-1.png");
    }
    &:nth-child(2) {
      background-image: url("./img/statistic-bg-2.png");
    }
    &:nth-child(3) {
      background-image: url("./img/statistic-bg-3.png");
    }
    >:nth-child(1) {
      font-weight: bold;
      font-size: 28px;
      color: #FFFFFF;
      line-height: 28px;
      text-shadow: 0px 2px 8px rgba(159, 169, 182, 0.50);
      background: linear-gradient(180deg, rgba(14,197,236,1) 0%, rgba(49,190,255,1) 0%, rgba(239,252,254,1) 58.7646484375%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    >:nth-child(2) {
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      margin-top: 4px;
      >span {
        font-weight: 400;
        font-size: 10px;
        color: rgba(255,255,255,0.6);
      }
    }
  }
}
.bottom {
  .card {
    margin-top: 4px;
    width: 100%;
    height: 73px;
    background-image: url("./img/bottom-bg.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .title {
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 19px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
      &:after {
        content: '';
        width: 1px;
        height: 65px;
        background: #0A52A0;
        margin-left: 10px;
      }
    }
    .list {
      flex: 1;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      >div {
        display: flex;
        align-items: center;
        &:not(:first-child):before {
          content: '';
          background-color: #0A52A0;
          width: 1px;
          height: 38px;
          margin-right: 10px;
        }
        >img {
          width: 30px;
          height: 30px;
          margin-right: 8px;
        }
        >div {
          >:nth-child(1) {
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
          }
          >:nth-child(2) {
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            display: flex;
            align-items: flex-end;
            >:nth-child(1) {
              font-family: DINPro, DINPro;
              font-weight: 500;
              font-size: 24px;
              color: #1CFEFF;
              line-height: 24px;
              text-align: right;
              font-style: normal;
              text-transform: none;
              background: linear-gradient(0, #0BF9FE 0%, #FFFFFF 80%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            >:nth-child(2) {
              font-weight: 400;
              font-size: 10px;
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
}
</style>