938dc91c by simon

默认提交

1 parent 35a25e80
......@@ -89,7 +89,7 @@ export default {
@import "@/styles/_support.scss";
html {
font-family:"Arial", "Microsoft YaHei";
font-family: "Arial", "Microsoft YaHei";
font-size: 12px;
word-spacing: 1px;
word-break: break-word;
......@@ -471,6 +471,12 @@ textarea {
max-width: 100% !important;
}
}
.page-vhis {
.video-js {
width: 100% !important;
max-width: 100% !important;
}
}
#app {
.header {
......

4.04 KB | W: | H:

2.03 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

2.03 KB | W: | H:

4.04 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -944,16 +944,27 @@ module.exports = {
t3: "优惠码:CISAVE20"
},
title: {
t1: "自愿医保计划",
t2: "平安人寿(香港)",
t3: "自愿医保标准计划",
t4: "为政府自愿医保认可的标准计划,可同时申请享有税务扣减优惠。",
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: "产品特点",
t1: "Plan Features",
},
guarantee1: {
t1: "保障一览",
title: "Plan Summary",
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: "投保人投保时的年龄",
......@@ -967,15 +978,6 @@ module.exports = {
t12: "每年保障限额",
t13: "每保单年度420,000港元",
},
guarantee2: {
t1: "更多特点:",
t2: "若您更改计划、终止保单或您未能支付保费导致保单被终止,便有机会获退还部分款项",
t3: "(如适用)。",
t4: "保证自动续保,无需进一步提供健康证明。",
t5: "保证于保费缴付期内保费不变。",
t6: "计划不包括:",
t7: "若受保人于保单签发日后一年内自杀,将不能获发身故赔偿,但将获退还于现行保单保障期内所缴的总保费。",
},
download: {
t1: "下载产品简介",
t2: "下载标准保费表",
......@@ -983,29 +985,29 @@ module.exports = {
},
submitBtn: "立即投保",
productList: [{
title: "保证续保至100岁",
desc: "平安人寿(香港)「好e时」自愿医保标准计划 接受任何介乎15天至80岁人士投保,您可以一直续保至100岁。计划保证不会因您的索偿记录或身体状况变而调高续保保费,而您的续保保费将根据当时保单周年日之保费表厘定。",
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: "不设终身保障限额",
desc: "每年保障限额高达420,000 港元,并将每年重新设置至原先限额,让您享有充裕的医疗保障,减轻因医疗需求而造成的财务负担。",
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: "一家投保 尽享税务扣减",
desc: "保费可用作申请税务扣除,若保单持有人为纳税人,便可为自己及任何指明亲属,即每一名合资格受保人,申请每名受保人每年8,000 港元的扣税额,可申请税务扣减的指明亲属 数目更不设上限。",
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: "承保投保前未知的已有疾病",
desc: "承保您在投保时不察觉,及理应不察觉的已有病症。对上述有关病症,此计划会在保单生效首3年的等候期间提供部份保障*,并由第4个保单年度起提供全面保障。",
tips: "*保单生效日后提供部分赔偿(第二年25%、第三年50%),其后提供全面赔偿(100%) "
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: "出院免找数 让您安心无忧",
desc: "只需完成简单手续,我们便会直接向有关私家医院缴付住院期间的医疗开支。",
tips: "*有关详情及指定医院列表,请参阅「出院免找数服务」单张。"
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: "无索偿折扣",
desc: "最高可获得上一个保单年度有已缴总保费之10%。 如您在连续3个保单年度或以上没有作出赔偿,在下一个保单周年日您将可获得此保费折扣。",
tips: "*有关详情请参阅产品介绍书。"
title: "No Lifetime Benefit Limit",
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: ""
}]
}
}
......
......@@ -936,16 +936,27 @@ module.exports = {
t3: "優惠碼:CISAVE20"
},
title: {
t1: "自願醫保計劃",
t2: "平安人壽(香港)",
t3: "自願醫保標準計劃",
t4: "為政府自願醫保認可的標準計劃,可同時申請享有稅務扣减優惠。",
t1: "平安“好e時”自願醫保標準計劃 ",
t2: "平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃,涵蓋重點醫療保障,投保流程簡易,全程線上進行。",
t3: "",
t4: "",
},
main: {
t1: "產品特點",
t1: "計劃特點",
},
guarantee1: {
t1: "保障一覽",
title: "計劃概覽",
k1: "投保年齡(受保人的實際年齡)",
v1: "出生後15 天起至80 歲",
k2: "保障期",
v2: "1年,保證續保至100 歲",
k3: "保單貨幣",
v3: "港元",
k4: "保費繳交方式",
v4: "月繳/年繳",
k5: "合資格客戶(受保人)",
v5: "香港居民(持有由香港特區政府簽發的有效居民身份證人士)",
t2: "產品性質",
t3: "醫療保障保險計劃",
t4: "投保人投保時的年齡",
......@@ -959,15 +970,6 @@ module.exports = {
t12: "每年保障限額",
t13: "每保單年度420,000 港元",
},
guarantee2: {
t1: "更多特點:",
t2: "若您更改計劃、終止保單或您未能支付保費導致保單被終止,便有機會獲退還部分款項",
t3: "(如適用)。",
t4: "保證自動續保,無需進一步提供健康證明。",
t5: "保證於保費繳付期內保費不變。",
t6: "計劃不包括:",
t7: "若受保人於保單簽發日後一年內自殺,將不能獲發身故賠償,但將獲退還於現行保單保障期內所繳的總保費。",
},
download: {
t1: "下載產品簡介",
t2: "下載標準保費表",
......@@ -975,29 +977,29 @@ module.exports = {
},
submitBtn: "立即投保",
productList: [{
title: "保證續保至100歲",
desc: "平安人壽(香港)「好e時」自願醫保標準計劃 接受任何介乎15天至80歲人士投保,您可以一直續保至100歲。計劃保證不會因您的索償記錄或身體狀況變而調高續保保費,而您的續保保費將根據當時保單週年日之保費表釐定。",
title: "政府認可 安心保障",
desc: "本計劃為政府自願醫保認可的標準計劃,讓您在需要時候可透過住院保險而使用私營醫療服務,並可同時申請享有稅務扣減優惠。此計劃獲食物及衞生局認可,讓您倍感安心。如欲了解更多自願醫保詳情,可瀏覽www.vhis.gov.hk。",
tips: ""
}, {
title: "設終身保障限額",
desc: "每年保障限額高達420,000 港元,並將每年重新設置至原先限額,讓您享有充裕的醫療保障,減輕因醫療需求而造成的財務負擔。",
title: "設終身保障限額",
desc: "本計劃不設終身保障限額,每年保障限額高達420,000 港元,並將每年重新設置至原先限額,讓您享有重點的醫療保障,減輕因醫療需求而造成的財務負擔。",
tips: ""
}, {
title: "一家投保 盡享稅務扣減",
desc: "保費可用作申請稅務扣除,若保單持有人為納稅人,便可為自己及任何指明親屬,即每一名合資格受保人,申請每名受保人每年8,000 港元的扣稅額,可申請稅務扣減的指明親屬 數目更不設上限。",
tips: "*需根據香港自願醫保計劃保單所繳付的合資格保費的扣稅安排"
desc: "本計劃的保費可用作申請稅務扣除,若保單持有人為納稅人,便可為自己及任何指明親屬*,即每一名合資格受保人,申請每名受保人每年8,000 港元的扣稅額,可申請稅務扣減的指明親屬 數目更不設上限。",
tips: "*指明親屬包括納稅人配偶及子女、納稅人或其配偶的祖父母、外祖父母、父母和兄弟姐妹。"
}, {
title: "承保投保前未知的已有疾病",
desc: "承保您在投保時不察覺,及理應不察覺的已有病症。對上述有關病症,此計劃會在保單生效首3年的等候期間提供部份保障*,並由第4個保單年度起提供全面保障。",
desc: "現時一般醫療保險均不承保投保前的已有疾病,本計劃為您帶來多一份安心,承保您在投保時不察覺,及理應不察覺的已有病症。對上述有關病症,此計劃會在保單生效首3年的等候期間提供部份保障*,並由第4個保單年度起提供全面保障。",
tips: "*保單生效日後提供部分賠償(第二年25%、第三年50%),其後提供全面賠償(100%) "
}, {
title: "出院免找數 讓您安心無憂",
desc: "只需完成簡單手續,我們便會直接向有關私家醫院繳付住院期間的醫療開支。",
tips: "*有關詳情及指定醫院列表,請參閱「出院免找數服務」單張。"
title: "保證續保至100歲",
desc: "本計劃接受任何介乎出生後15天至80歲人士投保,您可以一直續保至100歲。計劃保證不會因您的索償記錄或身體狀況改變而調高續保保費,而您的續保保費將根據當時保單週年日之保費表釐定。",
tips: ""
}, {
title: "無索償折扣",
desc: "最高可獲得上一個保單年度有已繳總保費之10%。 如您在連續3個保單年度或以上沒有作出賠償,在下一個保單週年日您將可獲得此保費折扣。",
tips: "*有關詳情請參閱產品介紹書。"
title: "無索償保費折扣",
desc: "為鼓勵您保持健康生活,如您於本計劃的連續3個保單年度內,沒有任何索償記錄,我們會於下一保單年度退還上一個保單年度保費的百分之十(10%)作為無索償折扣。",
tips: ""
}]
}
}
......
......@@ -938,16 +938,27 @@ module.exports = {
t3: "优惠码:CISAVE20"
},
title: {
t1: "自愿医保计划",
t2: "平安人寿(香港)",
t3: "自愿医保标准计划",
t4: "为政府自愿医保认可的标准计划,可同时申请享有税务扣减优惠。",
t1: "平安 “好e时”自愿医保标准计划",
t2: "平安「好e时」自愿医保标准计划为政府自愿医保认可的标准计划,涵盖重点医疗保障,投保流程简易,全程线上进行。",
t3: "",
t4: "",
},
main: {
t1: "产品特点",
t1: "计划特点",
},
guarantee1: {
t1: "保障一览",
title: "计划概览",
k1: "投保年龄(受保人的实际年龄)",
v1: "出生后15 天起至80 岁",
k2: "保障期",
v2: "1年,保证续保至100 岁",
k3: "保单货币",
v3: "港元",
k4: "保费缴交方式",
v4: "月缴/年缴",
k5: "合资格客户(受保人)",
v5: "香港居民(持有由香港特区政府签发的有效居民身份证人士)",
t2: "产品性质",
t3: "医疗保障保险计划",
t4: "投保人投保时的年龄",
......@@ -962,13 +973,39 @@ module.exports = {
t13: "每保单年度420,000港元",
},
guarantee2: {
t1: "更多特点:",
t2: "若您更改计划、终止保单或您未能支付保费导致保单被终止,便有机会获退还部分款项",
t3: "(如适用)。",
t4: "保证自动续保,无需进一步提供健康证明。",
t5: "保证于保费缴付期内保费不变。",
t6: "计划不包括:",
t7: "若受保人于保单签发日后一年内自杀,将不能获发身故赔偿,但将获退还于现行保单保障期内所缴的总保费。",
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: "外科医生费<br>(每项手术)<br> 按手术表划分<br>的手术分类",
fv1: "复杂 50,000",
fv2: "大型 25,000",
fv3: "中型 12,500",
fv4: "小型 5,000",
gk: "麻醉科医生费",
gv: "外科医生费的35%",
hk: "手术室费",
hv: "外科医生费的35%",
ik: "订明诊断成像检测(设30%共同保险)",
iv: "20,000<br>每保单年度",
jk: "订明非手术<br>癌症治疗",
jv: "80,000每保单年度",
kk: "入院前或出院后/<br>日间手术前后的门诊护理",
kv11: "580<br>每次",
kv12: "3,000<br>每保单年度",
kv2: "住院/日间手术前<br>最多1次门诊或<br>急症诊症",
kv3: "出院/日间手术后<br>90日内<br>最多3次跟进门诊",
lk: "精神科治疗",
lv: "30,000<br>每保单年度",
},
download: {
t1: "下载产品简介",
......@@ -977,29 +1014,29 @@ module.exports = {
},
submitBtn: "立即投保",
productList: [{
title: "保证续保至100岁",
desc: "平安人寿(香港)「好e时」自愿医保标准计划 接受任何介乎15天至80岁人士投保,您可以一直续保至100岁。计划保证不会因您的索偿记录或身体状况变而调高续保保费,而您的续保保费将根据当时保单周年日之保费表厘定。",
title: "政府认可 安心保障",
desc: "本计划为政府自愿医保认可的标准计划,让您在需要时候可透过住院保险而使用私营医疗服务,并可同时申请享有税务扣减优惠。此计划获食物及卫生局认可,让您倍感安心。如欲了解更多自愿医保详情,可浏览www.vhis.gov.hk。",
tips: ""
}, {
title: "设终身保障限额",
desc: "每年保障限额高达420,000 港元,并将每年重新设置至原先限额,让您享有充裕的医疗保障,减轻因医疗需求而造成的财务负担。",
title: "设终身保障限额",
desc: "本计划不设终身保障限额,每年保障限额高达420,000 港元,并将每年重新设置至原先限额,让您享有重点的医疗保障,减轻因医疗需求而造成的财务负担。",
tips: ""
}, {
title: "一家投保 尽享税务扣减",
desc: "保费可用作申请税务扣除,若保单持有人为纳税人,便可为自己及任何指明亲属,即每一名合资格受保人,申请每名受保人每年8,000 港元的扣税额,可申请税务扣减的指明亲属 数目更不设上限。",
tips: "*需根据香港自愿医保计划保单所缴付的合资格保费的扣税安排"
desc: "本计划的保费可用作申请税务扣除,若保单持有人为纳税人,便可为自己及任何指明亲属*,即每一名合资格受保人,申请每名受保人每年8,000 港元的扣税额,可申请税务扣减的指明亲属 数目更不设上限。",
tips: "*指明亲属包括纳税人配偶及子女、纳税人或其配偶的祖父母、外祖父母、父母和兄弟姐妹。"
}, {
title: "承保投保前未知的已有疾病",
desc: "承保您在投保时不察觉,及理应不察觉的已有病症。对上述有关病症,此计划会在保单生效首3年的等候期间提供部份保障*,并由第4个保单年度起提供全面保障。",
desc: "现时一般医疗保险均不承保投保前的已有疾病,本计划为您带来多一份安心,承保您在投保时不察觉,及理应不察觉的已有病症。对上述有关病症,此计划会在保单生效首3年的等候期间提供部份保障*,并由第4个保单年度起提供全面保障。",
tips: "*保单生效日后提供部分赔偿(第二年25%、第三年50%),其后提供全面赔偿(100%) "
}, {
title: "出院免找数 让您安心无忧",
desc: "只需完成简单手续,我们便会直接向有关私家医院缴付住院期间的医疗开支。",
tips: "*有关详情及指定医院列表,请参阅「出院免找数服务」单张。"
title: "保证续保至100岁",
desc: "只本计划接受任何介乎出生后15天至80岁人士投保,您可以一直续保至100岁。计划保证不会因您的索偿记录或身体状况改变而调高续保保费,而您的续保保费将根据当时保单周年日之保费表厘定。",
tips: ""
}, {
title: "无索偿折扣",
desc: "最高可获得上一个保单年度有已缴总保费之10%。 如您在连续3个保单年度或以上没有作出赔偿,在下一个保单周年日您将可获得此保费折扣。",
tips: "*有关详情请参阅产品介绍书。"
title: "无索偿保费折扣",
desc: "为鼓励您保持健康生活,如您于本计划的连续3个保单年度内,没有任何索偿记录,我们会于下一保单年度退还上一个保单年度保费的百分之十(10%)作为无索偿折扣。",
tips: ""
}]
}
}
......
......@@ -27,7 +27,7 @@ $navHeiM: 6rem;
.logo-img {
margin-right: 2rem;
max-width: 17.75rem ;
max-width: 17.75rem;
cursor: pointer;
}
......@@ -113,34 +113,42 @@ $navHeiM: 6rem;
}
@media (max-width: 1200px) {
.v-header {
@include content-percent();
// @media (max-width: 1200px) {
// .v-header {
// @include content-percent();
.main-nav {}
// .main-nav {}
.logo-img {
max-width: 17.75rem ;
margin: 0;
}
// .logo-img {
// max-width: 17.75rem ;
// margin: 0;
// }
.pc {
display: none;
}
// .pc {
// display: none;
// }
.mobile {
display: block;
&-nav-list {
top: 32px;
}
}
}
// .mobile {
// display: block;
// &-nav-list {
// top: 32px;
// }
// }
// }
}
// }
@media (max-width: 768px) {
.v-header {
// 原1200px临界样式
@include content-percent();
.pc {
display: none;
}
height: $navHeight-M;
.logo-img {
......@@ -150,6 +158,7 @@ $navHeiM: 6rem;
.mobile {
display: block;
&-nav-list {
top: 24px;
}
......
......@@ -13,7 +13,7 @@ var UA = require("ua-device")
export default {
data() {
return {
key: 'value',
key: '$750<br>每保单年度最多180日',
// swiper
swiperOption: {
navigation: {
......@@ -64,26 +64,6 @@ export default {
onHideBannerTipsHandler() {
this.bannerTipsVisible = false;
},
// fetchBanner() {
// return new Promise((resolve, reject) => {
// httpPost({
// url: api.banner
// }).then(res => {
// resolve(res);
// });
// });
// },
// fetchIndexVideo() {
// return new Promise((resolve, reject) => {
// httpPost({
// url: api.indexVideo
// }).then(res => {
// sessionStorage.setItem("_video_url", res.videoUrl);
// sessionStorage.setItem("_poster_url", res.posterUrl);
// resolve(res);
// });
// });
// },
bottomBtnHandle() {
this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink);
},
......@@ -152,27 +132,6 @@ export default {
this.playerOptions = playerOptions;
},
initProduct() {
// let productList = [{
// showMore: false,
// title: "保證續保至100歲",
// desc: "平安人壽(香港)「好e時」自願醫保標準計劃 接受任何介乎14天至80歲人士投保,您可以一直續保至100歲。計劃保證不會因您的索償記錄或身體狀況變而調高續保保費,而您的續保保費將根據當時保單週年日之保費表釐定。",
// tips:"*需根據香港自願醫保計劃保單所繳付的合資格保費的扣稅安排"
// }, {
// showMore: false,
// title: "不設終身保障限額"
// }, {
// showMore: false,
// title: "一家投保 盡享稅務扣減"
// }, {
// showMore: false,
// title: "承保投保前未知的已有疾病"
// }, {
// showMore: false,
// title: "出院免找數 讓您安心無憂"
// }, {
// showMore: false,
// title: "無索償折扣"
// }];
let productList = this.i18n.vhisDetail.productList;
if (this.productList && this.productList.length > 0) {
for (let index = 0; index < productList.length; index++) {
......
......@@ -165,29 +165,7 @@ $borderSize: 6px;
text-align: center;
font-size: $fontSize;
.tt {
// display: flex;
// justify-content: center;
// align-items: center;
// text-align: center;
}
.easy {
display: inline;
vertical-align: middle;
}
.easy1 {
margin-right: 8px;
margin-top: -4px;
height: 36px;
}
.easy2 {
margin-right: 10px;
margin-top: -4px;
height: 26px;
}
.tt {}
.t1 {
color: $cOrange2;
......@@ -201,9 +179,10 @@ $borderSize: 6px;
.t2 {
font-size: 24px;
margin-top: 36px;
line-height: 1.39;
// margin-top: 36px;
max-width: 780px;
margin: 36px auto 0;
}
.t2:lang(zh) {
......@@ -338,8 +317,7 @@ $borderSize: 6px;
&-border {
width: 100%;
height: 4px;
background-color: $cOrange2;
@include border-tans(0px, 1.5px);
}
.table-item {
......@@ -350,7 +328,7 @@ $borderSize: 6px;
.tt {
@extend .bb;
width: 50%;
padding: 18px 12px 18px 0;
padding: 18px 18px 18px 0;
color: $cFontGray3;
}
......@@ -362,6 +340,8 @@ $borderSize: 6px;
background-color: #fef1ed;
padding-left: 100px;
border-right: solid 1px #e4e4e5;
display: flex;
align-items: center;
}
.val {
......@@ -443,6 +423,124 @@ $borderSize: 6px;
}
}
// 保障内容
.guarantee2 {
.tit {}
.container {
display: flex;
margin: 48px auto 0;
.table {
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 {
height: 136px;
.label {
// padding: 0;
// @extend .fcc;
align-items: flex-start;
display: flex;
padding: 40px 12px 0;
.nn {}
.n1 {
text-align: right;
width: 44px;
margin-top: 2px;
margin-right: 8px;
color: $cOrange2;
}
.n2 {
flex: 1;
}
}
.val {
@extend .fcc;
flex-wrap: wrap;
padding: 0 0;
text-align: center;
line-height: 1.5;
flex: 1;
&-item {
width: 100%;
height: 81px;
}
}
}
&-item-4 {
height: 324px;
.val {
align-items: flex-start;
padding: 0 0;
text-align: center;
line-height: 1.5;
&-item {
@extend .bb;
@extend .fcc;
height: 81px;
border-bottom: solid 1px #e4e4e5;
}
}
}
&-item-3 {
height: 408px;
.val {
align-items: flex-start;
padding: 0 0;
text-align: center;
line-height: 1.5;
&-item {
@extend .bb;
@extend .fcc;
height: 136px;
border-bottom: solid 1px #e4e4e5;
.thr {
@extend .bb;
@extend .fcc;
width: 50%;
height: 100%;
border-right: solid 1px #e4e4e5;
}
}
}
}
}
}
}
// 下载
.download {
margin: 100px auto 0;
......@@ -456,13 +554,10 @@ $borderSize: 6px;
max-width: 602px;
height: 67px;
line-height: 67px;
// padding: 2px;
// border-radius: $borderSize;
cursor: pointer;
@include border-tans($borderSize);
.cont {
// @extend .fcc;
@extend .bb;
display: flex;
align-items: center;
......@@ -532,3 +627,137 @@ $borderSize: 6px;
height: 12px;
background-color: $cOrange2;
}
@media (max-width: 1200px) {
.content {
@include content-percent();
padding-bottom: $marginMedium-M;
.vjs-custom-skin {
width: 100%;
}
.product {
.prod {
&-item {
width: 45vw;
}
}
}
}
}
@media (max-width: 768px) {
.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;
}
}
}
}
}
}
.video {
margin: 32px auto 0;
}
// 保障
.guarantee {
margin: 32px auto 0;
.tit {
font-size: $fontSizeTitle-M2;
}
.table {
font-size: $fontSize-M2;
&-item {
flex-wrap: wrap;
.tt {
width: 100%;
}
.label,
.val {
padding: 18px;
}
}
}
}
// 下载
.download {
margin: 48px auto 0;
&-item {
.cont {
padding: 0;
padding-left: 52px;
font-size: $fontSize-M2;
}
.icon {
margin-right: 24px;
}
}
}
}
}
......
......@@ -8,7 +8,6 @@
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.pcBannerUrl">
<!-- <img :src="require('@/assets/images/vhis/kv.png')"> -->
<div class="btn-wrap">
<div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
<div class="banner-btn" v-if="btnItem.n && btnItem.t && btnItem.c" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{backgroundColor:btnItem.c}">{{btnItem.n}}</div>
......@@ -50,13 +49,18 @@
</div>
<!-- 标题 -->
<div class="title">
<div class="tt t1"><img class="easy easy1" src="@/assets/images/vhis/easy-1.png">{{$t('vhisDetail.title.t1')}}</div>
<div class="title-wrap">
<div class="tt t1">{{$t('vhisDetail.title.t1')}}</div>
<div class="tt t2">
{{$t('vhisDetail.title.t2')}}<img class="easy easy2" src="@/assets/images/vhis/easy-2.png">{{$t('vhisDetail.title.t3')}}<br> {{$t('vhisDetail.title.t4')}}
{{$t('vhisDetail.title.t2')}}{{$t('vhisDetail.title.t3')}}
</div>
</div>
</div>
<div class="content">
<!-- 产品 -->
<!-- 产品特点 -->
<div class="box product">
<div class="tit">{{$t('vhisDetail.main.t1')}}</div>
<div class="prod">
......@@ -90,65 +94,190 @@
</video-player>
</div>
<!-- 保障 -->
<!-- 计划概览 -->
<div class="guarantee">
<div class="tit">{{$t('vhisDetail.guarantee1.t1')}}</div>
<div class="tit">{{$t('vhisDetail.guarantee1.title')}}</div>
<div class="container">
<div class="table">
<div class="border2 table-border"></div>
<div class="table-item">
<div class="tt label">{{$t('vhisDetail.guarantee1.t2')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.t3')}}</div>
<div class="tt label">{{$t('vhisDetail.guarantee1.k1')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.v1')}}</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('vhisDetail.guarantee1.t4')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.t5')}}</div>
<div class="tt label">{{$t('vhisDetail.guarantee1.k2')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.v2')}}</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('vhisDetail.guarantee1.t6')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.t7')}}</div>
<div class="tt label">{{$t('vhisDetail.guarantee1.k3')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.v3')}}</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('vhisDetail.guarantee1.t8')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.t9')}}</div>
<div class="tt label">{{$t('vhisDetail.guarantee1.k4')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.v4')}}</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('vhisDetail.guarantee1.t10')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.t11')}}</div>
<div class="tt label">{{$t('vhisDetail.guarantee1.k5')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.v5')}}</div>
</div>
</div>
<div class="table-item">
<div class="tt label">{{$t('vhisDetail.guarantee1.t12')}}</div>
<div class="tt val">{{$t('vhisDetail.guarantee1.t13')}}</div>
</div>
</div>
<div class="table2">
<!-- 保障内容 -->
<div class="guarantee guarantee2">
<div class="tit">{{$t('vhisDetail.guarantee1.title')}}</div>
<div class="container">
<!-- 左表 -->
<div class="table">
<div class="titl">
<div class="titl-item">{{$t('vhisDetail.guarantee2.titK')}}<span class="smal">(1)</span></div>
<div class="titl-item">{{$t('vhisDetail.guarantee2.titV')}}</div>
</div>
<div class="border2 table-border"></div>
<div class="table-item">
<div class="tt label">
<div class="nn n1">(a)</div>
<div v-html="$t('vhisDetail.guarantee2.ak')" class="nn n2">{{$t('vhisDetail.guarantee2.ak')}}</div>
</div>
<div v-html="$t('vhisDetail.guarantee2.av')" class="tt val">{{$t('vhisDetail.guarantee2.av')}}</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="nn n1">(b)</div>
<div v-html="$t('vhisDetail.guarantee2.bk')" class="nn n2">{{$t('vhisDetail.guarantee2.bk')}}</div>
</div>
<div v-html="$t('vhisDetail.guarantee2.bv')" class="tt val">{{$t('vhisDetail.guarantee2.bv')}}</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="nn n1">(c)</div>
<div v-html="$t('vhisDetail.guarantee2.ck')" class="nn n2">{{$t('vhisDetail.guarantee2.ck')}}</div>
</div>
<div v-html="$t('vhisDetail.guarantee2.cv')" class="tt val">{{$t('vhisDetail.guarantee2.cv')}}</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="nn n1">(d)</div>
<div class="nn n2">
<span v-html="$t('vhisDetail.guarantee2.dk')">{{$t('vhisDetail.guarantee2.dk')}}</span>
<span class="smal">(2)</span>
</div>
</div>
<div class="tt val">{{$t('vhisDetail.guarantee2.dv')}}</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="t1">{{$t('vhisDetail.guarantee2.t1')}}</div>
<ul>
<li>
<span>{{$t('vhisDetail.guarantee2.t2')}}</span>
<!-- <span class="small">1</span> -->
<span>{{$t('vhisDetail.guarantee2.t3')}}</span>
</li>
<li>{{$t('vhisDetail.guarantee2.t4')}}
</li>
<li>{{$t('vhisDetail.guarantee2.t5')}}</li>
</ul>
<div class="nn n1">(e)</div>
<div v-html="$t('vhisDetail.guarantee2.ek')" class="nn n2">{{$t('vhisDetail.guarantee2.ek')}}</div>
</div>
<div v-html="$t('vhisDetail.guarantee2.ev')" class="tt val">{{$t('vhisDetail.guarantee2.ev')}}</div>
</div>
<!-- 4分 -->
<div class="table-item table-item-4">
<div class="tt label">
<div class="nn n1">(f)</div>
<div v-html="$t('vhisDetail.guarantee2.fk')" class="nn n2">{{$t('vhisDetail.guarantee2.fk')}}</div>
</div>
<div class="tt val">
<div class="val-item">
{{$t('vhisDetail.guarantee2.fv1')}}
</div>
<div class="val-item">
{{$t('vhisDetail.guarantee2.fv2')}}
</div>
<div class="val-item">
{{$t('vhisDetail.guarantee2.fv3')}}
</div>
<div class="val-item">
{{$t('vhisDetail.guarantee2.fv4')}}
</div>
</div>
</div>
<div class="tt tt2 label label2">
<div class="t1">
<span>{{$t('vhisDetail.guarantee2.t6')}}</span>
<!-- <span class="small">2</span> -->
</div>
<ul>
<li>{{$t('vhisDetail.guarantee2.t7')}}
</li>
</ul>
<!-- 右表 -->
<div class="table">
<div class="titl">
<div class="titl-item">{{$t('vhisDetail.guarantee2.titK')}}<span class="smal">(1)</span></div>
<div class="titl-item">{{$t('vhisDetail.guarantee2.titV')}}</div>
</div>
<div class="border2 table-border"></div>
<div class="table-item">
<div class="tt label">
<div class="nn n1">(g)</div>
<div v-html="$t('vhisDetail.guarantee2.gk')" class="nn n2">{{$t('vhisDetail.guarantee2.gk')}}</div>
</div>
<div class="tt val">
<span v-html="$t('vhisDetail.guarantee2.gv')">{{$t('vhisDetail.guarantee2.gv')}}</span>
<span class="smal">(5)</span>
</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="nn n1">(h)</div>
<div v-html="$t('vhisDetail.guarantee2.hk')" class="nn n2">{{$t('vhisDetail.guarantee2.hk')}}</div>
</div>
<div class="tt val">
<span v-html="$t('vhisDetail.guarantee2.hv')">{{$t('vhisDetail.guarantee2.hv')}}</span>
<span class="smal">(5)</span>
</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="nn n1">(i)</div>
<div class="nn n2">
<span v-html="$t('vhisDetail.guarantee2.ik')">{{$t('vhisDetail.guarantee2.ik')}}</span>
<span class="smal">(2)(3)</span>
</div>
</div>
<div v-html="$t('vhisDetail.guarantee2.iv')" class="tt val">{{$t('vhisDetail.guarantee2.iv')}}</div>
</div>
<div class="table-item">
<div class="tt label">
<div class="nn n1">(j)</div>
<div class="nn n2">
<span v-html="$t('vhisDetail.guarantee2.jk')">{{$t('vhisDetail.guarantee2.jk')}}</span>
<span class="smal">(4)</span>
</div>
</div>
<div v-html="$t('vhisDetail.guarantee2.jv')" class="tt val">{{$t('vhisDetail.guarantee2.jv')}}</div>
</div>
<div class="table-item table-item-3">
<div class="tt label">
<div class="nn n1">(k)</div>
<div class="nn n2">
<span v-html="$t('vhisDetail.guarantee2.kk')">{{$t('vhisDetail.guarantee2.kk')}}</span>
<span class="smal">(2)</span>
</div>
</div>
<div class="tt val">
<div class="val-item">
<div v-html="$t('vhisDetail.guarantee2.kv11')" class="thr">{{$t('vhisDetail.guarantee2.kv11')}}</div>
<div v-html="$t('vhisDetail.guarantee2.kv12')" class="thr">{{$t('vhisDetail.guarantee2.kv12')}}</div>
</div>
<div v-html="$t('vhisDetail.guarantee2.kv2')" class="val-item">
{{$t('vhisDetail.guarantee2.kv2')}}
</div>
<div v-html="$t('vhisDetail.guarantee2.kv3')" class="val-item">
{{$t('vhisDetail.guarantee2.kv3')}}
</div>
</div>
</div>
<!-- 4分 -->
<div class="table-item table-item">
<div class="tt label">
<div class="nn n1">(l)</div>
<div v-html="$t('vhisDetail.guarantee2.lk')" class="nn n2">{{$t('vhisDetail.guarantee2.lk')}}</div>
</div>
<div v-html="$t('vhisDetail.guarantee2.lv')" class="tt val">{{$t('vhisDetail.guarantee2.lv')}}</div>
</div>
</div>
</div>
</div>
<!-- 下载 -->
......
......@@ -27,12 +27,15 @@ $fontSize:14px;
$fontSizeSmall:12px;
$fontSizeTitle-M:17px;
$fontSize-M:14px;
$fontSizeSmall-M:12px;
$fontSizeTitle-M2:24px;
$fontSize-M2:20px;
$fontSizeSmall-M2:16px;
// Color
$cOrange:#f05a23;
$cFontGray: #4c4948;
......