index.vue
8.15 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<template>
<view class="relative w-full min-h-screen overflow-y-auto overflow-x-hidden bg-[#F9FAFB] pb-[200rpx]">
<!-- Header Section -->
<view class="absolute left-0 top-0 w-full h-[544rpx] z-0">
<image class="w-full h-full" src="https://picsum.photos/seed/header/750/544" mode="aspectFill" />
<view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view>
</view>
<view class="relative z-10 px-[32rpx] pt-[180rpx]">
<text class="block text-white text-[44rpx] font-bold mb-[40rpx]">臻奇智荟圈</text>
<!-- Search Bar -->
<view class="flex items-center w-full h-[88rpx] bg-white/20 backdrop-blur-md rounded-full px-[32rpx] border border-white/30">
<Search class="text-white/80 mr-[16rpx]" size="18" />
<text class="text-white/80 text-[28rpx]">搜索培训资料、案例...</text>
</view>
</view>
<!-- Main Content -->
<view class="relative z-10 mt-[40rpx] px-[24rpx]">
<!-- Grid Icons -->
<view class="bg-white rounded-[32rpx] shadow-sm p-[40rpx] mb-[24rpx]">
<view class="flex flex-wrap">
<view
class="flex flex-col items-center w-1/3 mb-[40rpx]"
v-for="(item, index) in loopData0"
:key="index"
>
<view class="w-[88rpx] h-[88rpx] rounded-[24rpx] bg-blue-50 flex items-center justify-center mb-[16rpx]">
<component :is="item.icon" class="text-blue-600" size="24" />
</view>
<text class="text-gray-800 text-[26rpx]">{{ item.lanhutext0 }}</text>
</view>
</view>
</view>
<!-- Hot Products -->
<view class="bg-white rounded-[32rpx] shadow-sm p-[32rpx] mb-[24rpx]">
<view class="flex justify-between items-center mb-[24rpx]">
<text class="text-gray-900 text-[32rpx] font-bold">热卖产品：</text>
<view class="flex items-center text-blue-600">
<text class="text-[26rpx] mr-[4rpx]">查看更多</text>
<RectRight size="12" />
</view>
</view>
<!-- Product Card 1 -->
<view class="bg-gray-50 rounded-[24rpx] p-[28rpx] mb-[24rpx]">
<text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">家庭财富传承保障计划（分红）</text>
<view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
<view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-red-600 text-[22rpx]">收益率3.5%</text>
</view>
<view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-orange-600 text-[22rpx]">5年超值</text>
</view>
<view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-green-600 text-[22rpx]">保证收益万能</text>
</view>
</view>
<view class="flex justify-between gap-[24rpx]">
<nut-button plain color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button>
<nut-button color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0">计划书</nut-button>
</view>
</view>
<!-- Product Card 2 -->
<view class="bg-gray-50 rounded-[24rpx] p-[28rpx]">
<text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">儿童教育金储备方案（分红）</text>
<view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
<view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-red-600 text-[22rpx]">收益率4.2%</text>
</view>
<view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-orange-600 text-[22rpx]">10年期</text>
</view>
<view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-green-600 text-[22rpx]">教育专属</text>
</view>
</view>
<view class="flex justify-between gap-[24rpx]">
<nut-button plain color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600">产品资料</nut-button>
<nut-button color="#2563EB" class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0">计划书</nut-button>
</view>
</view>
</view>
<!-- Hot Materials -->
<view class="bg-white rounded-[32rpx] shadow-sm p-[32rpx]">
<view class="flex justify-between items-center mb-[24rpx]">
<text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text>
<view class="flex items-center text-blue-600">
<text class="text-[26rpx] mr-[4rpx]">查看更多</text>
<RectRight size="12" />
</view>
</view>
<!-- Material List -->
<view class="flex flex-col gap-[32rpx]">
<!-- Item 1 -->
<view class="flex gap-[24rpx]">
<image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200" src="https://picsum.photos/seed/mat1/200/140" mode="aspectFill" />
<view class="flex-1 flex flex-col justify-between py-[4rpx]">
<text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">2024年保险市场趋势分析报告</text>
<view class="flex justify-between items-end">
<text class="text-gray-400 text-[24rpx]">256人学习</text>
<text class="text-blue-600 text-[26rpx]">78%</text>
</view>
</view>
</view>
<view class="h-[2rpx] bg-gray-100"></view>
<!-- Item 2 -->
<view class="flex gap-[24rpx]">
<image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200" src="https://picsum.photos/seed/mat2/200/140" mode="aspectFill" />
<view class="flex-1 flex flex-col justify-between py-[4rpx]">
<text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">高净值客户需求分析与产品匹配</text>
<view class="flex justify-between items-end">
<text class="text-gray-400 text-[24rpx]">189人学习</text>
<text class="text-blue-600 text-[26rpx]">65%</text>
</view>
</view>
</view>
<view class="h-[2rpx] bg-gray-100"></view>
<!-- Item 3 -->
<view class="flex gap-[24rpx]">
<image class="w-[200rpx] h-[140rpx] rounded-[12rpx] bg-gray-200" src="https://picsum.photos/seed/mat3/200/140" mode="aspectFill" />
<view class="flex-1 flex flex-col justify-between py-[4rpx]">
<text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">保险合同条款解读与风险提示</text>
<view class="flex justify-between items-end">
<text class="text-gray-400 text-[24rpx]">142人学习</text>
<text class="text-blue-600 text-[26rpx]">52%</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- Bottom Tab Bar -->
<TabBar current="home" />
</view>
</template>
<script setup>
import { ref } from 'vue';
import Taro, { useShareAppMessage } from '@tarojs/taro';
import { useGo } from '@/hooks/useGo';
import TabBar from '@/components/TabBar.vue';
import {
Search,
RectRight,
Order,
My,
Cart,
Home,
Category,
Star,
Service
} from '@nutui/icons-vue-taro';
// Data
const loopData0 = ref([
{
icon: Order,
lanhutext0: '计划书',
},
{
icon: My,
lanhutext0: '入职相关',
},
{
icon: Cart,
lanhutext0: '签单相关',
},
{
icon: Home,
lanhutext0: '家办相关',
},
{
icon: Category,
lanhutext0: '产品知识库',
},
{
icon: Star,
lanhutext0: '工具箱',
},
]);
// Navigation
const go = useGo();
useShareAppMessage(() => {
return {
title: '臻奇智荟圈',
path: '/pages/index/index'
};
});
</script>