Skip to content

R
report-html-template
Commit 2cba8846 by 陈曦冉
Options

合并分支 'feature/branch_yx' 到 'main' 

css修改

查看合并请求 !2
parents 533c25dd 7a0f94f6
正在显示 包含 348 行增加 和 152 行删除
energy-report/index.css
...@@ -138,12 +138,22 @@ body { ...@@ -138,12 +138,22 @@ body {
flex: 2; flex: 2;
} }
#distribution-charts { @media screen and (min-width: 769px){
height: 380px; #distribution-charts {
flex: 2; height: 380px;
background: rgba(8, 16, 24, 0.27); flex: 2;
padding: 15px; background: rgba(8, 16, 24, 0.27);
margin-right: 30px; padding: 15px;
margin-right: 30px;
}
}
@media screen and (max-width: 768px){
#distribution-charts {
height: 380px;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
}
} }
.right { .right {
...@@ -221,69 +231,143 @@ body { ...@@ -221,69 +231,143 @@ body {
/* font-size: 14px; */ /* font-size: 14px; */
} }
.distribution-wrap { @media screen and (min-width: 769px) {
display: flex; .distribution-wrap {
} display: flex;
}
.distribution-right {
flex: 1;
position: relative;
}
.distribution-right { .distribution-right-top {
flex: 1;
position: relative;
}
.distribution-right-top { }
} #slide {
position: absolute;
height: 270px;
overflow: hidden;
margin-bottom: 21px;
width: 100%;
}
#slide { .distribution-right-bottom {
position: absolute; position: absolute;
height: 270px; bottom: 0;
overflow: hidden; }
margin-bottom: 21px;
width: 100%;
}
.distribution-right-bottom { ::-webkit-scrollbar {
position: absolute; display: none;
bottom: 0; }
}
::-webkit-scrollbar { .distribution-right-top-list {
display: none; 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;
}
} }
.distribution-right-top-list { @media screen and (max-width: 768px) {
background: rgba(255, 255, 255, 0.1); .distribution-wrap {
padding: 12px; display: flex;
display: flex; flex-direction: column;
justify-content: space-between; }
font-size: 18px; .distribution-right {
font-family: PingFang TC-Regular, PingFang TC; flex: 1;
font-weight: 400; position: relative;
color: #FFFFFF; }
margin-bottom: 4px;
.distribution-right-top {
}
#slide {
position: absolute;
height: 270px;
overflow: hidden;
margin-bottom: 21px;
width: 100%;
}
.distribution-right-bottom {
margin-top: 290px;
}
::-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;
}
} }
.distribution-right-top-two { @media screen and (min-width: 769px) {
font-weight: 600; .production-portrait {
display: flex;
justify-content: space-between;
}
} }
.production-portrait { @media screen and (max-width: 768px) {
display: flex; .production-portrait {
justify-content: space-between; display: flex;
flex-direction: column;
}
} }
.production-portrait-bottom { @media screen and (min-width: 769px) {
background: rgba(8, 16, 24, 0.27); .production-portrait-bottom {
padding: 10px 0 25px 55px; background: rgba(8, 16, 24, 0.27);
margin-top: 30px; padding: 10px 0 25px 55px;
margin-top: 30px;
}
.production-portrait > div {
width: calc(100% / 2 - 10px);
height: 380px;
display: inline-flex;
}
} }
.production-portrait > div { @media screen and (max-width: 768px) {
width: calc(100% / 2 - 10px); .production-portrait-bottom {
height: 380px; background: rgba(8, 16, 24, 0.27);
display: inline-flex; padding: 20px;
margin-top: 10px;
}
.production-portrait > div {
width: calc(100% / 2 - 10px);
height: 380px;
display: inline-flex;
}
} }
.popup { .popup {
position: relative; position: relative;
display: flex; display: flex;
...@@ -726,17 +810,43 @@ body { ...@@ -726,17 +810,43 @@ body {
margin: 27px 0 37px; margin: 27px 0 37px;
} }
.centerPro { @media screen and (min-width: 769px) {
display: flex; .centerPro {
margin-bottom: 30px; display: flex;
margin-bottom: 30px;
}
.centerPro-left {
flex: 2;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
margin-right: 30px;
height: 354px;
}
.centerPro-right {
flex: 1;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 354px;
}
} }
.centerPro-left { @media screen and (max-width: 768px) {
flex: 2; .centerPro {
background: rgba(8, 16, 24, 0.27); display: flex;
padding: 15px; flex-direction: column;
margin-right: 30px; margin-bottom: 30px;
height: 354px; }
.centerPro-left {
background: rgba(8, 16, 24, 0.27);
padding: 15px;
}
.centerPro-right {
margin-top: 10px;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 354px;
}
} }
#repair-require6 { #repair-require6 {
...@@ -744,13 +854,6 @@ body { ...@@ -744,13 +854,6 @@ body {
margin-top: -5px margin-top: -5px
} }
.centerPro-right {
flex: 1;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 354px;
}
#repair-require7 { #repair-require7 {
height: 200px; height: 200px;
margin-top: -10px; margin-top: -10px;
...@@ -826,28 +929,56 @@ body { ...@@ -826,28 +929,56 @@ body {
margin-bottom: 19px; margin-bottom: 19px;
} }
.timePeriod-textBox { @media screen and (min-width: 769px){
width: 100%; .timePeriod-textBox {
height: 40px; width: 100%;
background: linear-gradient( height: 40px;
-90deg, background: linear-gradient(
rgba(92, 179, 255, 0) 0%, -90deg,
rgba(92, 179, 255, 0.2) 100% rgba(92, 179, 255, 0) 0%,
); rgba(92, 179, 255, 0.2) 100%
background-size: cover; );
border-radius: 20px; background-size: cover;
margin-bottom: 30px; border-radius: 20px;
margin-bottom: 30px;
}
.timePeriod-textBox-text {
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 12px;
display: inline-block;
margin-left: 20px;
margin-top: 13px;
}
} }
.timePeriod-textBox-text { @media screen and (max-width: 768px){
font-size: 16px; .timePeriod-textBox {
font-family: PingFang SC-Regular, PingFang SC; width: 100%;
font-weight: 400; height: 40px;
color: #ffffff; background: linear-gradient(
line-height: 12px; -90deg,
display: inline-block; rgba(92, 179, 255, 0) 0%,
margin-left: 20px; rgba(92, 179, 255, 0.2) 100%
margin-top: 13px; );
background-size: cover;
border-radius: 20px;
margin-bottom: 15px;
}
.timePeriod-textBox-text {
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 12px;
display: inline-block;
margin-left: 20px;
margin-top: 13px;
}
} }
.echarts-timePeriod1 { .echarts-timePeriod1 {
...@@ -867,12 +998,23 @@ body { ...@@ -867,12 +998,23 @@ body {
} }
.avgMonthlyBox { @media screen and (min-width: 769px){
background: rgba(255, 255, 255, 0.05); .avgMonthlyBox {
height: 200px; background: rgba(255, 255, 255, 0.05);
width: calc(100% - 2.4vw); height: 200px;
margin-bottom: 24px; width: calc(100% - 2.4vw);
padding: 16px 0px 0 30px; margin-bottom: 24px;
padding: 16px 0px 0 30px;
}
}
@media screen and (max-width: 768px){
.avgMonthlyBox {
background: rgba(255, 255, 255, 0.05);
width: auto;
margin-bottom: 24px;
padding: 20px;
}
} }
.avgMonthlyBox-title { .avgMonthlyBox-title {
...@@ -885,9 +1027,19 @@ body { ...@@ -885,9 +1027,19 @@ body {
margin-bottom: 39px; margin-bottom: 39px;
} }
.avgMonthlyBox-content { @media screen and (min-width: 769px){
display: flex; .avgMonthlyBox-content {
width: 100%; display: flex;
width: 100%;
}
}
@media screen and (max-width: 768px){
.avgMonthlyBox-content {
display: flex;
flex-direction: column;
/*width: 100%;*/
}
} }
.content-item { .content-item {
...@@ -915,23 +1067,54 @@ body { ...@@ -915,23 +1067,54 @@ body {
margin-bottom: 10px; margin-bottom: 10px;
} }
.content-item-r { .content-item-m {
width: 26%;
display: flex; display: flex;
margin-left: 5%; flex: 1;
padding-right: 30px; flex-direction: row;
align-content: center;
justify-content: space-between;
} }
.item-r-text { @media screen and (min-width: 769px){
font-size: 14px; .content-item-r {
font-family: PingFang SC-Regular, PingFang SC; width: 26%;
font-weight: 400; display: flex;
color: #ffffff; margin-left: 5%;
line-height: 25px; padding-right: 30px;
letter-spacing: 2px; }
margin: 22px 1% 0 4%; .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%;
}
}
@media screen and (max-width: 768px){
.content-item-r {
display: flex;
width: 100%;
margin-top: 20px;
}
.item-r-text {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 25px;
letter-spacing: 2px;
padding: 10px;
}
} }
.item-r-text-red { .item-r-text-red {
color: #ff6464; color: #ff6464;
} }
...@@ -947,12 +1130,23 @@ body { ...@@ -947,12 +1130,23 @@ body {
} }
.timePeriod-legend-img { @media screen and (min-width: 769px){
float: right; .timePeriod-legend-img {
width: auto; float: right;
height: auto; width: auto;
max-width: 100%; height: auto;
max-height: 100%; max-width: 100%;
padding-right: 20px; max-height: 100%;
padding-right: 20px;
}
}
@media screen and (max-width: 768px){
.timePeriod-legend-img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
} }
energy-report/index.html
...@@ -256,21 +256,23 @@ ...@@ -256,21 +256,23 @@
<div class="avgMonthlyBox-title">各时段生产企业 月度平均数(家)</div> <div class="avgMonthlyBox-title">各时段生产企业 月度平均数(家)</div>
<div class="avgMonthlyBox-content"> <div class="avgMonthlyBox-content">
<img src="./assets/avgMonthlyIcon.svg"/> <img src="./assets/avgMonthlyIcon.svg"/>
<div class="content-item"> <div class="content-item-m">
<div class="item-text1">尖时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">尖时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">峰时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">峰时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">平时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">平时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">谷时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">谷时</div>
<div class="item-text2">205</div>
</div>
</div> </div>
<div class="content-item-r"> <div class="content-item-r">
<img src="./assets/avgMonthlyLeft.svg"/> <img src="./assets/avgMonthlyLeft.svg"/>
...@@ -285,20 +287,19 @@ ...@@ -285,20 +287,19 @@
</div> </div>
<!-- 尖峰平谷各时段，集中生产的企业月度平均数 --> <!-- 尖峰平谷各时段，集中生产的企业月度平均数 -->
<div class="timePeriod-textBox"> <div class="timePeriod-textBox">
<span class="timePeriod-textBox-text"> <span class="timePeriod-textBox-text">
尖峰平谷各时段，集中生产的企业月度平均数 尖峰平谷各时段，集中生产的企业月度平均数
</span> </span>
</div> </div>
<div class="centerPro"> <div class="centerPro">
<div class="centerPro-left"> <div class="centerPro-left">
<div class="timePeriod-legend2"> <div class="timePeriod-legend2">
<img src="./assets/legend.svg" class="timePeriod-legend-img"/> <img src="./assets/legend.svg" class="timePeriod-legend-img"/>
</div> </div>
<div id="repair-require6"></div> <div id="repair-require6"></div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png"> <div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right"> <div class="echarts-title-repair-list-right">
<span>根据以上数据显示，该企业在<span <span>根据以上数据显示，该企业在<span
class="echarts-title-repair-list-right-red">集中生产时段1、集中生产时段2、集中生产时段3</span>进行集中生产的频率最高</span> class="echarts-title-repair-list-right-red">集中生产时段1、集中生产时段2、集中生产时段3</span>进行集中生产的频率最高</span>
</div> </div>
</div> </div>
...@@ -334,21 +335,23 @@ ...@@ -334,21 +335,23 @@
</div> </div>
<div class="avgMonthlyBox-content"> <div class="avgMonthlyBox-content">
<img src="./assets/avgMonthlyIcon.svg"/> <img src="./assets/avgMonthlyIcon.svg"/>
<div class="content-item"> <div class="content-item-m">
<div class="item-text1">尖时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">尖时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">峰时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">峰时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">平时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">平时</div>
</div> <div class="item-text2">205</div>
<div class="content-item"> </div>
<div class="item-text1">谷时</div> <div class="content-item">
<div class="item-text2">205</div> <div class="item-text1">谷时</div>
<div class="item-text2">205</div>
</div>
</div> </div>
<div class="content-item-r"> <div class="content-item-r">
<img src="./assets/avgMonthlyLeft.svg"/> <img src="./assets/avgMonthlyLeft.svg"/>
...@@ -2483,4 +2486,4 @@ ...@@ -2483,4 +2486,4 @@
} }
</script> </script>
</html> </html>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论