297 lines
6.3 KiB
SCSS
297 lines
6.3 KiB
SCSS
|
.container {
|
||
|
|
padding: 32rpx;
|
||
|
|
background-color: rgba(245, 245, 245, 1);
|
||
|
|
.checkBtn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
line-height: 40px;
|
||
|
|
height: 40px;
|
||
|
|
width: 100%;
|
||
|
|
background: rgba(77, 192, 229, 1);
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 400;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.filter {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
.time {
|
||
|
|
|
||
|
|
}
|
||
|
|
.right-class {
|
||
|
|
margin-left: 10rpx;
|
||
|
|
width: 144rpx;
|
||
|
|
background: rgba(255, 255, 255, 1);
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.collect {
|
||
|
|
margin-top: 10px;
|
||
|
|
background: rgba(255, 255, 255, 1);
|
||
|
|
box-shadow: -2rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.15);
|
||
|
|
padding-bottom: 20px;
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
.title-bg {
|
||
|
|
height: 30px;
|
||
|
|
//background: linear-gradient(128.01deg, rgba(41, 193, 229, 0.4) 0%, rgba(182, 227, 240, 0.4) 100%);
|
||
|
|
//box-shadow:inset -1px -1px 4px rgba(39, 65, 125, 0.43);
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: rgba(39, 65, 125, 1);
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 500;
|
||
|
|
padding-right: 50px;
|
||
|
|
margin-right: 5px;
|
||
|
|
overflow: hidden;
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: -1px;
|
||
|
|
right: 20px;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% + 2px);
|
||
|
|
background: linear-gradient(128.01deg, rgba(41, 193, 229, 0.4) 0%, rgba(182, 227, 240, 0.4) 100%);
|
||
|
|
box-shadow:inset -1px -1px 4px rgba(39, 65, 125, 0.43);
|
||
|
|
border-radius: 0px 0px 10px 0px;
|
||
|
|
transform: skewX(-20deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.noBg {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.charts-box {
|
||
|
|
padding-top: 18px;
|
||
|
|
}
|
||
|
|
.item-value {
|
||
|
|
height: 52px;
|
||
|
|
background: #F7F8FA;
|
||
|
|
margin:0 10px 6px;
|
||
|
|
padding: 0 18px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.item-left {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
column-gap: 6px;
|
||
|
|
color: rgba(102, 102, 102, 1);
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
.item-right {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: rgba(51, 51, 51, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.customer-status {
|
||
|
|
margin-top: 16px;
|
||
|
|
background: rgba(255, 255, 255, 1);
|
||
|
|
box-shadow: -2rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.15);
|
||
|
|
padding-bottom: 20px;
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
.title-bg {
|
||
|
|
height: 30px;
|
||
|
|
//background: linear-gradient(128.01deg, rgba(41, 193, 229, 0.4) 0%, rgba(182, 227, 240, 0.4) 100%);
|
||
|
|
//box-shadow:inset -1px -1px 4px rgba(39, 65, 125, 0.43);
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: rgba(39, 65, 125, 1);
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 500;
|
||
|
|
padding-right: 50px;
|
||
|
|
overflow: hidden;
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: -1px;
|
||
|
|
right: 20px;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% + 2px);
|
||
|
|
background: linear-gradient(128.01deg, rgba(41, 193, 229, 0.4) 0%, rgba(182, 227, 240, 0.4) 100%);
|
||
|
|
box-shadow:inset -1px -1px 4px rgba(39, 65, 125, 0.43);
|
||
|
|
border-radius: 0px 0px 10px 0px;
|
||
|
|
transform: skewX(-20deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.noBg {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.customer-status-top {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 28rpx 20rpx 0;
|
||
|
|
.item-box {
|
||
|
|
position: relative;
|
||
|
|
width: 207rpx;
|
||
|
|
height: 248rpx;
|
||
|
|
padding-bottom: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
.bg-icon {
|
||
|
|
width: 112rpx;
|
||
|
|
height: 112rpx;
|
||
|
|
position: absolute;
|
||
|
|
top: 64rpx;
|
||
|
|
right: 9rpx;
|
||
|
|
}
|
||
|
|
.item-top {
|
||
|
|
margin: 20rpx 21rpx 0rpx 21rpx;
|
||
|
|
.item-title {
|
||
|
|
display: block;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
line-height: 16px;
|
||
|
|
color: rgba(102, 102, 102, 1);
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
.item-num {
|
||
|
|
display: block;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
line-height: 16px;
|
||
|
|
color: rgba(51, 51, 51, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item-btn {
|
||
|
|
width: 138rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
column-gap: 8rpx;
|
||
|
|
margin-left: 21rpx;
|
||
|
|
padding:0px 18rpx;
|
||
|
|
//height: 36rpx;
|
||
|
|
border-radius: 100px;
|
||
|
|
border: 0.7px solid rgba(102, 102, 102, 1);
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
letter-spacing: 0rpx;
|
||
|
|
//line-height: 34.76rpx;
|
||
|
|
color: rgba(102, 102, 102, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.customer-status-bottom {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 28rpx 20rpx 0;
|
||
|
|
.item-box {
|
||
|
|
position: relative;
|
||
|
|
width: 317rpx;
|
||
|
|
padding: 10px 0;
|
||
|
|
//height: 160rpx;
|
||
|
|
.bg-icon {
|
||
|
|
position: absolute;
|
||
|
|
width: 114rpx;
|
||
|
|
height: 114rpx;
|
||
|
|
right: 0px;
|
||
|
|
}
|
||
|
|
.item-top {
|
||
|
|
margin: 36rpx 0rpx 0rpx 20rpx;
|
||
|
|
.item-title {
|
||
|
|
display: block;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
line-height: 16px;
|
||
|
|
color: rgba(102, 102, 102, 1);
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
.item-num {
|
||
|
|
display: block;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
line-height: 16px;
|
||
|
|
color: rgba(51, 51, 51, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item-btn {
|
||
|
|
float: right;
|
||
|
|
right: 21rpx;
|
||
|
|
width: 138rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
column-gap: 8rpx;
|
||
|
|
padding:0 18rpx;
|
||
|
|
//height: 36rpx;
|
||
|
|
border-radius: 100px;
|
||
|
|
border: 0.7px solid rgba(102, 102, 102, 1);
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
letter-spacing: 0rpx;
|
||
|
|
//line-height: 34.76rpx;
|
||
|
|
color: rgba(102, 102, 102, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.popupView {
|
||
|
|
padding: 40px 16px;
|
||
|
|
.query-view {
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
.searchInput {
|
||
|
|
height: 34px;
|
||
|
|
line-height: 34px;
|
||
|
|
padding: 0 10px;
|
||
|
|
flex: 1;
|
||
|
|
background: #F7F8FA;
|
||
|
|
}
|
||
|
|
.primaryButton {
|
||
|
|
flex: none;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
column-gap: 8px;
|
||
|
|
height: 34px;
|
||
|
|
padding-left: 14px;
|
||
|
|
padding-right: 14px;
|
||
|
|
color: #fff !important;
|
||
|
|
background-color: #4dc0e5;
|
||
|
|
border-radius: 0px;
|
||
|
|
cursor: pointer;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.user-box {
|
||
|
|
overflow: auto;
|
||
|
|
margin-top: 24px;
|
||
|
|
max-height: 200px;
|
||
|
|
min-height: 200px;
|
||
|
|
.user-item {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 400;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.user-active {
|
||
|
|
color: #29BBE4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.operateBox {
|
||
|
|
margin-top: 32px;
|
||
|
|
display: flex;
|
||
|
|
gap: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|