src/views/head.vue

@@ -45,9 +45,10 @@
         >
         <div class="shu"></div>
       </el-menu>
-      <!-- <div class="time_box">
-        <div class="time_item">{{ this.get_time }}</div>
-      </div> -->
+      <div class="time_box">
+        <div class="time_item">{{ this.new_time }}</div>
+        <div class="day_item">{{ this.new_day }}</div>
+      </div>
       <div class="jingGuan">
         <div class="jgtx" @click="check_user">
           <img src="../assets/companyFile/12110.png" />
@@ -68,6 +69,9 @@
 </template>
 
 <script>
+const days = ["天", "一", "二", "三", "四", "五", "六"]; // 星期数组
+let icnow = new Date(); // 初始化时间
+let interval;
 export default {
   name: "Head",
   data() {
@@ -75,14 +79,42 @@ export default {
       activeIndex: "1",
       activeIndex2: "1",
       user_show: false,
+      year: icnow.getFullYear(),
+      month: icnow.getMonth() + 1,
+      date: icnow.getDate(),
+      day: days[icnow.getDay() - 1],
+      time: icnow.toTimeString().substring(0, 8),
     };
   },
   created() {
     this.activeIndex = sessionStorage.getItem("activeIndex")
       ? sessionStorage.getItem("activeIndex")
       : "1";
+    interval = setInterval(() => {
+      let icnow = new Date();
+      this.year = icnow.getFullYear();
+      this.month = icnow.getMonth() + 1;
+      this.date = icnow.getDate();
+      this.day = days[icnow.getDay()];
+      this.time = icnow.toTimeString().substring(0, 8);
+    }, 1000);
   },
   computed: {
+    // 当前时间
+    new_time: function () {
+      return (
+        this.time
+      );
+    },
+    // 当前日期
+    new_day() {
+      return (
+        this.year + '年' + this.month + '月' + this.date + '日 星期' + this.day
+      )
+    }
+  },
+  beforeDestroy() {
+    clearInterval(interval);
   },
   methods: {
     handleSelect(key) {
@@ -104,21 +136,21 @@ export default {
       this.$router.push("/login");
     },
     get_time() {
-      let date = new Date();
-      let sign = ":";
-      let hour = date.getHours(); // 时
-      let minutes = date.getMinutes(); // 分
-      let seconds = date.getSeconds(); //秒
-      if (hour >= 0 && hour <= 9) {
-        hour = "0" + hour;
-      }
-      if (minutes >= 0 && minutes <= 9) {
-        minutes = "0" + minutes;
-      }
-      if (seconds >= 0 && seconds <= 9) {
-        seconds = "0" + seconds;
-      }
-      return hour + sign + minutes + sign + seconds;
+      setInterval(() => {
+        let date = new Date();
+        this.hour = date.getHours(); // 时
+        this.minutes = date.getMinutes(); // 分
+        this.seconds = date.getSeconds(); //秒
+        if (this.hour >= 0 && this.hour <= 9) {
+          this.hour = "0" + this.hour;
+        }
+        if (this.minutes >= 0 && this.minutes <= 9) {
+          this.minutes = "0" + this.minutes;
+        }
+        if (this.seconds >= 0 && this.seconds <= 9) {
+          this.seconds = "0" + this.seconds;
+        }
+      }, 1000);
     },
   },
 };
@@ -137,10 +169,9 @@ export default {
   background-size: 100% 100%;
   display: flex;
   align-items: center;
-
   .iconbg {
     height: 35px;
-    width: 50px;
+    width: 3vw;
     margin: 0 25px;
     // background: url("~@/assets/companyFile/矩形2111.png") no-repeat;
     // background-size: 100% 100%;
@@ -161,25 +192,32 @@ export default {
     letter-spacing: 4px;
     text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
     font-weight: 400;
-    margin-right: 30px;
+    width: 22vw;
   }
   .time_box {
-    width: 8.5vw;
-    height: 6vh;
-    border: 0.1px solid #33cccc;
+    width: 12vw;
+    height: 5vh;
+    margin-left: 1vw;
     .time_item {
-      width: 8.5vw;
-      height: 3.5vh;
+      width: 12vw;
+      height: 3vh;
       text-align: center;
-      line-height: 3.5vh;
-      color: #37FDC7 ;
+      color: #37fdc7;
       font-size: 24px;
       font-weight: 600;
     }
+    .day_item {
+      width: 12vw;
+      height: 1.5vh;
+      color: #d9e7ff;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 500;
+    }
   }
   .jingGuan {
     position: absolute;
-    right: 30px;
+    right: 3vw;
     display: flex;
     color: #edf6ff;
     align-items: center;
@@ -245,7 +283,7 @@ export default {
     align-items: center;
 
     .el-menu-item {
-      width: 130px;
+      width: 6vw;
       height: 35px;
       display: flex;
       justify-content: center;