Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
9dc41fba by simon
Options

默认提交

1 parent 6d19f925
Inline Side-by-side
Showing 21 changed files with 114 additions and 39 deletions
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
8 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 8 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9 <link rel="stylesheet" href="./css/pure-min.css"> 9 <link rel="stylesheet" href="./css/pure-min.css">
10 <link rel="stylesheet" href="./css/grids-responsive-min.css"> 10 <link rel="stylesheet" href="./css/grids-responsive-min.css">
11 <!--[if gt IE 6]>
12
13 <![endif]-->
11 <title>平安人寿保险官网</title> 14 <title>平安人寿保险官网</title>
12 </head> 15 </head>
13 16
......
...@@ -303,6 +303,8 @@ textarea { ...@@ -303,6 +303,8 @@ textarea {
303 padding: 0; 303 padding: 0;
304 } 304 }
305 305
306
307
306 .main-container { 308 .main-container {
307 position: relative; 309 position: relative;
308 margin: 0 auto; 310 margin: 0 auto;
......
...@@ -103,7 +103,7 @@ module.exports = { ...@@ -103,7 +103,7 @@ module.exports = {
103 name: "About Us", 103 name: "About Us",
104 path: "", 104 path: "",
105 list: [{ 105 list: [{
106 name: "About Ping An (Life) HK", 106 name: "Ping An (Life) HK",
107 path: "/profile" 107 path: "/profile"
108 }, 108 },
109 { 109 {
...@@ -492,7 +492,8 @@ module.exports = { ...@@ -492,7 +492,8 @@ module.exports = {
492 ] 492 ]
493 }, 493 },
494 policyChangeGuide: { 494 policyChangeGuide: {
495 notice: "如需做其他保單變更聯繫客服", 495 notice: "如需做其他保單變更",
496 noticeLink: "聯繫客服",
496 head1: "Item", 497 head1: "Item",
497 head2: "Details", 498 head2: "Details",
498 head3: "Applicant", 499 head3: "Applicant",
......
...@@ -104,7 +104,7 @@ module.exports = { ...@@ -104,7 +104,7 @@ module.exports = {
104 name: "關於我們", 104 name: "關於我們",
105 path: "", 105 path: "",
106 list: [{ 106 list: [{
107 name: "有關平安人壽香港", 107 name: "平安人壽香港",
108 path: "/profile" 108 path: "/profile"
109 }, 109 },
110 { 110 {
...@@ -142,7 +142,7 @@ module.exports = { ...@@ -142,7 +142,7 @@ module.exports = {
142 hkPhone: "香港号码", 142 hkPhone: "香港号码",
143 cnPhone: "内地号码", 143 cnPhone: "内地号码",
144 aboutUs: "關於我們", 144 aboutUs: "關於我們",
145 companyIntroduction: "公司介紹", 145 companyIntroduction: "集團介紹",
146 news: "新聞資訊", 146 news: "新聞資訊",
147 joinUs: "加入我們", 147 joinUs: "加入我們",
148 helpCenter: "幫助中心", 148 helpCenter: "幫助中心",
...@@ -152,7 +152,7 @@ module.exports = { ...@@ -152,7 +152,7 @@ module.exports = {
152 map: "網站地圖", 152 map: "網站地圖",
153 contactUs: "聯絡我們", 153 contactUs: "聯絡我們",
154 contactInformation: "聯繫方式", 154 contactInformation: "聯繫方式",
155 service: "服務網點", 155 service: "服務網絡",
156 qrcode: "社交媒體", 156 qrcode: "社交媒體",
157 copyright: "版權所有 © 中國平安保險（集團）股份有限公司未經許可不得復制、轉載或摘編，違者必究!" 157 copyright: "版權所有 © 中國平安保險（集團）股份有限公司未經許可不得復制、轉載或摘編，違者必究!"
158 }, 158 },
...@@ -441,7 +441,7 @@ module.exports = { ...@@ -441,7 +441,7 @@ module.exports = {
441 type: "保單變更類", 441 type: "保單變更類",
442 list: [{ 442 list: [{
443 name: "保險合同解除申請書", 443 name: "保險合同解除申請書",
444 desc: "退保、猶豫期退保業務適用", 444 desc: "退保、冷靜期退保業務適用",
445 download: "", 445 download: "",
446 }, 446 },
447 { 447 {
...@@ -456,7 +456,7 @@ module.exports = { ...@@ -456,7 +456,7 @@ module.exports = {
456 }, 456 },
457 { 457 {
458 name: "保險合同變更申請書（ 客戶信息變更類）", 458 name: "保險合同變更申請書（ 客戶信息變更類）",
459 desc: "基本信息變更業務適用", 459 desc: "基本資訊變更業務適用",
460 download: "", 460 download: "",
461 }, 461 },
462 { 462 {
...@@ -492,7 +492,8 @@ module.exports = { ...@@ -492,7 +492,8 @@ module.exports = {
492 ] 492 ]
493 }, 493 },
494 policyChangeGuide: { 494 policyChangeGuide: {
495 notice: "如需做其他保單變更聯繫客服（聯繫客服超鏈接跳轉公司聯繫信息頁）", 495 notice: "如需做其他保單變更",
496 noticeLink: "聯繫客服",
496 head1: "項目", 497 head1: "項目",
497 head2: "具體內容", 498 head2: "具體內容",
498 head3: "申請資格人", 499 head3: "申請資格人",
......
...@@ -103,7 +103,7 @@ module.exports = { ...@@ -103,7 +103,7 @@ module.exports = {
103 name: "关于我们", 103 name: "关于我们",
104 path: "", 104 path: "",
105 list: [{ 105 list: [{
106 name: "有关平安香港", 106 name: "平安人寿香港",
107 path: "/profile" 107 path: "/profile"
108 }, 108 },
109 { 109 {
...@@ -141,7 +141,7 @@ module.exports = { ...@@ -141,7 +141,7 @@ module.exports = {
141 hkPhone: "香港号码", 141 hkPhone: "香港号码",
142 cnPhone: "内地号码", 142 cnPhone: "内地号码",
143 aboutUs: "关于我们", 143 aboutUs: "关于我们",
144 companyIntroduction: "公司介绍", 144 companyIntroduction: "集团介绍",
145 news: "新闻资讯", 145 news: "新闻资讯",
146 joinUs: "加入我们", 146 joinUs: "加入我们",
147 helpCenter: "帮助中心", 147 helpCenter: "帮助中心",
...@@ -151,7 +151,7 @@ module.exports = { ...@@ -151,7 +151,7 @@ module.exports = {
151 map: "网站地图", 151 map: "网站地图",
152 contactUs: "联络我们", 152 contactUs: "联络我们",
153 contactInformation: "联系方式", 153 contactInformation: "联系方式",
154 service: "服务网点", 154 service: "服务网络",
155 qrcode: "社交媒體", 155 qrcode: "社交媒體",
156 copyright: "版权所有 © 中国平安保险（集团）股份有限公司未经许可不得复制、转载或摘编，违者必究!" 156 copyright: "版权所有 © 中国平安保险（集团）股份有限公司未经许可不得复制、转载或摘编，违者必究!"
157 }, 157 },
...@@ -440,7 +440,7 @@ module.exports = { ...@@ -440,7 +440,7 @@ module.exports = {
440 type: "保单变更类", 440 type: "保单变更类",
441 list: [{ 441 list: [{
442 name: "保险合同解除申请书", 442 name: "保险合同解除申请书",
443 desc: "退保、犹豫期退保业务适用", 443 desc: "退保、冷静期退保业务适用",
444 download: "", 444 download: "",
445 }, 445 },
446 { 446 {
...@@ -492,7 +492,8 @@ module.exports = { ...@@ -492,7 +492,8 @@ module.exports = {
492 ] 492 ]
493 }, 493 },
494 policyChangeGuide: { 494 policyChangeGuide: {
495 notice: "如需做其他保单变更联系客服（联系客服超链接跳转公司联系信息页）", 495 notice: "如需做其他保单变更",
496 noticeLink: "联系客服",
496 head1: "项目", 497 head1: "项目",
497 head2: "具体内容", 498 head2: "具体内容",
498 head3: "申请资格人", 499 head3: "申请资格人",
......
...@@ -5,11 +5,15 @@ ...@@ -5,11 +5,15 @@
5 min-width: 10rem; 5 min-width: 10rem;
6 position: relative; 6 position: relative;
7 margin: 0 1rem; 7 margin: 0 1rem;
8 font-size: $fontSize; 8 font-size: $fontSizeTitle;
9 9
10 .list { 10 .list {
11 position: absolute; 11 position: absolute;
12 width: 100%; 12 width: 110%;
13 left: 0;
14 right: 0;
15 margin: 0 auto;
16 font-size: $fontSize;
13 17
14 .space { 18 .space {
15 height: 1.5rem; 19 height: 1.5rem;
......
...@@ -30,12 +30,13 @@ ...@@ -30,12 +30,13 @@
30 <div class="n-item">{{$t('footer.helpCenter')}}</div> 30 <div class="n-item">{{$t('footer.helpCenter')}}</div>
31 <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div> 31 <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
32 <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div> 32 <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
33 <div class="n-item">{{$t('footer.map')}}</div> 33 <div @click="toPage('protocol')" class="n-item">{{$t('footer.protocol')}}</div>
34 </div> 34 </div>
35 <div class="nav-v"> 35 <div class="nav-v">
36 <div class="n-item">{{$t('footer.contactUs')}}</div> 36 <div class="n-item">{{$t('footer.contactUs')}}</div>
37 <div class="n-item">{{$t('footer.contactInformation')}}</div> 37 <div class="n-item">{{$t('footer.contactInformation')}}</div>
38 <div class="n-item">{{$t('footer.service')}}</div> 38 <div class="n-item">{{$t('footer.service')}}</div>
39 <div class="n-item">{{$t('footer.map')}}</div>
39 </div> 40 </div>
40 </div> 41 </div>
41 42
......
...@@ -99,7 +99,7 @@ $navHeiM: 6rem; ...@@ -99,7 +99,7 @@ $navHeiM: 6rem;
99 &-nav-list { 99 &-nav-list {
100 position: absolute; 100 position: absolute;
101 right: 0; 101 right: 0;
102 top: 32px; 102 top: 24px;
103 103
104 display: flex; 104 display: flex;
105 align-items: center; 105 align-items: center;
...@@ -128,6 +128,9 @@ $navHeiM: 6rem; ...@@ -128,6 +128,9 @@ $navHeiM: 6rem;
128 128
129 .mobile { 129 .mobile {
130 display: block; 130 display: block;
131 &-nav-list {
132 top: 32px;
133 }
131 } 134 }
132 } 135 }
133 136
...@@ -136,6 +139,12 @@ $navHeiM: 6rem; ...@@ -136,6 +139,12 @@ $navHeiM: 6rem;
136 139
137 @media (max-width: 768px) { 140 @media (max-width: 768px) {
138 .v-header { 141 .v-header {
139 .logo-img {} 142 height: $navHeight-M;
143 .mobile {
144 display: block;
145 &-nav-list {
146 top: 24px;
147 }
148 }
140 } 149 }
141 } 150 }
......
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
197 197
198 &-icon { 198 &-icon {
199 position: absolute; 199 position: absolute;
200 top: .5rem; 200 top: .6rem;
201 } 201 }
202 } 202 }
203 } 203 }
......
...@@ -97,11 +97,11 @@ ...@@ -97,11 +97,11 @@
97 <!-- 通知 --> 97 <!-- 通知 -->
98 <div class="notice"> 98 <div class="notice">
99 <p class="notice-item"> 99 <p class="notice-item">
100 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice1')}} 100 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice1')}}
101 </p> 101 </p>
102 <p class="notice-item pointer" @click="checked = !checked"> 102 <p class="notice-item pointer" @click="checked = !checked">
103 <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png"> 103 <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
104 <img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice2')}} 104 <img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice2')}}
105 </p> 105 </p>
106 </div> 106 </div>
107 107
......
...@@ -20,6 +20,14 @@ export default { ...@@ -20,6 +20,14 @@ export default {
20 }, 20 },
21 }, 21 },
22 methods: { 22 methods: {
23 toContactUs() {
24 this.$router.push({
25 path: "/custom/service",
26 query: {
27 q: "m1"
28 }
29 });
30 },
23 onProjectHandler(item) { 31 onProjectHandler(item) {
24 if (item.projectType == 1) { 32 if (item.projectType == 1) {
25 this.$router.push({ 33 this.$router.push({
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
51 </div> 51 </div>
52 52
53 <div class="notice"> 53 <div class="notice">
54 <img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}} 54 <img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}} <span @click="toContactUs" class="act">{{$t("policyChangeGuide.noticeLink")}}</span>
55 </div> 55 </div>
56 </div> 56 </div>
57 57
......
...@@ -176,7 +176,7 @@ input { ...@@ -176,7 +176,7 @@ input {
176 176
177 &-icon { 177 &-icon {
178 position: absolute; 178 position: absolute;
179 top: .5rem; 179 top: .6rem;
180 } 180 }
181 } 181 }
182 } 182 }
......
...@@ -111,11 +111,11 @@ ...@@ -111,11 +111,11 @@
111 111
112 <div class="box notice"> 112 <div class="box notice">
113 <p class="notice-item"> 113 <p class="notice-item">
114 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}} 114 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}}
115 </p> 115 </p>
116 <p class="notice-item pointer" @click="checked = !checked"> 116 <p class="notice-item pointer" @click="checked = !checked">
117 <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png"> 117 <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
118 <img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}} 118 <img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
119 </p> 119 </p>
120 </div> 120 </div>
121 121
......
...@@ -21,7 +21,8 @@ export default { ...@@ -21,7 +21,8 @@ export default {
21 // prevEl: '.swiper-button-prev' 21 // prevEl: '.swiper-button-prev'
22 // }, 22 // },
23 pagination: { 23 pagination: {
24 el: '.swiper-pagination' 24 el: '.swiper-pagination',
25 clickable: true,
25 }, 26 },
26 autoplay: { 27 autoplay: {
27 delay: 5000, 28 delay: 5000,
......
...@@ -23,7 +23,9 @@ ...@@ -23,7 +23,9 @@
23 overflow: hidden; 23 overflow: hidden;
24 } 24 }
25 25
26 .banner { 26 // PC轮播
27 .banner-pc {
28 display: block;
27 position: absolute; 29 position: absolute;
28 z-index: 1; 30 z-index: 1;
29 left: 50%; 31 left: 50%;
...@@ -33,12 +35,21 @@ ...@@ -33,12 +35,21 @@
33 height: 100%; 35 height: 100%;
34 overflow: hidden; 36 overflow: hidden;
35 37
36 &-img { 38 .banner-img {
37 width: 100%; 39 width: 100%;
38 height: 100%; 40 height: 100%;
39 } 41 }
40 } 42 }
41 43
44 // 移动端轮播
45 .banner-mobile {
46 display: none;
47
48 .banner-img {
49 width: 100%;
50 }
51 }
52
42 // 推荐产品 53 // 推荐产品
43 .recommend { 54 .recommend {
44 display: flex; 55 display: flex;
...@@ -202,17 +213,34 @@ ...@@ -202,17 +213,34 @@
202 @media (max-width: 768px) { 213 @media (max-width: 768px) {
203 .content {} 214 .content {}
204 215
216 .banner-contaner {
217 height: auto;
218 }
219
220 .banner-pc {
221 display: none;
222 }
223
224 .banner-mobile {
225 display: block;
226 }
227
205 // 推荐产品 228 // 推荐产品
206 .recommend { 229 .recommend {
207 &-item { 230 &-item {
208 width: 100% !important; 231 width: 100% !important;
209 ;
210 margin: $marginSmall-M auto !important; 232 margin: $marginSmall-M auto !important;
211 ;
212 } 233 }
213 } 234 }
214 235
215 .box-shadow { 236 .box-shadow {
216 box-shadow: none; 237 box-shadow: none;
217 } 238 }
239
240 .swiper-pagination-fraction,
241 .swiper-pagination-custom,
242 .swiper-container-horizontal>.swiper-pagination-bullets {
243 bottom: 52px;
244 }
245
218 } 246 }
......
...@@ -3,19 +3,33 @@ ...@@ -3,19 +3,33 @@
3 <div class="page page-index"> 3 <div class="page page-index">
4 <div class="banner-contaner"> 4 <div class="banner-contaner">
5 <!-- banner 轮播 --> 5 <!-- banner 轮播 -->
6 <div class="banner"> 6
7 <div class="banner banner-pc">
7 <swiper :options="swiperOption"> 8 <swiper :options="swiperOption">
8 <swiper-slide> 9 <swiper-slide>
9 <img class="banner-img " src="@/assets/images/index/banner.png"> 10 <img class="banner-img" src="@/assets/images/index/banner.png">
10 </swiper-slide> 11 </swiper-slide>
11 <swiper-slide> 12 <swiper-slide>
12 <img class="banner-img " src="@/assets/images/index/banner.png"> 13 <img class="banner-img" src="@/assets/images/index/banner.png">
14 </swiper-slide>
15 <div class="swiper-pagination" slot="pagination"></div>
16 </swiper>
17 </div>
18
19 <div class="banner banner-mobile">
20 <swiper class="swiper" :options="swiperOption">
21 <swiper-slide>
22 <img class="banner-img" src="@/assets/images/index/banner-m-1.png">
23 </swiper-slide>
24 <swiper-slide>
25 <img class="banner-img" src="@/assets/images/index/banner-m-2.png">
13 </swiper-slide> 26 </swiper-slide>
14 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
15 <div class="swiper-button-next" slot="button-next"></div> -->
16 <div class="swiper-pagination" slot="pagination"></div> 27 <div class="swiper-pagination" slot="pagination"></div>
17 </swiper> 28 </swiper>
18 </div> 29 </div>
30
31 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
32 <div class="swiper-button-next" slot="button-next"></div> -->
19 </div> 33 </div>
20 <div class="content"> 34 <div class="content">
21 <!-- 推荐产品 --> 35 <!-- 推荐产品 -->
......
...@@ -97,10 +97,11 @@ ...@@ -97,10 +97,11 @@
97 // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 97 // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
98 // background-blend-mode: soft-light, ; 98 // background-blend-mode: soft-light, ;
99 // background-image: linear-gradient(to bottom, #f05f28, #f05021); 99 // background-image: linear-gradient(to bottom, #f05f28, #f05021);
100
101 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 100 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
102 background-blend-mode: soft-light, ; 101 background-blend-mode: soft-light;
103 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); 102 background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
103 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
104
104 } 105 }
105 106
106 107
......
...@@ -46,4 +46,5 @@ $marginSmall-M: 10px; // 小间距 ...@@ -46,4 +46,5 @@ $marginSmall-M: 10px; // 小间距
46 $marginMedium-M: 20px; // 间距 46 $marginMedium-M: 20px; // 间距
47 // $marginLarge: 28px; 47 // $marginLarge: 28px;
48 48
49 $navHeight-M:90px; // 移动端顶栏高度 49 // $navHeight-M:90px; // 移动端顶栏高度
50 $navHeight-M:72px; // 移动端顶栏高度
......