头部

src/layout/components/Navbar.vue

@@ -69,7 +69,7 @@
     <!-- <div class="setFile"><router-link to="/control-config/setFile"><img src="./assets/set.png" width="26"
           height="26"></router-link></div> -->
     <div class="right-menu">
-      <div class="earth">
+      <div class="earth" @click="GoToHome">
         <img src="./assets/earth.png" alt="">
         <span>地图</span>
       </div>
@@ -80,11 +80,11 @@
       </div>
       <div class="line"></div>
       <div class="name">
-        <img src="./assets/Iconly.png" alt="">
+        <img src="./assets/earth.png" alt="">
         <span>张李密</span>
       </div>
       <div class="line"></div>
-      <div class="off">
+      <div class="off" @click.native="logout">
         <img src="./assets/off.png" alt="">
         <span>退出登录</span>
       </div>
@@ -179,6 +179,9 @@ export default {
     LostWarn() {
       this.$emit('CloseWarn');
     },
+    GoToHome(){
+      this.$router.push({path:'/Home'})
+    },
     //菜单路由
     menuList() {
 
@@ -229,7 +232,7 @@ export default {
 }
 
 .navbar {
-  height: 54px;
+  height: 55px;
   overflow: hidden;
   position: relative;
   display: flex;
@@ -465,8 +468,93 @@ export default {
     height: 100%;
     line-height: 100%;
     display: flex;
+    padding-right: 20px;
+    padding-top: 6px;
+    .line {
+      width: 2px;
+      height: 24px;
+      background: #282C38;
+      border-radius: 21px 21px 21px 21px;
+      margin: 0px 20px;
+    }
+
+    .earth {
+      cursor: pointer;
+      position: relative;
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+        vertical-align: bottom;
+      }
+
+      span {
+        font-size: 16px;
+        color: #757B8C;
+        display: inline-block;
+        height: 24px;
+        line-height: 24px;
+      }
+    }
+
+    .location {
+      height: 24px;
+      background: #282C38;
+      border-radius: 12px 12px 12px 12px;
+      border: 1px solid #3C4254;
+      padding: 0px 10px;
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 5px;
+        vertical-align:sub;
+        // position: relative;
+        // top: 3px;
+      }
 
-    .earth {}
+      span {
+        font-size: 12px;
+        color: #FFB545;
+        display: inline-block;
+        height: 24px;
+        line-height: 24px;
+      }
+    }
+
+    .name {
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+        vertical-align: bottom;
+      }
+
+      span {
+        font-size: 16px;
+        color: #FFFFFF;
+        display: inline-block;
+        height: 24px;
+        line-height: 24px;
+      }
+    }
+
+    .off {
+      cursor: pointer;
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+        vertical-align: bottom;
+      }
+
+      span {
+        font-size: 16px;
+        color: #757B8C;
+        display: inline-block;
+        height: 24px;
+        line-height: 24px;
+      }
+    }
   }
 
   // .right-menu {

src/views/equipment-monitoring/components/SubTitle.vue

@@ -174,7 +174,7 @@ export default {
 }
 
 .inner-style {
-  background: #121a29;
+  background: #192233;
   padding: 3px;
   display: flex;
   height: 32px;