Commit 543cd0d2 authored by 李成龙's avatar 李成龙

优化代码

parent 2eaecdc8
This diff is collapsed.
.class-Situation{
// background-image: url('../../assets/dailyDuties/bg.png');
// background-repeat: no-repeat;
// background-size: cover;
// background-attachment: fixed;
// top:0;
// left:0;
// right:0;
// bottom: 0;
// background-color: #110C30;
// position: relative;
// height: 100%;
// width:100%;
}
.daily-duties-content{ .daily-duties-content{
position:absolute; position:absolute;
left:0; left:0;
top:68px; top:pxToRem(68px);
right:0; right:0;
bottom:0; //left,top,right,bottom都为0,充满真个页面 bottom:0; //left,top,right,bottom都为0,充满真个页面
overflow-y:auto; overflow-y:auto;
...@@ -24,21 +10,21 @@ ...@@ -24,21 +10,21 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
.common-margin{ .common-margin{
margin-top: 19px; margin-top: pxToRem(19px);
} }
.daily-title{ .daily-title{
font-size:20px ; font-size:pxToRem(20px);
color: #ffffff; color: #ffffff;
} }
.daily-title-content{ .daily-title-content{
width:257px; width:pxToRem(257px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.top-ten-content{ .top-ten-content{
padding:30px 30px; padding:pxToRem(30px) pxToRem(30px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
...@@ -49,8 +35,8 @@ ...@@ -49,8 +35,8 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.top-ten-item-middle{ .top-ten-item-middle{
width:208px; width:pxToRem(208px);
height: 16px; height: pxToRem(16px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
...@@ -60,7 +46,7 @@ ...@@ -60,7 +46,7 @@
} }
} }
.top-ten-item-bottom{ .top-ten-item-bottom{
width:36px; width:pxToRem(36px);
display: flex; display: flex;
flex-direction:row; flex-direction:row;
justify-content: flex-end; justify-content: flex-end;
...@@ -74,27 +60,27 @@ ...@@ -74,27 +60,27 @@
.safety-rate-view{ .safety-rate-view{
background-image: url('../../assets/dailyDuties/leftTop.png'); background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:412px; width:pxToRem(412px);
height:469px; height:pxToRem(469px);
} }
.growth-statistics-view{ .growth-statistics-view{
background-image: url('../../assets/dailyDuties/leftBottom.png'); background-image: url('../../assets/dailyDuties/leftBottom.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:411px; width:pxToRem(411px);
height:474px; height:pxToRem(474px);
.growth-content{ .growth-content{
padding:30px 24px; padding:pxToRem(30px) pxToRem(24px);
height: 100%; height: 100%;
.growth-item-header{ .growth-item-header{
font-size: 20px; font-size: pxToRem(20px);
color: #52EDF2; color: #52EDF2;
} }
.growth-item-text{ .growth-item-text{
font-size: 20px; font-size: pxToRem(20px);
color: #ffffff; color: #ffffff;
} }
.growth-item-datatext{ .growth-item-datatext{
font-size: 20px; font-size: pxToRem(20px);
color: #00CACE; color: #00CACE;
} }
.growth-item{ .growth-item{
...@@ -102,10 +88,10 @@ ...@@ -102,10 +88,10 @@
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
height:42px; height:pxToRem(42px);
width: 362px; width: pxToRem(362px);
background-color:#1C6264 ; background-color:#1C6264 ;
margin-top:5px ; margin-top:pxToRem(5px);
} }
.growth-item:hover{ .growth-item:hover{
background-color:#00B9FF ; background-color:#00B9FF ;
...@@ -116,10 +102,10 @@ ...@@ -116,10 +102,10 @@
.class-Situation .daily-duties-middle{ .class-Situation .daily-duties-middle{
height: 100%; height: 100%;
margin-left: 19px; margin-left: pxToRem(19px);
margin-right: 19px; margin-right: pxToRem(19px);
.statistics-title{ .statistics-title{
font-size: 32px; font-size: pxToRem(32px);
color: #00EEE8; color: #00EEE8;
} }
.statistics-title-content{ .statistics-title-content{
...@@ -131,27 +117,27 @@ ...@@ -131,27 +117,27 @@
.statistics-view{ .statistics-view{
background-image: url('../../assets/dailyDuties/middleTop.png'); background-image: url('../../assets/dailyDuties/middleTop.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:999px; width:pxToRem(999px);
height:615px; height:pxToRem(615px);
position: relative; position: relative;
.statistics-banner{ .statistics-banner{
position: absolute; position: absolute;
left:95px; left:pxToRem(95px);
right: 95px; right: pxToRem(95px);
top:68px; top:pxToRem(68px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
z-index: 2; z-index: 2;
.statistics-banner-content{ .statistics-banner-content{
height: 100px; height: pxToRem(100px);
width:380px; width:pxToRem(380px);
background-color:rgba(28, 98, 100, 0.5) ; background-color:rgba(28, 98, 100, 0.5) ;
border-radius: 5px; border-radius: pxToRem(5px);
.statistics-banner-item{ .statistics-banner-item{
height: 100px; height: pxToRem(100px);
margin-left: 32px; margin-left: pxToRem(32px);
margin-right: 32px; margin-right: pxToRem(32px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
...@@ -160,10 +146,10 @@ ...@@ -160,10 +146,10 @@
text-align: center; text-align: center;
.statistics-text-number{ .statistics-text-number{
font-weight: bold; font-weight: bold;
font-size: 35px; font-size: pxToRem(35px);
color:#00EEE8 ; color:#00EEE8 ;
letter-spacing:5px; letter-spacing:pxToRem(5px);
height: 44px; height: pxToRem(44px);
display: flex; display: flex;
flex-direction:row; flex-direction:row;
justify-content: flex-start; justify-content: flex-start;
...@@ -171,13 +157,13 @@ ...@@ -171,13 +157,13 @@
} }
span{ span{
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: pxToRem(20px);
color:#FF0000 ; color:#FF0000 ;
letter-spacing:5px; letter-spacing:pxToRem(5px);
padding-top: 9px; padding-top: pxToRem(9px);
} }
p{ p{
font-size: 14px; font-size: pxToRem(14px);
color:#FFF ; color:#FFF ;
} }
} }
...@@ -188,22 +174,22 @@ ...@@ -188,22 +174,22 @@
.risk-trend-view{ .risk-trend-view{
background-image: url('../../assets/dailyDuties/middleBottom.png'); background-image: url('../../assets/dailyDuties/middleBottom.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:1002px; width:pxToRem(1002px);
height:325px; height:pxToRem(325px);
position: relative; position: relative;
.buttongroup-style{ .buttongroup-style{
position: absolute; position: absolute;
right:50px; right:pxToRem(50px);
top:56px; top:pxToRem(56px);
z-index:2 ; z-index:2 ;
.button-style{ .button-style{
border-width: 1px; border-width: pxToRem(1px);
border-color: #45FEFE; border-color: #45FEFE;
width:80px width:pxToRem(80px);
} }
} }
.risk-trend-content{ .risk-trend-content{
padding:20px; padding:pxToRem(20px);
width:100%; width:100%;
height: 100%; height: 100%;
} }
...@@ -214,29 +200,29 @@ ...@@ -214,29 +200,29 @@
.risk-failure-view{ .risk-failure-view{
background-image: url('../../assets/dailyDuties/leftTop.png'); background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:412px; width:pxToRem(412px);
height:469px; height:pxToRem(469px);
} }
.recent-statistics-view{ .recent-statistics-view{
background-image: url('../../assets/dailyDuties/rightBottom.png'); background-image: url('../../assets/dailyDuties/rightBottom.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:411px; width:pxToRem(411px);
height:474px; height:pxToRem(474px);
position: relative; position: relative;
.buttongroup-style{ .buttongroup-style{
position: absolute; position: absolute;
right:50px; right:pxToRem(50px);
top:56px; top:pxToRem(56px);
z-index:2 ; z-index:2 ;
.button-style{ .button-style{
border-width: 1px; border-width: pxToRem(1px);
border-color: #45FEFE; border-color: #45FEFE;
width:80px width:pxToRem(80px)
} }
} }
.recent-statistics-content{ .recent-statistics-content{
padding:20px; padding:pxToRem(20px);
width:100%; width:100%;
height: 100%; height: 100%;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment