20220905代码初始化
This commit is contained in:
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 482 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 384 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 564 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 582 B |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
Binary file not shown.
|
After Width: | Height: | Size: 295 B |
Binary file not shown.
|
After Width: | Height: | Size: 299 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,230 @@
|
||||
function drawCircle(obj) {
|
||||
var drawing_elem = document.getElementById(obj.drawing_elem);
|
||||
var percent = +drawing_elem.getAttribute("data-value");
|
||||
// drawing_elem = setupCanvas(drawing_elem)
|
||||
var width = drawing_elem.width;
|
||||
var height = drawing_elem.height;
|
||||
var percentfontcolor = obj.percentfontcolor;
|
||||
var unitfontcolor = obj.unitfontcolor;
|
||||
var percentfontsize = obj.percentfontsize || 15;
|
||||
var unitfontsize = obj.unitfontsize || 15;
|
||||
var unitvalue = obj.unitvalue || "%";
|
||||
var bordercolor = obj.bordercolor || "";
|
||||
var borderwidth = obj.borderwidth || 0;
|
||||
var bgcolor = obj.bgcolor || "";
|
||||
var forecolor = obj.forecolor;
|
||||
var lineWidth = obj.lineWidth || 12;
|
||||
var speedstep = obj.speedstep || 3;
|
||||
var addLeft = obj.addLeft || 0;
|
||||
var lineGap = obj.lineGap || "";
|
||||
var title = obj.title || "";
|
||||
var titlefontcolor = obj.titlefontcolor || "";
|
||||
var titlefontsize = obj.titlefontsize || 15;
|
||||
var center_x = width / 2;
|
||||
var center_y = height / 2;
|
||||
var rad = obj.rad || (Math.PI * 2) / 100;
|
||||
var radStart = obj.radStart || 0;
|
||||
var radEnd = obj.radEnd || Math.PI * 2;
|
||||
var radDrawStart = obj.radDrawStart || (-Math.PI * 1) / 2;
|
||||
var unitadd = obj.unitadd || (-Math.PI * 1) / 2;
|
||||
var speed = 0;
|
||||
|
||||
var context = drawing_elem.getContext("2d");
|
||||
|
||||
// // 设置清晰度
|
||||
// function setupCanvas(canvas) {
|
||||
// var dpr = (scale = window.devicePixelRatio || 1);
|
||||
// var rect = canvas.getBoundingClientRect();
|
||||
// canvas.width = rect.width * dpr;
|
||||
// canvas.height = rect.height * dpr;
|
||||
// canvas.style.width = rect.width + "px";
|
||||
// canvas.style.height = rect.height + "px";
|
||||
// return canvas;
|
||||
// }
|
||||
|
||||
// 绘制边框圆环
|
||||
function drawOuterBorderCircle() {
|
||||
// 第一个圆
|
||||
context.save();
|
||||
context.lineWidth = borderwidth;
|
||||
context.beginPath();
|
||||
context.arc(
|
||||
center_x,
|
||||
center_y,
|
||||
center_x - borderwidth,
|
||||
radStart,
|
||||
radEnd,
|
||||
false
|
||||
);
|
||||
context.strokeStyle = bordercolor;
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
context.restore();
|
||||
|
||||
// 第二个圆
|
||||
context.save();
|
||||
context.lineWidth = borderwidth;
|
||||
context.beginPath();
|
||||
context.arc(
|
||||
center_x,
|
||||
center_y,
|
||||
center_x - lineWidth,
|
||||
radStart,
|
||||
radEnd,
|
||||
false
|
||||
);
|
||||
context.strokeStyle = bordercolor;
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
context.restore();
|
||||
}
|
||||
|
||||
// 绘制背景圆圈
|
||||
function drawOuterCircle() {
|
||||
context.save();
|
||||
context.lineWidth = lineWidth;
|
||||
var radius = center_x - context.lineWidth;
|
||||
if (Object.prototype.toString.call(bgcolor) === "[object Array]") {
|
||||
var gradient = context.createLinearGradient(height, 0, 0, 0);
|
||||
bgcolor.forEach(function (item) {
|
||||
gradient.addColorStop(item.step, item.color);
|
||||
});
|
||||
context.strokeStyle = gradient;
|
||||
} else {
|
||||
context.strokeStyle = bgcolor;
|
||||
}
|
||||
if (lineGap) {
|
||||
context.lineCap = lineGap;
|
||||
}
|
||||
context.beginPath();
|
||||
context.arc(center_x, center_y, radius, radStart, radEnd, false);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
context.restore();
|
||||
}
|
||||
|
||||
//绘制运动圆环
|
||||
function drawInnerCircle(n) {
|
||||
context.save();
|
||||
context.lineWidth = lineWidth;
|
||||
var radius = center_x - (borderwidth ? context.lineWidth / 2 : lineWidth);
|
||||
if (Object.prototype.toString.call(forecolor) === "[object Array]") {
|
||||
var gradient = context.createLinearGradient(height, 0, 0, 0);
|
||||
forecolor.forEach(function (item) {
|
||||
gradient.addColorStop(item.step, item.color);
|
||||
});
|
||||
context.strokeStyle = gradient;
|
||||
} else {
|
||||
context.strokeStyle = forecolor;
|
||||
}
|
||||
if (lineGap) {
|
||||
context.lineCap = lineGap;
|
||||
}
|
||||
context.beginPath();
|
||||
context.arc(
|
||||
center_x,
|
||||
center_y,
|
||||
radius,
|
||||
radDrawStart,
|
||||
radDrawStart + n * rad,
|
||||
false
|
||||
);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
context.restore();
|
||||
}
|
||||
|
||||
//绘制文字
|
||||
function drawText(n) {
|
||||
//声明%
|
||||
context.save();
|
||||
context.font = unitfontsize + "px Helvetica";
|
||||
var text1_width = context.measureText(unitvalue).width;
|
||||
context.restore();
|
||||
|
||||
//绘制数字
|
||||
context.save();
|
||||
var font_size = percentfontsize;
|
||||
var text_value = "";
|
||||
if (n % parseInt(n) > 0 && n % parseInt(n) < 1) {
|
||||
text_value = n.toFixed(2);
|
||||
} else if (n % parseInt(n) === 0 || n == 0) {
|
||||
text_value = n.toFixed(0);
|
||||
}
|
||||
context.fillStyle = percentfontcolor;
|
||||
context.font = font_size + "px Helvetica";
|
||||
var text_width = context.measureText(text_value).width;
|
||||
context.fillText(
|
||||
text_value,
|
||||
center_x - text_width / 2 - text1_width / 2 + addLeft,
|
||||
center_y + font_size / 2 + (title ? -titlefontsize / 2 - 1 : 0)
|
||||
);
|
||||
context.restore();
|
||||
|
||||
//绘制%
|
||||
context.save();
|
||||
context.font = unitfontsize + "px Helvetica";
|
||||
context.fillStyle = unitfontcolor;
|
||||
context.fillText(
|
||||
unitvalue,
|
||||
center_x - text_width / 2 + text_width - text1_width / 2 + addLeft,
|
||||
center_y +
|
||||
unitfontsize / 2 +
|
||||
unitadd +
|
||||
(title ? -titlefontsize / 2 - 5 : 0)
|
||||
);
|
||||
context.restore();
|
||||
|
||||
// 绘制数字下面的说明
|
||||
if (title) {
|
||||
context.save();
|
||||
context.fillStyle = titlefontcolor;
|
||||
context.font = titlefontsize + "px Helvetica";
|
||||
var title_width = context.measureText(title).width;
|
||||
context.fillText(
|
||||
title,
|
||||
center_x - title_width / 2,
|
||||
center_y + titlefontsize / 2 + font_size / 2 + 1
|
||||
);
|
||||
context.restore();
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制
|
||||
function startDraw(speed) {
|
||||
context.save();
|
||||
context.clearRect(0, 0, width, height);
|
||||
|
||||
if (bordercolor) {
|
||||
drawOuterBorderCircle();
|
||||
}
|
||||
if (bgcolor) {
|
||||
drawOuterCircle();
|
||||
}
|
||||
drawText(speed);
|
||||
if (speed != 0) {
|
||||
drawInnerCircle(speed);
|
||||
}
|
||||
context.restore();
|
||||
}
|
||||
|
||||
// 执行动画
|
||||
(function drawFrame() {
|
||||
if (percent == 0) {
|
||||
startDraw(speed);
|
||||
return;
|
||||
}
|
||||
if (speed >= percent) {
|
||||
speed = percent;
|
||||
startDraw(speed);
|
||||
return;
|
||||
}
|
||||
if (percent - speed >= speedstep) {
|
||||
speed += speedstep;
|
||||
} else {
|
||||
speed += percent - speed;
|
||||
}
|
||||
startDraw(speed);
|
||||
window.requestAnimationFrame(drawFrame);
|
||||
})();
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,102 @@
|
||||
$theme-color: #1ab1ff;
|
||||
$theme-title-color: #00ffff;
|
||||
|
||||
$base_width: 1920;
|
||||
$base_fontSize: 192;
|
||||
|
||||
@function rem($px) {
|
||||
@return $px / $base_fontSize * 1rem;
|
||||
}
|
||||
|
||||
* {
|
||||
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"); //IE
|
||||
src: url("../font/方正大黑_GBK.woff") format("woff"),
|
||||
url("../font/方正大黑_GBK.ttf") format("truetype"); //non-IE
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "液晶数字";
|
||||
src: url("../font/液晶数字.eot?") format("eot"); //IE
|
||||
src: url("../font/液晶数字.woff") format("woff"),
|
||||
url("../font/液晶数字.ttf") format("truetype"); //non-IE
|
||||
}
|
||||
|
||||
/*谷歌、safari、qq浏览器、360浏览器滚动条样式*/
|
||||
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
||||
::-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: #010a2c;
|
||||
}
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #071857;
|
||||
}
|
||||
/*滑块效果*/
|
||||
::-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);
|
||||
}
|
||||
|
||||
/*IE滚动条颜色*/
|
||||
html {
|
||||
scrollbar-face-color: #071857; /*滚动条颜色*/
|
||||
scrollbar-highlight-color: #010a2c;
|
||||
scrollbar-3dlight-color: #010a2c;
|
||||
scrollbar-darkshadow-color: #010a2c;
|
||||
scrollbar-shadow-color: #071857; /*滑块边色*/
|
||||
scrollbar-arrow-color: rgba(#010a2c, 0.4); /*箭头颜色*/
|
||||
scrollbar-track-color: #071857; /*背景颜色*/
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: ($base_width / $base_fontSize) * 1vw;
|
||||
@media screen and (max-width: 1200px) {
|
||||
font-size: 120px;
|
||||
}
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 1200px;
|
||||
min-height: 768px;
|
||||
font-family: Microsoft YaHei;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dis-flex{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-1{
|
||||
flex: 1;
|
||||
}
|
||||
@@ -0,0 +1,564 @@
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user