|
|
@@ -376,9 +376,22 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+// ===== 饮食偏好页专属色阶(暖棕/奶油问卷主题;单页专用,约定见 uni.scss §14)=====
|
|
|
+$c-dp-track: #FFE3C7; // 进度条底轨
|
|
|
+$c-dp-label: #C2A78A; // 进度标签文字
|
|
|
+$c-dp-ink: #4A2E1A; // 主文字深棕
|
|
|
+$c-dp-muted: #A08B72; // 辅助文字浅棕
|
|
|
+$c-dp-chip: #F5F0EA; // 选项胶囊底
|
|
|
+$c-dp-chip-ink: #6B5340; // 选项胶囊文字
|
|
|
+$c-dp-accent: #E8732A; // 选中态强调橙
|
|
|
+$c-dp-line: #FFD9B8; // 输入框描边
|
|
|
+$c-dp-input: #FFF9F2; // 输入框底
|
|
|
+$c-dp-footer: #FFFDF8; // 底部操作条底
|
|
|
+$c-dp-footer-line: #FFE9D4; // 底部操作条描边
|
|
|
+
|
|
|
.preferences-page {
|
|
|
min-height: 100vh;
|
|
|
- background: linear-gradient(180deg, $uni-primary-pale 0%, #FFF3E6 100%);
|
|
|
+ background: linear-gradient(180deg, $uni-primary-pale 0%, $warm-cream 100%);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
@@ -386,14 +399,14 @@ export default {
|
|
|
/* ===== 进度条 ===== */
|
|
|
.progress-bar { padding: 30rpx 32rpx 10rpx; }
|
|
|
.progress-track {
|
|
|
- height: 12rpx; background: #FFE3C7; border-radius: 6rpx; overflow: hidden;
|
|
|
+ height: 12rpx; background: $c-dp-track; border-radius: 6rpx; overflow: hidden;
|
|
|
}
|
|
|
.progress-fill {
|
|
|
height: 100%; background: linear-gradient(90deg, $dim-body, $dim-body-light);
|
|
|
border-radius: 6rpx; transition: width 0.3s ease;
|
|
|
}
|
|
|
.progress-labels { display: flex; justify-content: space-between; margin-top: 12rpx; }
|
|
|
-.progress-label { font-size: 22rpx; color: #C2A78A; flex: 1; text-align: center; }
|
|
|
+.progress-label { font-size: 22rpx; color: $c-dp-label; flex: 1; text-align: center; }
|
|
|
.progress-label-active { color: $dim-body; font-weight: 600; }
|
|
|
|
|
|
/* ===== 内容 ===== */
|
|
|
@@ -401,26 +414,26 @@ export default {
|
|
|
.step-head { display: flex; align-items: center; margin: 20rpx 0 24rpx; }
|
|
|
.step-icon { font-size: 52rpx; margin-right: 20rpx; }
|
|
|
.step-head-text { display: flex; flex-direction: column; }
|
|
|
-.step-title { font-size: 34rpx; font-weight: 700; color: #4A2E1A; }
|
|
|
-.step-sub { font-size: 24rpx; color: #A08B72; margin-top: 6rpx; }
|
|
|
+.step-title { font-size: 34rpx; font-weight: 700; color: $c-dp-ink; }
|
|
|
+.step-sub { font-size: 24rpx; color: $c-dp-muted; margin-top: 6rpx; }
|
|
|
|
|
|
/* ===== 卡片 ===== */
|
|
|
.card {
|
|
|
background: $app-surface; border-radius: 24rpx; padding: 28rpx;
|
|
|
margin-bottom: 24rpx; box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.08);
|
|
|
}
|
|
|
-.card-title { font-size: 28rpx; font-weight: 600; color: #4A2E1A; margin-bottom: 20rpx; display: block; }
|
|
|
+.card-title { font-size: 28rpx; font-weight: 600; color: $c-dp-ink; margin-bottom: 20rpx; display: block; }
|
|
|
|
|
|
/* ===== chip ===== */
|
|
|
.chip-group { display: flex; flex-wrap: wrap; }
|
|
|
.chip {
|
|
|
- padding: 14rpx 28rpx; border-radius: 999rpx; background: #F5F0EA;
|
|
|
- font-size: 26rpx; color: #6B5340; margin: 0 16rpx 16rpx 0;
|
|
|
+ padding: 14rpx 28rpx; border-radius: 999rpx; background: $c-dp-chip;
|
|
|
+ font-size: 26rpx; color: $c-dp-chip-ink; margin: 0 16rpx 16rpx 0;
|
|
|
border: 2rpx solid transparent;
|
|
|
}
|
|
|
.chip-active {
|
|
|
background: $dim-body; color: $app-surface; font-weight: 600;
|
|
|
- border-color: #E8732A;
|
|
|
+ border-color: $c-dp-accent;
|
|
|
}
|
|
|
|
|
|
/* ===== 自定义添加 ===== */
|
|
|
@@ -429,8 +442,8 @@ export default {
|
|
|
}
|
|
|
.custom-row { display: flex; align-items: center; margin-top: 8rpx; margin-bottom: 12rpx; }
|
|
|
.custom-input {
|
|
|
- flex: 1; border: 2rpx solid #FFD9B8; border-radius: 999rpx;
|
|
|
- padding: 14rpx 24rpx; font-size: 26rpx; background: #FFF9F2;
|
|
|
+ flex: 1; border: 2rpx solid $c-dp-line; border-radius: 999rpx;
|
|
|
+ padding: 14rpx 24rpx; font-size: 26rpx; background: $c-dp-input;
|
|
|
}
|
|
|
.custom-confirm {
|
|
|
background: $dim-body; color: $app-surface; font-size: 26rpx; font-weight: 600;
|
|
|
@@ -439,21 +452,21 @@ export default {
|
|
|
|
|
|
/* ===== 滑块 ===== */
|
|
|
.slider-row { display: flex; align-items: center; }
|
|
|
-.slider-label { font-size: 24rpx; color: #A08B72; width: 72rpx; }
|
|
|
+.slider-label { font-size: 24rpx; color: $c-dp-muted; width: 72rpx; }
|
|
|
.slider { flex: 1; }
|
|
|
.spice-level-label { font-size: 24rpx; color: $dim-body; text-align: center; margin-top: 8rpx; display: block; }
|
|
|
|
|
|
/* ===== 底栏 ===== */
|
|
|
.footer-bar {
|
|
|
- display: flex; padding: 20rpx 32rpx 30rpx; background: #FFFDF8;
|
|
|
- border-top: 2rpx solid #FFE9D4;
|
|
|
+ display: flex; padding: 20rpx 32rpx 30rpx; background: $c-dp-footer;
|
|
|
+ border-top: 2rpx solid $c-dp-footer-line;
|
|
|
}
|
|
|
.footer-btn {
|
|
|
flex: 1; text-align: center; padding: 24rpx 0; border-radius: 999rpx;
|
|
|
font-size: 30rpx; font-weight: 600;
|
|
|
}
|
|
|
.footer-btn-ghost {
|
|
|
- background: #F5F0EA; color: #6B5340; margin-right: 20rpx;
|
|
|
+ background: $c-dp-chip; color: $c-dp-chip-ink; margin-right: 20rpx;
|
|
|
}
|
|
|
.footer-btn-primary {
|
|
|
background: linear-gradient(135deg, $dim-body, $dim-body-light); color: $app-surface;
|