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 ...@@ -7,4 +7,4 @@ VUE_APP_CONTENT_ENCRYPT_KEY = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDA1SNj4qiOE
7 VUE_APP_CONTENT_ENCRYPT_SWITCH = true 7 VUE_APP_CONTENT_ENCRYPT_SWITCH = true
8 VUE_APP_ONE_ACCOUNT_CENTER_OFF = true 8 VUE_APP_ONE_ACCOUNT_CENTER_OFF = true
9 9
10 VUE_APP_HIDE_VHIS_MODAL_FLAG = 'N'
...\ No newline at end of file ...\ No newline at end of file
10 VUE_APP_HIDE_VHIS_MODAL_FLAG = 'Y'
......
...@@ -68,8 +68,8 @@ module.exports = { ...@@ -68,8 +68,8 @@ module.exports = {
68 path: "/vhis/detail" 68 path: "/vhis/detail"
69 }, 69 },
70 { 70 {
71 name: "Insurance with Investment Focus", 71 name: "GenRich",
72 path: "/vhis?p=endowment" 72 path: "/gen/rich"
73 } 73 }
74 ] 74 ]
75 }, 75 },
...@@ -1092,5 +1092,134 @@ module.exports = { ...@@ -1092,5 +1092,134 @@ module.exports = {
1092 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.", 1092 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.",
1093 tips: "" 1093 tips: ""
1094 }] 1094 }]
1095 },
1096 genRich: {
1097 expand: "Read more",
1098 close: "Close",
1099 bannerTips: {
1100 t1: "【期间限定保费8折优惠】",
1101 t2: "即日起至5月28日或之前投保，只需输入以下优惠码，即享首年保费8折优惠*",
1102 t3: "优惠码：CISAVE20"
1103 },
1104 title: {
1105 t1: "Ping An 'Pro Easy' Voluntary Health Insurance Scheme ",
1106 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.",
1107 t3: "",
1108 t4: "",
1109 },
1110 main: {
1111 t1: "Plan Features",
1112 },
1113 guarantee1: {
1114 title: "Plan Summary",
1115 titleT1: "(VHIS Standard Plan Certification Number：",
1116 titleT2: ")",
1117 titleNum: "F00021-01-000-01/",
1118 k1: "Issue Age（Insured’s attained age)",
1119 v1: "15 days to age 80",
1120 k2: "Protection Period",
1121 v2: "1 year and guaranteed renewable, up to age 100",
1122 k3: "Policy Currency",
1123 v3: "HKD",
1124 k4: "Premium Payment Mode",
1125 v4: "Monthly / Annually",
1126 k5: "Eligible Applicants (The insured)",
1127 v5: "Hong Kong residents (holder of a valid identity card issued by the HKSAR Government)",
1128
1129 t2: "产品性质",
1130 t3: "医疗保障保险计划",
1131 t4: "投保人投保时的年龄",
1132 t5: "15日至80岁",
1133 t6: "保证续保",
1134 t7: "至100岁",
1135 t8: "地域保障范围",
1136 t9: "全球（精神科治疗除外）",
1137 t10: "终生保障限额",
1138 t11: "无",
1139 t12: "每年保障限额",
1140 t13: "每保单年度420,000港元",
1141 },
1142 guarantee2: {
1143 title: "Benefit Schedule",
1144 titK: "Benefit items",
1145 titV: "Benefit limit (in HKD)",
1146 ak: "Room and board",
1147 av: "$750 per day<br>Maximum 180 days per Policy Year",
1148 bk: "Miscellaneous charges",
1149 bv: "$14,000 per policy year",
1150 ck: "Attending doctor's visit fee",
1151 cv: "$750 per day<br>Maximum 180 days per Policy Year",
1152 dk: "Specialist's fee",
1153 dv: "$4,300 per policy year",
1154 ek: "Intensive care",
1155 ev: "$3,500 per day<br>Maximum 25 days per Policy Year",
1156 fk: "Surgeon's fee",
1157 fv0: "Per surgery, subject to surgical category for the surgery/procedure in the Schedule of Surgical Procedures -",
1158 fv1: "Complex $50,000",
1159 fv2: "Major $25,000",
1160 fv3: "Intermediate $12,500",
1161 fv4: "Minor $5,000",
1162 gk: "Anesthetist’s fee",
1163 gv: "35% of Surgeon’s fee payable",
1164 hk: "Operating theatre charges",
1165 hv: "35% of Surgeon’s fee payable",
1166 ik: "Prescribed Diagnostic Imaging Tests",
1167 iv: "$20,000 per Policy Year<br>Subject to 30% Coinsurance",
1168 jk: "Prescribed Non-surgical Cancer Treatments",
1169 jv: "$80,000 per policy year",
1170 kk: "Pre- and post-Confinement/<br>Day Case Procedure outpatient care",
1171 kv11: "$580 per visit",
1172 kv12: "up to $3,000 per Policy Year",
1173 kv1: "$580 per visit, up to $3,000 per Policy Year",
1174 kv2: "1 prior outpatient visit or Emergency consultation per Confinement/Day Case Procedure",
1175 kv3: "3 follow-up outpatient visits per Confinement/Day Case Procedure (within 90 days after discharge from Hospital or completion of Day Case Procedure)",
1176 lk: "Psychiatric treatments",
1177 lv: "$30,000 per Policy Year",
1178 },
1179 guarantee3: {
1180 title: "Other limits",
1181 k1: "Annual Benefit Limit for benefit items (a) – (l)",
1182 v1: "$420,000 per Policy Year",
1183 k2: "Lifetime Benefit Limit for benefit items (a) – (l)",
1184 v2: "Nil",
1185 },
1186 guarantee4: {
1187 title: "Other Benefits",
1188 k1: "Compassionate Death Benefit",
1189 v1: "$10,000",
1190 k2: "No Claims Discount",
1191 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).",
1192 },
1193 download: {
1194 t1: "下载产品简介",
1195 t2: "下载标准保费表",
1196 t3: "下载保单契约",
1197 },
1198 submitBtn: "立即投保",
1199 productList: [{
1200 title: "Certified VHIS-compliant Plan",
1201 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. ",
1202 tips: ""
1203 }, {
1204 title: "No Lifetime Benefit Limit",
1205 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.",
1206 tips: ""
1207 }, {
1208 title: "Tax Deduction while insuring your whole family",
1209 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*. ",
1210 tips: "* Specified relatives are defined under Inland Revenue Ordinance (Chapter 112). "
1211 }, {
1212 title: "Cover for Unknown Pre-existing Conditions",
1213 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.",
1214 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%)"
1215 }, {
1216 title: "Guarantee Renewal up to Age 100",
1217 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. ",
1218 tips: ""
1219 }, {
1220 title: "No Claim Discount",
1221 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.",
1222 tips: ""
1223 }]
1095 } 1224 }
1096 } 1225 }
......
...@@ -68,8 +68,8 @@ module.exports = { ...@@ -68,8 +68,8 @@ module.exports = {
68 path: "/vhis/detail" 68 path: "/vhis/detail"
69 }, 69 },
70 { 70 {
71 name: "投資成份保險", 71 name: "平安·傳家福",
72 path: "/vhis?p=endowment" 72 path: "/gen/rich"
73 } 73 }
74 ] 74 ]
75 }, 75 },
...@@ -1084,5 +1084,143 @@ module.exports = { ...@@ -1084,5 +1084,143 @@ module.exports = {
1084 desc: "為鼓勵您保持健康生活，如您於本計劃的連續3個保單年度內，沒有任何索償記錄，我們會於下一保單年度退還上一個保單年度保費的百分之十（10%）作為無索償折扣。", 1084 desc: "為鼓勵您保持健康生活，如您於本計劃的連續3個保單年度內，沒有任何索償記錄，我們會於下一保單年度退還上一個保單年度保費的百分之十（10%）作為無索償折扣。",
1085 tips: "" 1085 tips: ""
1086 }] 1086 }]
1087 },
1088 genRich: {
1089 expand: "展開",
1090 close: "收起",
1091 bannerTips: {
1092 t1: "【期間限定保費8折優惠】",
1093 t2: "即日起至5月28日或之前投保，只需輸入以下優惠碼，即享首年保費8折優惠*",
1094 t3: "優惠碼：CISAVE20"
1095 },
1096 title: {
1097 t1: "「平安．傳家福」分紅終身壽險計劃",
1098 t2: "美好重要的事物總是值得更好的守護，「平安．傳家福」分紅終身壽險計劃，提供長期儲蓄回報和終身人壽保障，幫助您持續滾存財富，保護您的收入和財富。 「平安．傳家福」設計具有獨特的功能，並保證最低回報，為您及摯愛家庭的未來做好準備。",
1099 t3: "",
1100 t4: "",
1101 },
1102 main: {
1103 t1: "計劃特點",
1104 },
1105 guarantee1: {
1106 title: "計劃概覽",
1107 titleT1: "",
1108 titleT2: "",
1109 titleNum: "",
1110 k1: "投保年齡（受保人的實際年齡)",
1111 v1: "出生後15 天起至80 歲",
1112 k2: "保障期",
1113 v2: "1年，保證續保至100 歲",
1114 k3: "保單貨幣",
1115 v3: "港元",
1116 k4: "保費繳交方式",
1117 v4: "月繳/年繳",
1118 k5: "合資格客戶（受保人）",
1119 v5: "香港居民（持有由香港特區政府簽發的有效居民身份證人士）",
1120
1121 t2: "產品性質",
1122 t3: "醫療保障保險計劃",
1123 t4: "投保人投保時的年齡",
1124 t5: "15日至80歲",
1125 t6: "保證續保",
1126 t7: "至100歲",
1127 t8: "地域保障範圍",
1128 t9: "全球（精神科治療除外）",
1129 t10: "終生保障限額",
1130 t11: "無",
1131 t12: "每年保障限額",
1132 t13: "每保單年度420,000 港元",
1133 },
1134 guarantee2: {
1135 title: "保障内容",
1136 titK: "保障項目",
1137 titV: "賠償限額（港元）",
1138
1139 ak: "病房及膳食",
1140 av: "每日 $750<br>每保單年度最多 180 日",
1141 bk: "雜項開支",
1142 bv: "每保單年度$14,000",
1143 ck: "主診醫生巡房費",
1144 cv: "每日 $750<br>每保單年度最多 180 日",
1145 dk: "專科醫生費",
1146 dv: "每保單年度 $4,300",
1147 ek: "深切治療",
1148 ev: "每日 $3,500<br>每保單年度最多 25 日",
1149 fk: "外科醫生費",
1150 fv0: "每項手術，按手術表劃分的手術分類 –",
1151 fv1: "複雜 $50,000",
1152 fv2: "大型 $25,000",
1153 fv3: "中型 $12,500",
1154 fv4: "小型 $5,000",
1155 gk: "麻醉科醫生費",
1156 gv: "外科醫生費的 35%",
1157 hk: "手術室費",
1158 hv: "外科醫生費的 35%",
1159 ik: "訂明診斷成像檢測",
1160 iv: "每保單年度 $20,000<br>設 30%共同保險",
1161 jk: "訂明非手術癌症治療",
1162 jv: "每保單年度 $80,000",
1163 kk: "入院前或出院後／日間手術前後的門診護理",
1164 kv11: "每次$580",
1165 kv12: "每保單年度$3,000",
1166 kv1: "每次$580，每保單年度$3,000",
1167 kv2: "住院／日間手術前最多 1 次門診或急症診症",
1168 kv3: "出院／日間手術後 90 日內最多 3 次跟進門診",
1169 lk: "精神科治療",
1170 lv: "每保單年度 $30,000",
1171 },
1172 guarantee3: {
1173 title: "其他限額",
1174 k1: "保障項目(a) – (l) 的每年保障限額",
1175 v1: "每保單年度$420,000",
1176 k2: "保障項目(a) – (l) 的終身保障限額",
1177 v2: "無",
1178 },
1179 guarantee4: {
1180 title: "其他保障",
1181 k1: "身故恩恤賠償",
1182 v1: "$10,000",
1183 k2: "無索償折扣",
1184 v2: "在連續3個保單年度或以上不曾作出賠償，無索償折扣將適用於緊隨的保單年度之應繳保費。無索償折扣將相當於前一個保單年度所有到期及應繳保費（不包括任何折扣）的百分之十（10%）。",
1185 },
1186 download: {
1187 t1: "下載產品簡介",
1188 t2: "下載標準保費表",
1189 t3: "下載保單契約",
1190 },
1191 submitBtn: "立即投保",
1192 productList: [{
1193 title: "持續儲蓄增長 潛在長線資本增值",
1194 desc: "「平安．傳家福」是一份分紅保險計劃，計劃的保單價值由保證現金價值，復歸紅利及終期紅利(如有) 三個部份組成提供潛在的長線資本增值機會*。",
1195 tips: "*分紅詳情請參閱產品簡介及保單條款"
1196 }, {
1197 title: "靈活運用保單價值 滿足您的財務需求",
1198 desc: "保單中的復歸紅利和相應的終期分紅價值之現金價值可隨時靈活提取，您也可以作部分退保來提取部分保證現金價值，以滿足您的不同現金需求。",
1199 tips: ""
1200 }, {
1201 title: "創建家族財富 福祉代代相傳",
1202 desc: "「平安．傳家福」通過提供“受保人變更”選項來幫助您建立世代相傳的財富。在第一個保單週年日結束後，您可以更改此計劃的受保人（上限為四次），而不會影響計劃價值*。",
1203 tips: "*須乎合管理規則和公司最終批准的前提下"
1204 }, {
1205 title: "身故及意外身故賠償",
1206 desc: "若受保人不幸身故，我們將支付身故賠償予您指定的保單受益人*。",
1207 tips: "*詳情請參閱產品簡介及保單條款"
1208 }, {
1209 title: "保單持有人意外身故賠償",
1210 desc: "倘若保單持有人於保費供款年期結束前不幸因意外身故，我們將支付一筆賠償，金額相等於「平安．傳家福」保單餘下未繳保費之總額。您的家人可考慮以此繳付未來保費，以維持保單生效。",
1211 tips: "*詳情請參閱產品簡介及保單條款"
1212 }, {
1213 title: "自選保費繳付期切合您的理財需要",
1214 desc: "您可以根據自己的財務狀況靈活選擇3年，5年，8年或10年的付款期限。保費金額在整個付款期限內都保證是固定的。",
1215 tips: ""
1216 }, {
1217 title: "彈性賠償支付方式供您選擇",
1218 desc: "在符合我們現行的規則及規例的情況下，您可以選擇一筆過支付，分期支付或混合形式向受益人支付身故賠償和意外身故賠償。",
1219 tips: ""
1220 }, {
1221 title: "豁免醫療核保 投保快捷方便",
1222 desc: "您「平安．傳家福」投保基本計劃的手續簡便，毋須驗身，讓您輕鬆累積財富。只要您於過去24個月內投保指定的保險產品而其年度總保費不超過4,000,000美元，即可免驗身輕鬆投保。",
1223 tips: ""
1224 }]
1087 } 1225 }
1088 } 1226 }
......
...@@ -68,8 +68,8 @@ module.exports = { ...@@ -68,8 +68,8 @@ module.exports = {
68 path: "/vhis/detail" 68 path: "/vhis/detail"
69 }, 69 },
70 { 70 {
71 name: "投资成份保险", 71 name: "平安·传家福",
72 path: "/vhis?p=endowment" 72 path: "/gen/rich"
73 } 73 }
74 ] 74 ]
75 }, 75 },
...@@ -1088,5 +1088,137 @@ module.exports = { ...@@ -1088,5 +1088,137 @@ module.exports = {
1088 desc: "为鼓励您保持健康生活，如您于本计划的连续3个保单年度内，没有任何索偿记录，我们会于下一保单年度退还上一个保单年度保费的百分之十（10%）作为无索偿折扣。", 1088 desc: "为鼓励您保持健康生活，如您于本计划的连续3个保单年度内，没有任何索偿记录，我们会于下一保单年度退还上一个保单年度保费的百分之十（10%）作为无索偿折扣。",
1089 tips: "" 1089 tips: ""
1090 }] 1090 }]
1091 },
1092
1093 genRich: {
1094 expand: "展开",
1095 close: "收起",
1096 bannerTips: {
1097 t1: "【期间限定保费8折优惠】",
1098 t2: "即日起至5月28日或之前投保，只需输入以下优惠码，即享首年保费8折优惠*",
1099 t3: "优惠码：CISAVE20"
1100 },
1101 title: {
1102 t1: "平安 “好e时”自愿医保标准计划",
1103 t2: "平安「好e时」自愿医保标准计划为政府自愿医保认可的标准计划，涵盖重点医疗保障，投保流程简易，全程线上进行。",
1104 t3: "",
1105 t4: "",
1106 },
1107 main: {
1108 t1: "计划特点",
1109 },
1110 guarantee1: {
1111 title: "计划概览",
1112 titleT1: "",
1113 titleT2: "",
1114 titleNum: "",
1115 k1: "投保年龄（受保人的实际年龄)",
1116 v1: "出生后15 天起至80 岁",
1117 k2: "保障期",
1118 v2: "1年，保证续保至100 岁",
1119 k3: "保单货币",
1120 v3: "港元",
1121 k4: "保费缴交方式",
1122 v4: "月缴/年缴",
1123 k5: "合资格客户（受保人）",
1124 v5: "香港居民（持有由香港特区政府签发的有效居民身份证人士）",
1125
1126 t2: "产品性质",
1127 t3: "医疗保障保险计划",
1128 t4: "投保人投保时的年龄",
1129 t5: "15日至80岁",
1130 t6: "保证续保",
1131 t7: "至100岁",
1132 t8: "地域保障范围",
1133 t9: "全球（精神科治疗除外）",
1134 t10: "终生保障限额",
1135 t11: "无",
1136 t12: "每年保障限额",
1137 t13: "每保单年度420,000港元",
1138 },
1139 guarantee2: {
1140 title: "保障内容",
1141 titK: "保障项目",
1142 titV: "赔偿限额（港元）",
1143
1144 ak: "病房及膳食",
1145 av: "每日 $750<br>每保单年度最多 180 日",
1146 bk: "杂项开支",
1147 bv: "每保单年度$14,000",
1148 ck: "主诊医生巡房费",
1149 cv: "每日 $750<br>每保单年度最多 180 日",
1150 dk: "专科医生费",
1151 dv: "每保单年度 $4,300",
1152 ek: "深切治疗",
1153 ev: "每日 $3,500<br>每保单年度最多 25 日",
1154 fk: "外科医生费",
1155 fv0: "每项手术，按手术表划分的手术分类 –",
1156 fv1: "复杂 $50,000",
1157 fv2: "大型 $25,000",
1158 fv3: "中型 $12,500",
1159 fv4: "小型 $5,000",
1160 gk: "麻醉科医生费",
1161 gv: "外科医生费的 35%",
1162 hk: "手术室费",
1163 hv: "外科医生费的 35%",
1164 ik: "订明诊断成像检测",
1165 iv: "每保单年度 $20,000<br>设 30%共同保险",
1166 jk: "订明非手术癌症治疗",
1167 jv: "每保单年度 $80,000",
1168 kk: "入院前或出院后／日间手术前后的门诊护理",
1169 kv11: "每次$580",
1170 kv12: "每保单年度$3,000",
1171 kv1: "每次$580，每保单年度$3,000",
1172 kv2: "住院／日间手术前最多 1 次门诊或急症诊症",
1173 kv3: "出院／日间手术后 90 日内最多 3 次跟进门诊",
1174 lk: "精神科治疗",
1175 lv: "每保单年度 $30,000",
1176 },
1177 guarantee3: {
1178 title: "其他限额",
1179 k1: "保障项目(a) – (l) 的每年保障限额",
1180 v1: "每保单年度$420,000",
1181 k2: "保障项目(a) – (l) 的终身保障限额",
1182 v2: "无",
1183 },
1184 guarantee4: {
1185 title: "其他保障",
1186 k1: "身故恩恤赔偿",
1187 v1: "$10,000",
1188 k2: "无索偿折扣",
1189 v2: "在连续3个保单年度或以上不曾作出赔偿，无索偿折扣将适用于紧随的保单年度之应缴保费。无索偿折扣将相当于前一个保单年度所有到期及应缴保费（不包括任何折扣）的百分之十（10%）。",
1190 },
1191
1192 download: {
1193 t1: "下载产品简介",
1194 t2: "下载标准保费表",
1195 t3: "下载保单契约",
1196 },
1197 submitBtn: "立即投保",
1198 productList: [{
1199 title: "政府认可 安心保障",
1200 desc: "本计划为政府自愿医保认可的标准计划，让您在需要时候可透过住院保险而使用私营医疗服务，并可同时申请享有税务扣减优惠。此计划获食物及卫生局认可，让您倍感安心。如欲了解更多自愿医保详情，可浏览www.vhis.gov.hk。",
1201 tips: ""
1202 }, {
1203 title: "不设终身保障限额",
1204 desc: "本计划不设终身保障限额，每年保障限额高达420,000 港元，并将每年重新设置至原先限额，让您享有重点的医疗保障，减轻因医疗需求而造成的财务负担。",
1205 tips: ""
1206 }, {
1207 title: "一家投保 尽享税务扣减",
1208 desc: "本计划的保费可用作申请税务扣除，若保单持有人为纳税人，便可为自己及任何指明亲属*，即每一名合资格受保人，申请每名受保人每年8,000 港元的扣税额，可申请税务扣减的指明亲属 数目更不设上限。",
1209 tips: "*指明亲属包括纳税人配偶及子女、纳税人或其配偶的祖父母、外祖父母、父母和兄弟姐妹。"
1210 }, {
1211 title: "承保投保前未知的已有疾病",
1212 desc: "现时一般医疗保险均不承保投保前的已有疾病，本计划为您带来多一份安心，承保您在投保时不察觉，及理应不察觉的已有病症。对上述有关病症，此计划会在保单生效首3年的等候期间提供部份保障*，并由第4个保单年度起提供全面保障。",
1213 tips: "*保单生效日后提供部分赔偿(第二年25%、第三年50%)，其后提供全面赔偿(100%) "
1214 }, {
1215 title: "保证续保至100岁",
1216 desc: "本计划接受任何介乎出生后15天至80岁人士投保，您可以一直续保至100岁。计划保证不会因您的索偿记录或身体状况改变而调高续保保费，而您的续保保费将根据当时保单周年日之保费表厘定。",
1217 tips: ""
1218 }, {
1219 title: "无索偿保费折扣",
1220 desc: "为鼓励您保持健康生活，如您于本计划的连续3个保单年度内，没有任何索偿记录，我们会于下一保单年度退还上一个保单年度保费的百分之十（10%）作为无索偿折扣。",
1221 tips: ""
1222 }]
1091 } 1223 }
1092 } 1224 }
......
...@@ -23,6 +23,12 @@ export default { ...@@ -23,6 +23,12 @@ export default {
23 default: "取消", 23 default: "取消",
24 }, 24 },
25 25
26 // 标题
27 title: {
28 type: String,
29 default: "",
30 },
31
26 // 传入数据 32 // 传入数据
27 items: { 33 items: {
28 type: Array, 34 type: Array,
......
...@@ -36,8 +36,14 @@ ...@@ -36,8 +36,14 @@
36 max-width: 900px; 36 max-width: 900px;
37 margin: 0 auto; 37 margin: 0 auto;
38 38
39 .title {
40 padding-top: 32px;
41 font-size: $articleTitleLarge;
42 font-weight: bold;
43 }
44
39 &-content { 45 &-content {
40 padding: 72px 60px; 46 padding: 60px 60px 72px;
41 // max-height: 534px; 47 // max-height: 534px;
42 max-height: 70vh; 48 max-height: 70vh;
43 overflow-y: auto; 49 overflow-y: auto;
......
...@@ -5,10 +5,12 @@ ...@@ -5,10 +5,12 @@
5 <div class="border"> 5 <div class="border">
6 <div class="close" @click="onCloseHandler()"><img src="@/assets/images/clarms/close.png"></div> 6 <div class="close" @click="onCloseHandler()"><img src="@/assets/images/clarms/close.png"></div>
7 <div class="modal"> 7 <div class="modal">
8
9 <div class="title">{{title}}</div>
8 <div class="modal-content"> 10 <div class="modal-content">
9 <div class="check-panel"> 11 <div class="check-panel">
10 <el-checkbox-group v-model="checkList"> 12 <el-checkbox-group v-model="checkList">
11 <el-checkbox v-for="item in items" :key="item.id" :label="item"></el-checkbox> 13 <el-checkbox v-for="item in items" :key="item.id" :label="item.value" >{{item.label}}</el-checkbox>
12 </el-checkbox-group> 14 </el-checkbox-group>
13 </div> 15 </div>
14 </div> 16 </div>
......
...@@ -67,20 +67,6 @@ export default { ...@@ -67,20 +67,6 @@ export default {
67 // 过滤筛选 67 // 过滤筛选
68 onFilterHandler(idx) { 68 onFilterHandler(idx) {
69 this.checkList = [] 69 this.checkList = []
70 this.checkList = [
71 "复选框 A",
72 "复选框 B",
73 "复选框 C",
74 "复选框 D",
75 "复选框 E",
76 "复选框 F",
77 "复选框 G",
78 "复选框 H",
79 "复选框 I",
80 "复选框 J",
81 "复选框 K",
82 "复选框 L",
83 ]
84 switch (idx) { 70 switch (idx) {
85 // 保单号码 71 // 保单号码
86 case 1: 72 case 1:
......
1 /**
2 * 页面描述:VHIS产品页面
3 */
4
5
6 import api from '@/api/api'
7 import {
8 httpGet,
9 httpPost
10 } from '@/api/fetch-api.js'
11 import {
12 mapGetters,
13 mapActions,
14 mapState
15 } from "vuex";
16 var UA = require("ua-device")
17
18 export default {
19 data() {
20 return {
21 key: '',
22 // swiper
23 swiperOption: {
24 navigation: {
25 nextEl: '.swiper-button-next',
26 prevEl: '.swiper-button-prev'
27 },
28 pagination: {
29 el: '.swiper-pagination',
30 clickable: true,
31 },
32 autoplay: {
33 delay: 5000,
34 stopOnLastSlide: false,
35 disableOnInteraction: false
36 },
37 speed: 1000,
38 },
39 bannerList: [],
40 bannerCandidateList: [],
41 // 视频
42 playerOptions: {},
43 bannerTipsVisible: true,
44 productList: [],
45 productShowMore: [],
46 // 全部的信息
47 sourceData: {},
48 bottomBtnType: "",
49 bottomBtnLink: ""
50 }
51 },
52 components: {},
53 computed: {
54 ...mapState({
55 isSmallScreen: state => state.isSmallScreen,
56 isMobile: state => state.isMobile
57 }),
58 locale() {
59 return this.$i18n.locale || 'tc';
60 },
61 i18n() {
62 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
63 },
64 player() {
65 return this.$refs.videoPlayer.player
66 },
67 },
68 methods: {
69 onHideBannerTipsHandler() {
70 this.bannerTipsVisible = false;
71 },
72 bottomBtnHandle() {
73 this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink);
74 },
75 btnNavigateTo(type, link) {
76 switch (type) {
77 case "none":
78 break;
79 case "news":
80 this.$router.push({
81 path: "/news/detail",
82 query: {
83 c: link
84 }
85 });
86 break;
87 case "product":
88 break;
89 case "vhis":
90 this.$router.push({
91 path: "/vhis",
92 query: {
93 p: link
94 }
95 });
96 break;
97 default:
98 location.href = link;
99 break;
100 }
101 },
102 // 初始化视频组件
103 refreshVideoPlayer(videoUrl, posterUrl) {
104 let playerOptions = {
105 aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
106 autoplay: false, //如果true,浏览器准备好时开始回放。
107 muted: true, // 默认情况下将会消除任何音频。
108 language: 'en',
109 // playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
110 sources: [{
111 type: "video/mp4",
112 src: videoUrl,
113 // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
114 }],
115 poster: posterUrl,
116 controlBar: {
117 timeDivider: true,
118 durationDisplay: true,
119 remainingTimeDisplay: false,
120 fullscreenToggle: true //全屏按钮
121 }
122 }
123 let output = new UA(navigator.userAgent);
124 let deviceType = output.device.type;
125 let isMobile = deviceType == "mobile";
126 // if (this.isSmallScreen) {
127 if (isMobile) {
128 playerOptions.aspectRatio = "16:9";
129 }
130 this.playerOptions = playerOptions;
131 },
132 initProduct() {
133 let productList = this.i18n.genRich.productList;
134 if (this.productList && this.productList.length > 0) {
135 for (let index = 0; index < productList.length; index++) {
136 if (this.productList.length > index) {
137 productList[index].showMore = this.productList[index].showMore;
138 } else {
139 productList[index].showMore = false;
140 }
141 }
142 } else {
143 productList.forEach(element => {
144 element.showMore = false;
145 });
146 }
147 this.productList = productList;
148 },
149 onShowMoreHandler(idx) {
150 let productList = this.productList;
151 let curProduct = productList[idx];
152 if (curProduct) {
153 curProduct.showMore = !curProduct.showMore;
154 }
155 this.productList = productList;
156 },
157 initData() {
158 this.initProduct();
159 let targetData = null;
160 switch (this.locale) {
161 case "zh":
162 targetData = this.sourceData.confCn;
163 break;
164 case "en":
165 targetData = this.sourceData.confEn;
166 break;
167 case "tc":
168 targetData = this.sourceData.confTc;
169 break;
170 }
171 if (targetData) {
172 let bannerList = [{
173 pcBannerUrl: targetData.pcBannerUrl,
174 mobileBannerUrl: targetData.mobileBannerUrl,
175 btns: targetData.btnDescribe
176 }];
177 this.$set(this, 'bannerList', bannerList);
178
179 this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster);
180 // 设置标题
181 // document.title = targetData.productName;
182
183 this.bottomBtnType = targetData.bottomUrlType;
184 this.bottomBtnLink = targetData.bottomUrlLink;
185 }
186 },
187 initActivity() {
188 let d = localStorage.getItem("voluntaryInfo");
189 if (d) {
190 try {
191 this.sourceData = JSON.parse(d);
192 this.initData();
193 } catch (e) { }
194 }
195 }
196 },
197 mounted() {
198 this.initActivity();
199 },
200 created() {
201 httpGet({
202 url: api.productInfo,
203 data: {
204 code: "voluntary"
205 }
206 }).then(res => {
207 if (res) {
208 localStorage.setItem("voluntaryInfo", JSON.stringify(res));
209 this.sourceData = res;
210 }
211 this.initData();
212 });
213 this.$root.eventBus.$on("langChange", () => {
214 try {
215 this.initData();
216 } catch (e) { }
217 });
218 }
219 }
1 @import '@/styles/_support.scss';
2
3 $borderSize: 6px;
4
5 .page {
6 color: $cFontGray2;
7 }
8
9 .content {
10 padding-bottom: 27px;
11 }
12
13 .box {
14 position: relative;
15 // margin-top: $marginMedium;
16 }
17
18 // banner 轮播
19 .banner-contaner {
20 width: 100%;
21 height: 502px;
22 margin: 0 auto;
23 position: relative;
24 z-index: 1;
25 overflow: hidden;
26 }
27
28 // PC轮播
29 .banner-pc {
30 display: block;
31 position: absolute;
32 z-index: 1;
33 left: 50%;
34 margin-left: -960px;
35 top: 0;
36 width: 1920px;
37 height: 100%;
38 overflow: hidden;
39 // height: 791px;
40
41 .banner-img {
42 width: 100%;
43 height: 100%;
44 }
45
46 .btn-wrap {
47 position: absolute;
48 z-index: 2;
49 // 两个banner图按钮位置不一样，和原先约定的按钮位置固定不一致
50 // 如要调整位置，请调整top,right。如需要右对齐请使用right
51 // 已用padding适应文本过长的情况(英文等);
52 // top: 272px;
53 // left: 1228px;
54 // top: 310px;
55 top: 309px;
56 left: 466px;
57 display: flex;
58
59 .banner-btn {
60 @extend .pointer;
61 @extend .bb;
62 @include btc4(300px, 50px, $fontSizeTitle);
63 font-size: 22px;
64 width: auto;
65 padding: 0 24px;
66 min-width: 288px;
67 margin-left: 12px;
68 background: url("~@assets/images/vhis/vhis-btn.png");
69
70 }
71
72 .banner-btn:lang(zh) {
73 letter-spacing: 1.5px;
74 }
75 }
76 }
77
78 // 移动端轮播
79 .banner-mobile {
80 display: none;
81
82 .banner-img {
83 width: 100%;
84 }
85
86 .btn-wrap {
87 position: absolute;
88 z-index: 1;
89 top: 87%;
90 left: 0;
91 right: 0;
92 margin: 0 auto;
93 display: flex;
94 justify-content: center;
95
96 .banner-btn {
97 @extend .pointer;
98 padding: 0 12px;
99 color: $cOrange2;
100 }
101 }
102 }
103
104 .banner-tips {
105
106 position: absolute;
107 z-index: 2;
108 width: 422px;
109 height: 202px;
110 right: 50px;
111 top: 50px;
112 padding: 2px;
113 // border-radius: $borderSize;
114 background-image: url('~@assets/images/vhis/vhis-tips-bg.png');
115 @extend .bis;
116
117 .close {
118 cursor: pointer;
119 position: absolute;
120 right: 12px;
121 top: 12px;
122 }
123
124 .cont {
125 @extend .bb;
126 padding: 20px;
127 position: relative;
128 width: 100%;
129 height: 100%;
130 border-radius: $borderSize;
131
132 .tit {
133 display: flex;
134 align-items: center;
135 color: $cOrange2;
136 font-size: 28px;
137 font-weight: bold;
138 }
139
140 .desc {
141 margin: 12px auto 0;
142 font-size: 18px;
143 padding: 0 20px;
144
145 .t1 {
146 line-height: 1.5;
147 }
148
149 .t2 {
150 font-size: 22px;
151 margin-top: 6px;
152 font-weight: bold;
153 color: $cOrange2;
154 }
155
156 }
157 }
158 }
159
160 // 标题
161 .title {
162 @extend .bb;
163 padding: 42px 0;
164 background-color: #fff1ed;
165 text-align: center;
166 font-size: $fontSize;
167
168 .tt {}
169
170 .t1 {
171 color: $cOrange2;
172 font-weight: bold;
173 font-size: 34px;
174 }
175
176 .t1:lang(zh) {
177 letter-spacing: 6px;
178 }
179
180 .t2 {
181 font-size: 24px;
182 line-height: 1.39;
183 // margin-top: 36px;
184 max-width: 780px;
185 margin: 36px auto 0;
186 }
187
188 .t2:lang(zh) {
189 letter-spacing: 2px;
190 }
191 }
192
193 // 产品
194 .product {
195 margin: 92px auto 0;
196 text-align: center;
197
198 .tit {
199 color: $cOrange2;
200 font-size: 36px;
201 font-weight: bold;
202 }
203
204 .tit:lang(zh) {
205 letter-spacing: 2.5px;
206 }
207
208 .prod {
209 margin: 24px auto 0;
210 color: $cOrange2;
211 display: flex;
212 justify-content: space-between;
213 flex-wrap: wrap;
214
215
216 &-item {
217 @extend .fcc;
218 width: 582px;
219 min-height: 250px;
220 margin-bottom: 25px;
221 @include border-tans();
222
223 .cont {
224 display: flex;
225 text-align: left;
226 width: 100%;
227 height: 100%;
228
229 .icon-wrap {
230 @extend .bb;
231 display: flex;
232 justify-content: center;
233 align-items: flex-start;
234 padding-top: 70px;
235 // align-items: center;
236 width: 202px;
237
238 img {
239 width: 50%;
240 }
241 }
242
243 .detail {
244 position: relative;
245 padding: 44px 20px 25px 0;
246 flex: 1;
247 flex-grow: 1;
248 margin-left: -16px;
249
250 .t1 {
251 font-size: 22px;
252 font-weight: bold;
253 }
254
255 .t1:lang(zh) {
256 letter-spacing: 2px;
257 }
258
259 .more {
260 display: flex;
261 margin-top: 6px;
262 // margin: 12px auto 0;
263
264 &-icon-wrap {
265 @extend .fcc;
266 cursor: pointer;
267 // margin: 6px 6px 0 0;
268 margin-right: 6px;
269 }
270
271 .c1 {
272 font-size: 18px;
273 }
274
275 .c1:lang(zh) {
276 letter-spacing: 1.2px;
277 }
278 }
279
280 .desc {
281 margin-top: 6px;
282 font-size: 18px;
283 font-weight: 300;
284 @extend .text-jtf;
285 }
286
287 .tips {
288 font-style: italic;
289 margin-top: 6px;
290 }
291 }
292 }
293 }
294 }
295 }
296
297 // 视频
298 .video {
299 // @extend .fcc;
300 position: relative;
301 margin: 72px auto 0;
302 }
303
304 // 保障
305 .guarantee {
306 margin: 90px auto 0;
307 font-size: 22px;
308
309 .tit-wrap {
310 display: flex;
311 justify-content: center;
312 align-items: flex-end;
313 flex-wrap: wrap;
314 }
315
316 .tit {
317 text-align: center;
318 color: $cOrange2;
319 font-size: 36px;
320 font-weight: bold;
321 }
322
323 .tit:lang(zh) {
324 letter-spacing: 1.8px;
325 }
326
327 .tit-s {
328 font-size: $fontSize-M2;
329 color: $cFontGray2;
330
331 span {
332 color: $cOrange2;
333 }
334
335 }
336
337 .table {
338 max-width: 1200px;
339 margin: 8px auto 0;
340
341 &-border {
342 width: 100%;
343 @include border-tans(0px, 1.5px);
344 }
345
346 .table-item {
347 display: flex;
348 border: solid 1px #e4e4e5;
349 border-top: none;
350
351 .tt {
352 @extend .bb;
353 padding: 24px 24px 24px 0;
354 color: $cFontGray3;
355 }
356
357 .tt:lang(zh) {
358 letter-spacing: 1.12px;
359 }
360
361 .tt2 {
362 display: flex;
363 }
364
365 .ff {
366 width: 50%;
367
368 .nn {
369 .n1 {
370 background-color: wheat;
371 }
372 .n2 {}
373 }
374 }
375
376
377 .label {
378 padding-left: 28px;
379 border-right: solid 1px #e4e4e5;
380 display: flex;
381 align-items: center;
382 width: 30%;
383 }
384
385 .val {
386 padding-left: 100px;
387 width: 70%;
388 }
389 }
390
391 .table-item:nth-child(even) {
392 background-color: #fef1ed;
393 }
394
395 .table-item2 {
396 min-height: 136px;
397 }
398 }
399
400 .table2 {
401 margin: 50px auto 0;
402 text-align: left;
403
404 .table-item {
405 display: flex;
406 border: solid 1px #e4e4e5;
407
408 .tt {
409 @extend .bb;
410 width: 50%;
411
412 padding: 50px 60px 26px 100px;
413 color: $cFontGray3;
414
415 .t1 {
416 color: $cOrange2;
417 }
418 }
419
420 .tt:lang(zh) {
421 letter-spacing: 1.12px;
422 }
423
424 .tt2 {
425 padding: 50px 64px 26px 50px;
426 padding: 48px;
427 }
428
429 .label {
430 border-right: solid 1px #e4e4e5;
431 line-height: 1.4;
432
433 ul {
434 list-style-type: none;
435 }
436
437 li {
438 @extend .bb;
439 position: relative;
440 background-image: url('~@assets/images/vhis/vhis-tick.png');
441 background-repeat: no-repeat;
442 background-position: 0 5px;
443 padding-left: 40px;
444 margin: 24px 0;
445
446 .small {
447 vertical-align: top;
448 margin-top: 4px;
449 }
450 }
451 }
452
453 .label2 {
454 li {
455 background-image: url('~@assets/images/vhis/vhis-cross.png');
456 }
457
458 .t1 {
459 display: flex;
460
461 .small {
462 vertical-align: top;
463 margin-top: 4px;
464 }
465 }
466 }
467
468 .val {}
469 }
470 }
471 }
472
473 // 保障内容
474 .guarantee2 {
475 $cellPadding: 6px;
476
477 .tit {}
478
479 .container {
480 display: flex;
481 margin: 0 auto 0;
482
483 .table {
484 margin-top: 48px;
485 width: 582px;
486
487 .smal {
488 font-size: 18px;
489 }
490
491 .titl {
492 position: relative;
493 display: flex;
494 margin-bottom: 8px;
495
496 &-item {
497 width: 50%;
498 text-align: center;
499 color: $cOrange2;
500 font-size: 22px;
501 }
502 }
503
504 &-item {
505 min-height: 136px;
506
507 .label {
508 @extend .bb;
509 @extend .fcc;
510 padding-left: 24px;
511 padding-right: 2px;
512 justify-content: flex-start;
513
514 .nn {}
515
516 .n1 {
517 text-align: left;
518 margin-top: 0px;
519 margin-right: 4px;
520 color: $cOrange2;
521 width: 32px;
522 // background-color: wheat;
523 }
524
525 .n2 {
526 flex: 1;
527 }
528 }
529
530 .label2 {
531 display: flex;
532 align-items: flex-start;
533 padding: 40px 24px 0;
534 }
535
536 .val {
537 @extend .fcc;
538 flex-wrap: wrap;
539 padding: $cellPadding;
540 text-align: center;
541 flex: 1;
542 min-height: 81px;
543
544 &-item {
545 @extend .bb;
546 width: 100%;
547 min-height: 81px;
548 // padding: 0 4px;
549 }
550 }
551
552 // .label:lang(zh) {
553 // line-height: 1.5;
554 // }
555
556 // .val:lang(zh) {
557 // line-height: 1.5;
558 // }
559 }
560
561 &-item-4 {
562
563 .val {
564 align-items: flex-start;
565 text-align: center;
566 line-height: 1.5;
567 padding: 0;
568
569 &-item {
570 @extend .bb;
571 @extend .fcc;
572 border-bottom: solid 1px #e4e4e5;
573 padding: $cellPadding;
574 }
575
576 &-item:last-child {
577 border-bottom: none;
578 }
579 }
580 }
581
582 &-item-3 {
583
584 .val {
585 align-items: flex-start;
586 text-align: center;
587 line-height: 1.5;
588 padding: 0;
589
590 &-item {
591 @extend .bb;
592 @extend .fcc;
593 min-height: 136px;
594 border-bottom: solid 1px #e4e4e5;
595 padding: $cellPadding;
596
597 .thr {
598 @extend .bb;
599 @extend .fcc;
600 width: 50%;
601 height: 100%;
602 min-height: 136px;
603 border-right: solid 1px #e4e4e5;
604 padding: $cellPadding;
605 }
606
607 .thr:last-child {
608 border-right: none;
609 }
610 }
611
612 &-item-thr {
613 padding: 0;
614 }
615
616 &-item:last-child {
617 border-bottom: none;
618 }
619 }
620 }
621
622 }
623 }
624 }
625
626 // 下载
627 .download {
628 margin: 100px auto 0;
629 text-align: center;
630 color: $cOrange2;
631
632 &-item {
633 @extend .bb;
634 @extend .fcc;
635 margin: 0 auto 24px;
636 max-width: 602px;
637 height: 67px;
638 line-height: 67px;
639 cursor: pointer;
640 @include border-tans($borderSize);
641
642 .cont {
643 @extend .bb;
644 display: flex;
645 align-items: center;
646 padding-left: 178px;
647
648 width: 100%;
649 height: 100%;
650 background-color: #ffffff;
651 font-size: 22px;
652 font-weight: bold;
653 border-radius: $borderSize;
654
655 .icon {
656 height: 47px;
657 margin-right: 48px;
658 }
659
660 }
661 }
662 }
663
664 // 提交订单
665 .submit-btn {
666 margin: 50px auto 100px;
667 @extend .pointer;
668 @extend .bb;
669 @include btc4(300px, 50px, 22px);
670 font-weight: bold;
671 }
672
673
674 .small {
675 font-size: 14px;
676 display: inline-block;
677 vertical-align: text-top;
678 }
679
680
681 // banner点点
682 .swiper-button-prev {
683 background-image: url('~@/assets/images/common/button-prev.png');
684 left: 360px;
685 }
686
687 .swiper-button-next {
688 background-image: url('~@/assets/images/common/button-next.png');
689 right: 360px;
690 }
691
692 .swiper-container {
693 height: 100%;
694 }
695
696 .swiper-pagination-fraction,
697 .swiper-pagination-custom,
698 .swiper-container-horizontal>.swiper-pagination-bullets {
699 bottom: 48px;
700 }
701
702 .swiper-pagination-bullet {
703 width: 12px;
704 height: 12px;
705 background-color: #dcdddd;
706 }
707
708 .swiper-pagination-bullet-active {
709 width: 12px;
710 height: 12px;
711 background-color: $cOrange2;
712 }
713
714 .vjs-custom-skin {
715 width: 100%;
716 }
717
718
719 @media (max-width: 1200px) {
720 .content {
721 @include content-percent();
722 padding-bottom: $marginMedium-M;
723
724 .vjs-custom-skin {
725 // width: 100%;
726 }
727
728 .product {
729 .prod {
730 &-item {
731 width: 45vw;
732 }
733 }
734 }
735
736 .guarantee2 {
737 .container {
738 .table {
739 width: 48%;
740 }
741 }
742 }
743 }
744
745 }
746
747 @media (max-width: 768px) {
748
749 .banner-tips {
750 display: none;
751 }
752
753 .title {
754 padding: 24px 0;
755
756 .title-wrap {
757 @include content-percent();
758 }
759
760 .t1 {
761 font-size: $fontSizeTitle-M2;
762 }
763
764 .t2 {
765 font-size: $fontSize-M2;
766 margin: 18px auto 0;
767 }
768 }
769
770 .content {
771
772 // 产品
773 .product {
774 margin: 48px auto 0;
775
776 .tit {
777 font-size: $fontSizeTitle-M2;
778 }
779
780 .prod {
781 justify-content: center;
782
783 &-item {
784 width: 100%;
785 min-height: 132px;
786
787 .icon-wrap {
788 width: 30%;
789 padding-top: 22px;
790
791 img {
792 width: 50%;
793 }
794 }
795
796 .detail {
797 padding: 22px 10px 12px 0;
798 margin-left: 0;
799 font-size: $fontSize-M2;
800
801 .more {
802 .c1 {
803 font-size: $fontSizeSmall-M2;
804 }
805 }
806
807 .desc {
808 text-align: left;
809 }
810 }
811 }
812 }
813 }
814
815 .video {
816 margin: 32px auto 0;
817 }
818
819 // 保障
820 .guarantee {
821 margin: 32px auto 0;
822
823
824 .tit {
825 font-size: $fontSizeTitle-M2;
826 }
827
828 .tit-s {
829 font-size: $fontSizeSmall-M2;
830 }
831
832 .table {
833 font-size: $fontSize-M2;
834
835
836 &-item {
837 display: flex;
838 flex-wrap: nowrap;
839
840 .tt {
841 // width: 100%;
842 }
843
844 .label {
845 padding: 12px;
846 }
847
848 .val {
849 padding: 12px;
850 }
851 }
852 }
853 }
854
855 .guarantee2 {
856 .tit {
857 font-size: $fontSizeTitle-M2;
858 }
859
860 .container {
861 flex-wrap: wrap;
862
863 .table {
864 margin-top: 24px;
865 font-size: $fontSize-M2;
866 width: auto;
867
868 .smal {
869 font-size: $fontSizeSmall-M2;
870 }
871
872 &-item {
873 flex-wrap: nowrap;
874 min-height: auto;
875
876 .val {
877 padding: 12px;
878 }
879 }
880
881 &-item-3 {
882 .val {
883 padding: 0;
884 }
885 }
886
887 &-item-4 {
888 .val {
889 padding: 0;
890 }
891 }
892
893 .titl {
894
895 &-item {
896 font-size: $fontSize-M2;
897
898
899 }
900 }
901 }
902
903
904 }
905 }
906
907
908
909 // 下载
910 .download {
911 margin: 48px auto 0;
912
913 &-item {
914 .cont {
915 padding: 0;
916 font-size: $fontSize-M2;
917 }
918
919 .icon-wrap {
920 width: 40%;
921 display: flex;
922 justify-content: flex-end;
923 }
924
925 .icon {
926 margin-right: 24px;
927 }
928
929 }
930 }
931 }
932 }
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="banner-tips">
38 <div class="cont">
39 <div class="tit">
40 <img class="icon" src="@/assets/images/vhis/hot-deal-icon.png"> {{$t('genRich.bannerTips.t1')}}
41 </div>
42 <div class="desc">
43 <div class="t1"> {{$t('genRich.bannerTips.t2')}}</div>
44 <div class="t2"> {{$t('genRich.bannerTips.t3')}}</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="title-wrap">
53 <div class="tt t1">{{$t('genRich.title.t1')}}</div>
54 <div class="tt t2">
55 {{$t('genRich.title.t2')}}{{$t('genRich.title.t3')}}
56 </div>
57 </div>
58
59 </div>
60
61 <div class="content">
62
63 <!-- 产品特点 -->
64 <div class="box product">
65 <div class="tit">{{$t('genRich.main.t1')}}</div>
66 <div class="prod">
67 <div v-for="(item,index) in productList" :key="item.id" class=" prod-item">
68 <div class="cont">
69 <div class="icon-wrap">
70 <img :src="require('@/assets/images/gen-rich/gen-rich-icon'+(index+1)+'.png')">
71 </div>
72 <div class="detail">
73 <div class="t1" v-html="item.title">{{item.title}}</div>
74 <div class="more pointer" @click="onShowMoreHandler(index)">
75 <div class="more-icon-wrap">
76 <img v-if="item.showMore" src="@/assets/images/vhis/vhis-mine.png">
77 <img v-else src="@/assets/images/vhis/vhis-plus.png">
78 </div>
79 <div class="c1">{{item.showMore ? $t('genRich.close') : $t('genRich.expand')}}</div>
80 </div>
81 <div v-if="item.showMore" class="desc">
82 {{item.desc}}
83 <div class="tips">{{item.tips}}</div>
84 </div>
85 </div>
86 </div>
87 </div>
88 </div>
89 </div>
90
91 <!-- 视频 -->
92 <div class="box video">
93 <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true">
94 </video-player>
95 </div>
96
97 <!-- 计划总览 -->
98 <div class="guarantee">
99 <div class="tit-wrap">
100 <div class="tit">{{$t('genRich.guarantee1.title')}}</div>
101 <div class="tit-s">
102 {{$t('genRich.guarantee1.titleT1')}}
103 <span>{{$t('genRich.guarantee1.titleNum')}}</span>
104 {{$t('genRich.guarantee1.titleT2')}}
105 </div>
106 </div>
107
108 <div class="container">
109 <div class="table">
110 <div class="border2 table-border"></div>
111 <div class="table-item table-item2">
112 <div class="tt label">{{$t('genRich.guarantee1.k1')}}</div>
113 <!-- <div class="tt val">{{$t('genRich.guarantee1.v1')}}</div> -->
114 <div class="tt tt2 val">
115 <div class="ff">
116 <div class="nn nn1">1</div>
117 <div class="nn nn2">aaaa</div>
118 </div>
119 <div class="ff">
120 <div class="nn nn1">2</div>
121 <div class="nn nn2">bbbb</div>
122 </div>
123 </div>
124 </div>
125 <div class="table-item">
126 <div class="tt label">{{$t('genRich.guarantee1.k2')}}</div>
127 <div class="tt val">{{$t('genRich.guarantee1.v2')}}</div>
128 </div>
129 <div class="table-item">
130 <div class="tt label">{{$t('genRich.guarantee1.k3')}}</div>
131 <div class="tt val">{{$t('genRich.guarantee1.v3')}}</div>
132 </div>
133 <div class="table-item">
134 <div class="tt label">{{$t('genRich.guarantee1.k4')}}</div>
135 <div class="tt val">{{$t('genRich.guarantee1.v4')}}</div>
136 </div>
137 <div class="table-item">
138 <div class="tt label">{{$t('genRich.guarantee1.k5')}}</div>
139 <div class="tt val">{{$t('genRich.guarantee1.v5')}}</div>
140 </div>
141 </div>
142 </div>
143
144 </div>
145
146 <!-- 保障内容 -->
147 <div class="guarantee guarantee2">
148 <div class="tit">{{$t('genRich.guarantee2.title')}}</div>
149
150 <div class="container">
151 <!-- 左表 -->
152 <div class="table">
153 <div class="titl">
154 <div class="titl-item">{{$t('genRich.guarantee2.titK')}}
155 <span class="small">(1)</span>
156 </div>
157 <div class="titl-item">{{$t('genRich.guarantee2.titV')}}</div>
158 </div>
159 <div class="border2 table-border"></div>
160 <div class="table-item">
161 <div class="tt label">
162 <div class="fl">
163 <div class="nn n1">(a)</div>
164 <div v-html="$t('genRich.guarantee2.ak')" class="nn n2">{{$t('genRich.guarantee2.ak')}}</div>
165 </div>
166 </div>
167 <div v-html="$t('genRich.guarantee2.av')" class="tt val">{{$t('genRich.guarantee2.av')}}</div>
168 </div>
169 <div class="table-item">
170 <div class="tt label">
171 <div class="fl">
172 <div class="nn n1">(b)</div>
173 <div v-html="$t('genRich.guarantee2.bk')" class="nn n2">{{$t('genRich.guarantee2.bk')}}</div>
174 </div>
175 </div>
176 <div v-html="$t('genRich.guarantee2.bv')" class="tt val">{{$t('genRich.guarantee2.bv')}}</div>
177 </div>
178 <div class="table-item">
179 <div class="tt label">
180 <div class="fl">
181 <div class="nn n1">(c)</div>
182 <div v-html="$t('genRich.guarantee2.ck')" class="nn n2">{{$t('genRich.guarantee2.ck')}}</div>
183 </div>
184 </div>
185 <div v-html="$t('genRich.guarantee2.cv')" class="tt val">{{$t('genRich.guarantee2.cv')}}</div>
186 </div>
187 <div class="table-item">
188 <div class="tt label">
189 <div class="fl">
190 <div class="nn n1">(d)</div>
191 <div class="nn n2">
192 <span v-html="$t('genRich.guarantee2.dk')">{{$t('genRich.guarantee2.dk')}}</span>
193 <span class="small">(2)</span>
194 </div>
195 </div>
196 </div>
197 <div v-html="$t('genRich.guarantee2.dv')" class="tt val">{{$t('genRich.guarantee2.dv')}}</div>
198 </div>
199 <div class="table-item">
200 <div class="tt label">
201 <div class="fl">
202 <div class="nn n1">(e)</div>
203 <div v-html="$t('genRich.guarantee2.ek')" class="nn n2">{{$t('genRich.guarantee2.ek')}}</div>
204 </div>
205 </div>
206 <div v-html="$t('genRich.guarantee2.ev')" class="tt val">{{$t('genRich.guarantee2.ev')}}</div>
207 </div>
208 <!-- 4分 -->
209 <div class="table-item table-item-4">
210 <div class="tt label label2">
211 <div class="fl">
212 <div class="nn n1">(f)</div>
213 <div v-html="$t('genRich.guarantee2.fk')" class="nn n2">{{$t('genRich.guarantee2.fk')}}</div>
214 </div>
215 </div>
216 <div class="tt val">
217 <div class="val-item">
218 {{$t('genRich.guarantee2.fv0')}}
219 </div>
220 <div class="val-item">
221 {{$t('genRich.guarantee2.fv1')}}
222 </div>
223 <div class="val-item">
224 {{$t('genRich.guarantee2.fv2')}}
225 </div>
226 <div class="val-item">
227 {{$t('genRich.guarantee2.fv3')}}
228 </div>
229 <div class="val-item">
230 {{$t('genRich.guarantee2.fv4')}}
231 </div>
232 </div>
233 </div>
234 </div>
235
236 <!-- 右表 -->
237 <div class="table">
238 <div class="titl">
239 <div class="titl-item">{{$t('genRich.guarantee2.titK')}}
240 <span class="small">(1)</span>
241 </div>
242 <div class="titl-item">{{$t('genRich.guarantee2.titV')}}</div>
243 </div>
244 <div class="border2 table-border"></div>
245 <div class="table-item">
246 <div class="tt label">
247 <div class="fl">
248 <div class="nn n1">(g)</div>
249 <div v-html="$t('genRich.guarantee2.gk')" class="nn n2">{{$t('genRich.guarantee2.gk')}}</div>
250 </div>
251 </div>
252 <div class="tt val">
253 <div>
254 <span v-html="$t('genRich.guarantee2.gv')">{{$t('genRich.guarantee2.gv')}}</span>
255 <span class="small">(5)</span>
256 </div>
257 </div>
258 </div>
259 <div class="table-item">
260 <div class="tt label">
261 <div class="fl">
262 <div class="nn n1">(h)</div>
263 <div v-html="$t('genRich.guarantee2.hk')" class="nn n2">{{$t('genRich.guarantee2.hk')}}</div>
264 </div>
265 </div>
266 <div class="tt val">
267 <div>
268 <span v-html="$t('genRich.guarantee2.hv')">{{$t('genRich.guarantee2.hv')}}</span>
269 <span class="small">(5)</span>
270 </div>
271 </div>
272 </div>
273 <div class="table-item">
274 <div class="tt label ">
275 <div class="fl">
276 <div class="nn n1">(i)</div>
277 <div class="nn n2">
278 <span v-html="$t('genRich.guarantee2.ik')">{{$t('genRich.guarantee2.ik')}}</span>
279 <span class="small">(2)(3)</span>
280 </div>
281 </div>
282 </div>
283 <div v-html="$t('genRich.guarantee2.iv')" class="tt val">{{$t('genRich.guarantee2.iv')}}</div>
284 </div>
285 <div class="table-item">
286 <div class="tt label ">
287 <div class="fl">
288 <div class="nn n1">(j)</div>
289 <div class="nn n2">
290 <span v-html="$t('genRich.guarantee2.jk')">{{$t('genRich.guarantee2.jk')}}</span>
291 <span class="small">(4)</span>
292 </div>
293 </div>
294 </div>
295 <div v-html="$t('genRich.guarantee2.jv')" class="tt val">{{$t('genRich.guarantee2.jv')}}</div>
296 </div>
297 <div class="table-item table-item-3">
298 <div class="tt label label2">
299 <div class="fl">
300 <div class="nn n1">(k)</div>
301 <div class="nn n2">
302 <span v-html="$t('genRich.guarantee2.kk')">{{$t('genRich.guarantee2.kk')}}</span>
303 <span class="small">(2)</span>
304 </div>
305 </div>
306 </div>
307 <div class="tt val">
308 <div class="val-item val-item-thr">
309 <div v-html="$t('genRich.guarantee2.kv11')" class="thr">{{$t('genRich.guarantee2.kv11')}}</div>
310 <div v-html="$t('genRich.guarantee2.kv12')" class="thr">{{$t('genRich.guarantee2.kv12')}}</div>
311 </div>
312 <div v-html="$t('genRich.guarantee2.kv2')" class="val-item">
313 {{$t('genRich.guarantee2.kv2')}}
314 </div>
315 <div v-html="$t('genRich.guarantee2.kv3')" class="val-item">
316 {{$t('genRich.guarantee2.kv3')}}
317 </div>
318 </div>
319 </div>
320 <!-- 4分 -->
321 <div class="table-item table-item">
322 <div class="tt label">
323 <div class="fl">
324 <div class="nn n1">(l)</div>
325 <div v-html="$t('genRich.guarantee2.lk')" class="nn n2">{{$t('genRich.guarantee2.lk')}}</div>
326 </div>
327 </div>
328 <div v-html="$t('genRich.guarantee2.lv')" class="tt val">{{$t('genRich.guarantee2.lv')}}</div>
329 </div>
330 </div>
331 </div>
332
333 </div>
334
335 <!-- 其他限额 -->
336 <div class="guarantee">
337 <div class="tit">{{$t('genRich.guarantee3.title')}}</div>
338
339 <div class="container">
340 <div class="table">
341 <div class="border2 table-border"></div>
342 <div class="table-item">
343 <div class="tt label">{{$t('genRich.guarantee3.k1')}}</div>
344 <div class="tt val">{{$t('genRich.guarantee3.v1')}}</div>
345 </div>
346 <div class="table-item">
347 <div class="tt label">{{$t('genRich.guarantee3.k2')}}</div>
348 <div class="tt val">{{$t('genRich.guarantee3.v2')}}</div>
349 </div>
350 </div>
351 </div>
352 </div>
353
354 <!-- 其他保障 -->
355 <div class="guarantee">
356 <div class="tit">{{$t('genRich.guarantee4.title')}}</div>
357
358 <div class="container">
359 <div class="table">
360 <div class="border2 table-border"></div>
361 <div class="table-item">
362 <div class="tt label">{{$t('genRich.guarantee4.k1')}}</div>
363 <div class="tt val">{{$t('genRich.guarantee4.v1')}}</div>
364 </div>
365 <div class="table-item">
366 <div class="tt label">{{$t('genRich.guarantee4.k2')}}</div>
367 <div class="tt val">{{$t('genRich.guarantee4.v2')}}</div>
368 </div>
369 </div>
370 </div>
371 </div>
372
373 <!-- 下载 -->
374 <div class="download">
375 <div class="border2 download-item">
376 <div class="cont">
377 <div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> {{$t('genRich.download.t1')}}
378 </div>
379 </div>
380 <div class="border2 download-item">
381 <div class="cont">
382 <div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> {{$t('genRich.download.t2')}}
383 </div>
384 </div>
385 <div class="border2 download-item">
386 <div class="cont">
387 <div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> {{$t('genRich.download.t3')}}
388 </div>
389 </div>
390 </div>
391
392 <!-- 立即投保 -->
393 <div class="submit-btn" @click="bottomBtnHandle()">
394 {{$t('genRich.submitBtn')}}
395 </div>
396
397 </div>
398 </div>
399
400 </template>
401
402 <script src="./gen-rich.js"></script>
403 <style lang="scss" scoped>
404 @import "./gen-rich.scss";
405 </style>
...@@ -175,11 +175,10 @@ export default { ...@@ -175,11 +175,10 @@ export default {
175 btns: targetData.btnDescribe 175 btns: targetData.btnDescribe
176 }]; 176 }];
177 this.$set(this, 'bannerList', bannerList); 177 this.$set(this, 'bannerList', bannerList);
178 console.log(this.bannerList);
179 178
180 this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster); 179 this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster);
181 // 设置标题 180 // 设置标题
182 document.title = targetData.productName; 181 // document.title = targetData.productName;
183 182
184 this.bottomBtnType = targetData.bottomUrlType; 183 this.bottomBtnType = targetData.bottomUrlType;
185 this.bottomBtnLink = targetData.bottomUrlLink; 184 this.bottomBtnLink = targetData.bottomUrlLink;
......
...@@ -278,6 +278,15 @@ const routes = [ ...@@ -278,6 +278,15 @@ const routes = [
278 } 278 }
279 }, 279 },
280 { 280 {
281 path: '/gen/rich',
282 name: 'genRich',
283 component: () => import('./pages/gen-rich/gen-rich.vue'),
284 meta: {
285 title: '平安人寿香港'
286 }
287 },
288
289 {
281 path: '/clarms', 290 path: '/clarms',
282 name: 'clarms', 291 name: 'clarms',
283 component: () => import('./pages/clarms/clarms.vue'), 292 component: () => import('./pages/clarms/clarms.vue'),
......