Skip to content

R
report-html-template
Commit 7a0f94f6 by 杨翔
Options

css修改

parent 533c25dd
正在显示 包含 236 行增加 和 39 行删除
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){
#distribution-charts {
height: 380px; height: 380px;
flex: 2; flex: 2;
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
padding: 15px; padding: 15px;
margin-right: 30px; 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,37 +231,37 @@ body { ...@@ -221,37 +231,37 @@ body {
/* font-size: 14px; */ /* font-size: 14px; */
} }
.distribution-wrap { @media screen and (min-width: 769px) {
.distribution-wrap {
display: flex; display: flex;
} }
.distribution-right {
.distribution-right {
flex: 1; flex: 1;
position: relative; position: relative;
} }
.distribution-right-top { .distribution-right-top {
} }
#slide { #slide {
position: absolute; position: absolute;
height: 270px; height: 270px;
overflow: hidden; overflow: hidden;
margin-bottom: 21px; margin-bottom: 21px;
width: 100%; width: 100%;
} }
.distribution-right-bottom { .distribution-right-bottom {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
.distribution-right-top-list { .distribution-right-top-list {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
padding: 12px; padding: 12px;
display: flex; display: flex;
...@@ -261,29 +271,103 @@ body { ...@@ -261,29 +271,103 @@ body {
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
margin-bottom: 4px; margin-bottom: 4px;
}
.distribution-right-top-two {
font-weight: 600;
}
} }
.distribution-right-top-two { @media screen and (max-width: 768px) {
.distribution-wrap {
display: flex;
flex-direction: column;
}
.distribution-right {
flex: 1;
position: relative;
}
.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; font-weight: 600;
}
} }
.production-portrait { @media screen and (min-width: 769px) {
.production-portrait {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
} }
.production-portrait-bottom { @media screen and (max-width: 768px) {
.production-portrait {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width: 769px) {
.production-portrait-bottom {
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
padding: 10px 0 25px 55px; padding: 10px 0 25px 55px;
margin-top: 30px; 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) {
.production-portrait-bottom {
background: rgba(8, 16, 24, 0.27);
padding: 20px;
margin-top: 10px;
}
.production-portrait > div {
width: calc(100% / 2 - 10px); width: calc(100% / 2 - 10px);
height: 380px; height: 380px;
display: inline-flex; display: inline-flex;
}
} }
.popup { .popup {
position: relative; position: relative;
display: flex; display: flex;
...@@ -726,29 +810,48 @@ body { ...@@ -726,29 +810,48 @@ body {
margin: 27px 0 37px; margin: 27px 0 37px;
} }
.centerPro { @media screen and (min-width: 769px) {
.centerPro {
display: flex; display: flex;
margin-bottom: 30px; margin-bottom: 30px;
} }
.centerPro-left {
.centerPro-left {
flex: 2; flex: 2;
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
padding: 15px; padding: 15px;
margin-right: 30px; margin-right: 30px;
height: 354px; height: 354px;
} }
#repair-require6 { .centerPro-right {
height: 304px; flex: 1;
margin-top: -5px background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 354px;
}
} }
.centerPro-right { @media screen and (max-width: 768px) {
flex: 1; .centerPro {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.centerPro-left {
background: rgba(8, 16, 24, 0.27);
padding: 15px;
}
.centerPro-right {
margin-top: 10px;
background: rgba(8, 16, 24, 0.27); background: rgba(8, 16, 24, 0.27);
padding: 15px; padding: 15px;
height: 354px; height: 354px;
}
}
#repair-require6 {
height: 304px;
margin-top: -5px
} }
#repair-require7 { #repair-require7 {
...@@ -826,7 +929,8 @@ body { ...@@ -826,7 +929,8 @@ body {
margin-bottom: 19px; margin-bottom: 19px;
} }
.timePeriod-textBox { @media screen and (min-width: 769px){
.timePeriod-textBox {
width: 100%; width: 100%;
height: 40px; height: 40px;
background: linear-gradient( background: linear-gradient(
...@@ -837,9 +941,35 @@ body { ...@@ -837,9 +941,35 @@ body {
background-size: cover; background-size: cover;
border-radius: 20px; border-radius: 20px;
margin-bottom: 30px; 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){
.timePeriod-textBox {
width: 100%;
height: 40px;
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: 15px;
}
.timePeriod-textBox-text {
font-size: 16px; font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC; font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -848,6 +978,7 @@ body { ...@@ -848,6 +978,7 @@ body {
display: inline-block; display: inline-block;
margin-left: 20px; margin-left: 20px;
margin-top: 13px; margin-top: 13px;
}
} }
.echarts-timePeriod1 { .echarts-timePeriod1 {
...@@ -867,12 +998,23 @@ body { ...@@ -867,12 +998,23 @@ body {
} }
.avgMonthlyBox { @media screen and (min-width: 769px){
.avgMonthlyBox {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
height: 200px; height: 200px;
width: calc(100% - 2.4vw); width: calc(100% - 2.4vw);
margin-bottom: 24px; margin-bottom: 24px;
padding: 16px 0px 0 30px; 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){
.avgMonthlyBox-content {
display: flex; display: flex;
width: 100%; 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 {
display: flex;
flex: 1;
flex-direction: row;
align-content: center;
justify-content: space-between;
}
@media screen and (min-width: 769px){
.content-item-r {
width: 26%; width: 26%;
display: flex; display: flex;
margin-left: 5%; margin-left: 5%;
padding-right: 30px; padding-right: 30px;
}
.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 { @media screen and (max-width: 768px){
.content-item-r {
display: flex;
width: 100%;
margin-top: 20px;
}
.item-r-text {
font-size: 14px; font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC; font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
line-height: 25px; line-height: 25px;
letter-spacing: 2px; letter-spacing: 2px;
margin: 22px 1% 0 4%; padding: 10px;
}
} }
.item-r-text-red { .item-r-text-red {
color: #ff6464; color: #ff6464;
} }
...@@ -947,7 +1130,8 @@ body { ...@@ -947,7 +1130,8 @@ body {
} }
.timePeriod-legend-img { @media screen and (min-width: 769px){
.timePeriod-legend-img {
float: right; float: right;
width: auto; width: auto;
height: auto; height: auto;
...@@ -955,4 +1139,14 @@ body { ...@@ -955,4 +1139,14 @@ body {
max-height: 100%; max-height: 100%;
padding-right: 20px; 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,6 +256,7 @@ ...@@ -256,6 +256,7 @@
<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-m">
<div class="content-item"> <div class="content-item">
<div class="item-text1">尖时</div> <div class="item-text1">尖时</div>
<div class="item-text2">205</div> <div class="item-text2">205</div>
...@@ -272,6 +273,7 @@ ...@@ -272,6 +273,7 @@
<div class="item-text1">谷时</div> <div class="item-text1">谷时</div>
<div class="item-text2">205</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"/>
<div class="item-r-text"> <div class="item-r-text">
...@@ -286,7 +288,7 @@ ...@@ -286,7 +288,7 @@
<!-- 尖峰平谷各时段，集中生产的企业月度平均数 --> <!-- 尖峰平谷各时段，集中生产的企业月度平均数 -->
<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">
...@@ -294,7 +296,6 @@ ...@@ -294,7 +296,6 @@
<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">
...@@ -334,6 +335,7 @@ ...@@ -334,6 +335,7 @@
</div> </div>
<div class="avgMonthlyBox-content"> <div class="avgMonthlyBox-content">
<img src="./assets/avgMonthlyIcon.svg"/> <img src="./assets/avgMonthlyIcon.svg"/>
<div class="content-item-m">
<div class="content-item"> <div class="content-item">
<div class="item-text1">尖时</div> <div class="item-text1">尖时</div>
<div class="item-text2">205</div> <div class="item-text2">205</div>
...@@ -350,6 +352,7 @@ ...@@ -350,6 +352,7 @@
<div class="item-text1">谷时</div> <div class="item-text1">谷时</div>
<div class="item-text2">205</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"/>
<div class="item-r-text"> <div class="item-r-text">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论