Compare commits
2 Commits
4368d676b7
...
8061b41f7c
| Author | SHA1 | Date |
|---|---|---|
unknown
|
8061b41f7c | |
|
unknown
|
5c735e62ed |
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div id="app"> <router-view /> </div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
mounted() {
|
||||
if (window.vuplex) {
|
||||
this.addMessageListener();
|
||||
} else {
|
||||
window.addEventListener("vuplexready", this.addMessageListener);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addMessageListener() {
|
||||
let that = this;
|
||||
window.vuplex.addEventListener("message", function (event) {
|
||||
let json = event.data;
|
||||
that.$router.push({
|
||||
name: "pds1",
|
||||
query: {
|
||||
type: json,
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "MicrosoftYaHei" !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 7680px;
|
||||
height: 3240px;
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
overflow: hidden;
|
||||
/* background: transparent; */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div id="app"> <router-view /> </div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
mounted() {
|
||||
if (window.vuplex) {
|
||||
this.addMessageListener();
|
||||
} else {
|
||||
window.addEventListener("vuplexready", this.addMessageListener);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addMessageListener() {
|
||||
let that = this;
|
||||
window.vuplex.addEventListener("message", function (event) {
|
||||
let json = event.data;
|
||||
that.$router.push({
|
||||
name: "pds1",
|
||||
query: {
|
||||
type: json,
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "MicrosoftYaHei" !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 7680px;
|
||||
height: 3240px;
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
overflow: hidden;
|
||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
||||
/* background: transparent; */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div id="app"> <router-view /> </div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
mounted() {
|
||||
if (window.vuplex) {
|
||||
this.addMessageListener();
|
||||
} else {
|
||||
window.addEventListener("vuplexready", this.addMessageListener);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addMessageListener() {
|
||||
let that = this;
|
||||
window.vuplex.addEventListener("message", function (event) {
|
||||
let json = event.data;
|
||||
that.$router.push({
|
||||
name: "pds1",
|
||||
query: {
|
||||
type: json,
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "MicrosoftYaHei" !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 7680px;
|
||||
height: 3240px;
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
overflow: hidden;
|
||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
||||
/* background: transparent; */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div id="app"> <router-view /> </div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
mounted() {
|
||||
if (window.vuplex) {
|
||||
this.addMessageListener();
|
||||
} else {
|
||||
window.addEventListener("vuplexready", this.addMessageListener);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addMessageListener() {
|
||||
let that = this;
|
||||
window.vuplex.addEventListener("message", function (event) {
|
||||
let json = event.data;
|
||||
that.$router.push({
|
||||
name: "pds1",
|
||||
query: {
|
||||
type: json,
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "MicrosoftYaHei" !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 7680px;
|
||||
height: 3240px;
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
overflow: hidden;
|
||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
||||
/* background: transparent; */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div id="app"> <router-view /> </div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
mounted() {
|
||||
if (window.vuplex) {
|
||||
this.addMessageListener();
|
||||
} else {
|
||||
window.addEventListener("vuplexready", this.addMessageListener);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addMessageListener() {
|
||||
let that = this;
|
||||
window.vuplex.addEventListener("message", function (event) {
|
||||
let json = event.data;
|
||||
that.$router.push({
|
||||
name: "pds1",
|
||||
query: {
|
||||
type: json,
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "MicrosoftYaHei" !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 7680px;
|
||||
height: 3240px;
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
overflow: hidden;
|
||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
||||
/* background: transparent; */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div id="app"> <router-view /> </div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
mounted() {
|
||||
if (window.vuplex) {
|
||||
this.addMessageListener();
|
||||
} else {
|
||||
window.addEventListener("vuplexready", this.addMessageListener);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addMessageListener() {
|
||||
let that = this;
|
||||
window.vuplex.addEventListener("message", function (event) {
|
||||
let json = event.data;
|
||||
that.$router.push({
|
||||
name: "pds1",
|
||||
query: {
|
||||
type: json,
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "MicrosoftYaHei" !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 7680px;
|
||||
height: 3240px;
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
overflow: hidden;
|
||||
background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png),
|
||||
url(../../assets/img/遮罩上.png), url(../../assets/img/下遮罩.png);
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div id="app"> <router-view /> </div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
mounted() {
|
||||
if (window.vuplex) {
|
||||
this.addMessageListener();
|
||||
} else {
|
||||
window.addEventListener("vuplexready", this.addMessageListener);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addMessageListener() {
|
||||
let that = this;
|
||||
window.vuplex.addEventListener("message", function (event) {
|
||||
let json = event.data;
|
||||
that.$router.push({
|
||||
name: "pds1",
|
||||
query: {
|
||||
type: json,
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "MicrosoftYaHei" !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 7680px;
|
||||
height: 3240px;
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
overflow: hidden;
|
||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,401 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="home">
|
||||
<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-image: url(../assets/img/标题.png);
|
||||
background-size: cover;
|
||||
background: transparent;
|
||||
|
||||
.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-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,401 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="home">
|
||||
<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-image: url(../assets/img/标题.png);
|
||||
background-size: cover;
|
||||
background: transparent;
|
||||
|
||||
.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-image: url(../assets/img/左遮罩.png), url(../assets/img/右遮罩.png),
|
||||
url(../assets/img/遮罩上.png), url(../assets/img/下遮罩.png);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,401 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="home">
|
||||
<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-image: url(../assets/img/标题.png);
|
||||
background-size: cover;
|
||||
background: transparent;
|
||||
|
||||
.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-image: url(../assets/img/左遮罩.png), url(../assets/img/右遮罩.png),
|
||||
url(../assets/img/遮罩上.png), url(../assets/img/下遮罩.png);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="home">
|
||||
<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-image: url(../assets/img/标题.png);
|
||||
background-size: cover;
|
||||
background: transparent;
|
||||
|
||||
.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-image: url(../assets/img/标题.png);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,401 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="home">
|
||||
<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-image: url(../assets/img/标题.png);
|
||||
background-size: cover;
|
||||
background: transparent;
|
||||
|
||||
.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-image: url(../assets/img/左遮罩.png), url(../assets/img/右遮罩.png),
|
||||
url(../assets/img/遮罩上.png), url(../assets/img/下遮罩.png);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="home">
|
||||
<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-image: url(../assets/img/标题.png);
|
||||
background-size: cover;
|
||||
background: transparent;
|
||||
|
||||
.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-image: url(../assets/img/标题.png);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -43,6 +43,6 @@ export default {
|
|||
overflow: hidden;
|
||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
||||
/* background: transparent; */
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -729,6 +729,9 @@ export default {
|
|||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png),
|
||||
// url(../../assets/img/遮罩上.png), url(../../assets/img/下遮罩.png);
|
||||
// background-color: transparent;
|
||||
padding-top: 500px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -764,7 +764,7 @@ export default {
|
|||
top: 1300px;
|
||||
|
||||
div {
|
||||
width: 457px;
|
||||
width: 560px;
|
||||
height: 140px;
|
||||
text-align: center;
|
||||
line-height: 140px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue