|
@@ -393,10 +393,10 @@ export default {
|
|
|
' - ' + (item.wakeTime ? String(item.wakeTime).slice(0, 5) : '--:--')
|
|
' - ' + (item.wakeTime ? String(item.wakeTime).slice(0, 5) : '--:--')
|
|
|
item._duration = this.durationFromMinutes(item.durationMinutes)
|
|
item._duration = this.durationFromMinutes(item.durationMinutes)
|
|
|
item._percent = Math.min(100, Math.max(0, Math.round(score * 10)))
|
|
item._percent = Math.min(100, Math.max(0, Math.round(score * 10)))
|
|
|
- if (score >= 8) item._barBg = 'linear-gradient(90deg,#818CF8,#6366F1)'
|
|
|
|
|
- else if (score >= 6) item._barBg = 'linear-gradient(90deg,#34D399,#10B981)'
|
|
|
|
|
- else if (score >= 4) item._barBg = 'linear-gradient(90deg,#FBBF24,#F59E0B)'
|
|
|
|
|
- else item._barBg = 'linear-gradient(90deg,#FB7185,#EF4444)'
|
|
|
|
|
|
|
+ if (score >= 8) item._barBg = `linear-gradient(90deg, ${BrandColors.wisdomLight}, ${BrandColors.wisdom})`
|
|
|
|
|
+ else if (score >= 6) item._barBg = `linear-gradient(90deg, ${BrandColors.successLight3}, ${BrandColors.success})`
|
|
|
|
|
+ else if (score >= 4) item._barBg = `linear-gradient(90deg, ${BrandColors.warning}, ${BrandColors.wealth})`
|
|
|
|
|
+ else item._barBg = `linear-gradient(90deg, ${BrandColors.dangerLight2}, ${BrandColors.danger})`
|
|
|
},
|
|
},
|
|
|
buildRemark: function () {
|
|
buildRemark: function () {
|
|
|
var remark = this.form.remark ? this.form.remark.trim() : ''
|
|
var remark = this.form.remark ? this.form.remark.trim() : ''
|
|
@@ -458,8 +458,25 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
|
|
+// ===== 睡眠页专属色阶(雪夜蓝 + 月光米黄,单页主题专用;约定见 uni.scss §14)=====
|
|
|
|
|
+$c-night-page: #EEF1F8; // 页面底(深夜蓝灰)
|
|
|
|
|
+$c-night-1: #3B4A8C; // 雪夜蓝渐变档 1(起点)
|
|
|
|
|
+$c-night-2: #2A3470; // 雪夜蓝渐变档 2(中段)
|
|
|
|
|
+$c-night-3: #1B2350; // 雪夜蓝渐变档 3(终点)
|
|
|
|
|
+$c-moon-soft: #FFE9A8; // 月光浅黄
|
|
|
|
|
+$c-moon: #FFD166; // 月光主黄(星星/月牙)
|
|
|
|
|
+$c-moon-deep: #FFB84D; // 月光深黄
|
|
|
|
|
+$c-dusk-1: #FF9F68; // 暮色橙渐档 1
|
|
|
|
|
+$c-dusk-2: #FF7A45; // 暮色橙渐档 2
|
|
|
|
|
+$c-sepia-ink: #4A2A00; // 深棕文字(暖卡内)
|
|
|
|
|
+$c-sky-ghost: #F8FAFF; // 极浅蓝(卡底)
|
|
|
|
|
+$c-sky-soft: #F1F5FF; // 浅蓝(卡内底)
|
|
|
|
|
+$c-sky-line: #EDF1F7; // 浅蓝分隔线
|
|
|
|
|
+$c-emerald-700: #047857; // 好质量徽章文字(vs 全局 $status-success-deep #059669)
|
|
|
|
|
+$c-rose-400: #FB7185; // 差质量徽章渐变起点(rose-400,全局 danger 族无此档)
|
|
|
|
|
+
|
|
|
/* ===== 页面基础 ===== */
|
|
/* ===== 页面基础 ===== */
|
|
|
-.page { min-height: 100vh; background: #EEF1F8; }
|
|
|
|
|
|
|
+.page { min-height: 100vh; background: $c-night-page; }
|
|
|
.content { padding: 20rpx 0 0; }
|
|
.content { padding: 20rpx 0 0; }
|
|
|
|
|
|
|
|
/* ===== 夜间主题头部 ===== */
|
|
/* ===== 夜间主题头部 ===== */
|
|
@@ -469,7 +486,7 @@ export default {
|
|
|
padding: 36rpx 32rpx 32rpx;
|
|
padding: 36rpx 32rpx 32rpx;
|
|
|
border-radius: 32rpx;
|
|
border-radius: 32rpx;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- background: linear-gradient(155deg, #3B4A8C 0%, #2A3470 45%, #1B2350 100%);
|
|
|
|
|
|
|
+ background: linear-gradient(155deg, $c-night-1 0%, $c-night-2 45%, $c-night-3 100%);
|
|
|
box-shadow: 0 16rpx 40rpx rgba(27, 35, 80, 0.35);
|
|
box-shadow: 0 16rpx 40rpx rgba(27, 35, 80, 0.35);
|
|
|
color: $app-surface;
|
|
color: $app-surface;
|
|
|
}
|
|
}
|
|
@@ -497,7 +514,7 @@ export default {
|
|
|
.star {
|
|
.star {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- background: #FFE9A8;
|
|
|
|
|
|
|
+ background: $c-moon-soft;
|
|
|
animation: star-twinkle 2.4s ease-in-out infinite;
|
|
animation: star-twinkle 2.4s ease-in-out infinite;
|
|
|
}
|
|
}
|
|
|
@keyframes star-twinkle {
|
|
@keyframes star-twinkle {
|
|
@@ -523,7 +540,7 @@ export default {
|
|
|
width: 10rpx;
|
|
width: 10rpx;
|
|
|
height: 10rpx;
|
|
height: 10rpx;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- background: #FFD166;
|
|
|
|
|
|
|
+ background: $c-moon;
|
|
|
box-shadow: 0 0 12rpx rgba(255, 209, 102, 0.9);
|
|
box-shadow: 0 0 12rpx rgba(255, 209, 102, 0.9);
|
|
|
}
|
|
}
|
|
|
.hero-chip-text { font-size: 22rpx; color: $app-surface; }
|
|
.hero-chip-text { font-size: 22rpx; color: $app-surface; }
|
|
@@ -580,7 +597,7 @@ export default {
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
color: $app-surface;
|
|
color: $app-surface;
|
|
|
}
|
|
}
|
|
|
-.tl-pill-on .tl-pill-time { color: #FFD166; }
|
|
|
|
|
|
|
+.tl-pill-on .tl-pill-time { color: $c-moon; }
|
|
|
.tl-scroll {
|
|
.tl-scroll {
|
|
|
margin-top: 20rpx;
|
|
margin-top: 20rpx;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -612,15 +629,15 @@ export default {
|
|
|
.tl-seg-on { background: rgba(255, 209, 102, 0.55); }
|
|
.tl-seg-on { background: rgba(255, 209, 102, 0.55); }
|
|
|
.tl-seg-on .tl-seg-time { color: rgba(255, 255, 255, 0.95); }
|
|
.tl-seg-on .tl-seg-time { color: rgba(255, 255, 255, 0.95); }
|
|
|
.tl-seg-sleep {
|
|
.tl-seg-sleep {
|
|
|
- background: linear-gradient(180deg, #FFD166, #FFB84D);
|
|
|
|
|
|
|
+ background: linear-gradient(180deg, $c-moon, $c-moon-deep);
|
|
|
box-shadow: 0 0 12rpx rgba(255, 209, 102, 0.8);
|
|
box-shadow: 0 0 12rpx rgba(255, 209, 102, 0.8);
|
|
|
}
|
|
}
|
|
|
.tl-seg-wake {
|
|
.tl-seg-wake {
|
|
|
- background: linear-gradient(180deg, #FF9F68, #FF7A45);
|
|
|
|
|
|
|
+ background: linear-gradient(180deg, $c-dusk-1, $c-dusk-2);
|
|
|
box-shadow: 0 0 12rpx rgba(255, 159, 104, 0.8);
|
|
box-shadow: 0 0 12rpx rgba(255, 159, 104, 0.8);
|
|
|
}
|
|
}
|
|
|
.tl-seg-sleep .tl-seg-time, .tl-seg-wake .tl-seg-time {
|
|
.tl-seg-sleep .tl-seg-time, .tl-seg-wake .tl-seg-time {
|
|
|
- color: #4A2A00;
|
|
|
|
|
|
|
+ color: $c-sepia-ink;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
}
|
|
}
|
|
|
.tl-hint {
|
|
.tl-hint {
|
|
@@ -655,7 +672,7 @@ export default {
|
|
|
width: 56rpx;
|
|
width: 56rpx;
|
|
|
height: 56rpx;
|
|
height: 56rpx;
|
|
|
border-radius: 18rpx;
|
|
border-radius: 18rpx;
|
|
|
- background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, $dim-wisdom-tint-2, $accent-indigo-tint);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -676,7 +693,7 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
gap: 24rpx;
|
|
gap: 24rpx;
|
|
|
- background: linear-gradient(160deg, #F8FAFF, #F1F5FF);
|
|
|
|
|
|
|
+ background: linear-gradient(160deg, $c-sky-ghost, $c-sky-soft);
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
|
padding: 26rpx 24rpx;
|
|
padding: 26rpx 24rpx;
|
|
|
margin-bottom: 26rpx;
|
|
margin-bottom: 26rpx;
|
|
@@ -710,9 +727,9 @@ export default {
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
}
|
|
}
|
|
|
.quality-badge-poor { background: $status-danger-soft; color: $status-danger-deep; }
|
|
.quality-badge-poor { background: $status-danger-soft; color: $status-danger-deep; }
|
|
|
-.quality-badge-fair { background: $status-warning-soft; color: #B45309; }
|
|
|
|
|
-.quality-badge-good { background: $status-success-soft; color: #047857; }
|
|
|
|
|
-.quality-badge-great { background: #E0E7FF; color: #4338CA; }
|
|
|
|
|
|
|
+.quality-badge-fair { background: $status-warning-soft; color: $status-warning-strong-2; }
|
|
|
|
|
+.quality-badge-good { background: $status-success-soft; color: $c-emerald-700; }
|
|
|
|
|
+.quality-badge-great { background: $accent-indigo-tint; color: $accent-indigo-ink; }
|
|
|
.quality-desc { display: block; font-size: 24rpx; color: $uni-text-color-secondary; margin-top: 12rpx; }
|
|
.quality-desc { display: block; font-size: 24rpx; color: $uni-text-color-secondary; margin-top: 12rpx; }
|
|
|
|
|
|
|
|
.q-chips { display: flex; flex-wrap: wrap; gap: 14rpx; }
|
|
.q-chips { display: flex; flex-wrap: wrap; gap: 14rpx; }
|
|
@@ -721,7 +738,7 @@ export default {
|
|
|
height: 78rpx;
|
|
height: 78rpx;
|
|
|
border-radius: 22rpx;
|
|
border-radius: 22rpx;
|
|
|
background: $facade-fill-slate-50;
|
|
background: $facade-fill-slate-50;
|
|
|
- border: 2rpx solid #EDF1F7;
|
|
|
|
|
|
|
+ border: 2rpx solid $c-sky-line;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -731,12 +748,12 @@ export default {
|
|
|
.q-chip:active { transform: scale(0.94); }
|
|
.q-chip:active { transform: scale(0.94); }
|
|
|
.q-chip-active { border-color: transparent; transform: translateY(-4rpx); }
|
|
.q-chip-active { border-color: transparent; transform: translateY(-4rpx); }
|
|
|
.q-chip-active text { color: $app-surface; }
|
|
.q-chip-active text { color: $app-surface; }
|
|
|
-.q-chip-poor text { color: #F87171; }
|
|
|
|
|
|
|
+.q-chip-poor text { color: $status-danger-light; }
|
|
|
.q-chip-fair text { color: $status-warning-deep; }
|
|
.q-chip-fair text { color: $status-warning-deep; }
|
|
|
-.q-chip-good text { color: #059669; }
|
|
|
|
|
-.q-chip-great text { color: #4F46E5; }
|
|
|
|
|
-.q-chip-poor.q-chip-active { background: linear-gradient(135deg, #FB7185, $status-danger); box-shadow: 0 8rpx 20rpx rgba(239, 68, 68, 0.3); }
|
|
|
|
|
-.q-chip-fair.q-chip-active { background: linear-gradient(135deg, #FBBF24, $dim-wealth); box-shadow: 0 8rpx 20rpx rgba(245, 158, 11, 0.3); }
|
|
|
|
|
|
|
+.q-chip-good text { color: $status-success-deep; }
|
|
|
|
|
+.q-chip-great text { color: $dim-wisdom-deep; }
|
|
|
|
|
+.q-chip-poor.q-chip-active { background: linear-gradient(135deg, $c-rose-400, $status-danger); box-shadow: 0 8rpx 20rpx rgba(239, 68, 68, 0.3); }
|
|
|
|
|
+.q-chip-fair.q-chip-active { background: linear-gradient(135deg, $status-warning, $dim-wealth); box-shadow: 0 8rpx 20rpx rgba(245, 158, 11, 0.3); }
|
|
|
.q-chip-good.q-chip-active { background: linear-gradient(135deg, $status-success-light-3, $status-success); box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.3); }
|
|
.q-chip-good.q-chip-active { background: linear-gradient(135deg, $status-success-light-3, $status-success); box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.3); }
|
|
|
.q-chip-great.q-chip-active { background: linear-gradient(135deg, $dim-wisdom-light, $dim-wisdom); box-shadow: 0 8rpx 20rpx rgba(99, 102, 241, 0.3); }
|
|
.q-chip-great.q-chip-active { background: linear-gradient(135deg, $dim-wisdom-light, $dim-wisdom); box-shadow: 0 8rpx 20rpx rgba(99, 102, 241, 0.3); }
|
|
|
|
|
|
|
@@ -755,20 +772,20 @@ export default {
|
|
|
padding: 14rpx 26rpx;
|
|
padding: 14rpx 26rpx;
|
|
|
border-radius: 999rpx;
|
|
border-radius: 999rpx;
|
|
|
background: $facade-fill-slate-50;
|
|
background: $facade-fill-slate-50;
|
|
|
- border: 2rpx solid #EDF1F7;
|
|
|
|
|
|
|
+ border: 2rpx solid $c-sky-line;
|
|
|
transition: transform 0.18s ease;
|
|
transition: transform 0.18s ease;
|
|
|
}
|
|
}
|
|
|
.s-tag text { font-size: 26rpx; color: $facade-text-slate-deep; }
|
|
.s-tag text { font-size: 26rpx; color: $facade-text-slate-deep; }
|
|
|
.s-tag:active { transform: scale(0.96); }
|
|
.s-tag:active { transform: scale(0.96); }
|
|
|
-.s-tag-active { background: #EEF2FF; border-color: $dim-wisdom; }
|
|
|
|
|
-.s-tag-active text { color: #4F46E5; font-weight: 600; }
|
|
|
|
|
|
|
+.s-tag-active { background: $dim-wisdom-tint-2; border-color: $dim-wisdom; }
|
|
|
|
|
+.s-tag-active text { color: $dim-wisdom-deep; font-weight: 600; }
|
|
|
|
|
|
|
|
/* ===== 备注 ===== */
|
|
/* ===== 备注 ===== */
|
|
|
.remark-input {
|
|
.remark-input {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
min-height: 150rpx;
|
|
min-height: 150rpx;
|
|
|
background: $facade-fill-slate-50;
|
|
background: $facade-fill-slate-50;
|
|
|
- border: 2rpx solid #EDF1F7;
|
|
|
|
|
|
|
+ border: 2rpx solid $c-sky-line;
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
padding: 20rpx;
|
|
padding: 20rpx;
|
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|
|
@@ -780,7 +797,7 @@ export default {
|
|
|
/* ===== 提交按钮 ===== */
|
|
/* ===== 提交按钮 ===== */
|
|
|
.submit-wrap { padding: 32rpx 24rpx 8rpx; }
|
|
.submit-wrap { padding: 32rpx 24rpx 8rpx; }
|
|
|
.submit-btn {
|
|
.submit-btn {
|
|
|
- background: linear-gradient(135deg, $dim-wisdom, #4F46E5 60%, #4338CA);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, $dim-wisdom, $dim-wisdom-deep 60%, $accent-indigo-ink);
|
|
|
border-radius: 999rpx;
|
|
border-radius: 999rpx;
|
|
|
padding: 26rpx 0;
|
|
padding: 26rpx 0;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -808,7 +825,7 @@ export default {
|
|
|
width: 76rpx;
|
|
width: 76rpx;
|
|
|
height: 76rpx;
|
|
height: 76rpx;
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
|
- background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, $dim-wisdom-tint-2, $accent-indigo-tint);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|