refactor(menu):优化菜单栏

src/views/components/menu/index.vue

@@ -1,14 +1,22 @@
 <template>
   <div class="header-menu">
+    <div class="date-side">
+      <span class="time">{{ timeVal }}</span>
+      <span class="date">{{ dateVal }}</span>
+    </div>
     <div class="left-menu">
-      <div class="menu-item" v-for="item in leftMenuList" :key="item.id" @click="menuChange(item)">
-        <div class="left-item">{{ item.name }}</div>
+      <div class="menu-item" :class="{ curr: item.active }" v-for="item in leftMenuList" :key="item.id" @click="menuChange(item)">
+        <div class="left-item">
+          <span>{{ item.name }}</span>
+        </div>
       </div>
     </div>
-    <div class="title">渭河生态区智慧化监管平台</div>
+    <div class="title"></div>
     <div class="right-menu">
-      <div class="menu-item" v-for="item in rightMenuList" :key="item.id" @click="menuChange(item)">
-        <div class="right-item">{{ item.name }}</div>
+      <div class="menu-item" :class="{ curr: item.active }" v-for="item in rightMenuList" :key="item.id" @click="menuChange(item)">
+        <div class="right-item">
+          <span>{{ item.name }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -16,48 +24,89 @@
 
 <script>
 export default {
-  name: "MenuPanel",
+  name: 'MenuPanel',
   data() {
     return {
+      dateVal: '',
+      timeVal: '',
       leftMenuList: [
-        { id: "left_1", name: "综合概览", active: true },
-        { id: "left_2", name: "水文信息", active: false },
+        { id: 'left_1', name: '综合概览', active: true },
+        { id: 'left_2', name: '水文信息', active: false }
       ],
       rightMenuList: [
-        { id: "right_1", name: "智能预警", active: false },
-        { id: "right_2", name: "安全巡查", active: false },
-        { id: "right_3", name: "采砂监控", active: false },
-      ],
-    };
+        { id: 'right_1', name: '智能预警', active: false },
+        { id: 'right_2', name: '安全巡查', active: false },
+        { id: 'right_3', name: '采砂监控', active: false }
+      ]
+    }
   },
 
   methods: {
     menuChange(item) {
       // 重置所有菜单项的active状态
       this.leftMenuList.forEach((i) => {
-        i.active = false;
-      });
+        i.active = false
+      })
       this.rightMenuList.forEach((i) => {
-        i.active = false;
-      });
-      item.active = true;
-      this.$store.commit("setMenu", item.name);
+        i.active = false
+      })
+      item.active = true
+      this.$store.commit('setMenu', item.name)
     },
+    /** 获取当前时间的格式化字符串
+     * @returns {{date: string, time: string}}
+     */
+    getNowDateTime() {
+      const pad = (n) => n.toString().padStart(2, '0')
+      const d = new Date()
+      const Y = d.getFullYear()
+      const M = pad(d.getMonth() + 1)
+      const D = pad(d.getDate())
+      const h = pad(d.getHours())
+      const m = pad(d.getMinutes())
+      const s = pad(d.getSeconds())
+      this.dateVal = `${Y}.${M}.${D}`
+      this.timeVal = `${h}:${m}:${s}`
+    }
   },
-};
+  mounted() {
+    // 每秒刷新
+    setInterval(() => {
+      this.getNowDateTime()
+    }, 1000)
+  }
+}
 </script>
 
 <style lang="scss">
 .header-menu {
   width: 100%;
   height: 60px;
-  background: url("@/assets/image/header/menu-bg.png") no-repeat;
+  background: url('@/assets/image/header/menu-bg.png') no-repeat;
   background-size: 100% 100%;
   display: flex;
   justify-content: space-between;
   color: #fff;
   font-size: 18px;
   text-align: center;
+  .date-side {
+    height: 100%;
+    pointer-events: none;
+    line-height: 45px;
+    margin-left: 24px;
+    .time {
+      font-size: 20px;
+      height: 20px;
+      line-height: 20px;
+    }
+    .date {
+      font-size: 12px;
+      margin-left: 6px;
+      opacity: 0.7;
+      height: 20px;
+      line-height: 26px;
+    }
+  }
   .title {
     font-size: 28px;
     color: #ffffff;
@@ -68,24 +117,44 @@ export default {
   }
   .menu-item {
     font-size: 14px;
+    font-weight: 400;
     width: 145px;
-    line-height: 35px;
+    height: 36px;
+    line-height: 36px;
     text-align: center;
     position: relative;
     cursor: pointer;
     z-index: 10;
+    &:not(.curr):hover {
+      opacity: 0.6;
+    }
   }
   .left-menu {
     display: flex;
     margin-left: 15px;
-    margin-top: 5px;
     flex: 1;
   }
   .right-menu {
     display: flex;
     margin-right: 10px;
-    margin-top: 5px;
     flex: 1;
   }
+  .curr {
+    span {
+      font-weight: 600;
+    }
+    &::after {
+      content: '';
+      width: 118px;
+      height: 28px;
+      background: url('@/assets/image/common/menu_bottom.png') 50% / 100% 100%;
+      position: absolute;
+      left: 50%;
+      bottom: -15px;
+      transform: translateX(-50%);
+      z-index: -1;
+      pointer-events: none;
+    }
+  }
 }
 </style>