zwh

src/views/layout.vue

@@ -2,12 +2,8 @@
   <div class="layout">
     <div class="header">
       <div class="header-left">
-        <div class="title">
-          信创扫描助手
-        </div>
-        <div class="time">
-          当前时间{{123}}
-        </div>
+        <div class="title">信创扫描助手</div>
+        <div class="time">当前时间{{ time }}</div>
       </div>
       <div class="header-right">
         <div class="header-img"></div>
@@ -18,14 +14,22 @@
     </div>
     <div class="contain-all">
       <div class="left-bar">
-        <div class="chose-list" :class="nowRouter=='/home'?'check':''" @click="jumRouter('/home')">
-          <div class="img-content" >
+        <div
+          class="chose-list"
+          :class="nowRouter == '/home' ? 'check' : ''"
+          @click="jumRouter('/home')"
+        >
+          <div class="img-content">
             <div class="img-home"></div>
           </div>
           <div class="list-name">首页</div>
         </div>
-        <div class="chose-list" :class="nowRouter=='/account'?'check':''" @click="jumRouter('/account')">
-          <div class="img-content" >
+        <div
+          class="chose-list"
+          :class="nowRouter == '/account' ? 'check' : ''"
+          @click="jumRouter('/account')"
+        >
+          <div class="img-content">
             <div class="img-user"></div>
           </div>
           <div class="list-name">用户信息</div>
@@ -44,109 +48,139 @@ export default {
   components: {},
   data() {
     return {
-      nowRouter:'home'
+      nowRouter: "home",
+      time:null,
+      timer:null,
     };
   },
-  watch:{
+  watch: {
     "$route.path": {
       handler(newName, oldName) {
-      // 　 　　console.log(newName);
-            this.nowRouter = newName
+        // 　 　　console.log(newName);
+        this.nowRouter = newName;
       },
-    　immediate: true
-    }
-
+      immediate: true,
+    },
+  },
+  created() {
+    this.timer = setInterval(() => {
+      this.time = this.getTime()
+    }, 1000);
+  },
+  destroyed(){
+    clearInterval(this.timer)
   },
   methods: {
-    logout(){
-      this.$router.push('/login')
+    logout() {
+      this.$router.push("/login");
       localStorage.clear();
     },
-    jumRouter(router){
-      this.$router.push(router)
-    }
+    jumRouter(router) {
+      this.$router.push(router);
+    },
+    getTime() {
+      let now = new Date();
+      let year = now.getFullYear();
+      let month = now.getMonth() + 1;
+      let day = now.getDate();
+      let hh = now.getHours();
+      let mm = now.getMinutes();
+      let ss = now.getSeconds();
+      let clock = year + "-";
+      if (month < 10) clock += "0";
+      clock += month + "-";
+      if (day < 10) clock += "0";
+      clock += day + " ";
+      if (hh < 10) clock += "0";
+      clock += hh + ":";
+      if (mm < 10) clock += "0";
+      clock += mm + ":";
+      if (ss < 10) clock += "0";
+      clock += ss;
+      return clock;
+    },
   },
 };
 </script>
 
 <style lang="less" scoped>
-.layout{
+.layout {
   width: 100%;
   height: 100%;
-  background: #EDEFF8;
-  .header{
+  background: #edeff8;
+  .header {
     height: 80px;
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0px 2px 8px 0px rgba(11, 30, 119, 0.1);
     display: flex;
     justify-content: space-between;
     line-height: 80px;
-    .header-left{
+    .header-left {
       display: flex;
-      .title{
+      .title {
         width: 220px;
         height: 80px;
         line-height: 80px;
         font-family: "DFPLiJinHeiW8";
-        color: #FFFFFF;
+        color: #ffffff;
         line-height: 80px;
         font-size: 28px;
         text-align: center;
         letter-spacing: 1px;
-        background: #4658AD;
+        background: #4658ad;
         margin-right: 20px;
       }
-      .time{
+      .time {
         font-size: 18px;
         font-family: "AlibabaPuHuiTi-Regular";
-        color: #646464
+        color: #646464;
       }
     }
-    .header-right{
+    .header-right {
       display: flex;
       align-items: center;
       margin-right: 20px;
       height: 80px;
-      .header-img{
+      .header-img {
         width: 30px;
         height: 30px;
-        background-image: url('../assets/img/admin.png');
+        background-image: url("../assets/img/admin.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
         margin-right: 12px;
       }
-      .username{
+      .username {
         font-size: 18px;
         font-family: "AlibabaPuHuiTi-Regular";
         color: #646464;
         // line-height: 25px;
       }
-      .blue-line{
+      .blue-line {
         width: 2px;
         height: 36px;
-        background: #4658AD;
+        background: #4658ad;
         margin: 0 30px;
       }
-      .login-out{
+      .login-out {
         font-size: 18px;
         font-family: "AlibabaPuHuiTi-Regular";
-        color: #F96635;
+        color: #f96635;
         cursor: pointer;
-// line-height: 25px;
+        // line-height: 25px;
       }
     }
   }
-  .contain-all{
-    height:calc(100% - 80px);
+  .contain-all {
+    height: calc(100% - 80px);
     width: 100%;
     display: flex;
-    .left-bar{
+    .left-bar {
       width: 220px;
       height: 100%;
       box-sizing: border-box;
       padding-top: 40px;
       background-color: #fff;
-      .chose-list{
+      .chose-list {
         display: flex;
         width: 100%;
         margin-bottom: 20px;
@@ -155,53 +189,51 @@ export default {
         box-sizing: border-box;
         padding-left: 40px;
         cursor: pointer;
-        &:hover{
-        background: #EDEFF8;
-        color: #4658AD;
-        .img-content{
-            background: #4176F0;
+        &:hover {
+          background: #edeff8;
+          color: #4658ad;
+          .img-content {
+            background: #4176f0;
+          }
         }
-
-      }
-        .img-content{
+        .img-content {
           width: 32px;
           height: 32px;
-          background: #C3C2C2;
+          background: #c3c2c2;
           border-radius: 4px;
           display: flex;
           justify-content: center;
           align-items: center;
           margin-right: 12px;
         }
-        .img-home{
+        .img-home {
           width: 20px;
           height: 18px;
-          background-image: url('../assets/img/home.png');
+          background-image: url("../assets/img/home.png");
           background-size: 100% 100%;
           background-repeat: no-repeat;
         }
-        .img-user{
+        .img-user {
           width: 20px;
           height: 18px;
-          background-image: url('../assets/img/img-user.png');
+          background-image: url("../assets/img/img-user.png");
           background-size: 100% 100%;
           background-repeat: no-repeat;
         }
-        .list-name{
+        .list-name {
           font-size: 20px;
-          color: #747C93;
+          color: #747c93;
         }
       }
-      .check{
-        background: #EDEFF8;
-        color: #4658AD;
-        .img-content{
-            background: #4176F0;
+      .check {
+        background: #edeff8;
+        color: #4658ad;
+        .img-content {
+          background: #4176f0;
         }
-
       }
     }
-    .right-center{
+    .right-center {
       width: calc(100% - 220px);
       height: 100%;
       box-sizing: border-box;