Skip to content

Z
zh_zcb-ems
Commit abb789a2 authored by chen.lingzhi's avatar chen.lingzhi
Browse files
Options

编写中间能源监测部分

parent 36ab4cd1
Hide whitespace changes
Inline Side-by-side
Showing with 819 additions and 31 deletions
css/index.css
View file @ abb789a2
......@@ -12,6 +12,9 @@ ul {
width: 100%;
background: url("../images/header-bg.png") no-repeat;
background-size: cover;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.header-left {
......@@ -26,7 +29,13 @@ ul {
}
.header-middle {
color: white;
flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.header-middle ul {
......@@ -55,7 +64,10 @@ ul {
border-bottom: 3px solid #01fff6;
}
.header-middle > div {
flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
font-size: 36px;
font-family: Source Han Sans CN;
......@@ -104,8 +116,14 @@ ul {
margin-right: 15px;
}
.content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.content .st-box {
width: 446px;
......@@ -118,7 +136,9 @@ ul {
content: " ";
display: block;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.content .st-box::before {
width: 25px;
......@@ -139,7 +159,9 @@ ul {
background: url(../images/container-center.png) repeat-x;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 25px;
}
.content .st-box .echarts-box {
......@@ -147,7 +169,13 @@ ul {
z-index: 2;
}
.content .st-box .echarts-box .echarts-header {
justify-content: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.content .st-box .echarts-box .echarts-header .title {
......@@ -160,14 +188,26 @@ ul {
text-shadow: 0px 0px 3px #17caf0;
}
.content .st-box .echarts-box .legend {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: 35px;
margin-right: 20px;
}
.content .st-box .echarts-box .legend li {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #ffffff;
font-size: 14px;
margin-right: 10px;
......@@ -192,7 +232,9 @@ ul {
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.content .electric-power-st-box .legend li:nth-child(1)::before {
background-color: #eef043 !important;
......@@ -206,3 +248,372 @@ ul {
.content .electric-power-st-box .legend li:nth-child(4)::before {
background-color: #01faf2 !important;
}
.content .center-section {
width: 865px;
height: 540px;
position: relative;
}
.content .center-section .justify-between {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.content .center-section .text-title {
width: 138px;
height: 20px;
overflow-wrap: break-word;
color: #52ccff;
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: left;
white-space: nowrap;
margin: 15px 0 0 28px;
line-height: 47px;
}
.content .center-section .text-globe {
position: absolute;
height: 110px;
background: url(../images/globe.png) 100% no-repeat;
background-size: 100% 100%;
width: 109px;
}
.content .center-section .text-num {
height: 80px;
overflow-wrap: break-word;
color: #e7ffff;
font-size: 35px;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
}
.content .center-section .center-top {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.content .center-section .center-top .center-title {
background: url("../images/center-title-bg.png") no-repeat;
width: 411px;
height: 54px;
position: relative;
}
.content .center-section .center-top .center-title > span {
width: 89px;
height: 22px;
overflow-wrap: break-word;
color: #17caf0;
font-size: 22px;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
line-height: 53px;
margin: 16px 0 0 168px;
}
.content .center-section .center-top .center-title .center-title-bg {
background: url(../images/center-title-top.png) no-repeat;
width: 549px;
height: 14px;
position: absolute;
top: 0;
left: -72px;
}
.content .center-section .center-top .center-content .box_1 {
width: 822px;
height: 78px;
margin: 8px 0 84px 37px;
}
.content .center-section .center-top .center-content .box_1 .box-left {
height: 77px;
background: url(../images/center-left-top.png) 100% no-repeat;
background-size: 100% 100%;
margin-top: 1px;
width: 194px;
position: relative;
}
.content .center-section .center-top .center-content .box_1 .box-left .globe_1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
left: 36px;
top: 60px;
}
.content .center-section .center-top .center-content .box_1 .box-left-bottom {
height: 56px;
background: url(../images/center-left-bottom.png) 100% no-repeat;
margin-top: 1px;
width: 194px;
position: relative;
}
.content .center-section .center-top .center-content .box_1 .box-left-bottom .globe_1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
left: 36px;
top: 60px;
}
.content .center-section .center-top .center-content .box_1 .box-right {
height: 77px;
background: url(../images/center-right-top.png) 100% no-repeat;
background-size: 100% 100%;
width: 194px;
position: relative;
}
.content .center-section .center-top .center-content .box_1 .box-right .globe_2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
left: 47px;
top: 61px;
}
.content .center-section .center-top .center-content .box_1 .box-right-bottom {
height: 56px;
background: url(../images/center-right-bottom.png) 100% no-repeat;
width: 194px;
position: relative;
}
.content .center-section .center-top .center-content .box_1 .box-right-bottom .globe_2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
left: 47px;
top: 61px;
}
.content .center-section .center-top .center-content .center-title-bottom {
position: absolute;
left: 158px;
top: 532px;
width: 549px;
height: 14px;
background: url(../images/center-title-bottom.png) -4px -5px no-repeat;
background-size: 558px 23px;
}
.content .center-section .center-top .center-content .section {
height: 404px;
background: url(../images/building.png) 100% no-repeat;
background-size: 100% 100%;
width: 818px;
position: absolute;
left: 31px;
top: 135px;
}
.content .center-section .center-bottom .flex-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.content .center-section .center-bottom .justify-between {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.content .center-section .center-bottom .section_1 {
height: 281px;
background: url(../images/container.png) 100% no-repeat;
background-size: 100% 100%;
margin-top: 15px;
width: 866px;
}
.content .center-section .center-bottom .section_1 .text-ball-num {
width: 64px;
height: 27px;
overflow-wrap: break-word;
color: #078792;
font-size: 35px;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
line-height: 35px;
}
.content .center-section .center-bottom .section_1 .text-ball-percent {
width: 64px;
height: 27px;
overflow-wrap: break-word;
color: #078792;
font-size: 24px;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.content .center-section .center-bottom .section_1 .text-wrapper {
width: 64px;
height: 27px;
overflow-wrap: break-word;
font-size: 0;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
line-height: 35px;
margin: 29px 5px 0px -68px;
}
.content .center-section .center-bottom .section_1 .section_2 {
width: 776px;
height: 176px;
padding: 52px 0 0 48px;
}
.content .center-section .center-bottom .section_1 .text-ball {
width: 176px;
height: 176px;
background: url(../images/ball.png) 100% no-repeat;
background-size: 100% 100%;
}
.content .center-section .center-bottom .section_1 .text-ball .text_73 {
width: 52px;
height: 18px;
overflow-wrap: break-word;
color: #ffffff;
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: center;
white-space: nowrap;
line-height: 136px;
margin: -50px 0 0 61px;
}
.content .center-section .center-bottom .section_1 .text-ball .text-wrapper_36 {
margin: -51px 0 64px 58px;
}
.content .center-section .center-bottom .section_1 .section_3 {
height: 176px;
background: url(../images/ball.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 24px;
width: 176px;
}
.content .center-section .center-bottom .section_1 .section_3 .group_27 {
margin: 26px 0 0 26px;
}
.content .center-section .center-bottom .section_1 .section_3 .group_27 .text-group_7 {
width: 83px;
height: 55px;
margin: 31px 0 0 24px;
}
.content .center-section .center-bottom .section_1 .section_3 .group_27 .text-group_7 .text_115 {
width: 54px;
height: 18px;
overflow-wrap: break-word;
color: #ffffff;
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: center;
white-space: nowrap;
line-height: 24px;
margin-left: 10px;
}
.content .center-section .center-bottom .section_1 .section_3 .group_27 .text-group_7 .text-wrapper_57 {
width: 83px;
}
.content .center-section .center-bottom .section_1 .section_4 {
height: 176px;
background: url(../images/ball.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 24px;
width: 176px;
}
.content .center-section .center-bottom .section_1 .section_4 .box_54 {
margin: 26px 0 0 26px;
}
.content .center-section .center-bottom .section_1 .section_4 .box_54 .text-group_8 {
width: 72px;
height: 54px;
margin: 32px 0 0 25px;
}
.content .center-section .center-bottom .section_1 .section_4 .box_54 .text-group_8 .text_118 {
width: 72px;
height: 17px;
overflow-wrap: break-word;
color: #ffffff;
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
.content .center-section .center-bottom .section_1 .section_5 {
height: 176px;
background: url(../images/ball.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 24px;
width: 176px;
}
.content .center-section .center-bottom .section_1 .section_5 .box_55 {
margin: 26px 0 0 26px;
}
.content .center-section .center-bottom .section_1 .section_5 .box_55 .text-group_9 {
width: 72px;
height: 55px;
margin: 31px 0 0 25px;
}
.content .center-section .center-bottom .section_1 .section_5 .box_55 .text-group_9 .text_121 {
width: 72px;
height: 18px;
overflow-wrap: break-word;
color: #ffffff;
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
/*# sourceMappingURL=index.css.map */
\ No newline at end of file
css/index.css.map
View file @ abb789a2
{"version":3,"file":"index.css","sources":["index.less"],"names":[],"mappings":"AAAA;EACE,cAAA;EACA,UAAA;EACA,gBAAgB,6BAAhB;;AAEF;EACE,gBAAA;;AAEF;EACE,kBAAA;EACA,aAAA;EACA,WAAA;EACA,gBAAgB,oCAAhB;EACA,sBAAA;EACA,aAAA;;AAEF;EACE,YAAA;;AAEF;EACE,YAAA;EACA,YAAA;EACA,qBAAA;EACA,gBAAgB,+BAAhB;EACA,sBAAA;;AAEF;EACE,YAAA;EACA,OAAA;EACA,aAAA;;AAHF,cAIE;EACE,qBAAA;EACA,gBAAA;;AANJ,cAIE,GAGE;EACE,qBAAA;EACA,WAAA;EACA,eAAA;;AAVN,cAIE,GAGE,GAIE;EACE,qBAAA;EACA,eAAA;EACA,+BAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;;AAEF,cAfJ,GAGE,GAYG,OAAQ;AACT,cAhBJ,GAGE,GAaG,MAAO;EACN,eAAA;EACA,+BAAA;EACA,gBAAA;EACA,cAAA;EACA,gCAAA;;AAIN,cAAE;EACA,OAAA;EACA,kBAAA;EACA,eAAA;EACA,+BAAA;EACA,iBAAA;EACA,OAAO,6DAAP;EACA,8CAAA;EACA,kBAAA;;AAGJ;EACE,YAAA;EACA,kBAAA;EACA,iBAAA;;AACA,aAAE;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,+BAAA;EACA,gBAAA;EACA,cAAA;;AACA,aARA,MAQE,OAAM;EACN,qBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAgB,+BAAhB;EACA,sBAAA;EACA,kBAAA;;AAEF,aAhBA,MAgBE,OAAM,UAAU;EAChB,qBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;;AAEF,aAxBA,MAwBE,OAAM;EACN,qBAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,gBAAgB,iCAAhB;EACA,wBAAA;EACA,kBAAA","sourceRoot":""}
\ No newline at end of file
{"version":3,"file":"index.css","sources":["index.less"],"names":[],"mappings":"AAAA;EACE,cAAA;EACA,UAAA;EACA,gBAAgB,6BAAhB;;AAEF;EACE,gBAAA;;AAEF;EACE,kBAAA;EACA,aAAA;EACA,WAAA;EACA,gBAAgB,oCAAhB;EACA,sBAAA;EACA,aAAA;;AAEF;EACE,YAAA;;AAEF;EACE,YAAA;EACA,YAAA;EACA,qBAAA;EACA,gBAAgB,+BAAhB;EACA,sBAAA;;AAEF;EACE,YAAA;EACA,OAAA;EACA,aAAA;;AAHF,cAIE;EACE,qBAAA;EACA,gBAAA;;AANJ,cAIE,GAGE;EACE,qBAAA;EACA,WAAA;EACA,eAAA;;AAVN,cAIE,GAGE,GAIE;EACE,qBAAA;EACA,eAAA;EACA,+BAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;;AAEF,cAfJ,GAGE,GAYG,OAAQ;AACT,cAhBJ,GAGE,GAaG,MAAO;EACN,eAAA;EACA,+BAAA;EACA,gBAAA;EACA,cAAA;EACA,gCAAA;;AAIN,cAAE;EACA,OAAA;EACA,kBAAA;EACA,eAAA;EACA,+BAAA;EACA,iBAAA;EACA,OAAO,6DAAP;EACA,8CAAA;EACA,kBAAA;;AAGJ;EACE,YAAA;EACA,kBAAA;EACA,iBAAA;;AACA,aAAE;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,+BAAA;EACA,gBAAA;EACA,cAAA;;AACA,aARA,MAQE,OAAM;EACN,qBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAgB,+BAAhB;EACA,sBAAA;EACA,kBAAA;;AAEF,aAhBA,MAgBE,OAAM,UAAU;EAChB,qBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;;AAEF,aAxBA,MAwBE,OAAM;EACN,qBAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,gBAAgB,iCAAhB;EACA,wBAAA;EACA,kBAAA;;AAMN;EACE,aAAA;EACA,8BAAA;;AAFF,QAIE;EACE,YAAA;EACA,aAAA;EACA,kBAAA;;AACA,QAJF,QAIG;AACD,QALF,QAKG;EACC,kBAAA;EACA,SAAS,GAAT;EACA,cAAA;EACA,QAAA;EACA,WAAW,gBAAX;;AAEF,QAZF,QAYG;EACC,WAAA;EACA,aAAA;EACA,uDAAA;EACA,OAAA;;AAEF,QAlBF,QAkBG;EACC,YAAA;EACA,aAAA;EACA,wDAAA;EACA,QAAA;;AA1BN,QAIE,QAwBE;EACE,cAAA;EACA,YAAA;EACA,aAAA;EACA,wDAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAW,gBAAX;EACA,UAAA;;AApCN,QAIE,QAkCE;EACE,kBAAA;EACA,UAAA;;AAxCN,QAIE,QAkCE,aAGE;EACE,8BAAA;EACA,aAAA;;AA3CR,QAIE,QAkCE,aAGE,gBAGE;EACE,eAAA;EACA,iBAAA;EACA,cAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,gCAAA;;AAnDV,QAIE,QAkCE,aAgBE;EACE,iBAAA;EACA,aAAA;EACA,gBAAA;EACA,kBAAA;;AA1DR,QAIE,QAkCE,aAgBE,QAKE;EACE,aAAA;EACA,mBAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;;AACA,QA7DR,QAkCE,aAgBE,QAKE,GAMG;EACC,iBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,SAAS,GAAT;;AAGA,QAtEV,QAkCE,aAgBE,QAKE,GAcG,UAAU,GACR;EACC,mBAAA;;AAIF,QA3EV,QAkCE,aAgBE,QAKE,GAmBG,UAAU,GACR;EACC,mBAAA;;AAhFd,QAIE,QAkCE,aA+CE;EACE,YAAA;EACA,aAAA;EACA,kBAAA;EACA,SAAA;EACA,SAAA;EACA,WAAW,gBAAX;;AASE,QAJR,uBACE,QACE,GACG,UAAU,GACR;EACC,oCAAA;;AAIF,QATR,uBACE,QACE,GAMG,UAAU,GACR;EACC,oCAAA;;AAIF,QAdR,uBACE,QACE,GAWG,UAAU,GACR;EACC,oCAAA;;AAIF,QAnBR,uBACE,QACE,GAgBG,UAAU,GACR;EACC,oCAAA;;AApHZ,QA0HE;EACE,YAAA;EACA,aAAA;EACA,kBAAA;;AA7HJ,QA0HE,gBAIE;EACE,aAAA;EACA,8BAAA;;AAhIN,QA0HE,gBAQE;EACE,YAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,mCAAA;EACA,gBAAA;EACA,mBAAA;EACA,qBAAA;EACA,iBAAA;;AA5IN,QA0HE,gBAoBE;EACE,kBAAA;EACA,aAAA;EACA,mDAAA;EACA,0BAAA;EACA,YAAA;;AAnJN,QA0HE,gBA2BE;EACE,YAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,gBAAA;EACA,mBAAA;;AA5JN,QA0HE,gBAoCE;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;;AAjKN,QA0HE,gBAoCE,YAIE;EACE,gBAAgB,0CAAhB;EACA,YAAA;EACA,YAAA;EACA,kBAAA;;AACA,QA7CN,gBAoCE,YAIE,cAKI;EACA,WAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,sBAAA;;AAjLV,QA0HE,gBAoCE,YAIE,cAiBE;EACE,yDAAA;EACA,YAAA;EACA,YAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;;AAzLV,QA0HE,gBAoCE,YA8BE,gBACE;EACE,YAAA;EACA,YAAA;EACA,uBAAA;;AAhMV,QA0HE,gBAoCE,YA8BE,gBACE,OAIE;EACE,YAAA;EACA,6DAAA;EACA,0BAAA;EACA,eAAA;EACA,YAAA;EACA,kBAAA;;AAvMZ,QA0HE,gBAoCE,YA8BE,gBACE,OAIE,UAOE;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,UAAA;EACA,SAAA;;AA7Md,QA0HE,gBAoCE,YA8BE,gBACE,OAmBE;EACE,YAAA;EACA,gEAAA;EACA,eAAA;EACA,YAAA;EACA,kBAAA;;AArNZ,QA0HE,gBAoCE,YA8BE,gBACE,OAmBE,iBAME;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,UAAA;EACA,SAAA;;AA3Nd,QA0HE,gBAoCE,YA8BE,gBACE,OAiCE;EACE,YAAA;EACA,8DAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;;AAnOZ,QA0HE,gBAoCE,YA8BE,gBACE,OAiCE,WAME;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,UAAA;EACA,SAAA;;AAzOd,QA0HE,gBAoCE,YA8BE,gBACE,OA+CE;EACE,YAAA;EACA,iEAAA;EACA,YAAA;EACA,kBAAA;;AAhPZ,QA0HE,gBAoCE,YA8BE,gBACE,OA+CE,kBAKE;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,UAAA;EACA,SAAA;;AAtPd,QA0HE,gBAoCE,YA8BE,gBA8DE;EACE,kBAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,YAAA;EACA,sEAAA;EACA,2BAAA;;AAjQV,QA0HE,gBAoCE,YA8BE,gBAuEE;EACE,aAAA;EACA,sDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;EACA,UAAA;;AA1QV,QA0HE,gBAoJE,eACE;EACE,aAAA;EACA,mBAAA;;AAjRR,QA0HE,gBAoJE,eAKE;EACE,aAAA;EACA,8BAAA;;AArRR,QA0HE,gBAoJE,eASE;EACE,aAAA;EACA,uDAAA;EACA,0BAAA;EACA,gBAAA;EACA,YAAA;;AA5RR,QA0HE,gBAoJE,eASE,WAME;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;;AAtSV,QA0HE,gBAoJE,eASE,WAiBE;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,iCAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;;AAjTV,QA0HE,gBAoJE,eASE,WA4BE;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,YAAA;EACA,iCAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,0BAAA;;AA5TV,QA0HE,gBAoJE,eASE,WAuCE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;;AAjUV,QA0HE,gBAoJE,eASE,WA4CE;EACE,YAAA;EACA,aAAA;EACA,kDAAA;EACA,0BAAA;;AAvUV,QA0HE,gBAoJE,eASE,WA4CE,WAKE;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,mCAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;EACA,sBAAA;;AAlVZ,QA0HE,gBAoJE,eASE,WA4CE,WAiBE;EACE,yBAAA;;AArVZ,QA0HE,gBAoJE,eASE,WAiEE;EACE,aAAA;EACA,kDAAA;EACA,0BAAA;EACA,iBAAA;EACA,YAAA;;AA7VV,QA0HE,gBAoJE,eASE,WAiEE,WAME;EACE,qBAAA;;AA/VZ,QA0HE,gBAoJE,eASE,WAiEE,WAME,UAEE;EACE,WAAA;EACA,YAAA;EACA,qBAAA;;AAnWd,QA0HE,gBAoJE,eASE,WAiEE,WAME,UAEE,cAIE;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,mCAAA;EACA,kBAAA;EACA,mBAAA;EACA,iBAAA;EACA,iBAAA;;AA9WhB,QA0HE,gBAoJE,eASE,WAiEE,WAME,UAEE,cAgBE;EACE,WAAA;;AAjXhB,QA0HE,gBAoJE,eASE,WA+FE;EACE,aAAA;EACA,kDAAA;EACA,0BAAA;EACA,iBAAA;EACA,YAAA;;AA3XV,QA0HE,gBAoJE,eASE,WA+FE,WAME;EACE,qBAAA;;AA7XZ,QA0HE,gBAoJE,eASE,WA+FE,WAME,QAEE;EACE,WAAA;EACA,YAAA;EACA,qBAAA;;AAjYd,QA0HE,gBAoJE,eASE,WA+FE,WAME,QAEE,cAIE;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,mCAAA;EACA,kBAAA;EACA,mBAAA;EACA,iBAAA;;AA3YhB,QA0HE,gBAoJE,eASE,WAyHE;EACE,aAAA;EACA,kDAAA;EACA,0BAAA;EACA,iBAAA;EACA,YAAA;;AArZV,QA0HE,gBAoJE,eASE,WAyHE,WAME;EACE,qBAAA;;AAvZZ,QA0HE,gBAoJE,eASE,WAyHE,WAME,QAEE;EACE,WAAA;EACA,YAAA;EACA,qBAAA;;AA3Zd,QA0HE,gBAoJE,eASE,WAyHE,WAME,QAEE,cAIE;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,mCAAA;EACA,kBAAA;EACA,mBAAA;EACA,iBAAA","sourceRoot":""}
\ No newline at end of file
css/index.less
View file @ abb789a2
......@@ -227,4 +227,311 @@ ul {
}
}
}
.center-section{
width: 865px;
height: 540px;
position: relative;
.justify-between{
display: flex;
justify-content: space-between;
}
.text-title {
width: 138px;
height: 20px;
overflow-wrap: break-word;
color: rgba(82, 204, 255, 1);
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: left;
white-space: nowrap;
margin: 15px 0 0 28px;
line-height: 47px;
}
.text-globe{
position: absolute;
height: 110px;
background: url(../images/globe.png) 100% no-repeat;
background-size: 100% 100%;
width: 109px;
}
.text-num {
height: 80px;
overflow-wrap: break-word;
color: rgba(231, 255, 255, 1);
font-size: 35px;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
}
.center-top{
display: flex;
flex-direction: column;
align-items: center;
.center-title{
background: url("../images/center-title-bg.png") no-repeat;
width: 411px;
height: 54px;
position: relative;
& > span{
width: 89px;
height: 22px;
overflow-wrap: break-word;
color: rgba(23, 202, 240, 1);
font-size: 22px;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
line-height: 53px;
margin: 16px 0 0 168px;
}
.center-title-bg{
background: url(../images/center-title-top.png) no-repeat;
width: 549px;
height: 14px;
position: absolute;
top: 0;
left: -72px;
}
}
.center-content{
.box_1 {
width: 822px;
height: 78px;
margin: 8px 0 84px 37px;
.box-left {
height: 77px;
background: url(../images/center-left-top.png) 100% no-repeat;
background-size: 100% 100%;
margin-top: 1px;
width: 194px;
position: relative;
.globe_1 {
display: flex;
justify-content: center;
align-items: center;
left: 36px;
top: 60px;
}
}
.box-left-bottom {
height: 56px;
background: url(../images/center-left-bottom.png) 100% no-repeat;
margin-top: 1px;
width: 194px;
position: relative;
.globe_1 {
display: flex;
justify-content: center;
align-items: center;
left: 36px;
top: 60px;
}
}
.box-right {
height: 77px;
background: url(../images/center-right-top.png) 100% no-repeat;
background-size: 100% 100%;
width: 194px;
position: relative;
.globe_2 {
display: flex;
justify-content: center;
align-items: center;
left: 47px;
top: 61px;
}
}
.box-right-bottom {
height: 56px;
background: url(../images/center-right-bottom.png) 100% no-repeat;
width: 194px;
position: relative;
.globe_2 {
display: flex;
justify-content: center;
align-items: center;
left: 47px;
top: 61px;
}
}
}
.center-title-bottom{
position: absolute;
left: 158px;
top: 532px;
width: 549px;
height: 14px;
background: url(../images/center-title-bottom.png) -4px -5px no-repeat;
background-size: 558px 23px;
}
.section {
height: 404px;
background: url(../images/building.png) 100% no-repeat;
background-size: 100% 100%;
width: 818px;
position: absolute;
left: 31px;
top: 135px;
}
}
}
.center-bottom{
.flex-row {
display: flex;
flex-direction: row;
}
.justify-between {
display: flex;
justify-content: space-between;
}
.section_1 {
height: 281px;
background: url(../images/container.png) 100% no-repeat;
background-size: 100% 100%;
margin-top: 15px;
width: 866px;
.text-ball-num {
width: 64px;
height: 27px;
overflow-wrap: break-word;
color: rgba(7, 135, 146, 1);
font-size: 35px;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
line-height: 35px;
}
.text-ball-percent {
width: 64px;
height: 27px;
overflow-wrap: break-word;
color: rgba(7, 135, 146, 1);
font-size: 24px;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.text-wrapper {
width: 64px;
height: 27px;
overflow-wrap: break-word;
font-size: 0;
font-family: SourceHanSansCN-Bold;
text-align: left;
white-space: nowrap;
line-height: 35px;
margin: 29px 5px 0px -68px;
}
.section_2 {
width: 776px;
height: 176px;
padding: 52px 0 0 48px;
}
.text-ball {
width: 176px;
height: 176px;
background: url(../images/ball.png) 100% no-repeat;
background-size: 100% 100%;
.text_73 {
width: 52px;
height: 18px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: center;
white-space: nowrap;
line-height: 136px;
margin: -50px 0 0 61px;
}
.text-wrapper_36 {
margin: -51px 0 64px 58px;
}
}
.section_3 {
height: 176px;
background: url(../images/ball.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 24px;
width: 176px;
.group_27 {
margin: 26px 0 0 26px;
.text-group_7 {
width: 83px;
height: 55px;
margin: 31px 0 0 24px;
.text_115 {
width: 54px;
height: 18px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: center;
white-space: nowrap;
line-height: 24px;
margin-left: 10px;
}
.text-wrapper_57 {
width: 83px;
}
}
}
}
.section_4 {
height: 176px;
background: url(../images/ball.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 24px;
width: 176px;
.box_54 {
margin: 26px 0 0 26px;
.text-group_8 {
width: 72px;
height: 54px;
margin: 32px 0 0 25px;
.text_118 {
width: 72px;
height: 17px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
}
}
}
.section_5 {
height: 176px;
background: url(../images/ball.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 24px;
width: 176px;
.box_55 {
margin: 26px 0 0 26px;
.text-group_9 {
width: 72px;
height: 55px;
margin: 31px 0 0 25px;
.text_121 {
width: 72px;
height: 18px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 18px;
font-family: SourceHanSansCN-Medium;
text-align: center;
white-space: nowrap;
line-height: 24px;
}
}
}
}
}
}
}
}
index.html
View file @ abb789a2
......@@ -84,34 +84,104 @@
<!--上部统计区域-->
<div class="center-top">
<!--中间标题-->
<div class="center-title"></div>
<div class="center-title">
<span>能源监测</span>
<div class="center-title-bg"></div>
</div>
<div class="center-content">
<!--中间左侧统计-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--中间空区域-->
<div></div>
<!--中间左侧统计-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div class="box_1 justify-between">
<div class="box-left">
<span class="text-title">单平米能耗(kWh)</span>
<div class="globe_1 text-globe">
<span class="text-num">88</span>
</div>
</div>
<div class="box-right">
<span class="text-title">单平米碳排(kWh)</span>
<div class="globe_2 text-globe">
<span class="text-num">100</span>
</div>
</div>
</div>
<div class="box_1 justify-between">
<div class="box-left">
<span class="text-title">充电桩功率(kW)</span>
<div class="globe_1 text-globe">
<span class="text-num">88</span>
</div>
</div>
<div class="box-right">
<span class="text-title">光伏功率(kW)</span>
<div class="globe_2 text-globe">
<span class="text-num">100</span>
</div>
</div>
</div>
<div class="box_1 justify-between">
<div class="box-left-bottom">
<span class="text-title">负荷功率(kW)</span>
<div class="globe_1 text-globe">
<span class="text-num">88</span>
</div>
</div>
<div class="box-right-bottom">
<span class="text-title">联络线功率(kW)</span>
<div class="globe_2 text-globe">
<span class="text-num">100</span>
</div>
</div>
</div>
<div class="section"></div>
<div class="center-title-bottom"></div>
</div>
</div>
<!--下部统计区域-->
<div class="center-bottom">
<!--科技感框-->
<div class="st-box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="section_1">
<div class="section_2 flex-row">
<div class="text-ball flex-col">
<span class="text_73">峰谷差</span>
<div class="text-wrapper_36 text-wrapper">
<span class="text-ball-num">88</span>
<span class="text-ball-percent">%</span>
</div>
</div>
<div class="section_3 flex-col">
<div class="group_27 flex-row">
<div class="text-group_7 flex-col justify-between">
<span class="text_115">消纳率</span>
<div class="text-wrapper_57 text-wrapper">
<span class="text-ball-num">100</span>
<span class="text-ball-percent">%</span>
</div>
</div>
</div>
</div>
<div class="section_4 flex-col">
<div class="box_54 flex-row">
<div class="text-group_8 flex-col justify-between">
<span class="text_118">碳排系数</span>
<div class="text-wrapper">
<span class="text-ball-num">98</span>
<span class="text-ball-percent">%</span>
</div>
</div>
</div>
</div>
<div class="section_5 flex-col">
<div class="box_55 flex-row">
<div class="text-group_9 flex-col justify-between">
<span class="text_121">系统效率</span>
<div class="text-wrapper">
<span class="text-ball-num">88</span>
<span class="text-ball-percent">%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......
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