加载中...
{{ getStatusText(execution) }}
{{ execution.assessorStatus === 'completed' ? '已完成' : '进行中' }}
{{ formatTime(execution.assessorCompletedAt) }}
{{ execution.plannerStatus === 'completed' ? '已完成' : '进行中' }}
{{ formatTime(execution.plannerCompletedAt) }}
{{ execution.userConfirmed === 1 ? '已确认' : '待确认' }}
{{ formatTime(execution.userConfirmedAt) }}
服务备注
评估师：
{{ execution.assessorNotes }}
规划师：
{{ execution.plannerNotes }}
暂无执行记录
.container {
padding: 40rpx;
background: $facade-fill-2;
min-height: 100vh;
}
.header {
margin-bottom: 40rpx;
}
.title {
font-size: 40rpx;
font-weight: bold;
color: $facade-text-strong;
display: block;
margin-bottom: 10rpx;
}
.subtitle {
font-size: 28rpx;
color: $facade-text-muted;
}
.loading, .empty {
text-align: center;
padding: 100rpx 0;
color: $facade-text-muted;
}
.status-card {
background: white;
border-radius: 20rpx;
padding: 60rpx 40rpx;
text-align: center;
margin-bottom: 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.status-icon {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30rpx;
position: relative;
}
.icon-circle {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
/* CSS 对勾图标 */
.icon-check {
width: 40rpx;
height: 24rpx;
border-left: 6rpx solid $app-surface;
border-bottom: 6rpx solid $app-surface;
transform: rotate(-45deg);
margin-top: -6rpx;
z-index: 1;
}
/* CSS 感叹号图标 */
.icon-alert {
width: 6rpx;
height: 36rpx;
background: $app-surface;
border-radius: 3rpx;
position: relative;
z-index: 1;
}
.icon-alert::after {
content: '';
position: absolute;
bottom: -20rpx;
left: 50%;
transform: translateX(-50%);
width: 10rpx;
height: 10rpx;
background: $app-surface;
border-radius: 50%;
}
/* CSS 加载中三个点图标 */
.icon-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
z-index: 1;
}
.icon-dots view {
width: 12rpx;
height: 12rpx;
background: $app-surface;
border-radius: 50%;
}
.status-icon.pending {
background: linear-gradient(135deg, #ffe0b2, #ffcc80);
}
.status-icon.pending .icon-circle {
background: linear-gradient(135deg, $mat-orange-base, #f57c00);
}
.status-icon.ready {
background: linear-gradient(135deg, #bbdefb, #90caf9);
}
.status-icon.ready .icon-circle {
background: linear-gradient(135deg, $mat-blue-base, #1976d2);
}
.status-icon.completed {
background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
}
.status-icon.completed .icon-circle {
background: linear-gradient(135deg, $mat-green, #388e3c);
}
.status-text {
font-size: 36rpx;
font-weight: bold;
color: $facade-text-strong;
}
.timeline {
background: white;
border-radius: 20rpx;
padding: 40rpx;
margin-bottom: 30rpx;
}
.timeline-item {
display: flex;
margin-bottom: 40rpx;
position: relative;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-item::before {
content: '';
position: absolute;
left: 15rpx;
top: 30rpx;
bottom: -40rpx;
width: 2rpx;
background: $facade-hairline;
}
.timeline-item:last-child::before {
display: none;
}
.timeline-dot {
width: 30rpx;
height: 30rpx;
border-radius: 50%;
background: $facade-hairline;
margin-right: 30rpx;
flex-shrink: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.dot-check {
width: 12rpx;
height: 8rpx;
border-left: 3rpx solid $app-surface;
border-bottom: 3rpx solid $app-surface;
transform: rotate(-45deg);
margin-top: -2rpx;
}
.timeline-item.active .timeline-dot {
background: $mat-green;
}
/* 时间线头部（图标+标题） */
.timeline-header {
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
.timeline-icon {
width: 36rpx;
height: 36rpx;
border-radius: 8rpx;
margin-right: 16rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* 评估师图标 */
.assessor-icon {
background: linear-gradient(135deg, $mat-blue-tint, #bbdefb);
}
.assessor-icon::after {
content: '';
width: 16rpx;
height: 16rpx;
border: 3rpx solid $mat-blue-base;
border-radius: 50%;
position: absolute;
top: 8rpx;
left: 8rpx;
}
.assessor-icon::before {
content: '';
width: 20rpx;
height: 3rpx;
background: $mat-blue-base;
position: absolute;
bottom: 10rpx;
left: 8rpx;
border-radius: 2rpx;
}
/* 规划师图标 */
.planner-icon {
background: linear-gradient(135deg, $mat-green-tint, #c8e6c9);
}
.planner-icon::after {
content: '';
width: 16rpx;
height: 16rpx;
border: 3rpx solid $mat-green;
border-radius: 50%;
position: absolute;
top: 8rpx;
left: 8rpx;
}
.planner-icon::before {
content: '';
width: 20rpx;
height: 3rpx;
background: $mat-green;
position: absolute;
bottom: 10rpx;
left: 8rpx;
border-radius: 2rpx;
}
/* 确认图标 */
.confirm-icon {
background: linear-gradient(135deg, $fortune-1-tint, #ffe0b2);
}
.confirm-icon::after {
content: '';
width: 16rpx;
height: 16rpx;
border: 3rpx solid $mat-orange-base;
border-radius: 50%;
position: absolute;
top: 8rpx;
left: 8rpx;
}
.confirm-icon::before {
content: '';
width: 20rpx;
height: 3rpx;
background: $mat-orange-base;
position: absolute;
bottom: 10rpx;
left: 8rpx;
border-radius: 2rpx;
}
.timeline-content {
flex: 1;
}
.timeline-title {
font-size: 32rpx;
font-weight: bold;
color: $facade-text-strong;
display: block;
margin-bottom: 10rpx;
}
.timeline-desc {
font-size: 26rpx;
color: $facade-text-body;
display: block;
margin-bottom: 5rpx;
}
.timeline-time {
font-size: 24rpx;
color: $facade-text-muted;
}
.notes-section {
background: white;
border-radius: 20rpx;
padding: 40rpx;
margin-bottom: 30rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: $facade-text-strong;
display: block;
margin-bottom: 20rpx;
}
.note-item {
margin-bottom: 20rpx;
}
.note-label {
font-size: 28rpx;
color: $facade-text-body;
font-weight: bold;
}
.note-content {
font-size: 28rpx;
color: $facade-text-strong;
}
.actions {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.btn-primary, .btn-secondary, .btn-outline {
border-radius: 20rpx;
font-size: 32rpx;
padding: 30rpx;
text-align: center;
}
.btn-primary {
background: #1E3A5F;
color: white;
border: none;
}
.btn-secondary {
background: $mat-orange-base;
color: white;
border: none;
}
.btn-outline {
background: white;
color: $facade-text-body;
border: 2rpx solid $facade-border-soft;
}