tsg-web/src/views/Home/index.less

810 lines
16 KiB
Plaintext

.indexBox{
.ant-table-tbody>tr>td{
padding:2px 0 !important;
}
.ant-collapse-content-box{
padding:0;
}
.ant-collapse > .ant-collapse-item,.ant-collapse-content{
border:0;
}
.ant-collapse{
border:0;
background-color: transparent;
}
.ant-collapse-icon-position-end > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow{
top:49%;
right:30px;
font-size:16px;
color: #7D7D7D;
}
.panelTitle{
// height:30px;
// border-bottom: 1px solid #f5f5f5;
//padding-left: 14px;
box-sizing: border-box;
.txt{
color:#050505;
font-size:14px;
letter-spacing: 1px;
font-weight:bold;
margin-left:10px;
line-height: 25px;
}
}
.panelTitle1{
// border-bottom: 1px solid #f5f5f5;
//padding-left: 14px;
box-sizing: border-box;
display: flex;
align-items: center;
.txt{
color:#050505;
font-size:14px;
letter-spacing: 1px;
margin-left:10px;
line-height: 25px;
}
}
.contentBox{
padding:0 20px;
box-sizing: border-box;
.numBox{
&:nth-child(1){
margin-bottom:10px;
}
>div{
background: #ECF2F9;
border-radius: 6px;
padding: 10px 0 4px 0;
box-sizing: border-box;
text-align:center;
//width:calc( 230px/3 );
//width:calc( (33rem - 110px)/3 );
width:84px;
height:74px;
&:nth-child(2){
margin:0 16px;
}
span{
font-size:1.3rem;
}
p{
font-size:24px;
color:#0893FF;
margin:0;
font-weight:bold;
}
}
}
.txtBox{
margin-top:10px;
padding-right:10px;
p{
margin:0;
line-height:20px;
font-size:1.2rem;
text-indent: 28px;
text-align: justify;
}
}
}
.card-group {
//font-size: 0.8rem;
font-size: 12px;
color: rgb(172, 188, 190);
& > span {
cursor: pointer;
margin: 0.1rem 0.2rem;
display: inline-block;
position: relative;
border: 1px solid #209aec46;
//padding: 0.1rem 0.5rem;
padding: 0.1rem 0.5rem 0 0.5rem;
border-radius: 0.2rem;
height:22px;
}
.number {
color: #fff;
//font-size: 0.8rem;
font-size: 12px;
background-color: red;
display: inline-block;
position: absolute;
top: -0.2rem;
right: -0.2rem;
border-radius: 50%;
padding: 0px 0.35rem;
margin-top: -0.5rem;
margin-right: -0.5rem;
}
.value {
color: #00deff;
font-weight: bold;
text-shadow: 0 0 2rem #00deff;
}
.active {
color: #0893FF;
cursor: default;
font-weight: bold;
border: 1px solid #209aec9f;
}
}
.selectedTr{
td{
border: 1px solid #279FFD !important;
border-left:0 !important;
border-right:0 !important;
&:nth-child(1){
border-left:1px solid #279FFD !important;
}
&:last-child{
border-right:1px solid #279FFD !important;
}
}
}
.ant-collapse-icon-position-end > .ant-collapse-item > .ant-collapse-header{
padding: 8px 0 8px 16px;
}
.layerPanelBtn{
// width:125px;
width:45px;
// height:28px;
// height:130px;
//background: rgba(255,255,255,0.8);
border-radius:4px;
box-shadow: 1px 2px 10px #eee;
padding:4px 0 0 5px;
color: #818181;
margin-top:6px;
cursor: pointer;
background: #ECF2F9;
>div{
margin-right:8px;
color: #0068F4;
&:last-child{
margin-right:0;
}
}
}
.leftPanel{
position: absolute;
width:290px;
// width:33rem;
max-height:calc( 100vh - 84px );
background:#fff;
z-index:111;
box-shadow: 1px 2px 10px #e8ecf1;//3px 5px 3px 2px #e8ecf1;
/*padding:0 0 20px 0;
box-sizing: border-box;*/
>div{
max-height:calc( 100vh - 84px );
overflow: hidden auto;
}
.iconDiv{
border-width: 0px;
width: 5px;
height: 14px;
background-color: #007afd;
}
.ant-collapse-header{
font-size: 14px;
padding: 3px 16px;
// border-bottom:1px solid #d7d7d7;
// border-left:1px solid #d7d7d7;
// border-right:1px solid #d7d7d7;
.ant-collapse-header-text{
font-family: 'Microsoft YaHei UI', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
}
}
.monitorAndWarningDiv{
padding:0 20px 0 10px;
margin-bottom:5px;
.ant-collapse-header{
padding: 3px 16px;
// .ant-collapse-header-text{
// font-weight:bold;
// }
}
.cardBox{
min-height:40px;
//box-shadow: 0 0 4px 4px #ECECEC;
padding:0 10px;
box-sizing: border-box;
&:nth-child(2){
margin:8px 0;
border-top:1px solid #e4eaf1;
border-bottom:1px solid #e4eaf1;
padding:5px 10px 8px 10px;
}
.imgBox{
width:40px;
height:40px;
margin-right:10px;
div{
width:38px;
height:38px;
border:1px solid #E1EFFF;
background: #E1EFFF;
border-radius:6px;
text-align: center;
img{
width:22px;
margin-top:6px;
}
}
}
.yjNumBox{
//width:260px;
width:22rem;
.titleSpan{
width:100px;
font-size:14px;
font-weight:bold;
margin-right:20px;
cursor:pointer;
}
.totalSpan{
font-weight:bold;
}
}
.ybyjBox{
.wxYbyj{
width: 100%;
display: flex;
justify-content: space-between;
.color{
// color: rgb(246, 66, 66);
}
}
.jjYbyj{
width: 100%;
display: flex;
justify-content: space-between;
.color{
// color: rgb(255, 158, 91);
}
}
.gzYbyj{
width: 100%;
display: flex;
justify-content: space-between;
.color{
// color: rgb(227, 194, 29);
}
}
}
.bottom{
//margin-top:15px;
>div{
width:8rem;
height:18px;
//background:#F0F0F0;
border-radius:2px;
/*&:nth-child(2),&:nth-child(3){
margin:0 10px 10px 10px;
}*/
margin:5px 30px 0 0;
span{
color: #9E9E9E;
&:nth-child(1){
margin-right:15px;
}
}
}
}
}
}
.operationalMaintenanceBox{
.ant-radio-button-wrapper{
}
}
}
.rightPanel{
position: absolute;
width:365px;
background:#fff;
z-index:101;
right:35px;
box-shadow: 1px 2px 10px #e8ecf1;//3px 5px 3px 5px #e8ecf1;
padding: 5px 10px;
max-height:calc( 100vh - 84px );
>div{
max-height:calc( 100vh - 94px );
// height: 500px;
overflow: hidden auto;
}
.dutyBox{
background:#ECF2F9;
border-radius:4px;
padding:5px 20px;
box-sizing: border-box;
.labelSpan,.text{
//letter-spacing: 2px;
line-height:26px;
}
.labelSpan{
color:#A9A9A9;
margin-right:10px;
}
.text{
color:#333;
}
}
}
.button-group {
font-size: 1.5rem;
color: #A5A5A5;
span {
cursor: pointer;
margin: 0.1rem 0.2rem;
display: inline-block;
//border: 1px solid #209aec46;
padding: 0 0.5rem;
//border-radius: 0.2rem;
}
.active {
color: #0893FF;
cursor: pointer;
font-weight: bold;
//border: 1px solid #209aec9f;
}
}
/*预报*/
.leftPanel1{
position: absolute;
left: -12px;
top: -12px;
//width:540px;
width:45rem;
height:calc( 100vh - 64px );
z-index:111;
.ant-tabs-left, .ant-tabs-nav{
height: 100%;
}
.ant-tabs-nav-wrap{
background: #4E5A6A;
}
.ant-input-affix-wrapper{
padding:2px 10px !important;
}
.ant-tabs-tab{
height:100px;
border-bottom: 1px solid #353F4D;
padding: 8px 13px !important;
&:nth-child(6){
border-bottom: 0;
}
}
.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab{
margin:0;
}
.tabTitle{
margin-top:4px;
.iconDiv{
width:38px;
height:38px;
font-size:22px;
color: #B6B6B6;
border: 1px solid #9EA9B7;
border-radius: 10px;
text-align: center;
margin-bottom:10px;
margin-left: 11px;
span{
margin-left:7px;
}
}
.txtDiv{
font-size:14px;
color: #B6B6B6;
letter-spacing: 1px;
width: 60px;
}
}
.ant-tabs-tab-active{
background: #3F4A59;
.tabTitle{
.iconDiv{
background: #0B81FF;
border-color: #0B81FF;
color: #fff;
}
.txtDiv{
color: #fff;
}
}
}
.ant-tabs-content-holder{
//height: calc( 100vh - 84px );
height:calc( 100% - 20px );
background:#fff;
box-shadow: 1px 2px 10px #bdbaba;
margin: 12px 0 0 12px;
padding: 10px 0;
box-sizing: border-box;
.ant-tabs-content{
>div{
padding:0;
}
}
}
.yagl-tab{
.ant-tabs-content-holder{
background: transparent;
box-shadow: none;
}
}
}
.leftPanel2{
width:54rem;
}
.topNumBox{
position: absolute;
top:25px;
width:640px;
height: 72px;
left: calc( (100vw - 640px)/2 );
z-index: 110;
>div{
margin-right: 18px;
width: calc( (100% - 145px)/4 );
height: 72px;
background: rgba(255,255,255,0.85);
box-shadow: 1px 2px 10px #eee;
border-radius: 10px;
&:last-child{
margin-right: 0;
}
p{
text-align: center;
line-height:25px;
letter-spacing: 1px;
margin:5px 0 0 0;
font-weight:bold;
}
div{
width: 100px;
margin: 0 auto;
text-align: center;
span{
font-size: 24px;
color: #0893FF;
font-weight: bold;
}
span:nth-child(1){
color: #0893FF;
}
span:nth-child(2){
color: #565656;
}
}
}
}
.tipsBox{
width: 210px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 1px 2px 10px #bdbaba;
padding: 10px 0 0 7px;
box-sizing: border-box;
border-radius: 10px;
.title{
font-size: 14px;
color: #333;
letter-spacing: 1px;
font-weight: bold;
margin-bottom: 5px;
}
span{
line-height: 33px;
margin-left: 5px;
font-size: 12px;
}
.legendBox{
.title{
font-size: 14px;
}
ul,li{
list-style: none;
padding:0;
font-size: 12px;
}
li{
width: 105px;
}
span{
height:15px;
line-height: 15px;
margin-left:0;
}
.colorSpan1,.colorSpan2,.colorSpan3,.colorSpan4,.colorSpan5,.colorSpan6,.colorSpan7{
width:22px;
height:10px;
border:1px solid #ddd;
margin:2px 5px 0 0;
}
.colorSpan1{
background:#781D4F;
}
.colorSpan2{
background:#EB20F7;
}
.colorSpan3{
background:#1E1ACA;
}
.colorSpan4{
background:#6EC2FA;
}
.colorSpan5{
background:#59B666;
}
.colorSpan6{
background:#BDEF9A;
}
.colorSpan7{
background:#ADB6D9;
}
}
}
.skcx{
cursor: pointer;
}
.skcxBox{
width: 250px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 1px 2px 10px #bdbaba;
box-sizing: border-box;
border-radius: 10px;
overflow:hidden;
.skcxBox_Scroll{
overflow-y: scroll;
max-height: 400px;
.item{
cursor: pointer;
display: flex;
align-items: flex-start;
padding: 10px 5px 0px 5px;
.skcxIcon{
padding: 15px 10px;
}
.content{
display: flex;
flex-direction: column;
.title{
display: flex;
justify-content: space-between;
font-size: 16px;
font-weight: bold;
color: #3B4859;
padding: 5px 0;
.num{
color: #c69c6b;
}
}
.text{
font-size: 14px;
color: #9E9E9E;
font-weight: bold;
}
.time{
font-size: 14px;
font-weight: bold;
color: #9E9E9E;
padding: 5px 0;
}
}
}
}
}
}
@media screen and (max-width: 1600px){
.indexBox .topNumBox {
top: 25px;
width: 660px;
left: calc((100vw - 540px)/2);
zoom: 0.9;
}
}
@media screen and (max-width: 1750px){
.toolBox{
//top: 110px !important;
//left: 63vw !important;
}
}
.ant-radio-button-wrapper{
height:28px;
line-height:26px;
border: 1px solid #0893FF !important;
color:#0893FF;
&.ant-radio-button-wrapper-checked{
color: #fff !important;
}
.ant-radio-button-checked{
background:#0893FF;
border-color:#0893FF !important;
}
}
.introductionDrawer{
.ant-drawer-body{
padding: 0 0 0 12px;
}
}
.color666{
color: #666;
}
.ant-table-thead > tr > th{
// background-color: #f2f3f5 !important;
// font-size: 13px;
}
.mapToolBoxTuCeng{
position: absolute;
top: 10px;
left: 5px;
border-radius: 5px;
padding: 0 10px;
background: #fff;
border: 1px solid #eee;
display: flex;
z-index: -1;
transition: all 0.2s ease 0s;
.mapToolBoxTuCengItem{
width: 70px;
margin-top: 10px;
margin-bottom: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #000000;
font-size: 14px;
}
}
.normalModalStyle{
width: 100%;
// min-height: 600px;
background-color: #fff;
.ant-card-body{
.ant-table-thead{
.ant-table-cell{
background-color: #e2edfd !important;
}
}
}
.normalModalStyle_title{
height: 40px;
background-color: #f7f7f7;
border-radius: 10px 10px 0 0 ;
display: flex;
align-items: center;
color: #007afd;
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
.normalModalStyle_title_icon{
margin: 0 10px 0 15px;
width: 5px;
height: 16px;
background: #3477f5;
}
.normalModalStyle_title_cancel{
margin-right: 15px;
flex: 1;
display: flex;
flex-direction: row-reverse;
}
}
}
.home_modal{
.ant-modal-content{
border-radius: 10px;
}
}
.homeModal1{
// .ant-radio-button-wrapper:not(:first-child)::before{
// background-color: red;
// }
display: flex;
flex-direction: column;
.homeModal1_content{
height: 504px;
display: flex;
padding: 5px 20px 20px 20px;
.homeModal1_content_lf{
width: 40%;
height: 100%;
}
.homeModal1_content_rf{
width: 60%;
height: 100%;
}
}
}
.homeModal2{
display: flex;
flex-direction: column;
.homeModal2_content{
height: 504px;
display: flex;
padding: 5px 20px 20px 20px;
}
}
.colorTable{
.ant-table-thead{
th{
height: 40px !important;
background-color: #e2edfd !important;
}
}
.ant-table-tbody{
.ant-table-measure-row{
td{
padding: 0 !important;
}
}
tr:nth-child(odd) {
td{
background-color: #f5f8fe !important;
}
}
}
}