修改头部导航栏

src/views/map3d.vue

@@ -1,6 +1,13 @@
 <template>
   <div id="app">
     <div class="header">
+      <div class="timeline">
+        <div class="timeline-item" v-html="formattedText"></div>
+        <div
+          class="timeline-item timeline-item-time"
+          v-html="formattedTime"
+        ></div>
+      </div>
       <div class="menuClass" id="menuClass">
         <!-- <div
           v-for="(item, index) in menu"
@@ -55,18 +62,18 @@
       </div>
       <div class="systemTitle">海南省国土空间智慧治理试点</div>
       <tool-bar></tool-bar>
-      <div class="timeline">
+      <!-- <div class="timeline">
         <div class="timeline-item" v-html="formattedText"></div>
         <div
           class="timeline-item timeline-item-time"
           v-html="formattedTime"
         ></div>
-      </div>
+      </div> -->
       <div class="user">
-        <i
-          class="exit el-icon-switch-button"
+        <span>admin</span>
+        <i style="width: 24px;height: 24px;background-image: url('/static/images/overview/icon_LogOut.png');"
           @click="exit"
-          :title="Resource.exit"
+
         ></i>
       </div>
     </div>
@@ -102,9 +109,9 @@ export default {
     this.updateTime();
   },
   methods: {
-    viewerChange(isbig){
+    viewerChange(isbig) {
       // this.$refs.routeViewRef[ isbig ? 'switchPack_down':'switchPack_up']()
-      this.$refs.routeViewRef['switch']()
+      this.$refs.routeViewRef["switch"]();
     },
     handleMenuSelect(item) {
       this.$router.push({ path: item });
@@ -112,7 +119,10 @@ export default {
     updateTime() {
       let s = new Date().toLocaleString().split(" ");
       this.formattedText = s[0];
-      this.formattedTime = s[1];
+      // this.formattedTime = s[1];
+
+      var index = s[1].lastIndexOf(":");
+      this.formattedTime = s[1].substring(0, index);
     },
     chooseMenu(item, index) {
       if (this.activeMenuId == index) {
@@ -179,11 +189,25 @@ export default {
   cursor: pointer;
 }
 .user {
-  width: 40px;
+  width: 85px;
   height: 40px;
   position: absolute;
   right: 10px;
   top: 19px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.user span {
+  display: inline-block;
+  width: 60px;
+  height: 24px;
+  padding-left: 5px;
+  /* background-color: pink; */
+  font-size: 14px;
+  color: #bcd3e5;
+  line-height: 24px;
+  text-align: left;
 }
 .routerContainer {
   position: absolute;
@@ -248,31 +272,37 @@ export default {
 }
 .timeline {
   position: absolute;
-  right: 53px;
+  left: 11px;
   top: 17px;
   height: 38px;
   line-height: 60px;
   font-size: 14px;
-  width: 148px;
+  width: 100px;
   color: white;
-  background-image: url(/static/images/overview/time.png);
+  /* background-image: url(/static/images/overview/time.png); */
   background-size: 100% 100%;
+  z-index: 20;
 }
 .timeline-item {
   height: 25px;
   line-height: 25px;
-  text-align: center;
+  /* text-align: center; */
+  text-align: left;
   width: 100%;
   display: inline-block;
-  font-size: 11px;
   position: relative;
   top: -21px;
   letter-spacing: 1px;
+
+  font-weight: 400;
+  font-size: 14px;
+  color: #bcd3e5;
 }
 
 .timeline-item-time {
   top: -62px;
-  font-size: 19px;
+  font-size: 14px;
+  text-align: left;
 }
 
 .el-menu-demo {