|
|
|
|
page {
|
|
|
|
|
background: #f8fafa;
|
|
|
|
|
}
|
|
|
|
|
.page-switch {
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: right;
|
|
|
|
|
font-family: 'Alibaba PuHuiTi 2.0';
|
|
|
|
|
font-size: 44rpx;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
line-height: 52rpx;
|
|
|
|
|
.arrow {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page {
|
|
|
|
|
min-height: 60vh;
|
|
|
|
|
.user {
|
|
|
|
|
margin: 48rpx 0 0 32rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: start;
|
|
|
|
|
gap: 20rpx;
|
|
|
|
|
.avatar {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
width: 102rpx;
|
|
|
|
|
height: 102rpx;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #fff;
|
|
|
|
|
}
|
|
|
|
|
.wrap {
|
|
|
|
|
padding-top: 8rpx;
|
|
|
|
|
flex: 1;
|
|
|
|
|
.name {
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
.label {
|
|
|
|
|
margin-top: 8rpx;
|
|
|
|
|
padding: 0 12rpx;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 36rpx;
|
|
|
|
|
border-radius: 6rpx;
|
|
|
|
|
background: linear-gradient(84deg, #fece55 0%, #ffb700 100%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.site {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
.date {
|
|
|
|
|
margin-top: 10rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.code {
|
|
|
|
|
padding: 16rpx 28rpx;
|
|
|
|
|
border: 1px solid #fff;
|
|
|
|
|
border-radius: 24rpx 0 0 24rpx;
|
|
|
|
|
border-right: none;
|
|
|
|
|
background: linear-gradient(180deg, #f57b3d 0%, #ffa64d 100%);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8rpx;
|
|
|
|
|
.icon {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 52rpx;
|
|
|
|
|
height: 52rpx;
|
|
|
|
|
}
|
|
|
|
|
.arrow {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.stat-data {
|
|
|
|
|
margin: 32rpx 32rpx 0;
|
|
|
|
|
padding: 32rpx;
|
|
|
|
|
background: linear-gradient(180deg, #ffeede 0%, #ffffff 12.04%, #ffffff 100%);
|
|
|
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
|
|
border: 1px solid #ffffff;
|
|
|
|
|
.s-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: #1a2020;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
.fold {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #b7b7b7;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
&.active {
|
|
|
|
|
.icon {
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tip {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #b5b8bb;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card {
|
|
|
|
|
margin-top: 32rpx;
|
|
|
|
|
border: 1px solid #f5f4f3;
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.row2 {
|
|
|
|
|
display: flex;
|
|
|
|
|
background: linear-gradient(90deg, #ff8a4c 0%, #fece55 100%);
|
|
|
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
|
|
.col {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 28rpx 34rpx;
|
|
|
|
|
.name {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 36rpx;
|
|
|
|
|
}
|
|
|
|
|
.num {
|
|
|
|
|
margin-top: 8rpx;
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 48rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
width: 1px;
|
|
|
|
|
background-color: rgba(238, 245, 245, 0.35);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-container {
|
|
|
|
|
max-height: 600rpx;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
&.fold {
|
|
|
|
|
max-height: 0;
|
|
|
|
|
}
|
|
|
|
|
.row3 {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
display: flex;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.col {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 28rpx 34rpx;
|
|
|
|
|
flex: 1;
|
|
|
|
|
.name {
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: #b7b7b7;
|
|
|
|
|
line-height: 36rpx;
|
|
|
|
|
}
|
|
|
|
|
.num {
|
|
|
|
|
margin-top: 8rpx;
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
color: #342317;
|
|
|
|
|
line-height: 48rpx;
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 20rpx;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 168rpx;
|
|
|
|
|
height: 1px;
|
|
|
|
|
background-color: #f5f4f3;
|
|
|
|
|
}
|
|
|
|
|
&:nth-of-type(2) {
|
|
|
|
|
borer: 1px solid #f2f6f8;
|
|
|
|
|
border-right: none;
|
|
|
|
|
border-left: none;
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.chat-data {
|
|
|
|
|
margin: 32rpx 32rpx;
|
|
|
|
|
padding: 32rpx;
|
|
|
|
|
background: linear-gradient(180deg, #fff6ed 0%, #ffffff 7.03%, #ffffff 100%);
|
|
|
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
|
|
border: 1px solid #ffffff;
|
|
|
|
|
.c-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: #342317;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.switch-btns {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 24rpx;
|
|
|
|
|
.btn {
|
|
|
|
|
flex: 1;
|
|
|
|
|
width: 148rpx;
|
|
|
|
|
height: 56rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #342317;
|
|
|
|
|
border-radius: 1748rpx 1748rpx 1748rpx 1748rpx;
|
|
|
|
|
border: 1px solid rgba(175, 171, 169, 0.2);
|
|
|
|
|
&.active {
|
|
|
|
|
background-color: #ff8a4c;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-color: #ff8a4c;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.c-options {
|
|
|
|
|
margin-top: 28rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.name {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
color: #342317;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
.fold {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #b7b7b7;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
&.active {
|
|
|
|
|
.icon {
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.picker {
|
|
|
|
|
color: #ffa64d;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
.p-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.content {
|
|
|
|
|
color: #6a605c;
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
padding: 20rpx 10rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card {
|
|
|
|
|
margin-top: 32rpx;
|
|
|
|
|
border: 1px solid #f5f4f3;
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.row2 {
|
|
|
|
|
display: flex;
|
|
|
|
|
background: linear-gradient(90deg, #ff8a4c 0%, #fece55 100%);
|
|
|
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
|
|
.col {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 28rpx 34rpx;
|
|
|
|
|
.name {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 36rpx;
|
|
|
|
|
}
|
|
|
|
|
.num {
|
|
|
|
|
margin-top: 8rpx;
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 48rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
width: 1px;
|
|
|
|
|
background-color: rgba(238, 245, 245, 0.35);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-container {
|
|
|
|
|
max-height: 600rpx;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
&.fold {
|
|
|
|
|
max-height: 0;
|
|
|
|
|
}
|
|
|
|
|
.row3 {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
display: flex;
|
|
|
|
|
.col {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 28rpx 34rpx;
|
|
|
|
|
flex: 1;
|
|
|
|
|
.name {
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: #b7b7b7;
|
|
|
|
|
line-height: 36rpx;
|
|
|
|
|
}
|
|
|
|
|
.num {
|
|
|
|
|
margin-top: 8rpx;
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
color: #342317;
|
|
|
|
|
line-height: 48rpx;
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 20rpx;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 168rpx;
|
|
|
|
|
height: 1px;
|
|
|
|
|
background-color: #f5f4f3;
|
|
|
|
|
}
|
|
|
|
|
&:nth-of-type(2) {
|
|
|
|
|
borer: 1px solid #f2f6f8;
|
|
|
|
|
border-right: none;
|
|
|
|
|
border-left: none;
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.chart-range {
|
|
|
|
|
margin-top: 40rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.picker {
|
|
|
|
|
.p-content {
|
|
|
|
|
padding: 8rpx 38rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 18rpx;
|
|
|
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
|
|
|
border: 1px solid #f2f6f8;
|
|
|
|
|
.content {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #b5b8bb;
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
width: 24rpx;
|
|
|
|
|
height: 1px;
|
|
|
|
|
background-color: #f2f6f8;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.chart-container {
|
|
|
|
|
margin-top: 16rpx;
|
|
|
|
|
padding: 15rpx 30rpx;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 546rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
.more {
|
|
|
|
|
padding: 20rpx 0 0;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #ff8a4c;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
