no message

@@ -10,5 +10,8 @@ module.exports = {
 	},
 	nav: {
 		ttt: "2"
+	},
+	paymentType: {
+
 	}
 }

@@ -24,7 +24,7 @@ Vue.use(Purecss);
 // 国际化
 Vue.use(VueI18n)
 const i18n = new VueI18n({
-	locale: localStorage.getItem("lang") || 'zh', // 语言标识
+	locale: localStorage.getItem("lang") || 'tc', // 语言标识
 	//this.$i18n.locale // 通过切换locale的值来实现语言切换
 	messages: {
 		'tc': require('@/common/lang/tc'), // 繁体语言包

@@ -18,7 +18,6 @@
   bottom: 0;
   left: 0;
   right: 0;
-
 }
 
 .news {
@@ -27,7 +26,6 @@
   width: 66.75rem;
 
 
-
   &-item {
 
     display: flex;

@@ -7,11 +7,34 @@ import {
 export default {
 	data() {
 		return {
-			key: 'value'
+			key: 'value',
+			dataList: [{
+				tit: "親臨客服中心付款",
+				type: "",
+			}, {
+				tit: "网银付款",
+				type: "",
+			}, {
+				tit: "电汇付款",
+				type: "",
+			}, {
+				tit: "柜员机付款",
+				type: "",
+			}, {
+				tit: "「缴费灵」付款",
+				type: "",
+			}, {
+				tit: "香港邮政局",
+				type: "",
+			}],
+			curIndex: 0,
 		}
 	},
 	components: {},
 	methods: {
+		onOverHandler(val) {
+			this.curIndex = val;
+		},
 		initData() {}
 	},
 	mounted() {},

@@ -32,6 +32,37 @@
 
       &-icon {
         margin-right: .4rem;
+        width: 1.75rem;
+
+        img {
+          max-height: 1.5rem;
+          max-width: 1.5rem;
+        }
+      }
+    }
+
+    .active {
+      color: #ffffff;
+      background-image: linear-gradient(to bottom, #f05f28, #f05021);
+    }
+  }
+
+  &-line {
+    height: 1px;
+    background-color: #f05a23;
+  }
+
+
+  &-cont {
+    margin-top: 3.5rem;
+
+    &-item {
+      line-height: 3;
+
+      ul {}
+
+      li {
+        // background-image:
       }
     }
   }

@@ -5,26 +5,28 @@
 		<div class="box">
 			<div class="payment">
 				<div class="payment-nav">
-					<div class="payment-nav-item">
-						<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">親臨客服中心付款
+					<div @mouseover="onOverHandler(index)" class="payment-nav-item" :class="{'active' : index == curIndex}" v-for="(item, index) in dataList" :key="item.id">
+						<div class="payment-nav-item-icon">
+							<img :src="require('@assets/images/payment-type/icon-payment-'+(index+1)+(index == curIndex?'-act':'')+'.png')">
+						</div>
+						{{ item.tit }}
 					</div>
-					<div class="payment-nav-item">
-						<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">网银付款
-					</div>
-					<div class="payment-nav-item">
-						<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">电汇付款
-					</div>
-					<div class="payment-nav-item">
-						<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">柜员机付款
-					</div>
-					<div class="payment-nav-item">
-						<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">「缴费灵」付款
-					</div>
-					<div class="payment-nav-item">
-						<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">香港邮政局
+				</div>
+				<div class="payment-line"></div>
+
+				<div class="payment-cont">
+					<!-- 親臨客服中心付款 -->
+					<div class="payment-cont-item">
+						<ul>
+							<li>現金：繳付保費的上限為每張保單15,000美元正或等值港元。</li>
+							<li>支票：請以劃線支票付款，擡頭寫上「中國平安人壽保險股份有限公司香港分公司」並於支票背面寫上繳費通知書右上方的「收款單編號」</li>
+							<li>信用卡：您可透過信用卡以港元繳費，最高繳款額須按您的指定銀行而定。</li>
+							<li>易辦事：您可透過由「易辦事」會員銀行發行的提款卡及具備提款功能之信用卡透過易辦事以港元繳付費用，最高繳款額須按您的指定銀行而定。</li>
+						</ul>
 					</div>
 				</div>
 			</div>
+
 		</div>
 	</div>
 </template>