<template>
|
<div class="containerb">
|
<div class="bottomBg">
|
<div class="bottom1">
|
<div class="bottomImg" @click="ChangePage('0')">
|
<img class="botImg1" :src="img0" />
|
</div>
|
<div :class="bottom0 == true ? 'bottomLabelNew' : 'bottomLabel'">
|
<label>园区总览</label>
|
</div>
|
</div>
|
<div class="bottom1" @click="ChangePage('1')">
|
<div class="bottomImg">
|
<img class="botImg1" :src="img1" />
|
</div>
|
<div :class="bottom1 == true ? 'bottomLabelNew' : 'bottomLabel'">
|
<label>企业运营</label>
|
</div>
|
</div>
|
<div class="bottom1" @click="ChangePage('2')">
|
<div class="bottomImg">
|
<img class="botImg1" :src="img2" />
|
</div>
|
<div :class="bottom2 == true ? 'bottomLabelNew' : 'bottomLabel'">
|
<label>安全生产</label>
|
</div>
|
</div>
|
<div class="bottom1" @click="ChangePage('3')">
|
<div class="bottomImg">
|
<img class="botImg1" :src="img3" />
|
</div>
|
<div :class="bottom3 == true ? 'bottomLabelNew' : 'bottomLabel'">
|
<label>应急指挥</label>
|
</div>
|
</div>
|
<div class="bottom1" @click="ChangePage('4')">
|
<div class="bottomImg">
|
<img class="botImg1" :src="img4" />
|
</div>
|
<div :class="bottom4 == true ? 'bottomLabelNew' : 'bottomLabel'">
|
<label>环保监测</label>
|
</div>
|
</div>
|
<!-- <div class="bottom1">
|
<div class="bottomImg" @click="ChangePage('5')">
|
<img class="botImg1" :src="img5" />
|
</div>
|
<div :class="bottom5 == true ? 'bottomLabelNew' : 'bottomLabel'">
|
<label>智慧水务</label>
|
</div>
|
</div> -->
|
<div class="bottom1">
|
<div class="bottomImg" @click="ChangePage('6')">
|
<img class="botImg1" :src="img6" />
|
</div>
|
<div :class="bottom6 == true ? 'bottomLabelNew' : 'bottomLabel'">
|
<label>园区招商</label>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
img0: require("../../assets/image/Bottom/园区总览绿色.png"),
|
img1: require("../../assets/image/Bottom/企业运营蓝色.png"),
|
img2: require("../../assets/image/Bottom/安全生产蓝色.png"),
|
img3: require("../../assets/image/Bottom/应急指挥蓝色.png"),
|
img4: require("../../assets/image/Bottom/环保监测蓝色.png"),
|
img5: require("../../assets/image/Bottom/智慧水务蓝色.png"),
|
img6: require("../../assets/image/Bottom/园区招商蓝色.png"),
|
bottom0: true,
|
bottom1: false,
|
bottom2: false,
|
bottom3: false,
|
bottom4: false,
|
bottom5: false,
|
bottom6: false,
|
}
|
},
|
methods: {
|
|
ChangePage(parm) {
|
this.BottomInit();
|
// this.$bus.$emit("switchover", parm);
|
switch (parm) {
|
case "0":
|
this.img0 = require("../../assets/image/Bottom/园区总览绿色.png");
|
this.bottom0 = true;
|
|
break;
|
case "1":
|
this.img1 = require("../../assets/image/Bottom/企业运营绿色.png");
|
this.bottom1 = true;
|
|
break;
|
case "2":
|
this.img2 = require("../../assets/image/Bottom/安全生产绿色.png");
|
this.bottom2 = true;
|
break;
|
case "3":
|
this.img3 = require("../../assets/image/Bottom/应急指挥绿色.png");
|
this.bottom3 = true;
|
break;
|
case "4":
|
this.img4 = require("../../assets/image/Bottom/环保监测绿色.png");
|
this.bottom4 = true;
|
break;
|
case "5":
|
this.img5 = require("../../assets/image/Bottom/智慧水务绿色.png");
|
this.bottom5 = true;
|
break;
|
case "6":
|
this.img6 = require("../../assets/image/Bottom/园区招商绿色.png");
|
this.bottom6 = true;
|
break;
|
}
|
this.$emit("LeftRightChange", parm);
|
// this.$emit("LeftRightChange",parm)
|
},
|
|
BottomInit() {
|
this.img0 = require("../../assets/image/Bottom/园区总览蓝色.png");
|
this.img1 = require("../../assets/image/Bottom/企业运营蓝色.png");
|
this.img2 = require("../../assets/image/Bottom/安全生产蓝色.png");
|
this.img3 = require("../../assets/image/Bottom/应急指挥蓝色.png");
|
this.img4 = require("../../assets/image/Bottom/环保监测蓝色.png");
|
this.img5 = require("../../assets/image/Bottom/智慧水务蓝色.png");
|
this.img6 = require("../../assets/image/Bottom/园区招商蓝色.png");
|
|
this.bottom0 = false;
|
this.bottom1 = false;
|
this.bottom2 = false;
|
this.bottom3 = false;
|
this.bottom4 = false;
|
this.bottom5 = false;
|
this.bottom6 = false;
|
},
|
|
//调用父页面方法切换
|
// ChangeParentPage(parm){
|
// //this.$emit();
|
// }
|
|
}
|
|
|
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerb {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
align-items: flex-end;
|
justify-content: center;
|
}
|
|
.bottomBg {
|
width: 24%;
|
height: 80%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
|
.bottom1 {
|
display: flex;
|
flex-direction: column;
|
cursor: pointer;
|
|
.bottomImg {
|
height: 80%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.botImg1{
|
width: 140px;
|
height: 100px;
|
}
|
}
|
|
.bottomImg :hover {
|
transform: scale(1.2);
|
}
|
|
.bottomLabel {
|
height: 20%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30px;
|
color: #FFFFFF;
|
font-family: MytitileName;
|
|
|
|
|
}
|
|
|
|
.bottomLabelNew {
|
height: 20%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30px;
|
color: #0DDA87;
|
font-family: MytitileName;
|
}
|
}
|
}
|
</style>
|
