|
|
@@ -8,6 +8,15 @@
|
|
|
width: px2rem(481px * 2) * 2 + px2rem(25px * 2);
|
|
|
|
|
|
animation: fadeInLeft 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
|
+
|
|
|
+ &.right {
|
|
|
+ right: 0;
|
|
|
+ animation: fadeInRight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
|
+ .live-video-container {
|
|
|
+ left: unset;
|
|
|
+ right: px2rem(30px * 2);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.live-video-container {
|
|
|
@@ -49,15 +58,18 @@
|
|
|
&:nth-child(5) {
|
|
|
margin-right: px2rem(35px);
|
|
|
}
|
|
|
+
|
|
|
&:nth-child(5),
|
|
|
&:nth-child(6) {
|
|
|
margin-bottom: unset;
|
|
|
}
|
|
|
+
|
|
|
width: px2rem(445px * 2);
|
|
|
height: px2rem(233.5px * 2);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+
|
|
|
video {
|
|
|
max-height: 100%;
|
|
|
max-width: 100%;
|
|
|
@@ -72,6 +84,7 @@
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
+
|
|
|
.detail-left,
|
|
|
.detail-right {
|
|
|
position: absolute;
|
|
|
@@ -88,11 +101,13 @@
|
|
|
width: calc(px2rem(470px * 2) * 2 + px2rem(21px * 2));
|
|
|
// height: calc(px2rem(472px) * 2 + px2rem(21px));
|
|
|
}
|
|
|
+
|
|
|
.detail-right {
|
|
|
right: px2rem(30px * 2);
|
|
|
width: px2rem(939px * 2);
|
|
|
// height: calc(px2rem(554px) + px2rem(390px) + px2rem(21px));
|
|
|
}
|
|
|
+
|
|
|
.echarts {
|
|
|
width: px2rem(642px * 2);
|
|
|
height: px2rem(887px * 2);
|
|
|
@@ -101,6 +116,7 @@
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
+
|
|
|
.card-container {
|
|
|
// position: absolute;
|
|
|
// top: px2rem(83px);
|
|
|
@@ -108,52 +124,64 @@
|
|
|
&-bg-incident-info {
|
|
|
// left: px2rem(30px);
|
|
|
margin-right: px2rem(21px * 2);
|
|
|
+
|
|
|
.info-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: start;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-bottom: px2rem(52px);
|
|
|
+
|
|
|
&:last-child {
|
|
|
padding-bottom: 0;
|
|
|
}
|
|
|
+
|
|
|
line-height: px2rem(50px * 2);
|
|
|
height: px2rem(50px * 2);
|
|
|
font-size: px2rem(18px * 2);
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
+
|
|
|
.info-item-lebel {
|
|
|
padding: 0 px2rem(20px * 2);
|
|
|
border-top-left-radius: px2rem(50px * 2);
|
|
|
border-bottom-left-radius: px2rem(50px * 2);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
img {
|
|
|
min-width: 13px;
|
|
|
min-height: 13px;
|
|
|
width: px2rem(18px * 2);
|
|
|
height: px2rem(18px * 2);
|
|
|
}
|
|
|
+
|
|
|
span {
|
|
|
padding-left: px2rem(13px * 2);
|
|
|
}
|
|
|
+
|
|
|
&[data-idx='0'] {
|
|
|
background: linear-gradient(to right, #035fd8, #1acfff);
|
|
|
}
|
|
|
+
|
|
|
&[data-idx='1'] {
|
|
|
background: linear-gradient(to right, #ff8b45, #f6b35c);
|
|
|
}
|
|
|
+
|
|
|
&[data-idx='2'] {
|
|
|
background: linear-gradient(to right, #8d48e9, #d789ff);
|
|
|
}
|
|
|
+
|
|
|
&[data-idx='3'] {
|
|
|
background: linear-gradient(to right, #05b382, #48e9c2);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.info-item-value {
|
|
|
flex: 1;
|
|
|
padding: 0 px2rem(20px * 2);
|
|
|
@@ -166,10 +194,12 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&-bg-command-chain {
|
|
|
// left: px2rem(521px);
|
|
|
.command-chain-container {
|
|
|
position: relative;
|
|
|
+
|
|
|
.chain-item {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
@@ -187,11 +217,13 @@
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+
|
|
|
.title {
|
|
|
font-size: px2rem(17px * 2);
|
|
|
color: #feb459;
|
|
|
padding-bottom: px2rem(13px * 2);
|
|
|
}
|
|
|
+
|
|
|
.desc {
|
|
|
text-align: center;
|
|
|
box-sizing: border-box;
|
|
|
@@ -202,6 +234,7 @@
|
|
|
padding: 0 px2rem(6px * 2);
|
|
|
font-size: px2rem(13px * 2);
|
|
|
}
|
|
|
+
|
|
|
.logo {
|
|
|
position: absolute;
|
|
|
width: px2rem(40px * 2);
|
|
|
@@ -214,6 +247,7 @@
|
|
|
transform: translateX(-50%)
|
|
|
translateY(px2rem(math.div(65px * 2, 2)) - px2rem(28px * 2));
|
|
|
}
|
|
|
+
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
@@ -225,6 +259,7 @@
|
|
|
border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
|
|
|
border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
|
|
|
}
|
|
|
+
|
|
|
&:nth-child(3),
|
|
|
&:nth-child(2) {
|
|
|
bottom: px2rem((40px - 40px) * 2);
|
|
|
@@ -235,9 +270,11 @@
|
|
|
border-top-right-radius: 0;
|
|
|
border-color: #33d3a8;
|
|
|
transform: unset;
|
|
|
+
|
|
|
.title {
|
|
|
color: #33d3a8;
|
|
|
}
|
|
|
+
|
|
|
.logo {
|
|
|
bottom: unset;
|
|
|
top: px2rem(-40px * 2);
|
|
|
@@ -245,8 +282,10 @@
|
|
|
transform: translateX(-50%)
|
|
|
translateY(px2rem(math.div(-65px * 2, 2)) + px2rem(24px * 2));
|
|
|
}
|
|
|
+
|
|
|
border-bottom-left-radius: 10px;
|
|
|
border-bottom-right-radius: 10px;
|
|
|
+
|
|
|
&::after {
|
|
|
position: absolute;
|
|
|
left: -2px;
|
|
|
@@ -258,13 +297,16 @@
|
|
|
border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&:nth-child(3) {
|
|
|
left: unset;
|
|
|
right: px2rem(20px * 2);
|
|
|
border-color: #1bbbf8;
|
|
|
+
|
|
|
.title {
|
|
|
color: #1bbbf8;
|
|
|
}
|
|
|
+
|
|
|
&::after {
|
|
|
border-bottom-color: #1bbbf8;
|
|
|
}
|
|
|
@@ -272,11 +314,13 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&-bg-incident-plan {
|
|
|
// top: px2rem(482px + 83px);
|
|
|
// left: px2rem(30px);
|
|
|
margin-top: px2rem(21px * 2);
|
|
|
margin-right: px2rem(21px * 2);
|
|
|
+
|
|
|
.plan-container {
|
|
|
.el-checkbox__inner {
|
|
|
width: px2rem(16px * 2);
|
|
|
@@ -284,16 +328,19 @@
|
|
|
height: px2rem(16px * 2);
|
|
|
min-height: 14px;
|
|
|
background-color: transparent;
|
|
|
+
|
|
|
&::after {
|
|
|
width: px2rem(10px);
|
|
|
height: px2rem(20px);
|
|
|
left: px2rem(8px);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.el-checkbox__label {
|
|
|
color: #fff;
|
|
|
padding-left: px2rem(28px);
|
|
|
}
|
|
|
+
|
|
|
.plan-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -302,6 +349,7 @@
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
padding-bottom: px2rem(20px);
|
|
|
+
|
|
|
& > span {
|
|
|
font-size: px2rem(18px * 2);
|
|
|
font-weight: 400;
|
|
|
@@ -309,6 +357,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&-bg-emergency-linkage {
|
|
|
// top: px2rem(482px + 83px);
|
|
|
// left: px2rem(521px);
|
|
|
@@ -318,16 +367,19 @@
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.linkage-item {
|
|
|
width: 50%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
font-size: px2rem(18px * 2);
|
|
|
+
|
|
|
img {
|
|
|
width: px2rem(117px * 2);
|
|
|
height: px2rem(102px * 2);
|
|
|
}
|
|
|
+
|
|
|
span {
|
|
|
margin-top: px2rem(10px * 2);
|
|
|
margin-bottom: px2rem(10px * 2);
|
|
|
@@ -336,9 +388,11 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&-bg-execution-log {
|
|
|
// right: px2rem(22px);
|
|
|
position: relative;
|
|
|
+
|
|
|
&::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
@@ -351,12 +405,15 @@
|
|
|
transform: translateX(-50%);
|
|
|
z-index: -1;
|
|
|
}
|
|
|
+
|
|
|
.execution-log-container {
|
|
|
padding: px2rem(20px * 2) 0;
|
|
|
+
|
|
|
.log-item {
|
|
|
position: relative;
|
|
|
margin-bottom: px2rem(40px * 2);
|
|
|
min-height: px2rem(48px * 2);
|
|
|
+
|
|
|
.log-label {
|
|
|
font-size: px2rem(18px * 2);
|
|
|
font-weight: 400;
|
|
|
@@ -368,6 +425,7 @@
|
|
|
width: calc(50% - 42px);
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
+
|
|
|
& > span {
|
|
|
justify-content: right;
|
|
|
display: flex;
|
|
|
@@ -394,6 +452,7 @@
|
|
|
border-bottom-left-radius: px2rem(48px * 2);
|
|
|
padding-left: px2rem(58px * 2);
|
|
|
padding-right: px2rem(10px * 2);
|
|
|
+
|
|
|
.logo-icon {
|
|
|
position: absolute;
|
|
|
height: px2rem(44px * 2);
|
|
|
@@ -405,10 +464,12 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+
|
|
|
.el-icon {
|
|
|
font-size: px2rem(40px);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&::before,
|
|
|
&::after {
|
|
|
content: '';
|
|
|
@@ -417,24 +478,29 @@
|
|
|
border-left: px2rem(18px * 2) solid transparent;
|
|
|
border-right: px2rem(18px * 2) solid transparent;
|
|
|
}
|
|
|
+
|
|
|
&::before {
|
|
|
border-top: px2rem(24px * 2) solid #3db3ea;
|
|
|
}
|
|
|
+
|
|
|
&::after {
|
|
|
bottom: 0;
|
|
|
border-bottom: px2rem(24px * 2) solid #3db3ea;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&.log-item-3,
|
|
|
&.log-item-1 {
|
|
|
.log-label {
|
|
|
left: unset;
|
|
|
right: 0;
|
|
|
text-align: left;
|
|
|
- &>span{
|
|
|
+
|
|
|
+ & > span {
|
|
|
justify-content: left;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.log-time {
|
|
|
left: unset;
|
|
|
right: 50%;
|
|
|
@@ -449,43 +515,53 @@
|
|
|
padding-left: px2rem(10px * 2);
|
|
|
padding-right: px2rem(58px * 2);
|
|
|
background-color: #09b283;
|
|
|
+
|
|
|
.logo-icon {
|
|
|
top: px2rem(2px * 2);
|
|
|
left: unset;
|
|
|
right: px2rem(2px * 2);
|
|
|
border-radius: px2rem(44px * 2);
|
|
|
}
|
|
|
+
|
|
|
&::before,
|
|
|
&::after {
|
|
|
content: '';
|
|
|
right: unset;
|
|
|
left: px2rem(-18px * 2);
|
|
|
}
|
|
|
+
|
|
|
&::before {
|
|
|
border-top-color: #09b283;
|
|
|
}
|
|
|
+
|
|
|
&::after {
|
|
|
border-bottom-color: #09b283;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&.log-item-3 {
|
|
|
.log-time {
|
|
|
background-color: #eaa33f;
|
|
|
+
|
|
|
&::before {
|
|
|
border-top-color: #eaa33f;
|
|
|
}
|
|
|
+
|
|
|
&::after {
|
|
|
border-bottom-color: #eaa33f;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&.log-item-2 {
|
|
|
.log-time {
|
|
|
background-color: #c172f9;
|
|
|
+
|
|
|
&::before {
|
|
|
border-top-color: #c172f9;
|
|
|
}
|
|
|
+
|
|
|
&::after {
|
|
|
border-bottom-color: #c172f9;
|
|
|
}
|
|
|
@@ -494,10 +570,12 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&-bg-live-monitoring {
|
|
|
// top: px2rem(564px + 83px);
|
|
|
// right: px2rem(22px);
|
|
|
margin-top: px2rem(48px);
|
|
|
+
|
|
|
.el-button {
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
@@ -509,22 +587,27 @@
|
|
|
height: px2rem(80px);
|
|
|
width: px2rem(80px);
|
|
|
font-size: px2rem(34px);
|
|
|
+
|
|
|
&:hover {
|
|
|
background-color: var(--el-carousel-arrow-hover-background);
|
|
|
}
|
|
|
+
|
|
|
&:first-child {
|
|
|
left: 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.live-container {
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: hidden;
|
|
|
+
|
|
|
> div {
|
|
|
width: calc(px2rem(419px) + 10px);
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
transition: transform 0.5s;
|
|
|
}
|
|
|
+
|
|
|
.live-item {
|
|
|
width: px2rem(419px);
|
|
|
// height: px2rem(285px);
|
|
|
@@ -534,6 +617,7 @@
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex: 1;
|
|
|
+
|
|
|
img,
|
|
|
video {
|
|
|
max-width: 100%;
|
hi-cactus!
