lixiaobang
/
YingYeTing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
luoshiwen 2023-02-11 18:33:39 +08:00
parent 03b5ff96a6 b0782aae97
commit bd7259b9f7
1 changed files with 71 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/view/index.vue
View File

@ -204,6 +204,11 @@
</div> </div>
</div> </div>
<div class="middleBottom"> <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>
</div> </div>
@ -364,6 +369,17 @@ export default {
name: '柜台状态', name: '柜台状态',
num: '在线' 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.drawHallChart();
this.drawFlowChart(); this.drawFlowChart();
this.handelBtn(0)
}, },
methods: { 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() { drawHallChart() {
let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart); let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
if (myChart == null) { if (myChart == null) {
@ -1570,21 +1605,46 @@ export default {
.left-content, .left-content,
.right-content { .right-content {
position: absolute; position: absolute;
width: 20.6%; width: 20.6%;
top: 0; top: 0;
height: 100%; height: 100%;
/* background-color: aqua; */
} }
.middle-content { .middle-content {
position: absolute; position: absolute;
width: calc(100% - 41.2%); width: calc(100% - 41.2%);
top: 0; top: 0;
height: 100%; height: 100%;
border: 1px solid red; position: relative;
position: relative; display: flex;
justify-content: center;
.middleBottom {} .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;
}
} }
/* 内容板块背景 */ /* 内容板块背景 */