@charset "utf-8";
/* CSS Document */
.content{position:relative; height:100vh !important; display:flex; flex-flow:column; overflow:hidden;}

/* 二级页面标题 */
.iTitle{padding:10px 20px; height:30px; line-height:30px; background:#fff; display:flex; align-items:center; border-radius:10px;}
.iTitle p{flex:1; font-size:16px; position:relative;}
.iTitle p:before{display:block; content:""; width:4px; height:24px; background:#2db7f5; border-radius:0 4px 4px 0; position:absolute; left:-20px; top:50%; transform:translateY(-50%);}
.btnTab{display:flex;}
.btnTab span{display:block; padding:0 20px; height:28px; line-height:28px; white-space:nowrap; font-size:12px; font-weight:normal; position:relative; z-index:1; cursor:pointer; -moz-user-select:-moz-none; -webkit-user-select:none; -ms-user-select:none; user-select:none; color:#666; border:#016bff 1px solid; border-left:0; background:#fff; cursor:pointer; color:#016bff;}
.btnTab span:first-of-type{border-radius:3px 0 0 3px; border-left:#016bff 1px solid;}
.btnTab span:last-of-type{border-radius:0 3px 3px 0;}
.btnTab span.current{background:#016bff; color:#fff;}
.iTitle .btn-group, .iTitle .btn-single{margin-left:20px;}

.searchArea{padding:20px 20px 0;}


/* 二级页面实际内容开始 */
.contentBox{flex:1; overflow:hidden; margin-top:20px; border-radius:10px;}

/* 面板标题 */
.panelH{height:40px; line-height:40px; display:flex; align-items:center;}
.panelH p{height:40px; padding-left:12px; flex:1; font-size:20px; position:relative;}
.panelH p:before{display:block; content:""; width:4px; height:18px; background:#016bff; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.panelH p span{font-size:14px; padding-left:20px;}
.panelH .sele{width:180px; border-radius:30px; background-position:190px center; padding:0 20px 0 10px;}
.panelH a{margin-left:20px;}

/* 监控设备page */
.equipment{display:flex; flex-flow:column;}
.equipment .tabContent{flex:1; padding:20px 10px 0; margin-top:20px; border-radius:10px; overflow:hidden;}
.equipmentList{height:calc(100% - 61px);}
.equipmentList ul{display:flex; flex-wrap:wrap; width:100%;}
.equipmentList li{width:calc(25% - 22px); min-width:300px; border-radius:10px; border:#b3d3ff 1px solid; margin:0 10px 20px; transition:all .3s;}
.equipmentList li:hover{box-shadow:0 2px 8px rgba(0,0,0,.2);}
.equipmentList li.addBtn .txt-btn{display:flex; flex-flow:column; align-items:center; justify-content:center; width:100%; height:100%; background:#f2f7ff; border-radius:10px;}
.equipmentList li.addBtn .txt-btn .iconfont{display:block; line-height:56px; font-size:50px; color:#016bff;}
.equipmentList li.addBtn .txt-btn p{padding-top:10px; font-size:14px; color:#666;}
.equipmentList li h3{line-height:30px; padding:5px 10px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:normal; border-bottom:#b3d3ff 1px solid; color:#016bff; background:#f2f7ff; border-radius:10px 10px 0 0;}
.equipmentList .itemCon{display:flex; align-content:center; padding:15px; overflow:hidden;}
.equipmentList .itemCon .pic{width:120px; height:160px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.equipmentList .itemCon .pic img{object-fit:cover; cursor:zoom-in; max-height:100%;}
.equipmentList .subItem{padding-left:15px; overflow:hidden; flex:1;}
.equipmentList .subItem p{padding-bottom:5px;}
.equipmentList .subItem span{display:block; line-height:20px; color:#999; font-size:12px;}
.equipmentList .subItem span:after{content:"：";}
.equipmentList .subItem label{display:block; height:20px; line-height:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.equipmentList .subItem .btn-box{padding:0; display:flex; flex-wrap:wrap;}
.equipmentList .subItem .btn-box .btn{width:22px; height:22px; line-height:22px; text-align:center; margin:4px 4px 0 0; display:flex; align-items:center; justify-content:center; padding:0; font-size:14px;}
.equipmentList .subItem .btn-box .btn i{font-size:16px; padding-right:2px;}

/* 翻页样式改写 */
.page01{padding:15px 10px; text-align:center; height:30px; line-height:30px; margin-top:0 !important; display:flex; align-items:center; justify-content:center; margin:0 -10px; border-top:#e6e6e6 1px solid;}
.page01 a{padding:0 10px!important; height:24px !important; line-height:24px !important; background:#fff !important;}
.page01 a:not(.pageBtnDisabled):not(.curpage):hover{border-color:#016bff!important; color:#016bff!important;}
.page01 .pageBtnDisabled{opacity:0.4; cursor:no-drop;}
.page01 .curpage{background:#016bff!important; color:#fff!important;border-color:#016bff!important; font-weight:normal!important;}
.page01 .gotoNumber{margin-left:3px; width:36px; height:24px; line-height:24px; text-align:center;}
.page01 .gotoNumberConfirm{background:#016bff!important; border-color:#016bff!important; color:#fff!important; cursor:pointer;}


/* 设备信息弹出层 */
.equipmentViewLayer{display:flex;}
.equipmentPic{width:160px;}
.equipmentPic p{height:200px; border-radius:8px; overflow:hidden; position:relative;}
.equipmentPic p img{width:100%; height:100%; object-fit:cover; cursor:zoom-in;}
.equipmentPic p span{display:block; width:100%; height:40px; line-height:40px; text-align:center; position:absolute; left:0; bottom:0; font-size:16px;}
.equipmentPic p span .txt-btn{margin:0 15px; font-size:16px; height:40px; line-height:40px; position:relative;}
.equipmentPic p span .txt-btn:not(:last-of-type):after{display:block; content:""; width:1px; height:14px; background:#fff;opacity:.3; position:absolute; right:-16px; top:50%; transform:translateY(-50%);}
.equipmentPic .btn{border-style:dashed; height:200px; display:flex; flex-flow:column; align-items:center; justify-content:center; width:calc(100% - 2px); border-radius:8px; padding:0;}
.equipmentPic .btn .iconfont{font-size:50px;}
.equipmentPic .btn span{padding-top:15px;}
.equipmentInfo{display:flex; flex-wrap:wrap; flex:1; overflow:hidden; margin-left:40px;}
.equipmentInfo .item{width:calc(50% - 20px); padding:10px 0; margin-right:40px; display:flex; align-items:center;}
.equipmentInfo .item:nth-of-type(2n){margin-right:0;}
.equipmentInfo .item h3{width:100px; height:40px; line-height:40px; font-size:14px; font-weight:normal; color:#777;}
.equipmentInfo .item p{flex:1; height:40px; line-height:40px; padding:0 35px 0 15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:#f7f7f7; border-radius:5px;}
.equipmentInfo .item .txt{flex:1; height:38px; line-height:38px; border-radius:5px;}
.equipmentInfo .item .sele{flex:1; height:38px; line-height:38px; border-radius:5px;}
.equipmentInfo .item.trafficCard p{cursor:pointer;}
.equipmentInfo .equipmentCode{position:relative;}
.equipmentInfo .equipmentCode .iconfont{display:block; width:40px; height:40px; line-height:40px; text-align:center; position:absolute; right:0; top:10px; font-size:20px;}
.equipmentInfo .equipmentCode .equipmentCodePic{display:block; visibility:hidden; opacity:0; width:150px; height:150px; padding:10px; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.2); margin-right:20px; position:absolute; top:50%; right:40px; transform:translateY(-50%); transition:all .3s;}
.equipmentInfo .equipmentCode .equipmentCodePic:after{display:block; content:""; width:0; height:0; border-color:transparent; border-width:6px; border-style:solid; border-left:6px #fff solid; position:absolute; right:-12px; top:50%; transform:translateY(-50%);}
.equipmentInfo .equipmentCode .equipmentCodePic img{display:block; width:150px; height:150px;}
.equipmentInfo .equipmentCode .iconfont:hover + .equipmentCodePic{visibility:visible; opacity:1; margin-right:0;}

/* 流量卡信息弹出层 */
.trafficCardLayer{display:flex; flex-wrap:wrap;}
.trafficCardLayer .item{width:50%; line-height:40px; padding:10px 0; display:flex; align-items:center; overflow:hidden;}
.trafficCardLayer .item h3{width:100px; text-align:right; padding:0 10px; font-size:14px; color:#666;}
.trafficCardLayer .item p{height:40px; padding:0 10px; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}


/* 监测站管理page */
.monitoringStation{height:calc(100% - 15px); margin:15px 15px 0;}
.monitoringStation .page01{margin:0 -15px; padding:15px;}
.monitoringStationList{height:calc(100% - 61px)!important;}
.monitoringStationList ul{display:flex; flex-wrap:wrap; width:100%; padding-bottom:15px;}
.monitoringStationList li{width:calc(25% - 30px); min-width:300px; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.15); margin:15px; transition:all .3s;}
.monitoringStationList li:hover{transform:translateY(-10px); box-shadow:0 2px 15px rgba(0,0,0,.2);}
.monitoringStationList li.addBtn .txt-btn{display:flex; flex-flow:column; align-items:center; justify-content:center; width:100%; height:100%;}
.monitoringStationList li.addBtn .txt-btn .iconfont{display:block; line-height:56px; font-size:50px; color:#016bff;}
.monitoringStationList li.addBtn .txt-btn p{padding-top:10px; font-size:14px; color:#666;}
.monitoringStationList li .tit{line-height:30px; padding:15px; font-size:16px; font-weight:normal; border-radius:10px 10px 0 0; display:flex; align-items:center;}
.monitoringStationList li .tit p{flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; height:30px;}
.monitoringStationList li .tit .txt-btn{margin-left:5px; font-size:18px;}
.monitoringStationList .info{padding:0 0 10px 15px; display:flex; flex-wrap:wrap;}
.monitoringStationList .info p{width:calc(33.3333% - 15px); line-height:40px; font-size:14px; display:flex; align-items:center; padding-right:15px;}
.monitoringStationList .info span{display:block; width:40px; color:#999;}
.monitoringStationList .info label{display:block; height:20px; line-height:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.monitoringStationList .btn-box{padding:15px; border-top:#ebf2fa 1px solid; background:#f6faff; display:flex; align-items:center; justify-content:space-between; border-radius:0 0 10px 10px;}
.monitoringStationList .btn-box .txt-btn{font-size:16px;}

/* 监测站编辑弹出层 */
.monitoringStationInfoLayer .item{padding:10px 0; display:flex; align-items:center;}
.monitoringStationInfoLayer .item p{width:100px; height:30px; line-height:30px; text-align:right;}
.monitoringStationInfoLayer .item p span{padding-right:3px;}
.monitoringStationInfoLayer .item .txt{width:150px;}
.monitoringStationInfoLayer .item .txt.iDate{width:auto!important;}

/* 设备绑定弹出层 */
#bindDeviceLayer{height:calc(100% - 60px);}
.bindDeviceLayer{display:flex; height:100%; overflow:hidden;}
.deviceSelect{flex:1; overflow:hidden; height:100%;}
.bindDeviceTitle{height:30px; line-height:30px; display:flex; align-items:center;}
.bindDeviceTitle h3{font-size:16px; font-weight:normal; flex:1;}
.bindDeviceTitle .bindDeviceSearch{margin-left:10px;}
.bindDeviceTitle .radioGroup{margin-left:10px;}
.deviceSelectList{display:flex; margin-top:20px; height:calc(100% - 50px); background:#f7f7f7;}
.bindDeviceLayer .tab{width:70px; height:100%; background:#e2e2e2; overflow:auto;}
.bindDeviceLayer .tab span{display:block; height:44px; line-height:44px; text-align:center; cursor:pointer; position:relative;}
.bindDeviceLayer .tab span:before{display:block; content:""; width:4px; height:100%; background:#016bff; position:absolute; left:0; top:0; opacity:0; transition:all .3s;}
.bindDeviceLayer .tab span:hover,
.bindDeviceLayer .tab span.current{color:#016bff;}
.bindDeviceLayer .tab span.current{background:#f7f7f7;}
.bindDeviceLayer .tab span.current:before{opacity:1;}
.bindDeviceLayer .tabContent{flex:1; height:100%; overflow:hidden;}
.bindDeviceLayer .changeBox{line-height:30px; padding:10px 20px 0; display:flex; justify-content:flex-end;}
.bindDeviceLayer .changeBox label{display:inline-flex; align-items:center; margin-left:20px;}
.bindDeviceLayer .changeBox label input{margin-right:4px;}
.bindDeviceLayer .deviceList{overflow:hidden; margin:0 10px 10px; height:calc(100% - 50px); font-size:0;}
.bindDeviceLayer .deviceList .item{display:inline-flex; vertical-align:top; align-items:center; width:calc(50% - 50px); height:44px; padding:10px 15px; background:#fff; border-radius:10px; margin:10px; overflow:hidden;}
.bindDeviceLayer .deviceList .item input[type="checkbox"]{margin-right:10px;}
.bindDeviceLayer .deviceList .item .con{flex:1; overflow:hidden;}
.bindDeviceLayer .deviceList .item .con h3{height:24px; line-height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px; font-weight:normal;}
.bindDeviceLayer .deviceList .item .con p{height:20px; line-height:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; color:#999;}
.bindDeviceLayer .deviceList .item .iconfont{display:block; width:16px; height:16px; line-height:16px; text-align:center; background:#f00; color:#fff; border-radius:50%; margin-left:10px; cursor:pointer; position:relative; overflow:hidden;}
.bindDeviceLayer .deviceList .item .iconfont:before{display:block; width:32px; height:32px; line-height:32px; font-size:20px; position:absolute; left:0; top:0; transform:scale(.5); transform-origin:left top;}

.deviceSelected{width:33.3333%; margin-left:40px; height:100%;}
.deviceSelectedList{display:flex; margin-top:20px; height:calc(100% - 52px); background:#f7f7f7; border-radius:3px; border:#b3d3ff 1px dashed;}
.deviceSelectedList .deviceListCon{width:100%;}
.bindDeviceLayer .deviceSelectedList .deviceList{height:calc(100% - 20px); margin:10px;}
.bindDeviceLayer .deviceSelectedList .deviceList .item{width:calc(100% - 50px);}


/* 搜索层组 */
.searchGroup{background:#fff; border-radius:10px; padding:15px 0 15px 20px; display:flex; flex-wrap:wrap;}
.searchGroup .item{width:calc(16.6666% - 20px); min-width:200px !important; padding:5px 20px 5px 0; display:flex; align-items:center; overflow-x:hidden;}
.searchGroup .dateRangeItem{ min-width:280px !important;}
.searchGroup .item.full {
    width: 100%;
    padding: 5px 0;
}
.searchGroup .item p{width:72px; text-align:right; line-height:30px; color:#666; white-space:nowrap;}
.searchGroup .itemCon{flex:1;}
.searchGroup .item .txt{width:calc(100% - 10px);}
.searchGroup .item .sele{width:calc(100% - 20px);}
.searchGroup .item .btn:not(:first-of-type){margin-left:10px;}

.searchGroup .item .dateRange{flex:1; height:28px; line-height:28px; padding:0 10px 0 34px; background:url(../images/cms/iDate.png) no-repeat 10px center; border:#d9d9d9 1px solid; border-radius:3px; display:flex; align-items:center; transition:all .3s;}
.searchGroup .item .dateRange:hover{border-color:#016bff;}
.searchGroup .item .dateRange .txt{width:70px; border:0; padding:0; text-align:center;}
.searchGroup .item .dateRange .txt:focus, .searchGroup .item .dateRange .txt:hover{border:0;}
.searchGroup .item .dateRange span{padding:0 5px; flex:1; text-align:center;}


/* 实景监测page */
.SeedlingPhotos{display:flex; flex-flow:column; flex:1; overflow:hidden;}
.SeedlingPhotos .tabContent{flex:1; display:flex; flex-flow:column; border-radius:10px; margin-top:20px; padding:20px 10px 0; overflow:hidden;}
.seedlingPhotoList{max-height:calc(100% - 50px); overflow:auto;}
.seedlingPhotoList ul{display:flex; flex-wrap:wrap; padding-left:10px;}
.seedlingPhotoList li{width:calc(25% - 20px); padding:0 20px 20px 0;}
.seedlingPhotoList li a{display:block; border:#e6e6e6 1px solid; padding:10px; border-radius:4px; cursor:default; color:#333;}
.seedlingPhotoList .pic{height:0; padding-top:66%; position:relative;}
.seedlingPhotoList .pic img{width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover; cursor:zoom-in;}
.seedlingPhotoList .pic span{display:block; height:20px; line-height:20px; padding:0 5px; font-size:12px; position:absolute; left:0; top:0; background:rgba(0,0,0,.5); color:#fff; border-radius:0 0 5px 0;}
.seedlingPhotoList .info{line-height:20px; padding-top:10px; display:flex; align-items:center; overflow:hidden;}
.seedlingPhotoList .info p{display:flex; flex-wrap:wrap; align-items:center; flex:1; overflow:hidden; line-height:20px; font-size:13px;}
.seedlingPhotoList .info p .iconfont{font-size:16px; padding-right:2px;}
.seedlingPhotoList .info .txt-btn{padding:0; margin-left:10px; font-size:18px;}
.seedlingPhotoList li a:hover{border-color:#b3d3ff;}


/* 实时监控page */
.videoArea{display:flex; padding:20px;}
.videoArea .video{flex:1; height:100%; object-fit:cover; overflow:hidden; background:#000; position:relative;}
.videoArea .video video{width:100%; height:100%; background:#000; object-fit:cover;}
.videoArea .video .playBtn{position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.videoArea .video .playBtn p{cursor:pointer; display:inline-block;}
.videoArea .video .playBtn p .iconfont{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:#fff 2px solid; border-radius:50%; margin:0 auto; font-size:20px; color:#fff;}
.videoArea .video .playBtn p span{display:block; height:20px; line-height:20px; padding-top:15px; font-size:16px; color:#fff;}

.videoControl{width:270px; height:100%; margin-left:20px; display:flex; flex-flow:column;}
.presetSet{display:flex; align-items:center; justify-content:space-between;}
.presetSet .btn{flex:1;}
.presetSet .btn:not(:first-of-type){margin-left:20px;}

.controlPanel{margin-top:20px; border:#e6e6e6 1px solid; padding:10px 15px 0; border-radius:10px;}
.controlTitle{line-height:24px; font-size:14px; color:#494949; display:flex; align-items:center;}
.videoDirection{width:165px; height:165px; padding:5px 4px 4px 5px; background:url(../images/videoDirectionBg.png) no-repeat center center; margin:0 auto; display:flex; flex-wrap:wrap; border-radius:50%; overflow:hidden;}
.videoDirection .item{width:55px; height:55px; position:relative;}
.videoDirection .item .txt-btn{width:24px; height:24px; line-height:24px; text-align:center; color:#494949; position:absolute; font-size:12px;}
.videoDirection .item:nth-of-type(1) .txt-btn{left:25px; top:30px;}
.videoDirection .item:nth-of-type(2) .txt-btn{left:17px; top:20px; font-size:24px;}
.videoDirection .item:nth-of-type(3) .txt-btn{right:25px; top:30px;}
.videoDirection .item:nth-of-type(4) .txt-btn{left:20px; top:17px; font-size:24px;}
.videoDirection .item:nth-of-type(5) .txt-btn{left:17px; top:17px; font-size:24px;}
.videoDirection .item:nth-of-type(6) .txt-btn{right:20px; top:17px; font-size:24px;}
.videoDirection .item:nth-of-type(7) .txt-btn{left:25px; bottom:30px;}
.videoDirection .item:nth-of-type(8) .txt-btn{left:17px; bottom:16px; font-size:24px;}
.videoDirection .item:nth-of-type(9) .txt-btn{right:25px; bottom:30px;}
.videoDirection .item .txt-btn:hover{color:#fa3239;}
.videoDirection #playBtn.play{color:#fa3239;}

.videoFocus{display:flex; align-items:center; padding:15px 0;}
.videoFocus p{flex:1; display:flex; align-items:center; height:28px; line-height:28px; border:#ccc 1px solid; border-radius:30px;}
.videoFocus p:not(:first-of-type){margin-left:15px;}
.videoFocus .txt-btn{display:block; height:28px; text-align:center; flex:1; font-size:18px;}
.videoFocus .txt-btn:hover{color:#016bff;}
.videoFocus p .txt-btn:not(:first-of-type){border-left:#ccc 1px dashed;}
.videoFocus p.zhuatu{flex:none;}
.videoFocus p.zhuatu .txt-btn{font-size:14px; padding:0 15px;}

.videoPreset{flex:1; border:#e6e6e6 1px solid; margin-top:20px; padding:10px 15px; overflow:auto; border-radius:10px;}
.presetList{display:flex; flex-wrap:wrap;}
.presetList .btn{margin:10px 10px 0 0; padding:0 10px;}

.eqInfo{height:130px; border:#e6e6e6 1px solid; margin-top:20px; padding:10px 15px; overflow:auto; border-radius:10px;}
.eqInfo p{padding:5px 0; line-height:20px; font-size:12px; vertical-align:top; color:#666;}


/* 拍照点设置弹出层 */
.setPresetLayer .item{display:flex; padding:10px 0;}
.setPresetLayer .item p{width:110px; height:30px; line-height:30px; padding-right:20px; color:#777;}
.setPresetLayer .item p span{padding-right:2px;}
.setPresetLayer .itemCon{flex:1;}
.setPresetLayer .itemCon textarea.txt{width:calc(100% - 10px);}


/* 拍照点列表弹出层 */
.presetListLayer ul{display:flex; flex-wrap:wrap; margin:0 -10px;}
.presetListLayer li{width:calc(33.3333% - 20px); padding:20px 10px 0;}
.presetListLayer li .pic{height:260px; overflow:hidden; display:flex; align-items:center; justify-content:center; border-radius:8px 8px 0 0;}
.presetListLayer li .pic img{width:100%; height:100%; object-fit:cover; cursor:zoom-in;}
.presetListLayer li .text{padding:0 15px; height:50px; line-height:50px; display:flex; align-items:center; background:#f7f7f7; border-radius:0 0 8px 8px; overflow:hidden;}
.presetListLayer li .text p{flex:1; height:50px; font-size:16px;}
.presetListLayer li .text .txt-btn{margin-left:5px; font-size:18px;}


/* 监控模式page */
.monitoring{padding:20px; display:flex;}
.monitoringLeft{width:180px; height:100%; display:flex; flex-flow:column; overflow:hidden;}
.monitoringSearch .txt{width:calc(100% - 10px); padding:0 4px;}
.monitoringTree{flex:1; overflow:auto; margin:20px 0 40px;}
.monitoringTree .item{padding:5px; transition:all .3s; border-radius:5px;}
.monitoringTree .item h3{line-height:24px; font-size:16px; font-weight:normal; display:flex; align-items:center; cursor:pointer;}
.monitoringTree .item h3 .iconfont{display:block; width:20px; height:20px; line-height:20px; transition:all .3s; font-size:14px;}
.monitoringTree .item h3 span{display:block; flex:1; height:24px; line-height:24px;}
.monitoringTree .item h3.open .iconfont{transform:rotate(90deg);}
.monitoringTree .item ul{display:none;}
.monitoringTree .item li{padding-left:20px; font-size:14px; line-height:24px; margin-top:5px; cursor:pointer;}
.monitoringTree .item:hover{background:#f7f7f7;}
.monitoringTree .item li:hover{color:#f90;}
.monitoringTree .item li.current, .monitoringTree .item li.current:hover{color:#016bff;}

.monitoringRight{flex:1; height:100%; overflow:hidden; margin-left:20px; display:flex; flex-flow:column;}
.monitoringRight .item{width:100%; height:100%; position:relative; flex-shrink:0; overflow:hidden;}
.monitoringRight .n1{grid-template-columns:1fr; grid-template-rows:1fr;}
.monitoringRight .n2{grid-template-columns:1fr; grid-template-rows:1fr 1fr;}
.monitoringRight .n3{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;}
.monitoringRight .n4{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;}
.monitoringRight .n5{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr;}
.monitoringRight .n6{grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr;}
.monitoringRight .n7{grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr;}
.monitoringRight .n8{grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr;}
.monitoringRight .n9{grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr;}
.monitoringRight .n10{grid-template-columns:1fr 1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr 1fr;}

/* 监控网格 */
.monitoringGrid{flex:1; overflow:hidden; display:grid; gap:10px;}
.monitoringGrid .item{background:#000; overflow:hidden;}
.monitoringGrid .itemCon{width:100%; height:100%; position:relative;}
.monitoringGrid .videoControlHead{width:calc(100% - 20px); height:48px; line-height:48px; background:rgba(0,0,0,.25); position:absolute; left:0; top:0; color:#fff; padding:0 10px; display:flex; align-items:center; z-index:2;}
.monitoringGrid .videoControlHead p{flex:1; font-size:16px;}
.monitoringGrid .videoControlHead .txt-btn{width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:18px;}
.monitoringGrid .video{width:100%; height:100%; position:relative; z-index:0;}
.monitoringGrid .video video{width:100%; height:100%; object-fit:cover;}
.monitoringGrid .videoControlFoot{width:calc(100% - 20px); height:48px; background:rgba(0,0,0,.25); position:absolute; left:0; bottom:0; color:#fff; padding:0 10px; display:flex; align-items:center; z-index:2;}
.monitoringGrid .videoControlFoot p{flex:1; display:flex; align-items:center;}
.monitoringGrid .videoControlFoot .txt-btn{display:flex; align-items:center; justify-content:center; width:40px; height:40px; font-size:20px;}
.monitoringGrid .videoControlDirection{display:none; position:absolute; right:30px; top:50%; transform:translateY(-50%); width:100px; height:100px; overflow:hidden; border:#fff 1px solid; background:#dcdfe0; border-radius:50%; z-index:2;}
.monitoringGrid .videoControlDirection:after{position:absolute; content:""; left:50%; top:50%; transform:translate(-50%, -50%); width:40px; height:40px; background:#fff; border-radius:50%; cursor:default;}
.monitoringGrid .videoControlDirection .btn{left:0; top:0; width:100%; height:100%; position:absolute; clip-path:polygon(0 0, 100% 0, 50% 50%); background:#dcdfe0; border:0; display:flex; justify-content:center; padding:0;}
.monitoringGrid .videoControlDirection .btn .iconfont{color:#a8acad;}
.monitoringGrid .videoControlDirection .btn:nth-of-type(2){transform: rotate(90deg);}
.monitoringGrid .videoControlDirection .btn:nth-of-type(3){transform: rotate(180deg);}
.monitoringGrid .videoControlDirection .btn:nth-of-type(4){transform: rotate(270deg);}
.monitoringGrid .videoControlDirection .btn:hover{background:linear-gradient(90deg, #dcdfe0, #fff); opacity:1;}
.monitoringGrid .item .playerBtn{display:flex; flex-flow:column; align-items:center; justify-content:center; width:100%; position:absolute; left:0; top:48px; bottom:48px; z-index:10; color:#fff; cursor:pointer;}
.monitoringGrid .item .playerBtn .iconfont{font-size:54px;}
.monitoringGrid .item .playerBtn p{padding-top:15px; font-size:16px; text-shadow:0 1px 2px rgba(0,0,0,.6);}

/* 监控网格排列方式 */
.monitoringBtn{display:flex; justify-content:flex-end; height:30px; margin-top:10px;}
.monitoringBtn .item{display:grid; gap:1px; margin-left:10px; width:30px; height:30px; cursor:pointer;}
.monitoringBtn .item p{background:#909399;}
.monitoringBtn .item.current p{background:#016bff;}

.monitoringGrid.n3 .item:first-of-type, .monitoringBtn .item.n3 p:first-of-type{grid-column:span 2;}
.monitoringGrid.n5 .item:first-of-type, .monitoringBtn .item.n5 p:first-of-type{grid-row:span 3;}
.monitoringGrid.n6 .item:first-of-type, .monitoringBtn .item.n6 p:first-of-type{grid-row:span 2; grid-column:span 2;}
.monitoringGrid.n7 .item:nth-of-type(1), .monitoringBtn .item.n7 p:nth-of-type(1),
.monitoringGrid.n7 .item:nth-of-type(2), .monitoringBtn .item.n7 p:nth-of-type(2),
.monitoringGrid.n7 .item:nth-of-type(3), .monitoringBtn .item.n7 p:nth-of-type(3){grid-row:span 2; grid-column:span 2;}
.monitoringGrid.n8 .item:first-of-type, .monitoringBtn .item.n8 p:first-of-type{grid-row:span 3; grid-column:span 3;}
.monitoringGrid.n10 .item:first-of-type, .monitoringBtn .item.n10 p:first-of-type{grid-row:span 4; grid-column:span 4;}


/* 墒情监测page */
.soilMoisture{flex:1; margin-top:20px; display:flex; flex-flow:column;}
.lastSoilMoisture{display:flex; overflow:hidden;}

/* 实时气象数据 */
.lastWeather, .lastSoil{padding:20px; background:#fff; border-radius:10px;}
.lastWeather{width:calc(45% - 20px);  margin-left:20px;}
.lastWeatherList{height:264px; margin:0 -10px;}
.lastWeather ul{display:flex; flex-wrap:wrap;}
.lastWeather li{width:calc(33.3333% - 20px); min-width:150px; height:58px; padding:15px 10px; display:flex; align-items:center;}
.lastWeather li .iconfont{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; font-size:32px; color:#ccc; border:#ccc 1px solid;}
.lastWeather li p{flex:1; padding-left:12px; color:#999; line-height:20px; font-size:12px;}
.lastWeather li p span{display:block; height:30px; line-height:30px; font-size:24px; color:#333;}
.lastWeather li p span i{font-size:14px; font-style:normal; padding-left:2px;}
.lastWeather li.lightPurple .iconfont{color:#c98dd3; border:#c98dd3 1px solid;}
.lastWeather li.lightBlue .iconfont{color:#87a0fb; border:#87a0fb 1px solid;}
.lastWeather li.brightCyan .iconfont{color:#46c6d6; border:#46c6d6 1px solid;}
.lastWeather li.brightGreen .iconfont{color:#91c954; border:#91c954 1px solid;}
.lastWeather li.amber .iconfont{color:#fab91c; border:#fab91c 1px solid;}
.lastWeather li.tomato .iconfont{color:#fd8a6b; border:#fd8a6b 1px solid;}

/* 实时土壤数据 */
.lastSoil{flex:1;}
.lastSoilList{height:264px; margin:0 -10px;}
.lastSoil ul{display:flex; flex-wrap:wrap;}
.lastSoil li{width:calc(25% - 20px); height:54px; padding:16px 10px;}
.lastSoil li h3{height:34px; line-height:34px; font-size:22px; font-weight:normal; color:#ccc;}
.lastSoil li h3 i{padding-left:2px; font-size:14px; font-style:normal;}
.lastSoil li p{height:20px; line-height:20px; font-size:12px; color:#999;}
.lastSoil li.lightPurple  h3{color:#c98dd3;}
.lastSoil li.lightBlue h3{color:#87a0fb;}
.lastSoil li.brightCyan h3{color:#46c6d6;}
.lastSoil li.brightGreen h3{color:#91c954;}
.lastSoil li.amber h3{color:#fab91c;}
.lastSoil li.tomato h3{color:#fd8a6b;}

/* 暂无数据 */
.notData{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:16px; color:#999;}

/* 今日图表 */
.todaySoil{padding:0 20px; background:#fff; margin-top:20px; border-radius:10px; flex:1;}
.todaySoil .zUIpanelScrollBox, .todaySoil .zUIpanelScrollBar{right:10px; top:10px; bottom:10px;}
.dataChart{width:calc(100% - 40px); min-height:320px;}
.chartBox{padding:12px 0;}
.todayChart{height:320px;}

/* 今日图表tooltip层 */
.chartsTooltipTitle{line-height: 30px;font-size: 16px;}
.chartsTooltipItem{display:flex; align-items:center; line-height:24px; white-space:nowrap; font-size:14px;}
.chartsTooltipMarker{width:5px; height:5px; border-radius:5px;}
.chartsTooltipKey{padding-left:5px; min-width:80px;}
.chartsTooltipValue{padding-left:10px; text-align:right; flex:1;}
.chartsTooltipUnit{min-width:40px; padding-left:4px;}


.soilMoistureHistory{display:flex; flex-flow:column;}
.historyDataTab{display:flex; align-items:center; margin-top:20px; padding:0 15px;}
.historyDataTab span{display:block; padding:0 20px; height:40px; line-height:40px; font-size:16px; cursor:pointer;}
.historyDataTab span.current{background:#fff; border-radius:10px 10px 0 0;}
.soilMoistureHistory .tabContent{background:#fff; border-radius:10px; padding:10px; flex:1; overflow:hidden;}
.soilMoistureHistory .tabContent .freezeBox{max-height:calc(100% - 63px);}
.dataListBox{height:100%;}
.dataChartBox{height: calc(100% - 20px); padding:10px;}