style(diet): 饮食偏好调研 暖灶暖橙主题样式

cfc-frontend/pages/diet/preferences.vue

@@ -385,187 +385,83 @@ export default {
 <style scoped>
 .preferences-page {
   min-height: 100vh;
-  background-color: #FFF7ED;
+  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
   display: flex;
   flex-direction: column;
 }
 
-/* 进度条 */
-.progress-bar {
-  padding: 24rpx 30rpx 0;
-  background-color: #FFF7ED;
-}
+/* ===== 进度条 ===== */
+.progress-bar { padding: 30rpx 32rpx 10rpx; }
 .progress-track {
-  height: 12rpx;
-  background-color: #E8E8E8;
-  border-radius: 6rpx;
-  overflow: hidden;
+  height: 12rpx; background: #FFE3C7; border-radius: 6rpx; overflow: hidden;
 }
 .progress-fill {
-  height: 100%;
-  background-color: #F97316;
-  border-radius: 6rpx;
-  transition: width 0.3s ease;
-}
-.progress-labels {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 16rpx;
-  padding-bottom: 20rpx;
-}
-.progress-label {
-  font-size: 22rpx;
-  color: #BBB;
-  flex: 1;
-  text-align: center;
-}
-.progress-label-active {
-  color: #F97316;
-  font-weight: 600;
-}
-
-/* 内容区 */
-.content {
-  flex: 1;
-  padding: 20rpx 30rpx 120rpx;
+  height: 100%; background: linear-gradient(90deg, #FF8C42, #FFB366);
+  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; }
+.progress-label-active { color: #FF8C42; font-weight: 600; }
 
-/* 步骤标题 */
-.step-head {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 24rpx;
-}
-.step-icon {
-  font-size: 48rpx;
-  margin-right: 16rpx;
-  flex-shrink: 0;
-}
-.step-head-text {
-  flex: 1;
-}
-.step-title {
-  font-size: 34rpx;
-  font-weight: 700;
-  color: #1A1A1A;
-  display: block;
-  margin-bottom: 8rpx;
-}
-.step-sub {
-  font-size: 24rpx;
-  color: #999;
-  display: block;
-}
+/* ===== 内容 ===== */
+.content { flex: 1; padding: 10rpx 32rpx 30rpx; box-sizing: border-box; }
+.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; }
 
-/* 卡片 */
+/* ===== 卡片 ===== */
 .card {
-  background-color: #FFFFFF;
-  border-radius: 20rpx;
-  padding: 28rpx 24rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-}
-.card-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 20rpx;
-  display: block;
+  background: #FFFFFF; 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; }
 
-/* chips */
-.chip-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16rpx;
-  margin-bottom: 16rpx;
-}
+/* ===== chip ===== */
+.chip-group { display: flex; flex-wrap: wrap; }
 .chip {
-  padding: 12rpx 24rpx;
-  border: 1rpx solid #E0E0E0;
-  border-radius: 30rpx;
-  font-size: 24rpx;
-  color: #666;
-  background-color: #FAFAFA;
+  padding: 14rpx 28rpx; border-radius: 999rpx; background: #F5F0EA;
+  font-size: 26rpx; color: #6B5340; margin: 0 16rpx 16rpx 0;
+  border: 2rpx solid transparent;
 }
 .chip-active {
-  border-color: #F97316;
-  color: #F97316;
-  background-color: #FFF5EB;
-}
-
-/* 辣度滑块 */
-.slider-row {
-  display: flex;
-  align-items: center;
-  gap: 16rpx;
-}
-.slider-label {
-  font-size: 24rpx;
-  color: #999;
-  flex-shrink: 0;
-  width: 48rpx;
-  text-align: center;
-}
-.slider {
-  flex: 1;
+  background: #FF8C42; color: #FFFFFF; font-weight: 600;
+  border-color: #E8732A;
 }
 
-/* 自定义输入 */
-.custom-row {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-  margin-bottom: 12rpx;
+/* ===== 自定义添加 ===== */
+.custom-add {
+  padding: 14rpx 0; font-size: 26rpx; color: #FF8C42; font-weight: 500;
 }
+.custom-row { display: flex; align-items: center; margin-top: 8rpx; }
 .custom-input {
-  flex: 1;
-  height: 64rpx;
-  padding: 0 24rpx;
-  border: 1rpx solid #E0E0E0;
-  border-radius: 30rpx;
-  font-size: 26rpx;
-  background-color: #FAFAFA;
+  flex: 1; border: 2rpx solid #FFD9B8; border-radius: 999rpx;
+  padding: 14rpx 24rpx; font-size: 26rpx; background: #FFF9F2;
 }
 .custom-confirm {
-  padding: 12rpx 28rpx;
-  background-color: #F97316;
-  border-radius: 30rpx;
-  font-size: 26rpx;
-  color: #fff;
-}
-.custom-add {
-  font-size: 24rpx;
-  color: #F97316;
-  padding: 8rpx 0;
+  background: #FF8C42; color: #fff; font-size: 26rpx; font-weight: 600;
+  padding: 14rpx 32rpx; border-radius: 999rpx; margin-left: 16rpx;
 }
 
-/* 底栏 */
+/* ===== 滑块 ===== */
+.slider-row { display: flex; align-items: center; }
+.slider-label { font-size: 24rpx; color: #A08B72; width: 72rpx; }
+.slider { flex: 1; }
+
+/* ===== 底栏 ===== */
 .footer-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
-  background-color: #FFFFFF;
-  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
-  gap: 20rpx;
+  display: flex; padding: 20rpx 32rpx 30rpx; background: #FFFDF8;
+  border-top: 2rpx solid #FFE9D4;
 }
 .footer-btn {
-  flex: 1;
-  text-align: center;
-  padding: 24rpx 0;
-  border-radius: 16rpx;
-  font-size: 30rpx;
-  font-weight: 600;
+  flex: 1; text-align: center; padding: 24rpx 0; border-radius: 999rpx;
+  font-size: 30rpx; font-weight: 600;
 }
 .footer-btn-ghost {
-  background-color: #F5F5F5;
-  color: #999;
+  background: #F5F0EA; color: #6B5340; margin-right: 20rpx;
 }
 .footer-btn-primary {
-  background-color: #F97316;
-  color: #FFFFFF;
+  background: linear-gradient(135deg, #FF8C42, #FFB366); color: #FFFFFF;
 }
 </style>