修改看板切换菜单

hw-ui/src/layout/index2.vue

@@ -4,13 +4,15 @@
     <div class="data" id="data">{{ data }}</div>
     <div class="time" id="time">{{ time }}</div>
     <div class="date" id="date">{{ date }}</div>
-<div class="top">
-<div class="select">
+    <div class="top">
+      <div class="select">
         <el-dropdown @command="handleCommand">
-  <span class="el-dropdown-link">
-    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
-  </span>
+          <el-button type="primary" size="mini">
+            切换看板
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
           <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="/index">后台系统</el-dropdown-item>
             <el-dropdown-item command="/board/firstFloorProduction">一楼生产</el-dropdown-item>
             <el-dropdown-item command="/board/firstFloorWarehouse">一楼能源</el-dropdown-item>
             <el-dropdown-item command="/board/secondFloorProduction">二楼生产</el-dropdown-item>
@@ -22,21 +24,21 @@
             <el-dropdown-item command="/board/fifthFloorProduction">五楼生产</el-dropdown-item>
             <el-dropdown-item command="/board/fifthFloorWarehouse">五楼仓储</el-dropdown-item>
           </el-dropdown-menu>
-</el-dropdown>
+        </el-dropdown>
 
-</div>
-</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 
-let getDateIntervalFun = null
-export default {
+  let getDateIntervalFun = null
+  export default {
     name: 'BoardIndex',
     data() {
       return {
-      data:'',
+        data: '',
         time: '',
         date: '',
         value: ''
@@ -59,61 +61,65 @@ export default {
       getDate()
       getDateIntervalFun = setInterval(getDate, 1000)
     },
-methods:{
-  handleCommand(e){
-this.$router.push(e)
+    methods: {
+      handleCommand(e) {
+        this.$router.push(e)
       }
-},
+    },
     beforeDestroy() {
       getDateIntervalFun = null
     }
-}
+  }
 </script>
-<style lang='less' scoped>
-/deep/ .el-dropdown {
+<style lang="less" scoped>
+  /deep/ .el-dropdown {
     color: #fff;
-}
-.top{
-position:absolute;
-top:0;
-left:0;
-width:100%;
-height:10%;
-&:hover{
-.select{
-display:block
-}
-}
-.select{
-display:none;
-position:absolute;
-top:65%;
-left:50%;
-transform:translate(-50%,-50%);
-color:#fff
-}
-}
+  }
 
-.time, .date, .data {
+  .top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 10%;
+
+    &:hover {
+      .select {
+        display: block
+      }
+    }
+
+    .select {
+      display: none;
+      position: absolute;
+      top: 65%;
+      right: 3%;
+
+      transform: translateY(-50%);
+      color: #fff
+    }
+  }
+
+  .time, .date, .data {
     position: absolute;
     font-size: 0.8vw;
     color: #fcfcfc;
     transform: translate(-50%, -50%);
     white-space: nowrap;
-}
+  }
 
-.data {
+  .data {
     top: 3.2%;
     right: 17%;
-}
+  }
 
-.time {
+  .time {
     top: 3.2%;
     left: 85.8%;
-}
+  }
 
-.date {
+  .date {
     top: 3.2%;
     left: 94.1%;
-}
+  }
 </style>