头部

src/layout/components/Navbar.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
 
-    <div class="date-time">
+    <!-- <div class="date-time">
       <div class="warn" @mouseover="getWarnList" @mouseout="LostWarn" @click="goToAlarm">
         <div class="is-warn">
           <el-badge :value="warnNum" class="item">
@@ -36,7 +36,7 @@
           {{ dateTime.year }}-{{ dateTime.month }}-{{ dateTime.day }}
         </div>
       </div>
-    </div>
+    </div> -->
     <!-- <div class="dobusiness">
       <el-dropdown trigger="click" @command="HandleBusiness(isBusiness)">
         <span class="el-dropdown-link">
@@ -48,7 +48,7 @@
       </el-dropdown>
     </div> -->
     <!-- <div class="cutApart"></div> -->
-    <div class="right-menu">
+    <!-- <div class="right-menu">
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <span class="el-dropdown">{{ name }}<i class="el-icon-arrow-down el-icon--right"></i></span>
@@ -65,9 +65,30 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
+    </div> -->
+    <!-- <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">
+        <img src="./assets/earth.png" alt="">
+        <span>地图</span>
+      </div>
+      <div class="line"></div>
+      <div class="location">
+        <img src="./assets/Iconly.png" alt="">
+        <span>三江新区1号站</span>
+      </div>
+      <div class="line"></div>
+      <div class="name">
+        <img src="./assets/Iconly.png" alt="">
+        <span>张李密</span>
+      </div>
+      <div class="line"></div>
+      <div class="off">
+        <img src="./assets/off.png" alt="">
+        <span>退出登录</span>
+      </div>
     </div>
-    <div class="setFile"><router-link to="/control-config/setFile"><img src="./assets/set.png" width="26"
-          height="26"></router-link></div>
   </div>
 </template>
 
@@ -207,6 +228,7 @@ export default {
   font-weight: bold;
   transform: rotate(180deg);
 }
+
 .navbar {
   height: 54px;
   overflow: hidden;
@@ -222,11 +244,13 @@ export default {
   width: calc(100% - 40px);
   margin-left: 20px;
   padding-left: 15px;
-  .logo{
+
+  .logo {
     width: 447px;
     height: 34px;
     margin-right: 80px;
   }
+
   .stationNo {
     padding: 0px 15px;
     height: 32px;
@@ -440,42 +464,50 @@ export default {
 
   .right-menu {
     height: 100%;
-    line-height: 34px;
-
-    .el-dropdown {
-      font-size: 16px;
-      font-weight: 400;
-      color: #FFFFFF;
-      text-shadow: 0px 0px 11px rgba(34, 123, 255, 0.8);
-
-      .el-icon-arrow-down:before {
-        bottom: -4px;
-      }
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
+    line-height: 100%;
+    display: flex;
 
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
-      }
-    }
+    .earth {}
   }
 
+  // .right-menu {
+  //   height: 100%;
+  //   line-height: 34px;
+
+  //   .el-dropdown {
+  //     font-size: 16px;
+  //     font-weight: 400;
+  //     color: #FFFFFF;
+  //     text-shadow: 0px 0px 11px rgba(34, 123, 255, 0.8);
+
+  //     .el-icon-arrow-down:before {
+  //       bottom: -4px;
+  //     }
+  //   }
+
+  //   &:focus {
+  //     outline: none;
+  //   }
+
+  //   .right-menu-item {
+  //     display: inline-block;
+  //     padding: 0 8px;
+  //     height: 100%;
+  //     font-size: 18px;
+  //     color: #5a5e66;
+  //     vertical-align: text-bottom;
+
+  //     &.hover-effect {
+  //       cursor: pointer;
+  //       transition: background 0.3s;
+
+  //       &:hover {
+  //         background: rgba(0, 0, 0, 0.025);
+  //       }
+  //     }
+  //   }
+  // }
+
   .dobusiness {
     margin: 0 5px;
 
@@ -509,4 +541,5 @@ export default {
     opacity: 1;
     margin: 0 5px;
   }
-}</style>
+}
+</style>