Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
9cfd2890 by simon
Options

1.传家福产品 

2.筛选组件
1 parent 584d3b86
Inline Side-by-side
Showing 21 changed files with 1988 additions and 25 deletions
......@@ -7,4 +7,4 @@ VUE_APP_CONTENT_ENCRYPT_KEY = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDA1SNj4qiOE
VUE_APP_CONTENT_ENCRYPT_SWITCH = true
VUE_APP_ONE_ACCOUNT_CENTER_OFF = true
VUE_APP_HIDE_VHIS_MODAL_FLAG = 'N'
\ No newline at end of file
VUE_APP_HIDE_VHIS_MODAL_FLAG = 'Y'
......
......@@ -68,8 +68,8 @@ module.exports = {
path: "/vhis/detail"
},
{
name: "Insurance with Investment Focus",
path: "/vhis?p=endowment"
name: "GenRich",
path: "/gen/rich"
}
]
},
......@@ -1092,5 +1092,134 @@ module.exports = {
desc: "To encourage maintaining a healthy living lifestyle, you can enjoy a No Claims Discount, which is equivalent to 10% of the total due and payable premium in the immediately preceding policy year, if you have not claimed in the last three consecutive policy year.",
tips: ""
}]
},
genRich: {
expand: "Read more",
close: "Close",
bannerTips: {
t1: "【期间限定保费8折优惠】",
t2: "即日起至5月28日或之前投保，只需输入以下优惠码，即享首年保费8折优惠*",
t3: "优惠码：CISAVE20"
},
title: {
t1: "Ping An 'Pro Easy' Voluntary Health Insurance Scheme ",
t2: "Ping An 'Pro Easy' Voluntary Health Insurance Scheme is a certified medical insurance plan under the Government’s Voluntary Health Insurance Scheme that allows you to enjoy essential medical coverage with easy online application.",
t3: "",
t4: "",
},
main: {
t1: "Plan Features",
},
guarantee1: {
title: "Plan Summary",
titleT1: "(VHIS Standard Plan Certification Number：",
titleT2: ")",
titleNum: "F00021-01-000-01/",
k1: "Issue Age（Insured’s attained age)",
v1: "15 days to age 80",
k2: "Protection Period",
v2: "1 year and guaranteed renewable, up to age 100",
k3: "Policy Currency",
v3: "HKD",
k4: "Premium Payment Mode",
v4: "Monthly / Annually",
k5: "Eligible Applicants (The insured)",
v5: "Hong Kong residents (holder of a valid identity card issued by the HKSAR Government)",
t2: "产品性质",
t3: "医疗保障保险计划",
t4: "投保人投保时的年龄",
t5: "15日至80岁",
t6: "保证续保",
t7: "至100岁",
t8: "地域保障范围",
t9: "全球（精神科治疗除外）",
t10: "终生保障限额",
t11: "无",
t12: "每年保障限额",
t13: "每保单年度420,000港元",
},
guarantee2: {
title: "Benefit Schedule",
titK: "Benefit items",
titV: "Benefit limit (in HKD)",
ak: "Room and board",
av: "$750 per day<br>Maximum 180 days per Policy Year",
bk: "Miscellaneous charges",
bv: "$14,000 per policy year",
ck: "Attending doctor's visit fee",
cv: "$750 per day<br>Maximum 180 days per Policy Year",
dk: "Specialist's fee",
dv: "$4,300 per policy year",
ek: "Intensive care",
ev: "$3,500 per day<br>Maximum 25 days per Policy Year",
fk: "Surgeon's fee",
fv0: "Per surgery, subject to surgical category for the surgery/procedure in the Schedule of Surgical Procedures -",
fv1: "Complex $50,000",
fv2: "Major $25,000",
fv3: "Intermediate $12,500",
fv4: "Minor $5,000",
gk: "Anesthetist’s fee",
gv: "35% of Surgeon’s fee payable",
hk: "Operating theatre charges",
hv: "35% of Surgeon’s fee payable",
ik: "Prescribed Diagnostic Imaging Tests",
iv: "$20,000 per Policy Year<br>Subject to 30% Coinsurance",
jk: "Prescribed Non-surgical Cancer Treatments",
jv: "$80,000 per policy year",
kk: "Pre- and post-Confinement/<br>Day Case Procedure outpatient care",
kv11: "$580 per visit",
kv12: "up to $3,000 per Policy Year",
kv1: "$580 per visit, up to $3,000 per Policy Year",
kv2: "1 prior outpatient visit or Emergency consultation per Confinement/Day Case Procedure",
kv3: "3 follow-up outpatient visits per Confinement/Day Case Procedure (within 90 days after discharge from Hospital or completion of Day Case Procedure)",
lk: "Psychiatric treatments",
lv: "$30,000 per Policy Year",
},
guarantee3: {
title: "Other limits",
k1: "Annual Benefit Limit for benefit items (a) – (l)",
v1: "$420,000 per Policy Year",
k2: "Lifetime Benefit Limit for benefit items (a) – (l)",
v2: "Nil",
},
guarantee4: {
title: "Other Benefits",
k1: "Compassionate Death Benefit",
v1: "$10,000",
k2: "No Claims Discount",
v2: "If no claims had been made in the last three (3) consecutive policy years, the premium payable for the subsequent policy year shall be reduced by a No Claims Discount. The No Claims Discount shall be equivalent to 10% of the total due and payable premium in the immediately preceding Policy Year (before any discount).",
},
download: {
t1: "下载产品简介",
t2: "下载标准保费表",
t3: "下载保单契约",
},
submitBtn: "立即投保",
productList: [{
title: "Certified VHIS-compliant Plan",
desc: "The plan is a certified plan under the Voluntary Health Insurance Scheme (VHIS) that aims to support your access to private healthcare services for essential needs, at the same time you could enjoy tax deduction benefit. The plan is approved by the Food and Health Bureau for your peace of mind. For more details on VHIS, please visit www.vhis.gov.hk. ",
tips: ""
}, {
title: "No Lifetime Benefit Limit",
desc: "The plan sets no lifetime benefit limit. With a benefit limit of each Policy Year up to HKD 420,000, it offers you with key medical protection to mitigate the financial burden arising from medical treatments.",
tips: ""
}, {
title: "Tax Deduction while insuring your whole family",
desc: "The premiums you pay for the plan is eligible for tax deduction application. If the policyholder is a taxpayer, he/ she could apply for a tax deduction of up to HKD8,000 per insured person, which the insured person of the Certified Plan should be the taxpayer himself or any specified relatives*, in each assessment year. There is no cap on the number of specified relatives* that a taxpayer can use to claim tax deductions as long as all the policies are held by the same taxpayer and cover yourself and / or your specified relatives*. ",
tips: "* Specified relatives are defined under Inland Revenue Ordinance (Chapter 112). "
}, {
title: "Cover for Unknown Pre-existing Conditions",
desc: "To give you an extra peace of mind, the plan covers unknown pre-existing conditions of which you were not aware and would not reasonably have been aware at the time of application. This plan provides partial cover during a waiting period of 3 policy years upon policy inception and full cover from the 4th policy year and onwards.",
tips: "*Partial compensation will be provided after the effective date of the policy (25% in the second year and 50% in the third year), and full compensation will be provided thereafter (100%)"
}, {
title: "Guarantee Renewal up to Age 100",
desc: "The plan is suitable for individuals between 15 days and age 80. Regardless of your health conditions in the future, the plan guarantees renewal until age 100. Renewal premium will not be increased due to changes in your claim history or physical condition, and your renewal premium will be determined based on the premium schedule at the policy anniversary date. ",
tips: ""
}, {
title: "No Claim Discount",
desc: "To encourage maintaining a healthy living lifestyle, you can enjoy a No Claims Discount, which is equivalent to 10% of the total due and payable premium in the immediately preceding policy year, if you have not claimed in the last three consecutive policy year.",
tips: ""
}]
}
}
......
......@@ -68,8 +68,8 @@ module.exports = {
path: "/vhis/detail"
},
{
name: "投資成份保險",
path: "/vhis?p=endowment"
name: "平安·傳家福",
path: "/gen/rich"
}
]
},
......@@ -1084,5 +1084,143 @@ module.exports = {
desc: "為鼓勵您保持健康生活，如您於本計劃的連續3個保單年度內，沒有任何索償記錄，我們會於下一保單年度退還上一個保單年度保費的百分之十（10%）作為無索償折扣。",
tips: ""
}]
},
genRich: {
expand: "展開",
close: "收起",
bannerTips: {
t1: "【期間限定保費8折優惠】",
t2: "即日起至5月28日或之前投保，只需輸入以下優惠碼，即享首年保費8折優惠*",
t3: "優惠碼：CISAVE20"
},
title: {
t1: "「平安．傳家福」分紅終身壽險計劃",
t2: "美好重要的事物總是值得更好的守護，「平安．傳家福」分紅終身壽險計劃，提供長期儲蓄回報和終身人壽保障，幫助您持續滾存財富，保護您的收入和財富。 「平安．傳家福」設計具有獨特的功能，並保證最低回報，為您及摯愛家庭的未來做好準備。",
t3: "",
t4: "",
},
main: {
t1: "計劃特點",
},
guarantee1: {
title: "計劃概覽",
titleT1: "",
titleT2: "",
titleNum: "",
k1: "投保年齡（受保人的實際年齡)",
v1: "出生後15 天起至80 歲",
k2: "保障期",
v2: "1年，保證續保至100 歲",
k3: "保單貨幣",
v3: "港元",
k4: "保費繳交方式",
v4: "月繳/年繳",
k5: "合資格客戶（受保人）",
v5: "香港居民（持有由香港特區政府簽發的有效居民身份證人士）",
t2: "產品性質",
t3: "醫療保障保險計劃",
t4: "投保人投保時的年齡",
t5: "15日至80歲",
t6: "保證續保",
t7: "至100歲",
t8: "地域保障範圍",
t9: "全球（精神科治療除外）",
t10: "終生保障限額",
t11: "無",
t12: "每年保障限額",
t13: "每保單年度420,000 港元",
},
guarantee2: {
title: "保障内容",
titK: "保障項目",
titV: "賠償限額（港元）",
ak: "病房及膳食",
av: "每日 $750<br>每保單年度最多 180 日",
bk: "雜項開支",
bv: "每保單年度$14,000",
ck: "主診醫生巡房費",
cv: "每日 $750<br>每保單年度最多 180 日",
dk: "專科醫生費",
dv: "每保單年度 $4,300",
ek: "深切治療",
ev: "每日 $3,500<br>每保單年度最多 25 日",
fk: "外科醫生費",
fv0: "每項手術，按手術表劃分的手術分類 –",
fv1: "複雜 $50,000",
fv2: "大型 $25,000",
fv3: "中型 $12,500",
fv4: "小型 $5,000",
gk: "麻醉科醫生費",
gv: "外科醫生費的 35%",
hk: "手術室費",
hv: "外科醫生費的 35%",
ik: "訂明診斷成像檢測",
iv: "每保單年度 $20,000<br>設 30%共同保險",
jk: "訂明非手術癌症治療",
jv: "每保單年度 $80,000",
kk: "入院前或出院後／日間手術前後的門診護理",
kv11: "每次$580",
kv12: "每保單年度$3,000",
kv1: "每次$580，每保單年度$3,000",
kv2: "住院／日間手術前最多 1 次門診或急症診症",
kv3: "出院／日間手術後 90 日內最多 3 次跟進門診",
lk: "精神科治療",
lv: "每保單年度 $30,000",
},
guarantee3: {
title: "其他限額",
k1: "保障項目(a) – (l) 的每年保障限額",
v1: "每保單年度$420,000",
k2: "保障項目(a) – (l) 的終身保障限額",
v2: "無",
},
guarantee4: {
title: "其他保障",
k1: "身故恩恤賠償",
v1: "$10,000",
k2: "無索償折扣",
v2: "在連續3個保單年度或以上不曾作出賠償，無索償折扣將適用於緊隨的保單年度之應繳保費。無索償折扣將相當於前一個保單年度所有到期及應繳保費（不包括任何折扣）的百分之十（10%）。",
},
download: {
t1: "下載產品簡介",
t2: "下載標準保費表",
t3: "下載保單契約",
},
submitBtn: "立即投保",
productList: [{
title: "持續儲蓄增長 潛在長線資本增值",
desc: "「平安．傳家福」是一份分紅保險計劃，計劃的保單價值由保證現金價值，復歸紅利及終期紅利(如有) 三個部份組成提供潛在的長線資本增值機會*。",
tips: "*分紅詳情請參閱產品簡介及保單條款"
}, {
title: "靈活運用保單價值 滿足您的財務需求",
desc: "保單中的復歸紅利和相應的終期分紅價值之現金價值可隨時靈活提取，您也可以作部分退保來提取部分保證現金價值，以滿足您的不同現金需求。",
tips: ""
}, {
title: "創建家族財富 福祉代代相傳",
desc: "「平安．傳家福」通過提供“受保人變更”選項來幫助您建立世代相傳的財富。在第一個保單週年日結束後，您可以更改此計劃的受保人（上限為四次），而不會影響計劃價值*。",
tips: "*須乎合管理規則和公司最終批准的前提下"
}, {
title: "身故及意外身故賠償",
desc: "若受保人不幸身故，我們將支付身故賠償予您指定的保單受益人*。",
tips: "*詳情請參閱產品簡介及保單條款"
}, {
title: "保單持有人意外身故賠償",
desc: "倘若保單持有人於保費供款年期結束前不幸因意外身故，我們將支付一筆賠償，金額相等於「平安．傳家福」保單餘下未繳保費之總額。您的家人可考慮以此繳付未來保費，以維持保單生效。",
tips: "*詳情請參閱產品簡介及保單條款"
}, {
title: "自選保費繳付期切合您的理財需要",
desc: "您可以根據自己的財務狀況靈活選擇3年，5年，8年或10年的付款期限。保費金額在整個付款期限內都保證是固定的。",
tips: ""
}, {
title: "彈性賠償支付方式供您選擇",
desc: "在符合我們現行的規則及規例的情況下，您可以選擇一筆過支付，分期支付或混合形式向受益人支付身故賠償和意外身故賠償。",
tips: ""
}, {
title: "豁免醫療核保 投保快捷方便",
desc: "您「平安．傳家福」投保基本計劃的手續簡便，毋須驗身，讓您輕鬆累積財富。只要您於過去24個月內投保指定的保險產品而其年度總保費不超過4,000,000美元，即可免驗身輕鬆投保。",
tips: ""
}]
}
}
......
......@@ -68,8 +68,8 @@ module.exports = {
path: "/vhis/detail"
},
{
name: "投资成份保险",
path: "/vhis?p=endowment"
name: "平安·传家福",
path: "/gen/rich"
}
]
},
......@@ -1088,5 +1088,137 @@ module.exports = {
desc: "为鼓励您保持健康生活，如您于本计划的连续3个保单年度内，没有任何索偿记录，我们会于下一保单年度退还上一个保单年度保费的百分之十（10%）作为无索偿折扣。",
tips: ""
}]
},
genRich: {
expand: "展开",
close: "收起",
bannerTips: {
t1: "【期间限定保费8折优惠】",
t2: "即日起至5月28日或之前投保，只需输入以下优惠码，即享首年保费8折优惠*",
t3: "优惠码：CISAVE20"
},
title: {
t1: "平安 “好e时”自愿医保标准计划",
t2: "平安「好e时」自愿医保标准计划为政府自愿医保认可的标准计划，涵盖重点医疗保障，投保流程简易，全程线上进行。",
t3: "",
t4: "",
},
main: {
t1: "计划特点",
},
guarantee1: {
title: "计划概览",
titleT1: "",
titleT2: "",
titleNum: "",
k1: "投保年龄（受保人的实际年龄)",
v1: "出生后15 天起至80 岁",
k2: "保障期",
v2: "1年，保证续保至100 岁",
k3: "保单货币",
v3: "港元",
k4: "保费缴交方式",
v4: "月缴/年缴",
k5: "合资格客户（受保人）",
v5: "香港居民（持有由香港特区政府签发的有效居民身份证人士）",
t2: "产品性质",
t3: "医疗保障保险计划",
t4: "投保人投保时的年龄",
t5: "15日至80岁",
t6: "保证续保",
t7: "至100岁",
t8: "地域保障范围",
t9: "全球（精神科治疗除外）",
t10: "终生保障限额",
t11: "无",
t12: "每年保障限额",
t13: "每保单年度420,000港元",
},
guarantee2: {
title: "保障内容",
titK: "保障项目",
titV: "赔偿限额（港元）",
ak: "病房及膳食",
av: "每日 $750<br>每保单年度最多 180 日",
bk: "杂项开支",
bv: "每保单年度$14,000",
ck: "主诊医生巡房费",
cv: "每日 $750<br>每保单年度最多 180 日",
dk: "专科医生费",
dv: "每保单年度 $4,300",
ek: "深切治疗",
ev: "每日 $3,500<br>每保单年度最多 25 日",
fk: "外科医生费",
fv0: "每项手术，按手术表划分的手术分类 –",
fv1: "复杂 $50,000",
fv2: "大型 $25,000",
fv3: "中型 $12,500",
fv4: "小型 $5,000",
gk: "麻醉科医生费",
gv: "外科医生费的 35%",
hk: "手术室费",
hv: "外科医生费的 35%",
ik: "订明诊断成像检测",
iv: "每保单年度 $20,000<br>设 30%共同保险",
jk: "订明非手术癌症治疗",
jv: "每保单年度 $80,000",
kk: "入院前或出院后／日间手术前后的门诊护理",
kv11: "每次$580",
kv12: "每保单年度$3,000",
kv1: "每次$580，每保单年度$3,000",
kv2: "住院／日间手术前最多 1 次门诊或急症诊症",
kv3: "出院／日间手术后 90 日内最多 3 次跟进门诊",
lk: "精神科治疗",
lv: "每保单年度 $30,000",
},
guarantee3: {
title: "其他限额",
k1: "保障项目(a) – (l) 的每年保障限额",
v1: "每保单年度$420,000",
k2: "保障项目(a) – (l) 的终身保障限额",
v2: "无",
},
guarantee4: {
title: "其他保障",
k1: "身故恩恤赔偿",
v1: "$10,000",
k2: "无索偿折扣",
v2: "在连续3个保单年度或以上不曾作出赔偿，无索偿折扣将适用于紧随的保单年度之应缴保费。无索偿折扣将相当于前一个保单年度所有到期及应缴保费（不包括任何折扣）的百分之十（10%）。",
},
download: {
t1: "下载产品简介",
t2: "下载标准保费表",
t3: "下载保单契约",
},
submitBtn: "立即投保",
productList: [{
title: "政府认可 安心保障",
desc: "本计划为政府自愿医保认可的标准计划，让您在需要时候可透过住院保险而使用私营医疗服务，并可同时申请享有税务扣减优惠。此计划获食物及卫生局认可，让您倍感安心。如欲了解更多自愿医保详情，可浏览www.vhis.gov.hk。",
tips: ""
}, {
title: "不设终身保障限额",
desc: "本计划不设终身保障限额，每年保障限额高达420,000 港元，并将每年重新设置至原先限额，让您享有重点的医疗保障，减轻因医疗需求而造成的财务负担。",
tips: ""
}, {
title: "一家投保 尽享税务扣减",
desc: "本计划的保费可用作申请税务扣除，若保单持有人为纳税人，便可为自己及任何指明亲属*，即每一名合资格受保人，申请每名受保人每年8,000 港元的扣税额，可申请税务扣减的指明亲属 数目更不设上限。",
tips: "*指明亲属包括纳税人配偶及子女、纳税人或其配偶的祖父母、外祖父母、父母和兄弟姐妹。"
}, {
title: "承保投保前未知的已有疾病",
desc: "现时一般医疗保险均不承保投保前的已有疾病，本计划为您带来多一份安心，承保您在投保时不察觉，及理应不察觉的已有病症。对上述有关病症，此计划会在保单生效首3年的等候期间提供部份保障*，并由第4个保单年度起提供全面保障。",
tips: "*保单生效日后提供部分赔偿(第二年25%、第三年50%)，其后提供全面赔偿(100%) "
}, {
title: "保证续保至100岁",
desc: "本计划接受任何介乎出生后15天至80岁人士投保，您可以一直续保至100岁。计划保证不会因您的索偿记录或身体状况改变而调高续保保费，而您的续保保费将根据当时保单周年日之保费表厘定。",
tips: ""
}, {
title: "无索偿保费折扣",
desc: "为鼓励您保持健康生活，如您于本计划的连续3个保单年度内，没有任何索偿记录，我们会于下一保单年度退还上一个保单年度保费的百分之十（10%）作为无索偿折扣。",
tips: ""
}]
}
}
......
......@@ -23,6 +23,12 @@ export default {
default: "取消",
},
// 标题
title: {
type: String,
default: "",
},
// 传入数据
items: {
type: Array,
......
......@@ -36,8 +36,14 @@
max-width: 900px;
margin: 0 auto;
.title {
padding-top: 32px;
font-size: $articleTitleLarge;
font-weight: bold;
}
&-content {
padding: 72px 60px;
padding: 60px 60px 72px;
// max-height: 534px;
max-height: 70vh;
overflow-y: auto;
......
......@@ -5,10 +5,12 @@
<div class="border">
<div class="close" @click="onCloseHandler()"><img src="@/assets/images/clarms/close.png"></div>
<div class="modal">
<div class="title">{{title}}</div>
<div class="modal-content">
<div class="check-panel">
<el-checkbox-group v-model="checkList">
<el-checkbox v-for="item in items" :key="item.id" :label="item"></el-checkbox>
<el-checkbox v-for="item in items" :key="item.id" :label="item.value" >{{item.label}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
......
......@@ -67,20 +67,6 @@ export default {
// 过滤筛选
onFilterHandler(idx) {
this.checkList = []
this.checkList = [
"复选框 A",
"复选框 B",
"复选框 C",
"复选框 D",
"复选框 E",
"复选框 F",
"复选框 G",
"复选框 H",
"复选框 I",
"复选框 J",
"复选框 K",
"复选框 L",
]
switch (idx) {
// 保单号码
case 1:
......
/**
* 页面描述:VHIS产品页面
*/
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: '',
// 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: [],
productShowMore: [],
// 全部的信息
sourceData: {},
bottomBtnType: "",
bottomBtnLink: ""
}
},
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;
},
bottomBtnHandle() {
this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink);
},
btnNavigateTo(type, link) {
switch (type) {
case "none":
break;
case "news":
this.$router.push({
path: "/news/detail",
query: {
c: link
}
});
break;
case "product":
break;
case "vhis":
this.$router.push({
path: "/vhis",
query: {
p: link
}
});
break;
default:
location.href = link;
break;
}
},
// 初始化视频组件
refreshVideoPlayer(videoUrl, posterUrl) {
let playerOptions = {
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",
src: videoUrl,
// 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 = this.i18n.genRich.productList;
if (this.productList && this.productList.length > 0) {
for (let index = 0; index < productList.length; index++) {
if (this.productList.length > index) {
productList[index].showMore = this.productList[index].showMore;
} else {
productList[index].showMore = false;
}
}
} else {
productList.forEach(element => {
element.showMore = false;
});
}
this.productList = productList;
},
onShowMoreHandler(idx) {
let productList = this.productList;
let curProduct = productList[idx];
if (curProduct) {
curProduct.showMore = !curProduct.showMore;
}
this.productList = productList;
},
initData() {
this.initProduct();
let targetData = null;
switch (this.locale) {
case "zh":
targetData = this.sourceData.confCn;
break;
case "en":
targetData = this.sourceData.confEn;
break;
case "tc":
targetData = this.sourceData.confTc;
break;
}
if (targetData) {
let bannerList = [{
pcBannerUrl: targetData.pcBannerUrl,
mobileBannerUrl: targetData.mobileBannerUrl,
btns: targetData.btnDescribe
}];
this.$set(this, 'bannerList', bannerList);
this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster);
// 设置标题
// document.title = targetData.productName;
this.bottomBtnType = targetData.bottomUrlType;
this.bottomBtnLink = targetData.bottomUrlLink;
}
},
initActivity() {
let d = localStorage.getItem("voluntaryInfo");
if (d) {
try {
this.sourceData = JSON.parse(d);
this.initData();
} catch (e) { }
}
}
},
mounted() {
this.initActivity();
},
created() {
httpGet({
url: api.productInfo,
data: {
code: "voluntary"
}
}).then(res => {
if (res) {
localStorage.setItem("voluntaryInfo", JSON.stringify(res));
this.sourceData = res;
}
this.initData();
});
this.$root.eventBus.$on("langChange", () => {
try {
this.initData();
} catch (e) { }
});
}
}
@import '@/styles/_support.scss';
$borderSize: 6px;
.page {
color: $cFontGray2;
}
.content {
padding-bottom: 27px;
}
.box {
position: relative;
// margin-top: $marginMedium;
}
// banner 轮播
.banner-contaner {
width: 100%;
height: 502px;
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: 309px;
left: 466px;
display: flex;
.banner-btn {
@extend .pointer;
@extend .bb;
@include btc4(300px, 50px, $fontSizeTitle);
font-size: 22px;
width: auto;
padding: 0 24px;
min-width: 288px;
margin-left: 12px;
background: url("~@assets/images/vhis/vhis-btn.png");
}
.banner-btn:lang(zh) {
letter-spacing: 1.5px;
}
}
}
// 移动端轮播
.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 {
position: absolute;
z-index: 2;
width: 422px;
height: 202px;
right: 50px;
top: 50px;
padding: 2px;
// border-radius: $borderSize;
background-image: url('~@assets/images/vhis/vhis-tips-bg.png');
@extend .bis;
.close {
cursor: pointer;
position: absolute;
right: 12px;
top: 12px;
}
.cont {
@extend .bb;
padding: 20px;
position: relative;
width: 100%;
height: 100%;
border-radius: $borderSize;
.tit {
display: flex;
align-items: center;
color: $cOrange2;
font-size: 28px;
font-weight: bold;
}
.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: 42px 0;
background-color: #fff1ed;
text-align: center;
font-size: $fontSize;
.tt {}
.t1 {
color: $cOrange2;
font-weight: bold;
font-size: 34px;
}
.t1:lang(zh) {
letter-spacing: 6px;
}
.t2 {
font-size: 24px;
line-height: 1.39;
// margin-top: 36px;
max-width: 780px;
margin: 36px auto 0;
}
.t2:lang(zh) {
letter-spacing: 2px;
}
}
// 产品
.product {
margin: 92px auto 0;
text-align: center;
.tit {
color: $cOrange2;
font-size: 36px;
font-weight: bold;
}
.tit:lang(zh) {
letter-spacing: 2.5px;
}
.prod {
margin: 24px auto 0;
color: $cOrange2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-item {
@extend .fcc;
width: 582px;
min-height: 250px;
margin-bottom: 25px;
@include border-tans();
.cont {
display: flex;
text-align: left;
width: 100%;
height: 100%;
.icon-wrap {
@extend .bb;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 70px;
// align-items: center;
width: 202px;
img {
width: 50%;
}
}
.detail {
position: relative;
padding: 44px 20px 25px 0;
flex: 1;
flex-grow: 1;
margin-left: -16px;
.t1 {
font-size: 22px;
font-weight: bold;
}
.t1:lang(zh) {
letter-spacing: 2px;
}
.more {
display: flex;
margin-top: 6px;
// margin: 12px auto 0;
&-icon-wrap {
@extend .fcc;
cursor: pointer;
// margin: 6px 6px 0 0;
margin-right: 6px;
}
.c1 {
font-size: 18px;
}
.c1:lang(zh) {
letter-spacing: 1.2px;
}
}
.desc {
margin-top: 6px;
font-size: 18px;
font-weight: 300;
@extend .text-jtf;
}
.tips {
font-style: italic;
margin-top: 6px;
}
}
}
}
}
}
// 视频
.video {
// @extend .fcc;
position: relative;
margin: 72px auto 0;
}
// 保障
.guarantee {
margin: 90px auto 0;
font-size: 22px;
.tit-wrap {
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
}
.tit {
text-align: center;
color: $cOrange2;
font-size: 36px;
font-weight: bold;
}
.tit:lang(zh) {
letter-spacing: 1.8px;
}
.tit-s {
font-size: $fontSize-M2;
color: $cFontGray2;
span {
color: $cOrange2;
}
}
.table {
max-width: 1200px;
margin: 8px auto 0;
&-border {
width: 100%;
@include border-tans(0px, 1.5px);
}
.table-item {
display: flex;
border: solid 1px #e4e4e5;
border-top: none;
.tt {
@extend .bb;
padding: 24px 24px 24px 0;
color: $cFontGray3;
}
.tt:lang(zh) {
letter-spacing: 1.12px;
}
.tt2 {
display: flex;
}
.ff {
width: 50%;
.nn {
.n1 {
background-color: wheat;
}
.n2 {}
}
}
.label {
padding-left: 28px;
border-right: solid 1px #e4e4e5;
display: flex;
align-items: center;
width: 30%;
}
.val {
padding-left: 100px;
width: 70%;
}
}
.table-item:nth-child(even) {
background-color: #fef1ed;
}
.table-item2 {
min-height: 136px;
}
}
.table2 {
margin: 50px auto 0;
text-align: left;
.table-item {
display: flex;
border: solid 1px #e4e4e5;
.tt {
@extend .bb;
width: 50%;
padding: 50px 60px 26px 100px;
color: $cFontGray3;
.t1 {
color: $cOrange2;
}
}
.tt:lang(zh) {
letter-spacing: 1.12px;
}
.tt2 {
padding: 50px 64px 26px 50px;
padding: 48px;
}
.label {
border-right: solid 1px #e4e4e5;
line-height: 1.4;
ul {
list-style-type: none;
}
li {
@extend .bb;
position: relative;
background-image: url('~@assets/images/vhis/vhis-tick.png');
background-repeat: no-repeat;
background-position: 0 5px;
padding-left: 40px;
margin: 24px 0;
.small {
vertical-align: top;
margin-top: 4px;
}
}
}
.label2 {
li {
background-image: url('~@assets/images/vhis/vhis-cross.png');
}
.t1 {
display: flex;
.small {
vertical-align: top;
margin-top: 4px;
}
}
}
.val {}
}
}
}
// 保障内容
.guarantee2 {
$cellPadding: 6px;
.tit {}
.container {
display: flex;
margin: 0 auto 0;
.table {
margin-top: 48px;
width: 582px;
.smal {
font-size: 18px;
}
.titl {
position: relative;
display: flex;
margin-bottom: 8px;
&-item {
width: 50%;
text-align: center;
color: $cOrange2;
font-size: 22px;
}
}
&-item {
min-height: 136px;
.label {
@extend .bb;
@extend .fcc;
padding-left: 24px;
padding-right: 2px;
justify-content: flex-start;
.nn {}
.n1 {
text-align: left;
margin-top: 0px;
margin-right: 4px;
color: $cOrange2;
width: 32px;
// background-color: wheat;
}
.n2 {
flex: 1;
}
}
.label2 {
display: flex;
align-items: flex-start;
padding: 40px 24px 0;
}
.val {
@extend .fcc;
flex-wrap: wrap;
padding: $cellPadding;
text-align: center;
flex: 1;
min-height: 81px;
&-item {
@extend .bb;
width: 100%;
min-height: 81px;
// padding: 0 4px;
}
}
// .label:lang(zh) {
// line-height: 1.5;
// }
// .val:lang(zh) {
// line-height: 1.5;
// }
}
&-item-4 {
.val {
align-items: flex-start;
text-align: center;
line-height: 1.5;
padding: 0;
&-item {
@extend .bb;
@extend .fcc;
border-bottom: solid 1px #e4e4e5;
padding: $cellPadding;
}
&-item:last-child {
border-bottom: none;
}
}
}
&-item-3 {
.val {
align-items: flex-start;
text-align: center;
line-height: 1.5;
padding: 0;
&-item {
@extend .bb;
@extend .fcc;
min-height: 136px;
border-bottom: solid 1px #e4e4e5;
padding: $cellPadding;
.thr {
@extend .bb;
@extend .fcc;
width: 50%;
height: 100%;
min-height: 136px;
border-right: solid 1px #e4e4e5;
padding: $cellPadding;
}
.thr:last-child {
border-right: none;
}
}
&-item-thr {
padding: 0;
}
&-item:last-child {
border-bottom: none;
}
}
}
}
}
}
// 下载
.download {
margin: 100px auto 0;
text-align: center;
color: $cOrange2;
&-item {
@extend .bb;
@extend .fcc;
margin: 0 auto 24px;
max-width: 602px;
height: 67px;
line-height: 67px;
cursor: pointer;
@include border-tans($borderSize);
.cont {
@extend .bb;
display: flex;
align-items: center;
padding-left: 178px;
width: 100%;
height: 100%;
background-color: #ffffff;
font-size: 22px;
font-weight: bold;
border-radius: $borderSize;
.icon {
height: 47px;
margin-right: 48px;
}
}
}
}
// 提交订单
.submit-btn {
margin: 50px auto 100px;
@extend .pointer;
@extend .bb;
@include btc4(300px, 50px, 22px);
font-weight: bold;
}
.small {
font-size: 14px;
display: inline-block;
vertical-align: text-top;
}
// 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;
}
.vjs-custom-skin {
width: 100%;
}
@media (max-width: 1200px) {
.content {
@include content-percent();
padding-bottom: $marginMedium-M;
.vjs-custom-skin {
// width: 100%;
}
.product {
.prod {
&-item {
width: 45vw;
}
}
}
.guarantee2 {
.container {
.table {
width: 48%;
}
}
}
}
}
@media (max-width: 768px) {
.banner-tips {
display: none;
}
.title {
padding: 24px 0;
.title-wrap {
@include content-percent();
}
.t1 {
font-size: $fontSizeTitle-M2;
}
.t2 {
font-size: $fontSize-M2;
margin: 18px auto 0;
}
}
.content {
// 产品
.product {
margin: 48px auto 0;
.tit {
font-size: $fontSizeTitle-M2;
}
.prod {
justify-content: center;
&-item {
width: 100%;
min-height: 132px;
.icon-wrap {
width: 30%;
padding-top: 22px;
img {
width: 50%;
}
}
.detail {
padding: 22px 10px 12px 0;
margin-left: 0;
font-size: $fontSize-M2;
.more {
.c1 {
font-size: $fontSizeSmall-M2;
}
}
.desc {
text-align: left;
}
}
}
}
}
.video {
margin: 32px auto 0;
}
// 保障
.guarantee {
margin: 32px auto 0;
.tit {
font-size: $fontSizeTitle-M2;
}
.tit-s {
font-size: $fontSizeSmall-M2;
}
.table {
font-size: $fontSize-M2;
&-item {
display: flex;
flex-wrap: nowrap;
.tt {
// width: 100%;
}
.label {
padding: 12px;
}
.val {
padding: 12px;
}
}
}
}
.guarantee2 {
.tit {
font-size: $fontSizeTitle-M2;
}
.container {
flex-wrap: wrap;
.table {
margin-top: 24px;
font-size: $fontSize-M2;
width: auto;
.smal {
font-size: $fontSizeSmall-M2;
}
&-item {
flex-wrap: nowrap;
min-height: auto;
.val {
padding: 12px;
}
}
&-item-3 {
.val {
padding: 0;
}
}
&-item-4 {
.val {
padding: 0;
}
}
.titl {
&-item {
font-size: $fontSize-M2;
}
}
}
}
}
// 下载
.download {
margin: 48px auto 0;
&-item {
.cont {
padding: 0;
font-size: $fontSize-M2;
}
.icon-wrap {
width: 40%;
display: flex;
justify-content: flex-end;
}
.icon {
margin-right: 24px;
}
}
}
}
}
<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="banner-tips">
<div class="cont">
<div class="tit">
<img class="icon" src="@/assets/images/vhis/hot-deal-icon.png"> {{$t('genRich.bannerTips.t1')}}
</div>
<div class="desc">
<div class="t1"> {{$t('genRich.bannerTips.t2')}}</div>
<div class="t2"> {{$t('genRich.bannerTips.t3')}}</div>
</div>
</div>
<img @click="onHideBannerTipsHandler" class="close" src="@/assets/images/vhis/close2.png">
</div>
</div>
<!-- 标题 -->
<div class="title">
<div class="title-wrap">
<div class="tt t1">{{$t('genRich.title.t1')}}</div>
<div class="tt t2">
{{$t('genRich.title.t2')}}{{$t('genRich.title.t3')}}
</div>
</div>
</div>
<div class="content">
<!-- 产品特点 -->
<div class="box product">
<div class="tit">{{$t('genRich.main.t1')}}</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/gen-rich/gen-rich-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('genRich.close') : $t('genRich.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-wrap">
<div class="tit">{{$t('genRich.guarantee1.title')}}</div>
<div class="tit-s">
{{$t('genRich.guarantee1.titleT1')}}
<span>{{$t('genRich.guarantee1.titleNum')}}</span>
{{$t('genRich.guarantee1.titleT2')}}
</div>
</div>
<div class="container">
<div class="table">
<div class="border2 table-border"></div>
<div class="table-item table-item2">
<div class="tt label">{{$t('genRich.guarantee1.k1')}}</div>
<!-- <div class="tt val">{{$t('genRich.guarantee1.v1')}}</div> -->
<div class="tt tt2 val">
<div class="ff">
<div class="nn nn1">1</div>
<div class="nn nn2">aaaa</div>
</div>
<div class="ff">
<div class="nn nn1">2</div>
<div class="nn nn2">bbbb</div>
</div>
</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('genRich.guarantee1.k2')}}</div>
<div class="tt val">{{$t('genRich.guarantee1.v2')}}</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('genRich.guarantee1.k3')}}</div>
<div class="tt val">{{$t('genRich.guarantee1.v3')}}</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('genRich.guarantee1.k4')}}</div>
<div class="tt val">{{$t('genRich.guarantee1.v4')}}</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('genRich.guarantee1.k5')}}</div>
<div class="tt val">{{$t('genRich.guarantee1.v5')}}</div>
</div>
</div>
</div>
</div>
<!-- 保障内容 -->
<div class="guarantee guarantee2">
<div class="tit">{{$t('genRich.guarantee2.title')}}</div>
<div class="container">
<!-- 左表 -->
<div class="table">
<div class="titl">
<div class="titl-item">{{$t('genRich.guarantee2.titK')}}
<span class="small">(1)</span>
</div>
<div class="titl-item">{{$t('genRich.guarantee2.titV')}}</div>
</div>
<div class="border2 table-border"></div>
<div class="table-item">
<div class="tt label">
<div class="fl">
<div class="nn n1">(a)</div>
<div v-html="$t('genRich.guarantee2.ak')" class="nn n2">{{$t('genRich.guarantee2.ak')}}</div>
</div>
</div>
<div v-html="$t('genRich.guarantee2.av')" class="tt val">{{$t('genRich.guarantee2.av')}}</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="fl">
<div class="nn n1">(b)</div>
<div v-html="$t('genRich.guarantee2.bk')" class="nn n2">{{$t('genRich.guarantee2.bk')}}</div>
</div>
</div>
<div v-html="$t('genRich.guarantee2.bv')" class="tt val">{{$t('genRich.guarantee2.bv')}}</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="fl">
<div class="nn n1">(c)</div>
<div v-html="$t('genRich.guarantee2.ck')" class="nn n2">{{$t('genRich.guarantee2.ck')}}</div>
</div>
</div>
<div v-html="$t('genRich.guarantee2.cv')" class="tt val">{{$t('genRich.guarantee2.cv')}}</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="fl">
<div class="nn n1">(d)</div>
<div class="nn n2">
<span v-html="$t('genRich.guarantee2.dk')">{{$t('genRich.guarantee2.dk')}}</span>
<span class="small">(2)</span>
</div>
</div>
</div>
<div v-html="$t('genRich.guarantee2.dv')" class="tt val">{{$t('genRich.guarantee2.dv')}}</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="fl">
<div class="nn n1">(e)</div>
<div v-html="$t('genRich.guarantee2.ek')" class="nn n2">{{$t('genRich.guarantee2.ek')}}</div>
</div>
</div>
<div v-html="$t('genRich.guarantee2.ev')" class="tt val">{{$t('genRich.guarantee2.ev')}}</div>
</div>
<!-- 4分 -->
<div class="table-item table-item-4">
<div class="tt label label2">
<div class="fl">
<div class="nn n1">(f)</div>
<div v-html="$t('genRich.guarantee2.fk')" class="nn n2">{{$t('genRich.guarantee2.fk')}}</div>
</div>
</div>
<div class="tt val">
<div class="val-item">
{{$t('genRich.guarantee2.fv0')}}
</div>
<div class="val-item">
{{$t('genRich.guarantee2.fv1')}}
</div>
<div class="val-item">
{{$t('genRich.guarantee2.fv2')}}
</div>
<div class="val-item">
{{$t('genRich.guarantee2.fv3')}}
</div>
<div class="val-item">
{{$t('genRich.guarantee2.fv4')}}
</div>
</div>
</div>
</div>
<!-- 右表 -->
<div class="table">
<div class="titl">
<div class="titl-item">{{$t('genRich.guarantee2.titK')}}
<span class="small">(1)</span>
</div>
<div class="titl-item">{{$t('genRich.guarantee2.titV')}}</div>
</div>
<div class="border2 table-border"></div>
<div class="table-item">
<div class="tt label">
<div class="fl">
<div class="nn n1">(g)</div>
<div v-html="$t('genRich.guarantee2.gk')" class="nn n2">{{$t('genRich.guarantee2.gk')}}</div>
</div>
</div>
<div class="tt val">
<div>
<span v-html="$t('genRich.guarantee2.gv')">{{$t('genRich.guarantee2.gv')}}</span>
<span class="small">(5)</span>
</div>
</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="fl">
<div class="nn n1">(h)</div>
<div v-html="$t('genRich.guarantee2.hk')" class="nn n2">{{$t('genRich.guarantee2.hk')}}</div>
</div>
</div>
<div class="tt val">
<div>
<span v-html="$t('genRich.guarantee2.hv')">{{$t('genRich.guarantee2.hv')}}</span>
<span class="small">(5)</span>
</div>
</div>
</div>
<div class="table-item">
<div class="tt label ">
<div class="fl">
<div class="nn n1">(i)</div>
<div class="nn n2">
<span v-html="$t('genRich.guarantee2.ik')">{{$t('genRich.guarantee2.ik')}}</span>
<span class="small">(2)(3)</span>
</div>
</div>
</div>
<div v-html="$t('genRich.guarantee2.iv')" class="tt val">{{$t('genRich.guarantee2.iv')}}</div>
</div>
<div class="table-item">
<div class="tt label ">
<div class="fl">
<div class="nn n1">(j)</div>
<div class="nn n2">
<span v-html="$t('genRich.guarantee2.jk')">{{$t('genRich.guarantee2.jk')}}</span>
<span class="small">(4)</span>
</div>
</div>
</div>
<div v-html="$t('genRich.guarantee2.jv')" class="tt val">{{$t('genRich.guarantee2.jv')}}</div>
</div>
<div class="table-item table-item-3">
<div class="tt label label2">
<div class="fl">
<div class="nn n1">(k)</div>
<div class="nn n2">
<span v-html="$t('genRich.guarantee2.kk')">{{$t('genRich.guarantee2.kk')}}</span>
<span class="small">(2)</span>
</div>
</div>
</div>
<div class="tt val">
<div class="val-item val-item-thr">
<div v-html="$t('genRich.guarantee2.kv11')" class="thr">{{$t('genRich.guarantee2.kv11')}}</div>
<div v-html="$t('genRich.guarantee2.kv12')" class="thr">{{$t('genRich.guarantee2.kv12')}}</div>
</div>
<div v-html="$t('genRich.guarantee2.kv2')" class="val-item">
{{$t('genRich.guarantee2.kv2')}}
</div>
<div v-html="$t('genRich.guarantee2.kv3')" class="val-item">
{{$t('genRich.guarantee2.kv3')}}
</div>
</div>
</div>
<!-- 4分 -->
<div class="table-item table-item">
<div class="tt label">
<div class="fl">
<div class="nn n1">(l)</div>
<div v-html="$t('genRich.guarantee2.lk')" class="nn n2">{{$t('genRich.guarantee2.lk')}}</div>
</div>
</div>
<div v-html="$t('genRich.guarantee2.lv')" class="tt val">{{$t('genRich.guarantee2.lv')}}</div>
</div>
</div>
</div>
</div>
<!-- 其他限额 -->
<div class="guarantee">
<div class="tit">{{$t('genRich.guarantee3.title')}}</div>
<div class="container">
<div class="table">
<div class="border2 table-border"></div>
<div class="table-item">
<div class="tt label">{{$t('genRich.guarantee3.k1')}}</div>
<div class="tt val">{{$t('genRich.guarantee3.v1')}}</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('genRich.guarantee3.k2')}}</div>
<div class="tt val">{{$t('genRich.guarantee3.v2')}}</div>
</div>
</div>
</div>
</div>
<!-- 其他保障 -->
<div class="guarantee">
<div class="tit">{{$t('genRich.guarantee4.title')}}</div>
<div class="container">
<div class="table">
<div class="border2 table-border"></div>
<div class="table-item">
<div class="tt label">{{$t('genRich.guarantee4.k1')}}</div>
<div class="tt val">{{$t('genRich.guarantee4.v1')}}</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('genRich.guarantee4.k2')}}</div>
<div class="tt val">{{$t('genRich.guarantee4.v2')}}</div>
</div>
</div>
</div>
</div>
<!-- 下载 -->
<div class="download">
<div class="border2 download-item">
<div class="cont">
<div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> {{$t('genRich.download.t1')}}
</div>
</div>
<div class="border2 download-item">
<div class="cont">
<div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> {{$t('genRich.download.t2')}}
</div>
</div>
<div class="border2 download-item">
<div class="cont">
<div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> {{$t('genRich.download.t3')}}
</div>
</div>
</div>
<!-- 立即投保 -->
<div class="submit-btn" @click="bottomBtnHandle()">
{{$t('genRich.submitBtn')}}
</div>
</div>
</div>
</template>
<script src="./gen-rich.js"></script>
<style lang="scss" scoped>
@import "./gen-rich.scss";
</style>
......@@ -175,11 +175,10 @@ export default {
btns: targetData.btnDescribe
}];
this.$set(this, 'bannerList', bannerList);
console.log(this.bannerList);
this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster);
// 设置标题
document.title = targetData.productName;
// document.title = targetData.productName;
this.bottomBtnType = targetData.bottomUrlType;
this.bottomBtnLink = targetData.bottomUrlLink;
......
......@@ -278,6 +278,15 @@ const routes = [
}
},
{
path: '/gen/rich',
name: 'genRich',
component: () => import('./pages/gen-rich/gen-rich.vue'),
meta: {
title: '平安人寿香港'
}
},
{
path: '/clarms',
name: 'clarms',
component: () => import('./pages/clarms/clarms.vue'),
......