+
通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}
@@ -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;