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