.workDash {
|
&-d {
|
display: flex;
|
width: 100%;
|
justify-content: space-around;
|
// & .ant-space-item {
|
// flex: 1;
|
// }
|
}
|
&-item {
|
flex: 1;
|
display: flex;
|
gap: 16px;
|
&-img {
|
width: 48px;
|
height: 48px;
|
background-color: rgba(242, 243, 245, 0.95);
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
& img {
|
width: 24px;
|
height: 24px;
|
}
|
}
|
&-div {
|
}
|
&-title {
|
font-size: 14px;
|
line-height: 22px;
|
color: #4e5969;
|
display: flex;
|
&-green {
|
display: inline-block;
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
background-color: #00b42a;
|
margin-right: 8px;
|
}
|
&-red {
|
display: inline-block;
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
background-color: #f53f3f;
|
margin-right: 8px;
|
}
|
&-blue {
|
display: inline-block;
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
background-color: #1A6FB8;
|
margin-right: 8px;
|
}
|
}
|
&-value {
|
color: #1d2129;
|
font-size: 18px;
|
font-weight: 400;
|
line-height: 26px;
|
display: flex;
|
}
|
}
|
&-item1 {
|
flex: 2;
|
display: flex;
|
gap: 16px;
|
}
|
&-main {
|
display: flex;
|
flex: 2;
|
background-color: #fff;
|
&-flex_1 {
|
flex: 1;
|
background-color: #fff;
|
}
|
|
&-card {
|
// width: 197px;
|
flex: 1;
|
&-one {
|
padding: 0 16px 16px;
|
display: flex;
|
gap: 24px;
|
justify-content: space-between;
|
}
|
&-head {
|
display: flex;
|
&-l {
|
cursor: pointer;
|
width: 86px;
|
height: 86px;
|
background-color: #08979c;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
border-radius: 5px 0px 0px 5px;
|
&-img {
|
width: 48px;
|
height: 48px;
|
border-radius: 50%;
|
background-color: #96e0d7;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
& img {
|
width: 24px;
|
height: 24px;
|
}
|
&-title {
|
cursor: pointer;
|
margin-top: 4px;
|
color: rgba(255, 255, 255, 0.8);
|
font-size: 14px;
|
line-height: 19px;
|
}
|
}
|
}
|
&-r {
|
cursor: pointer;
|
background: linear-gradient(271deg, #13c2c2 0%, rgba(5, 174, 174, 0.8) 14%);
|
color: #fff;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
justify-content: center;
|
border-radius: 0px 5px 5px 0px;
|
padding-left: 16px;
|
flex: 1;
|
gap: 8px;
|
&-title {
|
font-size: 14px;
|
}
|
&-value {
|
cursor: pointer;
|
font-size: 20px;
|
line-height: 28px;
|
font-weight: 500;
|
display: flex;
|
align-items: center;
|
height: 28px;
|
}
|
&-subValue {
|
font-size: 14px;
|
line-height: 28px;
|
font-weight: 400;
|
position: relative;
|
top: 2px;
|
}
|
}
|
}
|
&-body {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
// padding: 10px;
|
padding: 0 6px;
|
gap: 8px;
|
margin-top: 16px;
|
&-flex {
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
|
// width: 28%;
|
&-title {
|
font-size: 14px;
|
line-height: 22px;
|
color: #4e5969;
|
}
|
&-value {
|
color: #1d2129;
|
font-size: 14px;
|
line-height: 22px;
|
}
|
}
|
}
|
}
|
}
|
&-main1 {
|
// display: flex;
|
flex: 1;
|
background-color: #fff;
|
&-chart {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0 16px 12px;
|
}
|
&-flex {
|
width: 50%;
|
display: flex;
|
gap: 16px;
|
justify-content: center;
|
padding: 11px 0;
|
&-l {
|
font-size: 14px;
|
line-height: 22px;
|
color: #4e5969;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
&-value {
|
color: #1d2129;
|
font-size: 18px;
|
line-height: 26px;
|
font-weight: 400;
|
}
|
&-subValue {
|
font-size: 14px;
|
line-height: 22px;
|
color: #4e5969;
|
}
|
}
|
&-r {
|
width: 72px;
|
height: 48px;
|
padding: 4px 12px;
|
text-align: center;
|
font-size: 12px;
|
line-height: 20px;
|
&-green {
|
background: #e8ffea;
|
color: #00b42a;
|
}
|
&-orange {
|
background: #fff7e6;
|
color: #ef6c24;
|
}
|
&-blue {
|
background: #e6f7ff;
|
color: #1890ff;
|
}
|
}
|
}
|
}
|
&-grade {
|
padding: 4px 16px 0;
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
&-item {
|
padding: 12px;
|
&-t {
|
display: flex;
|
justify-content: space-between;
|
&-orange {
|
color: #ef6c24;
|
border: 1px solid #fa8c16;
|
background: #fff7e6;
|
padding: 6px 12px 9px;
|
border-radius: 2px;
|
font-family: TeXGyreAdventor;
|
font-weight: 700;
|
line-height: 14px;
|
}
|
&-blue {
|
color: #3491fa;
|
border: 1px solid #3491fa;
|
background: #e8f7ff;
|
padding: 6px 12px 9px;
|
border-radius: 2px;
|
font-family: TeXGyreAdventor;
|
font-weight: 700;
|
line-height: 14px;
|
}
|
&-red {
|
color: #f76560;
|
border: 1px solid #f53f3f;
|
background: #ffece8;
|
padding: 6px 12px 9px;
|
border-radius: 2px;
|
font-family: TeXGyreAdventor;
|
font-weight: 700;
|
line-height: 14px;
|
}
|
&-value {
|
font-size: 18px;
|
line-height: 28px;
|
margin-right: 4px;
|
font-family: TeXGyreAdventor;
|
font-weight: 700;
|
}
|
&-unit {
|
font-size: 12px;
|
line-height: 20px;
|
color: #86909c;
|
}
|
}
|
&-b {
|
margin-top: 10px;
|
margin-bottom: 2px;
|
&-bg {
|
height: 3px;
|
width: 100%;
|
background: #e9eaeb;
|
position: relative;
|
& img {
|
width: 15px;
|
height: 15px;
|
position: absolute;
|
top: -7px;
|
left: 0;
|
}
|
&-orange {
|
width: 0%;
|
height: 3px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
background: linear-gradient(270deg, #ffc069 0%, #fa8c16);
|
}
|
&-blue {
|
width: 0%;
|
height: 3px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
background: linear-gradient(270deg, #57a9fb 0%, #3491fa);
|
}
|
&-red {
|
width: 0%;
|
height: 3px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
background: linear-gradient(270deg, #f76560 0%, #f53f3f);
|
}
|
}
|
}
|
&-orange {
|
border: 1px solid #fa8c16;
|
}
|
&-blue {
|
border: 1px solid #3491fa;
|
}
|
&-red {
|
border: 1px solid #f76560;
|
}
|
}
|
}
|
&-tabs {
|
width: 16px;
|
margin-right: 12px;
|
}
|
|
&-extreme {
|
&-rate {
|
width: 100%;
|
background-color: #f2f3f5;
|
// padding: 2px 12px;
|
// position: relative;
|
&-show {
|
background-color: #b6ddf1;
|
white-space: nowrap; // 确保值不换行
|
padding: 2px 12px;
|
}
|
}
|
}
|
&-public {
|
background-color: #fff;
|
padding: 16px;
|
&-head {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
&-l {
|
display: flex;
|
&-img {
|
width: 48px;
|
height: 48px;
|
background-color: #e7f2ff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 8px;
|
& img {
|
width: 24px;
|
height: 24px;
|
}
|
&-green {
|
background-color: rgba(175,240,181,0.48);
|
}
|
&-blue {
|
background-color: rgba(181,245,236,0.48);
|
}
|
|
}
|
}
|
&-r {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
&-title {
|
font-size: 16px;
|
}
|
&-value {
|
display: flex;
|
align-items: center;
|
&-num {
|
}
|
&-unit {
|
font-size: 14px;
|
line-height: 20px;
|
color: #86909c;
|
}
|
}
|
}
|
}
|
&-body {
|
margin-top: 12px;
|
&-item {
|
background: #f2f3f5;
|
border-radius: 2px;
|
padding: 8px 12px;
|
display: flex;
|
gap: 12px;
|
&-title {
|
font-size: 14px;
|
width: 50%;
|
color: #4e5969;
|
}
|
}
|
}
|
}
|
}
|
|
.workDash-bg_2 {
|
background: #1890ff;
|
&_img {
|
background-color: #91d5ff;
|
}
|
&_r {
|
background: linear-gradient(271deg, #1890ff 0%, rgba(24, 144, 255, 0.8) 14%);
|
}
|
}
|
|
.workDash-bg_3 {
|
background: #ef6c24;
|
&_img {
|
background-color: #ffcba1;
|
}
|
&_r {
|
background: linear-gradient(271deg, #ef6c24 0%, rgba(239, 108, 36, 0.8) 14%);
|
}
|
}
|
|
.workDash-bg_4 {
|
background: #d10269;
|
&_img {
|
background-color: #ffa6c6;
|
}
|
&_r {
|
background: linear-gradient(271deg, #d10269 0%, rgba(209, 2, 105, 0.8) 14%);
|
}
|
}
|
|
.source-button {
|
cursor: pointer;
|
border: 1px solid #c9cdd4 !important;
|
border-radius: 4px !important;
|
padding: 8px 16px !important;
|
display: flex !important;
|
align-items: center !important;
|
height: 38px !important;
|
width: 112px !important;
|
color: #1d2129 !important;
|
gap: 8px !important;
|
&-color {
|
background-color: rgba(182, 221, 241, 0.48) !important;
|
color: #1a6fb8 !important;
|
}
|
}
|
.source-button1 {
|
cursor: pointer;
|
border: 1px solid #c9cdd4 !important;
|
border-radius: 4px !important;
|
padding: 8px 16px !important;
|
display: flex !important;
|
align-items: center !important;
|
height: 38px !important;
|
width: 126px !important;
|
color: #1d2129 !important;
|
gap: 8px !important;
|
&-color {
|
background-color: rgba(182, 221, 241, 0.48) !important;
|
color: #1a6fb8 !important;
|
}
|
}
|
|
.source-icon {
|
cursor: pointer;
|
width: 16px !important;
|
height: 16px !important;
|
}
|
