feat：完善页面样式和功能

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