diff --git a/mobile-uni/src/pages/user/today/index.vue b/mobile-uni/src/pages/user/today/index.vue index 553cbd78..9aaf86d6 100644 --- a/mobile-uni/src/pages/user/today/index.vue +++ b/mobile-uni/src/pages/user/today/index.vue @@ -102,28 +102,46 @@ - - - {{ primaryAssignmentTagText }} + + + + + {{ primaryAssignmentTagText }} + + + + 预计 3 分钟 + - - {{ primaryScheduleTitle }} - {{ primaryScheduleDesc }} + + + {{ primaryScheduleTitle }} + {{ primaryScheduleDesc }} + + - - - - SOP复习 + + + + + SOP复习 + + + + 预计 5 分钟 + - - {{ home?.review?.title }} - {{ home?.review?.desc }} + + + {{ home?.review?.title }} + {{ home?.review?.desc }} + + - @@ -240,6 +258,27 @@ const primaryAssignmentTagClass = computed(() => { return 'tag-practice'; }); +const primaryAssignmentAccentClass = computed(() => { + const source = primaryAssignment.value?.source; + if (source === 'daily') return 'accent-daily'; + if (source === 'retry') return 'accent-retry'; + return 'accent-practice'; +}); + +const primaryAssignmentTagIcon = computed(() => { + const source = primaryAssignment.value?.source; + if (source === 'daily') return 'compose'; + if (source === 'retry') return 'refresh'; + return 'flag-filled'; +}); + +const primaryAssignmentTagColor = computed(() => { + const source = primaryAssignment.value?.source; + if (source === 'daily') return '#2d80ff'; + if (source === 'retry') return '#d97706'; + return '#e60012'; +}); + const primaryAssignment = computed(() => assignments.value.find((item) => item.status === '待训练' && item.source !== 'daily') @@ -1057,31 +1096,58 @@ onUnload(() => { .schedule-list { display: flex; flex-direction: column; - gap: 10px; + gap: 12px; } .schedule-row { + display: flex; + flex-direction: column; + gap: 10px; + padding: 14px; + border-radius: 18px; + background: #ffffff; + border: 1px solid #f0f1f5; + border-left: 4px solid var(--employee-primary); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03); + transition: transform 0.15s ease, box-shadow 0.15s ease; +} + +.schedule-row.accent-daily { + border-left-color: #2d80ff; +} + +.schedule-row.accent-retry { + border-left-color: #d97706; +} + +.schedule-row.accent-practice { + border-left-color: var(--employee-primary); +} + +.schedule-row.accent-review { + border-left-color: #10b981; +} + +.schedule-row-header { display: flex; align-items: center; - gap: 12px; - padding: 14px 12px; - border-radius: 16px; - background: #f9f9fb; + justify-content: space-between; + width: 100%; } .schedule-tag { display: flex; align-items: center; - justify-content: center; - padding: 5px 10px; - border-radius: 10px; + gap: 4px; + padding: 3px 8px; + border-radius: 8px; flex: none; } .schedule-tag-text { - font-size: 12px; + font-size: 11px; font-weight: 800; - line-height: 1; + line-height: 1.2; } .tag-daily { @@ -1104,6 +1170,26 @@ onUnload(() => { color: #059669; } +.schedule-time-meta { + display: flex; + align-items: center; + gap: 4px; +} + +.time-meta-text { + font-size: 11px; + font-weight: 500; + color: #9a9da3; +} + +.schedule-row-body { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; + width: 100%; +} + .schedule-copy { display: flex; min-width: 0; @@ -1114,30 +1200,31 @@ onUnload(() => { .schedule-title { color: #1a1a1a; - font-size: 16px; + font-size: 15px; font-weight: 800; - line-height: 1.3; + line-height: 1.45; } .schedule-desc { color: #8a8d93; - font-size: 13px; + font-size: 12px; line-height: 1.4; } .schedule-action { display: flex; width: auto; - min-width: 84px; - min-height: 44px; + min-width: 80px; + height: 40px; + min-height: 40px; flex: none; align-items: center; justify-content: center; - padding: 0 12px; + padding: 0 14px; border-radius: 12px; background: var(--employee-primary); color: #ffffff; - font-size: 15px; + font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap;