gx

src/components/header.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="header">
-    <img class="title" src="../assets/img_07.png" alt="" />
+    <!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
     <div class="time">
-      <div id="clock">加载中...</div>
       <div id="date-display"></div>
+      <div id="clock" style="margin-top: 4px;">加载中...</div>
     </div>
 
     <div class="header-menu">
-      <ul class="header-menu-item header-menu-left">
-        <li v-for="item in data.urlLeft.slice(0, 3)" :key="item.name">
-          <span class="header-menu-on" @click="to(item.url)">{{ item.name }}</span>
-        </li>
-      </ul>
-      <ul class="header-menu-item header-menu-right">
-        <li v-for="item in data.urlLeft.slice(3, 6)" :key="item.name">
-          <span class="header-menu-on" @click="to(item.url)">{{ item.name }}</span>
-        </li>
-      </ul>
+      <div class="header-menu-item header-menu-left">
+        <div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 3)"
+          :key="item.name">
+          <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="header-menu-item header-menu-right">
+        <div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(3, 6)"
+          :key="item.name">
+          <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -40,18 +42,18 @@ const updateClock = () => {
   //拼接时间字符串
   const timeString = `${hours}:${minutes}:${seconds}`;
 
-  const formattedDate = year + "-" + month + "-" + day;
+  const formattedDate = year + "/" + month + "/" + day;
 
   // 更新页面上的时钟显示
   document.getElementById("clock").textContent = timeString;
   // 将格式化后的日期更新到 div 中
   document.getElementById("date-display").innerText = formattedDate;
 };
-const to =(url)=>{
+const to = (url) => {
   router.push({
     path: `${url}`,
-
   });
+  data.nowTab = url
 }
 const router = useRouter();
 const routers = useRoute();
@@ -60,49 +62,52 @@ const data = reactive({
   urlLeft: [
     {
       name: "主页",
-      url:'/home/index',
+      url: '/home/index',
     },
     {
       name: "养老",
-      url:'/home/yl',
+      url: '/home/yl',
     },
     {
       name: "卫生",
-      url:'/home/hygiene',
+      url: '/home/hygiene',
     },
     {
       name: "教育",
-      url:'/home/education',
+      url: '/home/education',
     },
     {
       name: "就业救助",
-      url:'/home/work',
+      url: '/home/work',
     },
     {
       name: "智能分析",
-      url:'/home/analyze',
+      url: '/home/analyze',
     },
   ],
-  nowTab: "0",
+  nowTab: "/home/index",
 });
 
 onMounted(() => {
   // 初始调用 updateClock 以立即显示时间
   updateClock();
 
+  data.nowTab = router.currentRoute.value.fullPath
+
   // 每隔一秒钟调用一次 updateClock 以更新时钟显示
   setInterval(updateClock, 1000);
 });
 </script>
 <style lang='scss' scoped>
 .header {
-  //   background-image: url(../assets/header.png);
-  //   background-size: 100% 100%;
+  background-image: url(../assets/headerBg.png);
+  background-size: 100% 100%;
   display: flex;
-  height: 80px;
+  height: 112px;
   width: 100%;
-  background-color: beige;
+  // background-color: beige;
   position: relative;
+
   .title {
     position: absolute;
     left: 50%;
@@ -111,15 +116,19 @@ onMounted(() => {
     width: 146px;
     height: 55px;
   }
+
   .time {
     width: 200px;
-    height: 100%;
+    height: 70%;
     display: flex;
     padding-left: 20px;
     flex-direction: column;
+    color: #fff;
     // align-items: center;
     justify-content: center;
+    font-size: 18px;
   }
+
   &-menu {
     // position: absolute;
     // left:20%;
@@ -147,26 +156,66 @@ onMounted(() => {
     top: 0;
     display: flex;
     cursor: pointer;
+
     &-item {
       height: 80px;
-      width: 600px;
       display: flex;
       position: absolute;
-      justify-content: space-around;
-      li {
-        display: inline-block;
-        margin: 0px;
-        height: 80px;
-        line-height: 80px;
-        text-align: center;
-        font-size: 30px;
-      }
+      align-items: center;
     }
+
     &-left {
-      left: 10%;
+      left: 8%;
     }
+
     &-right {
-      left: 60%;
+      right: 8%;
+    }
+
+    .leftItem {
+      background-image: url(../assets/headLeft.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .leftItemC {
+      background-image: url(../assets/headLeftC.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .rightItem {
+      background-image: url(../assets/headRight.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .rightItemC {
+      background-image: url(../assets/headRightC.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .itemText {
+      width: 150px;
+      height: 62px;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 62px;
+      font-size: 18px;
+      color: #fff;
     }
   }
 }