nepiedg
759 lines
17 KiB
Vue
759 lines
17 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="nav-area" :style="{ paddingTop: navBarHeight + 'px' }">
|
||
<text class="nav-title">完善你的信息</text>
|
||
<text class="nav-subtitle">帮助我们更好地为你服务</text>
|
||
</view>
|
||
|
||
<scroll-view class="content" scroll-y>
|
||
<!-- 使用模式 -->
|
||
<view class="form-section">
|
||
<text class="section-label">使用模式</text>
|
||
<view class="mode-switch">
|
||
<view
|
||
v-for="item in modeOptions"
|
||
:key="item.value"
|
||
class="mode-switch-item"
|
||
:class="{ 'mode-switch-item-active': formData.mode === item.value }"
|
||
@tap="selectMode(item.value)"
|
||
>
|
||
<text class="mode-switch-title">{{ item.label }}</text>
|
||
<text class="mode-switch-desc">{{ item.desc }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 戒烟日期（戒烟模式可见） -->
|
||
<view v-if="formData.mode === 'quit'" class="form-section">
|
||
<text class="section-label">戒烟开始日期</text>
|
||
<picker mode="date" :value="formData.quit_date" @change="onQuitDateChange">
|
||
<view class="time-picker">{{ formData.quit_date || '请选择日期' }}</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 每天抽烟数量 -->
|
||
<view class="form-section">
|
||
<view class="section-row">
|
||
<text class="section-label">每天抽烟</text>
|
||
<view class="inline-input">
|
||
<view class="inline-btn" @tap="decreaseCigs">-</view>
|
||
<text class="inline-value">{{ formData.baseline_cigs_per_day }}</text>
|
||
<view class="inline-btn" @tap="increaseCigs">+</view>
|
||
<text class="inline-unit">支/天</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 烟龄 -->
|
||
<view class="form-section">
|
||
<text class="section-label">烟龄</text>
|
||
<view class="options-row">
|
||
<view
|
||
v-for="option in smokingYearsOptions"
|
||
:key="option.value"
|
||
class="option-tag"
|
||
:class="{ 'option-tag-active': formData.smoking_years === option.value }"
|
||
@tap="formData.smoking_years = option.value"
|
||
>
|
||
{{ option.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 戒烟动机 -->
|
||
<view class="form-section">
|
||
<text class="section-label">{{ formData.mode === 'quit' ? '戒烟原因' : '记录原因' }}（可多选）</text>
|
||
<view class="options-row">
|
||
<view
|
||
v-for="option in quitMotivationOptions"
|
||
:key="option"
|
||
class="option-tag"
|
||
:class="{ 'option-tag-active': formData.quit_motivations.includes(option) }"
|
||
@tap="toggleMotivation(option)"
|
||
>
|
||
{{ option }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 作息时间 -->
|
||
<view class="form-section">
|
||
<text class="section-label">作息时间</text>
|
||
<view class="time-row">
|
||
<view class="time-item">
|
||
<text class="time-label">起床</text>
|
||
<picker mode="time" :value="formData.wake_up_time" @change="onWakeTimeChange">
|
||
<view class="time-picker">{{ formData.wake_up_time }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="time-item">
|
||
<text class="time-label">睡觉</text>
|
||
<picker mode="time" :value="formData.sleep_time" @change="onSleepTimeChange">
|
||
<view class="time-picker">{{ formData.sleep_time }}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 烟价 -->
|
||
<view class="form-section">
|
||
<view class="section-row">
|
||
<text class="section-label">每包烟价格</text>
|
||
<view class="inline-input">
|
||
<text class="inline-unit">¥</text>
|
||
<input
|
||
type="digit"
|
||
v-model="priceYuan"
|
||
class="inline-field"
|
||
placeholder="25"
|
||
placeholder-style="color: #CCCCCC"
|
||
/>
|
||
<text class="inline-unit">元/包</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 成就风格 -->
|
||
<view v-if="achievementThemes.length > 0" class="form-section">
|
||
<view class="theme-section-head">
|
||
<view>
|
||
<text class="section-label">成就称号风格</text>
|
||
<text class="section-hint">选择一套更能激励你的成长称号</text>
|
||
</view>
|
||
<text class="theme-section-badge">可更换</text>
|
||
</view>
|
||
<view class="theme-list">
|
||
<view
|
||
v-for="theme in achievementThemes"
|
||
:key="theme.id"
|
||
class="theme-card"
|
||
:class="{ 'theme-card-active': formData.achievement_theme_id === theme.id }"
|
||
@tap="formData.achievement_theme_id = theme.id"
|
||
>
|
||
<view class="theme-glow"></view>
|
||
<view class="theme-header">
|
||
<view class="theme-icon-wrap">
|
||
<text class="theme-icon">{{ theme.icon }}</text>
|
||
</view>
|
||
<view class="theme-title-wrap">
|
||
<text class="theme-name">{{ theme.name }}</text>
|
||
<text class="theme-desc">打卡进度会逐步解锁称号</text>
|
||
</view>
|
||
<view class="theme-check">
|
||
<text v-if="formData.achievement_theme_id === theme.id">✓</text>
|
||
</view>
|
||
</view>
|
||
<view class="theme-levels">
|
||
<text
|
||
v-for="(level, idx) in theme.levels"
|
||
:key="level.id"
|
||
class="theme-level"
|
||
>{{ level.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-space"></view>
|
||
</scroll-view>
|
||
|
||
<view class="footer">
|
||
<view class="btn-primary" @tap="handleSubmit">
|
||
<text class="btn-text">{{ submitButtonText }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { onShareAppMessage } from '@dcloudio/uni-app'
|
||
import { useProfileStore } from '@/stores/profile'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { useLogin } from '@/hooks/useLogin'
|
||
import * as api from '@/api'
|
||
|
||
const profileStore = useProfileStore()
|
||
const userStore = useUserStore()
|
||
const { waitForLogin } = useLogin()
|
||
|
||
const navBarHeight = ref(0)
|
||
const modeSaving = ref(false)
|
||
const achievementThemes = ref([])
|
||
|
||
const modeOptions = [
|
||
{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟' },
|
||
{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势' }
|
||
]
|
||
|
||
function todayStr() {
|
||
const d = new Date()
|
||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||
}
|
||
|
||
const formData = ref({
|
||
mode: 'record',
|
||
baseline_cigs_per_day: 10,
|
||
smoking_years: 5,
|
||
quit_motivations: ['身体健康'],
|
||
smoke_motivations: [],
|
||
wake_up_time: '07:30',
|
||
sleep_time: '23:00',
|
||
pack_price_cent: 2500,
|
||
quit_date: todayStr(),
|
||
achievement_theme_id: null
|
||
})
|
||
|
||
const priceYuan = ref('25')
|
||
|
||
const submitButtonText = computed(() => formData.value.mode === 'quit' ? '开始戒烟之旅' : '开始记录之旅')
|
||
|
||
const smokingYearsOptions = [
|
||
{ label: '<1年', value: 1 },
|
||
{ label: '1-3年', value: 2 },
|
||
{ label: '3-5年', value: 4 },
|
||
{ label: '5-10年', value: 7 },
|
||
{ label: '>10年', value: 15 }
|
||
]
|
||
|
||
const quitMotivationOptions = [
|
||
'身体健康',
|
||
'家人孩子',
|
||
'省钱',
|
||
'形象气质',
|
||
'工作需要',
|
||
'伴侣要求'
|
||
]
|
||
|
||
function increaseCigs() {
|
||
formData.value.baseline_cigs_per_day++
|
||
}
|
||
|
||
function decreaseCigs() {
|
||
if (formData.value.baseline_cigs_per_day > 1) {
|
||
formData.value.baseline_cigs_per_day--
|
||
}
|
||
}
|
||
|
||
function toggleMotivation(option) {
|
||
const index = formData.value.quit_motivations.indexOf(option)
|
||
if (index > -1) {
|
||
formData.value.quit_motivations.splice(index, 1)
|
||
} else {
|
||
formData.value.quit_motivations.push(option)
|
||
}
|
||
}
|
||
|
||
async function selectMode(mode) {
|
||
formData.value.mode = mode
|
||
userStore.setMode(mode)
|
||
if (!profileStore.exists || modeSaving.value) return
|
||
modeSaving.value = true
|
||
try {
|
||
await profileStore.saveProfile({ mode })
|
||
} catch (e) {
|
||
console.error('saveModeInOnboarding error:', e)
|
||
} finally {
|
||
modeSaving.value = false
|
||
}
|
||
}
|
||
|
||
function onQuitDateChange(e) {
|
||
formData.value.quit_date = e.detail.value
|
||
}
|
||
|
||
function onWakeTimeChange(e) {
|
||
formData.value.wake_up_time = e.detail.value
|
||
}
|
||
|
||
function onSleepTimeChange(e) {
|
||
formData.value.sleep_time = e.detail.value
|
||
}
|
||
|
||
async function handleSubmit() {
|
||
formData.value.pack_price_cent = Math.round(parseFloat(priceYuan.value || '0') * 100)
|
||
|
||
try {
|
||
uni.showLoading({ title: '保存中...' })
|
||
await profileStore.saveProfile(formData.value)
|
||
uni.hideLoading()
|
||
uni.switchTab({ url: '/pages/index/index' })
|
||
} catch (e) {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
const sys = uni.getSystemInfoSync()
|
||
const statusBarH = sys.statusBarHeight || 0
|
||
try {
|
||
const menuBtn = uni.getMenuButtonBoundingClientRect()
|
||
navBarHeight.value = menuBtn.bottom + (menuBtn.top - statusBarH)
|
||
} catch (e) {
|
||
navBarHeight.value = statusBarH + 44
|
||
}
|
||
|
||
await waitForLogin()
|
||
|
||
try {
|
||
const res = await api.getAchievementThemes()
|
||
achievementThemes.value = res.data?.themes || []
|
||
if (achievementThemes.value.length > 0 && !formData.value.achievement_theme_id) {
|
||
formData.value.achievement_theme_id = achievementThemes.value[0].id
|
||
}
|
||
} catch (e) {
|
||
console.error('loadAchievementThemes error:', e)
|
||
}
|
||
|
||
try {
|
||
const profileData = await profileStore.fetchProfile()
|
||
if (profileData?.profile) {
|
||
const profile = profileData.profile
|
||
formData.value = {
|
||
...formData.value,
|
||
mode: profile.mode || userStore.mode || formData.value.mode,
|
||
baseline_cigs_per_day: profile.baseline_cigs_per_day || formData.value.baseline_cigs_per_day,
|
||
smoking_years: profile.smoking_years || formData.value.smoking_years,
|
||
quit_motivations: Array.isArray(profile.quit_motivations) && profile.quit_motivations.length > 0
|
||
? profile.quit_motivations
|
||
: formData.value.quit_motivations,
|
||
smoke_motivations: Array.isArray(profile.smoke_motivations) ? profile.smoke_motivations : formData.value.smoke_motivations,
|
||
wake_up_time: profile.wake_up_time || formData.value.wake_up_time,
|
||
sleep_time: profile.sleep_time || formData.value.sleep_time,
|
||
pack_price_cent: profile.pack_price_cent || formData.value.pack_price_cent,
|
||
quit_date: profile.quit_date ? profile.quit_date.split('T')[0] : formData.value.quit_date,
|
||
achievement_theme_id: profile.achievement_theme_id || formData.value.achievement_theme_id
|
||
}
|
||
if (profile.pack_price_cent) {
|
||
priceYuan.value = String((profile.pack_price_cent / 100).toFixed(2)).replace(/\.00$/, '')
|
||
}
|
||
} else if (userStore.mode) {
|
||
formData.value.mode = userStore.mode
|
||
}
|
||
} catch (e) {
|
||
console.error('loadProfileForOnboarding error:', e)
|
||
}
|
||
})
|
||
|
||
onShareAppMessage(() => {
|
||
return {
|
||
title: '戒烟助手 - 帮你定制戒烟计划',
|
||
path: 'pages/index/index'
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background-color: #F5F7F6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-area {
|
||
padding: 20rpx 32rpx 16rpx;
|
||
background: linear-gradient(180deg, #DDF3EB 0%, #F5F7F6 100%);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.nav-title {
|
||
display: block;
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.nav-subtitle {
|
||
display: block;
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
.form-section {
|
||
margin-bottom: 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
padding: 28rpx 24rpx;
|
||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.section-label {
|
||
display: block;
|
||
margin-bottom: 18rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #666666;
|
||
}
|
||
|
||
.section-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.section-row .section-label {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.mode-switch {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.mode-switch-item {
|
||
flex: 1;
|
||
padding: 24rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
background: #F9FBFA;
|
||
border: 2rpx solid #F0F0F0;
|
||
transition: all 0.2s;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.mode-switch-item-active {
|
||
background: #E8F5F0;
|
||
border-color: #10B981;
|
||
}
|
||
|
||
.mode-switch-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.mode-switch-item-active .mode-switch-title {
|
||
color: #10B981;
|
||
}
|
||
|
||
.mode-switch-desc {
|
||
display: block;
|
||
margin-top: 6rpx;
|
||
font-size: 22rpx;
|
||
line-height: 1.5;
|
||
color: #999999;
|
||
}
|
||
|
||
.mode-switch-item-active .mode-switch-desc {
|
||
color: #10B981;
|
||
}
|
||
|
||
.inline-input {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.inline-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
background: #E8F5F0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 38rpx;
|
||
color: #10B981;
|
||
}
|
||
|
||
.inline-value {
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
color: #1A1A1A;
|
||
min-width: 52rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.inline-unit {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.inline-field {
|
||
width: 100rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1A1A1A;
|
||
text-align: center;
|
||
background: #F5F7F6;
|
||
padding: 10rpx 14rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.options-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.option-tag {
|
||
padding: 14rpx 26rpx;
|
||
border-radius: 999rpx;
|
||
background: #F5F5F5;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.option-tag-active {
|
||
background: #E8F5F0;
|
||
color: #10B981;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.time-row {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.time-item {
|
||
flex: 1;
|
||
}
|
||
|
||
.time-label {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.time-picker {
|
||
background: #F5F7F6;
|
||
padding: 18rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #1A1A1A;
|
||
text-align: center;
|
||
}
|
||
|
||
.section-hint {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
margin-top: -10rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.theme-section-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 20rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.theme-section-head .section-hint {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.theme-section-badge {
|
||
flex-shrink: 0;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(110, 231, 183, 0.16);
|
||
border: 1rpx solid rgba(16, 185, 129, 0.16);
|
||
font-size: 20rpx;
|
||
font-weight: 700;
|
||
color: #0F766E;
|
||
}
|
||
|
||
.theme-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18rpx;
|
||
}
|
||
|
||
.theme-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: 24rpx;
|
||
border-radius: 28rpx;
|
||
background:
|
||
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
|
||
border: 2rpx solid rgba(226, 232, 240, 0.9);
|
||
box-sizing: border-box;
|
||
box-shadow: 0 10rpx 28rpx rgba(15, 23, 42, 0.04);
|
||
}
|
||
|
||
.theme-card-active {
|
||
background:
|
||
radial-gradient(circle at top right, rgba(103, 232, 249, 0.28), transparent 34%),
|
||
linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(240, 249, 255, 0.94));
|
||
border-color: rgba(16, 185, 129, 0.72);
|
||
box-shadow: 0 18rpx 42rpx rgba(16, 185, 129, 0.13);
|
||
}
|
||
|
||
.theme-glow {
|
||
position: absolute;
|
||
top: -70rpx;
|
||
right: -70rpx;
|
||
width: 190rpx;
|
||
height: 190rpx;
|
||
border-radius: 50%;
|
||
background: rgba(110, 231, 183, 0.12);
|
||
}
|
||
|
||
.theme-card-active .theme-glow {
|
||
background: rgba(103, 232, 249, 0.28);
|
||
}
|
||
|
||
.theme-header {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.theme-icon-wrap {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(241, 245, 249, 0.92);
|
||
border: 1rpx solid rgba(226, 232, 240, 0.9);
|
||
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.theme-card-active .theme-icon-wrap {
|
||
background: linear-gradient(135deg, #6EE7B7, #67E8F9);
|
||
border-color: rgba(255, 255, 255, 0.9);
|
||
box-shadow: 0 12rpx 26rpx rgba(20, 184, 166, 0.18);
|
||
}
|
||
|
||
.theme-icon {
|
||
font-size: 36rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.theme-title-wrap {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.theme-name {
|
||
font-size: 29rpx;
|
||
line-height: 1.25;
|
||
font-weight: 800;
|
||
color: #1E293B;
|
||
}
|
||
|
||
.theme-desc {
|
||
font-size: 21rpx;
|
||
line-height: 1.4;
|
||
color: #64748B;
|
||
}
|
||
|
||
.theme-card-active .theme-name {
|
||
color: #0F766E;
|
||
}
|
||
|
||
.theme-check {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx solid rgba(148, 163, 184, 0.34);
|
||
background: rgba(255, 255, 255, 0.78);
|
||
color: #FFFFFF;
|
||
font-size: 24rpx;
|
||
font-weight: 900;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.theme-card-active .theme-check {
|
||
border-color: transparent;
|
||
background: linear-gradient(135deg, #10B981, #06B6D4);
|
||
box-shadow: 0 8rpx 18rpx rgba(16, 185, 129, 0.2);
|
||
}
|
||
|
||
.theme-levels {
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.theme-level {
|
||
max-width: 100%;
|
||
padding: 8rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(241, 245, 249, 0.95);
|
||
border: 1rpx solid rgba(226, 232, 240, 0.9);
|
||
font-size: 21rpx;
|
||
line-height: 1.35;
|
||
font-weight: 700;
|
||
color: #64748B;
|
||
}
|
||
|
||
.theme-card-active .theme-level {
|
||
background: rgba(255, 255, 255, 0.72);
|
||
border-color: rgba(16, 185, 129, 0.15);
|
||
color: #0F766E;
|
||
}
|
||
|
||
.theme-card-active .theme-level:first-child {
|
||
background: rgba(251, 191, 36, 0.18);
|
||
border-color: rgba(251, 191, 36, 0.22);
|
||
color: #B45309;
|
||
}
|
||
|
||
.theme-arrow {
|
||
display: none;
|
||
}
|
||
|
||
.bottom-space {
|
||
height: 160rpx;
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 20rpx 32rpx;
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
background: linear-gradient(180deg, transparent 0%, rgba(245, 247, 246, 0.97) 35%);
|
||
}
|
||
|
||
.btn-primary {
|
||
height: 96rpx;
|
||
background: #10B981;
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
</style>
|