二线口岸全景运行管理中心

src/router/modules/screen.ts

@@ -25,5 +25,10 @@ export default {
         },
       ]
     },
+    {
+      path: 'two-kouan-full-run-manage',
+      name: 'c0d0f0f7-a5d0-4e0c-b0d8-f0a0',
+      component: () => import('@/views/screen/two-kouan-full-run-manage/index.vue'),
+    }
   ]
 }

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="kouan-run-monitor-head">
+    <img src="../img/header.png"/>
+    <div class="head-center">
+      二线口岸全景运行管理中心
+    </div>
+    <div class="head-right">
+      <div class="head-right-time">{{state.time}}</div>
+      <div class="head-right-date">
+        <div class="day">{{state.day}}</div>
+        <div class="date">{{state.date}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, onMounted, reactive} from "vue";
+
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+  tab: {}
+})
+const state: any = reactive({
+  time: '',
+  day: '',
+  date: ''
+})
+const initTime = () => {
+  const d = new Date()
+  state.time = proxy.$util.Hms(d)
+  state.date = proxy.$util.YMD(d)
+  let str = ''
+  switch (d.getDay()) {
+    case 0: str = '星期日'
+      break
+    case 1: str = '星期一'
+      break
+    case 2: str = '星期二'
+      break
+    case 3: str = '星期三'
+      break
+    case 4: str = '星期四'
+      break
+    case 5: str = '星期五'
+      break
+    case 6: str = '星期六'
+      break
+  }
+  state.day = str
+}
+onMounted(() => {
+  initTime()
+  setInterval(() => {
+    initTime()
+  }, 1000)
+})
+</script>
+
+<style lang="scss" scoped>
+.kouan-run-monitor-head {
+  color: #ffffff;
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  >img {
+    z-index: 1;
+    width: 100%;
+    position: absolute;
+  }
+  .head-center {
+    z-index: 2;
+    position: absolute;
+    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+    font-weight: 400;
+    font-size: 50px;
+    color: #E7F5FF;
+    letter-spacing: 2px;
+    text-shadow: 0px 20px 30px #0091FF, 0px 0px 4px #0D74C2;
+    line-height: 90px;
+  }
+  .head-right {
+    margin-top: 14px;
+    margin-right: 30px;
+    height: fit-content;
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    .head-right-time {
+      font-size: 34px;
+      font-weight: bold;
+    }
+    .head-right-date {
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/screen/two-kouan-full-run-manage/components/normal.scss

@@ -0,0 +1,68 @@
+.__main {
+  color: #ffffff;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  >.__content {
+    z-index: 2;
+    flex: 1;
+    padding: 24px;
+    display: flex;
+    gap: 24px;
+    overflow: hidden;
+    >.__left {
+      width: 456px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    >.__center {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    >.__right {
+      width: 456px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+  }
+}
+.__block-1 {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  >.__title {
+    height: 45px;
+    width: 404px;
+    font-weight: bold;
+    font-size: 22px;
+    padding-left: 44px;
+    position: relative;
+    background: linear-gradient(180deg, rgb(212, 237, 243), rgb(176, 181, 182));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    &:before {
+      content: '';
+      width: 100%;
+      height: 100%;
+      background-image: url("@/views/screen/kouan-run-monitor/img/block-head.png");
+      background-size: auto 100%;
+      background-position-x: -22px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+    }
+  }
+  >.__block-content {
+    overflow: hidden;
+    flex: 1;
+    background-image: url("@/views/screen/kouan-run-monitor/img/block-bg.png");
+    background-size: 100% 100%;
+  }
+}

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

@@ -0,0 +1,59 @@
+<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>
+      <div class="__center">
+      </div>
+      <div class="__right">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, reactive} from "vue";
+import headCom from './components/head.vue'
+
+const {proxy} = getCurrentInstance()
+const state: any = reactive({
+  switch: 1
+})
+</script>
+
+<style lang="scss" scoped>
+@use "./components/normal";
+.__main {
+  background-image: url("./img/bg.png");
+}
+.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%;
+    }
+  }
+}
+
+</style>