xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主线路图样式

Browse Source
This commit is contained in:
白菜
2025-07-16 22:23:28 +08:00
parent c837caa78a
commit e9c8b10d29
1 changed files with 110 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/views/ems/dzjk/zxlt/index.vue
View File

@ -14,8 +14,8 @@
<div class="computer"> <div class="computer">
<img src="@/assets/images/ems/computer.png" alt=""> <img src="@/assets/images/ems/computer.png" alt="">
<span style="z-index:2;position: relative;">ems</span> <span style="z-index:2;position: relative;">ems</span>
<div class="arrow"></div>
</div> </div>
<div class="arrow"></div>
</div> </div>
<div class="bottom"> <div class="bottom">
<!-- 四列设备--> <!-- 四列设备-->
@ -24,6 +24,7 @@
<div class="item-lists"> <div class="item-lists">
<div class="items-title">bms</div> <div class="items-title">bms</div>
<div class="items" v-for="(item,index) in bms" :key="index+'bms'"> <div class="items" v-for="(item,index) in bms" :key="index+'bms'">
<div class="items-line"></div>
<div style="text-align: center;margin-bottom:10px;"> <div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div> <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
</div> </div>
@ -37,6 +38,7 @@
<div class="item-lists"> <div class="item-lists">
<div class="items-title">pcs</div> <div class="items-title">pcs</div>
<div class="items" v-for="(item,index) in pcs" :key="index+'pcs'"> <div class="items" v-for="(item,index) in pcs" :key="index+'pcs'">
<div class="items-line"></div>
<div style="text-align: center;margin-bottom:10px;"> <div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div> <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
</div> </div>
@ -50,6 +52,7 @@
<div class="item-lists"> <div class="item-lists">
<div class="items-title">电表</div> <div class="items-title">电表</div>
<div class="items" v-for="(item,index) in db" :key="index+'db'"> <div class="items" v-for="(item,index) in db" :key="index+'db'">
<div class="items-line"></div>
<div style="text-align: center;margin-bottom:10px;"> <div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div> <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
</div> </div>
@ -63,6 +66,7 @@
<div class="item-lists"> <div class="item-lists">
<div class="items-title">冷却</div> <div class="items-title">冷却</div>
<div class="items" v-for="(item,index) in lq" :key="index+'lq'"> <div class="items" v-for="(item,index) in lq" :key="index+'lq'">
<div class="items-line"></div>
<div style="text-align: center;margin-bottom:10px;"> <div style="text-align: center;margin-bottom:10px;">
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div> <div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
</div> </div>
@ -143,17 +147,19 @@ export default {
padding:0; padding:0;
.container{ .container{
position: relative; position: relative;
overflow-x: auto;
} }
.top{ .top{
width: 280px;
font-size: 30px; font-size: 30px;
line-height: 40px; line-height: 40px;
font-weight: 500; font-weight: 500;
display: flex; display: flex;
vertical-align: middle; flex-direction: column;
align-items: center;
//云 样式 //云 样式
.cloud-container{ .cloud-container{
padding-top:40px; padding-top:40px;
margin:0 auto;
.cloud { .cloud {
width: 150px; width: 150px;
height: 60px; height: 60px;
@ -180,40 +186,48 @@ export default {
right: 20px; right: 20px;
} }
} }
//双箭头
.double-arrows { .double-arrows {
width: 120px; height: 95px;
margin:0 20px; margin:20px 0;
text-align: center;
.top-arrows,.bottom-arrows{ .top-arrows,.bottom-arrows{
width: 100%; height: 100%;
height: 5px; width: 6px;
background-color: #5ea9df; background-color: #5ea9df;
display: inline-block;
margin: 0 10px;
position: relative; position: relative;
vertical-align: super;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top:0; left:0;
width: 0; width: 0;
height: 0; height: 0;
} }
} }
.top-arrows{
vertical-align: super;
}
.top-arrows::after { .top-arrows::after {
right: -20px; bottom: -24px;
border-top: 10px solid transparent; border-bottom: 12px solid transparent;
border-right: 10px solid transparent; border-left: 12px solid transparent;
border-bottom: 10px solid transparent; border-right: 12px solid transparent;
border-left: 10px solid #5ea9df; border-top: 14px solid #5ea9df;
top: -8px; left: -9px;
} }
.bottom-arrows{ .bottom-arrows{
margin-top:12px; margin-top:12px;
&::after { &::after {
left: -20px; top: -24px;
border-top: 10px solid transparent; border-top: 12px solid transparent;
border-left: 10px solid transparent; border-left: 12px solid transparent;
border-bottom: 10px solid transparent; border-right: 12px solid transparent;
border-right: 10px solid #5ea9df; border-bottom: 14px solid #5ea9df;
top: -8px; left: -9px;
} }
} }
@ -221,6 +235,7 @@ export default {
//电脑 //电脑
.computer{ .computer{
margin:20px auto;
text-align: center; text-align: center;
color:#666666; color:#666666;
position: relative; position: relative;
@ -229,15 +244,14 @@ export default {
height: 100px; height: 100px;
display: block; display: block;
} }
}
.arrow{ .arrow{
height: 95px; height: 95px;
width: 30px; width: 30px;
border-radius: 5px; border-radius: 5px;
background-color: #5ea9df; background-color: #5ea9df;
position: absolute; position: relative;
bottom: -115px; margin:0 auto;
left: 50%;
transform: translateX(-50%);
&::after{ &::after{
content: ""; content: "";
position: absolute; position: absolute;
@ -251,20 +265,40 @@ export default {
bottom: -44px; bottom: -44px;
} }
} }
}
} }
.bottom{ .bottom{
z-index:1; z-index:1;
box-sizing: border-box; box-sizing: border-box;
margin-top:150px; margin-top:100px;
.zxlt-row{ .zxlt-row{
display: flex; display: flex;
} }
.col-items{ .col-items{
margin-right: 20px; padding-right: 120px;
position: relative;
&:before{
content: '';
display: block;
height: 2px;
width: 100%;
background-color: #5ea9df;
position: absolute;
top: -50px;//高出的50px
left: 0;
}
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
&:before{
content: '';
display: block;
height: 2px;
width: calc(100% - 60px);
background-color: #5ea9df;
position: absolute;
top: -50px;//高出的50px
left: 0;
}
} }
} }
.item-lists{ .item-lists{
@ -272,6 +306,17 @@ export default {
padding:25px; padding:25px;
background-color: #cbebfd;//#ffdc70; background-color: #cbebfd;//#ffdc70;
border-radius: 10px; border-radius: 10px;
&:before{
content: '';
display: block;
height: calc(100% + 50px);
width: 2px;
background-color: #5ea9df;
position: absolute;
top: -50px;//高出的50px
right: -60px;
}
.items-title{ .items-title{
font-size: 20px; font-size: 20px;
line-height: 30px; line-height: 30px;
@ -279,6 +324,7 @@ export default {
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
margin-bottom:20px; margin-bottom:20px;
} }
.items{ .items{
background-color: #ffffff; background-color: #ffffff;
@ -287,6 +333,28 @@ export default {
padding: 20px 25px; padding: 20px 25px;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.5);
.items-line{
height: 4px;
width: 66px;
background-color: #5ea9df;
position: absolute;
top: 50%;
right: -85px;//60+25
&:after{
content: '';
display: block;
height: 0;
width: 0;
border-right: 10px solid #5ea9df;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
position: absolute;
top: -8px;
left: -20px;
}
}
img{ img{
width: 120px; width: 120px;
height: auto; height: auto;