.tit-wrap[data-v-b08e27e8]{padding:20px 23px 0 23px}.tit-wrap.shrink[data-v-b08e27e8]{padding:0 23px}.tit-wrap.isClose[data-v-b08e27e8]{min-height:50px!important;max-height:50px!important;height:50px!important;overflow:hidden}.tit-wrap .title[data-v-b08e27e8]{display:flex;justify-content:space-between;align-items:center}.tit-wrap .title>div[data-v-b08e27e8]{height:30px;line-height:30px;display:flex;align-items:center;font-size:16px;flex:1}.tit-wrap .title>div img[data-v-b08e27e8]{margin-right:7px}.tit-wrap .title>div span[data-v-b08e27e8]{margin-right:9px}.tit-wrap .title>div .extend-box[data-v-b08e27e8]{display:flex;flex:1;height:30px;line-height:30px;align-items:center;margin-right:10px}.tit-wrap .title i[data-v-b08e27e8]{color:var(--normal);transition:transform .5s ease;cursor:pointer}.tit-wrap .title i[data-v-b08e27e8]:hover{color:var(--hover)}.tit-wrap .title i.active[data-v-b08e27e8]{transform:rotate(180deg)}.centerBox[data-v-9dc94c2e]{position:relative;box-sizing:border-box;width:100%;height:100%;color:var(--text)}.centerBox.has-head-menu[data-v-9dc94c2e]{height:calc(100% - 81px);width:calc(100% - 48px);padding-left:0!important;margin:0 24px}.centerBox_corner[data-v-9dc94c2e]{position:absolute;left:-9px;top:-9px;right:-9px;bottom:-9px;background:var(--bg-centerBox) no-repeat 0 0,var(--bg-centerBox) no-repeat 100% 0,var(--bg-centerBox) no-repeat 0 100%,var(--bg-centerBox) no-repeat 100% 100%}.centerBox_border[data-v-9dc94c2e]{width:100%;height:100%;box-sizing:border-box;border:1px solid var(--component-border);background:var(--component-bg);box-shadow:var(--component-box-shadow2)}.centerBox_inner[data-v-9dc94c2e]{position:absolute;left:9px;top:9px;right:9px;bottom:9px;box-sizing:border-box;font-size:14px}.centerBox_inner-head[data-v-9dc94c2e]{position:relative;width:100%;box-sizing:border-box;text-align:center;font-size:16px;font-weight:700;height:36px;line-height:36px;background:var(--component-title-bg)}.centerBox_inner-content[data-v-9dc94c2e]{position:relative;width:100%;height:100%}.centerBox_border1[data-v-9dc94c2e]{box-shadow:inset 0 0 6px 0 var(--component-border)}.hasTitle .centerBox_inner[data-v-9dc94c2e]{top:20px;left:16px;right:16px;bottom:0}.hasTitle .centerBox_inner-content[data-v-9dc94c2e]{position:relative;width:100%;height:calc(100% - 36px)}.hasTap .centerBox_inner[data-v-9dc94c2e]{top:0;left:0;right:0;bottom:0}.hasTap .centerBox_inner-content[data-v-9dc94c2e]{position:relative;width:100%;height:100%}.hasNav .centerBox_inner[data-v-9dc94c2e]{top:20px;left:16px;right:16px;bottom:0}.back-btn[data-v-9dc94c2e]{position:absolute;right:5px;top:0;height:100%;display:flex;align-items:center}.hcc-frame-shape[data-v-9dc94c2e]{position:absolute;width:10px;height:10px;z-index:1}.hcc-frame-shape.shape1[data-v-9dc94c2e]{left:0;top:0}.hcc-frame-shape.shape2[data-v-9dc94c2e]{top:0;right:0;transform:rotate(90deg)}.hcc-frame-shape.shape3[data-v-9dc94c2e]{left:0;bottom:0;transform:rotate(-90deg)}.hcc-frame-shape.shape4[data-v-9dc94c2e]{right:0;bottom:0;transform:rotate(-180deg)}.hcc-frame-shape[data-v-9dc94c2e] .shape-group{position:relative;width:10px;height:10px}.hcc-frame-shape[data-v-9dc94c2e] .shape-group .delta{position:absolute;display:inline-block;width:0;height:0;left:2px;top:2px;border-top:4px solid var(--normal);border-right:4px solid transparent}.hcc-frame-shape[data-v-9dc94c2e] .shape-group .line1{height:3.5px;width:1px;background:var(--normal);position:absolute;left:0;top:0}.hcc-frame-shape[data-v-9dc94c2e] .shape-group .line1:before{content:"";position:absolute;left:0;top:3.5px;width:0;height:0;border-top:2px solid var(--normal);border-right:1px solid transparent}.hcc-frame-shape[data-v-9dc94c2e] .shape-group .line1:after{content:"";position:absolute;left:6px;top:0;width:2.5px;height:1px;background:var(--normal-percent-50);transform:skew(-64deg)}.hcc-frame-shape[data-v-9dc94c2e] .shape-group .line2{height:1px;width:3.5px;background:var(--normal);position:absolute;left:0;top:0}.hcc-frame-shape[data-v-9dc94c2e] .shape-group .line2:before{content:"";position:absolute;top:0;left:3.5px;width:0;height:0;border-top:1px solid var(--normal);border-right:2px solid transparent}.hcc-frame-shape[data-v-9dc94c2e] .shape-group .line2:after{content:"";position:absolute;top:6px;left:0;height:2.5px;width:1px;background:var(--normal-percent-50);transform:skewY(-64deg)}.RealTimeMonitoring[data-v-0c366570]{height:100%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding-left:23px}.RealTimeMonitoring .dataBox[data-v-0c366570]{height:113px;width:100%;display:flex;justify-content:space-around}.RealTimeMonitoring .dataBox .dataPanel[data-v-0c366570]{width:211px;height:100%;background-image:url(../img/dataPanel.f282f2a1.png);background-size:100% 100%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:18px 0 10px}.RealTimeMonitoring .dataBox .dataPanel-title[data-v-0c366570]{font-size:12px;opacity:.8}.RealTimeMonitoring .dataBox .dataPanel-value[data-v-0c366570]{font-size:30px;font-family:DIN}.RealTimeMonitoring .dataBox .dataPanel-value span[data-v-0c366570]{font-size:16px;margin-left:5px}.RealTimeMonitoring .WaterLevelElevation[data-v-0c366570]{height:372px;width:538px;background-image:url(../img/WaterLevelElevation.8ae65366.png);background-size:100% 100%}.RealTimeMonitoring .WaterLevelElevation-content[data-v-0c366570]{height:calc(100% - 85px);position:relative}.RealTimeMonitoring .WaterLevelElevation-elevation[data-v-0c366570]{height:0;width:559px;border-top:1px dashed #f74e66;color:#f74e66;font-size:12px;position:absolute;bottom:80%;left:50%;transform:translateX(-50%)}.RealTimeMonitoring .WaterLevelElevation-elevation span[data-v-0c366570]{position:absolute;top:50%;transform:translateY(-50%);left:-85px}.RealTimeMonitoring .WaterLevelElevation-waterLevel[data-v-0c366570]{width:100%;height:100%}.RealTimeMonitoring .WaterLevelElevation-waterLevel_water[data-v-0c366570]{width:100%;height:100%;background:linear-gradient(0deg,rgba(15,163,248,0),#0fa3f8 187px);position:absolute;bottom:0;left:0}.RealTimeMonitoring .WaterLevelElevation-waterLevel_water.isAlert[data-v-0c366570]{background:linear-gradient(0deg,rgba(247,78,102,0),#f74e66 187px)}.RealTimeMonitoring .WaterLevelElevation-waterLevel[data-v-0c366570]{clip-path:polygon(60px 0,calc(100% - 62px) 0,calc(100% - 262px) 100%,270px 100%)}.RealTimeMonitoring .WaterLevelElevation-text[data-v-0c366570]{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center}.RealTimeMonitoring .WaterLevelElevation-text_title[data-v-0c366570]{font-size:12px}.RealTimeMonitoring .WaterLevelElevation-text_value[data-v-0c366570]{font-size:20px;font-family:DIN;color:#0fa3f8;margin-left:5px}.RealTimeMonitoring .WaterLevelElevation-text_value span[data-v-0c366570]{font-size:12px}.WaterLevelChange[data-v-4dd108e5]{width:100%;height:100%;padding-left:23px}.WaterLevelChange-form[data-v-4dd108e5]{height:30px;text-align:right;position:relative}.WaterLevelChange-charts[data-v-4dd108e5]{height:calc(100% - 30px)}.WaterLevelChange-legend[data-v-4dd108e5]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center}.WaterLevelChange-legend_line[data-v-4dd108e5]{border:1px dashed #f74e66;width:44px;height:0;margin-right:4px}.v-charts-component-loading{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;background-color:hsla(0,0%,100%,.9)}.v-charts-mask-status{filter:blur(1px)}.v-charts-component-loading .circular{width:42px;height:42px;animation:loading-rotate 2s linear infinite}.v-charts-component-loading .path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#20a0ff;stroke-linecap:round}@keyframes loading-rotate{to{transform:rotate(1turn)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.v-charts-data-empty{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;background-color:hsla(0,0%,100%,.9);color:#888;font-size:14px}.container[data-v-1eeb8365]{height:100%}.container .content[data-v-1eeb8365]{height:calc(100% - 50px)}.container .charts[data-v-1eeb8365]{height:100%}.container .charts .charts-top[data-v-1eeb8365]{height:45%}.container .charts .charts-bottom[data-v-1eeb8365]{height:55%}.container[data-v-1eeb8365] .v-charts-mask-status{opacity:0}.container[data-v-1eeb8365] .v-charts-data-empty{background-color:transparent;color:var(--text)}