liulonglong
/
shuinichang_
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: liulonglong:09d94d0a053df763121fa4469ec4fba7e37b7c26
Branches Tags
liulonglong:master
...
compare: liulonglong:357e334844e7ba0e2906b84413b0a3efefc1f188
Branches Tags
liulonglong:master

2 Commits
09d94d0a05 ... 357e334844

Author SHA1 Message Date
lll 357e334844 1 2023-11-22 12:18:42 +08:00
lll 855bbe93bc 11 2023-11-22 12:12:54 +08:00
4 changed files with 83 additions and 26 deletions
Show Stats Expand all files Collapse all files

3
src/App.vue
View File

@ -13,6 +13,9 @@
#app {
width: 7680px;
height: 3240px;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: transparent;
}
</style>

7
src/router/index.js
View File

@ -8,6 +8,13 @@ const routes = [
path: "/",
name: "index",
component: () => import("../views/Index.vue"),
children: [
{
path: "/znyw",
name: "znyw",
component: () => import("../views/lll/ZNYW.vue"),
},
],
},
];

79
src/views/Index.vue
View File

@ -4,34 +4,66 @@
<RouterView />
</div>
<div class="footer">
<div>
<img src="../assets/img/生产工艺按钮.png" alt="" class="tabbars1">
<img src="../assets/img/生产工艺按钮选中_hover.png" alt="" class="tabbars1">
<div class="box">
<img src="../assets/img/生产工艺按钮.png" alt="" class="tabbars1" />
<img
src="../assets/img/生产工艺按钮选中_hover.png"
alt=""
class="tabbars1"
/>
<p>生产工艺</p>
</div>
<div>
<img src="../assets/img/能源监测按钮 拷贝.png" alt="" class="tabbars2">
<img src="../assets/img/能源监测按钮 _hover.png" alt="" class="tabbars2">
<img
src="../assets/img/能源监测按钮 拷贝.png"
alt=""
class="tabbars2"
/>
<img
src="../assets/img/能源监测按钮 _hover.png"
alt=""
class="tabbars2"
/>
<p>能源监测</p>
</div>
<div>
<img src="../assets/img/负荷管理按钮 .png" alt="" class="tabbars3">
<img src="../assets/img/负荷管理按钮 拷贝_hover.png" alt="" class="tabbars3">
<img src="../assets/img/负荷管理按钮 .png" alt="" class="tabbars3" />
<img
src="../assets/img/负荷管理按钮 拷贝_hover.png"
alt=""
class="tabbars3"
/>
<p>负荷管理</p>
</div>
<div>
<img src="../assets/img/能效管理按钮 拷贝.png" alt="" class="tabbars4">
<img src="../assets/img/能效管理按钮_hover.png" alt="" class="tabbars4">
<img
src="../assets/img/能效管理按钮 拷贝.png"
alt=""
class="tabbars4"
/>
<img
src="../assets/img/能效管理按钮_hover.png"
alt=""
class="tabbars4"
/>
<p>能效管理</p>
</div>
<div>
<img src="../assets/img/智能运维按钮 拷贝.png" alt="" class="tabbars5">
<img src="../assets/img/智能运维按_hover.png" alt="" class="tabbars5">
<img
src="../assets/img/智能运维按钮 拷贝.png"
alt=""
class="tabbars5"
/>
<img src="../assets/img/智能运维按_hover.png" alt="" class="tabbars5" />
<p>智能运维</p>
</div>
<div>
<img src="../assets/img/碳资产管理.png" alt="" class="tabbars6">
<img src="../assets/img/碳资产管理 拷贝_hover.png" alt="" class="tabbars6">
<img src="../assets/img/碳资产管理.png" alt="" class="tabbars6" />
<img
src="../assets/img/碳资产管理 拷贝_hover.png"
alt=""
class="tabbars6"
/>
<p>碳资产管理</p>
</div>
</div>
@ -47,7 +79,7 @@ export default {
};
</script>
<style lang="less" scoped>
*{
* {
margin: 0;
padding: 0;
border: none;
@ -57,25 +89,20 @@ export default {
height: 100%;
background: url(../assets/img/标题.png);
background-size: cover;
.tabbars1{
.box {
position: absolute;
left: 2258px;
bottom: 0px;
left: 0;
bottom: 200px;
z-index: 100;
background-color: red;
}
.footer{
.footer {
width: 100%;
height: 100%;
height: 200px;
position: relative;
}
}
/* p {
font-size: 16px;
width: 100px;
height: 100px;
background-color: red;
} */
.home {
width: 100%;
height: 100%;

20
src/views/lll/ZNYW.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div class="box">
<div class="left">
<img src="../../assets/img/标题/智能运维.png" class="title" />
</div>
</div>
</template>
<script></script>
<style lang="less" scoped>
.left {
width: 1237px;
height: 2500px;
background-image: url("../../assets/img/侧边.png");
margin-top: 289px;
.title {
margin-top: 15px;
margin-left: 100px;
}
}
</style>