index.vue
4.79 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
<!--
* @Date: 2026-01-30
* @Description: 产品详情页
-->
<template>
<div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<NavHeader title="产品详情" />
<!-- Banner Image -->
<div class="w-full h-[420rpx] relative">
<img
class="w-full h-full object-cover"
:src="bannerImage"
mode="aspectFill"
/>
<div class="absolute top-[32rpx] right-[32rpx] bg-red-500 text-white text-[24rpx] px-[16rpx] py-[8rpx] rounded-full shadow-sm">
热卖
</div>
</div>
<!-- Product Header -->
<div class="relative mt-[-40rpx] bg-white rounded-t-[40rpx] px-[40rpx] pt-[48rpx] pb-[40rpx] z-10">
<h1 class="text-[#1F2937] text-[44rpx] font-bold mb-[24rpx]">终身寿险尊享版</h1>
<div class="flex flex-wrap gap-[16rpx]">
<div class="px-[16rpx] py-[6rpx] bg-red-50 rounded-[8rpx]">
<span class="text-red-600 text-[24rpx]">收益率3.5%</span>
</div>
<div class="px-[16rpx] py-[6rpx] bg-orange-50 rounded-[8rpx]">
<span class="text-orange-600 text-[24rpx]">5年超值</span>
</div>
<div class="px-[16rpx] py-[6rpx] bg-green-50 rounded-[8rpx]">
<span class="text-green-600 text-[24rpx]">保证收益万能</span>
</div>
</div>
</div>
<!-- Stats Grid -->
<div class="px-[32rpx] mt-[24rpx]">
<div class="grid grid-cols-2 gap-[24rpx]">
<div
v-for="(item, index) in stats"
:key="index"
class="bg-white rounded-[24rpx] p-[32rpx] border border-gray-100"
>
<div class="text-[#6B7280] text-[24rpx] mb-[12rpx]">{{ item.label }}</div>
<div class="text-[#1F2937] text-[30rpx] font-medium">{{ item.value }}</div>
</div>
</div>
</div>
<!-- Product Features -->
<div class="px-[32rpx] mt-[32rpx]">
<div class="bg-white rounded-[32rpx] p-[40rpx]">
<h2 class="text-[#1F2937] text-[32rpx] font-bold mb-[32rpx]">产品特色</h2>
<div class="flex flex-col gap-[32rpx]">
<div v-for="(feature, index) in features" :key="index" class="flex items-start">
<div class="w-[48rpx] h-[48rpx] rounded-full bg-blue-50 flex items-center justify-center mr-[24rpx] flex-shrink-0">
<IconFont name="Check" size="14" color="#2563EB" />
</div>
<div class="flex-1">
<div class="text-[#1F2937] text-[28rpx] font-medium leading-[1.4]">{{ feature.title }}</div>
<div class="text-[#6B7280] text-[24rpx] mt-[8rpx] leading-[1.4]">{{ feature.desc }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Attachments -->
<div class="px-[32rpx] mt-[32rpx]">
<div class="bg-white rounded-[32rpx] p-[40rpx]">
<h2 class="text-[#1F2937] text-[32rpx] font-bold mb-[32rpx]">相关附件</h2>
<div class="flex flex-col gap-[24rpx]">
<div
v-for="(file, index) in files"
:key="index"
class="flex items-center justify-between p-[24rpx] bg-gray-50 rounded-[16rpx]"
>
<div class="flex items-center flex-1 mr-[24rpx]">
<IconFont name="Order" size="24" color="#EF4444" customClass="mr-[24rpx]" />
<div class="flex flex-col">
<span class="text-[#1F2937] text-[28rpx] font-medium mb-[4rpx] line-clamp-1">{{ file.name }}</span>
<span class="text-[#9CA3AF] text-[24rpx]">{{ file.size }}</span>
</div>
</div>
<IconFont name="Download" size="20" color="#9CA3AF" />
</div>
</div>
</div>
</div>
<!-- TabBar -->
<TabBar />
</div>
</template>
<script setup>
import { ref } from 'vue'
import NavHeader from '@/components/NavHeader.vue'
import TabBar from '@/components/TabBar.vue'
import IconFont from '@/components/IconFont.vue'
// Random banner image
const bannerImage = `https://picsum.photos/seed/${Math.floor(Math.random() * 1000)}/750/420`
const stats = ref([
{ label: '投保年龄', value: '30天-70周岁' },
{ label: '保障期限', value: '终身' },
{ label: '缴费方式', value: '3/5/10年交' },
{ label: '起投金额', value: '10000元起' }
])
const features = ref([
{ title: '身故保险金', desc: '赔付100%基本保额，给家人留爱不留债' },
{ title: '全残保险金', desc: '赔付100%基本保额，生活有保障' },
{ title: '保费豁免', desc: '确诊重疾后免交剩余保费，保障继续有效' },
{ title: '保单贷款', desc: '最高可贷现金价值80%，资金周转灵活' }
])
const files = ref([
{ name: '产品条款.pdf', size: '2.3MB' },
{ name: '投保须知.pdf', size: '1.8MB' },
{ name: '健康告知.pdf', size: '980KB' },
{ name: '保险责任说明.pdf', size: '1.5MB' }
])
</script>