feat：完善页面样式和功能

src/components/Correspondence/index.vue

@@ -3,56 +3,37 @@
     <div class="top-box">
       <div class="title">融合通信</div>
       <div class="icon-box flex">
-        <div class="item"><img src="/src/assets/images/r-icon-1.png" alt="" /> 白帝城 </div>
-        <div class="item"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
-        <div class="item"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
-        <div class="item"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
-        <div class="item"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
-        <div class="item"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
+        <div class="item"><img src="/src/assets/images/r-icon-1.png" />白帝城</div>
+        <div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
+        <div class="item"><img src="/src/assets/images/r-icon-3.png" />龙桥河</div>
+        <div class="item"><img src="/src/assets/images/r-icon-4.png" />消防队</div>
+        <div class="item"><img src="/src/assets/images/r-icon-5.png" />文旅城</div>
+        <div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div>
       </div>
     </div>
     <div class="bom-box">
-      <div class="title">
-        <span>最近联系</span>
+      <Title2 title="最近联系" />
+      <div class="table">
+        <div class="header">
+          <div>人员姓名</div>
+          <div>部门</div>
+          <div>职位</div>
+          <div>时间</div>
+        </div>
+        <div class="list">
+          <div class="item" v-for="(item, index) in 10" :key="index">
+            <div>January</div>
+            <div>消防队</div>
+            <div>消防员</div>
+            <div>消防员</div>
+          </div>
+        </div>
       </div>
