.main { overflow: hidden; position: relative; background: #f0f1f3; transition: all 0.5s; background: url("../images/map.png") no-repeat; } .map { width: 100%; height: 100%; } .switch { text-align: center; position: absolute; right: 10px; top: 8px; } .switch a, .control-switch a { width: 30px; height: 14px; display: inline-block; margin: 3px auto 0 6px; position: relative; border-radius: 80px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background: #4e7bad; } .control-switch a { margin-top: 8px; } .switch a:after, .control-switch a:after { content: ""; display: block; position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; background: #ffffff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; border-radius: 50%; } .switch-on a:after, .control-switch-on a:after { right: auto; left: 1px; } .switch-on a, .control-switch-on a { background: -webkit-linear-gradient(#febe54, #faa920); background: -o-linear-gradient(#febe54, #faa920); background: -moz-linear-gradient(#febe54, #faa920); background: linear-gradient(#35a1fd, #0367c4, #7bebff); } .particle-switch, .label-switch { position: absolute; top: auto; right: 236px; bottom: 20px; z-index: 2000; color: #ffffff; } .label-switch { right: 125px; } .right { width: 286px; height: calc(100% - 58px); position: absolute; top: 54px; right: 0; z-index: 999; transition: all 0.5s; background: #002145; } .right-title { height: 40px; margin-bottom: 3px; padding: 10px 6px 0 6px; position: relative; } .right-title:before { content: ''; width: 286px; height: 1px; display: block; position: absolute; top: 38px; left: 0; z-index: 9; background: #234979; } .right-title a { width: 150px; height: 29px; float: left; line-height: 29px; text-align: center; position: absolute; z-index: 8; background: url(../images/bg.png) no-repeat center/cover; } .right-title a:last-child { left: 128px; } .right-title a.active { z-index: 10; color: #ffffff; background: url(../images/bg-current.png) no-repeat center/cover; } .right-toggle { right: -286px; transition: all 0.5s; } .title { position: relative; padding-left: 10px; background-color: #093463; } .title h2 { line-height: 36px; padding-left: 20px; background: url("../images/icon-param.png") no-repeat left center; } .second-title { padding-left: 10px; position: relative; } .second-title h2 { line-height: 30px; } .second-title .switch { top: 7px; } .calc-title h2 { background: url("../images/icon-calc.png") no-repeat left center; } .monitor-title h2 { background: url("../images/icon-monitor.png") no-repeat left center; } .time-title h2 { background: url("../images/time-icon.png") no-repeat left center; } .label-title h2 { background: url("../images/label-icon.png") no-repeat left center; } .result-title h2 { background: url("../images/icon-result.png") no-repeat left center; } .forecast-title { border-bottom: 0; } .forecast-title h2 { background: url("../images/icon-forecast.png") no-repeat left center; } .param { display: none; } .param-content { padding: 10px 0 8px 10px; } .param-type { display: inline-block; border-radius: 3px; border-left: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5; overflow: hidden; } .param-type a { width: 74px; float: left; line-height: 28px; text-align: center; color: #868686; overflow: hidden; position: relative; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; } .param-type a.spread { background: url('../images/divider-line.png') no-repeat left; } .param-type a.action { border-top: 1px solid #fdbe56; border-bottom: 1px solid #f59c05; color: #FFFFFF; position: relative; z-index: 10; } .param-type a.action:before { content: ''; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1; background: -webkit-linear-gradient(#febc50, #faad2d, #f69c04); background: -moz-linear-gradient(#febc50, #faad2d, #f69c04); background: -o-linear-gradient(#febc50, #faad2d, #f69c04); background: linear-gradient(#febc50, #faad2d, #f69c04); } .param-text { margin-bottom: 10px; } .param-text label { width: 108px; margin-right: 4px; display: block; text-align: right; float: left; line-height: 30px; } .param-input { width: 152px; position: relative; } .param-input i { width: 98%; height: 1px; margin-left: 1%; display: block; position: absolute; top: 1px; left: 0; border-radius: 5px; overflow: hidden; background: #dddddd; } .param-input input, .param-input .textbox{ width: 100%; height: 28px; line-height: 28px; text-align: center; border: 1px solid #234979; border-radius: 3px; color: #ffffff; font-size: 14px; background-color: #03244c; box-shadow: 0 0 10px rgba(48, 112, 194, 0.25) inset; } .param-input .textbox .textbox-text { text-align: left; } .degree-param-input { display: flex; justify-content: space-between; } .degree-param-input input { width: 47px; } .degree-text { padding-left: 112px; margin-top: -5px; margin-bottom: 10px; display: none; } .degree-text-error { color: #f70000; } .reset-input input { width: 73px; } .param-category { width: 152px; margin-left: 112px; } .param-category span { width: 73px; text-align: center; margin-bottom: 10px; } .history-time .param-input { width: 156px; } .history-time .param-input .textbox { width: 156px !important; } .history-time .param-input .textbox-text { width: 128px !important; } .param-label { margin-top: 10px; margin-bottom: 0; } .param-label .param-input { width: 172px; } .param-label button, .realtime-btn { width: 86px; height: 28px; margin-left: 7px; line-height: 25px; } .realtime-btn { display: inline-block; margin-left: 0; } .label-shade { position: relative; } .label-shade:before { content: ''; width: 266px; height: 28px; display: block; position: absolute; top: 0; left: 0; z-index: 100; background: rgba(0,33,69,0.8); } .label-list a { width: 82px; line-height: 28px; padding-left: 10px; padding-right: 15px; margin: 10px 10px 0 0; float: left; position: relative; border: 1px solid #234979; border-radius: 3px; background: #03244c; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-shadow: 0 0 10px rgba(48, 112, 194, 0.25) inset; } .label-list a:nth-child(3n) { margin-right: 0; } .label-list span { width: 15px; height: 28px; display: block; position: absolute; top: 0; right: 0; } .label-list i { width: 8px; height: 8px; display: block; position: absolute; top: 10px; right: 5px; background: url(../images/clear.png) no-repeat center/cover; } .label-list a.active { line-height: 30px; border: 0; background: linear-gradient(#087cd6, #003c7e); } .label-list a.active:hover i { background: url(../images/clear.png) no-repeat center/cover; } .import-control { position: relative; border-radius: 3px; cursor: pointer; } .import-control input { width: 86px; height: 32px; } .import-control button { margin-left: 0; } .all-label-list { padding-top: 10px; } .all-label-list a { margin: 0 0 10px 10px; } .all-label-list h2 { padding-bottom: 10px; text-align: center; } .clac-title { position: relative; padding: 10px 0 10px 10px; } .clac-title span { width: 133px; } .shadow { width: 285px; height: 200px; position: fixed; right: 0; bottom: 0; z-index: 1000; display: none; background: rgba(0,33,69,0.8); } .forecast-content { width: 130px; margin: 0 auto; padding-top: 10px; } .forecast-text { margin-bottom: 10px; } .forecast-text span { float: left; } .forecast-text span:first-child { width: 70px; text-align: right } .forecast-refresh span { line-height: 33px; } .btn { /*width: 118px;*/ height: 28px; cursor: pointer; color: #ffffff; font-size: 14px; border: 1px solid #3871af; border-radius: 3px; background: linear-gradient(#266cb9, #002c5d); } .control-btns { display: flex; position: absolute; top: 20px; right: 20px; z-index: 2000; color: #ffffff; } .control-btns .btn { padding: 0 10px; margin-left: 10px; color: #ffffff; border-radius: 3px; background: -webkit-linear-gradient(#febc50, #faa71c); background: -o-linear-gradient(#febc50, #faa71c); background: -moz-linear-gradient(#febc50, #faa71c); background: linear-gradient(#febc50, #faa71c); } .export { /*width: 50px;*/ height: 25px; line-height: 25px; position: absolute; padding: 0px 10px; right: 20px; bottom: 17px; z-index: 2000; color: #ffffff; border-radius: 3px; background: -webkit-linear-gradient(#febc50, #faa71c); background: -o-linear-gradient(#febc50, #faa71c); background: -moz-linear-gradient(#febc50, #faa71c); background: linear-gradient(#febc50, #faa71c); } .export:hover, .draw:hover, .clear-btn:hover, .info-mark:hover { color: #ffffff; } .draw { top: 20px; right: 88px; bottom: auto; } .info-mark { top: 20px; right: 156px; bottom: auto; } .clear-btn { top: 20px; bottom: auto; } .btn-click { width: 270px; margin-left: -2px; } .calc-btn { width: 132px; height: 28px; line-height: 28px; border: 1px solid #3871af; border-radius: 3px; background: linear-gradient(#266cb9, #002c5d); } .forecast-btn { width: 136px; margin-left: 71px; margin-bottom: 10px; border-radius: 3px; border: 1px solid #3871af; background: linear-gradient(#266cb9, #002c5d); } .calc-list { position: relative; border-bottom: 1px solid #234979; } .calc-list ul { /*height: calc(100% - 39px);*/ overflow: auto; } .calc-list ul li { width: 252px; height: 30px; text-align: center; margin: 10px auto 0 auto; line-height: 30px; cursor: pointer; border: 1px solid #234979; border-radius: 3px; background-color: #03244c; box-shadow: 0 0 10px rgba(48, 112, 194, 0.25) inset; } .calc-list ul li.active { border-color: #00d5f6; color: #00deff; } .calc-list ul li:last-of-type { margin-bottom: 10px; } .calc-list-shadow::after { content: ''; width: 100%; height: calc(100% + 52px); position: absolute; top: 0; left: 0; z-index: 1000; background: rgba(0, 33, 69, 0.8); } .result-list { height: calc(100vh - 491px); } .result-list ul { position: relative; height: calc(100% - 285px); border-top: 0; } .slider-list { position: relative; } .time-list span { float: left; } .time-list a { float: left; margin-left: 5px; color: #868686; } .history-time .sure-btn { width: 156px; height: 28px; line-height: 28px; margin-left: 102px; border-radius: 3px; border: 1px solid #3871af; background: linear-gradient(#266cb9, #002c5d); } .history-time .param-text label { width: 98px; } .calc-table { width: 100%; height: 266px; } .calc-table .datagrid-wrap { background: #03244d; } .warn-clac-list ul { height: 100%; } .btn-group { width: 152px; position: fixed; bottom: 5px; right: 67px; } .btn-group div { width: 40px; height: 40px; float: left; border-radius: 50%; background: linear-gradient(#266cb9, #002c5d); } .btn-group div.prev { margin-right: 16px; } .btn-group div.next { margin-left: 16px; } .btn-group div.pause { display: none; } .btn-group .btn { width: 100%; height: 100%; cursor: pointer; border: 0; } .btn-group .prev-btn { background: url("../images/icon-prev.png") no-repeat 12px 13px; } .btn-group .play-btn { background: url("../images/icon-play.png") no-repeat 16px 13px; } .btn-group .pause-btn { background: url("../images/icon-pause.png") no-repeat center center; } .btn-group .next-btn { background: url("../images/icon-next.png") no-repeat center center; } .btn-group, .real-btn, .shadow { transition: all 0.5s; } .real-btn-toggle { right: -163px; transition: all 0.5s; } .shadow-toggle { right: -286px; transition: all 0.5s; } .spinner-arrow { background-color: #F4F4F4 !important; } .spinner-arrow-up::after { content: '∧'; width: 16px; height: 16px; position: absolute; top: -5px; left: 2px; font-size: 16px; font-family: '微软雅黑'; } .spinner-arrow-down::after { content: '∨'; width: 16px; height: 16px; position: absolute; top: -5px; left: 2px; font-size: 16px; font-family: '微软雅黑'; } .shade, .bg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 2000; background: rgba(0,0,0,0.4); display: none; } .real-shade:before { content: ''; width: 285px; height: 100%; position: absolute; top: 0; left: 0; z-index: 1000; background: rgba(255,255,255,0.5); } .dialog { width: 100%; height: calc(100% - 54px); position: fixed; top: 54px; left: 0; z-index: 2000; display: none; background: rgba(0,33,69,0.7); } .dialog-content { width: 286px; position: absolute; top: 50%; left: 50%; z-index: 1000; border-radius: 3px; background: #002145; transform: translate(-50%, -50%); } .dialog-content .param-text { margin-bottom: 7px; } .dialog-content .param-label { margin-top: 0; } .dialog-delete .dialog-content { width: 380px; border: 1px solid #234979; } .dialog-title { padding-left: 10px; line-height: 36px; background: linear-gradient(#1463a5, #06386f); } .close-dialog { width: 14px; height: 14px; position: absolute; right: 10px; top: 10px; background: url(../images/close-dialog.png); } .dialog-block { padding-top: 10px; } .dialog-block a { margin: 0 0 10px 10px; } .dialog-block h2 { padding: 8px 0; text-align: center; } .dialog-block .param-input { margin-left: 10px; } .dialog-btn-group { margin: 10px 10px 10px 0; } .dialog-btn { width: 66px; } .dialog-btn-group .dialog-btn { height: 28px; line-height: 25px; border-radius: 3px; background: #002145; } .dialog-btn-group .dialog-btn.dialog-sure-btn { margin-right: 7px; border-color: #3871af; background: linear-gradient(#266cb9, #002c5d); } .dialog-clear h2 { margin: 10px 0; line-height: 30px; text-align: center; } .dialog-info-point .dialog-content { width: 370px; } .dialog-lat-lng-switch .dialog-content { width: 550px; } .dialog-info-point .dialog-title h2, .dialog-select-point .dialog-title h2 { padding: 0; background: none; } .dialog-info-point .item{ margin: 10px; } .dialog-info-point .item label, .dialog-select-point .item label, .dialog-lat-lng-switch .item .col label{ margin-bottom: 6px; display: block; } .dialog-info-point .item .textbox, .dialog-lat-lng-switch .item .textbox{ width: 100%; border-radius: 3px; } .dialog-info-point .icon-view { padding-top: 10px; margin: 0 10px; border-radius: 3px; border: 1px solid #234979; } .dialog-info-point .icon-col img { width: 30px; } .dialog-info-point .icon-view .icon-col { width: calc((100% - 50px) / 4); padding: 12px 0; margin-left: 10px; margin-bottom: 10px; text-align: center; cursor: pointer; border-radius: 3px; border: 1px solid #234979; } .dialog-info-point .icon-view .icon-col.active { border-color: #00d5f6; } .dialog-select-point .dialog-content { width: 382px; } .dialog-select-point .item { padding: 10px 10px 0 10px; display: flex; justify-content: space-between; } .dialog-select-point .item .col { position: relative; } .dialog-select-point .item .col input, .dialog-lat-lng-switch .item .col input{ width: 140px; padding: 0 5px; border-radius: 3px; border: 1px solid #234979; line-height: 28px; color: #ffffff; background-color: #03244c; box-shadow: 0 0 10px rgba(48, 112, 194, 0.25) inset; } .dialog-select-point .item .col input::selection .dialog-lat-lng-switch .item .col input::selection{ color: #3a3a3a; background: #ff0000; } .dialog-select-point .item .col .copy-btn, .dialog-lat-lng-switch .item .col .copy-btn, .dialog-lat-lng-switch .item .col .switch-btn{ display: inline-block; width: 30px; height: 30px; border-radius: 3px; border: 1px solid #dddddd; cursor: pointer; background: url("../images/icon-copy.png") no-repeat #06274b; background-size: 20px 20px; background-position: 4px 4px; border: 1px solid #3871af; } .dialog-lat-lng-switch .item .col .switch-btn { margin-right: 5px; background: url("../images/icon-switch.png") no-repeat #06274b; background-size: 20px 20px; background-position: 4px 4px; } .dialog-lat-lng-switch .item .col .unit { height: 30px; margin-right: 5px; display: block; font-size: 20px; } .dialog-lat-lng-switch .item { padding: 10px 10px 0 10px; display: flex; justify-content: space-between; align-items: flex-end; position: relative; } .dialog-lat-lng-switch .item .hide-text { position: absolute; opacity: 0; } .dialog-lat-lng-switch .item .col { margin-bottom: 10px; position: relative; } .dialog-lat-lng-switch .item .col input { width: 100px; } .dialog-lat-lng-switch .item .col .tip { color: #f70000; font-size: 12px; position: absolute; top: 57px; display: none; } .dialog-lat-lng-switch .item .col input.decimal { width: 120px; } .dialog-lat-lng-switch .item .col input.readnoly { cursor: default; } .dialog-lat-lng-switch .item .col input.error { border-color: #f70000; } .dialog-lat-lng-switch .separate { display: flex; margin: 12px 10px 5px 10px; white-space: nowrap; text-align: center; border-top: 0; border-top-color: #234979; } .dialog-lat-lng-switch .separate:after, .dialog-lat-lng-switch .separate:before{ content: ""; width: 95%; position: relative; top: 50%; border-top: 1px solid transparent; border-top-color: inherit; border-bottom: 0; transform: translateY(50%); } .dialog-lat-lng-switch .separate:before { width: 5% } .dialog-lat-lng-switch .separate span { display: inline-block; padding: 0 10px; } .textbox .textbox-text { width: 100% !important; padding: 0 10px; cursor: auto; background: #03244c; color: #ffffff; } .load { width: 365px; height: 60px; text-align: center; margin: -30px 0 0 -169px; position: absolute; top: 50%; left: 50%; z-index: 1000; color: #ffffff; font-size: 16px; } .load-animate { width: 70px; display: flex; margin: 10px auto 0 auto; justify-content: space-between; align-items: center; } .animate { width: 15px; height: 15px; border-radius: 50%; background: #ffffff; } .animate:nth-child(1) { animation: pulse .4s ease 0s infinite alternate; -webkit-animation: pulse .4s ease 0s infinite alternate; } .animate:nth-child(2) { animation: pulse .4s ease .2s infinite alternate; -webkit-animation: pulse .4s ease .2s infinite alternate; } .animate:nth-child(3) { animation: pulse .4s ease .4s infinite alternate; -webkit-animation: pulse .4s ease .4s infinite alternate; } @keyframes pulse { from { opacity: 1; transform: scale(1); } to { opacity: .25; transform: scale(.75); } } @-moz-keyframes pulse { from { opacity: 1; transform: scale(1); } to { opacity: .25; transform: scale(.75); } } @-webkit-keyframes pulse { from { opacity: 1; transform: scale(1); } to { opacity: .25; transform: scale(.75); } } @-o-keyframes pulse { from { opacity: 1; transform: scale(1); } to { opacity: .25; transform: scale(.75); } } .forecast-time { margin-left: -37px !important; margin-top: -28px !important; width: 75px !important; height: 21px !important; background-color: white; border: solid 1px gray; border-radius: 3px; padding: 1px 4px; color: #3a3a3a; } .time-label { height: 56px !important; width: 120px !important; margin-left: 5px !important; margin-top: -28px !important; cursor: -webkit-grab; cursor: grab; } .time-label a.close-button { width: 8px; height: 8px; position: absolute; top: 5px; right: 5px; background: url(../images/clear-gray.png) no-repeat center/cover; } .time-label-content { padding: 2px 5px; color: #777; background-color: #fff; border: solid 1px #aaa; border-radius: 3px; cursor: default; } .time-label-show { cursor: default; } .time-label-hide { cursor: -webkit-grab; cursor: grab; } .compare-time-label { border: 1px solid blue; background: blue; z-index: 999 !important } .compare-time-label span { color: #ffffff; } .compare-time-label a.close-button { background: url(../images/clear-white.png) no-repeat center/cover; } .center-label { padding: 2px 0 0 5px; margin-left: -68px !important; margin-top: -90px !important; color: #333 !important; background-color: #fff; height: 77px !important; width: 136px !important; border: solid 1px #aaa; border-radius: 3px; z-index: 1000 !important; background: rgba(191, 209, 34, 1); } .dashLines { stroke-dasharray: 3; stroke: #ee5067; } .distance { width: 300px !important; height: 27px !important; margin-top: -14px !important; margin-left: 15px !important; z-index: 1000 !important } .distance span { padding: 5px; color: #ffffff; font-size: 14px; font-weight: bold; border-radius: 3px; background: #ee5067; } .info-point-content { width: auto !important; height: 72px !important; margin-top: -70px !important; margin-left: 0 !important; } .info-point-content .info-point-block { position: absolute; transform: translateX(-50%); } .info-point-content .info-point-top { margin-bottom: 6px; padding: 5px 30px 5px 10px; border-radius: 3px; position: relative; cursor: default; border: 1px solid #dddddd; background-color: #ffffff; } .info-point-content .info-point-top p { color: #3a3a3a; font-size: 14px; white-space: nowrap; } .info-point-content .info-point-top .remove-info-point { width: 30px; height: 30px; position: absolute; top: 0px; right: 0px; z-index: 3000; } .info-point-content .info-point-top .remove-info-point span { width: 8px; height: 8px; display: block; margin: 11px auto 0 auto; cursor: pointer; background: url("../images/clear-gray.png") no-repeat center/cover; } .info-point-content .icon { width: 32px; height: 32px; margin: 0 auto; background: url("../images/markers/1.png") no-repeat center/cover; } .info-point-content .icon2 { background: url("../images/markers/2.png") no-repeat center/cover; } .info-point-content .icon3 { background: url("../images/markers/3.png") no-repeat center/cover; } .info-point-content .icon4 { background: url("../images/markers/4.png") no-repeat center/cover; } .info-point-content .icon5 { background: url("../images/markers/5.png") no-repeat center/cover; } .info-point-content .icon6 { background: url("../images/markers/6.png") no-repeat center/cover; } .info-point-content .icon7 { background: url("../images/markers/7.png") no-repeat center/cover; } .info-point-content .icon8 { background: url("../images/markers/8.png") no-repeat center/cover; } .shrink { width: 12px; height: 55px; margin-top: -28px; position: absolute; top: 50%; right: 286px; z-index: 1000; cursor: pointer; transition: all 0.5s; background: url("../images/toggle-right.png") no-repeat; } .shrink-toggle { right: 0; transition: all 0.5s; background: url("../images/toggle-left.png") no-repeat; } .latlng { padding: 5px; cursor: default; position: absolute; left: 10px; bottom: 10px; z-index: 1000; color: #3a3a3a; border-radius: 3px; border: 1px solid #dddddd; background-color: #ffffff; }