|
@@ -1,167 +1,229 @@
|
|
|
@import "../../../assets/styles/common.scss";
|
|
|
-.home-page{
|
|
|
+
|
|
|
+.home-container {
|
|
|
background: url("@/assets/images/background.png") top center no-repeat;
|
|
|
- height:calc(100vh - 84px);
|
|
|
+ height: 100vh;
|
|
|
background-size: cover;
|
|
|
overflow: auto;
|
|
|
- padding:20px;
|
|
|
- color:white;
|
|
|
- @include borderBox;
|
|
|
- .top-scroll-bar{
|
|
|
- background-image: linear-gradient(to right top,#0E4690,#11386B);
|
|
|
- box-shadow: inset 0 0 19px 3px #72D5FF66;
|
|
|
- border:1px solid #72D5FF;
|
|
|
- padding:10px;
|
|
|
- @include borderBox;
|
|
|
+
|
|
|
+ .home-title-nav {
|
|
|
+ background-image: url("@/assets/images/top_bg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: cover;
|
|
|
+ height: 80px;
|
|
|
+ width: 100%;
|
|
|
@include flexBetween;
|
|
|
- //border-radius: 16px 0 16px 0;
|
|
|
- &-left{
|
|
|
- @include flexStart;
|
|
|
- .left-title{
|
|
|
- background-image: linear-gradient(to bottom,#078BCB,#0B4389);
|
|
|
- border:1px solid #6FCFFB;
|
|
|
- border-radius: 25px 0 25px 0;
|
|
|
- font-weight: bold;
|
|
|
- @include flexCenter;
|
|
|
- }
|
|
|
- .left-content{
|
|
|
- @include flexStart;
|
|
|
- padding-left:20px;
|
|
|
+ align-items: flex-start;
|
|
|
+ color:#FFF;
|
|
|
+ .l-span{
|
|
|
+ width: 20%;
|
|
|
+ padding:5px;
|
|
|
+ }
|
|
|
+ .r-span{
|
|
|
+ width: 20%;
|
|
|
+ text-align: right;
|
|
|
+ padding:10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color:#FFFFFF;
|
|
|
+ font-family: "BebasNeue-1", serif;
|
|
|
+ }
|
|
|
+ .title-text{
|
|
|
+ width: 60%;
|
|
|
+ @include flexCenter;
|
|
|
+ font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 47px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ background: linear-gradient(180deg, #FFFFFF 0%,#7DB1FF 70%, #7DB1FF 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ text-transform: none;
|
|
|
+ color: transparent;
|
|
|
+ padding-top:5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.home-page {
|
|
|
+
|
|
|
+ padding: 0 20px 20px 20px;
|
|
|
+ color: white;
|
|
|
+ @include borderBox;
|
|
|
+
|
|
|
+ .top-scroll-bar {
|
|
|
+ .t-span {
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .t-time {
|
|
|
font-size: 14px;
|
|
|
- .s-time{
|
|
|
- font-family: "BebasNeue-1", serif;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- .status-item{
|
|
|
- background-image: linear-gradient(to bottom,#10427e,#002576);
|
|
|
- border:1px solid #6FCFFB;
|
|
|
- color:#72D5FF;
|
|
|
- margin:0 10px;
|
|
|
- font-size: 14px;
|
|
|
- padding:2px 6px;
|
|
|
- }
|
|
|
- .result-text{
|
|
|
- border-left:1px solid #3c6d88;
|
|
|
- padding-left:10px;
|
|
|
- @include flexStart;
|
|
|
- .text-a{
|
|
|
- @include flexStart;
|
|
|
- color:#3AC4FF;
|
|
|
- text-decoration: underline;
|
|
|
- margin-left:10px;
|
|
|
- }
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-family: "BebasNeue-1", serif;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-a {
|
|
|
+ margin-left: 5px;
|
|
|
+ color: #3AC4FF;
|
|
|
+ text-decoration: underline;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ text-decoration: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .right-btn{
|
|
|
- background-image: linear-gradient(to bottom,#25B1FF,#1E4683);
|
|
|
- padding:4px 10px;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 14px;
|
|
|
- border:1px solid #95DFFF;
|
|
|
+
|
|
|
+ .right-btn {
|
|
|
+ background: linear-gradient(to bottom, #257CFF 0%, #222E7F 100%);
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ border: 1px solid;
|
|
|
+ border-image: linear-gradient(180deg, rgba(149, 223, 255, 1), rgba(114, 213, 255, 1)) 1 1;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
+ .scroll-text {
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
}
|
|
|
- .column-row-title{
|
|
|
- background-image: linear-gradient(to right top,#21589e,#11386B);
|
|
|
- border:1px solid #72D5FF;
|
|
|
+
|
|
|
+ .column-row-title {
|
|
|
+ background: #112973;
|
|
|
border-bottom-width: 0;
|
|
|
- padding:0 8px 0 0;
|
|
|
- line-height:40px;
|
|
|
+ padding: 0 8px 0 0;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-bottom: 8px;
|
|
|
@include flexBetween;
|
|
|
- .title-text{
|
|
|
+
|
|
|
+ .title-text {
|
|
|
font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
|
|
|
@include flexStart;
|
|
|
font-size: 16px;
|
|
|
- .s-span{
|
|
|
- margin-left:5px;
|
|
|
+
|
|
|
+ .s-span {
|
|
|
+ margin-left: 5px;
|
|
|
font-size: 14px;
|
|
|
font-style: italic;
|
|
|
color: #A8CAF9;
|
|
|
}
|
|
|
- &>img{
|
|
|
- margin-right:10px;
|
|
|
+
|
|
|
+ & > img {
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
- .yellow-txt{
|
|
|
+
|
|
|
+ .yellow-txt {
|
|
|
color: #FFB342;
|
|
|
font-size: 20px;
|
|
|
font-weight: 400;
|
|
|
- margin-left:4px;
|
|
|
+ margin-left: 4px;
|
|
|
}
|
|
|
- .el-checkbox{
|
|
|
- color:white;
|
|
|
+
|
|
|
+ .el-checkbox {
|
|
|
+ color: white;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
- .el-checkbox__inner{
|
|
|
+
|
|
|
+ .el-checkbox__inner {
|
|
|
background: transparent;
|
|
|
- border:1px solid #72D5FF80;
|
|
|
+ border: 1px solid #72D5FF80;
|
|
|
}
|
|
|
- .el-checkbox__label{
|
|
|
+
|
|
|
+ .el-checkbox__label {
|
|
|
padding-left: 4px;
|
|
|
}
|
|
|
- .el-checkbox__input.is-checked+.el-checkbox__label{
|
|
|
+
|
|
|
+ .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
color: #72D5FF;
|
|
|
}
|
|
|
- .el-checkbox__input.is-checked .el-checkbox__inner::after{
|
|
|
+
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
|
|
border-color: #72D5FF;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .content-top{
|
|
|
+ .content-top {
|
|
|
@include flexBetween;
|
|
|
align-items: flex-start;
|
|
|
- margin-top:16px;
|
|
|
- .column-row{
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ .column-row {
|
|
|
width: 375px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .app-health{
|
|
|
- height:calc(70vh - 138px);
|
|
|
+ .app-health {
|
|
|
+ height: calc(70vh - 138px);
|
|
|
position: relative;
|
|
|
width: calc(100% - 750px);
|
|
|
- margin:0 10px;
|
|
|
- .h-img{
|
|
|
- width: 100px;
|
|
|
+ margin: 0 10px;
|
|
|
+ background-image: url("@/assets/images/center-bg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ background-size: 70%;
|
|
|
+
|
|
|
+ .h-img {
|
|
|
+ width: 120px;
|
|
|
}
|
|
|
- .a-h-item{
|
|
|
+
|
|
|
+ .a-h-item {
|
|
|
position: absolute;
|
|
|
- top:10%;
|
|
|
- left:10%;
|
|
|
+ top: 29%;
|
|
|
+ left: 9%;
|
|
|
text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- .item-cq{
|
|
|
- top: 48%;
|
|
|
- left: 15%;
|
|
|
+
|
|
|
+ .item-cq {
|
|
|
+ top: 63%;
|
|
|
+ left: 27%;
|
|
|
}
|
|
|
- .item-js{
|
|
|
- top: 70%;
|
|
|
+
|
|
|
+ .item-js {
|
|
|
+ top: 5%;
|
|
|
left: 50%;
|
|
|
- margin-left:-60px;
|
|
|
+ margin-left: -60px;
|
|
|
}
|
|
|
- .item-hg{
|
|
|
- top: 48%;
|
|
|
- left: 67%;
|
|
|
+
|
|
|
+ .item-hg {
|
|
|
+ top: 63%;
|
|
|
+ left: 57%;
|
|
|
}
|
|
|
- .item-fb{
|
|
|
- left: calc(80% - 40px);
|
|
|
+
|
|
|
+ .item-fb {
|
|
|
+ left: calc(81% - 40px);
|
|
|
}
|
|
|
- .item-jcd{
|
|
|
- left:50%;
|
|
|
- margin-left:-140px;
|
|
|
- top:1%;
|
|
|
+
|
|
|
+ .item-jcd {
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -140px;
|
|
|
+ top: 1%;
|
|
|
}
|
|
|
- .i-label{
|
|
|
+
|
|
|
+ .i-label {
|
|
|
font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
|
|
|
font-weight: 400;
|
|
|
font-size: 20px;
|
|
|
- color: #CEE8FF;
|
|
|
- text-shadow: 1px 1px 0 #138EFF;
|
|
|
+ color: #F4FAFF;
|
|
|
+ text-shadow: 2px 2px 0 #223FA3;
|
|
|
font-style: normal;
|
|
|
text-transform: none;
|
|
|
}
|
|
|
- .i-value{
|
|
|
+
|
|
|
+ .i-value {
|
|
|
font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
|
|
|
font-weight: 400;
|
|
|
font-size: 34px;
|
|
@@ -170,276 +232,332 @@
|
|
|
text-transform: none;
|
|
|
text-align: center;
|
|
|
position: absolute;
|
|
|
- top:-16px;
|
|
|
+ top: -20px;
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .i-normal{
|
|
|
- color:#6FFF7D;
|
|
|
- text-shadow: 2px 0 0 #239E2F;
|
|
|
- background: url("@/assets/images/icon-green.png") no-repeat center bottom;
|
|
|
- background-size: 60%;
|
|
|
+
|
|
|
+ .i-normal {
|
|
|
+ //background: url("@/assets/images/icon-green.png") no-repeat center bottom;
|
|
|
+ //background-size: 70%;
|
|
|
+ background: linear-gradient(180deg, #FFFFFF 0%, #6CA0ED 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ text-transform: none;
|
|
|
+ color: transparent;
|
|
|
}
|
|
|
- .i-waring{
|
|
|
- color:#F0D90B;
|
|
|
+
|
|
|
+ .i-waring {
|
|
|
+ color: #F0D90B;
|
|
|
text-shadow: 2px 0 0 #9E9223;
|
|
|
background: url("@/assets/images/icon-yellow.png") no-repeat center bottom;
|
|
|
background-size: 60%;
|
|
|
}
|
|
|
- .i-risk{
|
|
|
- color:#F00B0B;
|
|
|
- text-shadow: 2px 0 0 #9E2323;
|
|
|
- background: url("@/assets/images/icon-red.png") no-repeat center bottom;
|
|
|
- background-size: 60%;
|
|
|
+
|
|
|
+ .i-risk {
|
|
|
+ //background-size: 70%;
|
|
|
+ background: linear-gradient(180deg, #FFCB7D 0%, #FEB851 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .column-content{
|
|
|
- background-image: linear-gradient(to right top,#0E4690B0,#11386BB0);
|
|
|
- box-shadow: inset 0 0 19px 3px #72D5FF33;
|
|
|
- border:1px solid #72D5FF;
|
|
|
- height:calc(70vh - 180px);
|
|
|
- padding:10px;
|
|
|
+ .column-content {
|
|
|
+ background: rgba(6, 5, 65, 0.8);
|
|
|
+ box-shadow: inset 0px -3px 14px 0px rgba(112, 210, 253, 0.5);
|
|
|
+ border: 1px solid;
|
|
|
+ border-image: linear-gradient(180deg, rgba(0, 136, 194, 0.6), rgba(0, 136, 194, 0.4)) 1 1;
|
|
|
+ height: calc(70vh - 286px);
|
|
|
+ padding: 10px;
|
|
|
@include borderBox;
|
|
|
overflow: auto;
|
|
|
- .c-row{
|
|
|
+
|
|
|
+ .c-row {
|
|
|
font-size: 14px;
|
|
|
@include flexBetween;
|
|
|
- border:1px solid #8DB2E4;
|
|
|
- box-shadow: inset 0 0 19px 3px #72D5FF33;
|
|
|
- padding:8px 12px;
|
|
|
- margin-top:4px;
|
|
|
- &:first-child{
|
|
|
- margin-top:0;
|
|
|
+ //border: 1px solid #8DB2E4;
|
|
|
+ background: #060541;
|
|
|
+ box-shadow: inset 0 0 7px 0 #2973C7;
|
|
|
+ padding: 8px 12px;
|
|
|
+ margin-top: 4px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
}
|
|
|
- .c-item{
|
|
|
+
|
|
|
+ &:nth-child(odd) {
|
|
|
+ background: #0C1B5B;
|
|
|
+ box-shadow: inset 0 0 7px 0 #2973C7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .c-item {
|
|
|
width: 40%;
|
|
|
text-align: left;
|
|
|
}
|
|
|
- .statue-risk{
|
|
|
+
|
|
|
+ .statue-risk {
|
|
|
width: 60px;
|
|
|
text-align: center;
|
|
|
- padding:1px 0;
|
|
|
- border:1px solid #FFB342;
|
|
|
- background-image: linear-gradient(to bottom,#754E13,#CA8A29);
|
|
|
- color:#FFF;
|
|
|
- font-size: 14px;
|
|
|
+ padding: 1px 0;
|
|
|
+ border: 1px solid #FFB342;
|
|
|
+ background-image: linear-gradient(to bottom, #754E1380, #CA8A2940);
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
- .statue-normal{
|
|
|
+
|
|
|
+ .statue-normal {
|
|
|
@extend .statue-risk;
|
|
|
- background-image: linear-gradient(to bottom,#203C6C,#435D8A);
|
|
|
+ background-image: linear-gradient(to bottom, #203C6C80, #435D8A40);
|
|
|
border-color: #669FFF;
|
|
|
color: #7DADFF;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .column-content-half{
|
|
|
- height:calc(((70vh - 180px)/2) - 26px);
|
|
|
+
|
|
|
+ .column-content-half {
|
|
|
+ height: calc(((70vh - 180px) / 2) - 26px);
|
|
|
font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
- .tab-block{
|
|
|
+ .tab-block {
|
|
|
@include flexCenter;
|
|
|
- color:#9FB9E7;
|
|
|
- margin-bottom:10px;
|
|
|
- .tab-blue{
|
|
|
+ color: #9FB9E7;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .tab-blue {
|
|
|
background: #3D74FF;
|
|
|
width: 20px;
|
|
|
height: 10px;
|
|
|
display: inline-block;
|
|
|
border-right: 1px;
|
|
|
- margin:0 5px 0 10px;
|
|
|
+ margin: 0 5px 0 10px;
|
|
|
|
|
|
}
|
|
|
- .tab-yellow{
|
|
|
+
|
|
|
+ .tab-yellow {
|
|
|
@extend .tab-blue;
|
|
|
background: #FFB342;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .access-row{
|
|
|
+ .access-row {
|
|
|
@include flexStart;
|
|
|
- .a-r-label{
|
|
|
+
|
|
|
+ .a-r-label {
|
|
|
width: 120px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
- .a-r-progress{
|
|
|
+
|
|
|
+ .a-r-progress {
|
|
|
width: calc(100% - 110px);
|
|
|
- margin-left:10px;
|
|
|
- .p-total{
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ .p-total {
|
|
|
@include flexStart;
|
|
|
width: 100%;
|
|
|
- color:#9FB9E7;
|
|
|
- .progress{
|
|
|
+ color: #9FB9E7;
|
|
|
+
|
|
|
+ .progress {
|
|
|
transition: all .3s;
|
|
|
- background-image: linear-gradient(to right,#1D47B0,#3D74FF);
|
|
|
+ background-image: linear-gradient(to right, #1D47B0, #3D74FF);
|
|
|
height: 10px;
|
|
|
- margin-right:5px;
|
|
|
+ margin-right: 5px;
|
|
|
border-radius: 0 5px 5px 0;
|
|
|
}
|
|
|
}
|
|
|
- .p-error{
|
|
|
- .progress{
|
|
|
- background-image: linear-gradient(to right,#A36F22,#FFB342);
|
|
|
+
|
|
|
+ .p-error {
|
|
|
+ .progress {
|
|
|
+ background-image: linear-gradient(to right, #A36F22, #FFB342);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .alarm-ranking{
|
|
|
- margin-top:11px;
|
|
|
+ .alarm-ranking {
|
|
|
+ margin-top: 11px;
|
|
|
}
|
|
|
- .alarm-row{
|
|
|
- .ranking-title{
|
|
|
- margin-bottom:5px;
|
|
|
+
|
|
|
+ .alarm-row {
|
|
|
+ .ranking-title {
|
|
|
+ margin-bottom: 5px;
|
|
|
@include flexBetween;
|
|
|
- .no1{
|
|
|
+
|
|
|
+ .no1 {
|
|
|
color: #FFB342;
|
|
|
font-size: 16px;
|
|
|
font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
|
|
|
}
|
|
|
- .no2{
|
|
|
+
|
|
|
+ .no2 {
|
|
|
@extend .no1;
|
|
|
color: #72D5FF;
|
|
|
}
|
|
|
- .no3{
|
|
|
+
|
|
|
+ .no3 {
|
|
|
@extend .no1;
|
|
|
color: #56D4B3;
|
|
|
}
|
|
|
- .no-other{
|
|
|
+
|
|
|
+ .no-other {
|
|
|
@extend .no1;
|
|
|
color: #A1B3D2;
|
|
|
}
|
|
|
- .alarm-num{
|
|
|
- color:#9FB9E7;
|
|
|
+
|
|
|
+ .alarm-num {
|
|
|
+ color: #9FB9E7;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .alarm-progress{
|
|
|
+
|
|
|
+ .alarm-progress {
|
|
|
margin-bottom: 5px;
|
|
|
width: 100%;
|
|
|
- height:10px;
|
|
|
+ height: 10px;
|
|
|
background: #205194;
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
- .progress{
|
|
|
+
|
|
|
+ .progress {
|
|
|
transition: all .3s;
|
|
|
- background-image: linear-gradient(to right,#1D47B0,#3D74FF);
|
|
|
+ background-image: linear-gradient(to right, #1D47B0, #3D74FF);
|
|
|
height: 10px;
|
|
|
- margin-right:5px;
|
|
|
+ margin-right: 5px;
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .content-chart{
|
|
|
+ .content-chart {
|
|
|
@include flexBetween;
|
|
|
- margin-top:16px;
|
|
|
- &-row{
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ &-row {
|
|
|
width: calc(50% - 8px);
|
|
|
- margin-left:16px;
|
|
|
- &:first-child{
|
|
|
- margin-left:0;
|
|
|
+ margin-left: 16px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
}
|
|
|
}
|
|
|
- .btn-span{
|
|
|
- background-image: linear-gradient(to bottom,#25B1FF,#1E4683);
|
|
|
+
|
|
|
+ .btn-span {
|
|
|
+ background: linear-gradient(to bottom, #257CFF 0%, #222E7F 100%);
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ border: 1px solid;
|
|
|
+ border-image: linear-gradient(180deg, rgba(149, 223, 255, 1), rgba(114, 213, 255, 1)) 1 1;
|
|
|
font-size: 14px;
|
|
|
- border:1px solid #95DFFF;
|
|
|
cursor: pointer;
|
|
|
line-height: 30px;
|
|
|
- padding:0 10px;
|
|
|
+ padding: 0 10px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
- .chart-content{
|
|
|
- height:260px;
|
|
|
+
|
|
|
+ .chart-content {
|
|
|
+ height: 260px;
|
|
|
}
|
|
|
- .run-tendency{
|
|
|
+
|
|
|
+ .run-tendency {
|
|
|
@include flexBetween;
|
|
|
align-items: flex-start;
|
|
|
- .run-title{
|
|
|
+
|
|
|
+ .run-title {
|
|
|
width: 200px;
|
|
|
- height:238px;
|
|
|
+ height: 238px;
|
|
|
overflow: auto;
|
|
|
- .r-t-row{
|
|
|
+
|
|
|
+ .r-t-row {
|
|
|
@include flexStart;
|
|
|
- padding:6px 8px;
|
|
|
+ padding: 6px 8px;
|
|
|
cursor: pointer;
|
|
|
- .r-value{
|
|
|
+
|
|
|
+ .r-value {
|
|
|
width: 66px;
|
|
|
line-height: 44px;
|
|
|
- background: #16418B;
|
|
|
+ background: #0B1254;
|
|
|
box-shadow: inset 0 0 5px 0 #3885DB;
|
|
|
border-radius: 2px 2px 2px 2px;
|
|
|
- border: 1px solid #72D5FF;
|
|
|
+ border: 1px solid #0B0A55;
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
- color:#C9EFFF;
|
|
|
- margin-right:5px;
|
|
|
+ color: #C9EFFF;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
- .r-obj-name{
|
|
|
+
|
|
|
+ .r-obj-name {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
- .r-obj-metrics-name{
|
|
|
+
|
|
|
+ .r-obj-metrics-name {
|
|
|
font-size: 12px;
|
|
|
- color:#9FB9E7;
|
|
|
- margin-top:5px;
|
|
|
+ color: #9FB9E7;
|
|
|
+ margin-top: 5px;
|
|
|
}
|
|
|
- &:hover{
|
|
|
- background: #17468D;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #162E81;
|
|
|
}
|
|
|
}
|
|
|
- .active{
|
|
|
- background: #17468D;
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background: #162E81;
|
|
|
}
|
|
|
}
|
|
|
- .chart-sort{
|
|
|
+
|
|
|
+ .chart-sort {
|
|
|
width: calc(100% - 210px);
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
- .health-t{
|
|
|
- .el-input__wrapper{
|
|
|
- background-image: linear-gradient(to bottom,#2F5BA7,#123269);
|
|
|
- box-shadow:0 0 0 1px #7EC1FF;
|
|
|
+
|
|
|
+ .health-t {
|
|
|
+ .el-input__wrapper {
|
|
|
+ background-image: linear-gradient(to bottom, #28388D, #060443);
|
|
|
+ box-shadow: 0 0 0 1px #7EC1FF;
|
|
|
}
|
|
|
- .el-select .el-input .el-select__caret{
|
|
|
- color:white;
|
|
|
+
|
|
|
+ .el-select .el-input .el-select__caret {
|
|
|
+ color: white;
|
|
|
}
|
|
|
- .el-input__inner{
|
|
|
- color:white;
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ color: white;
|
|
|
}
|
|
|
- .el-input__prefix{
|
|
|
- color:white;
|
|
|
+
|
|
|
+ .el-input__prefix {
|
|
|
+ color: white;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .food-list-footer{
|
|
|
+ .food-list-footer {
|
|
|
@include flexCenter;
|
|
|
padding-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 滚动条
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 4px;
|
|
|
- }
|
|
|
|
|
|
- ::-webkit-scrollbar-track {
|
|
|
- // width: 6px;
|
|
|
- background: rgba(#0E4690, .2);
|
|
|
- // -webkit-border-radius: 2em;
|
|
|
- // -moz-border-radius: 2em;
|
|
|
- // border-radius: 2em;
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- background-color: rgba(#72D5FF, .7);
|
|
|
- background-clip: padding-box;
|
|
|
- min-height: 28px;
|
|
|
- // -webkit-border-radius: 2em;
|
|
|
- // -moz-border-radius: 2em;
|
|
|
- // border-radius: 2em;
|
|
|
- }
|
|
|
+// 滚动条
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+}
|
|
|
|
|
|
- ::-webkit-scrollbar-thumb:hover {
|
|
|
- background: #72D5FF;
|
|
|
- }
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ // width: 6px;
|
|
|
+ background: rgba(6, 5, 65, .2)
|
|
|
+ // -webkit-border-radius: 2em;
|
|
|
+ // -moz-border-radius: 2em;
|
|
|
+ // border-radius: 2em;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ background-color: rgba(6, 5, 65, .8);
|
|
|
+ background-clip: padding-box;
|
|
|
+ min-height: 28px;
|
|
|
+ // -webkit-border-radius: 2em;
|
|
|
+ // -moz-border-radius: 2em;
|
|
|
+ // border-radius: 2em;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #72D5FF;
|
|
|
}
|