1393 lines
25 KiB
SCSS
1393 lines
25 KiB
SCSS
.colorBlue {
|
|
color: #229bf0;
|
|
}
|
|
|
|
.colorGreen {
|
|
color: #64e50e;
|
|
}
|
|
|
|
.colorRed {
|
|
color: #ed0000;
|
|
}
|
|
|
|
.colorOrange {
|
|
color: #fe9037;
|
|
}
|
|
|
|
.colorYellow {
|
|
color: #e1d123;
|
|
}
|
|
|
|
.dian {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #999;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 5px;
|
|
|
|
&.online {
|
|
background: #1fd038;
|
|
}
|
|
|
|
&.busy {
|
|
background: #ed0000;
|
|
}
|
|
|
|
&.blue {
|
|
background: #229bf0;
|
|
}
|
|
}
|
|
|
|
button.dp-default {
|
|
border: 1px solid #3180ea;
|
|
box-shadow: inset 0 0 18px #2b8ce6;
|
|
background: #001022;
|
|
color: #fff;
|
|
height: 30px;
|
|
padding: 0 15px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
|
|
&.small {
|
|
height: 22px;
|
|
line-height: 20px;
|
|
vertical-align: middle;
|
|
padding: 0 6px;
|
|
box-shadow: inset 0 0 10px #2b8ce6;
|
|
font-size: 12px;
|
|
|
|
span,
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "DigifaceWide";
|
|
src: url("~@/assets/font/DigifaceWide.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.canClick {
|
|
cursor: pointer;
|
|
}
|
|
|
|
::v-deep .el-radio-button__inner {
|
|
background: transparent;
|
|
color: rgb(187, 208, 251);
|
|
border: 1px solid #4f6088;
|
|
}
|
|
|
|
::v-deep .el-checkbox {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
::v-deep .el-checkbox {
|
|
color: #acb0b8;
|
|
}
|
|
|
|
.all {
|
|
overflow: hidden;
|
|
|
|
.mask {
|
|
position: fixed;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
z-index: 1;
|
|
background: url("~@/assets/images/mask.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
height: 100vh;
|
|
position: relative;
|
|
background-color: #001022;
|
|
font-size: 12px;
|
|
|
|
.headerBox {
|
|
position: absolute;
|
|
padding-top: 10px;
|
|
left: 0px;
|
|
top: 0px;
|
|
right: 0px;
|
|
height: 65px;
|
|
background: url("~@/assets/images/header-bg.png") no-repeat top 10px center #001022;
|
|
z-index: 10;
|
|
|
|
.logoBox {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 11px;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
|
|
.qinwuLevel {
|
|
width: 250px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
float: left;
|
|
margin: 8px 0 0 10px;
|
|
background: url("~@/assets/images/qinwudengji.png") no-repeat;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
position: relative;
|
|
|
|
&:hover>div {
|
|
display: block;
|
|
}
|
|
|
|
>div {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 0px;
|
|
padding-top: 14px;
|
|
display: none;
|
|
|
|
.qinwuExplain {
|
|
background: #052342;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
padding: 10px;
|
|
line-height: 20px;
|
|
width: 284px;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
border: 1px solid #0d5897;
|
|
z-index: 3;
|
|
|
|
>span {
|
|
color: #7ac5ff;
|
|
}
|
|
|
|
span.time1 {
|
|
display: inline-block;
|
|
width: 90px;
|
|
}
|
|
|
|
span.time2 {
|
|
display: inline-block;
|
|
width: 70px;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-bottom: 8px solid #052342;
|
|
border-left: 8px solid transparent;
|
|
border-top: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 116px;
|
|
z-index: 2;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-bottom: 8px solid #0d5897;
|
|
border-left: 8px solid transparent;
|
|
border-top: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
position: absolute;
|
|
top: -17px;
|
|
left: 116px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btnBox {
|
|
padding-top: 8px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.timeBox {
|
|
float: left;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
margin: 8px 0 0 10px;
|
|
|
|
.time {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.date {}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
height: 100%;
|
|
|
|
.dateBox {
|
|
margin: 10px 20px;
|
|
float: left;
|
|
}
|
|
|
|
.imgBtnBox {
|
|
float: right;
|
|
padding-top: 16px;
|
|
|
|
.imgBox {
|
|
width: 20px;
|
|
height: 20px;
|
|
text-align: center;
|
|
float: left;
|
|
margin-right: 15px;
|
|
position: relative;
|
|
|
|
.numb {
|
|
position: absolute;
|
|
background-color: #ed0000;
|
|
height: 14px;
|
|
line-height: 14px;
|
|
padding: 0 4px;
|
|
border-radius: 7px;
|
|
top: -7px;
|
|
right: -7px;
|
|
}
|
|
|
|
img {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
>.leftBox {
|
|
position: absolute;
|
|
top: 65px;
|
|
left: 0px;
|
|
padding: 10px 10px 0;
|
|
z-index: 9;
|
|
width: 360px;
|
|
background-color: #001022;
|
|
bottom: 0px;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
>.leftBox.hide {
|
|
left: -380px;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
>.rightBox {
|
|
position: absolute;
|
|
top: 65px;
|
|
right: 0px;
|
|
padding: 10px 10px 0;
|
|
z-index: 9;
|
|
width: 360px;
|
|
background-color: #001022;
|
|
bottom: 0px;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
>.rightBox.hide {
|
|
right: -380px;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
.pubTitle {
|
|
height: 39px;
|
|
background: url("~@/assets/images/title.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.text {
|
|
line-height: 39px;
|
|
font-size: 15px;
|
|
padding-left: 38px;
|
|
}
|
|
|
|
.link {
|
|
line-height: 54px;
|
|
color: #3f87ff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.pubTitle2 {
|
|
height: 39px;
|
|
background: url("~@/assets/images/title2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.text {
|
|
line-height: 39px;
|
|
font-size: 15px;
|
|
padding-left: 38px;
|
|
}
|
|
|
|
.link {
|
|
line-height: 54px;
|
|
color: #3f87ff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.pubLongTitle {
|
|
height: 39px;
|
|
background: url("~@/assets/images/long-title.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.text {
|
|
line-height: 39px;
|
|
font-size: 15px;
|
|
padding-left: 38px;
|
|
}
|
|
}
|
|
|
|
ul.statistics {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding-bottom: 10px;
|
|
|
|
li {
|
|
width: 110px;
|
|
height: 94px;
|
|
border: 1px solid #25324d;
|
|
margin-top: 8px;
|
|
display: flex;
|
|
|
|
.imgBox {
|
|
width: 48px;
|
|
border-right: 1px solid;
|
|
border-image: linear-gradient(#314d9300, #314c93, #314d9300) 1;
|
|
|
|
img {
|
|
margin-top: 18px;
|
|
}
|
|
}
|
|
|
|
.numbBox {
|
|
flex: 1;
|
|
|
|
.title {
|
|
text-align: center;
|
|
height: 28px;
|
|
line-height: 40px;
|
|
width: 100%;
|
|
}
|
|
|
|
.main {
|
|
width: 50%;
|
|
text-align: center;
|
|
float: left;
|
|
line-height: 20px;
|
|
padding-top: 10px;
|
|
|
|
.numb {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
background-image: -webkit-linear-gradient(bottom, #6f97ff, #fff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.groupList {
|
|
height: calc(100vh - 455px);
|
|
overflow-y: auto;
|
|
margin-top: 8px;
|
|
|
|
li {
|
|
box-shadow: inset 0 0 10px #0d5897;
|
|
padding-bottom: 3px;
|
|
border-radius: 2px;
|
|
margin-top: 8px;
|
|
position: relative;
|
|
|
|
&:first-child {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: inset 0px 0px 15px #0474c3;
|
|
}
|
|
|
|
.checkBox {
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
background-color: #0084ff;
|
|
right: 0px;
|
|
top: 0px;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding-top: 2px;
|
|
box-sizing: border-box;
|
|
display: none;
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
padding-top: 8px;
|
|
line-height: 22px;
|
|
padding-bottom: 6px;
|
|
|
|
.top-cnt {
|
|
width: 80%;
|
|
}
|
|
|
|
.dian {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #999;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 5px;
|
|
|
|
&.online {
|
|
background: #1fd038;
|
|
}
|
|
|
|
&.busy {
|
|
background: #ed0000;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-size: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.other {
|
|
color: #6586af;
|
|
|
|
.numb {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.imgBtn {
|
|
padding-top: 10px;
|
|
margin-left: 2px;
|
|
|
|
img {
|
|
margin-right: 4px;
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.address {
|
|
margin: 0 14px;
|
|
border-top: 1px solid #162f55;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
|
|
img,
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.juli {
|
|
float: right;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
li.active {
|
|
border: 1px solid #108fe7;
|
|
|
|
.checkBox {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.tabsBox {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
li {
|
|
padding-top: 10px;
|
|
color: #58a4fa;
|
|
height: 25px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
color: #fe9037;
|
|
}
|
|
|
|
&.active::before {
|
|
content: "";
|
|
width: 28px;
|
|
height: 3px;
|
|
background: #ff7510;
|
|
display: block;
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
bottom: -7px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.warningList {
|
|
padding-top: 5px;
|
|
height: calc(100vh - 170px);
|
|
overflow-y: auto;
|
|
margin-top: 6px;
|
|
|
|
>li {
|
|
border-left: 1px solid #eeeeee4a;
|
|
position: relative;
|
|
padding-top: 15px;
|
|
padding-bottom: 14px;
|
|
margin-left: 3px;
|
|
|
|
&:last-child {
|
|
border-left: 1px solid #eeeeee00;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
background: #3680f0;
|
|
border-radius: 50%;
|
|
top: -2px;
|
|
left: -4px;
|
|
}
|
|
|
|
>.time {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: -5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: calc(100% - 12px);
|
|
|
|
.timelist {
|
|
>ul {
|
|
border: 1px solid #024da4;
|
|
background-color: #001022;
|
|
z-index: 10;
|
|
padding: 10px;
|
|
padding-top: 13px;
|
|
position: absolute;
|
|
border-radius: 5px;
|
|
right: 0px;
|
|
top: 18px;
|
|
display: none;
|
|
|
|
>li {
|
|
border-left: 1px solid #eeeeee4a;
|
|
position: relative;
|
|
padding-top: 12px;
|
|
padding-left: 12px;
|
|
padding-bottom: 16px;
|
|
margin-left: 42px;
|
|
width: 184px;
|
|
color: #aaa;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
background: #999;
|
|
border-radius: 50%;
|
|
top: -2px;
|
|
left: -4px;
|
|
}
|
|
|
|
>.state {
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 40px;
|
|
text-align: right;
|
|
top: -7px;
|
|
left: -48px;
|
|
}
|
|
|
|
>.time {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: -5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: calc(100% - 12px);
|
|
}
|
|
|
|
&:last-child {
|
|
border-left: 1px solid transparent;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
&.active {
|
|
color: #fff;
|
|
|
|
&::before {
|
|
content: "";
|
|
background: #0b9ff4;
|
|
}
|
|
|
|
>.time {
|
|
color: #0b9ff4;
|
|
}
|
|
|
|
>.state {
|
|
color: #0b9ff4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover>ul {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
i {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
i {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
border: 1px solid #275288;
|
|
border-radius: 1px;
|
|
margin-left: 12px;
|
|
position: relative;
|
|
|
|
.state {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 3px;
|
|
}
|
|
|
|
.top {
|
|
padding: 10px;
|
|
display: flex;
|
|
|
|
.photo {
|
|
width: 60px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
|
|
.nameBox {
|
|
padding-bottom: 4px;
|
|
display: flex;
|
|
}
|
|
|
|
.name {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.other {
|
|
color: #6586af;
|
|
|
|
span {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
|
|
&:last-child {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
|
|
height: 20px;
|
|
}
|
|
|
|
.text {
|
|
line-height: 18px;
|
|
|
|
.kongge {
|
|
display: inline-block;
|
|
width: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.address {
|
|
margin: 0 10px;
|
|
border-top: 1px solid #162f55;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
|
|
img,
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.juli {
|
|
float: right;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.btnBox {
|
|
text-align: right;
|
|
padding: 0 10px 10px 0;
|
|
|
|
button {
|
|
margin: 0 2px;
|
|
|
|
&:last-child {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.yellow {
|
|
border: 1px solid #dcd00c;
|
|
box-shadow: inset 0 0 10px #ffea00;
|
|
|
|
.top .info .nameBox .name {
|
|
color: #e1d123;
|
|
}
|
|
}
|
|
|
|
&.orange {
|
|
border: 1px solid #cd6907;
|
|
box-shadow: inset 0 0 10px #ff6c00;
|
|
|
|
.top .info .nameBox .name {
|
|
color: #e15923;
|
|
}
|
|
}
|
|
|
|
&.red {
|
|
border: 1px solid #cd0407;
|
|
box-shadow: inset 0 0 10px #ff0000;
|
|
|
|
.top .info .nameBox .name {
|
|
color: #ed0000;
|
|
}
|
|
}
|
|
|
|
&.blue {
|
|
border: 1px solid #108fe7;
|
|
box-shadow: inset 0 0 10px #0084ff;
|
|
|
|
.top .info .nameBox .name {
|
|
color: #119dff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.eagleEyeBox {
|
|
position: absolute;
|
|
left: 390px;
|
|
bottom: 10px;
|
|
border: 3px solid #0084ff;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: #fff;
|
|
transition: 1s all;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
padding: 0 4px;
|
|
background-color: #999;
|
|
font-size: 11px;
|
|
border-radius: 2px;
|
|
margin-left: 3px;
|
|
color: #fff;
|
|
vertical-align: middle;
|
|
|
|
&.blue {
|
|
background-color: #0b9ff4;
|
|
}
|
|
|
|
&.orange {
|
|
background-color: #e15923;
|
|
}
|
|
|
|
&.red {
|
|
background-color: #e21c1c;
|
|
}
|
|
|
|
&.yellow {
|
|
background-color: #d6d301;
|
|
}
|
|
|
|
&.green {
|
|
background-color: #56db2d;
|
|
}
|
|
|
|
&.mj {
|
|
background-color: #4995fd;
|
|
}
|
|
|
|
&.fj {
|
|
background-color: #3ad2d4;
|
|
}
|
|
}
|
|
|
|
.tagBorder {
|
|
display: inline-block;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
padding: 0 4px;
|
|
font-size: 11px;
|
|
border-radius: 2px;
|
|
margin-left: 3px;
|
|
border: 1px solid #0084ff;
|
|
color: #0084ff;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
ul.bottomBtnBox {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0px;
|
|
transform: translateX(-50%);
|
|
z-index: 10;
|
|
|
|
>li {
|
|
float: left;
|
|
margin: 0 4px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
>img {
|
|
width: 59px;
|
|
}
|
|
|
|
>div {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding-bottom: 10px;
|
|
|
|
>ul {
|
|
background: #1c3754;
|
|
padding: 15px 0 5px 15px;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 8px solid #1c3754;
|
|
border-left: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
border-bottom: 8px solid transparent;
|
|
position: absolute;
|
|
bottom: -16px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
>.title {
|
|
height: 18px;
|
|
margin-bottom: 2px;
|
|
margin-right: 10px;
|
|
line-height: 5px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover>div {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.shebeiList {
|
|
height: calc(100vh - 235px);
|
|
overflow-y: auto;
|
|
|
|
>li {
|
|
box-shadow: inset 0 0 10px #0d5897;
|
|
padding-bottom: 3px;
|
|
border-radius: 2px;
|
|
margin-top: 8px;
|
|
|
|
&:first-child {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: inset 0px 0px 15px #0474c3;
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
padding-top: 8px;
|
|
line-height: 22px;
|
|
padding-bottom: 6px;
|
|
|
|
.name {
|
|
font-size: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.other {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.zblist {
|
|
padding: 0 12px;
|
|
|
|
.zblist-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 6px;
|
|
}
|
|
}
|
|
|
|
.address {
|
|
margin: 0 12px;
|
|
height: 28px;
|
|
color: #fff;
|
|
|
|
img,
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.btnBox {
|
|
border-top: 1px solid #162f55;
|
|
margin: 0 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 40px;
|
|
height: 38px;
|
|
|
|
.left {
|
|
.tag {
|
|
margin-left: 0px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
button {
|
|
margin: 0 2px;
|
|
|
|
&:last-child {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.numbCheck {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 12px;
|
|
padding-bottom: 8px;
|
|
|
|
>li {
|
|
width: 33%;
|
|
border: 1px solid #20467f;
|
|
height: 66px;
|
|
text-align: center;
|
|
color: #2e4381;
|
|
box-sizing: border-box;
|
|
margin-left: -1px;
|
|
z-index: 1;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
border: 1px solid #718492;
|
|
z-index: 2;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
>li:nth-child(1) {
|
|
// border: 1px solid #119dff;
|
|
}
|
|
|
|
.numbCheckActive {
|
|
border: 1px solid #119dff;
|
|
}
|
|
|
|
>li:nth-child(2) {
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
|
|
.videoBox {
|
|
margin: 0 10px;
|
|
border: 1px solid#2b4462;
|
|
height: 200px;
|
|
margin-bottom: 8px;
|
|
|
|
>img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.mapShowChange {
|
|
width: 44px;
|
|
background-color: #32557a;
|
|
border-radius: 22px;
|
|
position: absolute;
|
|
right: 400px;
|
|
bottom: 30px;
|
|
z-index: 3;
|
|
|
|
li {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 2px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.dialogBox {
|
|
width: 360px;
|
|
padding: 0 12px;
|
|
position: absolute;
|
|
top: 150px;
|
|
left: 365px;
|
|
background: #052342;
|
|
z-index: 9;
|
|
border-radius: 4px;
|
|
|
|
>.title {
|
|
height: 38px;
|
|
line-height: 38px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #052342;
|
|
padding: 0;
|
|
|
|
.close {
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.infoBox {
|
|
border: 1px solid #275288;
|
|
}
|
|
|
|
.addressBox {
|
|
border-top: 1px solid #162f55;
|
|
margin: 0 10px;
|
|
min-height: 30px;
|
|
line-height: 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
img,
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
>.btnBox {
|
|
text-align: center;
|
|
padding-top: 8px;
|
|
padding-bottom: 12px;
|
|
|
|
button {
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.deskSearch {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 390px;
|
|
width: 342px;
|
|
}
|
|
|
|
.listSearchBox {
|
|
padding: 8px 0;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
input {
|
|
border: 1px solid #243e82;
|
|
background-color: #040c21;
|
|
height: 22px;
|
|
border-radius: 3px;
|
|
width: 320px;
|
|
outline: none;
|
|
color: #fff;
|
|
text-indent: 0.5em;
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
|
|
&:focus {
|
|
border: 1px solid #409eff;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.filterBtn {
|
|
float: right;
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.filterList {
|
|
position: absolute;
|
|
top: 45px;
|
|
right: 0px;
|
|
width: 300px;
|
|
background: #052342;
|
|
width: 284px;
|
|
border-radius: 3px;
|
|
border: 1px solid #0d5897;
|
|
padding: 10px 10px 10px 0;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-bottom: 8px solid #052342;
|
|
border-left: 8px solid transparent;
|
|
border-top: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
position: absolute;
|
|
top: -15px;
|
|
right: 8px;
|
|
z-index: 2;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-bottom: 8px solid #0d5897;
|
|
border-left: 8px solid transparent;
|
|
border-top: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
position: absolute;
|
|
top: -17px;
|
|
right: 8px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btnBox {
|
|
text-align: center;
|
|
padding-left: 10px;
|
|
|
|
button {
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .el-form-item__label {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
//未出置字体 || 一级勤务
|
|
.notDisposed {
|
|
color: #fc011a;
|
|
}
|
|
|
|
//处置中字体
|
|
.disposalOfThe {
|
|
color: #23d96e;
|
|
}
|
|
|
|
//二级勤务
|
|
.secondLevel {
|
|
color: orange;
|
|
}
|
|
|
|
//三级勤务
|
|
.threeLevel {
|
|
color: yellow;
|
|
}
|
|
|
|
.empty-box {
|
|
height: 175px;
|
|
line-height: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
.listsun{
|
|
overflow: auto;
|
|
height: 55vh;
|
|
}
|
|
.listsun2{
|
|
overflow: auto;
|
|
height: 30vh;
|
|
}
|
|
.listsun3{
|
|
overflow: auto;
|
|
height: 25vh;
|
|
}
|
|
.dissun{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 1px;
|
|
}
|
|
.stitle{
|
|
border-left: 3px solid #00FFFF;
|
|
padding-left: 10px;
|
|
}
|
|
.stype-box{
|
|
border: 1px solid rgba(76, 166, 251, 0.8);
|
|
padding: 15px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
.check-box{
|
|
display: flex;
|
|
justify-content: center;
|
|
.check-item{
|
|
width: 50px;
|
|
border: 1px solid #2892ff;
|
|
text-align: center;
|
|
margin: 0 8px;
|
|
border-radius: 13px;
|
|
}
|
|
.ckBg{
|
|
background-color: #2892ff;
|
|
}
|
|
}
|
|
.simg1{
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
top: 0;
|
|
left: 0;
|
|
transform: rotate(180deg);
|
|
}
|
|
.simg2{
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
top: 0;
|
|
right: 0;
|
|
transform: rotate(270deg);
|
|
}
|
|
.simg3{
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
bottom: 0;
|
|
left: 0;
|
|
transform: rotate(90deg);
|
|
}
|
|
.simg4{
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
bottom: 0;
|
|
right: 0;
|
|
// transform: rotate(-180deg);
|
|
}
|
|
.table-List{
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|