代码提交

src/view/index.vue

@@ -204,6 +204,11 @@
         </div>
       </div>
       <div class="middleBottom">
+        <div class="menuBtn"  :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
+          <img :src="item.icon"/>
+        </div>
+      </div>
+      <div class="middleBottomIcon">
 
       </div>
     </div>
@@ -364,6 +369,17 @@ export default {
           name: '柜台状态',
           num: '在线'
         }
+      ],
+      menu:[
+        {
+          icon: require("@/assets/images/zongti.png")
+        },
+        {
+          icon: require("@/assets/images/zhihui.png")
+        },
+        {
+          icon: require("@/assets/images/shebei.png")
+        }
       ]
     };
   },
@@ -374,8 +390,27 @@ export default {
 
     this.drawHallChart();
     this.drawFlowChart();
+    this.handelBtn(0)
   },
   methods: {
+     //菜单切换
+     handelBtn(index){
+      this.menuAc = index
+        if (index == 0) {
+        this.menu[0].icon = require("@/assets/images/zongtiAc.png")
+        this.menu[1].icon = require("@/assets/images/zhihui.png")
+        this.menu[2].icon = require("@/assets/images/shebei.png")
+      }else if (index == 1) {
+        this.menu[0].icon = require("@/assets/images/zongti.png")
+        this.menu[1].icon = require("@/assets/images/zhihuiAc.png")
+        this.menu[2].icon = require("@/assets/images/shebei.png")
+      }else if (index == 2) {
+        this.menu[0].icon = require("@/assets/images/zongti.png")
+        this.menu[1].icon = require("@/assets/images/zhihui.png")
+        this.menu[2].icon = require("@/assets/images/shebeiAc.png")
+      }
+      
+    },
     drawHallChart() {
       let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
       if (myChart == null) {
@@ -1570,21 +1605,46 @@ export default {
 .left-content,
 .right-content {
   position: absolute;
-  width: 20.6%;
-  top: 0;
-  height: 100%;
-  /* background-color: aqua; */
+    width: 20.6%;
+    top: 0;
+    height: 100%;
 }
 
 .middle-content {
   position: absolute;
-  width: calc(100% - 41.2%);
-  top: 0;
-  height: 100%;
-  border: 1px solid red;
-  position: relative;
-
-  .middleBottom {}
+    width: calc(100% - 41.2%);
+    top: 0;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: center;
+   .middleBottom{
+      width: 52%;
+      height: 10%;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+      position: absolute;
+      bottom: -26px;
+      z-index: 999;
+      .menuBtn{
+        width:142px;
+        height:52px
+      }
+      .menuBtn1{
+        width:188px;
+        height:74px
+      }
+    }
+    .middleBottomIcon{
+      z-index: 100;
+      width: 1115px;
+      height: 57px;
+          background: url('../assets/images/menubottom.png') no-repeat;
+          background-size: 100% 100%;
+          position: absolute;
+          bottom: -37px; 
+    }
 }
 
 /* 内容板块背景 */