565 lines
15 KiB
SCSS
565 lines
15 KiB
SCSS
@import "./variable";
|
|
|
|
.sd-sub-body {
|
|
background: #000a2c;
|
|
min-height: 100vh;
|
|
padding: rem(15);
|
|
.sub-section {
|
|
.sub-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
height: rem(39);
|
|
padding: 0 rem(15);
|
|
background: #1c234b;
|
|
color: #aceaff;
|
|
font-size: rem(16);
|
|
.sub-sections-tabs {
|
|
margin-left: auto;
|
|
font-size: 0;
|
|
.sub-section-item {
|
|
display: inline-block;
|
|
font-size: rem(14);
|
|
color: #a0aae0;
|
|
height: rem(28);
|
|
line-height: rem(28);
|
|
padding: 0 rem(16);
|
|
margin-right: rem(1);
|
|
cursor: pointer;
|
|
&.active {
|
|
color: #fff;
|
|
background: #2063b7;
|
|
border-radius: rem(12);
|
|
}
|
|
}
|
|
}
|
|
.sub-right-select {
|
|
margin-left: auto;
|
|
position: relative;
|
|
&:hover {
|
|
.sub-select-ul {
|
|
display: block;
|
|
}
|
|
}
|
|
.sub-select-name {
|
|
display: flex;
|
|
align-items: center;
|
|
height: rem(36);
|
|
line-height: rem(36);
|
|
font-size: rem(14);
|
|
color: #a0aae0;
|
|
cursor: pointer;
|
|
.dropdown-arrow {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: rem(8);
|
|
height: rem(8);
|
|
border-width: 0 rem(2) rem(2) 0;
|
|
border-color: #a0aae0;
|
|
border-style: solid;
|
|
transform: rotate(45deg);
|
|
margin-left: rem(5);
|
|
}
|
|
}
|
|
.sub-select-ul {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
min-width: rem(120);
|
|
background: rgba(#1c234b, 0.8);
|
|
z-index: 2;
|
|
.sub-select-li {
|
|
height: rem(40);
|
|
line-height: rem(40);
|
|
font-size: rem(14);
|
|
color: #a0aae0;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sub-section-inner {
|
|
background: #131c3d;
|
|
}
|
|
}
|
|
&--security {
|
|
.sub-sections {
|
|
& + .sub-sections {
|
|
margin-top: rem(16);
|
|
}
|
|
.sub-section {
|
|
.sub-section-inner {
|
|
height: rem(260);
|
|
}
|
|
& + .sub-section {
|
|
margin-left: rem(15);
|
|
}
|
|
&-01 {
|
|
width: rem(365);
|
|
.sub-section-inner {
|
|
padding-top: rem(24);
|
|
background: #131c3d url(../image/sub_index/security/01_2.png) no-repeat
|
|
bottom center/rem(292) auto;
|
|
.real-time-num {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: rem(349);
|
|
height: rem(49);
|
|
text-align: center;
|
|
font-size: rem(40);
|
|
color: #00beff;
|
|
font-family: "液晶数字";
|
|
letter-spacing: rem(8);
|
|
background: url(../image/sub_index/security/01_1.png) no-repeat center
|
|
center/100% auto;
|
|
}
|
|
}
|
|
}
|
|
&-02 {
|
|
.sub-section-inner {
|
|
padding: 0 rem(15);
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-03 {
|
|
width: rem(365);
|
|
.sub-section-inner {
|
|
padding-top: rem(36);
|
|
.cm-banner {
|
|
position: relative;
|
|
width: rem(296);
|
|
margin: 0 auto;
|
|
> img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.cm-box {
|
|
.cm-box-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
width: rem(62);
|
|
height: rem(56);
|
|
cursor: pointer;
|
|
img {
|
|
width: rem(24);
|
|
height: rem(24);
|
|
&:nth-child(2) {
|
|
display: none;
|
|
}
|
|
}
|
|
.cm-box-name {
|
|
color: #aceaff;
|
|
margin-top: rem(3);
|
|
font-size: rem(14);
|
|
}
|
|
&:hover {
|
|
img {
|
|
&:nth-child(1) {
|
|
display: none;
|
|
}
|
|
&:nth-child(2) {
|
|
display: block;
|
|
}
|
|
}
|
|
.cm-box-name {
|
|
color: #ffb260;
|
|
}
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
top: rem(76);
|
|
left: rem(12);
|
|
}
|
|
&:nth-child(2) {
|
|
top: rem(22);
|
|
left: rem(96);
|
|
}
|
|
&:nth-child(3) {
|
|
top: rem(125);
|
|
left: rem(135);
|
|
}
|
|
&:nth-child(4) {
|
|
top: rem(57);
|
|
left: rem(212);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-04 {
|
|
.sub-section-inner {
|
|
padding: 0 rem(15);
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-05 {
|
|
.sub-section-inner {
|
|
padding: 0 rem(15);
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-06 {
|
|
.sub-section-inner {
|
|
padding: 0 rem(15);
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-07 {
|
|
.sub-section-inner {
|
|
padding: 0 rem(15);
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&--quality {
|
|
.sub-sections {
|
|
&:nth-child(1) {
|
|
width: rem(674);
|
|
}
|
|
& + .sub-sections {
|
|
margin-left: rem(13);
|
|
}
|
|
.sub-section {
|
|
& + .sub-section {
|
|
margin-top: rem(15);
|
|
}
|
|
&-01 {
|
|
.sub-section-inner {
|
|
height: rem(260);
|
|
.q-rate-list {
|
|
text-align: center;
|
|
padding-top: rem(38);
|
|
font-size: 0;
|
|
.q-rate-item {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
& + .q-rate-item {
|
|
margin-left: rem(86);
|
|
}
|
|
.q-rate-box {
|
|
position: relative;
|
|
width: rem(136);
|
|
height: rem(136);
|
|
border-radius: 50%;
|
|
.q-rate-inner {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: rem(136);
|
|
height: rem(136);
|
|
}
|
|
}
|
|
.q-rate-name {
|
|
font-size: rem(14);
|
|
margin-top: rem(20);
|
|
text-align: center;
|
|
}
|
|
&--green {
|
|
.q-rate-box {
|
|
border: rem(2) solid #15edbb;
|
|
}
|
|
.q-rate-name {
|
|
color: #15edbb;
|
|
}
|
|
}
|
|
&--yellow {
|
|
.q-rate-box {
|
|
border: rem(2) solid #ffa600;
|
|
}
|
|
.q-rate-name {
|
|
color: #ffa600;
|
|
}
|
|
}
|
|
&--blue {
|
|
.q-rate-box {
|
|
border: rem(2) solid #00ffff;
|
|
}
|
|
.q-rate-name {
|
|
color: #00ffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-02 {
|
|
.sub-section-inner {
|
|
height: rem(260);
|
|
.q-rate-list {
|
|
text-align: center;
|
|
padding-top: rem(10);
|
|
font-size: 0;
|
|
.q-rate-item {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
& + .q-rate-item {
|
|
margin-left: rem(20);
|
|
}
|
|
.q-rate-box {
|
|
position: relative;
|
|
width: rem(200);
|
|
height: rem(200);
|
|
.q-rate-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.q-rate-name {
|
|
font-size: rem(14);
|
|
color: #1ab1ff;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-03 {
|
|
.sub-section-inner {
|
|
height: rem(260);
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-04 {
|
|
.sub-section-inner {
|
|
height: rem(417);
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-05 {
|
|
.sub-section-inner {
|
|
height: rem(417);
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&--welding {
|
|
.sub-sections {
|
|
&:nth-child(1) {
|
|
width: rem(365);
|
|
}
|
|
& + .sub-sections {
|
|
margin-left: rem(13);
|
|
}
|
|
.sub-section {
|
|
.sub-section-inner {
|
|
height: rem(260);
|
|
}
|
|
& + .sub-section {
|
|
margin-top: rem(15);
|
|
}
|
|
&-01 {
|
|
.sub-section-inner {
|
|
.field-statistics {
|
|
padding-top: rem(36);
|
|
text-align: center;
|
|
font-size: 0;
|
|
.field-statistics-item {
|
|
display: inline-block;
|
|
& + .field-statistics-item {
|
|
margin-left: rem(100);
|
|
}
|
|
.field-statistics-bar {
|
|
position: relative;
|
|
width: rem(32);
|
|
height: rem(132);
|
|
margin: 0 auto;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: rem(-17);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: rem(66);
|
|
height: rem(22);
|
|
}
|
|
.field-statistics-bar-inner {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 0%;
|
|
bottom: 0;
|
|
left: 0;
|
|
transition: height 0.5s ease-in-out;
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
height: rem(10);
|
|
z-index: 1;
|
|
}
|
|
&::before {
|
|
top: rem(-5);
|
|
}
|
|
&::after {
|
|
bottom: rem(-5);
|
|
}
|
|
}
|
|
}
|
|
.field-statistics-title {
|
|
font-size: rem(14);
|
|
color: #fff;
|
|
margin-top: rem(27);
|
|
}
|
|
.field-statistics-value {
|
|
position: relative;
|
|
font-size: rem(16);
|
|
margin-top: rem(12);
|
|
padding-bottom: rem(10);
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: rem(56);
|
|
height: rem(4);
|
|
}
|
|
}
|
|
&--green {
|
|
.field-statistics-bar {
|
|
&::after {
|
|
background: url(../image/sub_index/welding/01_5.png) no-repeat
|
|
center center/rem(66) rem(22);
|
|
}
|
|
.field-statistics-bar-inner {
|
|
background: linear-gradient(
|
|
rgba(#17eebd, 0.2),
|
|
rgba(#17eebd, 0.8)
|
|
);
|
|
&::before,
|
|
&::after {
|
|
background: url(../image/sub_index/welding/01_3.png) no-repeat
|
|
center center/rem(32) rem(10);
|
|
}
|
|
}
|
|
}
|
|
.field-statistics-value {
|
|
color: #17eebd;
|
|
&::after {
|
|
background: url(../image/sub_index/welding/01_1.png) no-repeat
|
|
center center/rem(56) rem(4);
|
|
}
|
|
}
|
|
}
|
|
&--blue {
|
|
.field-statistics-bar {
|
|
&::after {
|
|
background: url(../image/sub_index/welding/01_6.png) no-repeat
|
|
center center/rem(66) rem(22);
|
|
}
|
|
.field-statistics-bar-inner {
|
|
background: linear-gradient(
|
|
rgba(#1bb2ff, 0.2),
|
|
rgba(#1bb2ff, 0.8)
|
|
);
|
|
&::before,
|
|
&::after {
|
|
background: url(../image/sub_index/welding/01_4.png) no-repeat
|
|
center center/rem(32) rem(10);
|
|
}
|
|
}
|
|
}
|
|
.field-statistics-value {
|
|
color: #1bb2ff;
|
|
&::after {
|
|
background: url(../image/sub_index/welding/01_2.png) no-repeat
|
|
center center/rem(56) rem(4);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-02 {
|
|
.sub-section-inner {
|
|
padding-top: rem(10);
|
|
.echarts-box {
|
|
width: rem(220);
|
|
height: rem(220);
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
&-03 {
|
|
.sub-section-inner {
|
|
padding: rem(20);
|
|
.echarts-box {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-04 {
|
|
.sub-section-inner {
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-05 {
|
|
.sub-section-inner {
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&-06 {
|
|
.sub-section-inner {
|
|
.echarts-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|