88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<template>
|
||
<view class="member-page">
|
||
<view class="hero-card">
|
||
<TnIcon name="vip-fill" :size="68" color="#F59E0B" />
|
||
<text class="hero-title">会员中心</text>
|
||
<text class="hero-desc">高级功能正在陆续开放，当前可继续免费使用基础健康管理能力。</text>
|
||
</view>
|
||
|
||
<view class="feature-card" v-for="item in features" :key="item.title">
|
||
<TnIcon :name="item.icon" :size="36" :color="item.color" />
|
||
<view class="feature-main">
|
||
<text class="feature-title">{{ item.title }}</text>
|
||
<text class="feature-desc">{{ item.desc }}</text>
|
||
</view>
|
||
<TnTag bg-color="#FFF7ED" text-color="#F97316" size="sm" shape="round">规划中</TnTag>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
|
||
import TnTag from '@/uni_modules/tuniaoui-vue3/components/tag/src/tag.vue'
|
||
|
||
const features = [
|
||
{ title: '数据导出', desc: '导出宠物健康记录和提醒数据', icon: 'folder-upload', color: '#06B6D4' },
|
||
{ title: '多端备份', desc: '自动同步并保护重要档案', icon: 'cloud-fill', color: '#2563EB' },
|
||
{ title: '高级统计', desc: '查看体重、花费和健康趋势', icon: 'data-fill', color: '#14B8A6' },
|
||
]
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.member-page {
|
||
min-height: 100vh;
|
||
background: #F8FAFC;
|
||
padding: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.hero-card,
|
||
.feature-card {
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.hero-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
padding: 48rpx 32rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 38rpx;
|
||
font-weight: 900;
|
||
color: #0F172A;
|
||
}
|
||
|
||
.hero-desc,
|
||
.feature-desc {
|
||
font-size: 25rpx;
|
||
color: #64748B;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.feature-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18rpx;
|
||
margin-top: 18rpx;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.feature-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.feature-title {
|
||
display: block;
|
||
font-size: 29rpx;
|
||
font-weight: 800;
|
||
color: #0F172A;
|
||
}
|
||
</style>
|