3127 lines
51 KiB
SCSS
3127 lines
51 KiB
SCSS
@mixin side-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.margin-top-50 {
|
|
margin-top: 50px;
|
|
}
|
|
.margin-top-40 {
|
|
margin-top: 40px;
|
|
}
|
|
.content-block {
|
|
height: 170px;
|
|
}
|
|
width: 330px;
|
|
height: 100%;
|
|
}
|
|
|
|
//滚动条样式
|
|
@mixin scrollStyle($width) {
|
|
&::-webkit-scrollbar {
|
|
width: $width !important;
|
|
height: 100% !important;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
background: rgba(255, 255, 255, 0.68);
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
-webkit-border-radius: 2px;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.line-chart {
|
|
height: 100px;
|
|
}
|
|
|
|
.env-left {
|
|
@include side-container;
|
|
|
|
}
|
|
|
|
.env-right {
|
|
@include side-container;
|
|
|
|
.margin-top-20 {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.right-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 16px 0 10px 9px;
|
|
|
|
&-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
|
|
.value {
|
|
color: #7FB0FF;
|
|
font-family: 'logo';
|
|
}
|
|
|
|
.level {
|
|
color: #e8e8e8;
|
|
font-family: 'logo';
|
|
|
|
.point {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 4px;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.yellow {
|
|
background: #D0DE78;
|
|
}
|
|
|
|
.green {
|
|
background: #88E29F;
|
|
}
|
|
|
|
.blue {
|
|
background: #0646b5;
|
|
}
|
|
|
|
.orange {
|
|
background-color: #ff7000
|
|
}
|
|
|
|
.red {
|
|
background-color: #b90303
|
|
}
|
|
|
|
.zi {
|
|
background-color: #ad22be
|
|
}
|
|
}
|
|
|
|
.label {
|
|
color: #e8e8e8;
|
|
font-family: 'logo';
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
&-sub {
|
|
width: 104px;
|
|
background: url("~@/assets/img/middle_line.png") no-repeat 50% 50%;
|
|
background-position: bottom;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 9px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-middle {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.square-box {
|
|
width: 110px;
|
|
height: 70px;
|
|
background-size: cover;
|
|
padding: 13px 0 13px 0;
|
|
text-align: left;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
margin-right: 7px;
|
|
|
|
b {
|
|
font-size: 24px;
|
|
font-family: DINPro;
|
|
color: #ffffff;
|
|
}
|
|
|
|
img {
|
|
margin-right: 10px;
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.text-style {
|
|
font-size: 12px;
|
|
width: 73px;
|
|
}
|
|
|
|
.icon-style {
|
|
position: relative;
|
|
top: 4px;
|
|
}
|
|
|
|
&:nth-child(3n) {
|
|
width: 88px;
|
|
margin-left: 0;
|
|
|
|
.text-style {
|
|
font-size: 12px;
|
|
width: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cycle-box {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.right-cycle-box-con {
|
|
margin-bottom: 30px;
|
|
|
|
.right-cycle-box {
|
|
background: url("~@/assets/img/env/cycle-bg.png") 50% 50% no-repeat;
|
|
width: 65px;
|
|
height: 65px;
|
|
background-size: cover;
|
|
text-align: center;
|
|
margin-right: 67px;
|
|
margin-bottom: 14px;
|
|
|
|
.con-style-top {
|
|
height: 50%;
|
|
line-height: 2.4;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.con-style-bottom {
|
|
height: 50%;
|
|
line-height: 2;
|
|
color: #BBBBBB;
|
|
}
|
|
|
|
}
|
|
|
|
&:nth-child(3n) {
|
|
.right-cycle-box {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&:nth-child(n+4) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.word-ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 64px;
|
|
color: #BBBBBB;
|
|
font-size: 12px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.box-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 1px;
|
|
flex: 1.78;
|
|
}
|
|
|
|
|
|
.d-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.is-justify-start {
|
|
justify-content: start;
|
|
}
|
|
|
|
.is-justify-space-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.is-justify-space-around {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.equipment-content {
|
|
padding: 30px 0 0 40px;
|
|
}
|
|
|
|
.env-small-label {
|
|
font-family: "logo";
|
|
font-size: 14px;
|
|
}
|
|
|
|
.env-number-stlye {
|
|
font-family: number;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.radio-style {
|
|
width: 240px;
|
|
margin: 10px auto 0;
|
|
|
|
.el-radio-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.el-radio-button__orig-radio + .el-radio-button__inner {
|
|
width: 70px;
|
|
height: 24px;
|
|
border-radius: 12px 12px 12px 12px;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
border: 1px solid rgba(255, 255, 255, 0);
|
|
background: transparent;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
padding: 0;
|
|
line-height: 22px;
|
|
font-family: "logo";
|
|
|
|
&:focus {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
background: rgba(208, 208, 208, 0.4);
|
|
border: 1px solid #ffffff;
|
|
padding: 0;
|
|
}
|
|
|
|
&-two-btns {
|
|
width: 170px;
|
|
}
|
|
|
|
&-auto {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.tabs-style {
|
|
width: 100%;
|
|
margin: 10px auto 0;
|
|
|
|
.el-radio-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.el-radio-button__orig-radio + .el-radio-button__inner {
|
|
width: 78px;
|
|
height: 24px;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
background: transparent;
|
|
border-radius: 4px 4px 0px 0px;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
padding: 0;
|
|
line-height: 22px;
|
|
border: none;
|
|
box-shadow: none;
|
|
|
|
&:focus {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
background: linear-gradient(180deg, #E8E8E8 0%, rgba(232, 232, 232, 0) 100%);
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
}
|
|
|
|
}
|
|
|
|
@mixin imgStyle {
|
|
width: 28px;
|
|
height: 22px;
|
|
background-size: cover;
|
|
margin: 5px auto;
|
|
}
|
|
|
|
.formaldehydeExcessRate {
|
|
background: url("~@/assets/img/env/formaldehydeExcessRate.png") 50% 50% no-repeat;
|
|
@include imgStyle
|
|
}
|
|
|
|
.methanolExceedance {
|
|
background: url("~@/assets/img/env/methanolExceedance.png") 50% 50% no-repeat;
|
|
@include imgStyle
|
|
}
|
|
|
|
.NOExceedance {
|
|
background: url("~@/assets/img/env/NOExceedance.png") 50% 50% no-repeat;
|
|
@include imgStyle
|
|
}
|
|
|
|
|
|
.HCLExceedance {
|
|
background: url("~@/assets/img/env/HCLExceedance.png") 50% 50% no-repeat;
|
|
@include imgStyle
|
|
}
|
|
|
|
.BenzeneExceedance {
|
|
background: url("~@/assets/img/env/BenzeneExceedance.png") 50% 50% no-repeat;
|
|
@include imgStyle
|
|
}
|
|
|
|
.EthanolExceedance {
|
|
background: url("~@/assets/img/env/EthanolExceedance.png") 50% 50% no-repeat;
|
|
@include imgStyle
|
|
}
|
|
|
|
.env-left, .env-right {
|
|
.card-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-top: 40px;
|
|
@mixin commonItemStyle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
&-top {
|
|
padding-bottom: 7px;
|
|
font-family: 'logo';
|
|
width: 50px;
|
|
background: url("~@/assets/img/short_line.png") 50% 50% no-repeat;
|
|
background-position: bottom;
|
|
margin-bottom: 7px;
|
|
}
|
|
&-top-long {
|
|
padding-bottom: 7px;
|
|
font-family: 'logo';
|
|
width: 105px;
|
|
background: url("~@/assets/img/long_line.png") 50% 50% no-repeat;
|
|
background-position: bottom;
|
|
margin-bottom: 7px;
|
|
}
|
|
&-bottom {
|
|
font-family: 'logo';
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
@include commonItemStyle;
|
|
margin-right: 80px;
|
|
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/*
|
|
&-top{
|
|
padding-bottom: 7px;
|
|
font-family: 'logo';
|
|
width: 50px;
|
|
background: url("~@/assets/img/short_line.png") 50% 50% no-repeat;
|
|
background-position: bottom;
|
|
margin-bottom: 7px;
|
|
}
|
|
&-bottom{
|
|
font-family: 'logo';
|
|
}*/
|
|
|
|
}
|
|
|
|
&-item-2 {
|
|
@include commonItemStyle;
|
|
margin-right: 20px;
|
|
margin-bottom: 0;
|
|
|
|
&:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&-item-4 {
|
|
@include commonItemStyle;
|
|
margin-right: 40px;
|
|
|
|
&:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&-item-5 {
|
|
@include commonItemStyle;
|
|
margin-right: 20px;
|
|
|
|
&:nth-child(5n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.line-chart-air, .bar-chart-air {
|
|
height: 168px;
|
|
flex: 1;
|
|
}
|
|
|
|
.right-pie-chart {
|
|
height: 230px;
|
|
background: url('~@/assets/img/bar_chart_bg.png') 35% 50% no-repeat;
|
|
}
|
|
|
|
.right-pie-chart-water {
|
|
height: 230px;
|
|
background: url('~@/assets/img/bar_chart_bg.png') 35% 50% no-repeat;
|
|
}
|
|
|
|
.margin-top-23 {
|
|
margin-top: 23px;
|
|
}
|
|
.margin-top-47 {
|
|
margin-top: 47px;
|
|
}
|
|
|
|
.linear-gradient {
|
|
position: relative;
|
|
height: 16px;
|
|
flex: 1;
|
|
|
|
.line {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 10px;
|
|
top: 3px;
|
|
background: linear-gradient(90deg, rgba(157, 213, 172, 1) 0%, rgba(106, 205, 132, 1) 20%, rgba(197, 195, 122, 1) 20%, rgba(204, 217, 117, 1) 40%, rgba(202, 147, 85, 1) 40%, rgba(209, 93, 93, 1) 60%, rgba(208, 83, 145, 1) 60%, rgba(78, 13, 88, 1) 80%, rgba(75, 43, 43, 1) 80%, rgba(46, 6, 6, 1) 100%);
|
|
}
|
|
|
|
.shu {
|
|
width: 1px;
|
|
background: #FFFFFF;
|
|
height: 16px;
|
|
position: absolute;
|
|
left: 40%;
|
|
}
|
|
|
|
.background {
|
|
position: absolute;
|
|
height: 10px;
|
|
top: 3px;
|
|
background: #979797;
|
|
left: 40%;
|
|
width: 60%;
|
|
|
|
}
|
|
}
|
|
|
|
.air-bar-style {
|
|
display: flex;
|
|
}
|
|
|
|
.air-number-style {
|
|
font-family: 'DINPro';
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
width: 30px;
|
|
padding-left: 8px;
|
|
flex: 0;
|
|
}
|
|
|
|
.air-top5-content {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
|
|
p {
|
|
font-size: 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
}
|
|
|
|
.right-bar-chart {
|
|
height: 600px;
|
|
//flex: 1;
|
|
}
|
|
|
|
.hidden-bar-chart-top {
|
|
height: 400px;
|
|
|
|
}
|
|
|
|
.d-flex {
|
|
position: relative;
|
|
|
|
.chartPart {
|
|
flex: 1;
|
|
height: 200px;
|
|
position: relative;
|
|
|
|
.charts-style {
|
|
height: 240px;
|
|
}
|
|
}
|
|
|
|
.chart-bg-center {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
width: 90px;
|
|
height: 90px;
|
|
background-color: transparent;
|
|
left: 25.5%;
|
|
margin-top: 30.5%;
|
|
z-index: 10;
|
|
}
|
|
|
|
|
|
.cod {
|
|
background: #B8ECFF;
|
|
|
|
&-border {
|
|
border: 5px solid #B8ECFF;
|
|
}
|
|
}
|
|
|
|
.ph {
|
|
background: #07D1FF;
|
|
|
|
&-border {
|
|
border: 5px solid #07D1FF;
|
|
}
|
|
}
|
|
|
|
.rjy {
|
|
background: #3078EA;
|
|
|
|
&-border {
|
|
border: 5px solid #3078EA;
|
|
}
|
|
}
|
|
|
|
.gmsj {
|
|
background: #83D37B;
|
|
|
|
&-border {
|
|
border: 5px solid #83D37B;
|
|
}
|
|
}
|
|
|
|
.shxyl {
|
|
background: #E4E24F;
|
|
|
|
&-border {
|
|
border: 5px solid #E4E24F;
|
|
}
|
|
}
|
|
|
|
.ad {
|
|
background: #D3A83B;
|
|
|
|
&-border {
|
|
border: 5px solid #D3A83B;
|
|
}
|
|
}
|
|
|
|
.hff {
|
|
background: #FFC1C1;
|
|
|
|
&-border {
|
|
border: 5px solid #FFC1C1;
|
|
}
|
|
}
|
|
|
|
.hg {
|
|
background: #FF3D3D;
|
|
|
|
&-border {
|
|
border: 5px solid #FF3D3D;
|
|
}
|
|
}
|
|
|
|
.pb {
|
|
background: #E93AFF;
|
|
|
|
&-border {
|
|
border: 5px solid #E93AFF;
|
|
}
|
|
}
|
|
|
|
.oil {
|
|
background: #6800C4;
|
|
|
|
&-border {
|
|
border: 5px solid #6800C4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flex-1-1-0 {
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.flex-0 {
|
|
flex: 0;
|
|
}
|
|
|
|
.img-con {
|
|
position: relative;
|
|
padding: 8px;
|
|
margin-top: 30px;
|
|
@mixin angleMark {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: url("~@/assets/img/angleMark.png") no-repeat;
|
|
}
|
|
|
|
.left-top-m {
|
|
@include angleMark;
|
|
top: 0;
|
|
left: 0;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.left-bottom-m {
|
|
@include angleMark;
|
|
bottom: 4px;
|
|
left: 0;
|
|
}
|
|
|
|
.right-top-m {
|
|
@include angleMark;
|
|
right: 0;
|
|
top: 0;
|
|
transform: rotate(-180deg);
|
|
}
|
|
|
|
.right-bottom-m {
|
|
@include angleMark;
|
|
right: 0;
|
|
bottom: 4px;
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
|
|
.typePart {
|
|
width: 30%;
|
|
margin-top: 32px;
|
|
|
|
.el-radio-button__orig-radio + .el-radio-button__inner {
|
|
width: 124px;
|
|
height: 22px;
|
|
border-radius: 8px 8px 8px 8px;
|
|
opacity: 1;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
border: 0;
|
|
line-height: 3px;
|
|
background: transparent;
|
|
text-align: left;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
background: rgba(208, 208, 208, 0.4);
|
|
opacity: 1;
|
|
border: 1px solid #B8ECFF;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
line-height: 4px;
|
|
|
|
}
|
|
|
|
.check-box-color {
|
|
width: 12px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.check-box-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bar-chart-gas {
|
|
height: 412px;
|
|
}
|
|
|
|
.gas-left-bar-con {
|
|
height: 700px;
|
|
}
|
|
|
|
.margin-top-30 {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.margin-bottom-30 {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.height-auto {
|
|
height: auto;
|
|
}
|
|
|
|
.padding-top-20 {
|
|
padding-top: 20px !important;
|
|
}
|
|
|
|
.risk-box {
|
|
display: flex;
|
|
margin-top: 20px;
|
|
margin-bottom: 14px;
|
|
|
|
.risk-item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p:nth-child(2) {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.zdwxy {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: url("~@/assets/img/safety/zdwxy.png") no-repeat;
|
|
margin-right: 18px;
|
|
}
|
|
|
|
.fxx {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: url("~@/assets/img/safety/fxx.png") no-repeat;
|
|
margin-right: 18px;
|
|
}
|
|
|
|
.company-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: url("~@/assets/img/safety/company.png") no-repeat;
|
|
margin-right: 14px;
|
|
}
|
|
|
|
.sg-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: url("~@/assets/img/safety/shigong.png") no-repeat;
|
|
margin-right: 14px;
|
|
}
|
|
|
|
.font-size-16 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.font-size-14 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.risk-pie-chart {
|
|
width: 48%;
|
|
height: 146px;
|
|
flex: 1;
|
|
}
|
|
|
|
.spe-bar-chart-top {
|
|
height: 276px;
|
|
flex: 1;
|
|
}
|
|
|
|
.spe-bar-chart-bottom {
|
|
height: 300px;
|
|
flex: 1;
|
|
}
|
|
|
|
.risk-line-chart {
|
|
height: 168px;
|
|
flex: 1;
|
|
}
|
|
|
|
.risk-title {
|
|
display: flex;
|
|
background: rgba(128, 128, 128, 0.8);
|
|
margin-top: 20px;
|
|
|
|
&-item {
|
|
width: 50%;
|
|
flex: 1;
|
|
padding-left: 30px;
|
|
height: 34px;
|
|
font-size: 14px;
|
|
color: #E8E8E8;
|
|
line-height: 34px;
|
|
}
|
|
}
|
|
|
|
.risk-list {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
@include scrollStyle(2px);
|
|
|
|
&-box {
|
|
display: flex;
|
|
background: none;
|
|
opacity: 0;
|
|
|
|
&-item {
|
|
width: 50%;
|
|
padding-left: 30px;
|
|
flex: 1;
|
|
height: 34px;
|
|
font-size: 12px;
|
|
color: #E8E8E8;
|
|
line-height: 34px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:nth-child(2n) {
|
|
background: rgba(128, 128, 128, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.risk-pie-chart-all {
|
|
width: 100%;
|
|
height: 1px;
|
|
flex: 1;
|
|
}
|
|
|
|
.risk-line-chart-all {
|
|
height: 190px;
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.flex-15 {
|
|
flex: 1.5;
|
|
}
|
|
|
|
.cycle-icon {
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
background: #FFFFFF;
|
|
margin-right: 14px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.level-1 {
|
|
background: #7FB0FF;
|
|
}
|
|
|
|
.level-1-text {
|
|
color: #7FB0FF;
|
|
}
|
|
|
|
.level-2 {
|
|
background: #FADFA4;
|
|
}
|
|
|
|
.level-2-text {
|
|
color: #FADFA4;
|
|
}
|
|
|
|
.level-3 {
|
|
background: #C9FFD7;
|
|
}
|
|
|
|
.level-3-text {
|
|
color: #C9FFD7;
|
|
}
|
|
|
|
.level-4 {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.level-4-text {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.align-items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.risk-info {
|
|
font-size: 14px;
|
|
|
|
.content-style {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
|
|
span {
|
|
&:first-child {
|
|
width: 40%;
|
|
}
|
|
|
|
&:last-child {
|
|
width: 60%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.hazard-style {
|
|
cursor: pointer;
|
|
color: #7FB0FF;
|
|
}
|
|
|
|
.bg-gray {
|
|
width: 100%;
|
|
height: 186px;
|
|
padding: 30px 20px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
|
div:first-child {
|
|
margin-bottom: 23px;
|
|
}
|
|
|
|
.inside-con {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
ul {
|
|
flex: 1;
|
|
|
|
li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
|
|
span:first-child {
|
|
width: 40%;
|
|
}
|
|
|
|
span:last-child {
|
|
width: 70%;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
&.hidden {
|
|
.content-style {
|
|
span {
|
|
&:first-child {
|
|
width: 30%;
|
|
}
|
|
|
|
&:last-child {
|
|
width: 70%;
|
|
}
|
|
|
|
}
|
|
|
|
&.col-3 {
|
|
.cycle-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.red {
|
|
color: #DD7171;
|
|
}
|
|
|
|
.red-bg {
|
|
background: #DD7171;
|
|
}
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:first-child {
|
|
width: 30%;
|
|
}
|
|
|
|
&:last-child {
|
|
width: 30%;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
width: 40%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.link-style {
|
|
color: #7FB0FF;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.specification-card {
|
|
padding: 0 16px;
|
|
margin-top: 16px;
|
|
height: 710px;
|
|
@include scrollStyle(2px);
|
|
overflow-y: auto;
|
|
|
|
.mgb10 {
|
|
margin-bottom: 10px;
|
|
color: #FFF;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
align-self: flex-start;
|
|
width: 70px;
|
|
flex: none
|
|
}
|
|
|
|
.el-button--small {
|
|
padding: 0;
|
|
color: #58BFFF;
|
|
}
|
|
}
|
|
|
|
.inner-title {
|
|
position: relative;
|
|
font-size: 14px;
|
|
color: #FFF9E9;
|
|
padding-left: 4px;
|
|
margin: 20px 0 10px;
|
|
/* &::before{
|
|
content: "";
|
|
display: block;
|
|
width: 6px;
|
|
height: 8px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: #FFC001;
|
|
border-radius: 3px;
|
|
}*/
|
|
}
|
|
|
|
.label-group {
|
|
width: 100%;
|
|
border: 1px solid #E8E8E8;
|
|
color: #FFF9E9;
|
|
font-size: 12px;
|
|
display: flex;
|
|
|
|
&.half {
|
|
width: 50%;
|
|
}
|
|
|
|
&.third {
|
|
width: 33.3%;
|
|
}
|
|
|
|
.label {
|
|
min-width: 130px;
|
|
padding: 0 20px;
|
|
border-right: 1px solid #E8E8E8;
|
|
background: rgba(128, 128, 128, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.content-block {
|
|
width: 1px;
|
|
flex: 1;
|
|
//line-height: 100%;
|
|
padding: 10px 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.safe {
|
|
@mixin font-style {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
cursor: default;
|
|
}
|
|
|
|
.el-step__head.is-finish {
|
|
border-color: #7FB0FF;
|
|
}
|
|
|
|
.el-step__title.is-finish {
|
|
color: #7FB0FF;
|
|
@include font-style;
|
|
}
|
|
|
|
.is-finish {
|
|
.el-step__icon.is-text {
|
|
background: #7FB0FF;
|
|
}
|
|
|
|
.el-step__icon-inner {
|
|
font-weight: bold;
|
|
color: rgb(34 34 34);
|
|
line-height: 14px;
|
|
background-clip: text;
|
|
text-fill-color: rgba(153, 153, 153, 0.55);
|
|
}
|
|
}
|
|
|
|
.el-step__head.is-process {
|
|
border-color: #E8E8E8;
|
|
}
|
|
|
|
.el-step__title.is-process {
|
|
color: #E8E8E8;
|
|
@include font-style;
|
|
}
|
|
|
|
.is-process {
|
|
.el-step__icon.is-text {
|
|
background: #E8E8E8;
|
|
}
|
|
|
|
.el-step__icon-inner {
|
|
font-weight: bold;
|
|
color: rgb(34 34 34);
|
|
line-height: 14px;
|
|
background-clip: text;
|
|
text-fill-color: rgba(153, 153, 153, 0.55);
|
|
}
|
|
}
|
|
|
|
.el-step__head.is-wait {
|
|
border-color: #999999;
|
|
}
|
|
|
|
.el-step__title.is-wait {
|
|
color: #999999;
|
|
@include font-style;
|
|
}
|
|
|
|
.is-wait {
|
|
.el-step__icon.is-text {
|
|
background: transparent;
|
|
}
|
|
|
|
.el-step__icon-inner {
|
|
font-weight: bold;
|
|
color: rgba(153, 153, 153, 1);
|
|
line-height: 14px;
|
|
background-clip: text;
|
|
text-fill-color: rgba(153, 153, 153, 0.55);
|
|
}
|
|
}
|
|
|
|
.el-step.is-center .el-step__line {
|
|
left: 68%;
|
|
right: -33%;
|
|
top: 14px;
|
|
}
|
|
|
|
.el-step__icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
.el-collapse {
|
|
border: none;
|
|
|
|
.el-collapse-item__header, .el-collapse-item__wrap {
|
|
background: transparent;
|
|
color: #A5A6A8;
|
|
font-size: 16px;
|
|
|
|
.el-collapse-item__content {
|
|
color: #A5A6A8;
|
|
}
|
|
}
|
|
|
|
.el-collapse-item__header {
|
|
border-bottom: 1px solid #A5A6A8;
|
|
}
|
|
|
|
.el-collapse-item__wrap {
|
|
border: none;
|
|
}
|
|
|
|
.el-collapse-item__arrow {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.el-icon-arrow-right:before {
|
|
content: "\e790";
|
|
}
|
|
|
|
.el-collapse-item__arrow.is-active {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.avatar-style {
|
|
//width: 88px;
|
|
height: 132px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.item-content {
|
|
padding-top: 20px;
|
|
color: #FFFFFF;
|
|
align-items: center;
|
|
|
|
.collapse-top {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
|
|
&:first-child {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.collapse-bottom {
|
|
margin-top: 40px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
width: 50%;
|
|
margin-bottom: 20px;
|
|
|
|
&:nth-child(n+3) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
color: #FFFFFF;
|
|
margin-top: 20px;
|
|
|
|
span {
|
|
width: 33%;
|
|
margin-bottom: 20px;
|
|
|
|
&:nth-child(n+4) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-content {
|
|
margin-top: 20px;
|
|
|
|
h3 {
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
img.code {
|
|
width: 88px;
|
|
height: 88px;
|
|
border: 3px solid #ffffff;
|
|
border-radius: 5px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
&-item {
|
|
border-bottom: 1px solid #D8D8D8;
|
|
margin-bottom: 20px;
|
|
|
|
span {
|
|
width: 50%;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.margin-bottom-10 {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.card-info {
|
|
position: relative;
|
|
|
|
&-book {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 0;
|
|
color: #7DAEFF;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
}
|
|
|
|
.el-collapse-item__header {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.el-collapse .el-collapse-item__header {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.goods-info {
|
|
border: 1px solid rgba(212, 229, 255, 0.3);
|
|
margin-top: 6px;
|
|
padding: 20px;
|
|
|
|
span {
|
|
width: 50%;
|
|
margin-bottom: 20px;
|
|
|
|
&:nth-child(2n), &:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.margin-left-40 {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
.tabs-energy {
|
|
display: flex;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
|
|
&-item {
|
|
cursor: pointer;
|
|
|
|
&-text {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.under-line {
|
|
width: 40%;
|
|
height: 1px;
|
|
border: 1px solid transparent;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.active {
|
|
border: 1px solid #FFFFFF;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.subTitle {
|
|
width: 330px;
|
|
height: 50px;
|
|
background: url("~@/assets/img/subTitle.png") no-repeat bottom;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
.two-item-line {
|
|
width: 50%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
padding: 23px 26px 10px 26px;
|
|
|
|
.num-style {
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #D8D8D8;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.text-style {
|
|
margin-top: 8px;
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|
|
|
|
.sub-title-legend {
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
padding-bottom: 0;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.energyRightTitle {
|
|
width: 332px;
|
|
height: 42px;
|
|
background: url("~@/assets/img/energy/energyTitle.png") no-repeat 50% 50%;
|
|
line-height: 42px;
|
|
font-size: 14px;
|
|
padding: 0 12px;
|
|
|
|
}
|
|
|
|
.center-box {
|
|
position: absolute;
|
|
left: -300%;
|
|
display: flex;
|
|
top: 0;
|
|
|
|
&-card-bg {
|
|
width: 264px;
|
|
height: 148px;
|
|
background: url("~@/assets/img/energy/energyCardBg.png") no-repeat 50% 50%;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
&-card-title {
|
|
font-size: 14px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.73);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
& > img {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
&-card-bottom {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.73);
|
|
margin-top: 12px;
|
|
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.center-box-park {
|
|
position: absolute;
|
|
left: -290%;
|
|
display: flex;
|
|
|
|
&-card-title {
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
&-card-bg-park {
|
|
width: 241px;
|
|
height: 120px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 4px 4px 4px 4px;
|
|
padding: 20px 30px;
|
|
margin-right: 20px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&-card-bottom {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.73);
|
|
margin-top: 12px;
|
|
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 13px;
|
|
}
|
|
|
|
.num-style {
|
|
font-family: DINPro;
|
|
font-size: 20px;
|
|
color: #FFFFFF;
|
|
text-shadow: 1px 1px 2px #C2EDFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.four-items {
|
|
left: -332%;
|
|
}
|
|
|
|
.company-list {
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
@include scrollStyle(2px);
|
|
|
|
}
|
|
|
|
.company-list-box {
|
|
border-left: 4px solid #ffffff;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
width: 330px;
|
|
height: 72px;
|
|
padding: 12px 32px;
|
|
margin-top: 5px;
|
|
font-size: 14px;
|
|
|
|
.top {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.steam-right-chart {
|
|
height: 300px;
|
|
}
|
|
|
|
.group-title {
|
|
margin-bottom: 12px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.group-title-plan {
|
|
margin-bottom: 2px;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
|
|
.personList {
|
|
font-size: 14px;
|
|
|
|
& > div {
|
|
display: flex;
|
|
|
|
.has-border {
|
|
border: 1px solid #cccccc;
|
|
margin-right: -1px;
|
|
margin-bottom: -1px;
|
|
}
|
|
}
|
|
|
|
.head-style {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
width: 106px;
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
&-content {
|
|
padding: 5px 20px;
|
|
width: 79%;
|
|
}
|
|
}
|
|
|
|
.env-right .right-top-item .value.white-color {
|
|
color: #FFFFFF;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.env-right .right-top-item .level .point.red.large {
|
|
background: #FF5959;
|
|
width: 8px;
|
|
height: 8px;
|
|
top: -14px;
|
|
}
|
|
|
|
.line-chart-emergency {
|
|
height: 100%;
|
|
}
|
|
|
|
.last-time {
|
|
font-size: 14px;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.blue-button {
|
|
width: 328px;
|
|
height: 34px;
|
|
background: #7FB0FF;
|
|
border-radius: 18px;
|
|
color: #000000;
|
|
text-align: center;
|
|
line-height: 34px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.emergency-part {
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 1px;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.text {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: rgba($color: $font-color, $alpha: 0.9);
|
|
line-height: 22px;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.count {
|
|
font-size: 32px;
|
|
color: $font-color;
|
|
line-height: 45px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pop-box {
|
|
width: 450px;
|
|
border-radius: 4px 4px 4px 4px;
|
|
opacity: 1;
|
|
border: 1px solid #FFFFFF;
|
|
background: rgba($color: #000000, $alpha: 0.6);
|
|
color: #E8E8E8;
|
|
padding: 30px;
|
|
font-size: 14px;
|
|
position: absolute;
|
|
|
|
top: 40%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.border {
|
|
width: 8px;
|
|
height: 8px;
|
|
position: absolute;
|
|
border-left: 1px solid #FFF;
|
|
border-top: 1px solid #FFF;
|
|
|
|
&.l-t {
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
&.r-t {
|
|
top: 10px;
|
|
right: 10px;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
&.r-b {
|
|
bottom: 10px;
|
|
right: 10px;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
&.l-b {
|
|
bottom: 10px;
|
|
left: 10px;
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
border-bottom: 1px solid #B1B1B1;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: 20px;
|
|
top: 20px;
|
|
color: #FFF;
|
|
font-size: 26px;
|
|
}
|
|
|
|
.item-radius-style {
|
|
.el-input__inner {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
color: #d7d7d7;
|
|
}
|
|
|
|
.el-textarea__inner {
|
|
color: #d7d7d7;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 5px;
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
}
|
|
|
|
.item-radius-style.el-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-form-item__label {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-group {
|
|
justify-content: space-evenly;
|
|
|
|
.btn-style {
|
|
width: 96px;
|
|
height: 34px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 17px;
|
|
border: 1px solid #FFFFFF;
|
|
text-align: center;
|
|
line-height: 34px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cancel {
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
|
|
@mixin commonTableStyle {
|
|
span {
|
|
padding: 10px;
|
|
|
|
&:first-child, &:nth-child(3), &:nth-child(4), &:nth-child(5) {
|
|
width: 160px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
width: 320px;
|
|
}
|
|
|
|
&:last-child {
|
|
width: 240px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.head {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
@include commonTableStyle;
|
|
background: rgba(216, 216, 216, 0.3);
|
|
|
|
span {
|
|
border: 1px solid #7B7974;
|
|
margin-left: -1px;
|
|
}
|
|
}
|
|
|
|
.tbody {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
@include scrollStyle(2px);
|
|
|
|
.tr {
|
|
cursor: pointer;
|
|
display: flex;
|
|
@include commonTableStyle;
|
|
|
|
&:nth-child(2n) {
|
|
background: rgba(216, 216, 216, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-pagination {
|
|
text-align: right;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
|
|
background-color: transparent;
|
|
border: 1px solid #ffffff;
|
|
color: #FFFFFF;
|
|
|
|
&:hover {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
background-color: rgba(216, 216, 216, 0.3);
|
|
}
|
|
}
|
|
|
|
.left-position {
|
|
left: 270%;
|
|
}
|
|
|
|
.right-position {
|
|
width: 306px;
|
|
left: -170%;
|
|
}
|
|
|
|
.right-log-position {
|
|
width: 1200px;
|
|
left: -170%;
|
|
}
|
|
}
|
|
|
|
.plan-card {
|
|
width: 330px;
|
|
height: 290px;
|
|
position: relative;
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
|
|
border-radius: 6px;
|
|
padding: 28px 20px;
|
|
|
|
.border {
|
|
width: 8px;
|
|
height: 8px;
|
|
position: absolute;
|
|
border-left: 1px solid #FFF;
|
|
border-top: 1px solid #FFF;
|
|
|
|
&.l-t {
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
&.r-t {
|
|
top: 10px;
|
|
right: 10px;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
&.r-b {
|
|
bottom: 10px;
|
|
right: 10px;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
&.l-b {
|
|
bottom: 10px;
|
|
left: 10px;
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
|
|
ul.plan li {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.position-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url("~@/assets/icons/png/point.png");
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.plan-btn {
|
|
width: 64px;
|
|
height: 24px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 16px;
|
|
border: 1px solid #FFFFFF;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.phone-btn {
|
|
width: 90px;
|
|
height: 24px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 16px;
|
|
border: 1px solid #FFFFFF;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.el-timeline-item {
|
|
.el-timeline-item__content {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
&:nth-child(n+2) {
|
|
.el-timeline-item__content {
|
|
color: #7B7974;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.plan-head {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
font-size: 14px;
|
|
|
|
span.span-item {
|
|
padding: 10px;
|
|
|
|
&:first-child {
|
|
width: 100px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
width: 130px;
|
|
}
|
|
}
|
|
|
|
span.span-item-2 {
|
|
padding: 10px;
|
|
|
|
&:first-child {
|
|
width: 130px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
span.span-item-3 {
|
|
padding: 10px;
|
|
width: 80px;
|
|
|
|
&:first-child {
|
|
width: 150px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
}
|
|
span.span-item-half {
|
|
padding: 10px;
|
|
width: 50%;
|
|
}
|
|
|
|
background: rgba(216, 216, 216, 0.3);
|
|
}
|
|
|
|
.plan-head-tbody {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
font-size: 14px;
|
|
@include scrollStyle(2px);
|
|
|
|
.tr {
|
|
display: flex;
|
|
cursor: pointer;
|
|
|
|
span.span-item {
|
|
padding: 10px;
|
|
|
|
&:first-child {
|
|
width: 100px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
width: 150px;
|
|
}
|
|
}
|
|
|
|
span.span-item-2 {
|
|
padding: 10px;
|
|
|
|
&:first-child {
|
|
width: 130px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
span.span-item-3 {
|
|
padding: 10px;
|
|
width: 80px;
|
|
|
|
&:first-child {
|
|
width: 150px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
|
|
}
|
|
span.span-item-half {
|
|
padding: 10px;
|
|
width: 50%;
|
|
}
|
|
&:nth-child(2n) {
|
|
background: rgba(216, 216, 216, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.green-check {
|
|
.el-checkbox__label {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.el-checkbox__inner {
|
|
border-radius: 50%;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
|
background-color: #80ED30;
|
|
border-color: #80ED30;
|
|
}
|
|
|
|
.el-checkbox__input.is-checked + .el-checkbox__label {
|
|
color: #80ED30;
|
|
}
|
|
|
|
.el-checkbox__inner::after {
|
|
border-color: #000000;
|
|
}
|
|
|
|
.el-checkbox__input.is-checked .el-checkbox__inner::after {
|
|
//border: 1px solid #000;
|
|
}
|
|
}
|
|
|
|
.plan-center {
|
|
position: absolute;
|
|
left: 150%;
|
|
|
|
.progress-center {
|
|
width: 840px;
|
|
height: 60px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.5);
|
|
border-radius: 41px;
|
|
border: 2px solid #FFAA59;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
|
|
.middle {
|
|
width: 420px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.center-btn {
|
|
width: 92px;
|
|
height: 32px;
|
|
background: rgba(255, 169, 0, 0.15);
|
|
border-radius: 16px;
|
|
border: 1px solid #FFA900;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 32px;
|
|
color: #FFA900;
|
|
cursor: pointer;
|
|
justify-content: center;
|
|
|
|
i.el-icon-switch-button {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.orange {
|
|
background-color: #FFA900;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.center-btn.white-color {
|
|
background-color: #FFA900;
|
|
}
|
|
|
|
.cycle-box {
|
|
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
border-radius: 50%;
|
|
width: 18px;
|
|
height: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.line {
|
|
width: 80px;
|
|
height: 1px;
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.active {
|
|
border-color: #FFA900;
|
|
color: #FFA900;
|
|
|
|
&.bg-orange {
|
|
background: #FFA900;
|
|
|
|
i.el-icon-check {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.white-color {
|
|
i.el-icon-switch-button, span {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.progress-title {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
|
|
span {
|
|
margin-top: 5px;
|
|
|
|
&:nth-child(2) {
|
|
margin-left: 130px;
|
|
margin-right: 130px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
svg.loading-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.person-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: url("~@/assets/img/env/count.png") no-repeat;
|
|
margin-right: 14px;
|
|
}
|
|
|
|
.radio-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
span {
|
|
cursor: pointer;
|
|
width: 96px;
|
|
height: 24px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
line-height: 22px;
|
|
}
|
|
|
|
span.active {
|
|
border-color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.group-title-plan-search {
|
|
margin-bottom: 2px;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
& > span {
|
|
width: 150px;
|
|
}
|
|
|
|
.item-radius-style {
|
|
.el-input__inner {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
color: #d7d7d7;
|
|
}
|
|
|
|
.el-textarea__inner {
|
|
color: #d7d7d7;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 5px;
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.el-icon-search {
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.short-report {
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
text-shadow: 0 0 2px #9EC3FF;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.short-report-line {
|
|
width: 186px;
|
|
height: 3px;
|
|
margin: 2px auto;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
}
|
|
|
|
.short-card {
|
|
position: relative;
|
|
|
|
.border {
|
|
width: 8px;
|
|
height: 8px;
|
|
position: absolute;
|
|
border-left: 1px solid #FFF;
|
|
border-top: 1px solid #FFF;
|
|
|
|
&.l-t {
|
|
top: -4px;
|
|
left: -4px;
|
|
}
|
|
|
|
&.r-t {
|
|
top: -4px;
|
|
right: -4px;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
&.r-b {
|
|
bottom: -4px;
|
|
right: -4px;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
&.l-b {
|
|
bottom: -4px;
|
|
left: -4px;
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
|
|
&-bg {
|
|
height: 36px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 0 15px;
|
|
|
|
.orange {
|
|
background: #FFA900;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.text {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.count {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.margin-top-0 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.margin-bottom-20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.task-list {
|
|
height: 400px;
|
|
overflow-y: auto;
|
|
@include scrollStyle(2px);
|
|
|
|
.task-item {
|
|
width: 330px;
|
|
height: 92px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 6px;
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
|
|
&-top {
|
|
align-items: start;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-left {
|
|
text-align: right;
|
|
}
|
|
|
|
.margin-top-16 {
|
|
margin-top: 16px;
|
|
}
|
|
.margin-top-10 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.link {
|
|
position: relative;
|
|
display: block;
|
|
padding: 1px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
color: #7DAEFF;
|
|
}
|
|
|
|
.link:after,
|
|
.link:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
-webkit-transition: all 0.5s ease-in-out;
|
|
transition: all 0.5s ease-in-out;
|
|
left: 20px;
|
|
}
|
|
|
|
.link:before {
|
|
top: -7px;
|
|
width: 0;
|
|
height: 0;
|
|
left: 56px;
|
|
border-width: 8px;
|
|
border-style: solid;
|
|
border-color: transparent transparent transparent #7DAEFF;
|
|
}
|
|
|
|
.link:after {
|
|
top: 50%;
|
|
right: 1em;
|
|
width: 40px;
|
|
height: 0.2em;
|
|
-webkit-transform: translate(0, -0.1em);
|
|
transform: translate(0, -0.1em);
|
|
background-color: #7DAEFF;
|
|
}
|
|
|
|
.goods-part {
|
|
.search-style {
|
|
.el-input__inner {
|
|
border-radius: 20px;
|
|
background: transparent;
|
|
color: #FFFFFF;
|
|
|
|
&:focus {
|
|
border-color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods-item {
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 4px;
|
|
border: 1px solid #666666;
|
|
margin-right: 4px;
|
|
margin-bottom: 4px;
|
|
|
|
&-inside {
|
|
width: 42px;
|
|
height: 42px;
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
|
|
.bg {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
width: 88%;
|
|
height: 4px;
|
|
padding: 1px;
|
|
margin: 0 5px;
|
|
border-radius: 4px;
|
|
background-color: #131313;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bg-line {
|
|
background-color: #131313;
|
|
}
|
|
|
|
.inner {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: all 0.5s cubic-bezier(0, 0.64, 0.36, 1);
|
|
}
|
|
|
|
.line {
|
|
width: 80%;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.red {
|
|
background-color: rgba(255, 89, 89, 0.3) !important;
|
|
border-color: rgba(255, 89, 89, 0.3);
|
|
}
|
|
|
|
.red-line {
|
|
background-color: rgba(255, 89, 89, 0.7) !important;
|
|
}
|
|
|
|
.red-border {
|
|
border-color: rgba(255, 89, 89, 0.3);
|
|
}
|
|
|
|
.orange {
|
|
background-color: rgba(255, 158, 55, 0.3);
|
|
border-color: rgba(255, 158, 55, 0.3);
|
|
}
|
|
|
|
.orange-line {
|
|
background-color: rgba(255, 158, 55, 0.7) !important;
|
|
}
|
|
|
|
.orange-border {
|
|
border-color: rgba(255, 158, 55, 0.3);
|
|
}
|
|
|
|
.yellow {
|
|
background-color: rgba(255, 237, 98, 0.3);
|
|
border-color: rgba(255, 237, 98, 0.3);
|
|
}
|
|
|
|
.yellow-line {
|
|
background-color: rgba(255, 237, 98, 0.7) !important;
|
|
}
|
|
|
|
.yellow-border {
|
|
border-color: rgba(255, 237, 98, 0.3);
|
|
}
|
|
|
|
.blue {
|
|
background-color: rgba(125, 174, 255, 0.3);
|
|
border-color: rgba(125, 174, 255, 0.3);
|
|
}
|
|
|
|
.blue-line {
|
|
background-color: rgba(125, 174, 255, 0.7) !important;
|
|
}
|
|
|
|
.blue-border {
|
|
border-color: rgba(125, 174, 255, 0.3);
|
|
}
|
|
|
|
}
|
|
|
|
.line-gray {
|
|
width: 40px;
|
|
height: 1px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
right: -62px;
|
|
}
|
|
|
|
.line-blue {
|
|
width: 80px;
|
|
height: 1px;
|
|
border: 1px solid #7DAEFF;
|
|
position: relative;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.round-style {
|
|
width: 12px;
|
|
height: 12px;
|
|
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
border-radius: 50%;
|
|
margin-left: 72px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.is-judgment {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.is-justify-space-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.red-bag {
|
|
width: 40px;
|
|
height: 18px;
|
|
background: #FF5959;
|
|
border-radius: 9px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 18px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tooltip {
|
|
.left-icon {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.content {
|
|
width: 128px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
.el-tooltip__popper.is-dark{
|
|
background: rgba(0, 0, 0, 0.8);
|
|
box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.8);
|
|
border-radius: 4px;
|
|
border: 1px solid #666666;
|
|
}
|
|
.tooltip-line {
|
|
&.bg {
|
|
width: 100%;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
&.bg-line {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
|
|
.inner {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: all 0.5s cubic-bezier(0, 0.64, 0.36, 1);
|
|
}
|
|
|
|
.line {
|
|
width: 80%;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.red-line {
|
|
background-color: rgba(255, 89, 89, 0.7) !important;
|
|
}
|
|
|
|
.orange-line {
|
|
background-color: rgba(255, 158, 55, 0.7) !important;
|
|
}
|
|
|
|
.yellow-line {
|
|
background-color: rgba(255, 237, 98, 0.7) !important;
|
|
}
|
|
|
|
.blue-line {
|
|
background-color: rgba(125, 174, 255, 0.7) !important;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.text-right{
|
|
text-align: right;
|
|
}
|
|
.padding-right{
|
|
&-30{
|
|
padding-right: 30px !important;
|
|
}
|
|
}
|
|
.is-justify-content-end{
|
|
justify-content: flex-end;
|
|
}
|
|
.goods-part{
|
|
.cycle-icon{
|
|
background: rgba(255,255,255,0.7);
|
|
&.red {
|
|
background-color: rgba(255, 89, 89, 1);
|
|
}
|
|
&.orange {
|
|
background-color: rgba(255, 158, 55, 1);
|
|
}
|
|
&.yellow {
|
|
background-color: rgba(255, 237, 98, 1);
|
|
}
|
|
&.blue {
|
|
background-color: rgba(125, 174, 255, 1);
|
|
}
|
|
}
|
|
}
|
|
.statistics-item{
|
|
width: 48.5%;
|
|
height: 40px;
|
|
background: rgba(255,255,255,0.1);
|
|
margin-bottom: 12px;
|
|
font-size: 14px;
|
|
}
|
|
.emergency-part .pop-box.left-list-position{
|
|
width: 960px;
|
|
left: 280%;
|
|
z-index: 9999999;
|
|
& .head span:first-child,
|
|
& .head span:nth-child(4),
|
|
& .head span:nth-child(5){
|
|
width: 250px;
|
|
}
|
|
& .tbody .tr span:first-child,
|
|
& .tbody .tr span:nth-child(4),
|
|
& .tbody .tr span:nth-child(5){
|
|
width: 250px;
|
|
}
|
|
& .head span:nth-child(2),& .tbody .tr span:nth-child(2),
|
|
& .head span:nth-child(3),
|
|
& .tbody .tr span:nth-child(3){
|
|
width: 150px;
|
|
}
|
|
.cycle-icon{
|
|
background: rgba(255,255,255,0.7);
|
|
&.red {
|
|
background-color: rgba(255, 89, 89, 1);
|
|
}
|
|
&.orange {
|
|
background-color: rgba(255, 158, 55, 1);
|
|
}
|
|
&.yellow {
|
|
background-color: rgba(255, 237, 98, 1);
|
|
}
|
|
&.blue {
|
|
background-color: rgba(125, 174, 255, 1);
|
|
}
|
|
}
|
|
.pop-list-style{
|
|
align-items: center;
|
|
}
|
|
.search-style {
|
|
width: 300px;
|
|
.el-input__inner {
|
|
border-radius: 20px;
|
|
background: transparent;
|
|
color: #FFFFFF;
|
|
|
|
&:focus {
|
|
border-color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
.blue{
|
|
color: #7DAEFF;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.grayColor{
|
|
color: #B2B2B2;
|
|
}
|
|
.device-box{
|
|
img{
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
.tree-box{
|
|
width: 330px;
|
|
height: 300px;
|
|
padding: 14px;
|
|
background: rgba(0,0,0,0.5);
|
|
box-shadow: 0 10px 20px -10px #000000;
|
|
border-radius: 6px;
|
|
border: 1px solid;
|
|
border-image: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0)) 1 1;
|
|
}
|
|
|
|
.tree-line{
|
|
&.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
|
|
background: rgba(125, 174, 255, 0.7);
|
|
}
|
|
&::before{
|
|
content: "";
|
|
height: 79%;
|
|
width: 1px;
|
|
position: absolute;
|
|
left: 23px;
|
|
top: 14px;
|
|
border-width: 1px;
|
|
border-left: 1px solid #ffffff;
|
|
}
|
|
& > div[role="treeitem"] {
|
|
padding-bottom: 10px;
|
|
}
|
|
.white{
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
}
|
|
.custom-tree-node{
|
|
position: relative;
|
|
left: 8px;
|
|
width: 100%;
|
|
.doc-style{
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background-color: #FFFFFF;
|
|
position: absolute;
|
|
left: -11px;
|
|
}
|
|
}
|
|
.right-icon{
|
|
transition: all .3s linear;
|
|
position: relative;
|
|
left: -10px;
|
|
}
|
|
.sub-item{
|
|
padding-left: 16px;
|
|
&::before{
|
|
content: '';
|
|
width: 12px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left: -3px;
|
|
top: 9px;
|
|
border-width: 1px;
|
|
//border-top: 1px solid #ffffff;
|
|
}
|
|
&::after{
|
|
content: "";
|
|
height: 130%;
|
|
width: 1px;
|
|
position: absolute;
|
|
left: -1px;
|
|
top: 0px;
|
|
border: none;
|
|
}
|
|
}
|
|
.is-expanded{
|
|
.sub-item{
|
|
padding-left: 8px;
|
|
&::before{
|
|
content: '';
|
|
width: 3px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left: -3px;
|
|
top: 9px;
|
|
border-width: 1px;
|
|
//border-top: 1px solid #ffffff;
|
|
}
|
|
&::after{
|
|
content: "";
|
|
height: 100%;
|
|
width: 1px;
|
|
position: absolute;
|
|
left: -1px;
|
|
top: 10px;
|
|
border-width: 1px;
|
|
border-left: 1px solid #ffffff;
|
|
}
|
|
}
|
|
.sub-item-border-none{
|
|
&::after{
|
|
content: "";
|
|
height: 130%;
|
|
width: 1px;
|
|
position: absolute;
|
|
left: -1px;
|
|
top: 0px;
|
|
border: none;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
div[role="treeitem"].is-expanded > div.el-tree-node__content > div > span:nth-child(2),
|
|
div[role="group"] div[role="treeitem"].is-expanded,
|
|
{
|
|
.right-icon{
|
|
transform: rotate(90deg);
|
|
transition: all .3s linear;
|
|
}
|
|
}
|
|
|
|
&.el-tree,.el-tree-node__content, .el-upload-list__item{
|
|
background: transparent;
|
|
&:hover,&:focus,&:active,&:visited{
|
|
background: transparent;
|
|
|
|
}
|
|
}
|
|
.el-tree-node:focus>.el-tree-node__content{
|
|
background: transparent;
|
|
}
|
|
|
|
.tree-level-1-icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #FFFFFF;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
left: -12px;
|
|
}
|
|
|
|
|
|
margin-top:10px;
|
|
.el-tree-node {
|
|
position: relative;
|
|
color: black;
|
|
padding: 0;
|
|
padding-left: 10px; // 缩进量
|
|
}
|
|
.el-tree-node__children {
|
|
padding-left: 16px; // 缩进量
|
|
}
|
|
|
|
// 竖线
|
|
.el-tree-node::before {
|
|
content: "";
|
|
height: 100%;
|
|
width: 1px;
|
|
position: absolute;
|
|
left: -3px;
|
|
top: -13px;
|
|
border-width: 1px;
|
|
border-left: 1px solid #ffffff;
|
|
}
|
|
// 当前层最后一个节点的竖线高度固定
|
|
.el-tree-node:last-child::before {
|
|
height: 34px; // 可以自己调节到合适数值
|
|
}
|
|
|
|
// 横线
|
|
.el-tree-node::after {
|
|
content: "";
|
|
width: 27px;
|
|
//width: 16px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left: -3px;
|
|
top: 20px;
|
|
border-width: 1px;
|
|
border-top: 1px solid #ffffff;
|
|
content: "";
|
|
|
|
}
|
|
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
|
& > .el-tree-node::after {
|
|
border-top: none;
|
|
}
|
|
& > .el-tree-node::before {
|
|
border-left: none;
|
|
}
|
|
|
|
.el-tree-node__content{
|
|
padding-left:0 !important;
|
|
color:#444;
|
|
height: 40px;
|
|
// 树缩进样式
|
|
.el-icon-caret-right::before{
|
|
content: "";
|
|
width:14px;
|
|
height:14px;
|
|
background-size: 100% 100%;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
}
|
|
.el-tree-node__expand-icon.expanded{
|
|
transform: rotate(0);
|
|
}
|
|
// 树展开样式
|
|
.el-tree-node__expand-icon.expanded::before{
|
|
content: "";
|
|
width:0;
|
|
height:0;
|
|
background-size: 100% 100%;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
}
|
|
.el-tree-node__expand-icon.is-leaf::before{
|
|
content: "";
|
|
}
|
|
.el-icon-caret-right.is-leaf::before{
|
|
content: "";
|
|
display: none;
|
|
}
|
|
.custom-tree-node .file_class{
|
|
color: #ffb400;
|
|
}
|
|
.custom-tree-node .label{
|
|
margin-left:5px;
|
|
}
|
|
.custom-tree-node .no_children{
|
|
color: #aaa;
|
|
}
|
|
}
|
|
// 使用flex布局对custom-tree-node_body盒子进行排版
|
|
.custom-tree-node_body{
|
|
width:100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
// margin-top:-3px;
|
|
}
|
|
.tree_form_left_tree_icon{
|
|
padding:0 3px;
|
|
font-size:16px;
|
|
color:#666;
|
|
i{
|
|
margin:0 4px;
|
|
}
|
|
}
|
|
.tree_form_left_tree_icon:hover{
|
|
cursor: pointer;
|
|
}
|
|
// 展开关闭的icon
|
|
.el-tree-node__expand-icon{
|
|
font-size: 16px;
|
|
padding: 0 3px;
|
|
// 叶子节点（无子节点）
|
|
&.is-leaf{
|
|
color: transparent;
|
|
// display: none; // 也可以去掉
|
|
}
|
|
}
|
|
|
|
}
|
|
.view-list{
|
|
&-item{
|
|
width: 330px;
|
|
height: 186px;
|
|
border-radius: 8px;
|
|
background-color: #1B6BEB;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
&-title{
|
|
position: absolute;
|
|
bottom: 0;
|
|
border-radius: 0 0 8px 8px;
|
|
background: rgba(0,0,0,0.7);
|
|
height: 34px;
|
|
line-height: 34px;
|
|
width: 100%;
|
|
}
|
|
|
|
.cover {
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 鼠标hover,显示遮罩,设置过渡时间 */
|
|
.cover:hover {
|
|
transition: all .4s;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.view-right-title{
|
|
font-size: 20px;
|
|
color: #FFFFFF;
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid rgba(216,216,216,0.4);;
|
|
}
|
|
.sub-title{
|
|
font-size: 16px;
|
|
margin-bottom: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
.text-con{
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 14px;
|
|
}
|
|
.right-view-list{
|
|
height: 1px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
@include scrollStyle(2px);
|
|
}
|
|
.right-view-item{
|
|
width: 350px;
|
|
height: 98px;
|
|
background: rgba(0,0,0,0.3);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
padding-left: 3px;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
img{
|
|
margin-right: 12px;
|
|
}
|
|
p{
|
|
font-size: 16px;
|
|
padding: 0 0 10px 0;
|
|
}
|
|
.right-sub-text{
|
|
font-size: 12px;
|
|
}
|
|
.el-rate__icon{
|
|
margin-right: 0;
|
|
}
|
|
}
|