|
@@ -4,14 +4,25 @@
|
|
align-items: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
height: 100vh;
|
|
width: 100%;
|
|
width: 100%;
|
|
- padding-top: 0.9rem;
|
|
|
|
|
|
+ padding-top: 80px;
|
|
color: #3b3b3b;
|
|
color: #3b3b3b;
|
|
}
|
|
}
|
|
|
|
+.left {
|
|
|
|
+ text-align: center;
|
|
|
|
+ width: 25%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+}
|
|
|
|
+.right {
|
|
|
|
+ .left;
|
|
|
|
+}
|
|
.box {
|
|
.box {
|
|
- width: 6.4rem;
|
|
|
|
- padding: 0.24rem;
|
|
|
|
|
|
+ width: 610px;
|
|
|
|
+ padding: 24px;
|
|
|
|
+ text-align: left;
|
|
position: relative;
|
|
position: relative;
|
|
- margin-bottom: 0.1rem;
|
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
background: url('@/assets/home-box-bg.png') no-repeat center;
|
|
background: url('@/assets/home-box-bg.png') no-repeat center;
|
|
@@ -22,27 +33,26 @@
|
|
// }
|
|
// }
|
|
|
|
|
|
.titleContent {
|
|
.titleContent {
|
|
- margin: 0.2rem 0.38rem;
|
|
|
|
|
|
+ margin: 20px 38px;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
position: relative;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
|
|
.boxTitle {
|
|
.boxTitle {
|
|
- padding: 0 0.1rem;
|
|
|
|
|
|
+ padding: 0 10px;
|
|
position: relative;
|
|
position: relative;
|
|
// z-index: 99;
|
|
// z-index: 99;
|
|
- font-size: 0.32rem;
|
|
|
|
|
|
+ font-size: 32px;
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
color: #0139f1;
|
|
color: #0139f1;
|
|
- line-height: 0.34rem;
|
|
|
|
|
|
+ line-height: 34px;
|
|
z-index: 1;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.line {
|
|
.line {
|
|
position: absolute;
|
|
position: absolute;
|
|
- // left: 0.38rem;
|
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 0.14rem;
|
|
|
|
|
|
+ height: 14px;
|
|
background: url('@/assets/home-box-line.png') no-repeat center;
|
|
background: url('@/assets/home-box-line.png') no-repeat center;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
z-index: 0;
|
|
z-index: 0;
|
|
@@ -56,31 +66,31 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.name {
|
|
.name {
|
|
- font-size: 0.22rem;
|
|
|
|
|
|
+ font-size: 22px;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
- line-height: 0.28rem;
|
|
|
|
|
|
+ line-height: 28px;
|
|
text-align: center;
|
|
text-align: center;
|
|
- margin-top: 0.18rem;
|
|
|
|
|
|
+ margin-top: 18px;
|
|
}
|
|
}
|
|
.value {
|
|
.value {
|
|
- margin: 0.6rem 0;
|
|
|
|
- font-size: 0.4rem;
|
|
|
|
|
|
+ margin: 60px 0;
|
|
|
|
+ font-size: 40px;
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
color: #3b3b3b;
|
|
color: #3b3b3b;
|
|
- line-height: 0.5rem;
|
|
|
|
|
|
+ line-height: 50px;
|
|
text-align: center;
|
|
text-align: center;
|
|
- letter-spacing: 0.04rem;
|
|
|
|
|
|
+ letter-spacing: 4px;
|
|
font-family: PangMenZhengDao-3, PangMenZhengDao-3;
|
|
font-family: PangMenZhengDao-3, PangMenZhengDao-3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-.boxBig {
|
|
|
|
|
|
+.boxH {
|
|
.box;
|
|
.box;
|
|
- background-image: url('@/assets/home-box-bg2.png');
|
|
|
|
|
|
+ height: 420px;
|
|
}
|
|
}
|
|
.scada {
|
|
.scada {
|
|
- margin-bottom: 0.2rem;
|
|
|
|
- padding: 0 0.1rem;
|
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ padding: 0 10px;
|
|
position: relative;
|
|
position: relative;
|
|
.mask {
|
|
.mask {
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -91,14 +101,14 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.scadaContent {
|
|
.scadaContent {
|
|
- padding: 0.2rem;
|
|
|
|
- height: 3rem;
|
|
|
|
- width: 10rem;
|
|
|
|
|
|
+ padding: 20px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ width: 1000px;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
iframe {
|
|
iframe {
|
|
height: 100%;
|
|
height: 100%;
|
|
- width: calc(50% - 0.1rem);
|
|
|
|
|
|
+ width: calc(50% - 10px);
|
|
border: none;
|
|
border: none;
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
@@ -108,26 +118,26 @@
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
.score {
|
|
.score {
|
|
- font-size: 0.5rem;
|
|
|
|
|
|
+ font-size: 50px;
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
font-family: PangMenZhengDao-3, PangMenZhengDao-3;
|
|
font-family: PangMenZhengDao-3, PangMenZhengDao-3;
|
|
color: #615d5d;
|
|
color: #615d5d;
|
|
}
|
|
}
|
|
.scoreTitle {
|
|
.scoreTitle {
|
|
- width: 3rem;
|
|
|
|
- font-size: 0.4rem;
|
|
|
|
- margin-top: 0.2rem;
|
|
|
|
|
|
+ width: 300px;
|
|
|
|
+ font-size: 40px;
|
|
|
|
+ margin-top: 20px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
color: #3b3b3b;
|
|
color: #3b3b3b;
|
|
}
|
|
}
|
|
|
|
|
|
.grade {
|
|
.grade {
|
|
- font-size: 0.22rem;
|
|
|
|
- margin-top: 0.1rem;
|
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ margin-top: 10px;
|
|
}
|
|
}
|
|
.circle {
|
|
.circle {
|
|
- width: 1.78rem;
|
|
|
|
- height: 1.78rem;
|
|
|
|
|
|
+ width: 178px;
|
|
|
|
+ height: 178px;
|
|
text-align: center;
|
|
text-align: center;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -139,53 +149,55 @@
|
|
}
|
|
}
|
|
|
|
|
|
.time {
|
|
.time {
|
|
- font-size: 0.22rem;
|
|
|
|
- margin-bottom: 0.2rem;
|
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ margin-bottom: 20px;
|
|
text-align: right;
|
|
text-align: right;
|
|
- margin-right: 0.3rem;
|
|
|
|
|
|
+ margin-right: 30px;
|
|
}
|
|
}
|
|
.insTag {
|
|
.insTag {
|
|
position: absolute;
|
|
position: absolute;
|
|
- right: 0.54rem;
|
|
|
|
- top: 0.44rem;
|
|
|
|
- width: 1.14rem;
|
|
|
|
- height: 0.5rem;
|
|
|
|
|
|
+ right: 54px;
|
|
|
|
+ top: 44px;
|
|
|
|
+ width: 114px;
|
|
|
|
+ height: 50px;
|
|
background: #4a90e2;
|
|
background: #4a90e2;
|
|
- border-radius: 0.05rem;
|
|
|
|
|
|
+ border-radius: 5px;
|
|
text-align: center;
|
|
text-align: center;
|
|
- line-height: 0.5rem;
|
|
|
|
|
|
+ line-height: 50px;
|
|
|
|
|
|
- font-size: 0.26rem;
|
|
|
|
|
|
+ font-size: 26px;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
|
|
.insStatus {
|
|
.insStatus {
|
|
text-align: center;
|
|
text-align: center;
|
|
- font-size: 0.42rem;
|
|
|
|
|
|
+ font-size: 42px;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #f5a623;
|
|
color: #f5a623;
|
|
- line-height: 0.56rem;
|
|
|
|
- margin-top: 0.5rem;
|
|
|
|
- margin-bottom: 0.22rem;
|
|
|
|
|
|
+ line-height: 56px;
|
|
|
|
+ margin-top: 50px;
|
|
|
|
+ margin-bottom: 22px;
|
|
}
|
|
}
|
|
.centerBox {
|
|
.centerBox {
|
|
|
|
+ width: 50%;
|
|
display: flex;
|
|
display: flex;
|
|
- height: calc(100vh - 0.9rem);
|
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ height: calc(100vh - 80px);
|
|
align-items: flex-end;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
.backlog {
|
|
.backlog {
|
|
- margin-bottom: 0.4rem;
|
|
|
|
- padding: 0 0.2rem;
|
|
|
|
|
|
+ margin-bottom: 40px;
|
|
|
|
+ padding: 0 20px;
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
- height: 2.6rem;
|
|
|
|
|
|
+ height: 260px;
|
|
color: #3b3b3b;
|
|
color: #3b3b3b;
|
|
.item {
|
|
.item {
|
|
- padding: 0.08rem 0 0.2rem;
|
|
|
|
|
|
+ padding: 8px 0 20px;
|
|
width: 100%;
|
|
width: 100%;
|
|
- font-size: 0.22rem;
|
|
|
|
- line-height: 0.5rem;
|
|
|
|
- border-bottom: 0.01rem solid #ffffff;
|
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ line-height: 50px;
|
|
|
|
+ border-bottom: 1px solid #ffffff;
|
|
}
|
|
}
|
|
.titleCon {
|
|
.titleCon {
|
|
display: flex;
|
|
display: flex;
|
|
@@ -193,38 +205,38 @@
|
|
}
|
|
}
|
|
.point {
|
|
.point {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- width: 0.12rem;
|
|
|
|
- height: 0.24rem;
|
|
|
|
|
|
+ width: 12px;
|
|
|
|
+ height: 24px;
|
|
background-color: #ff8400;
|
|
background-color: #ff8400;
|
|
}
|
|
}
|
|
.createTime {
|
|
.createTime {
|
|
float: right;
|
|
float: right;
|
|
}
|
|
}
|
|
.titleText {
|
|
.titleText {
|
|
- font-size: 0.22rem;
|
|
|
|
- margin: 0 0.2rem;
|
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ margin: 0 20px;
|
|
}
|
|
}
|
|
.bottomCon {
|
|
.bottomCon {
|
|
- font-size: 0.18rem;
|
|
|
|
|
|
+ font-size: 18px;
|
|
word-wrap: break-word;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.count {
|
|
.count {
|
|
background: #f69040;
|
|
background: #f69040;
|
|
- border-radius: 0.04rem;
|
|
|
|
- margin-left: 0.1rem;
|
|
|
|
- padding: 0 0.06rem;
|
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ padding: 0 6px;
|
|
}
|
|
}
|
|
|
|
|
|
.btn1 {
|
|
.btn1 {
|
|
- margin-bottom: 0.2rem;
|
|
|
|
- padding: 0.14rem 0.3rem;
|
|
|
|
- font-size: 0.32rem;
|
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ padding: 14px 28px;
|
|
|
|
+ font-size: 32px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- border-radius: 1rem;
|
|
|
|
|
|
+ border-radius: 100px;
|
|
background-color: #1755ff;
|
|
background-color: #1755ff;
|
|
}
|
|
}
|
|
.btn2 {
|
|
.btn2 {
|
|
@@ -236,24 +248,24 @@
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
align-items: center;
|
|
.circle {
|
|
.circle {
|
|
- width: 1.78rem;
|
|
|
|
- height: 1.78rem;
|
|
|
|
|
|
+ width: 178px;
|
|
|
|
+ height: 178px;
|
|
text-align: center;
|
|
text-align: center;
|
|
- line-height: 1.78rem;
|
|
|
|
|
|
+ line-height: 178px;
|
|
background: url('@/assets/home-self-circle.png') no-repeat center;
|
|
background: url('@/assets/home-self-circle.png') no-repeat center;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.text {
|
|
.text {
|
|
- width: 1.19rem;
|
|
|
|
- height: 0.5rem;
|
|
|
|
- font-size: 0.5rem;
|
|
|
|
|
|
+ width: 119px;
|
|
|
|
+ height: 50px;
|
|
|
|
+ font-size: 50px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.texting {
|
|
.texting {
|
|
- width: 2rem;
|
|
|
|
- font-size: 0.4rem;
|
|
|
|
- margin-top: 0.2rem;
|
|
|
|
|
|
+ width: 200px;
|
|
|
|
+ font-size: 40px;
|
|
|
|
+ margin-top: 20px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
color: #3b3b3b;
|
|
color: #3b3b3b;
|
|
}
|
|
}
|