index.vue
3.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!--
* @Date: 2025-08-27 17:43:45
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-27 19:58:08
* @FilePath: /lls_program/src/pages/Welcome/index.vue
* @Description: 文件描述
-->
<template>
<view class="min-h-screen flex flex-col bg-white">
<!-- Header -->
<!-- <header class="py-5 text-center">
<h1 class="text-xl font-bold">老来赛</h1>
</header> -->
<!-- Main content -->
<view class="flex-1 flex flex-col px-4 pb-20">
<!-- Hero Image -->
<view class="w-full mb-6">
<view class="w-full h-48 rounded-2xl overflow-hidden">
<image :src="welcomeHomeImg" alt="家庭在上海外滩散步" class="w-full h-full object-cover" />
</view>
</view>
<!-- Steps Section -->
<view class="mb-8">
<h2 class="text-xl font-bold mb-6">简单三步，开启健康生活</h2>
<view class="space-y-6">
<!-- Step 1 -->
<view class="flex items-center">
<view class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 flex-shrink-0">
1
</view>
<view>
<h3 class="font-bold">创建家庭</h3>
<p class="text-gray-600 text-sm">
家长创建家庭，获取专属口令
</p>
</view>
</view>
<!-- Step 2 -->
<view class="flex items-center">
<view class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 flex-shrink-0">
2
</view>
<view>
<h3 class="font-bold">邀请家人</h3>
<p class="text-gray-600 text-sm">分享口令，邀请家人加入</p>
</view>
</view>
<!-- Step 3 -->
<view class="flex items-center">
<view class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 flex-shrink-0">
3
</view>
<view>
<h3 class="font-bold">同步步数，兑换好礼</h3>
<p class="text-gray-600 text-sm">
每日同步微信步数，兑换抵用券
</p>
</view>
</view>
</view>
</view>
<!-- Action Buttons -->
<view class="space-y-4 mt-auto">
<view @click="navigateTo('/pages/CreateFamily/index')" class="w-full py-3.5 bg-blue-500 text-white text-lg font-medium rounded-full text-center">
创建家庭
</view>
<view @click="navigateTo('/pages/JoinFamily/index')" class="w-full py-3.5 bg-white text-gray-800 text-lg font-medium rounded-full border border-gray-300 text-center">
加入家庭
</view>
</view>
</view>
<!-- Bottom Navigation -->
<BottomNav />
</view>
</template>
<script setup>
import Taro from '@tarojs/taro';
import BottomNav from '../../components/BottomNav.vue'; // 假设BottomNav组件已转换
import welcomeHomeImg from '../../assets/images/welcome_home.png';
const navigateTo = (url) => {
Taro.navigateTo({ url });
};
</script>
<style lang="less">
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
</style>