Merge branch 'main' of http://47.108.78.218:28999/frontend/report-html-template

0e701f29 · Tippi.Rao · a5cd02f7 · ef2885b1 · 0e701f29 · 0e701f29
Commit 0e701f29 authored Jun 16, 2023 by Tippi.Rao
--- a/energy-report/assets/avgMonthlyIcon.svg
+++ b/energy-report/assets/avgMonthlyIcon.svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="123" height="98" viewBox="0 0 123 98"><defs><linearGradient x1="0.45588240027427673" y1="0.7766991853713989" x2="0.4485294222831726" y2="0.019417470321059227" id="master_svg0_10629_015266"><stop offset="0%" stop-color="#FD5656" stop-opacity="1"/><stop offset="100%" stop-color="#FD5656" stop-opacity="0"/></linearGradient><filter id="master_svg1_19847_99715" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="53.880699157714844" height="62.60801696777344"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2" dx="0"/><feGaussianBlur stdDeviation="0"/><feColorMatrix type="matrix" values="0 0 0 0 0.3874000012874603 0 0 0 0 0.1135082021355629 0 0 0 0 0.1135082021355629 0 0 0 1 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_10629_012297"><stop offset="2.857142873108387%" stop-color="#FFE5E5" stop-opacity="1"/><stop offset="99.28571581840515%" stop-color="#EC7E72" stop-opacity="1"/></linearGradient></defs><g><g style="opacity:0.30000001192092896;"><path d="M24.0552,69.9480375C24.0552,69.9480375,1,8.6484375,1,8.6484375C1,8.6484375,122,8.6484375,122,8.6484375C122,8.6484375,100.0578,69.9481375,100.0578,69.9481375C100.0578,69.9481375,61.8185,88.5708375,61.8185,88.5708375C61.8185,88.5708375,24.0552,69.9480375,24.0552,69.9480375Z" fill="url(#master_svg0_10629_015266)" fill-opacity="1"/></g><g style="opacity:0.4000000059604645;"><path d="M61.54584921875,53.65625C61.54584921875,53.65625,25.64794921875,69.95115,25.64794921875,69.95115C25.64794921875,69.95115,61.54584921875,87.79795,61.54584921875,87.79795C61.54584921875,87.79795,98.22454921875,69.95115,98.22454921875,69.95115C98.22454921875,69.95115,61.54584921875,53.65625,61.54584921875,53.65625Z" fill="#FD5656" fill-opacity="1"/><path d="M99.40974921875,69.93045000000001L98.42754921875,69.49415L61.54354921875,53.10815L24.48349921875,69.93055L61.54344921875,88.35515000000001L99.40974921875,69.93045000000001ZM97.03944921875,69.97175L61.54804921875,54.20435L26.81239921875,69.97165L61.54814921875,87.24074999999999L97.03944921875,69.97175Z" fill-rule="evenodd" fill="#FD5656" fill-opacity="1"/></g><g style="opacity:0.20000000298023224;"><path d="M61.98178984375,67.62109375C61.98178984375,67.62109375,30.32958984375,81.69389375,30.32958984375,81.69389375C30.32958984375,81.69389375,61.981689843750004,97.10699375,61.981689843750004,97.10699375C61.981689843750004,97.10699375,94.32188984375,81.69389375,94.32188984375,81.69389375C94.32188984375,81.69389375,61.98178984375,67.62109375,61.98178984375,67.62109375Z" fill="#FD5656" fill-opacity="1"/><path d="M95.52748984375,81.67319375L94.52138984375,81.23549375L61.97958984375,67.07486375L29.14520984375,81.67329375L61.97938984375,97.66199375L95.52748984375,81.67319375ZM93.11628984375,81.71459375L61.98388984375,68.16732375L31.51396984375,81.71449375L61.983989843749995,96.55199375000001L93.11628984375,81.71459375Z" fill-rule="evenodd" fill="#FD5656" fill-opacity="1"/></g><g style="opacity:0.800000011920929;"><path d="" fill="#FD5656" fill-opacity="1"/><path d="M59.01224921875,54.117634L67.98714921875,57.865610000000004L68.37244921875,56.94284L59.39754921875,53.194866L59.01224921875,54.117634ZM99.43884921875,69.91635L87.52804921875,64.94235L87.14264921875,65.86505L97.01034921875,69.98585L89.05924921875,73.85464999999999L89.49674921875,74.75385L99.43884921875,69.91635ZM24.51416921875,69.94585000000001L34.18158921875,74.75195L34.626759218749996,73.85655L26.78172921875,69.95635L35.23107921875,65.85345L34.79426921875,64.95395L24.51416921875,69.94585000000001ZM61.54364921875,88.35505L70.53574921875,83.97975L70.09824921875,83.08055L61.54844921875,87.24065L53.18434921875,83.08245L52.73914921875,83.97785L61.54364921875,88.35505Z" fill-rule="evenodd" fill="#FD5656" fill-opacity="1"/></g><g filter="url(#master_svg1_19847_99715)"><path d="M89.04957065429687,19.088116996765137Q89.04957065429687,18.695516996765136,88.99847065429688,18.306316996765137Q88.94727065429687,17.91701699676514,88.84587065429687,17.537816996765137Q88.74437065429687,17.158616996765137,88.59437065429688,16.795816996765137Q88.44447065429688,16.433016996765136,88.24847065429688,16.092816996765137Q88.05247065429688,15.752716996765137,87.81387065429688,15.440916996765136Q87.57527065429687,15.129216996765138,87.29807065429688,14.851316996765137Q87.02077065429688,14.573316996765136,86.70977065429688,14.333816996765137Q86.39867065429686,14.094316996765137,86.05907065429687,13.897416996765136L65.11877065429687,1.7564019967651368Q64.94817065429687,1.6575369967651368,64.77157065429688,1.5700769967651367Q64.59497065429687,1.4826159967651367,64.41297065429687,1.4069369967651366Q64.23097065429687,1.3312579967651368,64.04437065429687,1.2676879967651367Q63.85777065429687,1.2041169967651366,63.66747065429688,1.1529279967651367Q63.477070654296874,1.1017389967651368,63.28377065429687,1.0631529967651367Q63.09047065429688,1.0245666967651368,62.89507065429687,0.9987497967651368Q62.699670654296874,0.9729329967651367,62.502970654296874,0.9599966967651368Q62.30637065429687,0.9470603467651367,62.10927065429688,0.9470603467651367Q61.912070654296876,0.9470603467651367,61.71547065429688,0.9599966967651368Q61.51877065429687,0.9729329967651367,61.32337065429687,0.9987497967651368Q61.127970654296874,1.0245666967651368,60.93467065429687,1.0631529967651367Q60.74137065429687,1.1017389967651368,60.550970654296876,1.1529279967651367Q60.360670654296875,1.2041169967651366,60.17407065429688,1.2676879967651367Q59.987570654296874,1.3312579967651368,59.80557065429687,1.4069369967651366Q59.62357065429687,1.4826159967651367,59.44687065429687,1.5700769967651367Q59.27027065429688,1.6575369967651368,59.099770654296876,1.7564019967651368L38.159380654296875,13.897416996765136Q37.81976065429687,14.094316996765137,37.50869065429688,14.333816996765137Q37.19763065429687,14.573316996765136,36.920420654296876,14.851316996765137Q36.64321065429687,15.129216996765138,36.40458065429687,15.440916996765136Q36.165957654296875,15.752716996765137,35.96998265429688,16.092816996765137Q35.774007654296874,16.433016996765136,35.62402565429687,16.795816996765137Q35.47404365429688,17.158616996765137,35.372611654296875,17.537816996765137Q35.27117965429687,17.91701699676514,35.22002815429688,18.306316996765137Q35.16887617129687,18.695516996765136,35.16887617129687,19.088116996765137L35.16887712429688,43.414016996765135Q35.16887712429688,43.806616996765136,35.22002905429687,44.19581699676514Q35.27118065429688,44.58511699676514,35.37261265429687,44.964316996765135Q35.474044654296875,45.34351699676514,35.62402665429688,45.70631699676514Q35.77400865429688,46.06911699676514,35.969983654296875,46.409316996765135Q36.16595865429687,46.749416996765135,36.40458065429687,47.06121699676514Q36.64321065429687,47.372916996765134,36.920420654296876,47.65081699676514Q37.19763065429687,47.928816996765136,37.508700654296874,48.168316996765135Q37.81976065429687,48.407816996765135,38.159380654296875,48.604716996765134L59.099770654296876,60.74571699676514Q59.27027065429688,60.84461699676514,59.44687065429687,60.932016996765135Q59.62357065429687,61.019516996765134,59.80557065429687,61.09521699676514Q59.987570654296874,61.170916996765136,60.17407065429688,61.234416996765134Q60.360670654296875,61.298016996765135,60.550970654296876,61.349216996765136Q60.74137065429687,61.40041699676514,60.93467065429687,61.43901699676513Q61.127970654296874,61.477616996765136,61.32337065429687,61.50341699676514Q61.51877065429687,61.529216996765136,61.71547065429688,61.54211699676514Q61.912070654296876,61.555116996765136,62.10927065429688,61.555116996765136Q62.30637065429687,61.555116996765136,62.502970654296874,61.54211699676514Q62.699670654296874,61.529216996765136,62.89507065429687,61.50341699676514Q63.09047065429688,61.47751699676514,63.28377065429687,61.43901699676513Q63.477070654296874,61.40041699676514,63.66747065429688,61.349216996765136Q63.85777065429687,61.298016996765135,64.04437065429687,61.234416996765134Q64.23097065429687,61.170916996765136,64.41297065429687,61.09521699676514Q64.59497065429687,61.019516996765134,64.77157065429688,60.932016996765135Q64.94817065429687,60.84461699676514,65.11877065429687,60.74571699676514L86.05907065429687,48.604716996765134Q86.39867065429686,48.407816996765135,86.70977065429688,48.168316996765135Q87.02077065429688,47.928816996765136,87.29807065429688,47.65081699676514Q87.57527065429687,47.372916996765134,87.81387065429688,47.06121699676514Q88.05247065429688,46.749416996765135,88.24847065429688,46.409316996765135Q88.44447065429688,46.06911699676514,88.59447065429688,45.70631699676514Q88.74437065429687,45.34351699676514,88.84587065429687,44.964316996765135Q88.94727065429687,44.58511699676514,88.99847065429688,44.19581699676514Q89.04957065429687,43.806616996765136,89.04957065429687,43.414016996765135L89.04957065429687,19.088116996765137ZM63.099070654296874,17.698116996765137C63.62237065429687,17.070516996765136,64.48457065429687,16.845716996765137,65.24577065429688,17.138416996765137C66.02277065429688,17.425616996765136,66.48567065429688,18.143716996765136,66.39277065429687,18.921116996765136L65.41527065429688,27.163616996765136L71.07247065429686,27.163616996765136C71.76987065429688,27.163616996765136,72.39947065429688,27.521916996765135,72.71197065429688,28.106816996765136C73.02607065429687,28.684216996765137,72.96857065429688,29.380116996765135,72.54977065429688,29.898316996765136L60.93617065429687,44.60971699676514C60.57497065429688,45.055316996765136,60.03237065429688,45.311516996765135,59.46177065429687,45.308516996765135C59.265670654296876,45.30561699676514,59.069570654296875,45.27591699676514,58.88237065429688,45.216716996765136C58.14957065429687,45.01391699676514,57.63647065429687,44.35201699676514,57.620270654296874,43.588016996765134L57.620270654296874,34.89981699676514L52.840370654296876,34.89981699676514C52.15917065429687,34.911716996765136,51.52517065429687,34.54601699676514,51.194970654296874,33.947816996765134C50.882070654296875,33.36701699676514,50.95277065429688,32.65341699676514,51.37337065429688,32.14591699676514L63.099070654296874,17.698116996765137Z" fill-rule="evenodd" fill="url(#master_svg2_10629_012297)" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
--- a/energy-report/assets/avgMonthlyLeft.svg
+++ b/energy-report/assets/avgMonthlyLeft.svg
+<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
--- a/energy-report/assets/avgMonthlyRight.svg
+++ b/energy-report/assets/avgMonthlyRight.svg
+<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
--- a/energy-report/assets/textBoxBg.svg
+++ b/energy-report/assets/textBoxBg.svg
+<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
--- a/energy-report/index.css
+++ b/energy-report/index.css
@@ -3,10 +3,12 @@
    padding: 0;
    list-style: none;
 }
