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
module.exports = {
common: {
Confirm:"Confirm",
Cancel:"Cancel",
},
message: {
login: 'Login',
Username: 'Username',
......@@ -369,29 +373,56 @@ module.exports = {
customService: "contact customer service hotline",
},
index: {
news: "新聞資訊",
newMore: "查看更多",
recommend: {
t1: "Online Quotation",
t2: "Customer Service",
t3: "Products",
t4: "Latest News",
item1: {
btn: "了解更多產品",
t1: "為自己和家人尋找壹份保障",
},
item2: {
btn: "立即預約",
t1: "在線預約 專業服務",
},
item3: {
btn: "客户服务",
t1: "專業客服為妳服務",
t2: "想了解更多，可致電",
t3: "95511",
t4: "聯絡我們，或進入",
// news: "新聞資訊",
// newMore: "查看更多",
// recommend: {
// t1: "Online Quotation",
// t2: "Customer Service",
// t3: "Products",
// t4: "Latest News",
// item1: {
// btn: "了解更多產品",
// t1: "為自己和家人尋找壹份保障",
// },
// item2: {
// btn: "立即預約",
// t1: "在線預約 專業服務",
// },
// item3: {
// btn: "客户服务",
// t1: "專業客服為妳服務",
// t2: "想了解更多，可致電",
// t3: "95511",
// t4: "聯絡我們，或進入",
// }
// },
recommend:{
title:"為何選擇平安人壽？",
contact:"Contact us",
item1:{
desc:"E-service at Finger Tips",
},
item2:{
desc:"Serving more than 200 million customers",
},
item3:{
desc:"International risk management standard",
},
},
contact:{
t1:"Contact us for more product information.",
t2:"Leave your contact or call us at 2983 8866.",
form:{
Title:"Title",
Name:"Name",
PhoneNumber:"Phone number",
Email:"Email",
Time:"Preferred contact time slot",
Inquiry:"Inquiry",
Submit:"Submit",
}
},
}
},
complaintAcceptance: {
name: "Name",
......
@import '@/styles/_support.scss';
@import "@/styles/_support.scss";
.list-container {
overflow-x: auto;
......@@ -17,20 +17,27 @@
.download {
position: relative;
display: flex;
align-items: center;
&-tips {
display: none;
position: absolute;
top: -3px;
top: 0px;
left: 20px;
z-index: 11;
padding: 2px;
@include border-tans();
min-width: 80px;
min-width: 88px;
padding: 4px;
}
img{
.icon-download {
margin-right: 4px;
}
.desc{
padding: 0;
}
}
.guide {
......@@ -39,7 +46,8 @@
cursor: pointer;
width: 12px;
height: 8px;
background: url("~@/assets/images/insurance-query/triangle-down2.png") no-repeat center center;
background: url("~@/assets/images/insurance-query/triangle-down2.png")
no-repeat center center;
background-size: 100% 100%;
top: 16px;
right: 26px;
......@@ -64,16 +72,25 @@
.td {
position: relative;
@extend .fcc;
text-align: center;
}
.w1 {
width: 240px;
text-align: center;
width: 180px;
}
.w2 {
width: 150px;
text-align: center;
width: 240px;
}
.w3 {
width: 140px;
}
.w4 {
width: 120px;
}
.w5 {
width: 100px;
}
.table-header {
......@@ -104,7 +121,8 @@
cursor: pointer;
width: 12px;
height: 8px;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background: url("~@/assets/images/insurance-query/triangle-down.png")
no-repeat center center;
background-size: 100% 100%;
}
......@@ -215,10 +233,10 @@
.activity {
background-color: $cOrange !important;
opacity: .5;
opacity: 0.5;
div {
color: #FFFFFF !important;
color: #ffffff !important;
}
}
......@@ -244,7 +262,7 @@
}
.down-arrow {
background-image: url('~@/assets/images/common/down-arrow-white.png');
background-image: url("~@/assets/images/common/down-arrow-white.png");
width: 16px;
height: 12px;
background-repeat: no-repeat;
......
<template>
<div class="list-container">
<modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
<filter-comp :items="checkList" @confirm="onCheckConfirmHandler" :visible="filterVisible" @close="filterVisible = false"></filter-comp>
<filter-comp :items="checkList" @confirm="onCheckConfirmHandler" :visible="filterVisible" @close="filterVisible = false" :confirmText="$t('common.Confirm')" :cancelText="$t('common.Cancel')"></filter-comp>
<div class="cell-group">
<div class="table-contaner">
<div class="table-header orange new">
......@@ -9,16 +9,16 @@
<div class="td w1">{{$t('eCorrespondenceEnquiry.PolicyNumber')}}
<div @click="onFilterHandler('bizNo')" class="down-arrow"></div>
</div>
<div class="td w1">{{$t('eCorrespondenceEnquiry.TypeOfCorrespondence')}}
<div class="td w2">{{$t('eCorrespondenceEnquiry.TypeOfCorrespondence')}}
<div @click="onFilterHandler('letterType')" class="down-arrow"></div>
</div>
<div class="td w2">{{$t('eCorrespondenceEnquiry.SentOutDate')}}
<div class="td w3">{{$t('eCorrespondenceEnquiry.SentOutDate')}}
<div @click="onFilterHandler('printTime')" class="down-arrow"></div>
</div>
<div class="td w2">{{$t('eCorrespondenceEnquiry.DownloadLink')}}
<div class="td w4">{{$t('eCorrespondenceEnquiry.DownloadLink')}}
</div>
<div @click="onFilterHandler('isRead')" class="td w2">{{$t('eCorrespondenceEnquiry.Status')}}
<div @click="onFilterHandler('isRead')" class="td w5">{{$t('eCorrespondenceEnquiry.Status')}}
<div class="down-arrow"></div>
</div>
</div>
......@@ -30,18 +30,18 @@
<template v-if="index < maxShow">
<div class="data-line">
<div class="td w1">{{item.bizNo}}</div>
<div class="td w1">{{$t("eCorrespondenceEnquiry.letterName")}}</div>
<div class="td w2">{{item.printTime.split(" ")[0]}}</div>
<div class="td w2 pointer" @click="downloadPolicy(item)">
<div class="td w2">{{$t("eCorrespondenceEnquiry.letterName")}}</div>
<div class="td w3">{{item.printTime.split(" ")[0]}}</div>
<div class="td w4 pointer" @click="downloadPolicy(item)">
<div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)" >
<div class="download-tips">
<div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div>
</div>
<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt="">
<div class="desc">{{$t("eCorrespondenceEnquiry.DownloadDoc")}}</div>
</div>
{{$t("eCorrespondenceEnquiry.DownloadDoc")}}
</div>
<div class="td w2">{{item.isRead == "N" ? $t('eCorrespondenceEnquiry.UnRead') : $t('eCorrespondenceEnquiry.Read')}}</div>
<div class="td w5">{{item.isRead == "N" ? $t('eCorrespondenceEnquiry.UnRead') : $t('eCorrespondenceEnquiry.Read')}}</div>
</div>
<div class="separator-h" v-if="index < contentList.length - 1 && index < maxShow - 1"></div>
</template>
......
......@@ -141,14 +141,14 @@
.features {
display: flex;
justify-content: center;
align-items: center;
align-items: flex-start;
margin: 44px auto 0;
&-item {
position: relative;
text-align: center;
font-size: 22px;
width: 316px;
width: 306px;
.icon {
@extend .fcc;
......@@ -157,7 +157,8 @@
}
.desc {
margin-top: 16px;
max-width: 200px;
margin: 16px auto 0;
}
}
}
......@@ -245,21 +246,30 @@
}
}
}
&-cont {
.linear{
@include linear-bg;
height: 380px;
margin: -4px auto 0;
height: 8px;
margin: -5px auto 0;
position: relative;
z-index: 11;
}
&-cont {
height: 380px;
margin: 0 auto 0;
position: relative;
display: flex;
.panel {
position: relative;
margin-top: 5px;
// margin-top: 5px;
width: 50%;
}
.panel-left {
@include linear-bg;
position: relative;
@extend .fcc;
.desc {
......@@ -445,6 +455,12 @@
color: $cOrange;
min-height: 28px;
margin: 12px 0;
display: flex;
align-items: flex-start;
.icon{
margin-top: 2px;
margin-right: 3px;
}
}
.submit-btn {
......
......@@ -64,50 +64,37 @@
</div>
<!-- 推荐 为什么选择平安人寿 -->
<div class="content recommend">
<div class="tit">為何選擇平安人壽？</div>
<div class="tit">{{ $t("index.recommend.title") }}</div>
<div class="features">
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-1.png" alt />
</div>
<div class="desc">
簡單方便
<br />線上客戶服務系統
</div>
<div v-html="$t('index.recommend.item1.desc')" class="desc"></div>
</div>
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-2.png" alt />
</div>
<div class="desc">
信心保證
<br />服務超過2億客戶
</div>
<div v-html="$t('index.recommend.item2.desc')" class="desc"></div>
</div>
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-3.png" alt />
</div>
<div class="desc">
國際級
<br />風險管理
</div>
<div v-html="$t('index.recommend.item3.desc')" class="desc"></div>
</div>
</div>
<div @click="toContactUs" class="contact-tips">
<span class="icon"></span>
聯絡我們
{{ $t("index.recommend.contact") }}
</div>
</div>
<!-- 线上报价 -->
<div
class="quote"
:style="
'background: url(' +
quoteBgUrl +
') center no-repeat;'
"
:style="'background: url(' + quoteBgUrl + ') center no-repeat;'"
>
<div class="space1"></div>
<div class="tit">線上報價 閃速投保</div>
......@@ -115,6 +102,7 @@
平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃，
涵蓋重點醫療保障，投保流程簡易，全程線上進行。
</div>
<!-- tab表格 -->
<div class="table">
<div class="table-tab">
......@@ -137,11 +125,16 @@
</div>
</div>
<div
class="linear"
:style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"
></div>
<div
class="table-cont"
:style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"
>
<div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
<div @click="onNextTabHandler()" class="arrow arrow-right"></div>
<div class="panel panel-left">
<div class="desc">
<div class="desc-item">・潛在長線資本增值</div>
......@@ -243,7 +236,7 @@
<el-select
class="ipt"
v-model="formData.gender"
:placeholder="'稱呼'"
:placeholder="$t('index.contact.form.Title') + '*'"
>
<el-option
v-for="(item, index) in genderList"
......@@ -257,7 +250,11 @@
<!-- 姓名 -->
<div class="ipt-wrap-linear name">
<div class="cont">
<input class="ipt" type="text" placeholder="姓名*" />
<input
class="ipt"
type="text"
:placeholder="$t('index.contact.form.Name') + '*'"
/>
</div>
</div>
</div>
......@@ -266,7 +263,11 @@
<!-- 联系电话 -->
<div class="ipt-wrap-linear">
<div class="cont">
<input class="ipt" type="text" placeholder="聯絡電話*" />
<input
class="ipt"
type="text"
:placeholder="$t('index.contact.form.PhoneNumber') + '*'"
/>
</div>
</div>
</div>
......@@ -275,7 +276,11 @@
<!-- 電郵 -->
<div class="ipt-wrap-linear">
<div class="cont">
<input class="ipt" type="text" placeholder="電郵*" />
<input
class="ipt"
type="text"
:placeholder="$t('index.contact.form.Email') + '*'"
/>
</div>
</div>
</div>
......@@ -285,11 +290,10 @@
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<!-- <input class="ipt" type="text" placeholder="理想聯絡時間*" /> -->
<date-picker
class="ipt-date"
:formatter="'dd-MM-yyyy'"
:placeholder="'理想聯絡時間'"
:placeholder="$t('index.contact.form.Time') + '*'"
v-model="formData.birthDate"
:filtModel="['future']"
:cusStyle="{
......@@ -310,15 +314,21 @@
<div class="cont">
<textarea
class="ipt textarea"
placeholder="查詢事項"
:placeholder="$t('index.contact.form.Inquiry')"
></textarea>
</div>
</div>
</div>
</div>
<!-- 错误提示 -->
<div class="err-tips">{{ errTips }}</div>
<div class="submit-btn">提交</div>
<div class="err-tips">
<template v-if="errTips"
><img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="" />{{
errTips
}}</template
>
</div>
<div class="submit-btn">{{ $t("index.contact.form.Submit") }}</div>
</div>
</div>
</div>
......
......@@ -8,6 +8,7 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "@/styles/_var.scss";
// 类过滤组件
.filter-comp {
.el-checkbox-group {
display: flex;
......@@ -15,7 +16,8 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
.el-checkbox {
margin-bottom: 24px;
display: block;
display: flex;
align-items: center;
}
.el-checkbox__label {
......