odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邓洁 : 设备管理雏形

Browse Source
This commit is contained in:
邓洁
2023-12-16 16:33:54 +08:00
parent e8ac21d5be
commit a45afb9e6f
7 changed files with 141 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/views/device-manage/index.vue
View File

@@ -1,12 +1,40 @@
<template>
<div class="tunnel-bgc">
<div class="box-top">
<div class="back-tunnel" @click="router.push('/')">
<div class="back-tunnel" @click="router.back(-1)">
<div class="back-icon"></div>
<span>返回</span>
</div>
<div class="tunnel-name">
一号隧道
</div>
<div class="tunnel-title"></div>
</div>
<div class="device-content">
<div class="device-box">
<div class="box-left">
<!-- <div>风机</div>-->
<!-- <div>风压</div>-->
<!-- <div>其他传感器</div>-->
<el-menu
default-active="1"
>
<el-menu-item index="1">
<span>风机</span>
</el-menu-item>
<el-menu-item index="2">
<span>风压</span>
</el-menu-item>
<el-menu-item index="3">
<span>其他传感器</span>
</el-menu-item>
</el-menu>
</div>
<div class="box-right">
</div>
</div>
</div>
</div>
</template>
@@ -15,6 +43,7 @@ const router = useRouter()
</script>
<style scoped lang="scss">
.tunnel-bgc {
padding: 85px 0 0 0;
width: 100%;
@@ -23,7 +52,16 @@ const router = useRouter()
.box-top {
display: flex;
justify-content: space-between;
justify-content: flex-start;
.tunnel-name {
margin-left: 120px;
height: 61px;
font-size: 46px;
font-weight: bold;
color: #FFFFFF;
line-height: 61px;
}
.back-tunnel {
cursor: pointer;
@@ -47,5 +85,37 @@ const router = useRouter()
}
}
}
.device-content {
display: flex;
justify-content: center;
padding-top: 246px;
.device-box {
display: flex;
width: 2194px;
height: 1321px;
background: #064B66;
border-radius: 20px;
border: 2px solid #05FEFF;
box-sizing: border-box;
.box-left {
width: 300px;
height: 1318px;
background: #0D5A7A;
border-radius: 20px 0px 0px 20px;
:deep(.el-menu){
border-right: none;
margin-top: 261px;
background-color: #0D5A7A;
}
}
.box-right {
flex: 1;
}
}
}
}
</style>
</style>