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

energy-report/index.css

+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+html,
+body {
+    height: 100%;
+}
+.energy-wrap {
+    height: 100%;
+    background-color: #152235;
+    padding: 0 4vw 0 4vw;
+    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;
+        height: 20px;
+        top: 44px;
+        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);
+}
+
+.header {
+    height: 6vh;
+    width: 60vw;
+    max-width: 766px;
+    background: url('./assets/top-bg.png') no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    left: 0;
+    right: 0;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    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;
+    outline: none;
+    border: 1px solid #fff;
+    color: #fff;
+    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;
+}
+.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;
+    display: flex;
+    padding: 12px 20px;
+    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%;
+    content: '';
+    display: flex;
+    width: 70%;
+    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%;
+    content: '';
+    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 {
+}
+.production-portrait {
+}
+.production-portrait > div {
+    width: calc(100% / 2 - 10px);
+    height: 300px;
+    display: inline-flex;
+}
+.popup {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.popup > span {
+    position: absolute;
+    background-color: rgba(52, 69, 94, 1);
+    border: 1px solid rgba(103, 120, 144, 1);
+    border-radius: 50%;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    padding: 10px;
+    box-sizing: border-box;
+    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%;
+    background: linear-gradient(to bottom, rgba(92, 179, 255, 1), rgba(8, 86, 155, 1));
+    position: absolute;
+    border-radius: 50%;
+    z-index: 1;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    padding: 20px;
+    box-sizing: border-box;
+    white-space: wrap;
+    text-align: center;
+}
+.popup > div:nth-of-type(1)::before {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    background-color: rgba(52, 69, 94, 1);
+    left: -10px;
+    top: -10px;
+    border-radius: 50%;
+}
+.popup > div:nth-of-type(1)::after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    background-color: rgba(52, 69, 94, 1);
+    left: 10px;
+    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%;
+    width: 72px;
+    height: 72px;
+}
+
+.echarts-title {
+    width: 211px;
+    height: 25px;
+}
+
+.echarts-title img {
+    width: 100%;
+}
+
+.echarts-title-repair {
+    padding: 3%;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.echarts-title-content {
+    display: flex;
+    align-items: center;
+}
+
+.echarts-title-top {
+    background: url('../assets/contract-bg.png') no-repeat;
+    width: 208px;
+    height: 208px;
+    background-size: cover;
+}
+
+.echarts-title-repair-top {
+    width: 208px;
+    height: 208px;
+}
+
+.echarts-title-repair-top2 {
+    height: 228px;
+
+    width: 100%;
+}
+
+.echarts-title-repair-left {
+    margin-right: 3%;
+}
+
+.echarts-title-repair-list {
+    display: flex;
+    margin-top: 13px;
+}
+
+.echarts-title-repair-list img {
+    width: 20px;
+    height: 20px;
+    margin-top: 3px;
+}
+
+.echarts-title-repair-list-right {
+    margin-left: 13px;
+    font-size: 18px;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+}
+
+.echarts-title-repair-list-right-red {
+    color: rgba(255, 100, 100, 1);
+}
+
+.chart-desc {
+    position: relative;
+    margin-top: -15px;
+}
+
+.chart-desc img {
+    width: 165px;
+    height: 18px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.chart-desc-task {
+    position: relative;
+    display: flex;
+    margin-top: 10px;
+}
+
+.chart-desc-text {
+    color: #fff;
+    font-size: 18px;
+    margin-left: 8px;
+    margin-top: 4px;
+}
+
+.chart-desc-value {
+    margin-left: 30px;
+    color: #fff;
+    font-size: 22px;
+    font-weight: 700;
+    font-family: DIN Alternate-Bold;
+    text-align: right;
+}
+
+.chart-desc-unfinished {
+    margin-top: 10px;
+}
+
+.chart-desc-unfinished-value {
+    color: #fff;
+    font-size: 22px;
+    font-weight: 700;
+    margin-left: auto;
+    margin-right: 10px;
+    font-family: DIN Alternate-Bold;
+}
+
+.chart-desc-daily-legend {
+    width: 8px;
+    height: 8px;
+    background: rgba(92, 179, 255, 0.302);
+    opacity: 1;
+    border: 2px solid #5cb3ff;
+    margin-top: 12px;
+    margin-left: 20px;
+}
+
+.chart-desc-handle-legend {
+    width: 8px;
+    height: 8px;
+    background: rgba(255, 100, 100, 0.302);
+    opacity: 1;
+    border: 2px solid #ff6464;
+    margin-top: 12px;
+    margin-left: 20px;
+}
+
+.will-finished {
+    background: rgba(237, 241, 243, 0.302);
+    opacity: 1;
+    border: 2px solid #e9eff2;
+    margin-top: 12px;
+    margin-left: 20px;
+    width: 8px;
+    height: 8px;
+}
+
+.electricity-content {
+    height: 236px;
+    background: rgba(255, 255, 255, 0.05);
+    margin-bottom: 36px;
+}
+
+.electricity-content-title {
+    font-size: 18px;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    padding: 16px 0 0 24px;
+}
+
+.chart-desc-icon {
+    width: 8px;
+    height: 8px;
+    background: rgba(246, 133, 0, 0.302);
+    opacity: 1;
+    border: 2px solid #f68500;
+    margin-top: 12px;
+    margin-left: 20px;
+}
+
+.chart-desc-icon2 {
+    background: rgba(63, 241, 217, 0.302);
+    border: 2px solid #3ff1d9;
+}
+
+.chart-desc-icon3 {
+    background: rgba(255, 100, 100, 0.302);
+    border: 2px solid #ff6464;
+}
+
+.chart-desc-icon4 {
+    background: rgba(92, 179, 255, 0.302);
+    border: 2px solid #5cb3ff;
+}
+
+.echarts-box1-right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 50px;
+    margin-top: 20px;
+}
+
+.invest-wrapper-content {
+    display: flex;
+    height: 68px;
+    align-items: center;
+    justify-content: center;
+}
+
+.invest-wrapper-content-first {
+    font-size: 18px;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+}
+
+.invest-wrapper-left-bracket img {
+    width: 100%;
+}
+
+.invest-wrapper-right-bracket img {
+    width: 100%;
+}
+
+.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;
+}