Skip to content

dev / pingan-life-index-pro

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

2

1 parent 9225254d
Inline Side-by-side
Showing 25 changed files with 262 additions and 87 deletions
......@@ -272,6 +272,19 @@ textarea {
font: 100% tahoma, "\5b8b\4f53", arial;
}
.cOrange {
color: $cOrange;
}
.cGreen {
color: $cGreen;
}
.cGray {
color: $cGray;
}
.cDark {
color: $cDark;
}
#app {
border: 0;
margin: 0;
......

482 Bytes | W: | H:

1.39 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

463 KB | W: | H:

453 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

107 KB | W: | H:

99.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

71.8 KB | W: | H:

65 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

68.5 KB | W: | H:

57.5 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -105,12 +105,29 @@ module.exports = {
contactUs: "Contact us",
contactInformation: "Contact Information",
service: "Service",
qrcode: "Official Accounts"
qrcode: "Official Accounts",
copyright:"版權所有 © 中國平安保險（集團）股份有限公司未經許可不得復制、轉載或摘編，違者必究!"
},
index: {
news: "news",
newMore: "more",
},
reservation: {
name: "姓名",
namePlaceholder: "姓名",
contactType: "聯絡方式",
contact: "聯絡电话",
contactPlaceholder: "香港號碼/內地號碼",
reservationType: "預約類型",
reservationRemark: "預約說明",
reservationRemarkPlaceholder: "非必填，字数不超过500字，提示文字“请简单说明您想要咨询的险种或业务”",
hkClient: "是否平安香港客戶",
yes: "是",
no: "不是",
contactTime: "期望联络时间",
notice1: "本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。",
notice2: "本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。",
},
product: {
btnPosition: "Booking service",
iconProblem: "Common problem",
......@@ -129,12 +146,14 @@ module.exports = {
},
customService: {
name: "Customer service",
menu1: "Query",
menu2: "Change",
menu3: "Renewal",
menu4: "Claim",
menu5: "Booking",
menu6: "Complaint",
menu1: "Contact us",
menu2: "Pay premium",
menu3: "Query policy",
menu4: "Change policy",
menu5: "Claim report",
menu6: "Reservation service",
menu7: "Suggestions",
menu8: "Common form",
insuranceQuery: {
InsurantNumber: "Insurant number",
Insurant: "Insurant",
......
......@@ -105,11 +105,29 @@ module.exports = {
contactUs: "聯絡我們",
contactInformation: "联系方式",
service: "服务网点",
qrcode: "官方公眾號"
qrcode: "官方公眾號",
copyright: "版權所有 © 中國平安保險（集團）股份有限公司未經許可不得復制、轉載或摘編，違者必究!"
},
index: {
news: "新聞資訊",
newMore: "查看更多",
recommend: {},
},
reservation: {
name: "姓名",
namePlaceholder: "姓名",
contactType: "聯絡方式",
contact: "聯絡电话",
contactPlaceholder: "香港號碼/內地號碼",
reservationType: "預約類型",
reservationRemark: "預約說明",
reservationRemarkPlaceholder: "非必填，字数不超过500字，提示文字“请简单说明您想要咨询的险种或业务”",
hkClient: "是否平安香港客戶",
yes: "是",
no: "不是",
contactTime: "期望联络时间",
notice1: "本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。",
notice2: "本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。",
},
product: {
btnPosition: "預約服務",
......@@ -129,12 +147,14 @@ module.exports = {
},
customService: {
name: "客戶服務",
menu1: "保單查詢",
menu2: "保全變更",
menu3: "續期繳費",
menu4: "理賠申請",
menu5: "預約服務",
menu6: "投訴受理",
menu1: "聯系我們",
menu2: "繳付保費",
menu3: "保單查詢",
menu4: "保單變更",
menu5: "理賠申請",
menu6: "預約服務",
menu7: "投訴受理",
menu8: "常用表格",
insuranceQuery: {
InsurantNumber: "保單號碼",
Insurant: "被保人",
......
......@@ -105,12 +105,29 @@ module.exports = {
contactUs: "联络我们",
contactInformation: "联系方式",
service: "服务网点",
qrcode: "官方公众号"
qrcode: "官方公众号",
copyright:"版权所有 © 中国平安保险（集团）股份有限公司未经许可不得复制、转载或摘编，违者必究!"
},
index: {
news: "新闻资讯",
newMore: "查看更多",
},
reservation: {
name: "姓名",
namePlaceholder: "姓名",
contactType: "聯絡方式",
contact: "聯絡电话",
contactPlaceholder: "香港號碼/內地號碼",
reservationType: "預約類型",
reservationRemark: "預約說明",
reservationRemarkPlaceholder: "非必填，字数不超过500字，提示文字“请简单说明您想要咨询的险种或业务”",
hkClient: "是否平安香港客戶",
yes: "是",
no: "不是",
contactTime: "期望联络时间",
notice1: "本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。",
notice2: "本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。",
},
product: {
btnPosition: "预约服务",
iconProblem: "常见问题",
......@@ -129,12 +146,14 @@ module.exports = {
},
customService: {
name: "客户服务",
menu1: "保单查询",
menu2: "保全变更",
menu3: "续期缴费",
menu4: "理赔申请",
menu5: "预约服务",
menu6: "投诉受理",
menu1: "联系我们",
menu2: "缴付保费",
menu3: "保单查询",
menu4: "保单变更",
menu5: "理赔申请",
menu6: "预约服务",
menu7: "投诉受理",
menu8: "常用表格",
insuranceQuery: {
InsurantNumber: "保单号码",
Insurant: "被保人",
......
......@@ -53,17 +53,23 @@ export default {
}
},
onOverHandler(event) {
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "block";
},
onOutHandler(event) {
// console.log(event);
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "none";
},
onClickHandler(index) {
onClickHandler(event, index) {
// 隐藏其他
let path = event.path || (event.composedPath && event.composedPath()); //兼容火狐和safari
path[1].style.display = "none";
// let path = event.path || (event.composedPath && event.composedPath()); //兼容火狐和safari
// path[1].style.display = "none";
if (this.$refs.ul) {
this.$refs.ul.style.display = "none";
}
// 选择item
this.activeIndex = index;
let curData = this.dataList[index];
......
......@@ -29,14 +29,12 @@
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
border-radius: .5rem;
li {
@extend .fcc;
border-bottom: solid 1px #f1f1f1;
background: #ffffff;
min-height: 4.25rem;
// line-height: 4.25rem;
// min-height: 4.25rem;
text-align: center;
padding: 1.5rem 0;
}
li:last-child {
......
......@@ -15,8 +15,8 @@
</template>
<div class="list">
<div class="space"></div>
<ul v-dpl>
<li v-for="(item, index) in dataList" :key="index" @click="onClickHandler(index, $event)">{{item[labelProperty]}}</li>
<ul ref="ul" v-dpl>
<li v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
</ul>
</div>
</div>
......
......@@ -48,7 +48,7 @@
<div class="line"></div>
<!-- 版权 -->
<div class="copyright">
版權所有 © 中國平安保險（集團）股份有限公司未經許可不得復制、轉載或摘編，違者必究!
{{$t('footer.copyright')}}
<br>Copyright © PING AN INSURANCE (GROUP) COMPANY OF CHINA ，LTD. All Rights Reserved
</div>
</div>
......
......@@ -24,6 +24,9 @@ export default {
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
}
......@@ -72,5 +75,6 @@ export default {
initData() {}
},
mounted() {},
created() {}
created() {
}
}
......
......@@ -15,35 +15,61 @@
// banner 轮播
.banner {
box-shadow: 0 0 1.75rem 0 rgba(255, 87, 0, 0.1);
&-img {
width: 100%;
}
}
// 推荐产品
.recommend {
display: flex;
justify-content: space-between;
margin-top: 2.25rem;
flex-wrap: wrap;
justify-content: center;
width: auto;
text-align: center;
&-item {
margin-top: 2.25rem;
position: relative;
width: 25.833333rem;
// width: 25.833333rem;
border-radius: .75rem;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #fbfbfb;
padding: 0 5px;
.btn {
position: absolute;
width: 52%;
height: 11%;
top: 81%;
left: 0;
right: 0;
bottom: 3rem;
margin: 0 auto;
cursor: pointer;
@include btc2(13.5rem, 4rem, 16px);
}
img {
.tt {
position: absolute;
width: 100%;
}
.t1 {
bottom: 10rem;
}
.t2 {
bottom: 12.75rem;
}
img {}
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
......@@ -59,6 +85,7 @@
top: 83%;
left: 69%;
z-index: 1;
// background-color: wheat;
}
.cont {
......@@ -117,8 +144,7 @@
border-top: solid 1px #dcdddd;
cursor: pointer;
&-tit {
}
&-tit {}
&-date {}
......
......@@ -6,7 +6,7 @@
<div class="box-w banner">
<swiper :options="swiperOption">
<swiper-slide>
<img src="@/assets/images/index/banner.png">
<img class="banner-img" src="@/assets/images/index/banner.png">
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
......@@ -16,15 +16,20 @@
<!-- 推荐产品 -->
<div class="box recommend">
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn"></div>
<div @click="onRecommendHandler(1)" class="btn pointer">了解更多產品</div>
<div class="tt t1">為自己和家人尋找壹份保障</div>
<img src="@/assets/images/index/recommend-1.png">
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(2)" class="btn"></div>
<div @click="onRecommendHandler(2)" class="btn pointer">立即預約</div>
<div class="tt t1">在線預約 專業服務</div>
<img src="@/assets/images/index/recommend-2.png">
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(3)" class="btn"></div>
<div @click="onRecommendHandler(3)" class="btn pointer">客户服务</div>
<div class="tt t2">專業客服為妳服務</div>
<div class="tt t1">想了解更多，可致電
<span class="cOrange">95511</span>聯絡我們，或進入</div>
<img src="@/assets/images/index/recommend-3.png">
</div>
</div>
......@@ -32,7 +37,9 @@
<div class="box more">
<div class="cont">
<div class="btn pointer"></div>
<img src="@/assets/images/index/more-1.png">
<!-- <img src="@/assets/images/index/more-1-zh.png"> -->
<img :src="require('@/assets/images/index/more-1-'+locale+'.png')">
</div>
</div>
<!-- 新闻资讯 -->
......@@ -41,29 +48,59 @@
<div class="tit">{{$t('index.news')}}</div>
<div class="under-line"></div>
<div class="news-wrap">
<div @click="onMoreNewsHandler" class="more pointer">
{{$t('index.newMore')}} >
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安人壽2019年2季度保險消費報告出爐！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">公益獻禮華誕年，創新開拓扶貧路</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安920要放大招啦！內含超強攻略！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">突發！平安人壽迅速應對廣東陽江大巴交通事故</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">伴成長、助扶貧，平安人壽客服節給家庭“AI”的力量</div>
<div class="news-item-date">2019-09-27</div>
</div>
<!-- hardcode start -->
<template v-if="locale == 'zh'">
<div @click="onMoreNewsHandler" class="more pointer">
{{$t('index.newMore')}} >
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安人寿2019年2季度保险消费报告出炉！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">公益献礼华诞年，创新开拓扶贫路</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安920要放大招啦！内含超强攻略！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">突发！平安人寿迅速应对广东阳江大巴交通事故</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">伴成长、助扶贫，平安人寿客服节给家庭“AI”的力量</div>
<div class="news-item-date">2019-09-27</div>
</div>
</template>
<template v-else>
<div @click="onMoreNewsHandler" class="more pointer">
{{$t('index.newMore')}} >
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安人壽2019年2季度保險消費報告出爐！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">公益獻禮華誕年，創新開拓扶貧路</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安920要放大招啦！內含超強攻略！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">突發！平安人壽迅速應對廣東陽江大巴交通事故</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">伴成長、助扶貧，平安人壽客服節給家庭“AI”的力量</div>
<div class="news-item-date">2019-09-27</div>
</div>
</template>
<!-- hardcode end -->
</div>
</div>
</div>
......
......@@ -18,6 +18,11 @@ export default {
}
},
methods: {
toNewsDetail() {
this.$router.push({
path: "/news/detail"
})
},
selPage(val) {
let {
page
......
......@@ -7,7 +7,7 @@
<div class="top-space"></div>
<div class="box">
<div class="news">
<div v-for="(item,index) in items" :key="index" class="news-item">
<div @click="toNewsDetail()" v-for="(item,index) in items" :key="index" class="news-item">
<div class="news-item-tit">
<div class="point"></div>
平安人壽2019年2季度保險消費報告出爐！
......
......@@ -11,6 +11,14 @@ export default {
}
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
}
},
methods: {
initData() {}
},
......
......@@ -7,68 +7,70 @@
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-name.png"> 姓名
<img src="@/assets/images/reservation/icon-re-name.png"> {{$t('reservation.name')}}
</div>
<div class="ipt-wrap">
<input placeholder="姓名" class="ipt" type="text">
<input :placeholder="$t('reservation.namePlaceholder')" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-contact.png">聯絡方式
<img src="@/assets/images/reservation/icon-re-contact.png">{{$t('reservation.contactType')}}
</div>
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<select class="ipt">
<option>電話</option>
<option v-if="locale !='zh'">電話</option>
<option v-else>电话</option>
</select>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-name.png">聯絡电话
<img src="@/assets/images/reservation/icon-re-name.png">{{$t('reservation.contact')}}
</div>
<div class="ipt-wrap">
<input placeholder="香港號碼/內地號碼" class="ipt" type="text">
<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-clock.png">預約類型
<img src="@/assets/images/reservation/icon-re-clock.png">{{$t('reservation.reservationType')}}
</div>
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<select class="ipt">
<option>投保咨詢</option>
<option v-if="locale !='zh'">投保咨询</option>
<option v-else>投保咨詢</option>
</select>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-arrow-reservation.png">預約說明
<img src="@/assets/images/reservation/icon-re-arrow-reservation.png">{{$t('reservation.reservationRemark')}}
</div>
<div class="ipt-wrap">
<textarea placeholder="非必填，字数不超过500字，提示文字“请简单说明您想要咨询的险种或业务”" class="ipt textarea"></textarea>
<textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea"></textarea>
</div>
</div>
<div class="pure-u-1 form-item form-item2">
<div class="label">
<img src="@/assets/images/reservation/icon-re-custom.png">是否平安香港客戶
<img src="@/assets/images/reservation/icon-re-custom.png">{{$t('reservation.hkClient')}}
</div>
<div class="cont">
<div class="boo-btn pointer active">是</div>
<div class="boo-btn pointer">不是</div>
<div class="boo-btn pointer active">{{$t('reservation.yes')}}</div>
<div class="boo-btn pointer">{{$t('reservation.no')}}</div>
</div>
</div>
<div class="pure-u-1 form-item form-item3">
<div class="label">
<img src="@/assets/images/reservation/icon-re-calendar.png">期望联络时间
<img src="@/assets/images/reservation/icon-re-calendar.png">{{$t('reservation.contactTime')}}
</div>
<div class="cont">
<div class="calendar">
......@@ -82,10 +84,10 @@
<div class="box notice">
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}}
</p>
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
</p>
</div>
</div>
......
......@@ -83,6 +83,7 @@
border: 0;
}
// 橙色按钮
@mixin btc2($wid:5.25rem, $hei:2.5rem, $fontSize:12px) {
width: $wid;
......@@ -98,3 +99,15 @@
// background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
background-image: linear-gradient(to bottom, #f05f28, #f05021);
}
@mixin btc3($wid:5.25rem, $hei:2.5rem, $fontSize:12px) {
width: $wid;
height: $hei;
line-height: $hei;
font-size: $fontSize;
border-radius: $hei;
text-align: center;
color: #006441;
border: solid 1px #006441;
}
......
......@@ -47,3 +47,8 @@
.text-c {
text-align: center;
}
.bc{
text-align: center;
}
......