默认提交

@@ -733,6 +733,13 @@ module.exports = {
 			title: "Official WeChat Account"
 		}
 	},
+	eCorrespondenceEnquiry: {
+		PolicyNumber:"Policy Number",
+		TypeOfCorrespondence:"Type of Correspondence",
+		SentOutDate:"Sent Out Date",
+		DownloadLink:"Download link",
+		Status:"Status",
+	},
 	customService: {
 		name: "Customer service",
 		menu1: "Contact Us",

@@ -727,6 +727,13 @@ module.exports = {
 			title: "官方公眾號"
 		}
 	},
+	eCorrespondenceEnquiry: {
+		PolicyNumber:"保單號碼",
+		TypeOfCorrespondence:"通知書類型",
+		SentOutDate:"發出時間",
+		DownloadLink:"下載鏈接",
+		Status:"狀况",
+	},
 	customService: {
 		name: "客戶服務",
 		menu1: "聯繫我們",

@@ -728,6 +728,13 @@ module.exports = {
 			title: "官方公众号"
 		}
 	},
+	eCorrespondenceEnquiry: {
+		PolicyNumber:"保單號碼",
+		TypeOfCorrespondence:"通知書類型",
+		SentOutDate:"發出時間",
+		DownloadLink:"下載鏈接",
+		Status:"狀况",
+	},
 	customService: {
 		name: "客户服务",
 		menu1: "联系我们",

 @import '@/styles/_support.scss';
 
 .container{
-  // font-size: 18px;
+  font-size: $fontSize-M2;
 }
 
 .cell-group {

@@ -18,6 +18,7 @@ import {
 	getPolicyName
 } from "@/utils/biz.js";
 import Modal2Comp from '@/components/modal2-comp/modal2-comp.vue';
+import ModalComp from '@/components/modal-comp/modal-comp.vue';
 
 export default {
 	props: {
@@ -72,6 +73,7 @@ export default {
 		queryList() {
 			if (this.policyList && this.policyList.length > 0) {
 				this.myPolicyList = this.policyList;
+				this.myPolicyList = this.myPolicyList.slice(0, 5);
 				this.myPolicyList.forEach(element => {
 					element.activity = false;
 				})
@@ -253,10 +255,39 @@ export default {
 					}
 				});
 			}
+		},
+		// 过滤筛选
+		onFilterHandler(idx) {
+			switch (idx) {
+				// 保单号码
+				case 1:
+
+					break;
+				// 通知书类型
+				case 2:
+
+					break;
+				// 发出时间
+				case 3:
+
+					break;
+
+				// 状况
+				case 5:
+
+					break;
+
+				default:
+					break;
+			}
+
+			// 显示模态窗
+			this.showDownloadError = true;
 		}
 	},
 	components: {
-		Modal2Comp
+		Modal2Comp,
+		ModalComp
 	},
 	mounted() {
 		this.queryList();

@@ -3,6 +3,7 @@
 .list-container {
   overflow-x: auto;
   margin-bottom: 24px;
+  font-size: $fontSize-M2;
 }
 
 .hide {
@@ -57,21 +58,23 @@
     color: #4c4948;
   }
 
+  .td {
+    position: relative;
+    @extend .fcc;
+  }
+
   .w1 {
-    // width: 120px;
     width: 240px;
     text-align: center;
   }
 
   .w2 {
-    // width: 75px;
     width: 150px;
     text-align: center;
   }
 
   .table-header {
-    // width: 770px;
-    height: 39px;
+    height: 50px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     background-color: #f2f2f2;
@@ -133,11 +136,10 @@
       align-items: center;
 
       .td {
+        position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
-
-
       }
 
       .cell1 {
@@ -177,7 +179,7 @@
     }
   }
 
-  .new{
+  .new {
     @include linear-bg;
   }
 
@@ -238,3 +240,13 @@
   }
 }
 
+.down-arrow {
+  background-image: url('~@/assets/images/common/down-arrow-white.png');
+  width: 16px;
+  height: 12px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+  margin-left: 7px;
+  cursor: pointer;
+}

 <template>
 	<div class="list-container">
 		<modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
+		<!-- <modal-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal-comp> -->
 		<div class="cell-group">
 			<div class="table-contaner">
-				<div class="table-header orange new" >
+				<div class="table-header orange new">
 					<div class="normal-header">
-						<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
-						<div class="td w2">{{$t('customService.insuranceQuery.policyState')}}</div>
-						<div class="td w2">{{$t('customService.insuranceQuery.activeDate')}}</div>
-						<div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
-						<div class="td w1">{{$t('customService.insuranceQuery.InsurantName')}}</div>
-						<div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
-						<div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
-						<div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
+						<div class="td w1">{{$t('eCorrespondenceEnquiry.PolicyNumber')}}
+							<div @click="onFilterHandler(1)" class="down-arrow"></div>
+						</div>
+						<div class="td w1">{{$t('eCorrespondenceEnquiry.TypeOfCorrespondence')}}
+							<div @click="onFilterHandler(2)" class="down-arrow"></div>
+						</div>
+						<div class="td w2">{{$t('eCorrespondenceEnquiry.SentOutDate')}}
+							<div @click="onFilterHandler(3)" class="down-arrow"></div>
+						</div>
+						<div class="td w2">{{$t('eCorrespondenceEnquiry.DownloadLink')}}
+
+						</div>
+						<div @click="onFilterHandler(5)" class="td w2">{{$t('eCorrespondenceEnquiry.Status')}}
+							<div class="down-arrow"></div>
+						</div>
 					</div>
 				</div>
-				<div class="guide" :class="{rotate180 : hide}" @click="hide = !hide"></div>
 			</div>
 			<div class="table-content" :class="{hide : hide}">
 				<template v-if="myPolicyList">
@@ -44,16 +51,10 @@
 										</template>
 									</template>
 								</div>
-
-								<div class="td w2">{{formatInsuredState(item.policyState)}}</div>
+								<div class="td w1">{{formatInsuredState(item.policyState)}}</div>
 								<div class="td w2">{{item.activeDate?item.activeDate.split(" ")[0]:""}}</div>
-								<div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div>
-								<div class="td w1">{{formatPolicyName(item.productCode, item.productName)}}</div>
-								<div class="td w2">{{item.moneyCode}} {{formatMoney(item.amount,0)}}</div>
-								<div class="td w2">{{item.expireAt?item.expireAt.split(" ")[0]:""}}</div>
-								<!-- <div class="td w2">{{item.guaranteeAge?item.guaranteeAge.split(" ")[0]:""}}</div> -->
+								<div class="td w2">{{formatPolicyName(item.productCode, item.productName)}}</div>
 								<div class="td w2">{{formatInsuredPeriod(item.insuredPeriodType,item.insuredPeriodValue)}}</div>
-
 							</div>
 							<div class="separator-h" v-if="index < myPolicyList.length - 1 && index < maxShow - 1"></div>
 						</template>

@@ -46,7 +46,7 @@
       @extend .bb;
       padding: 0 0px;
       text-align: left;
-      word-wrap:break-word;
+      word-wrap: break-word;
       font-size: 18px;
     }
 
@@ -83,9 +83,7 @@
 }
 
 .right-panel {
-  // max-width: 975px;
-  // width: 975px;
-  max-width: 972px;
+  // max-width: 972px;
   width: 972px;
   background-color: #ffffff;
 
@@ -114,7 +112,7 @@
 
   .right-panel {
     margin: 0 auto;
-
+    width: auto;
   }
 }