* { padding: 0; margin: 0; box-sizing: border-box } li, ol { list-style: none } a { text-decoration: none } @font-face { font-family: "方正大黑_GBK"; src: url("../font/方正大黑_GBK.eot?") format("eot"); src: url("../font/方正大黑_GBK.woff") format("woff"),url("../font/方正大黑_GBK.ttf") } @font-face { font-family: "液晶数字"; src: url("../font/液晶数字.eot?") format("eot"); src: url("../font/液晶数字.woff") format("woff"),url("../font/液晶数字.ttf") } ::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #107f8b } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #dfe4f1 } ::-webkit-scrollbar-thumb:hover { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.4) } html { scrollbar-face-color: #dfe4f1; scrollbar-highlight-color: #107f8b; scrollbar-3dlight-color: #107f8b; scrollbar-darkshadow-color: #107f8b; scrollbar-shadow-color: #dfe4f1; scrollbar-arrow-color: rgba(16,127,139,0.4); scrollbar-track-color: #dfe4f1 } html { font-size: 10vw; width: 100%; height: 100%; min-width: 1200px; min-height: 768px; font-family: Microsoft YaHei; line-height: 1 } @media screen and (max-width:1200px) { html { font-size: 120px } } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .sd-index1-body { background: #dfe4f1; background-image: url("../image/bj3.png"); background-size: 10rem auto; background-repeat: no-repeat } .sd-header { position: relative; width: 100%; height: .45833rem; padding: 0 .10417rem; background: url("../image/01headbj1.png") center center/100% 100% no-repeat; } .titleback { background: url("../image/07headbj.png") center center/100% 100% no-repeat; width: 100%; height: 50px; } .sd-header .sd-header-title { position: absolute; top: .07292rem; left: 50%; transform: translate(-50%); font-size: .19792rem; color: #1AB1FF; white-space: nowrap } .sd-header .sd-header-top .sd-header-top-left { position: absolute; left: .10417rem; top: .03125rem; font-size: .0625rem; color: #1AB1FF; display: flex; align-items: center } .sd-header .sd-header-top .sd-header-top-left .sd-location-name { margin-right: .09375rem } .sd-header .sd-header-top .sd-header-top-left .sd-location-weather { margin-right: .08333rem; display: flex; align-items: center } .sd-header .sd-header-top .sd-header-top-left .sd-location-weather img { margin-right: .04688rem; width: .09896rem; object-fit: contain } .sd-header .sd-header-top .sd-header-top-left .sd-location-weather span { margin-right: .05208rem } .sd-header .sd-header-top .sd-header-top-left .sd-location-time { display: inline-block } .sd-header .sd-header-top .sd-header-top-right { position: absolute; top: .03125rem; right: .10417rem } .sd-header .sd-header-top .sd-header-top-right ul { font-size: 0; white-space: nowrap } .sd-header .sd-header-top .sd-header-top-right ul li { display: inline-block; vertical-align: top; font-size: .0625rem; line-height: .08333rem } .sd-header .sd-header-top .sd-header-top-right ul li a { color: #1AB1FF } .sd-header .sd-header-top .sd-header-top-right ul li:not(:last-child) { margin-right: .10417rem } .sd-header .sd-header-top .sd-header-top-right ul li span { position: relative; margin-right: .03646rem; vertical-align: middle } .sd-header .sd-header-top .sd-header-top-right ul li i { font-size: .07292rem } .sd-header .sd-header-top .sd-header-top-right ul li .sd-message-dot::after { content: ""; position: absolute; top: 0; right: 0; width: .03125rem; height: .03125rem; border-radius: 50%; background: #f39800 } .sd-header .sd-header-bottom { position: absolute; top: .36458rem; left: 0; width: 100% } .sd-header .sd-header-bottom ul { position: absolute; bottom: 0; font-size: 0 } .sd-header .sd-header-bottom ul li { display: inline-block; width: .84896rem; height: .17708rem; line-height: .17708rem; text-align: center } .sd-header .sd-header-bottom ul li:not(:last-child) { margin-right: .53646rem } .sd-header .sd-header-bottom ul li a { display: block; font-size: .08333rem; color: #1AB1FF } .sd-header .sd-header-bottom ul.sd-header-bottom-menu:nth-child(1) { text-align: left; left: .50417rem } .sd-header .sd-header-bottom ul.sd-header-bottom-menu:nth-child(1) li { /*background: url("../image/06navbj1.png") center center/100% 100% no-repeat*/ } .sd-header .sd-header-bottom ul.sd-header-bottom-menu:nth-child(2) { text-align: right; right: .53646rem } .sd-header .sd-header-bottom ul.sd-header-bottom-menu:nth-child(2) li { /*background: url("../image/06navbj2.png") center center/100% 100% no-repeat*/ } .sd-body { padding: 0 .10417rem; margin-top: .0625rem; display: flex } .sd-body .sd-body-left { width: 2.36458rem } .sd-body .sd-body-center { flex: 1; min-width: 0; padding: 0 .10417rem } .sd-body .sd-body-center .sd-body-menus { font-size: 0; display: flex; padding-top: .15625rem } .sd-body .sd-body-center .sd-body-menus .sd-body-menu { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: .10417rem; height: .57292rem; background: url("../image/index7/center-menu-bg.png") center center/100% 100% no-repeat } .sd-body .sd-body-center .sd-body-menus .sd-body-menu:not(:last-child) { margin-right: .08333rem } .sd-body .sd-body-center .sd-body-menus .sd-body-menu .sd-body-menu-label { font-size: .07292rem; color: #666666; text-align: center } .sd-body .sd-body-center .sd-body-menus .sd-body-menu .sd-body-menu-value { font-size: .1875rem; font-family: "液晶数字"; margin-top: .0625rem; color: #4eafbb } .sd-body .sd-body-center .sd-body-menus .sd-body-menu .sd-body-menu-value--yellow { color: #ffc277 } .sd-body .sd-body-center .sd-body-map { position: relative; margin-top: .20833rem } .sd-body .sd-body-center .sd-body-map .sd-body-map-switch-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; width: .84896rem; height: .23438rem; background: url("../image/index7/map-switch-btn-bg.png") center center/100% 100% no-repeat; font-size: .08333rem; color: #42aab6; cursor: pointer } .sd-body .sd-body-center .sd-body-map .sd-body-map-switch-btn i { font-size: .08333rem; color: #42aab6; margin-left: .04167rem } .sd-body .sd-body-right { width: 2.36458rem } .sd-body .sd-section { position: relative; width: 100%; height: 1.59375rem; background-color: #f9fafc; border-radius: .08333rem; box-shadow: 0px 0px .15625rem .02604rem rgba(196,196,196,0.2) } .sd-body .sd-section + .sd-section { margin-top: .11458rem } .sd-body .sd-section .sd-section-title { position: absolute; top: .07813rem; left: 50%; transform: translateX(-50%); width: 100%; height: .16667rem; padding-left: .09375rem; text-align: left; font-size: .09375rem; color: #097e8b } .sd-body .sd-section .sd-section-title-r { padding-right: .09375rem; text-align: right } .sd-body .sd-section .sd-section-content .sd-section1-inner { padding-top: .32813rem } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc { display: flex; overflow: hidden } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-left { padding: 0 .15625rem; flex: 1; min-width: 0 } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-left .sd-user-calc-item { margin-top: .02604rem; display: flex; flex-direction: column; text-align: center; position: relative; width: 1.09375rem; height: .35417rem; background: url("../image/index7/bk.png") center center/100% 100% no-repeat } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-left .sd-user-calc-item + .sd-user-calc-item { margin-top: .33333rem } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-left .sd-user-calc-item .sd-user-calc-label { display: flex; justify-content: center; position: absolute; left: 50%; transform: translateX(-50%); top: -.02604rem } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-left .sd-user-calc-item .sd-user-calc-label span { display: inline-block; vertical-align: top; padding: 0 .07292rem; text-align: center; position: relative; font-size: .08333rem; color: #333 } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-left .sd-user-calc-item .sd-user-calc-value { margin-top: .14583rem; padding-right: .04167rem; text-align: right; font-size: .13542rem; color: #42aab6 } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-left .sd-user-calc-item .sd-user-calc-value span { font-size: .07292rem; margin-left: .02604rem; color: #666666 } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-right { display: flex; align-items: center; padding-right: .17188rem } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-right .sd-user-calc-circle-box { position: relative; width: .75rem; height: .75rem; background: url("../image/index7/s1-bg.png") center center/100% 100% no-repeat } .sd-body .sd-section .sd-section-content .sd-section1-inner .sd-user-calc .sd-user-calc-right .sd-user-calc-circle-box canvas { position: absolute; top: 50%; left: 50%; width: .82292rem; height: .82292rem; transform: translate(-50%,-50%) } .sd-body .sd-section .sd-section-content .sd-section2-inner { padding-top: .21875rem } .sd-body .sd-section .sd-section-content .sd-section2-inner .sd-output-box { width: 2.21354rem; height: 1.28125rem } .sd-body .sd-section .sd-section-content .sd-section3-inner { padding-top: .25rem } .sd-body .sd-section .sd-section-content .sd-section3-inner .sd-rate-list { padding: 0 .11458rem } .sd-body .sd-section .sd-section-content .sd-section3-inner .sd-rate-list .sd-rate-item { display: flex; font-size: .07292rem; align-items: center } .sd-body .sd-section .sd-section-content .sd-section3-inner .sd-rate-list .sd-rate-item + .sd-rate-item { margin-top: .0625rem } .sd-body .sd-section .sd-section-content .sd-section3-inner .sd-rate-list .sd-rate-item .sd-rate-status { margin-right: .02604rem; color: #12cda2 } .sd-body .sd-section .sd-section-content .sd-section3-inner .sd-rate-list .sd-rate-item .sd-rate-name { color: #333333; margin-right: .10417rem } .sd-body .sd-section .sd-section-content .sd-section3-inner .sd-rate-list .sd-rate-item .sd-rate-bar { flex: 1; min-width: 0; height: .04167rem; border-radius: .10417rem; background: #dce2f1; overflow: hidden } .sd-body .sd-section .sd-section-content .sd-section3-inner .sd-rate-list .sd-rate-item .sd-rate-bar .sd-rate-bar-value { display: inline-block; vertical-align: top; height: 100%; transition: width 0.5s; width: 0; background: linear-gradient(to right,#14cda2,rgba(20,205,162,0.005)) } .sd-body .sd-section .sd-section-content .el-scrollbar { overflow-x: hidden; overflow-y: scroll; position: relative; height: 100%; margin-right: -8px } .sd-body .sd-section .sd-section-content .sd-section3-inner .el-scrollbar__wrap { position: relative } .sd-body .sd-section .sd-section-content .el-scrollbar__bar { position: absolute; right: 2px; bottom: 2px; z-index: 1; border-radius: 4px; opacity: 0; -webkit-transition: opactiy 0.12s ease-out; transition: opactiy 0.12s ease-out } .sd-body .sd-section .sd-section-content .el-scrollbar__bar.is-vertical { width: 6px; top: 2px } .sd-body .sd-section .sd-section-content .el-scrollbar__bar.is-vertical > div { width: 100% } .sd-body .sd-section .sd-section-content .el-scrollbar__bar.is-horizontal { height: 6px; left: 2px } .sd-body .sd-section .sd-section-content .el-scrollbar__bar.is-horizontal > div { height: 100% } .sd-body .sd-section .sd-section-content .el-scrollbar__thumb { position: relative; display: block; width: 0; height: 0; cursor: pointer; border-radius: inherit; background-color: rgba(144,147,153,0.3); -webkit-transition: background-color .3s; transition: background-color .3s } .sd-body .sd-section .sd-section-content .sd-section4-inner { padding: .26042rem .15625rem 0 } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security .sd-security-label { font-size: .08333rem; color: #333333 } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security .sd-security-value { width: 1.97917rem; height: .25521rem; margin: .09375rem auto 0; padding: 0 .02604rem; text-align: right; background: url("../image/index7/security-time-bg.png") center center/100% 100% no-repeat; font-size: .15625rem; color: #42aab6; font-family: "液晶数字"; letter-spacing: .09896rem; padding-top: .06771rem } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security-ratios { margin-top: .21875rem; text-align: center; font-size: 0 } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security-ratios .sd-security-ratio { display: inline-block; padding: .10417rem; width: .94792rem; height: .48958rem; text-align: center; background: url("../image/index7/security-time-box-bg.png") center center/100% 100% } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security-ratios .sd-security-ratio:nth-child(1) { margin-right: .10417rem } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security-ratios .sd-security-ratio .sd-security-ratio-value { font-size: .14583rem } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security-ratios .sd-security-ratio .sd-security-ratio-value--blue { color: #42aab6 } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security-ratios .sd-security-ratio .sd-security-ratio-value--yellow { color: #ffb260 } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security-ratios .sd-security-ratio .sd-security-ratio-value span:nth-child(2) { font-size: .07292rem; color: #666666; margin-left: .01042rem } .sd-body .sd-section .sd-section-content .sd-section4-inner .sd-security-ratios .sd-security-ratio .sd-security-ratio-label { margin-top: .10417rem; font-size: .07292rem; color: #666666 } .sd-body .sd-section .sd-section-content .sd-section5-inner { padding-top: .26042rem } .sd-body .sd-section .sd-section-content .sd-section5-inner .sd-quality { display: flex; justify-content: center; min-width: 1.20313rem } .sd-body .sd-section .sd-section-content .sd-section5-inner .sd-quality .sd-quality-num { display: flex; align-items: center; justify-content: flex-end; position: relative; height: .40104rem; padding-right: .07813rem; margin: 0 auto; background: url("../image/index7/quality-num-bg.png") center right/1.20313rem 100% no-repeat; font-size: .08333rem; color: #333333 } .sd-body .sd-section .sd-section-content .sd-section5-inner .sd-quality .sd-quality-num span { display: inline-block; text-align: right; min-width: .75rem; margin-right: .02083rem; font-size: .14583rem; color: #42aab6 } .sd-body .sd-section .sd-section-content .sd-section5-inner .sd-quality .sd-quality-num em { display: inline-block; margin-top: .04688rem; font-style: normal; font-size: .07292rem } .sd-body .sd-section .sd-section-content .sd-section5-inner .sd-quality-circles { display: flex; margin-top: .07292rem } .sd-body .sd-section .sd-section-content .sd-section5-inner .sd-quality-circles .sd-quality-circle { flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column } .sd-body .sd-section .sd-section-content .sd-section5-inner .sd-quality-circles .sd-quality-circle .sd-quality-circle-name { margin-top: .03125rem; font-size: .07292rem; color: #fff; text-align: center } .sd-body .sd-section .sd-section-content .sd-section6-inner { padding-top: .23958rem; padding-left: .13021rem; display: flex } .sd-body .sd-section .sd-section-content .sd-section6-inner .sd-video-play { position: relative; width: 1.53125rem; height: 1.29167rem; margin-right: .10417rem } .sd-body .sd-section .sd-section-content .sd-section6-inner .sd-video-play .sd-video { width: 100%; height: 100%; background: #000; object-fit: fill } .sd-body .sd-section .sd-section-content .sd-section6-inner .sd-video-play .sd-video-desc { position: absolute; left: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; height: .14063rem; padding: 0 .08854rem 0 .06771rem; font-size: .0625rem; color: #fff; background: rgba(14,32,67,0.6) } .sd-body .sd-section .sd-section-content .sd-section6-inner .sd-video-items .sd-video-item { display: flex; align-items: center; justify-content: center; flex-direction: column; width: .57292rem; height: .56771rem; background: url("../image/index7/video-num-bg.png") center center/100% 100% no-repeat } .sd-body .sd-section .sd-section-content .sd-section6-inner .sd-video-items .sd-video-item + .sd-video-item { margin-top: .13021rem } .sd-body .sd-section .sd-section-content .sd-section6-inner .sd-video-items .sd-video-item .sd-video-item-num { font-size: .125rem } .sd-body .sd-section .sd-section-content .sd-section6-inner .sd-video-items .sd-video-item .sd-video-item-num--blue { color: #42aab6 } .sd-body .sd-section .sd-section-content .sd-section6-inner .sd-video-items .sd-video-item .sd-video-item-num--green { color: #12cda2 } .sd-body .sd-section .sd-section-content .sd-section6-inner .sd-video-items .sd-video-item .sd-video-item-desc { margin-top: .04167rem; font-size: .07292rem; color: #333333 } .sd-body .sd-section .sd-section-content-scroll { height: 100%; padding-top: .25rem; padding-bottom: .04167rem; overflow: hidden } .sd-body .sd-section .sd-section-content-scroll .sd-section3-inner { padding-top: 0; height: 100%; overflow: hidden }