+
 html,
 body {
    height: 100%;
 }
+
 .energy-wrap {
    height: 100%;
    background-color: #152235;
@@ -14,23 +16,29 @@ body {
    box-sizing: border-box;
    overflow: auto;
 }
+
 @media screen and (max-width: 768px) {
    .energy-wrap .flex {
        display: block;
    }
+
    .energy-wrap .flex .right {
        width: 100%;
    }
+
    .energy-wrap .header {
        height: 4vh;
        font-size: 18px;
    }
+
    .top-15-wrap > .items {
        height: 56px;
    }
+
    .top-15-wrap > .items .company-name {
        flex: 1;
    }
+
    .top-15-wrap > .items .process {
        position: absolute !important;
        left: 50px;
@@ -39,13 +47,16 @@ body {
        width: calc(100% - 70px);
        margin-right: 0 !important;
    }
+
    .production-portrait .popup {
        width: 100%;
    }
 }
+
 .flex {
    display: flex;
 }
+
 .block-bg {
    background: rgba(8, 16, 24, 0.27);
 }
@@ -67,12 +78,14 @@ body {
    font-size: 30px;
    padding-bottom: 10px;
 }
+
 .time {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
+
 .month-check {
    position: relative;
    background-color: #152235;
@@ -82,51 +95,67 @@ body {
    width: 100px;
    padding: 6px 0;
 }
+
 .month-check::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    padding-left: 100%;
 }
+
 .title {
    color: #fff;
    margin: 20px 0;
    display: flex;
    align-items: center;
 }
+
 .title > img {
    width: 18px;
    height: 18px;
    margin-right: 4px;
 }
+
 .chart-wrap {
 }
+
 .echarts-box {
    width: 100%;
    height: 400px;
    /* height: 30vh; */
 }
+
 .gonglv {
    height: 30vh;
 }
+
 .echarts-box1 {
    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 {
    width: 40vw;
    height: 30vh;
 }
+
 .text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
+
 .top-15-wrap {
    max-height: 500px;
    overflow-y: auto;
 }
+
 .top-15-wrap > .items {
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 4px;
@@ -135,20 +164,24 @@ body {
    color: #fff;
    position: relative;
 }
+
 .top-15-wrap > .items .index {
    width: 22px;
    height: 18px;
    flex-shrink: 0;
 }
+
 .top-15-wrap > .items .company-name {
    margin: 0 20px 0 10px;
    width: 300px;
 }
+
 .top-15-wrap > .items .process {
    flex: 1;
    margin-right: 20px;
    position: relative;
 }
+
 .top-15-wrap > .items .process > span {
    width: 100%;
    height: 100%;
@@ -158,6 +191,7 @@ body {
    position: absolute;
    background: linear-gradient(to right, rgba(0, 216, 255, 1), rgba(0, 182, 255, 1));
 }
+
 .top-15-wrap > .items .process::after {
    width: 100%;
    height: 100%;
@@ -165,28 +199,85 @@ body {
    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
 }
+
 .top-15-wrap .items .unit {
    width: 140px;
    text-align: right;
 }
+
 .top-15-wrap .items .unit > span {
    /* font-size: 14px; */
 }
+
 .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-bottom {
+    background: rgba(8, 16, 24, 0.27);
+    padding: 18px 0 25px 55px;
+    margin-top: 30px;
+}
+
 .production-portrait > div {
    width: calc(100% / 2 - 10px);
    height: 300px;
    display: inline-flex;
 }
+
 .popup {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
+    background: rgba(8, 16, 24, 0.27);
 }
+
 .popup > span {
    position: absolute;
    background-color: rgba(52, 69, 94, 1);
@@ -202,29 +293,34 @@ body {
    white-space: wrap;
    text-align: center;
 }
+
 .popup > span:nth-of-type(1) {
    left: 20%;
    top: 38%;
    width: 22px;
    height: 22px;
 }
+
 .popup > span:nth-of-type(2) {
    left: 55%;
    top: 5%;
    width: 22px;
    height: 22px;
 }
+
 .popup > span:nth-of-type(3) {
    left: 70%;
    top: 26%;
    width: 72px;
    height: 72px;
 }
+
 .popup > div:nth-of-type(1) {
    position: relative;
    width: 110px;
    height: 110px;
 }
+
 .popup > div:nth-of-type(1) > span {
    width: 100%;
    height: 100%;
@@ -242,6 +338,7 @@ body {
    white-space: wrap;
    text-align: center;
 }
+
 .popup > div:nth-of-type(1)::before {
    position: absolute;
    content: '';
@@ -252,6 +349,7 @@ body {
    top: -10px;
    border-radius: 50%;
 }
+
 .popup > div:nth-of-type(1)::after {
    position: absolute;
    content: '';
@@ -262,21 +360,26 @@ body {
    top: 10px;
    border-radius: 50%;
 }
+
 .popup.right > div:nth-of-type(1) > span {
    background: linear-gradient(to bottom, rgba(246, 133, 0, 1), rgba(168, 91, 0, 1));
 }
+
 .popup.right > div:nth-of-type(1)::before {
    background: rgba(246, 133, 0, 0.3);
 }
+
 .right.popup > div:nth-of-type(1)::after {
    background: rgba(246, 133, 0, 0.3);
 }
+
 .popup > span:nth-of-type(4) {
    left: 62%;
    top: 68%;
    width: 42px;
    height: 42px;
 }
+
 .popup > span:nth-of-type(5) {
    left: 18%;
    top: 68%;
@@ -380,7 +483,7 @@ body {
    font-size: 22px;
    font-weight: 700;
    font-family: DIN Alternate-Bold;
-    text-align: right;
+    float: right;
 }

 .chart-desc-unfinished {
@@ -488,19 +591,134 @@ body {
 }

 .invest-wrapper-left-bracket img {
-    width: 100%;
+    height: 68px;
 }

 .invest-wrapper-right-bracket img {
-    width: 100%;
+    height: 68px;
 }

 .invest-wrapper-content-customers {
    color: #c8565b;
 }
+
 .analysis-content {
    height: 380px;
    background: rgba(8, 16, 24, 0.27);
    border-radius: 0px 0px 0px 0px;
    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;
+}
--- a/energy-report/index.html
+++ b/energy-report/index.html