Skip to content

R
report-html-template
Commit 94c406d3 by ChenXiHi
Options

园区报告

parent 83968555
正在显示 包含 229 行增加 和 5 行删除
energy-report/assets/avgMonthlyLeft.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="10" height="68" viewBox="0 0 10 68"><g><g><g style="opacity:0.5;"><path d="M0.44667340624999996,62.48654375L6.39281640625,67.26774375L7.34390640625,66.08484375L1.96445940625,61.75934375L1.96445940625,6.38178375L7.34390640625,2.05625975L6.39281640625,0.87342775L0.44667340624999996,5.65462375L0.44667340624999996,62.48654375Z" fill-rule="evenodd" fill="#D8D8D8" fill-opacity="1"/></g><g><rect x="5.75830078125" y="0.4765625" width="3.0355730056762695" height="3.0355732440948486" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><rect x="5.75830078125" y="64.4921875" width="3.0355730056762695" height="3.0355732440948486" rx="0" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
energy-report/assets/avgMonthlyRight.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="10" height="68" viewBox="0 0 10 68"><g transform="matrix(-1,0,0,1,20,0)"><g><g style="opacity:0.5;"><path d="M10.44667340625,62.48654375L16.39281640625,67.26774375L17.34390640625,66.08484375L11.96445940625,61.75934375L11.96445940625,6.38178375L17.34390640625,2.05625975L16.39281640625,0.87342775L10.44667340625,5.65462375L10.44667340625,62.48654375Z" fill-rule="evenodd" fill="#D8D8D8" fill-opacity="1"/></g><g><rect x="15.7587890625" y="0.4765625" width="3.0355730056762695" height="3.0355732440948486" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><rect x="15.7587890625" y="64.4921875" width="3.0355730056762695" height="3.0355732440948486" rx="0" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
energy-report/assets/textBoxBg.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="1169" height="40" viewBox="0 0 1169 40"><defs><linearGradient x1="1" y1="0.5" x2="0" y2="0.5" id="master_svg0_19847_82606"><stop offset="0%" stop-color="#5CB3FF" stop-opacity="0"/><stop offset="100%" stop-color="#5CB3FF" stop-opacity="1"/></linearGradient></defs><g style="opacity:0.20000000298023224;"><rect x="0" y="0" width="1169" height="40" rx="20" fill="url(#master_svg0_19847_82606)" fill-opacity="1"/></g></svg>
\ No newline at end of file
energy-report/index.css
...@@ -3,10 +3,12 @@ ...@@ -3,10 +3,12 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
html, html,
body { body {
height: 100%; height: 100%;
} }
.energy-wrap { .energy-wrap {
height: 100%; height: 100%;
background-color: #152235; background-color: #152235;
...@@ -14,23 +16,29 @@ body { ...@@ -14,23 +16,29 @@ body {
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.energy-wrap .flex { .energy-wrap .flex {
display: block; display: block;
} }
.energy-wrap .flex .right { .energy-wrap .flex .right {
width: 100%; width: 100%;
} }
.energy-wrap .header { .energy-wrap .header {
height: 4vh; height: 4vh;
font-size: 18px; font-size: 18px;
} }
.top-15-wrap > .items { .top-15-wrap > .items {
height: 56px; height: 56px;
} }
.top-15-wrap > .items .company-name { .top-15-wrap > .items .company-name {
flex: 1; flex: 1;
} }
.top-15-wrap > .items .process { .top-15-wrap > .items .process {
position: absolute !important; position: absolute !important;
left: 50px; left: 50px;
...@@ -39,13 +47,16 @@ body { ...@@ -39,13 +47,16 @@ body {
width: calc(100% - 70px); width: calc(100% - 70px);
margin-right: 0 !important; margin-right: 0 !important;
} }
.production-portrait .popup { .production-portrait .popup {
width: 100%; width: 100%;
} }
} }
.flex { .flex {
display: flex; display: flex;
} }
.block-bg { .block-bg {
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
} }
...@@ -67,12 +78,14 @@ body { ...@@ -67,12 +78,14 @@ body {
font-size: 30px; font-size: 30px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.time { .time {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.month-check { .month-check {
position: relative; position: relative;
background-color: #152235; background-color: #152235;
...@@ -82,51 +95,67 @@ body { ...@@ -82,51 +95,67 @@ body {
width: 100px; width: 100px;
padding: 6px 0; padding: 6px 0;
} }
.month-check::-webkit-calendar-picker-indicator { .month-check::-webkit-calendar-picker-indicator {
position: absolute; position: absolute;
right: 0; right: 0;
padding-left: 100%; padding-left: 100%;
} }
.title { .title {
color: #fff; color: #fff;
margin: 20px 0; margin: 20px 0;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.title > img { .title > img {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 4px; margin-right: 4px;
} }
.chart-wrap { .chart-wrap {
} }
.echarts-box { .echarts-box {
width: 100%; width: 100%;
height: 400px; height: 400px;
/* height: 30vh; */ /* height: 30vh; */
} }
.gonglv { .gonglv {
height: 30vh; height: 30vh;
} }
.echarts-box1 { .echarts-box1 {
flex: 1; flex: 1;
} }
.echarts-box1#distribution-charts{
height: 30vh; .echarts-box1#distribution-charts {
height: 380px;
flex: 2;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
margin-right: 30px;
} }
.right { .right {
width: 40vw; width: 40vw;
height: 30vh; height: 30vh;
} }
.text-overflow { .text-overflow {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.top-15-wrap { .top-15-wrap {
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
} }
.top-15-wrap > .items { .top-15-wrap > .items {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
margin-bottom: 4px; margin-bottom: 4px;
...@@ -135,20 +164,24 @@ body { ...@@ -135,20 +164,24 @@ body {
color: #fff; color: #fff;
position: relative; position: relative;
} }
.top-15-wrap > .items .index { .top-15-wrap > .items .index {
width: 22px; width: 22px;
height: 18px; height: 18px;
flex-shrink: 0; flex-shrink: 0;
} }
.top-15-wrap > .items .company-name { .top-15-wrap > .items .company-name {
margin: 0 20px 0 10px; margin: 0 20px 0 10px;
width: 300px; width: 300px;
} }
.top-15-wrap > .items .process { .top-15-wrap > .items .process {
flex: 1; flex: 1;
margin-right: 20px; margin-right: 20px;
position: relative; position: relative;
} }
.top-15-wrap > .items .process > span { .top-15-wrap > .items .process > span {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -158,6 +191,7 @@ body { ...@@ -158,6 +191,7 @@ body {
position: absolute; position: absolute;
background: linear-gradient(to right, rgba(0, 216, 255, 1), rgba(0, 182, 255, 1)); background: linear-gradient(to right, rgba(0, 216, 255, 1), rgba(0, 182, 255, 1));
} }
.top-15-wrap > .items .process::after { .top-15-wrap > .items .process::after {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -165,28 +199,85 @@ body { ...@@ -165,28 +199,85 @@ body {
display: flex; display: flex;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
.top-15-wrap .items .unit { .top-15-wrap .items .unit {
width: 140px; width: 140px;
text-align: right; text-align: right;
} }
.top-15-wrap .items .unit > span { .top-15-wrap .items .unit > span {
/* font-size: 14px; */ /* font-size: 14px; */
} }
.distribution-wrap { .distribution-wrap {
display: flex;
}
.distribution-right {
flex: 1;
position: relative;
}
.distribution-right-top {
}
#slide {
position: absolute;
height: 310px;
overflow: hidden;
margin-bottom: 21px;
width: 100%;
} }
.distribution-right-bottom {
position: absolute;
bottom: 0;
}
::-webkit-scrollbar {
display: none;
}
.distribution-right-top-list {
background: rgba(255, 255, 255, 0.1);
padding: 12px;
display: flex;
justify-content: space-between;
font-size: 18px;
font-family: PingFang TC-Regular, PingFang TC;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 4px;
}
.distribution-right-top-two {
font-weight: 600;
}
.production-portrait { .production-portrait {
} }
.production-portrait-bottom {
background: rgba(8, 16, 24, 0.27);
padding: 18px 0 25px 55px;
margin-top: 30px;
}
.production-portrait > div { .production-portrait > div {
width: calc(100% / 2 - 10px); width: calc(100% / 2 - 10px);
height: 300px; height: 300px;
display: inline-flex; display: inline-flex;
} }
.popup { .popup {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(8, 16, 24, 0.27);
} }
.popup > span { .popup > span {
position: absolute; position: absolute;
background-color: rgba(52, 69, 94, 1); background-color: rgba(52, 69, 94, 1);
...@@ -202,29 +293,34 @@ body { ...@@ -202,29 +293,34 @@ body {
white-space: wrap; white-space: wrap;
text-align: center; text-align: center;
} }
.popup > span:nth-of-type(1) { .popup > span:nth-of-type(1) {
left: 20%; left: 20%;
top: 38%; top: 38%;
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.popup > span:nth-of-type(2) { .popup > span:nth-of-type(2) {
left: 55%; left: 55%;
top: 5%; top: 5%;
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.popup > span:nth-of-type(3) { .popup > span:nth-of-type(3) {
left: 70%; left: 70%;
top: 26%; top: 26%;
width: 72px; width: 72px;
height: 72px; height: 72px;
} }
.popup > div:nth-of-type(1) { .popup > div:nth-of-type(1) {
position: relative; position: relative;
width: 110px; width: 110px;
height: 110px; height: 110px;
} }
.popup > div:nth-of-type(1) > span { .popup > div:nth-of-type(1) > span {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -242,6 +338,7 @@ body { ...@@ -242,6 +338,7 @@ body {
white-space: wrap; white-space: wrap;
text-align: center; text-align: center;
} }
.popup > div:nth-of-type(1)::before { .popup > div:nth-of-type(1)::before {
position: absolute; position: absolute;
content: ''; content: '';
...@@ -252,6 +349,7 @@ body { ...@@ -252,6 +349,7 @@ body {
top: -10px; top: -10px;
border-radius: 50%; border-radius: 50%;
} }
.popup > div:nth-of-type(1)::after { .popup > div:nth-of-type(1)::after {
position: absolute; position: absolute;
content: ''; content: '';
...@@ -262,21 +360,26 @@ body { ...@@ -262,21 +360,26 @@ body {
top: 10px; top: 10px;
border-radius: 50%; border-radius: 50%;
} }
.popup.right > div:nth-of-type(1) > span { .popup.right > div:nth-of-type(1) > span {
background: linear-gradient(to bottom, rgba(246, 133, 0, 1), rgba(168, 91, 0, 1)); background: linear-gradient(to bottom, rgba(246, 133, 0, 1), rgba(168, 91, 0, 1));
} }
.popup.right > div:nth-of-type(1)::before { .popup.right > div:nth-of-type(1)::before {
background: rgba(246, 133, 0, 0.3); background: rgba(246, 133, 0, 0.3);
} }
.right.popup > div:nth-of-type(1)::after { .right.popup > div:nth-of-type(1)::after {
background: rgba(246, 133, 0, 0.3); background: rgba(246, 133, 0, 0.3);
} }
.popup > span:nth-of-type(4) { .popup > span:nth-of-type(4) {
left: 62%; left: 62%;
top: 68%; top: 68%;
width: 42px; width: 42px;
height: 42px; height: 42px;
} }
.popup > span:nth-of-type(5) { .popup > span:nth-of-type(5) {
left: 18%; left: 18%;
top: 68%; top: 68%;
...@@ -380,7 +483,7 @@ body { ...@@ -380,7 +483,7 @@ body {
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
font-family: DIN Alternate-Bold; font-family: DIN Alternate-Bold;
text-align: right; float: right;
} }
.chart-desc-unfinished { .chart-desc-unfinished {
...@@ -488,19 +591,134 @@ body { ...@@ -488,19 +591,134 @@ body {
} }
.invest-wrapper-left-bracket img { .invest-wrapper-left-bracket img {
width: 100%; height: 68px;
} }
.invest-wrapper-right-bracket img { .invest-wrapper-right-bracket img {
width: 100%; height: 68px;
} }
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
color: #c8565b; color: #c8565b;
} }
.analysis-content { .analysis-content {
height: 380px; height: 380px;
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
margin: 27px 0 37px; margin: 27px 0 37px;
} }
.centerPro{
display: flex;
margin-bottom: 30px;
}
.centerPro-left{
flex: 2;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
margin-right: 30px;
height: 304px;
}
.centerPro-right{
flex: 1;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 304px;
}
#repair-require7{
height: 200px
}
.centerPro-right-title{
font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
text-align: center;
}
.timePeriod {
margin-bottom: 19px;
}
.timePeriod-textBox {
width: 100%;
height: 28px;
background: linear-gradient(-90deg, rgba(92,179,255,0) 0%, rgba(92,179,255,0.2) 100%);
background-size: cover;
border-radius: 20px;
margin-bottom: 30px;
}
.timePeriod-textBox-text {
font-size: 12px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 12px;
display: inline-block;
margin-left: 20px;
margin-top: 8px;
}
.echarts-timePeriod {
width: 100%;
height: 380px;
background: rgba(8, 16, 24, 0.27);
padding: 20px 20px 20px 0;
margin-bottom: 24px;
}
.avgMonthlyBox {
background: rgba(255, 255, 255, 0.05);
height: 200px;
width: calc(100% - 2.4vw);
margin-bottom: 24px;
padding: 16px 30px 0 30px;
}
.avgMonthlyBox-title {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 22px;
letter-spacing: 1px;
margin-bottom: 39px;
}
.avgMonthlyBox-content {
display: flex;
width: 100%;
}
.content-item {
width: 15%;
padding-top: 17px;
text-align: center;
}
.item-text1 {
font-size: 14px;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 22px;
letter-spacing: 2px;
margin-bottom: 10px;
}
.item-text2 {
font-size: 24px;
font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
font-weight: 400;
color: #ffffff;
line-height: 27px;
margin-bottom: 10px;
}
.content-item-r {
width: 26%;
display: flex;
margin-left: 5%;
}
.item-r-text{
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 25px;
letter-spacing: 2px;
margin: 22px 1% 0 4%;
}
.item-r-text-red{
color: #FF6464;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论