Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
783c0378 by simon
Options

默认提交

1 parent 960f5163
Inline Side-by-side
Showing 19 changed files with 798 additions and 0 deletions
...@@ -52,6 +52,7 @@ function Toast(msg) { ...@@ -52,6 +52,7 @@ function Toast(msg) {
52 // console.log(process.env); 52 // console.log(process.env);
53 let baseURL = process.env.VUE_APP_BASE_URL; 53 let baseURL = process.env.VUE_APP_BASE_URL;
54 // let baseURL = "http://localhost:9101"; 54 // let baseURL = "http://localhost:9101";
55 baseURL = "https://ow.go.qudone.com";
55 const axios = axiosIns.create({ 56 const axios = axiosIns.create({
56 // baseURL: process.env.VUE_APP_BASE_URL, 57 // baseURL: process.env.VUE_APP_BASE_URL,
57 baseURL: baseURL, 58 baseURL: baseURL,
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6 import {
7 mapGetters,
8 mapActions,
9 mapState
10 } from "vuex";
11 var UA = require("ua-device")
12
13 export default {
14 data() {
15 return {
16 key: 'value',
17 // swiper
18 swiperOption: {
19 navigation: {
20 nextEl: '.swiper-button-next',
21 prevEl: '.swiper-button-prev'
22 },
23 pagination: {
24 el: '.swiper-pagination',
25 clickable: true,
26 },
27 // autoplay: {
28 // delay: 5000,
29 // stopOnLastSlide: false,
30 // disableOnInteraction: false
31 // },
32 speed: 1000,
33 },
34 bannerList: [],
35 bannerCandidateList: [],
36 // 视频
37 playerOptions: {},
38 bannerTipsVisible: true,
39 productList: [],
40 }
41 },
42 components: {},
43 computed: {
44 ...mapState({
45 isSmallScreen: state => state.isSmallScreen,
46 isMobile: state => state.isMobile
47 }),
48 locale() {
49 return this.$i18n.locale || 'tc';
50 },
51 i18n() {
52 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
53 },
54 player() {
55 return this.$refs.videoPlayer.player
56 },
57 },
58 methods: {
59 onHideBannerTipsHandler() {
60 this.bannerTipsVisible = false;
61 },
62
63 fetchBanner() {
64 return new Promise((resolve, reject) => {
65 httpPost({
66 url: api.banner
67 }).then(res => {
68 resolve(res);
69 });
70 });
71 },
72 fetchIndexVideo() {
73 return new Promise((resolve, reject) => {
74 httpPost({
75 url: api.indexVideo
76 }).then(res => {
77 sessionStorage.setItem("_video_url", res.videoUrl);
78 sessionStorage.setItem("_poster_url", res.posterUrl);
79 resolve(res);
80 });
81 });
82 },
83 refreshBanner() {
84 let key = this.locale;
85 if (key == "zh") {
86 key = "cn";
87 }
88 let bannerList = [];
89 this.bannerCandidateList.forEach(element => {
90 bannerList.push(element[key]);
91 });
92 this.$set(this, 'bannerList', bannerList);
93 console.log("bannerList:", bannerList);
94 },
95 refreshVideoPlayer() {
96 let videoUrl = sessionStorage.getItem("_video_url");
97 let posterUrl = sessionStorage.getItem("_poster_url");
98 let playerOptions = {
99 width: 800,
100 height: 450,
101 // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
102 autoplay: false, //如果true,浏览器准备好时开始回放。
103 muted: true, // 默认情况下将会消除任何音频。
104 language: 'en',
105 // playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
106 sources: [{
107 type: "video/mp4",
108 // mp4
109 src: videoUrl,
110 // webm
111 // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
112 }],
113 poster: posterUrl,
114 controlBar: {
115 timeDivider: true,
116 durationDisplay: true,
117 remainingTimeDisplay: false,
118 fullscreenToggle: true //全屏按钮
119 }
120 }
121 let output = new UA(navigator.userAgent);
122 let deviceType = output.device.type;
123 let isMobile = deviceType == "mobile";
124 // if (this.isSmallScreen) {
125 if (isMobile) {
126 playerOptions.aspectRatio = "16:9";
127 }
128 this.playerOptions = playerOptions;
129 },
130 initProduct() {
131 let productList = [{
132 title: "保證續保至100歲"
133 }, {
134 title: "不設終身保障限額"
135 }, {
136 title: "一家投保<br>盡享稅務扣減"
137 }, {
138 title: "承保投保前未知的已有疾病"
139 }, {
140 title: "出院免找數<br>讓您安心無憂"
141 }, {
142 title: "無索償折扣"
143 }];
144 this.productList = productList;
145 },
146 initData() {
147 this.initProduct();
148 this.fetchBanner().then(res => {
149 this.bannerCandidateList = res;
150 this.refreshBanner();
151 });
152 this.fetchIndexVideo().then(res => {
153 this.refreshVideoPlayer();
154 });
155 },
156 },
157 mounted() {
158 this.initData();
159 },
160 created() {
161
162 }
163 }
1 @import '@/styles/_support';
2
3 .page {
4 color: #58595b;
5 }
6
7 .content {
8 padding-bottom: 2.25rem;
9 }
10
11 .box {
12 position: relative;
13 margin-top: $marginMedium;
14 }
15
16 // banner 轮播
17 .banner-contaner {
18 width: 100%;
19 height: 791px;
20 margin: 0 auto;
21 position: relative;
22 z-index: 1;
23 overflow: hidden;
24 }
25
26 // PC轮播
27 .banner-pc {
28 display: block;
29 position: absolute;
30 z-index: 1;
31 left: 50%;
32 margin-left: -960px;
33 top: 0;
34 width: 1920px;
35 height: 100%;
36 overflow: hidden;
37 // height: 791px;
38
39 .banner-img {
40 width: 100%;
41 height: 100%;
42 }
43
44 .btn-wrap {
45 position: absolute;
46 z-index: 2;
47 // 两个banner图按钮位置不一样，和原先约定的按钮位置固定不一致
48 // 如要调整位置，请调整top,right。如需要右对齐请使用right
49 // 已用padding适应文本过长的情况(英文等);
50 // top: 272px;
51 // left: 1228px;
52 // top: 310px;
53 top: 562px;
54 left: 379px;
55 display: flex;
56
57 .banner-btn {
58 @extend .pointer;
59 @extend .bb;
60 @include btc4(288px, 60px, $fontSizeTitle);
61 font-size: 30px;
62 width: auto;
63 padding: 0 24px;
64 min-width: 288px;
65 margin-left: 12px;
66 background: url("~@assets/images/vhis/vhis-btn2.png");
67 }
68 }
69 }
70
71 // 移动端轮播
72 .banner-mobile {
73 display: none;
74
75 .banner-img {
76 width: 100%;
77 }
78
79 .btn-wrap {
80 position: absolute;
81 z-index: 1;
82 top: 87%;
83 left: 0;
84 right: 0;
85 margin: 0 auto;
86 display: flex;
87 justify-content: center;
88
89 .banner-btn {
90 @extend .pointer;
91 padding: 0 12px;
92 color: $cOrange2;
93 }
94 }
95 }
96
97 .banner-tips {
98 $borderSize: 8px;
99 position: absolute;
100 z-index: 2;
101 width: 422px;
102 height: 202px;
103 right: 50px;
104 top: 50px;
105 padding: 2px;
106 border-radius: $borderSize;
107
108 .close {
109 cursor: pointer;
110 position: absolute;
111 right: 12px;
112 top: 12px;
113 }
114
115 .cont {
116 @extend .bb;
117 padding: 20px;
118 position: relative;
119 width: 100%;
120 height: 100%;
121 background-color: #ffffff;
122 border-radius: $borderSize;
123
124 .tit {
125 display: flex;
126 align-items: center;
127 color: $cOrange2;
128 font-size: 28px;
129 }
130
131 .desc {
132 margin: 12px auto 0;
133 font-size: 18px;
134 padding: 0 20px;
135
136 .t1 {
137 line-height: 1.5;
138 }
139
140 .t2 {
141 font-size: 22px;
142 margin-top: 6px;
143 font-weight: bold;
144 color: $cOrange2;
145 }
146 }
147
148
149
150 }
151 }
152
153 // 标题
154 .title {
155 @extend .bb;
156 padding: 62px 0;
157 background-color: #fff1ed;
158 text-align: center;
159 font-size: $fontSize;
160
161 .t1 {
162 color: $cOrange2;
163 letter-spacing: 2px;
164 font-weight: bold;
165 font-size: 44px;
166 }
167
168 .t2 {
169 font-size: 32px;
170 margin-top: 36px;
171 font-weight: bold;
172 line-height: 1.39;
173 letter-spacing: 1.8px;
174 }
175 }
176
177 // 产品
178 .product {
179 margin: 100px auto 0;
180 text-align: center;
181
182 .tit {
183 color: $cOrange2;
184 letter-spacing: 2.5px;
185 font-size: 50px;
186 font-weight: bold;
187 }
188
189 .prod {
190 margin: 48px auto 0;
191 color: $cOrange2;
192 display: flex;
193 justify-content: space-between;
194 flex-wrap: wrap;
195
196 &-item {
197 @extend .bb;
198 @extend .fcc;
199 padding: 2px;
200 width: 582px;
201 height: 262px;
202 margin-bottom: 25px;
203
204 .cont {
205 display: flex;
206 text-align: left;
207 width: 100%;
208 height: 100%;
209 background-color: #ffffff;
210
211 .icon-wrap {
212 @extend .fcc;
213 width: 210px;
214 }
215
216 .detail {
217 padding: 40px 40px 40px 0;
218 flex: 1;
219
220 .t1 {
221 letter-spacing: 2px;
222 font-size: 38px;
223 font-weight: bold;
224
225 }
226
227 .desc {
228 display: flex;
229 // margin: 12px auto 0;
230
231 &-icon-wrap {
232 cursor: pointer;
233 margin: 6px 6px 0 0;
234 }
235
236 .c1 {
237 letter-spacing: 1.2px;
238 font-size: 24px;
239 }
240 }
241 }
242 }
243 }
244 }
245 }
246
247 // 视频
248 .video {
249 @extend .fcc;
250 }
251
252 // 保障
253 .guarantee {
254 margin: 100px auto 0;
255 font-size: 26px;
256
257 .tit {
258 text-align: center;
259 color: $cOrange2;
260 letter-spacing: 1.4px;
261
262 }
263
264 .table {
265 max-width: 1200px;
266 margin: 8px auto 0;
267
268 &-border {
269 width: 100%;
270 height: 3px;
271 }
272
273 .table-item {
274 display: flex;
275 border: solid 1px #e4e4e5;
276 border-top: none;
277
278 .tt {
279 @extend .bb;
280 width: 50%;
281 padding: 26px 0;
282 font-weight: bold;
283 letter-spacing: 1.12px;
284 color: #666666;
285 }
286
287 .label {
288 background-color: #fef1ed;
289 padding-left: 76px;
290 border-right: solid 1px #e4e4e5;
291 }
292
293 .val {
294 padding-left: 76px;
295 }
296 }
297 }
298
299 .table2 {
300 margin: 48px auto 0;
301 text-align: left;
302
303 .table-item {
304 display: flex;
305 border: solid 1px #e4e4e5;
306
307 .tt {
308 @extend .bb;
309 width: 50%;
310 padding: 48px;
311 font-weight: bold;
312 letter-spacing: 1.12px;
313 color: #666666;
314
315 .t1 {
316 color: $cOrange2;
317 }
318 }
319
320 .label {
321 border-right: solid 1px #e4e4e5;
322 line-height: 1.4;
323
324 ul {
325 list-style-type: none;
326 }
327
328 li {
329 background-image: url('~@assets/images/vhis/vhis-tick.png');
330 background-repeat: no-repeat;
331 background-position: 0 10px;
332 padding-left: 40px;
333 margin: 24px 0;
334 }
335 }
336
337 .label2 {
338
339 li {
340 background-image: url('~@assets/images/vhis/vhis-cross.png');
341 }
342 }
343
344 .val {}
345 }
346 }
347 }
348
349 // 下载
350 .download {
351 margin: 100px auto 0;
352 text-align: center;
353 color: $cOrange2;
354
355 &-item {
356 @extend .bb;
357 @extend .fcc;
358 margin: 0 auto 24px;
359 max-width: 740px;
360 height: 82px;
361 line-height: 82px;
362 padding: 2px;
363 border-radius: 2px;
364 cursor: pointer;
365
366 .cont {
367 // @extend .fcc;
368 @extend .bb;
369 display: flex;
370 align-items: center;
371 padding-left: 220px;
372
373 width: 100%;
374 height: 100%;
375 background-color: #ffffff;
376 font-size: 36px;
377 font-weight: bold;
378 border-radius: 2px;
379
380 .icon {
381 margin-right: 24px;
382 }
383 }
384 }
385 }
386
387 // 提交订单
388 .submit-btn {
389 margin: 120px auto 100px;
390 @extend .pointer;
391 @extend .bb;
392 @include btc4(406px, 60px, 28px);
393 }
394
395 .border2 {
396 background-image: linear-gradient(to right, #ffb31d, #f15907);
397 }
398
399 // banner点点
400 .swiper-button-prev {
401 background-image: url('~@/assets/images/common/button-prev.png');
402 left: 360px;
403 }
404
405 .swiper-button-next {
406 background-image: url('~@/assets/images/common/button-next.png');
407 right: 360px;
408 }
409
410 .swiper-container {
411 height: 100%;
412 }
413
414 .swiper-pagination-fraction,
415 .swiper-pagination-custom,
416 .swiper-container-horizontal>.swiper-pagination-bullets {
417 bottom: 48px;
418 }
419
420 .swiper-pagination-bullet {
421 width: 12px;
422 height: 12px;
423 background-color: #dcdddd;
424 }
425
426 .swiper-pagination-bullet-active {
427 width: 12px;
428 height: 12px;
429 background-color: $cOrange2;
430 }
1
2 <template>
3 <div class="page page-vhis">
4 <div class="banner-contaner">
5 <!-- banner 轮播 -->
6
7 <div class="banner banner-pc">
8 <swiper :options="swiperOption">
9 <swiper-slide v-for="(item,index) in bannerList" :key="index">
10 <img class="banner-img" :src="item.pcBannerUrl">
11 <div class="btn-wrap">
12 <div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
13 <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>
14 </div>
15 </div>
16 </swiper-slide>
17 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
18 <div class="swiper-button-next" slot="button-next"></div> -->
19 <div class="swiper-pagination" slot="pagination"></div>
20 </swiper>
21 </div>
22
23 <div class="banner banner-mobile">
24 <swiper class="swiper" :options="swiperOption">
25 <swiper-slide v-for="(item,index) in bannerList" :key="index">
26 <img class="banner-img" :src="item.mobileBannerUrl">
27 <div class="btn-wrap">
28 <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}}&nbsp;&gt;</div>
29 </div>
30 </swiper-slide>
31 <div class="swiper-pagination" slot="pagination"></div>
32 </swiper>
33 </div>
34 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
35 <div class="swiper-button-next" slot="button-next"></div> -->
36
37 <div v-if="bannerTipsVisible" class="border2 banner-tips">
38 <div class="cont">
39 <div class="tit">
40 <img class="icon" src="@/assets/images/vhis/hot-deal-icon.png"> 【期間限定保費8折優惠】
41 </div>
42 <div class="desc">
43 <div class="t1">即日起至5月28日或之前投保，只需輸入 以下優惠碼，即享首年保費8折優惠*</div>
44 <div class="t2">優惠碼：CISAVE20</div>
45 </div>
46 </div>
47 <img @click="onHideBannerTipsHandler" class="close" src="@/assets/images/vhis/close2.png">
48 </div>
49 </div>
50 <!-- 标题 -->
51 <div class="title">
52 <div class="t1">好醫時自願醫保計劃</div>
53 <div class="t2">
54 平安人壽（香港）「好醫時」自願醫保標準計劃<br> 為政府自願醫保認可的標準計劃，可同時申請享有稅務扣減優惠。
55 </div>
56 </div>
57 <div class="content">
58 <!-- 产品 -->
59 <div class="box product">
60 <div class="tit">產品特點</div>
61 <div class="prod">
62 <div v-for="(item,index) in productList" :key="item.id" class="border2 prod-item">
63 <div class="cont">
64 <div class="icon-wrap">
65 <img :src="require('@/assets/images/vhis/vhis-icon'+(index+1)+'.png')">
66 </div>
67 <div class="detail">
68 <div class="t1" v-html="item.title">{{item.title}}</div>
69 <div class="desc">
70 <div class="desc-icon-wrap">
71 <img src="@/assets/images/vhis/vhis-plus.png">
72 </div>
73 <div class="c1">展開</div>
74 </div>
75 </div>
76 </div>
77 </div>
78 </div>
79 </div>
80
81 <!-- 视频 -->
82 <div class="box video">
83 <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true">
84 </video-player>
85 </div>
86
87 <!-- 保障 -->
88 <div class="guarantee">
89 <div class="tit">保障一覽</div>
90 <div class="table">
91 <div class="border2 table-border"></div>
92 <div class="table-item">
93 <div class="tt label">產品性質</div>
94 <div class="tt val">醫療保障保險計劃</div>
95 </div>
96 <div class="table-item">
97 <div class="tt label">投保人投保時的年齡</div>
98 <div class="tt val">15日至80歲</div>
99 </div>
100 <div class="table-item">
101 <div class="tt label">保證續保</div>
102 <div class="tt val">至100歲</div>
103 </div>
104 <div class="table-item">
105 <div class="tt label">地域保障範圍</div>
106 <div class="tt val">全球（精神科治療除外）</div>
107 </div>
108 <div class="table-item">
109 <div class="tt label">終生保障限額</div>
110 <div class="tt val">無</div>
111 </div>
112 <div class="table-item">
113 <div class="tt label">每年保障限額</div>
114 <div class="tt val">每保單年度 420,000港元</div>
115 </div>
116 </div>
117
118 <div class="table2">
119 <div class="table-item">
120 <div class="tt label">
121 <div class="t1">更多特點：</div>
122 <ul>
123 <li>若您更改計劃、終止保單或您未能支 付保費導致保單被終止，便有機會獲 退還部分款項1（如適用）。
124 </li>
125 <li>保證自動續保，無需進一步提供健康 證明。
126 </li>
127 <li>保證於保費繳付期內保費不變。</li>
128 </ul>
129 </div>
130 <div class="tt label label2">
131 <div class="t1">計劃不包括2</div>
132
133 <ul>
134 <li>若受保人於保單簽發日後一年內自殺， 將不能獲發身故賠償，但將獲退還於 現行保單保障期內所繳的總保費。
135 </li>
136 </ul>
137
138 </div>
139 </div>
140 </div>
141 </div>
142
143 <!-- 下载 -->
144 <div class="download">
145 <div class="border2 download-item">
146 <div class="cont">
147 <img class="icon" src="@/assets/images/vhis/vhis-download.png"> 下載產品簡介
148 </div>
149 </div>
150 <div class="border2 download-item">
151 <div class="cont">
152 <img class="icon" src="@/assets/images/vhis/vhis-download.png"> 下載標準保費表
153 </div>
154 </div>
155 <div class="border2 download-item">
156 <div class="cont">
157 <img class="icon" src="@/assets/images/vhis/vhis-download.png"> 下載保單契約
158 </div>
159 </div>
160 </div>
161
162 <!-- 立即投保 -->
163 <div class="submit-btn">
164 立即投保
165 </div>
166
167 </div>
168 </div>
169
170 </template>
171
172 <script src="./vhis-detail.js"></script>
173 <style lang="scss" scoped>
174 @import "./vhis-detail.scss";
175 </style>
...@@ -268,6 +268,14 @@ const routes = [ ...@@ -268,6 +268,14 @@ const routes = [
268 meta: { 268 meta: {
269 title: '平安人寿香港' 269 title: '平安人寿香港'
270 } 270 }
271 },
272 {
273 path: '/vhis/detail',
274 name: 'vhisDetail',
275 component: () => import('./pages/vhis-detail/vhis-detail.vue'),
276 meta: {
277 title: '平安人寿香港'
278 }
271 } 279 }
272 // 404页面 280 // 404页面
273 // { 281 // {
......
...@@ -134,6 +134,24 @@ ...@@ -134,6 +134,24 @@
134 border: solid 1px #006441; 134 border: solid 1px #006441;
135 } 135 }
136 136
137 @mixin btc4($wid:24rem, $hei:5rem, $fontSize:12px) {
138 width: $wid;
139 height: $hei;
140 line-height: $hei;
141 font-size: $fontSize;
142 border-radius: $hei;
143 text-align: center;
144
145 background: url("~@assets/images/vhis/vhis-btn.png");
146 background-size: 100% 100%;
147 background-repeat: no-repeat;
148 color: white;
149 font-weight: 600;
150 cursor: pointer;
151 letter-spacing: 1.4px;
152 }
153
154
137 @mixin content-percent($percent:4%) { 155 @mixin content-percent($percent:4%) {
138 box-sizing: border-box; 156 box-sizing: border-box;
139 padding: 0 $percent; 157 padding: 0 $percent;
......
...@@ -40,6 +40,9 @@ $cDark:#dcdcdc; ...@@ -40,6 +40,9 @@ $cDark:#dcdcdc;
40 $cLightBlack:#606266; 40 $cLightBlack:#606266;
41 $cDisabled:#888888; 41 $cDisabled:#888888;
42 42
43 $cOrange2:#ff6839;
44 $cFontGra2: #58595b;
45
43 // 文章宽度 46 // 文章宽度
44 $articleWidth:1041px; 47 $articleWidth:1041px;
45 48
......