index.vue
3.77 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
<div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<NavHeader title="家办相关" />
<!-- Content List -->
<div class="px-[40rpx] mt-[40rpx] relative z-10">
<div v-for="(section, index) in sections" :key="index"
class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
<!-- Section Header -->
<div class="px-[40rpx] py-[32rpx]" :style="{ background: section.bgGradient }">
<span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
</div>
<!-- Section Items -->
<div class="flex flex-col">
<div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="flex flex-col">
<div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer"
@tap="handleItemClick(item)">
<div class="flex items-center">
<div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
<IconFont :name="item.icon" class="text-blue-600" size="32" />
</div>
<div class="flex flex-col">
<span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
<span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
</div>
</div>
<IconFont name="RectRight" class="text-gray-400" size="16" />
</div>
<!-- Divider -->
<div v-if="itemIndex < section.items.length - 1"
class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
</div>
</div>
</div>
</div>
<!-- Tab Bar -->
<TabBar current="" />
</div>
</template>
<script setup>
import { shallowRef } from 'vue'
import { useGo } from '@/hooks/useGo'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import IconFont from '@/components/IconFont.vue'
const go = useGo()
const sections = shallowRef([
{
title: '家庭成员',
bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
items: [
{
title: '成员列表',
subtitle: '管理家庭成员信息',
icon: 'My'
},
{
title: '新增成员',
subtitle: '添加家庭成员',
icon: 'Edit'
}
]
},
{
title: '健康档案',
bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
items: [
{
title: '体检报告',
subtitle: '查看家庭成员体检记录',
icon: 'Order'
},
{
title: '就医记录',
subtitle: '家庭成员就医历史',
icon: 'Clock'
}
]
},
{
title: '资产管理',
bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
items: [
{
title: '保单管理',
subtitle: '家庭保单汇总',
icon: 'Star'
},
{
title: '资产总览',
subtitle: '家庭资产分布',
icon: 'Find'
}
]
},
{
title: '生活服务',
bgGradient: 'linear-gradient(90deg, #E0F2FE 0%, #BAE6FD 100%)',
items: [
{
title: '高端医疗',
subtitle: '预约高端医疗服务',
icon: 'Service'
},
{
title: '康养服务',
subtitle: '健康养生服务',
icon: 'PlayCircleFill'
}
]
}
])
/**
* Handle item click
* @param {Object} item - Clicked item data
*/
const handleItemClick = (item) => {
console.log('Clicked:', item.title)
// TODO: Navigate to respective page
}
</script>
<script>
export default {
name: 'FamilyOfficeIndex'
}
</script>