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 799 additions and 1 deletions
......@@ -52,6 +52,7 @@ function Toast(msg) {
// console.log(process.env);
let baseURL = process.env.VUE_APP_BASE_URL;
// let baseURL = "http://localhost:9101";
baseURL = "https://ow.go.qudone.com";
const axios = axiosIns.create({
// baseURL: process.env.VUE_APP_BASE_URL,
baseURL: baseURL,
......@@ -265,4 +266,4 @@ export const formdata = params => {
export const requestDomain = () => {
return baseURL;
}
\ No newline at end of file
}
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import {
mapGetters,
mapActions,
mapState
} from "vuex";
var UA = require("ua-device")
export default {
data() {
return {
key: 'value',
// swiper
swiperOption: {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// autoplay: {
// delay: 5000,
// stopOnLastSlide: false,
// disableOnInteraction: false
// },
speed: 1000,
},
bannerList: [],
bannerCandidateList: [],
// 视频
playerOptions: {},
bannerTipsVisible: true,
productList: [],
}
},
components: {},
computed: {
...mapState({
isSmallScreen: state => state.isSmallScreen,
isMobile: state => state.isMobile
}),
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
player() {
return this.$refs.videoPlayer.player
},
},
methods: {
onHideBannerTipsHandler() {
this.bannerTipsVisible = false;
},
fetchBanner() {
return new Promise((resolve, reject) => {
httpPost({
url: api.banner
}).then(res => {
resolve(res);
});
});
},
fetchIndexVideo() {
return new Promise((resolve, reject) => {
httpPost({
url: api.indexVideo
}).then(res => {
sessionStorage.setItem("_video_url", res.videoUrl);
sessionStorage.setItem("_poster_url", res.posterUrl);
resolve(res);
});
});
},
refreshBanner() {
let key = this.locale;
if (key == "zh") {
key = "cn";
}
let bannerList = [];
this.bannerCandidateList.forEach(element => {
bannerList.push(element[key]);
});
this.$set(this, 'bannerList', bannerList);
console.log("bannerList:", bannerList);
},
refreshVideoPlayer() {
let videoUrl = sessionStorage.getItem("_video_url");
let posterUrl = sessionStorage.getItem("_poster_url");
let playerOptions = {
width: 800,
height: 450,
// aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: true, // 默认情况下将会消除任何音频。
language: 'en',
// playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
sources: [{
type: "video/mp4",
// mp4
src: videoUrl,
// webm
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: posterUrl,
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
let output = new UA(navigator.userAgent);
let deviceType = output.device.type;
let isMobile = deviceType == "mobile";
// if (this.isSmallScreen) {
if (isMobile) {
playerOptions.aspectRatio = "16:9";
}
this.playerOptions = playerOptions;
},
initProduct() {
let productList = [{
title: "保證續保至100歲"
}, {
title: "不設終身保障限額"
}, {
title: "一家投保<br>盡享稅務扣減"
}, {
title: "承保投保前未知的已有疾病"
}, {
title: "出院免找數<br>讓您安心無憂"
}, {
title: "無索償折扣"
}];
this.productList = productList;
},
initData() {
this.initProduct();
this.fetchBanner().then(res => {
this.bannerCandidateList = res;
this.refreshBanner();
});
this.fetchIndexVideo().then(res => {
this.refreshVideoPlayer();
});
},
},
mounted() {
this.initData();
},
created() {
}
}
@import '@/styles/_support';
.page {
color: #58595b;
}
.content {
padding-bottom: 2.25rem;
}
.box {
position: relative;
margin-top: $marginMedium;
}
// banner 轮播
.banner-contaner {
width: 100%;
height: 791px;
margin: 0 auto;
position: relative;
z-index: 1;
overflow: hidden;
}
// PC轮播
.banner-pc {
display: block;
position: absolute;
z-index: 1;
left: 50%;
margin-left: -960px;
top: 0;
width: 1920px;
height: 100%;
overflow: hidden;
// height: 791px;
.banner-img {
width: 100%;
height: 100%;
}
.btn-wrap {
position: absolute;
z-index: 2;
// 两个banner图按钮位置不一样，和原先约定的按钮位置固定不一致
// 如要调整位置，请调整top,right。如需要右对齐请使用right
// 已用padding适应文本过长的情况(英文等);
// top: 272px;
// left: 1228px;
// top: 310px;
top: 562px;
left: 379px;
display: flex;
.banner-btn {
@extend .pointer;
@extend .bb;
@include btc4(288px, 60px, $fontSizeTitle);
font-size: 30px;
width: auto;
padding: 0 24px;
min-width: 288px;
margin-left: 12px;
background: url("~@assets/images/vhis/vhis-btn2.png");
}
}
}
// 移动端轮播
.banner-mobile {
display: none;
.banner-img {
width: 100%;
}
.btn-wrap {
position: absolute;
z-index: 1;
top: 87%;
left: 0;
right: 0;
margin: 0 auto;
display: flex;
justify-content: center;
.banner-btn {
@extend .pointer;
padding: 0 12px;
color: $cOrange2;
}
}
}
.banner-tips {
$borderSize: 8px;
position: absolute;
z-index: 2;
width: 422px;
height: 202px;
right: 50px;
top: 50px;
padding: 2px;
border-radius: $borderSize;
.close {
cursor: pointer;
position: absolute;
right: 12px;
top: 12px;
}
.cont {
@extend .bb;
padding: 20px;
position: relative;
width: 100%;
height: 100%;
background-color: #ffffff;
border-radius: $borderSize;
.tit {
display: flex;
align-items: center;
color: $cOrange2;
font-size: 28px;
}
.desc {
margin: 12px auto 0;
font-size: 18px;
padding: 0 20px;
.t1 {
line-height: 1.5;
}
.t2 {
font-size: 22px;
margin-top: 6px;
font-weight: bold;
color: $cOrange2;
}
}
}
}
// 标题
.title {
@extend .bb;
padding: 62px 0;
background-color: #fff1ed;
text-align: center;
font-size: $fontSize;
.t1 {
color: $cOrange2;
letter-spacing: 2px;
font-weight: bold;
font-size: 44px;
}
.t2 {
font-size: 32px;
margin-top: 36px;
font-weight: bold;
line-height: 1.39;
letter-spacing: 1.8px;
}
}
// 产品
.product {
margin: 100px auto 0;
text-align: center;
.tit {
color: $cOrange2;
letter-spacing: 2.5px;
font-size: 50px;
font-weight: bold;
}
.prod {
margin: 48px auto 0;
color: $cOrange2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-item {
@extend .bb;
@extend .fcc;
padding: 2px;
width: 582px;
height: 262px;
margin-bottom: 25px;
.cont {
display: flex;
text-align: left;
width: 100%;
height: 100%;
background-color: #ffffff;
.icon-wrap {
@extend .fcc;
width: 210px;
}
.detail {
padding: 40px 40px 40px 0;
flex: 1;
.t1 {
letter-spacing: 2px;
font-size: 38px;
font-weight: bold;
}
.desc {
display: flex;
// margin: 12px auto 0;
&-icon-wrap {
cursor: pointer;
margin: 6px 6px 0 0;
}
.c1 {
letter-spacing: 1.2px;
font-size: 24px;
}
}
}
}
}
}
}
// 视频
.video {
@extend .fcc;
}
// 保障
.guarantee {
margin: 100px auto 0;
font-size: 26px;
.tit {
text-align: center;
color: $cOrange2;
letter-spacing: 1.4px;
}
.table {
max-width: 1200px;
margin: 8px auto 0;
&-border {
width: 100%;
height: 3px;
}
.table-item {
display: flex;
border: solid 1px #e4e4e5;
border-top: none;
.tt {
@extend .bb;
width: 50%;
padding: 26px 0;
font-weight: bold;
letter-spacing: 1.12px;
color: #666666;
}
.label {
background-color: #fef1ed;
padding-left: 76px;
border-right: solid 1px #e4e4e5;
}
.val {
padding-left: 76px;
}
}
}
.table2 {
margin: 48px auto 0;
text-align: left;
.table-item {
display: flex;
border: solid 1px #e4e4e5;
.tt {
@extend .bb;
width: 50%;
padding: 48px;
font-weight: bold;
letter-spacing: 1.12px;
color: #666666;
.t1 {
color: $cOrange2;
}
}
.label {
border-right: solid 1px #e4e4e5;
line-height: 1.4;
ul {
list-style-type: none;
}
li {
background-image: url('~@assets/images/vhis/vhis-tick.png');
background-repeat: no-repeat;
background-position: 0 10px;
padding-left: 40px;
margin: 24px 0;
}
}
.label2 {
li {
background-image: url('~@assets/images/vhis/vhis-cross.png');
}
}
.val {}
}
}
}
// 下载
.download {
margin: 100px auto 0;
text-align: center;
color: $cOrange2;
&-item {
@extend .bb;
@extend .fcc;
margin: 0 auto 24px;
max-width: 740px;
height: 82px;
line-height: 82px;
padding: 2px;
border-radius: 2px;
cursor: pointer;
.cont {
// @extend .fcc;
@extend .bb;
display: flex;
align-items: center;
padding-left: 220px;
width: 100%;
height: 100%;
background-color: #ffffff;
font-size: 36px;
font-weight: bold;
border-radius: 2px;
.icon {
margin-right: 24px;
}
}
}
}
// 提交订单
.submit-btn {
margin: 120px auto 100px;
@extend .pointer;
@extend .bb;
@include btc4(406px, 60px, 28px);
}
.border2 {
background-image: linear-gradient(to right, #ffb31d, #f15907);
}
// banner点点
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
left: 360px;
}
.swiper-button-next {
background-image: url('~@/assets/images/common/button-next.png');
right: 360px;
}
.swiper-container {
height: 100%;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 48px;
}
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #dcdddd;
}
.swiper-pagination-bullet-active {
width: 12px;
height: 12px;
background-color: $cOrange2;
}
<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">
<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}}&nbsp;&gt;</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="border2 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="t1">好醫時自願醫保計劃</div>
<div class="t2">
平安人壽（香港）「好醫時」自願醫保標準計劃<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="border2 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="desc">
<div class="desc-icon-wrap">
<img src="@/assets/images/vhis/vhis-plus.png">
</div>
<div class="c1">展開</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>若您更改計劃、終止保單或您未能支 付保費導致保單被終止，便有機會獲 退還部分款項1（如適用）。
</li>
<li>保證自動續保，無需進一步提供健康 證明。
</li>
<li>保證於保費繳付期內保費不變。</li>
</ul>
</div>
<div class="tt label label2">
<div class="t1">計劃不包括2</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">
立即投保
</div>
</div>
</div>
</template>
<script src="./vhis-detail.js"></script>
<style lang="scss" scoped>
@import "./vhis-detail.scss";
</style>
......@@ -268,6 +268,14 @@ const routes = [
meta: {
title: '平安人寿香港'
}
},
{
path: '/vhis/detail',
name: 'vhisDetail',
component: () => import('./pages/vhis-detail/vhis-detail.vue'),
meta: {
title: '平安人寿香港'
}
}
// 404页面
// {
......
......@@ -134,6 +134,24 @@
border: solid 1px #006441;
}
@mixin btc4($wid:24rem, $hei:5rem, $fontSize:12px) {
width: $wid;
height: $hei;
line-height: $hei;
font-size: $fontSize;
border-radius: $hei;
text-align: center;
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: white;
font-weight: 600;
cursor: pointer;
letter-spacing: 1.4px;
}
@mixin content-percent($percent:4%) {
box-sizing: border-box;
padding: 0 $percent;
......
......@@ -40,6 +40,9 @@ $cDark:#dcdcdc;
$cLightBlack:#606266;
$cDisabled:#888888;
$cOrange2:#ff6839;
$cFontGra2: #58595b;
// 文章宽度
$articleWidth:1041px;
......