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