主线路图样式
This commit is contained in:
白菜
@ -14,8 +14,8 @@
|
||||
<div class="computer">
|
||||
<img src="@/assets/images/ems/computer.png" alt="">
|
||||
<span style="z-index:2;position: relative;">ems</span>
|
||||
<div class="arrow"></div>
|
||||
</div>
|
||||
<div class="arrow"></div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<!-- 四列设备-->
|
||||
@ -24,6 +24,7 @@
|
||||
<div class="item-lists">
|
||||
<div class="items-title">bms</div>
|
||||
<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 class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
||||
</div>
|
||||
@ -37,6 +38,7 @@
|
||||
<div class="item-lists">
|
||||
<div class="items-title">pcs</div>
|
||||
<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 class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
||||
</div>
|
||||
@ -50,6 +52,7 @@
|
||||
<div class="item-lists">
|
||||
<div class="items-title">电表</div>
|
||||
<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 class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
||||
</div>
|
||||
@ -63,6 +66,7 @@
|
||||
<div class="item-lists">
|
||||
<div class="items-title">冷却</div>
|
||||
<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 class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
||||
</div>
|
||||
@ -143,17 +147,19 @@ export default {
|
||||
padding:0;
|
||||
.container{
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.top{
|
||||
width: 280px;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
//云 样式
|
||||
.cloud-container{
|
||||
padding-top:40px;
|
||||
margin:0 auto;
|
||||
.cloud {
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
@ -180,40 +186,48 @@ export default {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
//双箭头
|
||||
.double-arrows {
|
||||
width: 120px;
|
||||
margin:0 20px;
|
||||
height: 95px;
|
||||
margin:20px 0;
|
||||
text-align: center;
|
||||
.top-arrows,.bottom-arrows{
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
background-color: #5ea9df;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
vertical-align: super;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
}
|
||||
}
|
||||
.top-arrows{
|
||||
vertical-align: super;
|
||||
}
|
||||
.top-arrows::after {
|
||||
right: -20px;
|
||||
border-top: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-left: 10px solid #5ea9df;
|
||||
top: -8px;
|
||||
bottom: -24px;
|
||||
border-bottom: 12px solid transparent;
|
||||
border-left: 12px solid transparent;
|
||||
border-right: 12px solid transparent;
|
||||
border-top: 14px solid #5ea9df;
|
||||
left: -9px;
|
||||
}
|
||||
.bottom-arrows{
|
||||
margin-top:12px;
|
||||
&::after {
|
||||
left: -20px;
|
||||
border-top: 10px solid transparent;
|
||||
border-left: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-right: 10px solid #5ea9df;
|
||||
top: -8px;
|
||||
top: -24px;
|
||||
border-top: 12px solid transparent;
|
||||
border-left: 12px solid transparent;
|
||||
border-right: 12px solid transparent;
|
||||
border-bottom: 14px solid #5ea9df;
|
||||
left: -9px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -221,6 +235,7 @@ export default {
|
||||
|
||||
//电脑
|
||||
.computer{
|
||||
margin:20px auto;
|
||||
text-align: center;
|
||||
color:#666666;
|
||||
position: relative;
|
||||
@ -229,27 +244,25 @@ export default {
|
||||
height: 100px;
|
||||
display: block;
|
||||
}
|
||||
.arrow{
|
||||
height: 95px;
|
||||
width: 30px;
|
||||
border-radius: 5px;
|
||||
background-color: #5ea9df;
|
||||
}
|
||||
.arrow{
|
||||
height: 95px;
|
||||
width: 30px;
|
||||
border-radius: 5px;
|
||||
background-color: #5ea9df;
|
||||
position: relative;
|
||||
margin:0 auto;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -115px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: -9px;
|
||||
border-top: 24px solid #5ea9df;
|
||||
border-left: 24px solid transparent;
|
||||
border-bottom: 24px solid transparent;
|
||||
border-right: 24px solid transparent;
|
||||
bottom: -44px;
|
||||
}
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: -9px;
|
||||
border-top: 24px solid #5ea9df;
|
||||
border-left: 24px solid transparent;
|
||||
border-bottom: 24px solid transparent;
|
||||
border-right: 24px solid transparent;
|
||||
bottom: -44px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -257,14 +270,35 @@ export default {
|
||||
.bottom{
|
||||
z-index:1;
|
||||
box-sizing: border-box;
|
||||
margin-top:150px;
|
||||
margin-top:100px;
|
||||
.zxlt-row{
|
||||
display: flex;
|
||||
}
|
||||
.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{
|
||||
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{
|
||||
@ -272,6 +306,17 @@ export default {
|
||||
padding:25px;
|
||||
background-color: #cbebfd;//#ffdc70;
|
||||
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{
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
@ -279,6 +324,7 @@ export default {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom:20px;
|
||||
|
||||
}
|
||||
.items{
|
||||
background-color: #ffffff;
|
||||
@ -287,6 +333,28 @@ export default {
|
||||
padding: 20px 25px;
|
||||
margin-bottom: 20px;
|
||||
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{
|
||||
width: 120px;
|
||||
height: auto;
|
||||
|
||||
Reference in New Issue
Block a user