Skip to content

Z
zh_zcb-ems
Commit a9a6516d authored by huangzihao's avatar huangzihao
Browse files
Options

修改

parent 3a9ce1ba
Show whitespace changes
Inline Side-by-side
Showing with 311 additions and 340 deletions
src/css/index.css
View file @ a9a6516d
...@@ -233,6 +233,12 @@ li { ...@@ -233,6 +233,12 @@ li {
.content .st-box .echarts-box .legend li:nth-child(2)::before { .content .st-box .echarts-box .legend li:nth-child(2)::before {
background: #01faf2; background: #01faf2;
} }
.content .st-box .echarts-box .legend li:nth-child(3)::before {
background: #eef043;
}
.content .st-box .echarts-box .legend li:nth-child(4)::before {
background: #c596ff;
}
.content .st-box .echarts-box .echarts-content { .content .st-box .echarts-box .echarts-content {
width: 380px; width: 380px;
height: 160px; height: 160px;
...@@ -259,6 +265,7 @@ li { ...@@ -259,6 +265,7 @@ li {
width: 865px; width: 865px;
height: 540px; height: 540px;
position: relative; position: relative;
top: 0px;
} }
.content .center-section .justify-between { .content .center-section .justify-between {
display: -webkit-box; display: -webkit-box;
...@@ -339,6 +346,9 @@ li { ...@@ -339,6 +346,9 @@ li {
top: 0; top: 0;
left: -72px; left: -72px;
} }
.content .center-section .center-top .center-content {
margin-top: 150px;
}
.content .center-section .center-top .center-content .box_1 { .content .center-section .center-top .center-content .box_1 {
width: 822px; width: 822px;
height: 78px; height: 78px;
...@@ -439,7 +449,7 @@ li { ...@@ -439,7 +449,7 @@ li {
.content .center-section .center-top .center-content .center-title-bottom { .content .center-section .center-top .center-content .center-title-bottom {
position: absolute; position: absolute;
left: 158px; left: 158px;
top: 532px; top: 825px;
width: 549px; width: 549px;
height: 14px; height: 14px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAi4AAAAXCAYAAAAsoMSTAAAAAXNSR0IArs4c6QAAAsNJREFUeF7t2rFrE1EcB/DfpTGpi0jp1M1NcBFEcHUS0cXRzb9BHAQH418hgkMDzioOrq6CuDi5uEmmokJbam3Sk8NLCepwd03ucuFzcKRN37336+fdhe+9SxI2AgQIECBAgEBLBJKW1KlMAgQIECBAgEAILk4CAgQIECBAoDUCgktrpkqhBAgQIECAgODiHCBAgAABAgRaIyC4tGaqFEqAAAECBAgILs4BAgQIECBAoDUCgktrpkqhBCoJTK/xVb7W01xm+loJykEECLRDYJU/zNoxA6okMH+B7LrO9s5/9vmP1myPxxHx954FGCGm2XkxOoGFCQguC6PVMYHaBaaBZS0iuhHRi4j1/PVMRGTvZ2FmVbYssEwi4igifkXEYf5z9nv2fvb3bBNiVmXG/R8E8ruyMhCCThktbQnUJzBdYcnCST8izm7cfH6rv3nxfmdt/VJ9ZTQwUhrp5Gj//fjHl+HOuwdv4+DbXh5ixnmAsQLTwLQYkkBBgdI3FkWDyOxz8uldXcGaNCNAYMECs6Glt3H7xY3++QsPO93+5QWPu3Tdp8fjUfrz+3Dv85vh7qeno4gQXpZulhRE4GQldPamonCAKRNcZp+XcydAYDkETr7Psnnn5fXeua1HSdK9thylNVrF4WRy8Gq8+/XZzuu7H/LHRlZeGp0SgxP4R2D2+2nzCy5b9z4+TiIdACdAgAABAgQILEIgjWQw2r7ypEjfhVZchJcilNoQIECAAAECZQXSSAej7auFQkvWd6HgMlNE2fZl69eeAIHTC7hO/xgWXno+PbkeCBCoKFD6OvUBV1HaYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C8guNRvbkQCBAgQIECgooDgUhHOYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C/wG9ZbZxhkNI47AAAAAElFTkSuQmCC") -4px -5px no-repeat; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAi4AAAAXCAYAAAAsoMSTAAAAAXNSR0IArs4c6QAAAsNJREFUeF7t2rFrE1EcB/DfpTGpi0jp1M1NcBFEcHUS0cXRzb9BHAQH418hgkMDzioOrq6CuDi5uEmmokJbam3Sk8NLCepwd03ucuFzcKRN37336+fdhe+9SxI2AgQIECBAgEBLBJKW1KlMAgQIECBAgEAILk4CAgQIECBAoDUCgktrpkqhBAgQIECAgODiHCBAgAABAgRaIyC4tGaqFEqAAAECBAgILs4BAgQIECBAoDUCgktrpkqhBCoJTK/xVb7W01xm+loJykEECLRDYJU/zNoxA6okMH+B7LrO9s5/9vmP1myPxxHx954FGCGm2XkxOoGFCQguC6PVMYHaBaaBZS0iuhHRi4j1/PVMRGTvZ2FmVbYssEwi4igifkXEYf5z9nv2fvb3bBNiVmXG/R8E8ruyMhCCThktbQnUJzBdYcnCST8izm7cfH6rv3nxfmdt/VJ9ZTQwUhrp5Gj//fjHl+HOuwdv4+DbXh5ixnmAsQLTwLQYkkBBgdI3FkWDyOxz8uldXcGaNCNAYMECs6Glt3H7xY3++QsPO93+5QWPu3Tdp8fjUfrz+3Dv85vh7qeno4gQXpZulhRE4GQldPamonCAKRNcZp+XcydAYDkETr7Psnnn5fXeua1HSdK9thylNVrF4WRy8Gq8+/XZzuu7H/LHRlZeGp0SgxP4R2D2+2nzCy5b9z4+TiIdACdAgAABAgQILEIgjWQw2r7ypEjfhVZchJcilNoQIECAAAECZQXSSAej7auFQkvWd6HgMlNE2fZl69eeAIHTC7hO/xgWXno+PbkeCBCoKFD6OvUBV1HaYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C8guNRvbkQCBAgQIECgooDgUhHOYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C/wG9ZbZxhkNI47AAAAAElFTkSuQmCC") -4px -5px no-repeat;
...@@ -452,7 +462,7 @@ li { ...@@ -452,7 +462,7 @@ li {
width: 818px; width: 818px;
position: absolute; position: absolute;
left: 31px; left: 31px;
top: 135px; top: 240px;
} }
.content .center-section .center-bottom .flex-row { .content .center-section .center-bottom .flex-row {
display: -webkit-box; display: -webkit-box;
......
src/index.html
View file @ a9a6516d
<html> <html>
<head>
<head>
<title></title> <title></title>
<link href="./css/index.css" rel="stylesheet" type="text/css" /> <link href="./css/index.css" rel="stylesheet" type="text/css" />
<link href="./css/stat-bar.css" rel="stylesheet" type="text/css" /> <link href="./css/stat-bar.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
<!--顶部标题栏--> <!--顶部标题栏-->
<div class="header"> <div class="header">
<div class="header-left"> <div class="header-left">
...@@ -31,22 +30,22 @@ ...@@ -31,22 +30,22 @@
<div class="stat-bar"> <div class="stat-bar">
<div class="stat-bar-inner"> <div class="stat-bar-inner">
<div class="stat-item"> <div class="stat-item">
<div class="tit">累计用电量</div> <div class="tit">年总能耗</div>
<div class="scroll-box"></div> <div class="scroll-box"></div>
<div class="suffix">万kWh</div> <div class="suffix">万kWh</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="tit">累计发电量</div> <div class="tit">年总发电量</div>
<div class="scroll-box"></div> <div class="scroll-box"></div>
<div class="suffix">万kWh</div> <div class="suffix">万kWh</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="tit">累计碳排放量</div> <div class="tit">年总减碳量</div>
<div class="scroll-box"></div> <div class="scroll-box"></div>
<div class="suffix">万t</div> <div class="suffix">万t</div>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<div class="tit">累计减碳量</div> <div class="tit">年能用费用</div>
<div class="scroll-box"></div> <div class="scroll-box"></div>
<div class="suffix">万t</div> <div class="suffix">万t</div>
</div> </div>
...@@ -66,10 +65,9 @@ ...@@ -66,10 +65,9 @@
<span class="bg-center"></span> <span class="bg-center"></span>
<div class="echarts-box"> <div class="echarts-box">
<div class="echarts-header"> <div class="echarts-header">
<div class="title">并网点电量（kWh）</div> <div class="title">发电日曲线（kWh）</div>
<ul class="legend"> <ul class="legend">
<li>用电量</li> <li>用电量</li>
<li>上送电量</li>
</ul> </ul>
</div> </div>
<div class="echarts-content" id="line_chart_1"></div> <div class="echarts-content" id="line_chart_1"></div>
...@@ -80,9 +78,9 @@ ...@@ -80,9 +78,9 @@
<span class="bg-center"></span> <span class="bg-center"></span>
<div class="echarts-box"> <div class="echarts-box">
<div class="echarts-header"> <div class="echarts-header">
<div class="title">总负荷日曲线（kWh）</div>
<ul class="legend"> <ul class="legend">
<li>楼层负荷</li> <li>楼层负荷</li>
<li>充电桩负荷</li>
</ul> </ul>
</div> </div>
<div class="echarts-content" id="line_chart_2"></div> <div class="echarts-content" id="line_chart_2"></div>
...@@ -93,12 +91,15 @@ ...@@ -93,12 +91,15 @@
<span class="bg-center"></span> <span class="bg-center"></span>
<div class="echarts-box"> <div class="echarts-box">
<div class="echarts-header"> <div class="echarts-header">
<div class="title">7日负荷占比（%）</div>
<ul class="legend"> <ul class="legend">
<li>负荷预测</li> <li>暖通</li>
<li>负荷功率</li> <li>照明</li>
<li>电梯</li>
<li>热水</li>
</ul> </ul>
</div> </div>
<div class="echarts-content" id="line_chart_3"></div> <div class="echarts-content" id="pie_chart_3"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -159,52 +160,6 @@ ...@@ -159,52 +160,6 @@
<div class="center-title-bottom"></div> <div class="center-title-bottom"></div>
</div> </div>
</div> </div>
<!--下部统计区域-->
<div class="center-bottom">
<!--科技感框-->
<div class="section_wrap">
<div class="section_in flex-row">
<ul class="section_list">
<li>
<div class="border">
<span></span>
</div>
<div class="content">
<div class="title">峰谷差</div>
<div class="percentage s-ring-1">--<span>%</span></div>
</div>
</li>
<li>
<div class="border">
<span></span>
</div>
<div class="content">
<div class="title">消纳率</div>
<div class="percentage s-ring-2">--<span>%</span></div>
</div>
</li>
<li>
<div class="border">
<span></span>
</div>
<div class="content">
<div class="title">碳排系数</div>
<div class="percentage s-ring-3">--<span>%</span></div>
</div>
</li>
<li>
<div class="border">
<span></span>
</div>
<div class="content">
<div class="title">系统效率</div>
<div class="percentage s-ring-4">--<span>%</span></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
<!--右侧内容区--> <!--右侧内容区-->
<div class="right-section"> <div class="right-section">
...@@ -212,12 +167,15 @@ ...@@ -212,12 +167,15 @@
<span class="bg-center"></span> <span class="bg-center"></span>
<div class="echarts-box"> <div class="echarts-box">
<div class="echarts-header"> <div class="echarts-header">
<div class="title">基本用能日负荷</div>
<ul class="legend"> <ul class="legend">
<li>光伏发电量</li> <li>暖通</li>
<li>碳减排量</li> <li>照明</li>
<li>电梯</li>
<li>热水</li>
</ul> </ul>
</div> </div>
<div class="echarts-content" id="line_chart_4"></div> <div class="echarts-content" id="pie_chart_4"></div>
</div> </div>
</div> </div>
...@@ -225,12 +183,10 @@ ...@@ -225,12 +183,10 @@
<span class="bg-center"></span> <span class="bg-center"></span>
<div class="echarts-box"> <div class="echarts-box">
<div class="echarts-header"> <div class="echarts-header">
<div class="title">发电计划(kW)</div> <div class="title">定制曲线运行跟踪</div>
<ul class="legend"> <ul class="legend">
<li>AC/DC</li> <li>参考</li>
<li>储能</li> <li>实际</li>
<li>光伏</li>
<li>负荷</li>
</ul> </ul>
</div> </div>
<div class="echarts-content" id="line_chart_5"></div> <div class="echarts-content" id="line_chart_5"></div>
...@@ -241,9 +197,9 @@ ...@@ -241,9 +197,9 @@
<span class="bg-center"></span> <span class="bg-center"></span>
<div class="echarts-box"> <div class="echarts-box">
<div class="echarts-header"> <div class="echarts-header">
<div class="title">系统综合运行效率</div>
<ul class="legend"> <ul class="legend">
<li>光伏预测</li> <li>光伏预测</li>
<li>光伏功率</li>
</ul> </ul>
</div> </div>
<div class="echarts-content" id="line_chart_6"></div> <div class="echarts-content" id="line_chart_6"></div>
...@@ -251,9 +207,9 @@ ...@@ -251,9 +207,9 @@
</div> </div>
</div> </div>
</div> </div>
</body> </body>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script> <script src="https://cdn.ucyber.cn/common/echarts.js"></script>
<script src="./js/tween.umd.js"></script> <script src="./js/tween.umd.js"></script>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
</html> </html>
src/js/index.js
View file @ a9a6516d
...@@ -3,67 +3,80 @@ const testUA = (regexp) => regexp.test(ua); ...@@ -3,67 +3,80 @@ const testUA = (regexp) => regexp.test(ua);
const isSafari = testUA(/safari/g) && !testUA(/chrome/g); const isSafari = testUA(/safari/g) && !testUA(/chrome/g);
const isWeChat = testUA(/micromessenger/g); const isWeChat = testUA(/micromessenger/g);
// 用电量、上送电量
const echart1Data = { const echart1Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"], date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
line1: [200, 190, 250, 100, 90, 100, 250], line1: [200, 190, 250, 100, 90, 100, 250],
line2: [100, 90, 200, 80, 60, 50, 200], line2: [100, 90, 200, 80, 60, 50, 200],
}; };
// 楼层负荷、充电桩负荷
const echart2Data = { const echart2Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"], date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
line1: [0.02, 0.3, 0.5, 1, 0.2, 0.3, 0.5], line1: [0.02, 0.3, 0.5, 1, 0.2, 0.3, 0.5],
line2: [0.01, 0.1, 0.2, 1, 0.5, 0.3, 0.8], line2: [0.01, 0.1, 0.2, 1, 0.5, 0.3, 0.8],
}; };
// 负荷预测、负荷功率 const echart3Data = [
const echart3Data = { {
date: [ value: 1048,
"0", name: "暖通",
"1", itemStyle: {
"2", color: "#4380f0",
"3", },
"4", },
"5", {
"6", value: 735,
"7", name: "照明",
"8", itemStyle: {
"9", color: "#01faf2",
"10", },
"11", },
"12", {
"13", value: 580,
"14", name: "电梯",
"15", itemStyle: {
"16", color: "#eef043",
"17", },
"18", },
"19", {
"20", value: 484,
"21", name: "热水",
"22", itemStyle: {
"23", color: "#c596ff",
"24", },
], },
line1: [ ];
0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 1, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03,
0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.1,
],
line2: [
0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 1, 0.02, 0.02, 0.03, 0.05, 0.05,
0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
],
};
// 光伏发电量、碳减排量 const echart4Data = [
const echart4Data = { {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"], value: 110,
line1: [0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.01], name: "暖通",
line2: [0.01, 0.01, 0.02, 0.03, 0.1, 0.03, 0.02], itemStyle: {
}; color: "#4380f0",
},
},
{
value: 888,
name: "照明",
itemStyle: {
color: "#01faf2",
},
},
{
value: 222,
name: "电梯",
itemStyle: {
color: "#eef043",
},
},
{
value: 333,
name: "热水",
itemStyle: {
color: "#c596ff",
},
},
];
// AC/DC、储能、光伏、负荷
const echart5Data = { const echart5Data = {
date: [ date: [
"0", "0",
...@@ -110,7 +123,6 @@ const echart5Data = { ...@@ -110,7 +123,6 @@ const echart5Data = {
], ],
}; };
// 光伏预测、光伏功率
const echart6Data = { const echart6Data = {
date: [ date: [
"0", "0",
...@@ -230,6 +242,48 @@ const lineChartOption = (xData, yData, interval) => { ...@@ -230,6 +242,48 @@ const lineChartOption = (xData, yData, interval) => {
}; };
}; };
/**
* echartjs 饼图通用配置
*/
const pieChartOption = (data, isPercent) => {
return {
tooltip: {
trigger: "item",
formatter: isPercent ? "{b}: {c}" : "{b}: {d}%",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: "rgba(25,93,199,.2)",
borderWidth: 2,
},
label: {
show: true,
formatter(param) {
if (isPercent) {
return param.name + ": " + param.percent + "%";
} else {
return param.name + ": " + param.value;
}
},
},
labelLine: {
normal: {
length: 8,
length2: 2,
},
},
data,
},
],
};
};
// 创建多组数字 // 创建多组数字
function createMultiSrollNum(numArr) { function createMultiSrollNum(numArr) {
const scrollBox = document.getElementsByClassName("scroll-box"); const scrollBox = document.getElementsByClassName("scroll-box");
...@@ -426,13 +480,6 @@ function setBallData(list) { ...@@ -426,13 +480,6 @@ function setBallData(list) {
}); });
} }
// 设置环形数据
function setRingData(list) {
list.forEach((_, idx) => {
document.querySelector(".s-ring-" + (idx + 1)).innerHTML = list[idx];
});
}
const leftLineChart = () => { const leftLineChart = () => {
// echart渲染 // echart渲染
const lineChart1 = echarts.init(document.getElementById("line_chart_1")); const lineChart1 = echarts.init(document.getElementById("line_chart_1"));
...@@ -443,11 +490,6 @@ const leftLineChart = () => { ...@@ -443,11 +490,6 @@ const leftLineChart = () => {
color: "#4a76cf", color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
}, },
{
data: echart1Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
]) ])
); );
...@@ -459,51 +501,16 @@ const leftLineChart = () => { ...@@ -459,51 +501,16 @@ const leftLineChart = () => {
color: "#4a76cf", color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
}, },
{
data: echart2Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
]) ])
); );
const lineChart3 = echarts.init(document.getElementById("line_chart_3")); const pieChart3 = echarts.init(document.getElementById("pie_chart_3"));
lineChart3.setOption( pieChart3.setOption(pieChartOption(echart3Data, true));
lineChartOption(
echart3Data.date,
[
{
data: echart3Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart3Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
],
3
)
);
}; };
const rightLineChart = () => { const rightLineChart = () => {
const lineChart4 = echarts.init(document.getElementById("line_chart_4")); const pieChart4 = echarts.init(document.getElementById("pie_chart_4"));
lineChart4.setOption( pieChart4.setOption(pieChartOption(echart4Data));
lineChartOption(echart4Data.date, [
{
data: echart4Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart4Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
])
);
const lineChart5 = echarts.init(document.getElementById("line_chart_5")); const lineChart5 = echarts.init(document.getElementById("line_chart_5"));
lineChart5.setOption( lineChart5.setOption(
...@@ -513,18 +520,12 @@ const rightLineChart = () => { ...@@ -513,18 +520,12 @@ const rightLineChart = () => {
{ {
data: echart5Data.line1, data: echart5Data.line1,
color: "#f1ec41", color: "#f1ec41",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
}, },
{ {
data: echart5Data.line2, data: echart5Data.line2,
color: "#c49ffe", color: "#c49ffe",
}, areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
{
data: echart5Data.line3,
color: "#4a76cf",
},
{
data: echart5Data.line4,
color: "#2dc9e3",
}, },
], ],
3 3
...@@ -541,11 +542,6 @@ const rightLineChart = () => { ...@@ -541,11 +542,6 @@ const rightLineChart = () => {
color: "#4a76cf", color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
}, },
{
data: echart6Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
], ],
3 3
) )
...@@ -575,7 +571,4 @@ window.onload = () => { ...@@ -575,7 +571,4 @@ window.onload = () => {
/***********************************中间球体****************************************/ /***********************************中间球体****************************************/
// 球体数据 // 球体数据
setBallData(ballData); setBallData(ballData);
/***********************************底部环形****************************************/
// 环形数据
setRingData(ringData);
}; };
src/less/index.less
View file @ a9a6516d
...@@ -210,6 +210,16 @@ li { ...@@ -210,6 +210,16 @@ li {
background: #01faf2; background: #01faf2;
} }
} }
&:nth-child(3) {
&::before {
background: #eef043;
}
}
&:nth-child(4) {
&::before {
background: #c596ff;
}
}
} }
} }
.echarts-content { .echarts-content {
...@@ -253,6 +263,7 @@ li { ...@@ -253,6 +263,7 @@ li {
width: 865px; width: 865px;
height: 540px; height: 540px;
position: relative; position: relative;
top: 0px;
.justify-between { .justify-between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -322,6 +333,7 @@ li { ...@@ -322,6 +333,7 @@ li {
} }
} }
.center-content { .center-content {
margin-top: 150px;
.box_1 { .box_1 {
width: 822px; width: 822px;
height: 78px; height: 78px;
...@@ -394,7 +406,7 @@ li { ...@@ -394,7 +406,7 @@ li {
.center-title-bottom { .center-title-bottom {
position: absolute; position: absolute;
left: 158px; left: 158px;
top: 532px; top: 825px;
width: 549px; width: 549px;
height: 14px; height: 14px;
//background: url(../images/center-title-bottom.png) -4px -5px no-repeat; //background: url(../images/center-title-bottom.png) -4px -5px no-repeat;
...@@ -411,7 +423,7 @@ li { ...@@ -411,7 +423,7 @@ li {
width: 818px; width: 818px;
position: absolute; position: absolute;
left: 31px; left: 31px;
top: 135px; top: 240px;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment