Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
0c0f85f5 by joe
Options

1

1 parent d8dabbb4
Inline Side-by-side
Showing 7 changed files with 518 additions and 464 deletions
1 module.exports = { 1 module.exports = {
2 message: { 2 message: {
3 login: '登录', 3 login: '登录',
4 Username: '用户名', 4 Username: '用户名',
5 Password: '密码', 5 Password: '密码',
6 Captcha: '验证码', 6 Captcha: '验证码',
7 Language: '语言', 7 Language: '语言',
8 zh: '中文', 8 zh: '中文',
9 en: '英文' 9 en: '英文'
10 }, 10 },
11 nav: { 11 nav: {
12 ttt: "1" 12 ttt: "1"
13 }, 13 },
14 product: { 14 product: {
15 btnPosition: "预约服务", 15 btnPosition: "预约服务",
16 iconProblem: "常见问题", 16 iconProblem: "常见问题",
17 iconProcess: "投保流程", 17 iconProcess: "投保流程",
18 iconProduct: "产品详情" 18 iconProduct: "产品详情"
19 }, 19 },
20 customService: { 20 customService: {
21 name : "客戶服務", 21 name: "客戶服務",
22 menu1: "保单查询", 22 menu1: "保单查询",
23 menu2: "保全变更", 23 menu2: "保全变更",
24 menu3: "续期缴费", 24 menu3: "续期缴费",
25 menu4: "理赔申请", 25 menu4: "理赔申请",
26 menu5: "预约服务", 26 menu5: "预约服务",
27 menu6: "投诉受理", 27 menu6: "投诉受理",
28 insuranceQuery: { 28 insuranceQuery: {
29 InsurantNumber: "保单号码", 29 InsurantNumber: "保单号码",
30 Insurant: "被保人", 30 Insurant: "被保人",
31 InsurantName: "险种名称", 31 InsurantName: "险种名称",
32 InsurantAmount: "保险金额", 32 InsurantAmount: "保险金额",
33 effectiveDate: "生效日期", 33 effectiveDate: "生效日期",
34 period: "保障年期", 34 period: "保障年期",
35
36 t2Title : "保障内容",
37 t2InsurantClassify : "险种名称",
38 t2InsurantAmount : "保额",
39
40 t3Title : "客户资料",
41 t3InsurantNameCn : "投保人姓名（中文）",
42 t3InsurantNameEn : "投保人姓名（英文）",
43 t3InsurantIdNumber : "证件号码",
44 t3InsurantContactAddress : "联系地址",
45 t3InsurantAddress : "居住地址",
46 t3InsurantMobile : "手提电话",
47 t3InsurantEmail : "电子邮箱",
48 t3InsuredNameCn : "受保人姓名（中文）",
49 t3InsuredNameEn : "受保人姓名（英文）",
50 t3InsuredBirthday : "出生日期",
51 t3InsuredIdNumber : "证件号码",
52 35
53 t4Title : "受益人资料", // t4BeneficiaryInformation 36 t2Title: "保障内容",
54 t4NameCn : "姓名（中文）", 37 t2InsurantClassify: "险种名称",
55 t4NameEn : "姓名（英文）", 38 t2InsurantAmount: "保额",
56 t4Allocation : "分配比例",
57 39
58 t5Title : "缴费资料", 40 t3Title: "客户资料",
59 t5PaymentPeriod: "缴费年期", 41 t3InsurantNameCn: "投保人姓名（中文）",
60 t5PaymentMethod: "缴费方式", 42 t3InsurantNameEn: "投保人姓名（英文）",
61 t5PaymentCurrency: "缴费币种", 43 t3InsurantIdNumber: "证件号码",
62 t5CurrentPremium: "当期保费", 44 t3InsurantContactAddress: "联系地址",
63 t5PaymentBank: "缴费银行", 45 t3InsurantAddress: "居住地址",
64 t5PaymentAccount: "缴费账号", 46 t3InsurantMobile: "手提电话",
47 t3InsurantEmail: "电子邮箱",
48 t3InsuredNameCn: "受保人姓名（中文）",
49 t3InsuredNameEn: "受保人姓名（英文）",
50 t3InsuredBirthday: "出生日期",
51 t3InsuredIdNumber: "证件号码",
65 52
66 t6Title : "缴费记录", 53 t4Title: "受益人资料", // t4BeneficiaryInformation
67 t6PaymentPeriod: "缴费期", 54 t4NameCn: "姓名（中文）",
68 t6PaymentMethod : "缴费方式", 55 t4NameEn: "姓名（英文）",
69 t6ClosingDate : "实收日期", 56 t4Allocation: "分配比例",
70 t6PaymentAmount : "缴费金额", 57
71 } 58 t5Title: "缴费资料",
59 t5PaymentPeriod: "缴费年期",
60 t5PaymentMethod: "缴费方式",
61 t5PaymentCurrency: "缴费币种",
62 t5CurrentPremium: "当期保费",
63 t5PaymentBank: "缴费银行",
64 t5PaymentAccount: "缴费账号",
65
66 t6Title: "缴费记录",
67 t6PaymentPeriod: "缴费期",
68 t6PaymentMethod: "缴费方式",
69 t6ClosingDate: "实收日期",
70 t6PaymentAmount: "缴费金额",
71 }
72 } 72 }
73 }
74
...\ No newline at end of file ...\ No newline at end of file
73 }
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10
11 insuranceForm: {
12 f1 : true,
13 f2 : true,
14 f3 : true,
15 f4 : true,
16 f5 : true,
17 }
18 }
19 },
20 }
1
2 .cell-group {
3 margin-bottom: 1rem /* 12/12 */;
4 div{
5 font-size: 1rem /* 12/12 */;
6 color: #4c4948;
7 }
8
9 .w1 {
10 min-width: 9.166667rem /* 110/12 */;
11 text-align: center;
12 }
13
14 .w2 {
15 min-width: 6.25rem /* 75/12 */;
16 text-align: center;
17 }
18
19 .table-header {
20 width: 64.166667rem /* 770/12 */;
21 height: 2.5rem /* 30/12 */;
22 border-top-left-radius: .666667rem /* 8/12 */;
23 border-top-right-radius: .666667rem /* 8/12 */;
24 background-color: #f2f2f2;
25 display: flex;
26 align-items: center;
27
28 .normal-header {
29 width: 58.833333rem /* 706/12 */;
30 margin: auto;
31 display: flex;
32 justify-content: space-between;
33 align-items: center;
34
35 .title {
36 font-size: 1rem /* 12/12 */;
37 font-weight: bold;
38 color: #575453;
39 }
40
41 .guide {
42 transition: all 0.5s;
43 cursor: pointer;
44 width: 1rem /* 12/12 */;
45 height: .666667rem /* 8/12 */ ;
46 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
47 background-size: 100% 100%;
48 }
49
50 .rotate180 {
51 transform: rotate(180deg);
52 transition: all 0.5s;
53 }
54 }
55 }
56
57 .table-content {
58 width: 64.166667rem /* 770/12 */;
59 height: auto;
60 display: inline-block;
61 border-bottom-left-radius: .666667rem /* 8/12 */;
62 border-bottom-right-radius: .666667rem /* 8/12 */;
63 border-left: solid .083333rem /* 1/12 */ #f2f2f2;
64 border-right: solid .083333rem /* 1/12 */ #f2f2f2;
65 border-bottom: solid .083333rem /* 1/12 */ #f2f2f2;
66 padding: 0 2.583333rem /* 31/12 */;
67 max-height: 41.666667rem /* 500/12 */;
68 transition: max-height ease-out 0.3s !important;
69 overflow: hidden;
70
71 .data-line {
72 height: 4.416667rem /* 53/12 */;
73 margin: auto;
74 display: flex;
75 justify-content: space-between;
76 align-items: center;
77
78 .cell1 {
79 width: 29.166667rem /* 350/12 */;
80 display: flex;
81 justify-content: space-between;
82 margin: auto;
83 }
84
85 .separator-v {
86 height: 2.5rem /* 30/12 */;
87 width: .166667rem /* 2/12 */;
88 background-color: #f2f2f2;
89 margin: 0 .916667rem /* 11/12 */;
90 }
91 }
92
93 .label span {
94 color: #f05a23;
95 margin-left: .583333rem /* 7/12 */;
96 cursor: pointer;
97 text-decoration: underline;
98 }
99
100 .separator-h {
101 width: 58.833333rem /* 706/12 */;
102 height: .083333rem /* 1/12 */;
103 background-color: #f2f2f2;
104 }
105 }
106 .orange {
107 background-color: #f05a23 !important;
108 div {
109 color: #ffffff;
110 }
111 }
112
113 .hide {
114 max-height: 0;
115 border-bottom:none;
116 }
117
118 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div>
3 <div class="cell-group">
4 <div class="table-header orange">
5 <div class="normal-header">
6 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
7 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
8 <div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
9 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
10 <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
11 <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
12 </div>
13 </div>
14 <div class="table-content">
15 <div class="data-line">
16 <div class="td w1">P3**********0772</div>
17 <div class="td w2">平安</div>
18 <div class="td w2">分红重疾</div>
19 <div class="td w2">HK$10,000</div>
20 <div class="td w2">2020-1-1</div>
21 <div class="td w2">終身</div>
22 </div>
23 </div>
24 </div>
25
26 <div class="cell-group">
27 <div class="table-header">
28 <div class="normal-header">
29 <div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
30 <div
31 class="guide"
32 :class="{rotate180 : !insuranceForm.f1}"
33 @click="insuranceForm.f1 = !insuranceForm.f1"
34 ></div>
35 </div>
36 </div>
37 <div class="table-content" :class="{hide : !insuranceForm.f1}">
38 <div class="data-line">
39 <div class="cell1">
40 <div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
41 <div class="label">分紅重疾</div>
42 </div>
43 <div class="separator-v"></div>
44 <div class="cell1">
45 <div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
46 <div class="label">HK$10,000</div>
47 </div>
48 </div>
49 <div class="separator-h"></div>
50 <div class="data-line">
51 <div class="cell1">
52 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
53 <div class="label">2020-1-1</div>
54 </div>
55 <div class="separator-v"></div>
56 <div class="cell1">
57 <div class="label">{{$t('customService.insuranceQuery.period')}}</div>
58 <div class="label">终身</div>
59 </div>
60 </div>
61 </div>
62 </div>
63
64 <div class="cell-group">
65 <div class="table-header">
66 <div class="normal-header">
67 <div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
68 <div
69 class="guide"
70 :class="{rotate180 : !insuranceForm.f2}"
71 @click="insuranceForm.f2 = !insuranceForm.f2"
72 ></div>
73 </div>
74 </div>
75 <div class="table-content" :class="{hide : !insuranceForm.f2}">
76 <div class="data-line">
77 <div class="cell1">
78 <div class="label">
79 {{$t('customService.insuranceQuery.t3InsurantNameCn')}}
80 <span>修改</span>
81 </div>
82 <div class="label">平安</div>
83 </div>
84 <div class="separator-v"></div>
85 <div class="cell1">
86 <div class="label">
87 {{$t('customService.insuranceQuery.t3InsurantNameEn')}}
88 <span>修改</span>
89 </div>
90 <div class="label">Pingan</div>
91 </div>
92 </div>
93 <div class="separator-h"></div>
94 <div class="data-line">
95 <div class="cell1">
96 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
97 <div class="label">2020-1-1</div>
98 </div>
99 <div class="separator-v"></div>
100 <div class="cell1">
101 <div class="label">
102 {{$t('customService.insuranceQuery.t3InsurantIdNumber')}}
103 <span>修改</span>
104 </div>
105 <div class="label">123*****567</div>
106 </div>
107 </div>
108 <div class="separator-h"></div>
109 <div class="data-line">
110 <div class="cell1">
111 <div class="label">
112 {{$t('customService.insuranceQuery.t3InsurantContactAddress')}}
113 <span>修改</span>
114 </div>
115 <div class="label">深圳市益田路5033號</div>
116 </div>
117 <div class="separator-v"></div>
118 <div class="cell1">
119 <div class="label">
120 {{$t('customService.insuranceQuery.t3InsurantAddress')}}
121 <span>修改</span>
122 </div>
123 <div class="label">深圳市益田路5033號</div>
124 </div>
125 </div>
126
127 <div class="separator-h"></div>
128 <div class="data-line">
129 <div class="cell1">
130 <div class="label">
131 {{$t('customService.insuranceQuery.t3InsurantMobile')}}
132 <span>修改</span>
133 </div>
134 <div class="label">（852）2888 8888</div>
135 </div>
136 <div class="separator-v"></div>
137 <div class="cell1">
138 <div class="label">
139 {{$t('customService.insuranceQuery.t3InsurantEmail')}}
140 <span>修改</span>
141 </div>
142 <div class="label">123@ping.com.cn</div>
143 </div>
144 </div>
145
146 <div class="separator-h"></div>
147 <div class="data-line">
148 <div class="cell1">
149 <div class="label">
150 {{$t('customService.insuranceQuery.t3InsuredNameCn')}}
151 <span>修改</span>
152 </div>
153 <div class="label">平安</div>
154 </div>
155 <div class="separator-v"></div>
156 <div class="cell1">
157 <div class="label">
158 {{$t('customService.insuranceQuery.t3InsuredNameEn')}}
159 <span>修改</span>
160 </div>
161 <div class="label">Pingan</div>
162 </div>
163 </div>
164
165 <div class="separator-h"></div>
166 <div class="data-line">
167 <div class="cell1">
168 <div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
169 <div class="label">1999-1-1</div>
170 </div>
171 <div class="separator-v"></div>
172 <div class="cell1">
173 <div class="label">
174 {{$t('customService.insuranceQuery.t3InsuredIdNumber')}}
175 <span>修改</span>
176 </div>
177 <div class="label">123*****567</div>
178 </div>
179 </div>
180 </div>
181 </div>
182
183 <div class="cell-group">
184 <div class="table-header">
185 <div class="normal-header">
186 <div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
187 <div
188 class="guide"
189 :class="{rotate180 : !insuranceForm.f3}"
190 @click="insuranceForm.f3 = !insuranceForm.f3"
191 ></div>
192 </div>
193 </div>
194 <div class="table-content" :class="{hide : !insuranceForm.f3}">
195 <div class="data-line">
196 <div class="td">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
197 <div class="td">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
198 <div class="td">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
199 </div>
200 <div class="separator-h"></div>
201 <div class="data-line">
202 <div class="td">張三</div>
203 <div class="td">Zhangsan</div>
204 <div class="td">50%</div>
205 </div>
206 <div class="separator-h"></div>
207 <div class="data-line">
208 <div class="td">李四</div>
209 <div class="td">Lisi</div>
210 <div class="td">50%</div>
211 </div>
212 </div>
213 </div>
214
215 <div class="cell-group">
216 <div class="table-header">
217 <div class="normal-header">
218 <div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
219 <div
220 class="guide"
221 :class="{rotate180 : !insuranceForm.f4}"
222 @click="insuranceForm.f4 = !insuranceForm.f4"
223 ></div>
224 </div>
225 </div>
226 <div class="table-content" :class="{hide : !insuranceForm.f4}">
227 <div class="data-line">
228 <div class="cell1">
229 <div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
230 <div class="label">30年</div>
231 </div>
232 <div class="separator-v"></div>
233 <div class="cell1">
234 <div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
235 <div class="label">銀行轉帳</div>
236 </div>
237 </div>
238 <div class="separator-h"></div>
239
240 <div class="data-line">
241 <div class="cell1">
242 <div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
243 <div class="label">港幣</div>
244 </div>
245 <div class="separator-v"></div>
246 <div class="cell1">
247 <div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
248 <div class="label">HK$2,000</div>
249 </div>
250 </div>
251 <div class="separator-h"></div>
252
253 <div class="data-line">
254 <div class="cell1">
255 <div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
256 <div class="label">平安銀行</div>
257 </div>
258 <div class="separator-v"></div>
259 <div class="cell1">
260 <div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
261 <div class="label">1234******888</div>
262 </div>
263 </div>
264 <div class="separator-h"></div>
265 </div>
266 </div>
267
268 <div class="cell-group">
269 <div class="table-header">
270 <div class="normal-header">
271 <div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
272 <div
273 class="guide"
274 :class="{rotate180 : !insuranceForm.f5}"
275 @click="insuranceForm.f5 = !insuranceForm.f5"
276 ></div>
277 </div>
278 </div>
279 <div class="table-content" :class="{hide : !insuranceForm.f5}">
280 <div class="data-line">
281 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
282 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
283 <div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
284 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
285 </div>
286 <div class="separator-h"></div>
287 <div class="data-line">
288 <div class="td w2">首期</div>
289 <div class="td w2">現金</div>
290 <div class="td w2">2020-1-1</div>
291 <div class="td w2">HK$2,000</div>
292 </div>
293 <div class="separator-h"></div>
294 <div class="data-line">
295 <div class="td w2">第二期</div>
296 <div class="td w2">現金</div>
297 <div class="td w2">2020-1-1</div>
298 <div class="td w2">HK$2,000</div>
299 </div>
300 </div>
301 </div>
302 </div>
303 </template>
304
305
306 <script src="./insurance-query.js"></script>
307 <style lang="scss" scoped>
308 @import "./insurance-query.scss";
309 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,27 +4,23 @@ import { ...@@ -4,27 +4,23 @@ import {
4 httpPost 4 httpPost
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7 // import InsuranceQuery from './components/insurance-query' 7 import InsuranceQuery from './components/insurance-query'
8 8
9 export default { 9 export default {
10 data() { 10 data() {
11 return { 11 return {
12 activity: "m1", 12 activity: "m1"
13
14 insuranceForm: {
15 f1 : true,
16 f2 : true,
17 f3 : true,
18 f4 : true,
19 f5 : true,
20 }
21 } 13 }
22 }, 14 },
23 methods: { 15 methods: {
24 initData() { }, 16 initData() { },
25 }, 17 },
26 created() { }, 18 created() {
19 let activity = this.$route.params.p;
20 activity = activity ? activity : "m1";
21 this.activity = activity;
22 },
27 components: { 23 components: {
28 // InsuranceQuery 24 InsuranceQuery
29 } 25 }
30 } 26 }
......
...@@ -121,126 +121,6 @@ ...@@ -121,126 +121,6 @@
121 } 121 }
122 } 122 }
123 123
124
125 /** 可以抽出来作为一个插件 **/
126 .cell-group {
127 margin-bottom: 1rem /* 12/12 */;
128 div{
129 font-size: 1rem /* 12/12 */;
130 color: #4c4948;
131 }
132
133 .w1 {
134 min-width: 9.166667rem /* 110/12 */;
135 text-align: center;
136 }
137
138 .w2 {
139 min-width: 6.25rem /* 75/12 */;
140 text-align: center;
141 }
142
143 .table-header {
144 width: 64.166667rem /* 770/12 */;
145 height: 2.5rem /* 30/12 */;
146 border-top-left-radius: .666667rem /* 8/12 */;
147 border-top-right-radius: .666667rem /* 8/12 */;
148 background-color: #f2f2f2;
149 display: flex;
150 align-items: center;
151
152 .normal-header {
153 width: 58.833333rem /* 706/12 */;
154 margin: auto;
155 display: flex;
156 justify-content: space-between;
157 align-items: center;
158
159 .title {
160 font-size: 1rem /* 12/12 */;
161 font-weight: bold;
162 color: #575453;
163 }
164
165 .guide {
166 transition: all 0.5s;
167 cursor: pointer;
168 width: 1rem /* 12/12 */;
169 height: .666667rem /* 8/12 */ ;
170 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
171 background-size: 100% 100%;
172 }
173
174 .rotate180 {
175 transform: rotate(180deg);
176 transition: all 0.5s;
177 }
178 }
179 }
180
181 .table-content {
182 width: 64.166667rem /* 770/12 */;
183 height: auto;
184 display: inline-block;
185 border-bottom-left-radius: .666667rem /* 8/12 */;
186 border-bottom-right-radius: .666667rem /* 8/12 */;
187 border-left: solid .083333rem /* 1/12 */ #f2f2f2;
188 border-right: solid .083333rem /* 1/12 */ #f2f2f2;
189 border-bottom: solid .083333rem /* 1/12 */ #f2f2f2;
190 padding: 0 2.583333rem /* 31/12 */;
191 max-height: 41.666667rem /* 500/12 */;
192 transition: max-height ease-out 0.3s !important;
193 overflow: hidden;
194
195 .data-line {
196 height: 4.416667rem /* 53/12 */;
197 margin: auto;
198 display: flex;
199 justify-content: space-between;
200 align-items: center;
201
202 .cell1 {
203 width: 29.166667rem /* 350/12 */;
204 display: flex;
205 justify-content: space-between;
206 margin: auto;
207 }
208
209 .separator-v {
210 height: 2.5rem /* 30/12 */;
211 width: .166667rem /* 2/12 */;
212 background-color: #f2f2f2;
213 margin: 0 .916667rem /* 11/12 */;
214 }
215 }
216
217 .label span {
218 color: #f05a23;
219 margin-left: .583333rem /* 7/12 */;
220 cursor: pointer;
221 text-decoration: underline;
222 }
223
224 .separator-h {
225 width: 58.833333rem /* 706/12 */;
226 height: .083333rem /* 1/12 */;
227 background-color: #f2f2f2;
228 }
229 }
230 .orange {
231 background-color: #f05a23 !important;
232 div {
233 color: #ffffff;
234 }
235 }
236
237 .hide {
238 max-height: 0;
239 border-bottom:none;
240 }
241
242 }
243
244 .empty-line { 124 .empty-line {
245 height: 1.333333rem /* 16/12 */; 125 height: 1.333333rem /* 16/12 */;
246 } 126 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="content"> 2 <div class="content">
3
3 <div class="left-panel"> 4 <div class="left-panel">
4 <div class="menu-item" :class="{activity : activity == 'm1'}" @click="activity = 'm1'"> 5 <div class="menu-item" :class="{activity : activity == 'm1'}" @click="activity = 'm1'">
5 <i class="m1"></i>{{$t('customService.menu1')}} 6 <i class="m1"></i>{{$t('customService.menu1')}}
...@@ -48,276 +49,7 @@ ...@@ -48,276 +49,7 @@
48 </div> 49 </div>
49 <div class="right-panel"> 50 <div class="right-panel">
50 <div class="panel" :class="{activity : activity == 'm1'}"> 51 <div class="panel" :class="{activity : activity == 'm1'}">
51 <div class="cell-group"> 52 <insurance-query></insurance-query>
52 <div class="table-header orange">
53 <div class="normal-header">
54 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
55 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
56 <div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
57 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
58 <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
59 <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
60 </div>
61 </div>
62 <div class="table-content">
63 <div class="data-line">
64 <div class="td w1">P3**********0772</div>
65 <div class="td w2">平安</div>
66 <div class="td w2">分红重疾</div>
67 <div class="td w2">HK$10,000</div>
68 <div class="td w2">2020-1-1</div>
69 <div class="td w2">終身</div>
70 </div>
71 </div>
72 </div>
73
74 <div class="cell-group">
75 <div class="table-header">
76 <div class="normal-header">
77 <div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
78 <div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
79 </div>
80 </div>
81 <div class="table-content" :class="{hide : !insuranceForm.f1}">
82 <div class="data-line">
83 <div class="cell1">
84 <div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
85 <div class="label">分紅重疾</div>
86 </div>
87 <div class="separator-v"></div>
88 <div class="cell1">
89 <div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
90 <div class="label">HK$10,000</div>
91 </div>
92 </div>
93 <div class="separator-h"></div>
94 <div class="data-line">
95 <div class="cell1">
96 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
97 <div class="label">2020-1-1</div>
98 </div>
99 <div class="separator-v"></div>
100 <div class="cell1">
101 <div class="label">{{$t('customService.insuranceQuery.period')}}</div>
102 <div class="label">终身</div>
103 </div>
104 </div>
105 </div>
106 </div>
107
108 <div class="cell-group">
109 <div class="table-header">
110 <div class="normal-header">
111 <div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
112 <div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
113 </div>
114 </div>
115 <div class="table-content" :class="{hide : !insuranceForm.f2}">
116 <div class="data-line">
117 <div class="cell1">
118 <div class="label">
119 {{$t('customService.insuranceQuery.t3InsurantNameCn')}}<span>修改</span>
120 </div>
121 <div class="label">平安</div>
122 </div>
123 <div class="separator-v"></div>
124 <div class="cell1">
125 <div class="label">
126 {{$t('customService.insuranceQuery.t3InsurantNameEn')}}<span>修改</span>
127 </div>
128 <div class="label">Pingan</div>
129 </div>
130 </div>
131 <div class="separator-h"></div>
132 <div class="data-line">
133 <div class="cell1">
134 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
135 <div class="label">2020-1-1</div>
136 </div>
137 <div class="separator-v"></div>
138 <div class="cell1">
139 <div class="label">
140 {{$t('customService.insuranceQuery.t3InsurantIdNumber')}}<span>修改</span>
141 </div>
142 <div class="label">123*****567</div>
143 </div>
144 </div>
145 <div class="separator-h"></div>
146 <div class="data-line">
147 <div class="cell1">
148 <div class="label">
149 {{$t('customService.insuranceQuery.t3InsurantContactAddress')}}<span>修改</span>
150 </div>
151 <div class="label">深圳市益田路5033號</div>
152 </div>
153 <div class="separator-v"></div>
154 <div class="cell1">
155 <div class="label">
156 {{$t('customService.insuranceQuery.t3InsurantAddress')}}<span>修改</span>
157 </div>
158 <div class="label">深圳市益田路5033號</div>
159 </div>
160 </div>
161
162 <div class="separator-h"></div>
163 <div class="data-line">
164 <div class="cell1">
165 <div class="label">
166 {{$t('customService.insuranceQuery.t3InsurantMobile')}}<span>修改</span>
167 </div>
168 <div class="label">（852）2888 8888</div>
169 </div>
170 <div class="separator-v"></div>
171 <div class="cell1">
172 <div class="label">
173 {{$t('customService.insuranceQuery.t3InsurantEmail')}}<span>修改</span>
174 </div>
175 <div class="label">123@ping.com.cn</div>
176 </div>
177 </div>
178
179 <div class="separator-h"></div>
180 <div class="data-line">
181 <div class="cell1">
182 <div class="label">
183 {{$t('customService.insuranceQuery.t3InsuredNameCn')}}<span>修改</span>
184 </div>
185 <div class="label">平安</div>
186 </div>
187 <div class="separator-v"></div>
188 <div class="cell1">
189 <div class="label">
190 {{$t('customService.insuranceQuery.t3InsuredNameEn')}}<span>修改</span>
191 </div>
192 <div class="label">Pingan</div>
193 </div>
194 </div>
195
196 <div class="separator-h"></div>
197 <div class="data-line">
198 <div class="cell1">
199 <div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
200 <div class="label">1999-1-1</div>
201 </div>
202 <div class="separator-v"></div>
203 <div class="cell1">
204 <div class="label">
205 {{$t('customService.insuranceQuery.t3InsuredIdNumber')}}<span>修改</span>
206 </div>
207 <div class="label">123*****567</div>
208 </div>
209 </div>
210 </div>
211 </div>
212
213 <div class="cell-group">
214 <div class="table-header">
215 <div class="normal-header">
216 <div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
217 <div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
218 </div>
219 </div>
220 <div class="table-content" :class="{hide : !insuranceForm.f3}">
221 <div class="data-line">
222 <div class="td">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
223 <div class="td">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
224 <div class="td">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
225 </div>
226 <div class="separator-h"></div>
227 <div class="data-line">
228 <div class="td">張三</div>
229 <div class="td">Zhangsan</div>
230 <div class="td">50%</div>
231 </div>
232 <div class="separator-h"></div>
233 <div class="data-line">
234 <div class="td">李四</div>
235 <div class="td">Lisi</div>
236 <div class="td">50%</div>
237 </div>
238 </div>
239 </div>
240
241 <div class="cell-group">
242 <div class="table-header">
243 <div class="normal-header">
244 <div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
245 <div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
246 </div>
247 </div>
248 <div class="table-content" :class="{hide : !insuranceForm.f4}">
249 <div class="data-line">
250 <div class="cell1">
251 <div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
252 <div class="label">30年</div>
253 </div>
254 <div class="separator-v"></div>
255 <div class="cell1">
256 <div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
257 <div class="label">銀行轉帳</div>
258 </div>
259 </div>
260 <div class="separator-h"></div>
261
262 <div class="data-line">
263 <div class="cell1">
264 <div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
265 <div class="label">港幣</div>
266 </div>
267 <div class="separator-v"></div>
268 <div class="cell1">
269 <div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
270 <div class="label">HK$2,000</div>
271 </div>
272 </div>
273 <div class="separator-h"></div>
274
275 <div class="data-line">
276 <div class="cell1">
277 <div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
278 <div class="label">平安銀行</div>
279 </div>
280 <div class="separator-v"></div>
281 <div class="cell1">
282 <div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
283 <div class="label">1234******888</div>
284 </div>
285 </div>
286 <div class="separator-h"></div>
287 </div>
288 </div>
289
290 <div class="cell-group">
291 <div class="table-header">
292 <div class="normal-header">
293 <div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
294 <div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
295 </div>
296 </div>
297 <div class="table-content" :class="{hide : !insuranceForm.f5}">
298 <div class="data-line">
299 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
300 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
301 <div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
302 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
303 </div>
304 <div class="separator-h"></div>
305 <div class="data-line">
306 <div class="td w2">首期</div>
307 <div class="td w2">現金</div>
308 <div class="td w2">2020-1-1</div>
309 <div class="td w2">HK$2,000</div>
310 </div>
311 <div class="separator-h"></div>
312 <div class="data-line">
313 <div class="td w2">第二期</div>
314 <div class="td w2">現金</div>
315 <div class="td w2">2020-1-1</div>
316 <div class="td w2">HK$2,000</div>
317 </div>
318 </div>
319 </div>
320
321 <div class="empty-line"></div> 53 <div class="empty-line"></div>
322 </div> 54 </div>
323 <div class="panel" :class="{activity : activity == 'm2'}">m2</div> 55 <div class="panel" :class="{activity : activity == 'm2'}">m2</div>
......