{{ challenge.description || '' }}
等待成员确认（已同意 {{ agreedCount }}/{{ totalCount }}）{{ deadlineText }}
{{ mp.nickname }} 已拒绝
{{ challenge.totalProgress || 0 }}/{{ challenge.targetValue }}
{{ mp.nickname }}
{{ mp.progressValue }}/{{ challenge.targetValue }}
✓
⏱ {{ challenge.durationDays }}天
· 截止 {{ formatDate(challenge.endDate) }}
· 🏆 +{{ challenge.rewardPoints }}分
✅ 同意
✖ 拒绝
✅ 打卡
.challenge-card {
background: $app-surface;
border-radius: 16rpx;
margin: 0 20rpx 12rpx 20rpx;
padding: 14rpx 16rpx;
border-left: 6rpx solid $status-success;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4rpx;
}
.card-title {
font-size: 26rpx;
font-weight: 700;
color: $uni-text-color;
}
.card-status {
font-size: 20rpx;
padding: 2rpx 10rpx;
border-radius: 999rpx;
}
.status-active { background: $status-success-soft-2; color: $status-success-strong-2; }
.status-completed { background: $facade-fill-slate; color: $uni-text-color-secondary; }
.status-cancelled { background: $status-danger-soft; color: $status-danger-deep; }
.card-desc {
font-size: 22rpx;
color: $uni-text-color-secondary;
line-height: 1.4;
margin-bottom: 8rpx;
display: block;
}
/* 待同意提示区 */
.pending-section {
background: $status-warning-soft;
border-radius: 10rpx;
padding: 10rpx 12rpx;
margin-bottom: 6rpx;
}
.pending-hint {
font-size: 22rpx;
color: #B45309;
font-weight: 600;
}
/* 成员状态徽标行 */
.member-status-row {
display: flex;
flex-wrap: wrap;
gap: 8rpx;
margin-bottom: 6rpx;
}
.member-status-tag {
font-size: 18rpx;
padding: 2rpx 10rpx;
border-radius: 999rpx;
}
.member-rejected {
background: $status-danger-soft;
color: $status-danger-deep;
}
/* 目标区 */
.target-section {
background: $facade-fill-slate-50;
border-radius: 10rpx;
padding: 10rpx 12rpx;
margin-bottom: 6rpx;
}
.target-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6rpx;
}
.target-label { font-size: 22rpx; color: $facade-text-slate-deep; font-weight: 600; }
.target-value { font-size: 26rpx; color: $status-success; font-weight: 700; }
.card-progress {
display: flex;
align-items: center;
gap: 10rpx;
margin-top: 2rpx;
}
.progress-bar-bg {
flex: 1;
height: 10rpx;
background: $uni-border-color-light;
border-radius: 999rpx;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, $status-success, $status-success-light-3);
border-radius: 999rpx;
transition: width 0.5s ease;
}
.progress-text {
font-size: 20rpx;
color: $status-success;
font-weight: 600;
min-width: 90rpx;
text-align: right;
}
/* 成员进度 */
.member-list {
margin-top: 2rpx;
}
.member-row {
display: flex;
align-items: center;
gap: 8rpx;
margin-top: 6rpx;
}
.member-name {
font-size: 20rpx;
color: $facade-text-slate-deep;
width: 90rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.member-bar-wrap { flex: 1; }
.member-bar-bg {
height: 8rpx;
background: $uni-border-color-light;
border-radius: 999rpx;
overflow: hidden;
}
.member-bar-fill {
height: 100%;
background: linear-gradient(90deg, $dim-wisdom, $facade-violet);
border-radius: 999rpx;
}
.member-val {
font-size: 18rpx;
color: $uni-text-color-secondary;
min-width: 80rpx;
text-align: right;
}
.member-done {
font-size: 22rpx;
color: $status-success;
font-weight: 700;
}
/* 详情行（合并为单行） */
.card-detail-row {
display: flex;
align-items: center;
gap: 6rpx;
margin-top: 6rpx;
flex-wrap: wrap;
}
.detail-label { font-size: 20rpx; color: $app-text-subtle; }
.detail-val { font-size: 20rpx; color: $facade-text-slate-700; }
.detail-val.reward { color: $brand-primary; font-weight: 600; }
.detail-val.badge { color: $dim-wisdom; }
.card-action {
margin-top: 8rpx;
display: flex;
justify-content: flex-end;
}
.checkin-btn {
padding: 10rpx 18rpx;
border-radius: 999rpx;
background: $status-success;
color: $app-surface;
font-size: 22rpx;
font-weight: 600;
}
.respond-btn {
padding: 10rpx 24rpx;
border-radius: 999rpx;
font-size: 22rpx;
font-weight: 600;
margin-left: 12rpx;
}
.respond-agree {
background: $status-success;
color: $app-surface;
}
.respond-reject {
background: $app-surface;
color: $status-danger-deep;
border: 2rpx solid #FCA5A5;
}