From a55614c04f4afb267380d3825b60d048822a00ec Mon Sep 17 00:00:00 2001 From: nepiedg Date: Mon, 30 Mar 2026 17:35:13 +0800 Subject: [PATCH] feat: redesign onboarding and homepage - Simplify onboarding to single-page form with default values - Redesign quit mode homepage with hero card, check-in section - Add health progress milestones visualization - Add health data card for record mode showing savings metrics Co-Authored-By: Claude Opus 4.6 --- src/pages/index/index.vue | 1103 ++++++++++++++++++++------------ src/pages/onboarding/index.vue | 422 +++++------- 2 files changed, 868 insertions(+), 657 deletions(-) diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index 62e7cec..f476bb4 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -1,133 +1,234 @@ @@ -160,26 +261,6 @@ const isQuitMode = computed(() => userStore.mode === 'quit') const homeSummary = computed(() => homeData.value?.summary || {}) const homeTimer = computed(() => homeData.value?.timer || {}) -const userName = computed(() => homeData.value?.greeting?.nickname || userStore.user?.nickname || '戒烟用户') -const userAvatar = computed(() => homeData.value?.greeting?.avatar_url || userStore.user?.avatar_url || 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png') - -const greetingTitle = computed(() => { - const hour = new Date().getHours() - let greeting = '晚上好' - if (hour < 6) greeting = '凌晨好' - else if (hour < 12) greeting = '早上好' - else if (hour < 14) greeting = '中午好' - else if (hour < 18) greeting = '下午好' - return `${greeting}，${userName.value}` -}) - -const greetingSubtitle = computed(() => { - if (isQuitMode.value) { - return todayChecked.value ? '今天已经记下来了，继续保持。' : '先把今天记成无烟的一天。' - } - return '记录越及时，后面的趋势越准。' -}) - const todayCount = computed(() => homeSummary.value.today_count ?? 0) const dailyTarget = computed(() => { const target = homeSummary.value.daily_target @@ -214,66 +295,127 @@ const nextSmokeTimeText = computed(() => { return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}` }) +// 戒烟模式计算 const baselineCigsPerDay = computed(() => profileStore.profile?.baseline_cigs_per_day || 10) const packPriceYuan = computed(() => (profileStore.profile?.pack_price_cent || 2500) / 100) + const quitDays = computed(() => { if (!quitState.value.lastCheckinDate) return 0 const gap = diffDays(quitState.value.lastCheckinDate, formatDate(new Date())) if (gap > 1) return 0 return Number(quitState.value.streakDays || 0) }) + const todayChecked = computed(() => quitState.value.lastCheckinDate === formatDate(new Date())) const todayCheckinTime = computed(() => formatClock(quitState.value.lastCheckinAt)) + const savedMoney = computed(() => { const total = (quitDays.value * baselineCigsPerDay.value / 20) * packPriceYuan.value return Math.round(total) }) + +const avoidedCigs = computed(() => { + return quitDays.value * baselineCigsPerDay.value +}) + +const lifeSaved = computed(() => { + // 每支烟减少约11分钟生命，换算成小时 + return Math.round(quitDays.value * baselineCigsPerDay.value * 11 / 60) +}) + const healthProgress = computed(() => { if (quitDays.value >= 365) return 100 - if (quitDays.value >= 180) return 86 - if (quitDays.value >= 90) return 72 - if (quitDays.value >= 30) return 58 - if (quitDays.value >= 14) return 38 - if (quitDays.value >= 7) return 18 - if (quitDays.value >= 1) return 6 + if (quitDays.value >= 180) return 85 + if (quitDays.value >= 90) return 70 + if (quitDays.value >= 30) return 55 + if (quitDays.value >= 14) return 35 + if (quitDays.value >= 7) return 20 + if (quitDays.value >= 3) return 10 + if (quitDays.value >= 1) return 5 return 0 }) + const healthTip = computed(() => { - if (quitDays.value >= 365) return '肺部功能已进入长期恢复阶段' - if (quitDays.value >= 180) return '血液循环和咳嗽症状通常会继续改善' - if (quitDays.value >= 30) return '味觉和嗅觉通常会逐步恢复' - if (quitDays.value >= 7) return '一周后，呼吸会比开始时更轻松一些' - if (quitDays.value >= 1) return '第一阶段最难，坚持住就有意义' - return '打卡从今天开始，先拿下第一天' -}) -const quitSubtitle = computed(() => { - if (!quitState.value.lastCheckinDate) return '还没有开始记录，先拿下第一天。' - const gap = diffDays(quitState.value.lastCheckinDate, formatDate(new Date())) - if (gap > 1) return '连续记录已中断，今天重新开始。' - if (todayChecked.value) return '今天已经打卡，明天继续。' - return '别漏掉今天这次打卡。' + if (quitDays.value >= 365) return '肺部功能显著改善，心血管疾病风险大幅降低' + if (quitDays.value >= 180) return '血液循环持续改善，肺功能逐步恢复' + if (quitDays.value >= 90) return '味觉嗅觉恢复，呼吸更加顺畅' + if (quitDays.value >= 30) return '咳嗽减少，体能开始恢复' + if (quitDays.value >= 14) return '尼古丁戒断症状明显减轻' + if (quitDays.value >= 7) return '一氧化碳水平恢复正常' + if (quitDays.value >= 3) return '呼吸开始变得顺畅' + if (quitDays.value >= 1) return '身体开始自我修复' + return '开始戒烟，身体即将启动修复' }) + const quitEncouragement = computed(() => { - if (todayChecked.value) return '今天的无烟记录已经落下，尽量把第一支拖得更晚一些。' - if (quitDays.value === 0) return '先不要想很久，只把今天守住就够了。' - return `连续 ${quitDays.value} 天很难得，今天再补上一天。` + if (todayChecked.value) { + if (quitDays.value >= 30) return '太棒了！坚持一个月以上，你已经战胜了最难的部分' + if (quitDays.value >= 7) return '一周没抽了！身体正在快速恢复中' + if (quitDays.value >= 3) return '三天没抽了，最难的时期正在过去' + return '今天打卡成功，继续保持！' + } + if (quitDays.value === 0) return '迈出第一步，从今天开始无烟生活' + if (quitDays.value < 3) return '坚持住，前三天是最关键的' + if (quitDays.value < 7) return '你已经走了很远，继续加油' + return `已坚持 ${quitDays.value} 天，你很了不起` }) + +const healthMilestones = computed(() => [ + { days: 1, label: '1天' }, + { days: 7, label: '1周' }, + { days: 30, label: '1月' }, + { days: 90, label: '3月' }, + { days: 365, label: '1年' } +]) + const todayCountPercent = computed(() => { if (!dailyTarget.value || dailyTarget.value <= 0) return todayCount.value > 0 ? 100 : 0 const percent = Math.round((todayCount.value / dailyTarget.value) * 100) return Math.min(Math.max(percent, 0), 100) }) + const todayCountRingStyle = computed(() => { const angle = Math.round(todayCountPercent.value * 3.6) return { background: `conic-gradient(#3fcba2 0deg ${angle}deg, #d8eee6 ${angle}deg 360deg)` } }) -const quitProgressRingStyle = computed(() => { - const angle = Math.round(healthProgress.value * 3.6) - return { - background: `conic-gradient(#14b882 0deg ${angle}deg, #e8edf2 ${angle}deg 360deg)` + +// 记录模式健康数据计算 +const recordSavedMoney = computed(() => { + // 基于今日比目标少抽的数量计算 + const saved = Math.max(0, (dailyTarget.value - todayCount.value) * (packPriceYuan.value / 20)) + return saved.toFixed(1) +}) + +const recordLifeSaved = computed(() => { + // 每少抽一支烟延长约11分钟生命 + const minutes = Math.max(0, (dailyTarget.value - todayCount.value) * 11) + return Math.round(minutes / 60 * 10) / 10 +}) + +const totalResistedCount = computed(() => { + // 从首页数据获取累计忍住次数 + return homeSummary.value.total_resisted ?? resistedCount.value +}) + +const reducePercent = computed(() => { + if (dailyTarget.value <= 0) return 0 + const reduced = Math.max(0, dailyTarget.value - todayCount.value) + return Math.round((reduced / dailyTarget.value) * 100) +}) + +const recordHealthTip = computed(() => { + if (todayCount.value === 0) { + return '今天还没抽烟，继续保持！' } + if (todayCount.value < dailyTarget.value) { + return `今天比目标少抽了${dailyTarget.value - todayCount.value}根，很棒！` + } + if (todayCount.value === dailyTarget.value) { + return '今天已达到目标，加油！' + } + return '今天超标了，明天继续努力' }) function defaultQuitState() { @@ -468,71 +610,72 @@ onShareAppMessage(() => ({ .page { min-height: 100vh; position: relative; - background: #F4F6F8; + background: #F8FAFB; overflow: hidden; box-sizing: border-box; } /* ===== 背景装饰 ===== */ -.bg-orb { +.bg-gradient { position: absolute; - border-radius: 50%; - pointer-events: none; - filter: blur(80rpx); -} - -.bg-orb-1 { - width: 600rpx; + top: 0; + left: 0; + right: 0; height: 600rpx; - top: -100rpx; - left: -150rpx; - background: radial-gradient(circle, rgba(20, 184, 130, 0.1) 0%, transparent 70%); + background: linear-gradient(180deg, #E6F7F1 0%, #F0FDF9 40%, #F8FAFB 100%); + pointer-events: none; } -.bg-orb-2 { - width: 500rpx; - height: 500rpx; - top: 300rpx; - right: -180rpx; - background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%); -} - -.bg-orb-3 { - width: 400rpx; - height: 400rpx; - bottom: 200rpx; - left: 50rpx; - background: radial-gradient(circle, rgba(20, 184, 130, 0.06) 0%, transparent 70%); -} - -.bg-grid { +.bg-pattern { position: absolute; - inset: 0; + top: 0; + left: 0; + right: 0; + height: 400rpx; background-image: - linear-gradient(rgba(0,0,0,0.02) 1rpx, transparent 1rpx), - linear-gradient(90deg, rgba(0,0,0,0.02) 1rpx, transparent 1rpx); - background-size: 80rpx 80rpx; + radial-gradient(circle at 20% 30%, rgba(26, 163, 122, 0.08) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(52, 200, 160, 0.06) 0%, transparent 40%); pointer-events: none; } /* ===== 骨架屏 ===== */ .skeleton-wrap { - padding: 32rpx 28rpx; + padding: 48rpx 32rpx; position: relative; z-index: 1; } -.sk-header, .sk-hero, .sk-card, .sk-action { - background: linear-gradient(90deg, #ebebeb 25%, #f5f5f5 50%, #ebebeb 75%); +.sk-circle { + width: 280rpx; + height: 280rpx; + border-radius: 50%; + background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%); background-size: 200% 100%; - animation: shimmer 1.6s infinite; - border-radius: 24rpx; + animation: shimmer 1.5s infinite; + margin: 0 auto 48rpx; } -.sk-hero { height: 320rpx; margin-bottom: 24rpx; border-radius: 36rpx; } -.sk-card { height: 120rpx; border-radius: 28rpx; margin-bottom: 24rpx; } -.sk-card-wide { height: 140rpx; } -.sk-action { height: 140rpx; border-radius: 28rpx; } +.sk-row { + height: 32rpx; + border-radius: 16rpx; + background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + margin-bottom: 24rpx; +} + +.sk-row-short { + width: 60%; +} + +.sk-card { + height: 160rpx; + border-radius: 24rpx; + background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + margin-top: 32rpx; +} @keyframes shimmer { 0% { background-position: -200% 0; } @@ -540,15 +683,312 @@ onShareAppMessage(() => ({ } /* ===== 主内容 ===== */ -.nav-placeholder, .dashboard, .skeleton-wrap { +.nav-placeholder, .content { position: relative; z-index: 1; } -.dashboard { - padding: 20rpx 20rpx 180rpx; +.content { + padding: 24rpx 24rpx 200rpx; } +/* ===== 戒烟模式 - 英雄卡片 ===== */ +.hero-card { + background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF9 100%); + border-radius: 32rpx; + padding: 48rpx 32rpx; + margin-bottom: 24rpx; + box-shadow: 0 8rpx 32rpx rgba(26, 163, 122, 0.08); + border: 1rpx solid rgba(26, 163, 122, 0.1); +} + +.days-display { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40rpx; +} + +.days-ring { + width: 200rpx; + height: 200rpx; + border-radius: 50%; + background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); + padding: 16rpx; + box-shadow: 0 8rpx 24rpx rgba(26, 163, 122, 0.15); +} + +.days-ring-inner { + width: 100%; + height: 100%; + border-radius: 50%; + background: #FFFFFF; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.04); +} + +.days-number { + font-size: 72rpx; + font-weight: 800; + color: #059669; + line-height: 1; + font-family: 'DIN Alternate', -apple-system, sans-serif; +} + +.days-label { + font-size: 28rpx; + color: #6B7280; + margin-top: 4rpx; +} + +.days-subtitle { + font-size: 28rpx; + color: #6B7280; + margin-top: 16rpx; +} + +/* ===== 数据指标行 ===== */ +.metrics-row { + display: flex; + align-items: center; + justify-content: space-around; + padding: 24rpx 0; + background: rgba(26, 163, 122, 0.04); + border-radius: 20rpx; +} + +.metric-item { + display: flex; + align-items: center; + gap: 12rpx; +} + +.metric-icon { + font-size: 32rpx; +} + +.metric-content { + display: flex; + flex-direction: column; +} + +.metric-value { + font-size: 32rpx; + font-weight: 700; + color: #111827; + font-family: 'DIN Alternate', -apple-system, sans-serif; +} + +.metric-label { + font-size: 22rpx; + color: #9CA3AF; +} + +.metric-divider { + width: 1rpx; + height: 48rpx; + background: rgba(26, 163, 122, 0.15); +} + +/* ===== 打卡区域 ===== */ +.checkin-section { + margin-bottom: 24rpx; +} + +.checkin-card { + display: flex; + align-items: center; + padding: 32rpx; + background: #FFFFFF; + border-radius: 24rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); + border: 2rpx solid rgba(26, 163, 122, 0.1); +} + +.checkin-done { + background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); + border-color: rgba(26, 163, 122, 0.2); +} + +.checkin-icon-wrap { + margin-right: 24rpx; +} + +.checkin-icon { + width: 80rpx; + height: 80rpx; + border-radius: 50%; + background: linear-gradient(135deg, #059669 0%, #047857 100%); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4rpx 12rpx rgba(5, 150, 105, 0.3); +} + +.checkin-icon text { + font-size: 36rpx; + color: #FFFFFF; + font-weight: 600; +} + +.checkin-icon-done { + background: linear-gradient(135deg, #10B981 0%, #059669 100%); +} + +.checkin-content { + flex: 1; +} + +.checkin-title { + display: block; + font-size: 32rpx; + font-weight: 600; + color: #111827; +} + +.checkin-desc { + display: block; + font-size: 24rpx; + color: #6B7280; + margin-top: 4rpx; +} + +.checkin-badge { + padding: 8rpx 20rpx; + background: #059669; + border-radius: 999rpx; +} + +.checkin-badge-text { + font-size: 24rpx; + font-weight: 600; + color: #FFFFFF; +} + +/* ===== 健康恢复进度 ===== */ +.health-section { + background: #FFFFFF; + border-radius: 24rpx; + padding: 32rpx; + margin-bottom: 24rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); +} + +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20rpx; +} + +.section-title { + font-size: 28rpx; + font-weight: 600; + color: #374151; +} + +.section-value { + font-size: 28rpx; + font-weight: 700; + color: #059669; +} + +.health-bar { + height: 12rpx; + background: #E5E7EB; + border-radius: 999rpx; + overflow: hidden; + margin-bottom: 24rpx; +} + +.health-bar-fill { + height: 100%; + background: linear-gradient(90deg, #10B981 0%, #059669 100%); + border-radius: 999rpx; + transition: width 0.5s ease; +} + +.health-milestones { + display: flex; + justify-content: space-between; +} + +.milestone-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 8rpx; +} + +.milestone-dot { + width: 16rpx; + height: 16rpx; + border-radius: 50%; + background: #E5E7EB; + border: 2rpx solid #D1D5DB; +} + +.milestone-done .milestone-dot { + background: #10B981; + border-color: #059669; +} + +.milestone-text { + font-size: 20rpx; + color: #9CA3AF; +} + +.milestone-done .milestone-text { + color: #059669; + font-weight: 500; +} + +/* ===== 今日激励 ===== */ +.motivation-section { + margin-bottom: 24rpx; +} + +.motivation-card { + background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%); + border-radius: 24rpx; + padding: 32rpx; + position: relative; + overflow: hidden; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); +} + +.motivation-quote { + position: absolute; + top: 16rpx; + left: 24rpx; + font-size: 64rpx; + color: rgba(245, 158, 11, 0.2); + font-family: Georgia, serif; + line-height: 1; +} + +.motivation-text { + display: block; + font-size: 30rpx; + font-weight: 600; + color: #92400E; + line-height: 1.6; + padding-left: 32rpx; +} + +.motivation-tip { + display: block; + font-size: 24rpx; + color: #B45309; + margin-top: 16rpx; + padding-left: 32rpx; + line-height: 1.5; +} + +/* ===== 记录模式 ===== */ .summary-card { background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(20px); @@ -556,7 +996,6 @@ onShareAppMessage(() => ({ border-radius: 40rpx; border: 2rpx solid rgba(255, 255, 255, 0.9); padding: 40rpx 36rpx; - margin-bottom: 32rpx; box-shadow: 0 24rpx 48rpx rgba(20, 184, 130, 0.05), inset 0 2rpx 8rpx rgba(255, 255, 255, 1); position: relative; overflow: hidden; @@ -621,57 +1060,6 @@ onShareAppMessage(() => ({ color: #123329; } -.summary-subtitle { - display: block; - margin-top: 10rpx; - font-size: 24rpx; - line-height: 1.5; - color: #7b8a84; -} - -.summary-subtitle-record { - margin-top: 8rpx; - color: #5b8d7a; -} - -.summary-mode-badge { - padding: 12rpx 20rpx; - border-radius: 999rpx; - flex-shrink: 0; -} - -.summary-mode-badge-quit { - background: rgba(20, 184, 130, 0.1); - border: 1px solid rgba(20, 184, 130, 0.15); -} - -.summary-mode-badge-record { - background: rgba(255, 255, 255, 0.7); - border: 1rpx solid rgba(77, 144, 119, 0.2); -} - -.summary-mode-text { - font-size: 22rpx; - font-weight: 700; - color: #14b882; -} - -.summary-card-record .summary-mode-text { - color: #2a7b61; -} - -.summary-main { - display: flex; - align-items: center; - justify-content: space-between; - gap: 20rpx; -} - -.summary-main-record { - align-items: stretch; - gap: 18rpx; -} - .record-overview { display: flex; align-items: center; @@ -803,14 +1191,6 @@ onShareAppMessage(() => ({ color: #52776a; } -.summary-metric-note { - display: block; - margin-top: 8rpx; - font-size: 22rpx; - color: #999999; - line-height: 1.5; -} - .record-group-note { display: block; margin-top: 12rpx; @@ -823,61 +1203,6 @@ onShareAppMessage(() => ({ border-radius: 16rpx; } -.primary-row { - display: flex; - gap: 20rpx; - margin-bottom: 28rpx; -} - -.primary-row-double { - display: grid; - grid-template-columns: 1fr 1fr; -} - -.primary-pill { - flex: 1; - min-height: 120rpx; - padding: 24rpx 32rpx; - border-radius: 36rpx; - display: flex; - flex-direction: column; - justify-content: center; - background: rgba(255, 255, 255, 0.9); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - border: 2rpx solid rgba(255, 255, 255, 1); - box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.03); - transition: all 0.2s ease; -} - -.primary-pill:active { - transform: scale(0.98); -} - -.primary-pill-checkin { - background: linear-gradient(135deg, #14b882 0%, #0ca674 100%); - border: none; - box-shadow: 0 16rpx 32rpx rgba(20, 184, 130, 0.25); -} - -.primary-pill-done { - background: rgba(255, 255, 255, 0.8); - border: 2rpx solid rgba(255, 255, 255, 0.9); - box-shadow: none; -} - -.primary-pill-smoke { - background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); - border: none; - box-shadow: 0 16rpx 32rpx rgba(79, 70, 229, 0.25); -} - -.primary-pill-resist { - background: linear-gradient(135deg, #14b882 0%, #0ca674 100%); - border: none; - box-shadow: 0 16rpx 32rpx rgba(20, 184, 130, 0.25); -} - .record-action-row { display: grid; grid-template-columns: 1fr 1fr; @@ -885,7 +1210,7 @@ onShareAppMessage(() => ({ margin-top: 32rpx; } -.record-action-row .primary-pill { +.primary-pill { min-height: 96rpx; padding: 0 20rpx; align-items: center; @@ -897,25 +1222,19 @@ onShareAppMessage(() => ({ backdrop-filter: blur(10px); border: 2rpx solid rgba(255, 255, 255, 1); box-shadow: 0 12rpx 28rpx rgba(83, 157, 128, 0.1); + display: flex; } -.record-action-row .primary-pill-smoke { +.primary-pill-smoke { background: linear-gradient(180deg, rgba(255, 242, 240, 0.9) 0%, rgba(255, 224, 218, 0.9) 100%); border-color: rgba(255, 255, 255, 0.8); } -.record-action-row .primary-pill-resist { +.primary-pill-resist { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 255, 248, 0.95) 100%); } .primary-pill-title { - display: block; - font-size: 32rpx; - font-weight: 800; - color: #ffffff; -} - -.record-action-row .primary-pill-title { font-size: 28rpx; font-weight: 700; line-height: 1; @@ -929,128 +1248,110 @@ onShareAppMessage(() => ({ color: #1f755e; } -.primary-pill-desc { - display: block; - margin-top: 8rpx; - font-size: 24rpx; - line-height: 1.5; - color: rgba(255, 255, 255, 0.85); - font-weight: 500; +/* ===== 记录模式 - 健康数据卡片 ===== */ +.health-data-card { + background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF9 100%); + border-radius: 24rpx; + padding: 32rpx; + margin-top: 24rpx; + box-shadow: 0 8rpx 24rpx rgba(26, 163, 122, 0.08); + border: 1rpx solid rgba(26, 163, 122, 0.1); } -.primary-pill-done .primary-pill-title { - color: #666666; +.health-data-header { + display: flex; + justify-content: space-between; + align-items: flex-end; + margin-bottom: 28rpx; } -.primary-pill-done .primary-pill-desc { - color: #aaaaaa; -} - -/* ===== 提示卡 ===== */ -.tip-card { - padding: 36rpx 32rpx; - border-radius: 36rpx; - background: rgba(255, 255, 255, 0.85); - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - border: 2rpx solid rgba(255, 255, 255, 0.9); - box-shadow: 0 12rpx 32rpx rgba(20, 184, 130, 0.04); - position: relative; - overflow: hidden; -} - -.tip-card::after { - content: '"'; - position: absolute; - top: -10rpx; - right: 30rpx; - font-size: 140rpx; - color: rgba(20, 184, 130, 0.06); - font-family: Georgia, serif; - line-height: 1; - pointer-events: none; -} - -.tip-title { - display: inline-block; - padding: 6rpx 16rpx; - border-radius: 12rpx; - background: rgba(20, 184, 130, 0.1); - font-size: 22rpx; +.health-data-title { + font-size: 30rpx; font-weight: 700; - color: #14b882; - letter-spacing: 1rpx; - margin-bottom: 20rpx; + color: #111827; } -.tip-text { - display: block; - font-size: 28rpx; - font-weight: 600; - color: #333333; - line-height: 1.6; -} - -.tip-extra { - display: block; - margin-top: 12rpx; +.health-data-subtitle { font-size: 24rpx; - line-height: 1.5; - color: #888888; + color: #9CA3AF; } -/* 补充缺失的戒烟模式统同样式 */ -.summary-metrics { +.health-metrics { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20rpx; +} + +.health-metric-item { display: flex; - flex-direction: column; - gap: 24rpx; - flex: 1; + align-items: center; + gap: 16rpx; + padding: 20rpx; + background: rgba(26, 163, 122, 0.04); + border-radius: 16rpx; } -.summary-metric { - display: flex; - flex-direction: column; - gap: 8rpx; -} - -.summary-ring { - width: 180rpx; - height: 180rpx; - padding: 12rpx; - border-radius: 50%; +.health-metric-icon { + width: 56rpx; + height: 56rpx; + border-radius: 14rpx; display: flex; align-items: center; justify-content: center; - flex-shrink: 0; - box-shadow: inset 0 2rpx 8rpx rgba(0,0,0,0.02), 0 4rpx 12rpx rgba(255,255,255,0.8); - background: rgba(20, 184, 130, 0.05); + font-size: 28rpx; } -.summary-ring-inner { - width: 100%; - height: 100%; - border-radius: 50%; - background: #ffffff; - box-shadow: 0 4rpx 16rpx rgba(20, 184, 130, 0.08); +.health-metric-icon-money { + background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); +} + +.health-metric-icon-time { + background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); +} + +.health-metric-icon-resist { + background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); +} + +.health-metric-icon-reduce { + background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%); +} + +.health-metric-content { display: flex; flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; } -.summary-ring-value { - font-size: 32rpx; - line-height: 1.2; - font-weight: 800; - color: #14b882; +.health-metric-value { + font-size: 28rpx; + font-weight: 700; + color: #111827; font-family: 'DIN Alternate', -apple-system, sans-serif; } -.summary-ring-label { - margin-top: 6rpx; - font-size: 20rpx; - font-weight: 500; - color: #7b8a84; +.health-metric-label { + font-size: 22rpx; + color: #6B7280; + margin-top: 2rpx; +} + +.health-tip-bar { + display: flex; + align-items: center; + gap: 12rpx; + margin-top: 24rpx; + padding: 16rpx 20rpx; + background: rgba(26, 163, 122, 0.06); + border-radius: 12rpx; +} + +.health-tip-icon { + font-size: 24rpx; +} + +.health-tip-text { + font-size: 24rpx; + color: #059669; + line-height: 1.5; } diff --git a/src/pages/onboarding/index.vue b/src/pages/onboarding/index.vue index 5112883..2e19426 100644 --- a/src/pages/onboarding/index.vue +++ b/src/pages/onboarding/index.vue @@ -1,23 +1,20 @@