默认提交

simon
Showing 8 changed files with 287 additions and 75 deletions
.gitignore
src/App.vue
src/common/lang/en.js
src/common/lang/tc.js
src/common/lang/zh.js
src/pages/vhis-detail/vhis-detail.scss
src/pages/vhis-detail/vhis-detail.vue
src/styles/_var.scss
--- a/.gitignore
View file @0977627
+++ b/.gitignore
View file @0977627
@@ -6,7 +6,7 @@ node_modules
 .DS_Store
 sync.sh
 git.sh
-# /sandbox
+/sandbox
 # local env files
 .env.local
--- a/src/App.vue
View file @0977627
+++ b/src/App.vue
View file @0977627
@@ -477,7 +477,9 @@ textarea {
      max-width: 100% !important;
    }
  }
+}
+@media (max-width: 768px) {
  #app {
    .header {
      position: fixed;
@@ -487,9 +489,7 @@ textarea {
      padding-top: $navHeight-M;
    }
  }
-}
-@media (max-width: 768px) {
  $fontSizeTitle: $fontSizeTitle-M;
  $fontSize: $fontSize-M;
  $fontSizeSmall: $fontSizeSmall-M;
--- a/src/common/lang/en.js
View file @0977627
+++ b/src/common/lang/en.js
View file @0977627
@@ -978,6 +978,56 @@ module.exports = {
 			t12: "每年保障限额",
 			t13: "每保单年度420,000港元",
 		},
+		guarantee2: {
+			title:"Benefit Schedule",
+			titK:"Benefit items",
+			titV:"Benefit limit (in HKD)",
+			ak: "Room and board",
+			av: "750<br>per dayMaximum 180 days per Policy Year",
+			bk: "Miscellaneous charges",
+			bv: "14,000<br>per policy year",
+			ck: "Attending doctor's visit fee",
+			cv: "750<br>per dayMaximum 180 days per Policy Year",
+			dk: "Specialist's fee",
+			dv: "4,300<br>per policy year",
+			ek: "Intensive care",
+			ev: "3,500<br>per dayMaximum 25 days per Policy Year",
+			fk: "Surgeon's fee<br>(Per surgery)<br>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<br>per Policy YearSubject to 30% Coinsurance",
+			jk: "Prescribed Non-surgical Cancer Treatments",
+			jv: "80,000 per policy year",
+			kk: "re- and post-Confinement/Day Case Procedure outpatient care",
+			kv11: "580<br>per visit",
+			kv12: "3,000<br>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<br>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: "下载标准保费表",
--- a/src/common/lang/tc.js
View file @0977627
+++ b/src/common/lang/tc.js
View file @0977627
--- a/src/common/lang/zh.js
View file @0977627
+++ b/src/common/lang/zh.js
View file @0977627
@@ -973,17 +973,18 @@ module.exports = {
 			t13: "每保单年度420,000港元",
 		},
 		guarantee2: {
-			titK:"保障项目",
+			title: "保障内容",
-			titV:"赔偿限额（港元）",
+			titK: "保障项目",
+			titV: "赔偿限额（港元）",
 			ak: "病房及膳食",
 			av: "750<br>每保单年度最多180日",
 			bk: "杂项开支",
-			bv: "每保单年度$14,000",
+			bv: "14,000<br>每保单年度",
 			ck: "主诊医生巡房费",
 			cv: "750<br>每保单年度最多180日",
 			dk: "专科医生费",
-			dv: "4,300",
+			dv: "4,300<br>每保单年度",
 			ek: "深切治疗",
 			ev: "3,500<br>每保单年度最多25日",
 			fk: "外科医生费<br>(每项手术)<br> 按手术表划分<br>的手术分类",
@@ -995,11 +996,11 @@ module.exports = {
 			gv: "外科医生费的35%",
 			hk: "手术室费",
 			hv: "外科医生费的35%",
-			ik: "订明诊断成像检测(设30%共同保险)",
+			ik: "订明诊断成像检测<br>(设30%共同保险)",
 			iv: "20,000<br>每保单年度",
 			jk: "订明非手术<br>癌症治疗",
 			jv: "80,000每保单年度",
-			kk: "入院前或出院后／<br>日间手术前后的门诊护理",
+			kk: "入院前或出院后／<br>日间手术前后的<br>门诊护理",
 			kv11: "580<br>每次",
 			kv12: "3,000<br>每保单年度",
 			kv2: "住院／日间手术前<br>最多1次门诊或<br>急症诊症",
@@ -1007,6 +1008,21 @@ module.exports = {
 			lk: "精神科治疗",
 			lv: "30,000<br>每保单年度",
 		},
+		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: "下载标准保费表",
--- a/src/pages/vhis-detail/vhis-detail.scss
View file @0977627
+++ b/src/pages/vhis-detail/vhis-detail.scss
View file @0977627
@@ -430,9 +430,10 @@ $borderSize: 6px;
  .container {
    display: flex;
-    margin: 48px auto 0;
+    margin: 0 auto 0;
    .table {
+      margin-top: 48px;
      width: 582px;
      .smal {
@@ -453,21 +454,20 @@ $borderSize: 6px;
      }
      &-item {
-        height: 136px;
+        min-height: 136px;
        .label {
-          // padding: 0;
+          @extend .bb;
-          // @extend .fcc;
+          @extend .fcc;
-          align-items: flex-start;
+          padding-left: 24px;
-          display: flex;
+          padding-right: 2px;
-          padding: 40px 12px 0;
+          justify-content: flex-start;
          .nn {}
          .n1 {
            text-align: right;
-            width: 44px;
+            margin-top: 0px;
-            margin-top: 2px;
            margin-right: 8px;
            color: $cOrange2;
          }
@@ -477,53 +477,68 @@ $borderSize: 6px;
          }
        }
+        .label2 {
+          display: flex;
+          align-items: flex-start;
+          padding: 40px 24px 0;
+        }
        .val {
          @extend .fcc;
          flex-wrap: wrap;
-          padding: 0 0;
+          padding: 0 4px;
          text-align: center;
-          line-height: 1.5;
          flex: 1;
+          min-height: 81px;
          &-item {
            width: 100%;
-            height: 81px;
+            min-height: 81px;
          }
        }
+        // .label:lang(zh) {
+        //   line-height: 1.5;
+        // }
+        // .val:lang(zh) {
+        //   line-height: 1.5;
+        // }
      }
      &-item-4 {
-        height: 324px;
        .val {
          align-items: flex-start;
-          padding: 0 0;
+          // padding: 0 0;
          text-align: center;
          line-height: 1.5;
          &-item {
            @extend .bb;
            @extend .fcc;
-            height: 81px;
+            // height: 81px;
            border-bottom: solid 1px #e4e4e5;
          }
+          &-item:last-child {
+            border-bottom: none;
+          }
        }
      }
      &-item-3 {
-        height: 408px;
        .val {
          align-items: flex-start;
-          padding: 0 0;
+          // padding: 0 0;
          text-align: center;
          line-height: 1.5;
          &-item {
            @extend .bb;
            @extend .fcc;
-            height: 136px;
+            min-height: 136px;
            border-bottom: solid 1px #e4e4e5;
            .thr {
@@ -531,8 +546,17 @@ $borderSize: 6px;
              @extend .fcc;
              width: 50%;
              height: 100%;
+              min-height: 136px;
              border-right: solid 1px #e4e4e5;
            }
+            .thr:last-child {
+              border-right: none;
+            }
+          }
+          &-item:last-child {
+            border-bottom: none;
          }
        }
      }
@@ -732,7 +756,10 @@ $borderSize: 6px;
            width: 100%;
          }
-          .label,
+          .label {
+            padding: 18px;
+          }
          .val {
            padding: 18px;
          }
@@ -740,6 +767,55 @@ $borderSize: 6px;
      }
    }
+    .guarantee2 {
+      .tit {
+        font-size: $fontSizeTitle-M2;
+      }
+      .container {
+        flex-wrap: wrap;
+        .table {
+          margin-top: 24px;
+          font-size: $fontSize-M2;
+          .smal {
+            font-size: $fontSizeSmall-M2;
+          }
+          &-item {
+            .val {
+              // box-sizing: border-box;
+              padding: 18px;
+            }
+          }
+          &-item-3 {
+            .val {
+              padding: 0;
+            }
+          }
+          &-item-4 {
+            .val {
+              padding: 0;
+            }
+          }
+          .titl {
+            &-item {
+              font-size: $fontSize-M2;
+            }
+          }
+        }
+      }
+    }
    // 下载
--- a/src/pages/vhis-detail/vhis-detail.vue
View file @0977627
+++ b/src/pages/vhis-detail/vhis-detail.vue
View file @0977627
@@ -128,59 +128,73 @@
 			<!-- 保障内容 -->
 			<div class="guarantee guarantee2">
-				<div class="tit">{{$t('vhisDetail.guarantee1.title')}}</div>
+				<div class="tit">{{$t('vhisDetail.guarantee2.title')}}</div>
 				<div class="container">
 					<!-- 左表 -->
 					<div class="table">
-							<div class="titl">
+						<div class="titl">
-							<div class="titl-item">{{$t('vhisDetail.guarantee2.titK')}}<span class="smal">(1)</span></div>
+							<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 class="fl">
-								<div v-html="$t('vhisDetail.guarantee2.ak')" class="nn n2">{{$t('vhisDetail.guarantee2.ak')}}</div>
+									<div class="nn n1">(a)</div>
+									<div v-html="$t('vhisDetail.guarantee2.ak')" class="nn n2">{{$t('vhisDetail.guarantee2.ak')}}</div>
+								</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 class="fl">
-								<div v-html="$t('vhisDetail.guarantee2.bk')" class="nn n2">{{$t('vhisDetail.guarantee2.bk')}}</div>
+									<div class="nn n1">(b)</div>
+									<div v-html="$t('vhisDetail.guarantee2.bk')" class="nn n2">{{$t('vhisDetail.guarantee2.bk')}}</div>
+								</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 class="fl">
-								<div v-html="$t('vhisDetail.guarantee2.ck')" class="nn n2">{{$t('vhisDetail.guarantee2.ck')}}</div>
+									<div class="nn n1">(c)</div>
+									<div v-html="$t('vhisDetail.guarantee2.ck')" class="nn n2">{{$t('vhisDetail.guarantee2.ck')}}</div>
+								</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="fl">
-								<div class="nn n2">
+									<div class="nn n1">(d)</div>
-									<span v-html="$t('vhisDetail.guarantee2.dk')">{{$t('vhisDetail.guarantee2.dk')}}</span>
+									<div class="nn n2">
-									<span class="smal">(2)</span>
+										<span v-html="$t('vhisDetail.guarantee2.dk')">{{$t('vhisDetail.guarantee2.dk')}}</span>
+										<span class="smal">(2)</span>
+									</div>
 								</div>
 							</div>
-							<div class="tt val">{{$t('vhisDetail.guarantee2.dv')}}</div>
+							<div v-html="$t('vhisDetail.guarantee2.dv')" class="tt val">{{$t('vhisDetail.guarantee2.dv')}}</div>
 						</div>
 						<div class="table-item">
 							<div class="tt label">
-								<div class="nn n1">(e)</div>
+								<div class="fl">
-								<div v-html="$t('vhisDetail.guarantee2.ek')" class="nn n2">{{$t('vhisDetail.guarantee2.ek')}}</div>
+									<div class="nn n1">(e)</div>
+									<div v-html="$t('vhisDetail.guarantee2.ek')" class="nn n2">{{$t('vhisDetail.guarantee2.ek')}}</div>
+								</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="tt label label2">
-								<div class="nn n1">(f)</div>
+								<div class="fl">
-								<div v-html="$t('vhisDetail.guarantee2.fk')" class="nn n2">{{$t('vhisDetail.guarantee2.fk')}}</div>
+									<div class="nn n1">(f)</div>
+									<div v-html="$t('vhisDetail.guarantee2.fk')" class="nn n2">{{$t('vhisDetail.guarantee2.fk')}}</div>
+								</div>
 							</div>
 							<div class="tt val">
 								<div class="val-item">
@@ -202,56 +216,72 @@
 					<!-- 右表 -->
 					<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.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 class="fl">
-								<div v-html="$t('vhisDetail.guarantee2.gk')" class="nn n2">{{$t('vhisDetail.guarantee2.gk')}}</div>
+									<div class="nn n1">(g)</div>
+									<div v-html="$t('vhisDetail.guarantee2.gk')" class="nn n2">{{$t('vhisDetail.guarantee2.gk')}}</div>
+								</div>
 							</div>
 							<div class="tt val">
-								<span v-html="$t('vhisDetail.guarantee2.gv')">{{$t('vhisDetail.guarantee2.gv')}}</span>
+								<div>
-								<span class="smal">(5)</span>
+									<span v-html="$t('vhisDetail.guarantee2.gv')">{{$t('vhisDetail.guarantee2.gv')}}</span>
+									<span class="smal">(5)</span>
+								</div>
 							</div>
 						</div>
 						<div class="table-item">
 							<div class="tt label">
-								<div class="nn n1">(h)</div>
+								<div class="fl">
-								<div v-html="$t('vhisDetail.guarantee2.hk')" class="nn n2">{{$t('vhisDetail.guarantee2.hk')}}</div>
+									<div class="nn n1">(h)</div>
+									<div v-html="$t('vhisDetail.guarantee2.hk')" class="nn n2">{{$t('vhisDetail.guarantee2.hk')}}</div>
+								</div>
 							</div>
 							<div class="tt val">
-								<span v-html="$t('vhisDetail.guarantee2.hv')">{{$t('vhisDetail.guarantee2.hv')}}</span>
+								<div>
-								<span class="smal">(5)</span>
+									<span v-html="$t('vhisDetail.guarantee2.hv')">{{$t('vhisDetail.guarantee2.hv')}}</span>
+									<span class="smal">(5)</span>
+								</div>
 							</div>
 						</div>
 						<div class="table-item">
-							<div class="tt label">
+							<div class="tt label ">
-								<div class="nn n1">(i)</div>
+								<div class="fl">
-								<div class="nn n2">
+									<div class="nn n1">(i)</div>
-									<span v-html="$t('vhisDetail.guarantee2.ik')">{{$t('vhisDetail.guarantee2.ik')}}</span>
+									<div class="nn n2">
-									<span class="smal">(2)(3)</span>
+										<span v-html="$t('vhisDetail.guarantee2.ik')">{{$t('vhisDetail.guarantee2.ik')}}</span>
+										<span class="smal">(2)(3)</span>
+									</div>
 								</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="tt label ">
-								<div class="nn n1">(j)</div>
+								<div class="fl">
-								<div class="nn n2">
+									<div class="nn n1">(j)</div>
-									<span v-html="$t('vhisDetail.guarantee2.jk')">{{$t('vhisDetail.guarantee2.jk')}}</span>
+									<div class="nn n2">
-									<span class="smal">(4)</span>
+										<span v-html="$t('vhisDetail.guarantee2.jk')">{{$t('vhisDetail.guarantee2.jk')}}</span>
+										<span class="smal">(4)</span>
+									</div>
 								</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="tt label label2">
-								<div class="nn n1">(k)</div>
+								<div class="fl">
-								<div class="nn n2">
+									<div class="nn n1">(k)</div>
-									<span v-html="$t('vhisDetail.guarantee2.kk')">{{$t('vhisDetail.guarantee2.kk')}}</span>
+									<div class="nn n2">
-									<span class="smal">(2)</span>
+										<span v-html="$t('vhisDetail.guarantee2.kk')">{{$t('vhisDetail.guarantee2.kk')}}</span>
+										<span class="smal">(2)</span>
+									</div>
 								</div>
 							</div>
 							<div class="tt val">
@@ -270,8 +300,10 @@
 						<!-- 4分 -->
 						<div class="table-item table-item">
 							<div class="tt label">
-								<div class="nn n1">(l)</div>
+								<div class="fl">
-								<div v-html="$t('vhisDetail.guarantee2.lk')" class="nn n2">{{$t('vhisDetail.guarantee2.lk')}}</div>
+									<div class="nn n1">(l)</div>
+									<div v-html="$t('vhisDetail.guarantee2.lk')" class="nn n2">{{$t('vhisDetail.guarantee2.lk')}}</div>
+								</div>
 							</div>
 							<div v-html="$t('vhisDetail.guarantee2.lv')" class="tt val">{{$t('vhisDetail.guarantee2.lv')}}</div>
 						</div>
@@ -280,6 +312,44 @@
 			</div>
+			<!-- 其他限额 -->
+			<div class="guarantee">
+				<div class="tit">{{$t('vhisDetail.guarantee3.title')}}</div>
+				<div class="container">
+					<div class="table">
+						<div class="border2 table-border"></div>
+						<div class="table-item">
+							<div class="tt label">{{$t('vhisDetail.guarantee3.k1')}}</div>
+							<div class="tt val">{{$t('vhisDetail.guarantee3.v1')}}</div>
+						</div>
+						<div class="table-item">
+							<div class="tt label">{{$t('vhisDetail.guarantee3.k2')}}</div>
+							<div class="tt val">{{$t('vhisDetail.guarantee3.v2')}}</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- 其他保障 -->
+			<div class="guarantee">
+				<div class="tit">{{$t('vhisDetail.guarantee4.title')}}</div>
+				<div class="container">
+					<div class="table">
+						<div class="border2 table-border"></div>
+						<div class="table-item">
+							<div class="tt label">{{$t('vhisDetail.guarantee4.k1')}}</div>
+							<div class="tt val">{{$t('vhisDetail.guarantee4.v1')}}</div>
+						</div>
+						<div class="table-item">
+							<div class="tt label">{{$t('vhisDetail.guarantee4.k2')}}</div>
+							<div class="tt val">{{$t('vhisDetail.guarantee4.v2')}}</div>
+						</div>
+					</div>
+				</div>
+			</div>
 			<!-- 下载 -->
 			<div class="download">
 				<div class="border2 download-item">
--- a/src/styles/_var.scss
View file @0977627
+++ b/src/styles/_var.scss
View file @0977627
@@ -33,7 +33,7 @@ $fontSizeSmall-M:12px;
 $fontSizeTitle-M2:24px;
-$fontSize-M2:20px;
+$fontSize-M2:18px;
 $fontSizeSmall-M2:16px;
 // Color