|
|
@@ -328,232 +328,194 @@ onMounted(() => {});
|
|
|
top: 66px;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- background-color: #47474722;
|
|
|
- backdrop-filter: blur(2px);
|
|
|
- .title-top {
|
|
|
- position: absolute;
|
|
|
- top: 9px;
|
|
|
- left: 46px;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: #66ffff;
|
|
|
- }
|
|
|
+ height: 120px;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
- .toggle-search {
|
|
|
+ .pic {
|
|
|
+ height: 100%;
|
|
|
position: absolute;
|
|
|
- left: 9px;
|
|
|
- top: 37px;
|
|
|
+ left: 45%;
|
|
|
+ top: 0;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .icon-search {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 5px;
|
|
|
- transform: translate(0%, -50%);
|
|
|
+ img {
|
|
|
+ height: 60%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .line-echart {
|
|
|
+ .percent {
|
|
|
position: absolute;
|
|
|
- top: 66px;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 120px;
|
|
|
+ left: 75%;
|
|
|
+ top: 0;
|
|
|
+ width: 45px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .line {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .percent-box {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- .pic {
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 45%;
|
|
|
- top: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ // color: #b3b8cc;
|
|
|
+ &:nth-child(1) {
|
|
|
+ position: absolute;
|
|
|
+ top: 12%;
|
|
|
+ color: #9affa8;
|
|
|
+ }
|
|
|
|
|
|
- img {
|
|
|
- height: 60%;
|
|
|
+ &:nth-child(2) {
|
|
|
+ position: absolute;
|
|
|
+ top: 42%;
|
|
|
+ color: #ffe01c;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ position: absolute;
|
|
|
+ top: 70%;
|
|
|
+ color: #ff365d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dw {
|
|
|
+ color: #f2f4f8;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .percent {
|
|
|
- position: absolute;
|
|
|
- left: 75%;
|
|
|
- top: 0;
|
|
|
- width: 45px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- // justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .line-card {
|
|
|
+ position: absolute;
|
|
|
+ top: 166px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 186px);
|
|
|
+ padding: 0px 15px 15px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .percent-box {
|
|
|
- font-size: 14px;
|
|
|
+ .card-item {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .item-s {
|
|
|
+ position: relative;
|
|
|
+ width: 105px;
|
|
|
+ height: 58px;
|
|
|
+ margin: 0 1px;
|
|
|
+ margin-top: 20px;
|
|
|
+ background: url('/@/assets/images/home-container/line-val.png') no-repeat;
|
|
|
+ background-size: 100% 90%;
|
|
|
+
|
|
|
+ .item-label {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #e4e6ee;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
|
|
|
- // color: #b3b8cc;
|
|
|
- &:nth-child(1) {
|
|
|
- position: absolute;
|
|
|
- top: 12%;
|
|
|
- color: #9affa8;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- position: absolute;
|
|
|
- top: 42%;
|
|
|
- color: #ffe01c;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(3) {
|
|
|
- position: absolute;
|
|
|
- top: 70%;
|
|
|
- color: #ff365d;
|
|
|
- }
|
|
|
-
|
|
|
- .dw {
|
|
|
- color: #f2f4f8;
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
+ .item-val {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 26px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #fff;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ .status-card-box {
|
|
|
+ width: 330px;
|
|
|
+ height: 106px;
|
|
|
+ padding: 5px;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .line-card {
|
|
|
+ top: 280px;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .status-card {
|
|
|
position: absolute;
|
|
|
- top: 166px;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 186px);
|
|
|
- padding: 0px 15px 15px 15px;
|
|
|
+ width: 310px;
|
|
|
+ height: 94px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
align-items: center;
|
|
|
+ background: url('/@/assets/images/home-container/bj.png') no-repeat;
|
|
|
|
|
|
- .card-item {
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .left-content {
|
|
|
+ width: 95px;
|
|
|
+ height: 93px;
|
|
|
+ background: url('/@/assets/images/home-container/leftBJ1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .left1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 30px;
|
|
|
+ background: url('/@/assets/images/home-container/leftBJ2.png') no-repeat;
|
|
|
+ background-size: 30% 30%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-content {
|
|
|
display: flex;
|
|
|
- flex: 1;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 70%;
|
|
|
height: 100%;
|
|
|
-
|
|
|
- .item-s {
|
|
|
+ .fengya {
|
|
|
position: relative;
|
|
|
- width: 105px;
|
|
|
- height: 58px;
|
|
|
- margin: 0 1px;
|
|
|
- margin-top: 20px;
|
|
|
- background: url('/@/assets/images/home-container/line-val.png') no-repeat;
|
|
|
- background-size: 100% 90%;
|
|
|
-
|
|
|
- .item-label {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- color: #e4e6ee;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .item-val {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 26px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #fff;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px;
|
|
|
+ margin-top: 8px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .status-card-box {
|
|
|
- width: 330px;
|
|
|
- height: 106px;
|
|
|
- padding: 5px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- top: 280px;
|
|
|
- border-radius: 4px;
|
|
|
-
|
|
|
- .status-card {
|
|
|
- position: absolute;
|
|
|
- width: 310px;
|
|
|
- height: 94px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: url('/@/assets/images/home-container/bj.png') no-repeat;
|
|
|
-
|
|
|
- background-size: 100% 100%;
|
|
|
- .left-content {
|
|
|
- width: 95px;
|
|
|
- height: 93px;
|
|
|
- background: url('/@/assets/images/home-container/leftBJ1.png') no-repeat;
|
|
|
+ .fengya::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 10px;
|
|
|
+ background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
|
|
|
background-size: 100% 100%;
|
|
|
- .left1 {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin: 30px;
|
|
|
- background: url('/@/assets/images/home-container/leftBJ2.png') no-repeat;
|
|
|
- background-size: 30% 30%;
|
|
|
- }
|
|
|
}
|
|
|
- .right-content {
|
|
|
+ .title {
|
|
|
+ margin-left: 8px;
|
|
|
+ color: @white;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ margin-right: 8px;
|
|
|
+ color: #a1f9ff;
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: 70%;
|
|
|
- height: 100%;
|
|
|
- .fengya {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 5px;
|
|
|
- margin-top: 8px;
|
|
|
- }
|
|
|
- .fengya::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 10px;
|
|
|
- background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- .title {
|
|
|
- margin-left: 8px;
|
|
|
- color: @white;
|
|
|
- }
|
|
|
- .value {
|
|
|
- margin-right: 8px;
|
|
|
- color: #a1f9ff;
|
|
|
- }
|
|
|
- .status {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 8px;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
- .status::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 10px;
|
|
|
- background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ .status::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 10px;
|
|
|
+ background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
