340 lines
7.2 KiB
Vue
340 lines
7.2 KiB
Vue
<template>
|
||
<div class="content ">
|
||
<div class="home bg">
|
||
<RouterView />
|
||
</div>
|
||
<div class="footer">
|
||
<div class="box1" @click="go1">
|
||
<img src="../assets/img/生产工艺按钮.png" v-show="flag1" alt="" class="tabbars1" />
|
||
<img src="../assets/img/生产工艺按钮选中_hover.png" alt="" v-show="!flag1" class="tabbars1" />
|
||
<p>生产工艺</p>
|
||
</div>
|
||
|
||
<div class="box2" @click="go2">
|
||
<img src="../assets/img/能源监测按钮 拷贝.png" alt="" v-show="flag2" class="tabbars2" />
|
||
<img src="../assets/img/能源监测按钮 _hover.png" alt="" v-show="!flag2" class="tabbars2" />
|
||
<p>能源监测</p>
|
||
</div>
|
||
|
||
<div class="box3" @click="go3">
|
||
<img src="../assets/img/负荷管理按钮 .png" v-show="flag3" alt="" class="tabbars3" />
|
||
<img src="../assets/img/负荷管理按钮 拷贝_hover.png" alt="" v-show="!flag3" class="tabbars3" />
|
||
<p>负荷管理</p>
|
||
</div>
|
||
|
||
<div class="box4" @click="go4">
|
||
<img src="../assets/img/能效管理按钮 拷贝.png" alt="" v-show="flag4" class="tabbars4" />
|
||
<img src="../assets/img/能效管理按钮_hover.png" alt="" v-show="!flag4" class="tabbars4" />
|
||
<p>能效管理</p>
|
||
</div>
|
||
|
||
<div class="box5" @click="go5">
|
||
<img src="../assets/img/智能运维按钮 拷贝.png" alt="" v-show="flag5" class="tabbars5" />
|
||
<img src="../assets/img/智能运维按_hover.png" v-show="!flag5" alt="" class="tabbars5" />
|
||
<p>智能运维</p>
|
||
</div>
|
||
|
||
<div class="box6" @click="go6">
|
||
<img src="../assets/img/碳资产管理.png" v-show="flag6" alt="" class="tabbars6" />
|
||
<img src="../assets/img/碳资产管理 拷贝_hover.png" alt="" v-show="!flag6" class="tabbars6" />
|
||
<p>碳资产管理</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { RouterView } from "vue-router";
|
||
|
||
export default {
|
||
name: "index",
|
||
components: { RouterView },
|
||
data() {
|
||
return {
|
||
flag1: true,
|
||
flag2: true,
|
||
flag3: true,
|
||
flag4: true,
|
||
flag5: true,
|
||
flag6: true,
|
||
};
|
||
},
|
||
methods: {
|
||
sendMessageToCSharp(name) {
|
||
window.vuplex.postMessage({
|
||
type: "Tog",
|
||
message: `${name}_true`,
|
||
});
|
||
},
|
||
go1() {
|
||
this.flag1 = false;
|
||
this.flag2 = true;
|
||
this.flag3 = true;
|
||
this.flag4 = true;
|
||
this.flag5 = true;
|
||
this.flag6 = true;
|
||
this.sendMessageToCSharp("生产工艺");
|
||
// this.$router.push(
|
||
// "/znywjk",
|
||
// () => {},
|
||
// () => {}
|
||
// );
|
||
},
|
||
go2() {
|
||
this.flag1 = true;
|
||
this.flag2 = false;
|
||
this.flag3 = true;
|
||
this.flag4 = true;
|
||
this.flag5 = true;
|
||
this.flag6 = true;
|
||
this.sendMessageToCSharp("能源监测");
|
||
this.$router.push(
|
||
"/area",
|
||
() => { },
|
||
() => { }
|
||
);
|
||
},
|
||
go3() {
|
||
this.flag1 = true;
|
||
this.flag2 = true;
|
||
this.flag3 = false;
|
||
this.flag4 = true;
|
||
this.flag5 = true;
|
||
this.flag6 = true;
|
||
this.sendMessageToCSharp("负荷管理");
|
||
this.$router.push(
|
||
"/fhgl",
|
||
() => { },
|
||
() => { }
|
||
);
|
||
},
|
||
go4() {
|
||
this.flag1 = true;
|
||
this.flag2 = true;
|
||
this.flag3 = true;
|
||
this.flag4 = false;
|
||
this.flag5 = true;
|
||
this.flag6 = true;
|
||
this.sendMessageToCSharp("能效管理");
|
||
this.$router.push(
|
||
"/nxgl",
|
||
() => { },
|
||
() => { }
|
||
);
|
||
},
|
||
go5() {
|
||
this.flag1 = true;
|
||
this.flag2 = true;
|
||
this.flag3 = true;
|
||
this.flag4 = true;
|
||
this.flag5 = false;
|
||
this.flag6 = true;
|
||
this.sendMessageToCSharp("智能运维");
|
||
this.$router.push(
|
||
"/znyw",
|
||
() => { },
|
||
() => { }
|
||
);
|
||
},
|
||
go6() {
|
||
this.flag1 = true;
|
||
this.flag2 = true;
|
||
this.flag3 = true;
|
||
this.flag4 = true;
|
||
this.flag5 = true;
|
||
this.flag6 = false;
|
||
this.sendMessageToCSharp("碳资产管理");
|
||
this.$router.push(
|
||
"/tzcgl",
|
||
() => { },
|
||
() => { }
|
||
);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
}
|
||
|
||
.bg {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
/* 设置透明度，最后一个参数是透明度值（0为完全透明，1为完全不透明） */
|
||
/* 其他样式属性 */
|
||
}
|
||
|
||
.content {
|
||
width: 7680px;
|
||
height: 3240px;
|
||
background: url(../assets/img/标题.png);
|
||
background-size: cover;
|
||
|
||
.box1 {
|
||
position: absolute;
|
||
// left: 0;
|
||
left: 2130px;
|
||
bottom: 248px;
|
||
z-index: 100;
|
||
|
||
p {
|
||
position: absolute;
|
||
left: 96px;
|
||
bottom: 32px;
|
||
width: 216px;
|
||
height: 46px;
|
||
font-size: 50px;
|
||
font-family: "FZZhengHeiS-B-GB";
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.box1 {
|
||
position: absolute;
|
||
// left: 0;
|
||
left: 2130px;
|
||
bottom: 248px;
|
||
z-index: 100;
|
||
|
||
p {
|
||
position: absolute;
|
||
left: 96px;
|
||
bottom: 32px;
|
||
width: 216px;
|
||
height: 46px;
|
||
font-size: 50px;
|
||
font-family: "FZZhengHeiS-B-GB";
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.box2 {
|
||
position: absolute;
|
||
// left: 0;
|
||
left: 2720px;
|
||
bottom: 248px;
|
||
z-index: 100;
|
||
|
||
p {
|
||
position: absolute;
|
||
left: 96px;
|
||
bottom: 32px;
|
||
width: 216px;
|
||
height: 46px;
|
||
font-size: 50px;
|
||
font-family: "FZZhengHeiS-B-GB";
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.box3 {
|
||
position: absolute;
|
||
// left: 0;
|
||
left: 3328px;
|
||
bottom: 248px;
|
||
z-index: 100;
|
||
|
||
p {
|
||
position: absolute;
|
||
left: 96px;
|
||
bottom: 32px;
|
||
width: 216px;
|
||
height: 46px;
|
||
font-size: 50px;
|
||
font-family: "FZZhengHeiS-B-GB";
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.box4 {
|
||
position: absolute;
|
||
// left: 0;
|
||
left: 3920px;
|
||
bottom: 248px;
|
||
z-index: 100;
|
||
|
||
p {
|
||
position: absolute;
|
||
left: 96px;
|
||
bottom: 32px;
|
||
width: 216px;
|
||
height: 46px;
|
||
font-size: 50px;
|
||
font-family: "FZZhengHeiS-B-GB";
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.box5 {
|
||
position: absolute;
|
||
// left: 0;
|
||
left: 4528px;
|
||
bottom: 248px;
|
||
z-index: 100;
|
||
|
||
p {
|
||
position: absolute;
|
||
left: 96px;
|
||
bottom: 32px;
|
||
width: 216px;
|
||
height: 46px;
|
||
font-size: 50px;
|
||
font-family: "FZZhengHeiS-B-GB";
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.box6 {
|
||
position: absolute;
|
||
// left: 0;
|
||
left: 5168px;
|
||
bottom: 248px;
|
||
z-index: 100;
|
||
|
||
p {
|
||
position: absolute;
|
||
left: 96px;
|
||
bottom: 32px;
|
||
width: 316px;
|
||
height: 46px;
|
||
font-size: 50px;
|
||
font-family: "FZZhengHeiS-B-GB";
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 100%;
|
||
height: 200px;
|
||
position: relative;
|
||
|
||
div {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.home {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url(../assets/img/标题.png);
|
||
background-size: cover;
|
||
}
|
||
</style>
|