-      <table class="table">
-        <tr class="tr-th">
-          <th>人员姓名</th>
-          <th>部门</th>
-          <th>职位</th>
-          <th>时间</th>
-        </tr>
-        <tr class="tr-td">
-          <td>January</td>
-          <td>$100</td>
-          <td>January</td>
-          <td>$100</td>
-        </tr>
-        <tr class="tr-td">
-          <td>February</td>
-          <td>$80</td>
-          <td>February</td>
-          <td>$80</td>
-        </tr>
-        <tr class="tr-td">
-          <td>February</td>
-          <td>$80</td>
-          <td>February</td>
-          <td>$80</td>
-        </tr>
-        <tr class="tr-td">
-          <td>February</td>
-          <td>$80</td>
-          <td>February</td>
-          <td>$80</td>
-        </tr>
-      </table>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { fitChartSize } from '@/utils/dataUtil'
   const props = defineProps({
     width: {
       type: Number,
@@ -67,57 +48,73 @@
 
 <style lang="scss" scoped>
   .box-4-content {
-    width: vw(300);
-    height: vh(1060);
-    background-image: url('/src/assets/images/rt-bg.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
+    position: relative;
     margin-top: vh(10);
     margin-left: vw(10);
-    position: relative;
-    z-index: 999;
+    width: vw(300);
+    height: vh(1060);
+    background-image: url('@/assets/images/bg-1.png');
+    background-size: 100% 100%;
     .bom-box {
       .table {
         width: 100%;
         margin-top: vh(5);
-        .tr-th {
-          background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
-          border-radius: 0px 0px 0px 0px;
-          // border: 1px solid;
-          border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
+        .header {
+          height: vh(28);
           font-weight: 400;
           font-size: vw(12);
           color: #0096ff;
-          line-height: vh(14);
-          text-align: left;
-          font-style: normal;
-          text-transform: none;
-
-          th {
-            padding: vw(5);
+          display: flex;
+          background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
+          & > div {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
           }
         }
-        .tr-td {
-          font-weight: 400;
-          font-size: vw(14);
-          color: #f1f7ff;
-          line-height: vh(16);
-          text-align: left;
-          font-style: normal;
-          text-transform: none;
-
-          td {
-            padding: vh(5) vw(10);
+        .list {
+          overflow-y: auto;
+          height: vh(490);
+          /* 滚动条整体样式 */
+          &::-webkit-scrollbar {
+            width: vw(4); /* 滚动条的宽度 */
+          }
+          /* 滚动条轨道 */
+          &::-webkit-scrollbar-track {
+            background: 'transparent'; /* 轨道的背景色 */
+          }
+          /* 滚动条滑块 */
+          &::-webkit-scrollbar-thumb {
+            background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+            border-radius: 5px; /* 滑块的圆角 */
+          }
+          .item {
+            height: vh(50);
+            font-weight: 400;
+            font-size: vw(14);
+            color: #f1f7ff;
+            display: flex;
+            &:nth-child(2n + 1) {
+              background: linear-gradient(
+                90deg,
+                rgba(0, 150, 255, 0) 0%,
+                rgba(0, 150, 255, 0.22) 100%
+              );
+            }
+            & > div {
+              flex: 1;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              white-space: nowrap; /* 保证文本在一行内显示 */
+              overflow: hidden; /* 隐藏溢出的内容 */
+              text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
+            }
           }
-        }
-        .tr-td:nth-child(odd) {
-          background: linear-gradient(90deg, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.22) 100%);
         }
       }
       .title {
-        background-image: url('/src/assets/images/nav-l-t-bg.png');
-        background-size: 100% 100%;
-
         span {
           margin-left: vw(30);
           font-weight: 800;
@@ -143,11 +140,9 @@
         color: #ffffff;
         line-height: vh(16);
         flex-wrap: wrap;
-        // margin-left: vw(20);
         .item {
-		  width:33.33%;
+          width: 33.33%;
           margin-top: vh(40);
-          // margin-right: vh(20);
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -157,22 +152,21 @@
           }
           & > img {
             width: vw(54);
-            height: vh(60);
+            height: auto;
           }
         }
       }
       .title {
-        font-weight: 800;
-        font-size: vw(16);
-        line-height: vh(26);
+        width: vw(260);
+        height: vh(26);
         text-align: center;
-        font-style: normal;
-        text-transform: none;
-        background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
-        -webkit-background-clip: text;
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-        color: transparent;
+        line-height: vh(26);
+        margin-left: vw(32.5);
+        font-size: vw(16);
+        font-weight: 800;
+        color: #fff;
+        background-image: url('@/assets/images/title-1.png');
+        background-size: 100% 100%;
       }
     }
   }

src/components/Header/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="header">
-    <div v-if="isBack" class="back" @click="handleBack">返回</div>
     <ul class="nav-left">
       <li
         class="nav-left-item"
@@ -27,6 +26,17 @@
         {{ item.name }}
       </li>
     </ul>
+    <div class="weather">
+      <span>25˚C-晴</span>
+      <span class="line">|</span>
+      <span>风速：A2-4级</span>
+      <span class="line">|</span>
+      <span>空气质量：A2-优</span>
+      <span class="ml-20">{{ currentDate }}</span>
+    </div>
+    <div v-if="isBack" class="back" @click="handleBack">
+      <img class="icon" src="@/assets/images/back.png" alt="" /> 返回
+    </div>
   </div>
 </template>
 
@@ -63,6 +73,7 @@
   })
   const emit = defineEmits(['change'])
   const router = useRouter()
+  let currentDate = ref('')
 
   const name = computed(() => {
     if (!props.isSkip && props.navLeft.length > 0) {
@@ -71,6 +82,22 @@
     return props.title
   })
 
+  const fillZero = (value) => {
+    return value < 10 ? `0${value}` : value
+  }
+  const getCurrentDate = () => {
+    var time = new Date()
+    var year = time.getFullYear()
+    var month = time.getMonth() + 1
+    var day = time.getDate()
+    var second = time.getSeconds()
+    var hour = time.getHours()
+    var minute = time.getMinutes()
+    var second = time.getSeconds()
+    currentDate.value = `${year}-${fillZero(month)}-${fillZero(day)} ${hour}:${fillZero(
+      minute
+    )}:${fillZero(second)}`
+  }
   const handleBack = () => {
     router.go(-1)
   }
@@ -81,18 +108,35 @@
       emit('on-change', index)
     }
   }
+  onMounted(() => {
+    getCurrentDate()
+    setInterval(() => {
+      getCurrentDate()
+    }, 1000)
+  })
 </script>
 
 <style scoped lang="scss">
   .header {
     position: absolute;
     left: vw(326);
+    .weather {
+      position: absolute;
+      right: 0;
+      top: vh(10);
+      font-weight: 400;
+      font-size: vw(18);
+      color: #ffffff;
+      .line {
+        margin: 0 vw(10);
+      }
+    }
     .back {
       position: absolute;
-      right: vw(20);
-      top: vh(40);
-      width: vw(120);
-      height: vh(30);
+      right: 0;
+      top: vh(50);
+      width: vw(130);
+      height: vh(36);
       font-weight: 600;
       font-size: vw(20);
       color: #ffffff;
@@ -103,6 +147,11 @@
       border-radius: vw(60);
       border: 1px solid rgba(0, 114, 220, 0.3);
       background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
+      .icon {
+        margin-right: vw(10);
+        width: vw(24);
+        height: auto;
+      }
     }
     .title {
       width: vw(3133);

src/components/ScrollNumber/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="number-digital">
+    <div class="box-item">
+      <li
+        :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
+        v-for="(item, index) in orderNum"
+        :key="index"
+      >
+        <span v-if="!isNaN(item)">
+          <i :id="`${prefix}numberItem${index}`">0123456789</i>
+        </span>
+      </li>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    count: {
+      type: Number,
+      default: 0
+    },
+    prefix: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const orderNum = ref([])
+
+  const toOrderNum = (num) => {
+    num = num.toString()
+    orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
+    nextTick(() => {
+      setNumberTransform()
+    })
+  }
+  watch(
+    () => props.count,
+    (newVal) => {
+      toOrderNum(newVal)
+    },
+    {
+      immediate: true
+    }
+  )
+  function setNumberTransform() {
+    for (let index = 0; index < orderNum.value.length; index++) {
+      const ele = document.getElementById(`${props.prefix}numberItem${index}`)
+      if (ele) {
+        ele.style.transform = `translate(-50%, -${orderNum.value[index] * 10}%)`
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .number-digital {
+    .box-item {
+      position: relative;
+      height: vh(40);
+      list-style: none;
+      color: #2d7cff;
+      writing-mode: vertical-lr;
+      text-orientation: upright;
+      /*文字禁止编辑*/
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      -khtml-user-select: none;
+      user-select: none;
+    }
+
+    /*滚动数字设置*/
+    .number-item {
+      width: vw(40);
+      height: vh(40);
+      margin-right: vw(4);
+      border-radius: vw(4);
+      color: #ffffff;
+      font-size: vw(28);
+      font-weight: bold;
+      background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
+
+      & > span {
+        position: relative;
+        display: inline-block;
+        margin-right: vw(14);
+        width: 100%;
+        height: 100%;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        overflow: hidden;
+
+        & > i {
+          position: absolute;
+          top: vh(10);
+          left: 50%;
+          transform: translate(-50%, 0);
+          transition: transform 1s ease-in-out;
+          letter-spacing: 10px;
+        }
+      }
+    }
+
+    .number-item:last-child {
+      margin-right: 0;
+    }
+
+    .num-dot {
+      display: inline-block;
+      margin-left: 8px;
+      height: 53px;
+      font-size: 47px;
+      font-family: MiSans, MiSans-Demibold;
+      font-weight: normal;
+      text-align: CENTER;
+      color: #ffffff;
+      line-height: 47px;
+    }
+  }
+</style>