body { background-color: #6CA7A8; color: #FFF; } .head { width: 100%; height: 5%; display: flex; } label { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 150px; font-size: 20px; color: #FFF; } label:active { border-top: 3px solid rgb(239, 177, 102); border-right: 1px solid #FFF; border-left: 1px solid #FFF; } /*label:checked {*/ /* border-top: 3px solid rgb(239, 177, 102);*/ /* border-right: 1px solid #FFF;*/ /* border-left: 1px solid #FFF;*/ /*}*/ .body { height: 75%; width: 100%; border-top: 1px solid #FFF; background-color: #5D7677; display: flex; align-items: center; justify-content: center; } .canves { width: 90%; height: 648px; /*width: 1152px;*/ /*height: 648px;*/ background-image: url("monitor/img/background.png"); background-repeat: no-repeat; background-size:100% 100%; } .canves-header { position: relative; height: 10%; width: 100%; } .button-left { position: absolute; margin-left: 21.4%; margin-top: 0.8%; width: 13.3%; height: 90%; background-image: url('monitor/img/right.png'); background-size: 100% 100%; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); /*filter: FlipH;*/ /*background-color: white;*/ } .button-right { position: absolute; margin-left: 65.1%; margin-top: 0.8%; width: 13.3%; height: 90%; background-image: url('monitor/img/right.png'); background-size: 100% 100%; } .canves-title { text-align: center; font-size: 28px; line-height: 60px; } .time-tools { position: absolute; top: 85px; left: 1560px; width: auto; height: 10%; text-align: center; } /*主体*/ .container{ height: 90%; /*background-color: #074b0f;*/ } .container-element-side { float: left; width: 24%; height: 100%; padding: 1%; box-sizing: border-box; } .container-side-box { position: relative; height: 100%; width: 100%; border: 1px solid rgba(20, 80, 136, 1); padding: 15px; box-sizing: border-box; } /* 左 */ /*左上*/ .english { font-size: xx-small; color: #999; } .introduce { height: 30%; } .introduce-content { text-indent: 2em; margin-top: 13px; height: 150px; width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; opacity: 0.7; } /*左中*/ .charge-info { height: 60%; } .info-header { height: 15%; } .info-header h6 { letter-spacing: 3px; } .charge-info-elem { height: 20%; } .charge-info-elem img { display: inline-block; height: 100%; width: 30%; vertical-align: middle; padding: 10px 25px 10px 5px; } .info-detail { display: inline-block; height: 100%; width: 65%; vertical-align: middle } .real-data { width: 100%; height: 60%; position: relative; } .real-data .count { position: absolute; left: 0%; bottom: 0; font-size: x-large; } .real-data .unit { position: absolute; right: 0; bottom: 0; font-size: x-small; opacity: 0.7; } .content { width: 100%; height: 40%; font-size: x-small; opacity: 0.7; } /*左下*/ .footer { position: relative; background-color: #063a7b; height: 10%; text-align: center; } .footer span { position: absolute; left: 18%; top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); /*兼容-webkit-引擎浏览器*/ -moz-transform:translateY(-50%); /*兼容-moz-引擎浏览器*/ overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } .footer img { position: absolute; right: 0; top: 0; height: 100%; width: auto; } /* 中 */ .container-element-middle { float: left; width: 52%; height: 100%; padding: 1.2% 1% 1.5% 1%; box-sizing: border-box; } .map-board{ height: 100%; width: 100%; border: 1px solid rgba(20, 80, 136, 1); position: relative; background-color: rgba(3, 36, 85, 0.4); /*针对其他浏览器*/ filter: Alpha(Opacity=50); /* 针对IE*/ } /*右*/ /*右上*/ .container-side-box.right-top { height: 30%; margin-bottom: 5%; } .line-chart-title { height: 30%; } .order-report { position: relative; height: 50%; } .order-report .order-report-left { letter-spacing: 2px; position: absolute; left: 0; bottom: 0; } .order-report .order-report-right { letter-spacing: 2px; font-size: x-large; position: absolute; transform-origin: 0 100%; right: 0; bottom: 0; } .order-report-english { position: relative; height: 50%; } .order-report-english .order-report-left { letter-spacing: 2px; color: #999; font-size: xx-small; transform: scale(0.50); -webkit-transform: scale(0.50); transform-origin: 0 0; -webkit-transform-origin: 0 0; position: absolute; left: 0; top: 0; } .order-report-english .order-report-right { font-size: xx-small; color: #999; transform: scale(0.50); -webkit-transform: scale(0.50); transform-origin: 100% 0; -webkit-transform-origin: 100% 0; position: absolute; right: 0; top: 0; } #line-charts { height: 70%; } /*右中*/ .container-side-box.right-middle { height: 50%; margin-bottom: 5%; } .top-header { height: 20%; } .income-date { position: relative; height: 50%; } .income-date .income-date-left { letter-spacing: 2px; position: absolute; left: 0; bottom: 0; } .income-date .income-date-right { letter-spacing: 2px; font-size: large; position: absolute; transform-origin: 0 100%; right: 0; bottom: 0; } .income-date-english { position: relative; height: 50%; } .income-date-english .income-date-left { letter-spacing: 2px; color: #999; font-size: xx-small; transform: scale(0.50); -webkit-transform: scale(0.50); transform-origin: 0 0; -webkit-transform-origin: 0 0; position: absolute; left: 0; top: 0; } .income-date-english .income-date-right { font-size: xx-small; color: #999; transform: scale(0.50); -webkit-transform: scale(0.50); transform-origin: 100% 0; -webkit-transform-origin: 100% 0; position: absolute; right: 0; top: 0; } .top-main { height: 40%; } #pie-charts { height: 100%; } .top-footer { height: 40%; } .top-footer-elem { float: left; width: 33.33%; height: 100%; } .elem-header { height: 60%; background-repeat: no-repeat; background-position: 45% 50%; background-size: 50% auto; } #elem-header-first { background-image: url("../img/g1.png"); } #elem-header-second { background-image: url("../img/f1.png"); } #elem-header-third { background-image: url("../img/e1.png"); } .elem-main { height: 20%; text-align: center; font-size: small; opacity: 0.7; padding: 4px 0; } .elem-footer { height: 20%; text-align: center; letter-spacing: 2px; } /*右下*/ .container-side-box.right-bottom { height: 15%; } .progress-bar { height: 60%; } .usage-rate { position: relative; height: 50%; } .usage-rate .usage-rate-left { letter-spacing: 2px; position: absolute; left: 0; bottom: 0; } .usage-rate .usage-rate-right { letter-spacing: 2px; font-size: large; position: absolute; transform-origin: 0 100%; right: 0; bottom: 0; } .usage-rate .usage-rate-right span { letter-spacing: 2px; font-size: large; } .usage-rate-english { position: relative; height: 50%; } .usage-rate-english .usage-rate-left { letter-spacing: 2px; color: #999; font-size: xx-small; transform: scale(0.50); -webkit-transform: scale(0.50); transform-origin: 0 0; -webkit-transform-origin: 0 0; position: absolute; left: 0; top: 0; } .usage-rate-english .usage-rate-right { font-size: xx-small; color: #999; transform: scale(0.50); -webkit-transform: scale(0.50); transform-origin: 100% 0; -webkit-transform-origin: 100% 0; position: absolute; right: 0; top: 0; } .progress-bar-modal { height: 30%; padding-top: 1%; } .bar-container { width: 70%; height: 100%; background-color: #233751; vertical-align: middle; display: inline-block; } .bar-proportion { width: 60%; height: 100%; background-color: #e77b2c; position: relative; } .bar-proportion span { font-size: xx-small; position: absolute; right: 5%; top: 45%; transform:translateY(-50%); -webkit-transform:translateY(-50%); /*兼容-webkit-引擎浏览器*/ -moz-transform:translateY(-50%); /*兼容-moz-引擎浏览器*/ opacity: 0.8; } .bar-container-count, .bar-container-count span { float: right; color: #e77b2c; vertical-align: middle; font-size: 18px; } /*边框*/ .image-border { position: absolute; width: 5px; height: 5px; } .image-border1 { top: 0; left: 0; border-left: 2px solid #31c4c4; border-top: 2px solid #31c4c4; /*transform: scale(0.5)*/ } .image-border2 { top: 0; right: 0; border-right: 2px solid #31c4c4; border-top: 2px solid #31c4c4; } .image-border3 { bottom: 0; left: 0; border-bottom: 2px solid #31c4c4; border-left: 2px solid #31c4c4; } .image-border4 { bottom: 0; right: 0; border-right: 2px solid #31c4c4; border-bottom: 2px solid #31c4c4; } /*地图*/ .anchorBL img{ display: none; } .BMap_cpyCtrl.BMap_noprint.anchorBL { display: none; } .ec-extension-bmap{ border-radius:15px; } /*遮罩*/ #detail-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 1; display: none; } #closeBtn { font-size: large; float: right; background-color: black; color: white; border: none; padding: 10px 15px; outline: none; cursor: pointer; } #closeBtn:hover { background-color: white; color: black; } #detail-modal ul { position: absolute; top: 20%; left: 50%; transform: translate(-50%, 0); list-style-type: none; } #detail-modal li { font-size: large; padding: 20px; } .animationTop { -webkit-animation: animationTop 0.4s; animation: animationTop 0.4s; } @-webkit-keyframes animationTop { from { top: -500px; opacity: 0; } to { top: 0; opacity: 1; } } @keyframes animationTop { from { top: -500px; opacity: 0; } to { top: 0; opacity: 1; } } .item-img { background-size: 100% 100%; } #img-1 { background-image: url(monitor/img/banner/banner1.jpg); } #img-2 { background-image: url(monitor/img/banner/banner2.jpg); } #img-3 { background-image: url(monitor/img/banner/banner3.jpg); } #img-4 { background-image: url(monitor/img/banner/banner4.jpg); } #img-5 { background-image: url(monitor/img/banner/banner5.jpg); } .crn-speed { width: 100%; height: 75%; position: absolute; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: -15%; /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/ } .crn-speed span { display:inline-block; margin:20px auto; font-size:56px; font-family:'Pacifico',serif } .speed-content { height: 100%; } .speed-chart { float: left; width: 100%; height: 100%; } .scroll-pane { position: absolute; top: 42%; width: 100%; height: 58%; } .scroll-bar { float: left; width: 50%; height: 100%; text-align: center; } .scroll-header span { font-size:64px; font-family:'Pacifico',serif } .scroll-content { animation:anis 10s linear infinite; padding: 200px 10px 20px 10px; font-family:'Pacifico',serif; overflow:hidden; } .scroll-content:last-child { border-left: 1px solid rgba(0, 0, 0, 0.3); } .scroll-content:hover { animation-play-state:paused; } @keyframes anis { 100% { transform:translateY(-200px) } } #led-content { display: none; } #led-p-content { text-align: center; padding: 20px 40px; font-size: 35px; font-weight: bold; /*color: #FF5722;*/ }