vhis-detail.vue
6.45 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
<template>
<div class="page page-vhis">
<div class="banner-contaner">
<!-- banner 轮播 -->
<div class="banner banner-pc">
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.pcBannerUrl">
<!-- <img :src="require('@/assets/images/vhis/kv.png')"> -->
<div class="btn-wrap">
<div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
<div class="banner-btn" v-if="btnItem.n && btnItem.t && btnItem.c" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{backgroundColor:btnItem.c}">{{btnItem.n}}</div>
</div>
</div>
</swiper-slide>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
<!-- <div class="swiper-pagination" slot="pagination"></div> -->
</swiper>
</div>
<div class="banner banner-mobile">
<swiper class="swiper" :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.mobileBannerUrl">
<div class="btn-wrap">
<div class="banner-btn" v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{color:btnItem.c}">{{btnItem.n}} ></div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
<div v-if="bannerTipsVisible" class="banner-tips">
<div class="cont">
<div class="tit">
<img class="icon" src="@/assets/images/vhis/hot-deal-icon.png"> 【期間限定保費8折優惠】
</div>
<div class="desc">
<div class="t1">即日起至5月28日或之前投保，只需輸入 以下優惠碼，即享首年保費8折優惠*</div>
<div class="t2">優惠碼：CISAVE20</div>
</div>
</div>
<img @click="onHideBannerTipsHandler" class="close" src="@/assets/images/vhis/close2.png">
</div>
</div>
<!-- 标题 -->
<div class="title">
<div class="tt t1"><img class="easy easy1" src="@/assets/images/vhis/easy-1.png">自願醫保計劃</div>
<div class="tt t2">
平安人壽（香港）<img class="easy easy2" src="@/assets/images/vhis/easy-2.png">自願醫保標準計劃<br> 為政府自願醫保認可的標準計劃，可同時申請享有稅務扣減優惠。
</div>
</div>
<div class="content">
<!-- 产品 -->
<div class="box product">
<div class="tit">產品特點</div>
<div class="prod">
<div v-for="(item,index) in productList" :key="item.id" class=" prod-item">
<div class="cont">
<div class="icon-wrap">
<img :src="require('@/assets/images/vhis/vhis-icon'+(index+1)+'.png')">
</div>
<div class="detail">
<div class="t1" v-html="item.title">{{item.title}}</div>
<div class="more pointer" @click="onShowMoreHandler(index)">
<div class="more-icon-wrap">
<img v-if="item.showMore" src="@/assets/images/vhis/vhis-mine.png">
<img v-else src="@/assets/images/vhis/vhis-plus.png">
</div>
<div class="c1">{{item.showMore ? $t('vhisDetail.close') : $t('vhisDetail.expand')}}</div>
</div>
<div v-if="item.showMore" class="desc">
{{item.desc}}
<div class="tips">{{item.tips}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 视频 -->
<div class="box video">
<video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true">
</video-player>
</div>
<!-- 保障 -->
<div class="guarantee">
<div class="tit">保障一覽</div>
<div class="table">
<div class="border2 table-border"></div>
<div class="table-item">
<div class="tt label">產品性質</div>
<div class="tt val">醫療保障保險計劃</div>
</div>
<div class="table-item">
<div class="tt label">投保人投保時的年齡</div>
<div class="tt val">15日至80歲</div>
</div>
<div class="table-item">
<div class="tt label">保證續保</div>
<div class="tt val">至100歲</div>
</div>
<div class="table-item">
<div class="tt label">地域保障範圍</div>
<div class="tt val">全球（精神科治療除外）</div>
</div>
<div class="table-item">
<div class="tt label">終生保障限額</div>
<div class="tt val">無</div>
</div>
<div class="table-item">
<div class="tt label">每年保障限額</div>
<div class="tt val">每保單年度 420,000港元</div>
</div>
</div>
<div class="table2">
<div class="table-item">
<div class="tt label">
<div class="t1">更多特點：</div>
<ul>
<li>
<span>若您更改計劃、終止保單或您未能支付保費導致保單被終止，便有機會獲退還部分款項</span>
<span class="small">1</span>
<span>（如適用）。</span>
</li>
<li>保證自動續保，無需進一步提供健康 證明。
</li>
<li>保證於保費繳付期內保費不變。</li>
</ul>
</div>
<div class="tt tt2 label label2">
<div class="t1">
<span>計劃不包括</span>
<span class="small">2</span>
</div>
<ul>
<li>若受保人於保單簽發日後一年內自殺， 將不能獲發身故賠償，但將獲退還於現行保單保障期內所繳的總保費。
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 下载 -->
<div class="download">
<div class="border2 download-item">
<div class="cont">
<img class="icon" src="@/assets/images/vhis/vhis-download.png"> 下載產品簡介
</div>
</div>
<div class="border2 download-item">
<div class="cont">
<img class="icon" src="@/assets/images/vhis/vhis-download.png"> 下載標準保費表
</div>
</div>
<div class="border2 download-item">
<div class="cont">
<img class="icon" src="@/assets/images/vhis/vhis-download.png"> 下載保單契約
</div>
</div>
</div>
<!-- 立即投保 -->
<div class="submit-btn" @click="bottomBtnHandle()">
立即投保
</div>
</div>
</div>
</template>
<script src="./vhis-detail.js"></script>
<style lang="scss" scoped>
@import "./vhis-detail.scss";
</style>