SGGL_HBAZ/SGGL/FineUIPro.Web/res/indexv2/assets/css/index8.css

750 lines
26 KiB
CSS

* {
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: #0b5695;
background-image: url("../image/index8/bg3.jpg");
background-size: 10rem auto;
background-repeat: no-repeat
}
.sd-header {
position: relative;
width: 100%;
height: .45833rem;
padding: 0 .10417rem;
background: url("../image/index8/header-bg.png") center center/100% 100% no-repeat
}
.sd-header .sd-header-title {
position: absolute;
top: .07292rem;
left: 50%;
transform: translate(-50%);
font-size: .19792rem;
color: #2f97ec;
white-space: nowrap
}
.sd-header .sd-header-top .sd-header-top-left {
position: absolute;
left: .10417rem;
top: .03125rem;
font-size: .0625rem;
color: #2f97ec;
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: #2f97ec
}
.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: .40458rem;
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: .03646rem
}
.sd-header .sd-header-bottom ul li a {
display: block;
font-size: .08333rem;
color: #fff
}
.sd-header .sd-header-bottom ul.sd-header-bottom-menu:nth-child(1) {
text-align: left;
left: .10417rem
}
.sd-header .sd-header-bottom ul.sd-header-bottom-menu:nth-child(1) li {
background: url("../image/index8/header-left-menu-bg.png") center center/100% 100% no-repeat
}
.sd-header .sd-header-bottom ul.sd-header-bottom-menu:nth-child(2) {
text-align: right;
right: .08333rem
}
.sd-header .sd-header-bottom ul.sd-header-bottom-menu:nth-child(2) li {
background: url("../image/index8/header-right-menu-bg.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/index8/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/index8/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/index8/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/index8/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/index8/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/index8/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/index8/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
}