代码提交

src/view/index.vue

@@ -261,7 +261,11 @@
       </div>
     </div>
     <div class="middle-content">
-      <div class="middleBottom"></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>
   </div>
 </template>
@@ -271,6 +275,7 @@ export default {
   name: "index",
   data() {
     return {
+      menuAc:0,
       hallList: [
         {
           font: "平均办理时长",
@@ -398,6 +403,17 @@ export default {
           name: "排名",
         },
       ],
+      menu:[
+        {
+          icon: require("@/assets/images/zongti.png")
+        },
+        {
+          icon: require("@/assets/images/zhihui.png")
+        },
+        {
+          icon: require("@/assets/images/shebei.png")
+        }
+      ]
     };
   },
   mounted() {
@@ -407,8 +423,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) {
@@ -1612,10 +1647,25 @@ export default {
     width: calc(100% - 41.2%);
     top: 0;
     height: 100%;
-    border: 1px solid red;
     position: relative;
+    display: flex;
+    justify-content: center;
     .middleBottom{
-      
+      width: 60%;
+      height: 10%;
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+      .menuBtn{
+        width:142px;
+        height:52px
+      }
+      .menuBtn1{
+        width:188px;
+        height:74px
+      }
     }
 }
 /* 内容板块背景 */
@@ -1986,12 +2036,13 @@ export default {
     .selectType {
       position: absolute;
       width: 48%;
-      height: 8.5%;
+      height: 6.5%;
       top: 42%;
       display: flex;
       justify-content: space-between;
       .typeName {
         color: #fff;
+        font-size: 12px;
       }
       .typeNameAction {
         color: rgb(29, 147, 208);
@@ -2090,17 +2141,18 @@ export default {
     .selectType {
       position: absolute;
       width: 48%;
-      height: 12%;
+      height: 10%;
       top: 33%;
       display: flex;
       justify-content: space-between;
       .typeName {
         color: #fff;
+        font-size: 12px;
       }
       .serveiceAction {
         color: rgb(29, 147, 208);
         // text-decoration: underline;
-        padding-bottom: 3px;
+        padding-bottom: 1px;
         border-bottom: 1px solid rgb(29, 147, 208);
       }
     }