Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
ae2b9504 by simon
Options

1.首页样式/国际化 

2.电子通知书查询样式调整
1 parent a0a43001
Expand all
Inline Side-by-side
Showing 8 changed files with 158 additions and 81 deletions
1 module.exports = { 1 module.exports = {
2 common: {
3 Confirm:"Confirm",
4 Cancel:"Cancel",
5 },
2 message: { 6 message: {
3 login: 'Login', 7 login: 'Login',
4 Username: 'Username', 8 Username: 'Username',
...@@ -369,29 +373,56 @@ module.exports = { ...@@ -369,29 +373,56 @@ module.exports = {
369 customService: "contact customer service hotline", 373 customService: "contact customer service hotline",
370 }, 374 },
371 index: { 375 index: {
372 news: "新聞資訊", 376 // news: "新聞資訊",
373 newMore: "查看更多", 377 // newMore: "查看更多",
374 recommend: { 378 // recommend: {
375 t1: "Online Quotation", 379 // t1: "Online Quotation",
376 t2: "Customer Service", 380 // t2: "Customer Service",
377 t3: "Products", 381 // t3: "Products",
378 t4: "Latest News", 382 // t4: "Latest News",
379 item1: { 383 // item1: {
380 btn: "了解更多產品", 384 // btn: "了解更多產品",
381 t1: "為自己和家人尋找壹份保障", 385 // t1: "為自己和家人尋找壹份保障",
382 }, 386 // },
383 item2: { 387 // item2: {
384 btn: "立即預約", 388 // btn: "立即預約",
385 t1: "在線預約 專業服務", 389 // t1: "在線預約 專業服務",
386 }, 390 // },
387 item3: { 391 // item3: {
388 btn: "客户服务", 392 // btn: "客户服务",
389 t1: "專業客服為妳服務", 393 // t1: "專業客服為妳服務",
390 t2: "想了解更多，可致電", 394 // t2: "想了解更多，可致電",
391 t3: "95511", 395 // t3: "95511",
392 t4: "聯絡我們，或進入", 396 // t4: "聯絡我們，或進入",
397 // }
398 // },
399 recommend:{
400 title:"為何選擇平安人壽？",
401 contact:"Contact us",
402 item1:{
403 desc:"E-service at Finger Tips",
404 },
405 item2:{
406 desc:"Serving more than 200 million customers",
407 },
408 item3:{
409 desc:"International risk management standard",
410 },
411 },
412 contact:{
413 t1:"Contact us for more product information.",
414 t2:"Leave your contact or call us at 2983 8866.",
415 form:{
416 Title:"Title",
417 Name:"Name",
418 PhoneNumber:"Phone number",
419 Email:"Email",
420 Time:"Preferred contact time slot",
421 Inquiry:"Inquiry",
422 Submit:"Submit",
393 } 423 }
394 }, 424 }
425
395 }, 426 },
396 complaintAcceptance: { 427 complaintAcceptance: {
397 name: "Name", 428 name: "Name",
......
1 @import '@/styles/_support.scss'; 1 @import "@/styles/_support.scss";
2 2
3 .list-container { 3 .list-container {
4 overflow-x: auto; 4 overflow-x: auto;
...@@ -17,20 +17,27 @@ ...@@ -17,20 +17,27 @@
17 17
18 .download { 18 .download {
19 position: relative; 19 position: relative;
20 display: flex;
21 align-items: center;
20 22
21 &-tips { 23 &-tips {
22 display: none; 24 display: none;
23 position: absolute; 25 position: absolute;
24 top: -3px; 26 top: 0px;
25 left: 20px; 27 left: 20px;
26 z-index: 11; 28 z-index: 11;
27 padding: 2px; 29 padding: 2px;
28 @include border-tans(); 30 @include border-tans();
29 min-width: 80px; 31 min-width: 88px;
32 padding: 4px;
30 } 33 }
31 img{ 34
35 .icon-download {
32 margin-right: 4px; 36 margin-right: 4px;
33 } 37 }
38 .desc{
39 padding: 0;
40 }
34 } 41 }
35 42
36 .guide { 43 .guide {
...@@ -39,7 +46,8 @@ ...@@ -39,7 +46,8 @@
39 cursor: pointer; 46 cursor: pointer;
40 width: 12px; 47 width: 12px;
41 height: 8px; 48 height: 8px;
42 background: url("~@/assets/images/insurance-query/triangle-down2.png") no-repeat center center; 49 background: url("~@/assets/images/insurance-query/triangle-down2.png")
50 no-repeat center center;
43 background-size: 100% 100%; 51 background-size: 100% 100%;
44 top: 16px; 52 top: 16px;
45 right: 26px; 53 right: 26px;
...@@ -64,16 +72,25 @@ ...@@ -64,16 +72,25 @@
64 .td { 72 .td {
65 position: relative; 73 position: relative;
66 @extend .fcc; 74 @extend .fcc;
75 text-align: center;
67 } 76 }
68 77
69 .w1 { 78 .w1 {
70 width: 240px; 79 width: 180px;
71 text-align: center;
72 } 80 }
73 81
74 .w2 { 82 .w2 {
75 width: 150px; 83 width: 240px;
76 text-align: center; 84 }
85
86 .w3 {
87 width: 140px;
88 }
89 .w4 {
90 width: 120px;
91 }
92 .w5 {
93 width: 100px;
77 } 94 }
78 95
79 .table-header { 96 .table-header {
...@@ -104,7 +121,8 @@ ...@@ -104,7 +121,8 @@
104 cursor: pointer; 121 cursor: pointer;
105 width: 12px; 122 width: 12px;
106 height: 8px; 123 height: 8px;
107 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center; 124 background: url("~@/assets/images/insurance-query/triangle-down.png")
125 no-repeat center center;
108 background-size: 100% 100%; 126 background-size: 100% 100%;
109 } 127 }
110 128
...@@ -215,10 +233,10 @@ ...@@ -215,10 +233,10 @@
215 233
216 .activity { 234 .activity {
217 background-color: $cOrange !important; 235 background-color: $cOrange !important;
218 opacity: .5; 236 opacity: 0.5;
219 237
220 div { 238 div {
221 color: #FFFFFF !important; 239 color: #ffffff !important;
222 } 240 }
223 } 241 }
224 242
...@@ -244,7 +262,7 @@ ...@@ -244,7 +262,7 @@
244 } 262 }
245 263
246 .down-arrow { 264 .down-arrow {
247 background-image: url('~@/assets/images/common/down-arrow-white.png'); 265 background-image: url("~@/assets/images/common/down-arrow-white.png");
248 width: 16px; 266 width: 16px;
249 height: 12px; 267 height: 12px;
250 background-repeat: no-repeat; 268 background-repeat: no-repeat;
......
1 <template> 1 <template>
2 <div class="list-container"> 2 <div class="list-container">
3 <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp> 3 <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
4 <filter-comp :items="checkList" @confirm="onCheckConfirmHandler" :visible="filterVisible" @close="filterVisible = false"></filter-comp> 4 <filter-comp :items="checkList" @confirm="onCheckConfirmHandler" :visible="filterVisible" @close="filterVisible = false" :confirmText="$t('common.Confirm')" :cancelText="$t('common.Cancel')"></filter-comp>
5 <div class="cell-group"> 5 <div class="cell-group">
6 <div class="table-contaner"> 6 <div class="table-contaner">
7 <div class="table-header orange new"> 7 <div class="table-header orange new">
...@@ -9,16 +9,16 @@ ...@@ -9,16 +9,16 @@
9 <div class="td w1">{{$t('eCorrespondenceEnquiry.PolicyNumber')}} 9 <div class="td w1">{{$t('eCorrespondenceEnquiry.PolicyNumber')}}
10 <div @click="onFilterHandler('bizNo')" class="down-arrow"></div> 10 <div @click="onFilterHandler('bizNo')" class="down-arrow"></div>
11 </div> 11 </div>
12 <div class="td w1">{{$t('eCorrespondenceEnquiry.TypeOfCorrespondence')}} 12 <div class="td w2">{{$t('eCorrespondenceEnquiry.TypeOfCorrespondence')}}
13 <div @click="onFilterHandler('letterType')" class="down-arrow"></div> 13 <div @click="onFilterHandler('letterType')" class="down-arrow"></div>
14 </div> 14 </div>
15 <div class="td w2">{{$t('eCorrespondenceEnquiry.SentOutDate')}} 15 <div class="td w3">{{$t('eCorrespondenceEnquiry.SentOutDate')}}
16 <div @click="onFilterHandler('printTime')" class="down-arrow"></div> 16 <div @click="onFilterHandler('printTime')" class="down-arrow"></div>
17 </div> 17 </div>
18 <div class="td w2">{{$t('eCorrespondenceEnquiry.DownloadLink')}} 18 <div class="td w4">{{$t('eCorrespondenceEnquiry.DownloadLink')}}
19 19
20 </div> 20 </div>
21 <div @click="onFilterHandler('isRead')" class="td w2">{{$t('eCorrespondenceEnquiry.Status')}} 21 <div @click="onFilterHandler('isRead')" class="td w5">{{$t('eCorrespondenceEnquiry.Status')}}
22 <div class="down-arrow"></div> 22 <div class="down-arrow"></div>
23 </div> 23 </div>
24 </div> 24 </div>
...@@ -30,18 +30,18 @@ ...@@ -30,18 +30,18 @@
30 <template v-if="index < maxShow"> 30 <template v-if="index < maxShow">
31 <div class="data-line"> 31 <div class="data-line">
32 <div class="td w1">{{item.bizNo}}</div> 32 <div class="td w1">{{item.bizNo}}</div>
33 <div class="td w1">{{$t("eCorrespondenceEnquiry.letterName")}}</div> 33 <div class="td w2">{{$t("eCorrespondenceEnquiry.letterName")}}</div>
34 <div class="td w2">{{item.printTime.split(" ")[0]}}</div> 34 <div class="td w3">{{item.printTime.split(" ")[0]}}</div>
35 <div class="td w2 pointer" @click="downloadPolicy(item)"> 35 <div class="td w4 pointer" @click="downloadPolicy(item)">
36 <div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)" > 36 <div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)" >
37 <div class="download-tips"> 37 <div class="download-tips">
38 <div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div> 38 <div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div>
39 </div> 39 </div>
40 <img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""> 40 <img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt="">
41 <div class="desc">{{$t("eCorrespondenceEnquiry.DownloadDoc")}}</div>
41 </div> 42 </div>
42 {{$t("eCorrespondenceEnquiry.DownloadDoc")}}
43 </div> 43 </div>
44 <div class="td w2">{{item.isRead == "N" ? $t('eCorrespondenceEnquiry.UnRead') : $t('eCorrespondenceEnquiry.Read')}}</div> 44 <div class="td w5">{{item.isRead == "N" ? $t('eCorrespondenceEnquiry.UnRead') : $t('eCorrespondenceEnquiry.Read')}}</div>
45 </div> 45 </div>
46 <div class="separator-h" v-if="index < contentList.length - 1 && index < maxShow - 1"></div> 46 <div class="separator-h" v-if="index < contentList.length - 1 && index < maxShow - 1"></div>
47 </template> 47 </template>
......
...@@ -141,14 +141,14 @@ ...@@ -141,14 +141,14 @@
141 .features { 141 .features {
142 display: flex; 142 display: flex;
143 justify-content: center; 143 justify-content: center;
144 align-items: center; 144 align-items: flex-start;
145 margin: 44px auto 0; 145 margin: 44px auto 0;
146 146
147 &-item { 147 &-item {
148 position: relative; 148 position: relative;
149 text-align: center; 149 text-align: center;
150 font-size: 22px; 150 font-size: 22px;
151 width: 316px; 151 width: 306px;
152 152
153 .icon { 153 .icon {
154 @extend .fcc; 154 @extend .fcc;
...@@ -157,7 +157,8 @@ ...@@ -157,7 +157,8 @@
157 } 157 }
158 158
159 .desc { 159 .desc {
160 margin-top: 16px; 160 max-width: 200px;
161 margin: 16px auto 0;
161 } 162 }
162 } 163 }
163 } 164 }
...@@ -245,21 +246,30 @@ ...@@ -245,21 +246,30 @@
245 } 246 }
246 } 247 }
247 } 248 }
248 &-cont { 249
250 .linear{
249 @include linear-bg; 251 @include linear-bg;
250 height: 380px; 252 height: 8px;
251 margin: -4px auto 0; 253 margin: -5px auto 0;
252 position: relative; 254 position: relative;
253 z-index: 11; 255 z-index: 11;
256 }
257
258 &-cont {
259
260 height: 380px;
261 margin: 0 auto 0;
262 position: relative;
254 display: flex; 263 display: flex;
255 264
256 .panel { 265 .panel {
257 position: relative; 266 position: relative;
258 margin-top: 5px; 267 // margin-top: 5px;
259 width: 50%; 268 width: 50%;
260 } 269 }
261 270
262 .panel-left { 271 .panel-left {
272 @include linear-bg;
263 position: relative; 273 position: relative;
264 @extend .fcc; 274 @extend .fcc;
265 .desc { 275 .desc {
...@@ -445,6 +455,12 @@ ...@@ -445,6 +455,12 @@
445 color: $cOrange; 455 color: $cOrange;
446 min-height: 28px; 456 min-height: 28px;
447 margin: 12px 0; 457 margin: 12px 0;
458 display: flex;
459 align-items: flex-start;
460 .icon{
461 margin-top: 2px;
462 margin-right: 3px;
463 }
448 } 464 }
449 465
450 .submit-btn { 466 .submit-btn {
......
...@@ -64,50 +64,37 @@ ...@@ -64,50 +64,37 @@
64 </div> 64 </div>
65 <!-- 推荐 为什么选择平安人寿 --> 65 <!-- 推荐 为什么选择平安人寿 -->
66 <div class="content recommend"> 66 <div class="content recommend">
67 <div class="tit">為何選擇平安人壽？</div> 67 <div class="tit">{{ $t("index.recommend.title") }}</div>
68 <div class="features"> 68 <div class="features">
69 <div class="features-item"> 69 <div class="features-item">
70 <div class="icon"> 70 <div class="icon">
71 <img src="@/assets/images/index/recommend-icon-1.png" alt /> 71 <img src="@/assets/images/index/recommend-icon-1.png" alt />
72 </div> 72 </div>
73 <div class="desc"> 73 <div v-html="$t('index.recommend.item1.desc')" class="desc"></div>
74 簡單方便
75 <br />線上客戶服務系統
76 </div>
77 </div> 74 </div>
78 <div class="features-item"> 75 <div class="features-item">
79 <div class="icon"> 76 <div class="icon">
80 <img src="@/assets/images/index/recommend-icon-2.png" alt /> 77 <img src="@/assets/images/index/recommend-icon-2.png" alt />
81 </div> 78 </div>
82 <div class="desc"> 79 <div v-html="$t('index.recommend.item2.desc')" class="desc"></div>
83 信心保證
84 <br />服務超過2億客戶
85 </div>
86 </div> 80 </div>
87 <div class="features-item"> 81 <div class="features-item">
88 <div class="icon"> 82 <div class="icon">
89 <img src="@/assets/images/index/recommend-icon-3.png" alt /> 83 <img src="@/assets/images/index/recommend-icon-3.png" alt />
90 </div> 84 </div>
91 <div class="desc"> 85 <div v-html="$t('index.recommend.item3.desc')" class="desc"></div>
92 國際級
93 <br />風險管理
94 </div>
95 </div> 86 </div>
96 </div> 87 </div>
97 <div @click="toContactUs" class="contact-tips"> 88 <div @click="toContactUs" class="contact-tips">
98 <span class="icon"></span> 89 <span class="icon"></span>
99 聯絡我們 90 {{ $t("index.recommend.contact") }}
100 </div> 91 </div>
101 </div> 92 </div>
102 93
103 <!-- 线上报价 --> 94 <!-- 线上报价 -->
104 <div 95 <div
105 class="quote" 96 class="quote"
106 :style=" 97 :style="'background: url(' + quoteBgUrl + ') center no-repeat;'"
107 'background: url(' +
108 quoteBgUrl +
109 ') center no-repeat;'
110 "
111 > 98 >
112 <div class="space1"></div> 99 <div class="space1"></div>
113 <div class="tit">線上報價 閃速投保</div> 100 <div class="tit">線上報價 閃速投保</div>
...@@ -115,6 +102,7 @@ ...@@ -115,6 +102,7 @@
115 平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃， 102 平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃，
116 涵蓋重點醫療保障，投保流程簡易，全程線上進行。 103 涵蓋重點醫療保障，投保流程簡易，全程線上進行。
117 </div> 104 </div>
105
118 <!-- tab表格 --> 106 <!-- tab表格 -->
119 <div class="table"> 107 <div class="table">
120 <div class="table-tab"> 108 <div class="table-tab">
...@@ -137,11 +125,16 @@ ...@@ -137,11 +125,16 @@
137 </div> 125 </div>
138 </div> 126 </div>
139 <div 127 <div
128 class="linear"
129 :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"
130 ></div>
131 <div
140 class="table-cont" 132 class="table-cont"
141 :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'" 133 :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"
142 > 134 >
143 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> 135 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
144 <div @click="onNextTabHandler()" class="arrow arrow-right"></div> 136 <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
137
145 <div class="panel panel-left"> 138 <div class="panel panel-left">
146 <div class="desc"> 139 <div class="desc">
147 <div class="desc-item">・潛在長線資本增值</div> 140 <div class="desc-item">・潛在長線資本增值</div>
...@@ -243,7 +236,7 @@ ...@@ -243,7 +236,7 @@
243 <el-select 236 <el-select
244 class="ipt" 237 class="ipt"
245 v-model="formData.gender" 238 v-model="formData.gender"
246 :placeholder="'稱呼'" 239 :placeholder="$t('index.contact.form.Title') + '*'"
247 > 240 >
248 <el-option 241 <el-option
249 v-for="(item, index) in genderList" 242 v-for="(item, index) in genderList"
...@@ -257,7 +250,11 @@ ...@@ -257,7 +250,11 @@
257 <!-- 姓名 --> 250 <!-- 姓名 -->
258 <div class="ipt-wrap-linear name"> 251 <div class="ipt-wrap-linear name">
259 <div class="cont"> 252 <div class="cont">
260 <input class="ipt" type="text" placeholder="姓名*" /> 253 <input
254 class="ipt"
255 type="text"
256 :placeholder="$t('index.contact.form.Name') + '*'"
257 />
261 </div> 258 </div>
262 </div> 259 </div>
263 </div> 260 </div>
...@@ -266,7 +263,11 @@ ...@@ -266,7 +263,11 @@
266 <!-- 联系电话 --> 263 <!-- 联系电话 -->
267 <div class="ipt-wrap-linear"> 264 <div class="ipt-wrap-linear">
268 <div class="cont"> 265 <div class="cont">
269 <input class="ipt" type="text" placeholder="聯絡電話*" /> 266 <input
267 class="ipt"
268 type="text"
269 :placeholder="$t('index.contact.form.PhoneNumber') + '*'"
270 />
270 </div> 271 </div>
271 </div> 272 </div>
272 </div> 273 </div>
...@@ -275,7 +276,11 @@ ...@@ -275,7 +276,11 @@
275 <!-- 電郵 --> 276 <!-- 電郵 -->
276 <div class="ipt-wrap-linear"> 277 <div class="ipt-wrap-linear">
277 <div class="cont"> 278 <div class="cont">
278 <input class="ipt" type="text" placeholder="電郵*" /> 279 <input
280 class="ipt"
281 type="text"
282 :placeholder="$t('index.contact.form.Email') + '*'"
283 />
279 </div> 284 </div>
280 </div> 285 </div>
281 </div> 286 </div>
...@@ -285,11 +290,10 @@ ...@@ -285,11 +290,10 @@
285 <div class="ipt-wrap-linear"> 290 <div class="ipt-wrap-linear">
286 <div class="down-arrow"></div> 291 <div class="down-arrow"></div>
287 <div class="cont"> 292 <div class="cont">
288 <!-- <input class="ipt" type="text" placeholder="理想聯絡時間*" /> -->
289 <date-picker 293 <date-picker
290 class="ipt-date" 294 class="ipt-date"
291 :formatter="'dd-MM-yyyy'" 295 :formatter="'dd-MM-yyyy'"
292 :placeholder="'理想聯絡時間'" 296 :placeholder="$t('index.contact.form.Time') + '*'"
293 v-model="formData.birthDate" 297 v-model="formData.birthDate"
294 :filtModel="['future']" 298 :filtModel="['future']"
295 :cusStyle="{ 299 :cusStyle="{
...@@ -310,15 +314,21 @@ ...@@ -310,15 +314,21 @@
310 <div class="cont"> 314 <div class="cont">
311 <textarea 315 <textarea
312 class="ipt textarea" 316 class="ipt textarea"
313 placeholder="查詢事項" 317 :placeholder="$t('index.contact.form.Inquiry')"
314 ></textarea> 318 ></textarea>
315 </div> 319 </div>
316 </div> 320 </div>
317 </div> 321 </div>
318 </div> 322 </div>
319 <!-- 错误提示 --> 323 <!-- 错误提示 -->
320 <div class="err-tips">{{ errTips }}</div> 324 <div class="err-tips">
321 <div class="submit-btn">提交</div> 325 <template v-if="errTips"
326 ><img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="" />{{
327 errTips
328 }}</template
329 >
330 </div>
331 <div class="submit-btn">{{ $t("index.contact.form.Submit") }}</div>
322 </div> 332 </div>
323 </div> 333 </div>
324 </div> 334 </div>
......
...@@ -8,6 +8,7 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts"; ...@@ -8,6 +8,7 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
8 8
9 @import "@/styles/_var.scss"; 9 @import "@/styles/_var.scss";
10 10
11 // 类过滤组件
11 .filter-comp { 12 .filter-comp {
12 .el-checkbox-group { 13 .el-checkbox-group {
13 display: flex; 14 display: flex;
...@@ -15,7 +16,8 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts"; ...@@ -15,7 +16,8 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
15 16
16 .el-checkbox { 17 .el-checkbox {
17 margin-bottom: 24px; 18 margin-bottom: 24px;
18 display: block; 19 display: flex;
20 align-items: center;
19 } 21 }
20 22
21 .el-checkbox__label { 23 .el-checkbox__label {
......