index.vue
3.74 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
<template>
<div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<NavHeader title="资料知识库" />
<!-- Content Area -->
<div class="px-[40rpx] mt-[40rpx]">
<!-- Filter Tabs -->
<div class="flex overflow-x-auto no-scrollbar mb-[40rpx] space-x-[24rpx]">
<div v-for="(tab, index) in tabs" :key="index"
class="px-[32rpx] py-[16rpx] rounded-full text-[28rpx] whitespace-nowrap transition-colors"
:class="activeTab === index ? 'bg-[#2563EB] text-white' : 'bg-[#F3F4F6] text-[#6B7280]'"
@click="activeTab = index">
{{ tab }}
</div>
</div>
<!-- Section Title -->
<div class="text-[#1F2937] text-[32rpx] font-bold mb-[24rpx]">
{{ tabs[activeTab] }}
</div>
<!-- Product Grid -->
<div class="flex flex-wrap justify-between">
<!-- Card Item -->
<div v-for="(item, index) in filteredProducts" :key="index"
class="w-[48%] bg-white rounded-[24rpx] overflow-hidden mb-[24rpx] shadow-sm flex flex-col">
<!-- Image Container -->
<div class="relative w-full h-[200rpx]">
<img :src="item.image" class="w-full h-full object-cover bg-gray-100" referrerpolicy="no-referrer" />
<!-- Tag -->
<div v-if="item.tag"
class="absolute top-[12rpx] right-[12rpx] bg-red-500 text-white text-[20rpx] px-[12rpx] py-[4rpx] rounded-full">
{{ item.tag }}
</div>
</div>
<!-- Content -->
<div class="p-[20rpx] flex flex-col flex-1">
<!-- Title -->
<div class="text-[#1F2937] text-[28rpx] font-medium leading-[1.4] line-clamp-2 mb-[16rpx]">
{{ item.title }}
</div>
<!-- Desc -->
<div class="mt-auto self-start bg-[#F3F4F6] text-[#6B7280] text-[22rpx] px-[12rpx] py-[4rpx] rounded-full">
{{ item.desc }}
</div>
</div>
</div>
</div>
</div>
<!-- Tab Bar -->
<TabBar current="home" />
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import NavHeader from '@/components/NavHeader.vue'
import TabBar from '@/components/TabBar.vue'
const activeTab = ref(0)
const tabs = ['全部产品', '人寿保险', '医疗保险', '意外保险']
/**
* Mock Data Generation
* @returns {Array} List of products
*/
const generateProducts = () => {
return [
{ title: '终身寿险尊享版', tag: '热卖', desc: '5年超值', image: `https://picsum.photos/seed/1/200/200` },
{ title: '百万医疗保险计划', desc: '收益率3.5%', image: `https://picsum.photos/seed/2/200/200` },
{ title: '意外伤害保障计划', desc: '保证收益万能', image: `https://picsum.photos/seed/3/200/200` },
{ title: '分红型年金保险', tag: '热卖', desc: '保证收益万能', image: `https://picsum.photos/seed/4/200/200` },
{ title: '重大疾病保险', desc: '收益率4.2%', image: `https://picsum.photos/seed/5/200/200` },
{ title: '少儿教育金保险', tag: '热卖', desc: '教育专属', image: `https://picsum.photos/seed/6/200/200` },
{ title: '高端医疗服务', desc: '尊享服务', image: `https://picsum.photos/seed/7/200/200` },
{ title: '家庭财产保险', desc: '全家无忧', image: `https://picsum.photos/seed/8/200/200` },
]
}
const products = ref(generateProducts())
const filteredProducts = computed(() => {
if (activeTab.value === 0) return products.value
// Mock filtering
return products.value.filter((_, i) => (i + activeTab.value) % 2 === 0)
})
</script>
<style>
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>