Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
9747be9d by simon
Options

首页部分功能

1 parent 55dc70ff
Inline Side-by-side
Showing 17 changed files with 1077 additions and 270 deletions
...@@ -85,11 +85,13 @@ ul{ ...@@ -85,11 +85,13 @@ ul{
85 height: 100%; 85 height: 100%;
86 overflow-y: scroll; 86 overflow-y: scroll;
87 line-height: 1.42; 87 line-height: 1.42;
88 }
89 88
90 &-desc :lang(zh) { 89 &:lang(zh) {
91 letter-spacing: 2.15px; 90 letter-spacing: 2.15px;
91 }
92 } 92 }
93
94
93 } 95 }
94 96
95 &-btn-wrap { 97 &-btn-wrap {
......
...@@ -66,11 +66,12 @@ $borderSize: 6px; ...@@ -66,11 +66,12 @@ $borderSize: 6px;
66 margin-left: 12px; 66 margin-left: 12px;
67 background: url("~@assets/images/vhis/vhis-btn.png"); 67 background: url("~@assets/images/vhis/vhis-btn.png");
68 68
69 &:lang(zh) {
70 letter-spacing: 1.5px;
71 }
69 } 72 }
70 73
71 .banner-btn:lang(zh) { 74
72 letter-spacing: 1.5px;
73 }
74 } 75 }
75 } 76 }
76 77
...@@ -170,23 +171,27 @@ $borderSize: 6px; ...@@ -170,23 +171,27 @@ $borderSize: 6px;
170 color: $cOrange2; 171 color: $cOrange2;
171 font-weight: bold; 172 font-weight: bold;
172 font-size: 34px; 173 font-size: 34px;
173 }
174 174
175 .t1:lang(zh) { 175 &:lang(zh) {
176 letter-spacing: 6px; 176 letter-spacing: 6px;
177 }
177 } 178 }
178 179
180
181
179 .t2 { 182 .t2 {
180 font-size: 24px; 183 font-size: 24px;
181 line-height: 1.39; 184 line-height: 1.39;
182 // margin-top: 36px; 185 // margin-top: 36px;
183 max-width: 780px; 186 max-width: 780px;
184 margin: 36px auto 0; 187 margin: 36px auto 0;
185 }
186 188
187 .t2:lang(zh) { 189 &:lang(zh) {
188 letter-spacing: 2px; 190 letter-spacing: 2px;
191 }
189 } 192 }
193
194
190 } 195 }
191 196
192 // 产品 197 // 产品
...@@ -198,12 +203,14 @@ $borderSize: 6px; ...@@ -198,12 +203,14 @@ $borderSize: 6px;
198 color: $cOrange2; 203 color: $cOrange2;
199 font-size: 36px; 204 font-size: 36px;
200 font-weight: bold; 205 font-weight: bold;
201 }
202 206
203 .tit:lang(zh) { 207 &:lang(zh) {
204 letter-spacing: 2.5px; 208 letter-spacing: 2.5px;
209 }
205 } 210 }
206 211
212
213
207 .prod { 214 .prod {
208 margin: 24px auto 0; 215 margin: 24px auto 0;
209 color: $cOrange2; 216 color: $cOrange2;
...@@ -248,12 +255,14 @@ $borderSize: 6px; ...@@ -248,12 +255,14 @@ $borderSize: 6px;
248 .t1 { 255 .t1 {
249 font-size: 22px; 256 font-size: 22px;
250 font-weight: bold; 257 font-weight: bold;
251 }
252 258
253 .t1:lang(zh) { 259 &:lang(zh) {
254 letter-spacing: 2px; 260 letter-spacing: 2px;
261 }
255 } 262 }
256 263
264
265
257 .more { 266 .more {
258 display: flex; 267 display: flex;
259 margin-top: 6px; 268 margin-top: 6px;
...@@ -267,11 +276,13 @@ $borderSize: 6px; ...@@ -267,11 +276,13 @@ $borderSize: 6px;
267 276
268 .c1 { 277 .c1 {
269 font-size: 18px; 278 font-size: 18px;
270 }
271 279
272 .c1:lang(zh) { 280 &:lang(zh) {
273 letter-spacing: 1.2px; 281 letter-spacing: 1.2px;
282 }
274 } 283 }
284
285
275 } 286 }
276 287
277 .desc { 288 .desc {
...@@ -315,12 +326,14 @@ $borderSize: 6px; ...@@ -315,12 +326,14 @@ $borderSize: 6px;
315 color: $cOrange2; 326 color: $cOrange2;
316 font-size: 36px; 327 font-size: 36px;
317 font-weight: bold; 328 font-weight: bold;
318 }
319 329
320 .tit:lang(zh) { 330 &:lang(zh) {
321 letter-spacing: 1.8px; 331 letter-spacing: 1.8px;
332 }
322 } 333 }
323 334
335
336
324 .tit-s { 337 .tit-s {
325 font-size: $fontSize-M2; 338 font-size: $fontSize-M2;
326 color: $cFontGray2; 339 color: $cFontGray2;
...@@ -355,10 +368,10 @@ $borderSize: 6px; ...@@ -355,10 +368,10 @@ $borderSize: 6px;
355 @extend .bb; 368 @extend .bb;
356 padding: 24px 40px 24px 40px; 369 padding: 24px 40px 24px 40px;
357 color: $cFontGray3; 370 color: $cFontGray3;
358 }
359 371
360 .tt:lang(zh) { 372 &:lang(zh) {
361 letter-spacing: 1.12px; 373 letter-spacing: 1.12px;
374 }
362 } 375 }
363 376
364 .tt2 { 377 .tt2 {
...@@ -457,10 +470,10 @@ $borderSize: 6px; ...@@ -457,10 +470,10 @@ $borderSize: 6px;
457 .t1 { 470 .t1 {
458 color: $cOrange2; 471 color: $cOrange2;
459 } 472 }
460 }
461 473
462 .tt:lang(zh) { 474 &:lang(zh) {
463 letter-spacing: 1.12px; 475 letter-spacing: 1.12px;
476 }
464 } 477 }
465 478
466 .tt2 { 479 .tt2 {
...@@ -591,13 +604,6 @@ $borderSize: 6px; ...@@ -591,13 +604,6 @@ $borderSize: 6px;
591 } 604 }
592 } 605 }
593 606
594 // .label:lang(zh) {
595 // line-height: 1.5;
596 // }
597
598 // .val:lang(zh) {
599 // line-height: 1.5;
600 // }
601 } 607 }
602 608
603 &-item-4 { 609 &-item-4 {
...@@ -699,11 +705,13 @@ $borderSize: 6px; ...@@ -699,11 +705,13 @@ $borderSize: 6px;
699 margin-right: 48px; 705 margin-right: 48px;
700 } 706 }
701 707
702 }
703 708
704 .cont:lang(zh){ 709 &:lang(zh){
705 padding-left: 178px; 710 padding-left: 178px;
711 }
706 } 712 }
713
714
707 } 715 }
708 } 716 }
709 717
......
1 /**
2 * 页面描述:官网首页
3 */
4
5
6 import api from '@/api/api';
7 import {
8 httpGet,
9 httpPost
10 } from '@/api/fetch-api.js';
11 import {
12 mapGetters,
13 mapActions,
14 mapState
15 } from "vuex";
16 var UA = require("ua-device");
17
18 export default {
19 data() {
20 return {
21 key: 'value',
22 // swiper
23 swiperOption: {
24 navigation: {
25 nextEl: '.swiper-button-next',
26 prevEl: '.swiper-button-prev'
27 },
28 pagination: {
29 el: '.swiper-pagination',
30 clickable: true,
31 },
32 autoplay: {
33 delay: 5000,
34 stopOnLastSlide: false,
35 disableOnInteraction: false
36 },
37 speed: 1000,
38 },
39 bannerList: [],
40 bannerCandidateList: [],
41 // 视频
42 playerOptions: {},
43
44 }
45 },
46 components: {},
47 computed: {
48 ...mapState({
49 isSmallScreen: state => state.isSmallScreen,
50 isMobile: state => state.isMobile
51 }),
52 locale() {
53 return this.$i18n.locale || 'tc';
54 },
55 i18n() {
56 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
57 },
58 player() {
59 return this.$refs.videoPlayer.player
60 },
61
62 },
63 methods: {
64 toVhis() {
65 // gotoVHIS(this.locale);
66 this.$router.push({
67 path: "/vhis",
68 query: {
69 p: "VHIS001"
70 }
71 });
72 },
73 /**
74 * 推荐产品
75 */
76 onRecommendHandler(val) {
77 if (val == 1) {
78 this.toVhis();
79 }
80 if (val == 2) {
81 this.$router.push({
82 path: "/custom/service?q=m6"
83 })
84 }
85 if (val == 3) {
86 this.$router.push({
87 path: "/custom/product"
88 })
89 }
90 if (val == 4) {
91 this.$router.push({
92 path: "/news/list"
93 })
94 }
95
96 },
97
98 /**
99 * 推荐产品
100 */
101 onMoreNewsHandler() {
102 this.$router.push({
103 path: "/news/list"
104 })
105 },
106
107 /**
108 * 去新闻详情页面
109 * 需要带id
110 */
111 toNewsDetail() {
112 this.$router.push({
113 path: '/news/detail'
114 })
115 },
116 toProfile() {
117 this.$router.push({
118 path: '/profile'
119 })
120 },
121 refreshVideoPlayer() {
122 let videoUrl = sessionStorage.getItem("_video_url");
123 let posterUrl = sessionStorage.getItem("_poster_url");
124 let playerOptions = {
125 width: 800,
126 height: 450,
127 // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
128 autoplay: false, //如果true,浏览器准备好时开始回放。
129 muted: true, // 默认情况下将会消除任何音频。
130 language: 'en',
131 // playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
132 sources: [{
133 type: "video/mp4",
134 // mp4
135 src: videoUrl,
136 // webm
137 // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
138 }],
139 poster: posterUrl,
140 controlBar: {
141 timeDivider: true,
142 durationDisplay: true,
143 remainingTimeDisplay: false,
144 fullscreenToggle: true //全屏按钮
145 }
146 }
147 let output = new UA(navigator.userAgent);
148 let deviceType = output.device.type;
149 let isMobile = deviceType == "mobile";
150 // if (this.isSmallScreen) {
151 if (isMobile) {
152 playerOptions.aspectRatio = "16:9";
153 }
154 this.playerOptions = playerOptions;
155 },
156 initData() {
157 this.fetchBanner().then(res => {
158 this.bannerCandidateList = res;
159 this.refreshBanner();
160 });
161 this.fetchIndexVideo().then(res => {
162 this.refreshVideoPlayer();
163 });
164 // if (!this.isMobile) {
165 // window.addEventListener('resize', () => this.refreshVideoPlayer(), false);
166 // }
167 },
168 fetchBanner() {
169 return new Promise((resolve, reject) => {
170 httpPost({
171 url: api.banner
172 }).then(res => {
173 resolve(res);
174 });
175 });
176 },
177 fetchIndexVideo() {
178 return new Promise((resolve, reject) => {
179 httpPost({
180 url: api.indexVideo
181 }).then(res => {
182 sessionStorage.setItem("_video_url", res.videoUrl);
183 sessionStorage.setItem("_poster_url", res.posterUrl);
184 resolve(res);
185 });
186 });
187 },
188 refreshBanner() {
189 let key = this.locale;
190 if (key == "zh") {
191 key = "cn";
192 }
193 let bannerList = [];
194 this.bannerCandidateList.forEach(element => {
195 bannerList.push(element[key]);
196 });
197 this.$set(this, 'bannerList', bannerList);
198 },
199 btnNavigateTo(type, link) {
200 switch (type) {
201 case "none":
202 break;
203 case "news":
204 this.$router.push({
205 path: "/news/detail",
206 query: {
207 c: link
208 }
209 });
210 break;
211 case "product":
212 break;
213 case "vhis":
214 this.$router.push({
215 path: "/vhis",
216 query: {
217 p: link
218 }
219 });
220 break;
221 default:
222 location.href = link;
223 break;
224 }
225 }
226 },
227 beforeDestroy() {
228 // window.removeEventListener('resize', this.refreshVideoPlayer(), false);
229 },
230 mounted() {
231 this.initData();
232
233 setTimeout(() => {
234 // console.log("queryConfigData:", this.$root.queryConfigData);
235 // console.log("queryConfigData:", window.vueInstance.queryConfigData); // 挂载到windows的访问方法
236 // 放localStorage直接是localStorage.getItem("queryConfig");
237 }, 3000)
238 },
239
240 created() {
241
242 this.$root.eventBus.$on("langChange", () => {
243 try {
244 this.refreshBanner();
245 } catch (e) { }
246 });
247 }
248
249 }
1 @import '@/styles/_support.scss';
2
3 .content {
4 padding-bottom: 27px;
5 }
6
7 .top-space {
8 height: 27px;
9 }
10
11 .box {
12 position: relative;
13 margin-top: $marginMedium;
14 }
15
16 // banner 轮播
17 .banner-contaner {
18 width: 100%;
19 height: 470px;
20 margin: 0 auto;
21 position: relative;
22 z-index: 1;
23 overflow: hidden;
24 }
25
26 // PC轮播
27 .banner-pc {
28 display: block;
29 position: absolute;
30 z-index: 1;
31 left: 50%;
32 margin-left: -960px;
33 top: 0;
34 width: 1920px;
35 height: 100%;
36 overflow: hidden;
37
38 .banner-img {
39 width: 100%;
40 height: 100%;
41 }
42
43 .btn-wrap {
44 position: absolute;
45 z-index: 1;
46 // 两个banner图按钮位置不一样，和原先约定的按钮位置固定不一致
47 // 如要调整位置，请调整top,right。如需要右对齐请使用right
48 // 已用padding适应文本过长的情况(英文等);
49 // top: 272px;
50 // left: 1228px;
51 // top: 310px;
52 top: 295px;
53 right: 432px;
54 display: flex;
55
56 .banner-btn {
57 @extend .pointer;
58 @extend .bb;
59 @include btc2(126px, 48px, $fontSizeTitle);
60 width: auto;
61 padding: 0 24px;
62 min-width: 126px;
63 margin-left: 12px;
64 background-image: none;
65 }
66 }
67 }
68
69 // 移动端轮播
70 .banner-mobile {
71 display: none;
72
73 .banner-img {
74 width: 100%;
75 }
76
77 .btn-wrap {
78 position: absolute;
79 z-index: 1;
80 top: 87%;
81 left: 0;
82 right: 0;
83 margin: 0 auto;
84 display: flex;
85 justify-content: center;
86
87 .banner-btn {
88 @extend .pointer;
89 padding: 0 12px;
90 color: $cOrange;
91 }
92 }
93 }
94
95 // 推荐产品
96 .recommend {
97 display: flex;
98 text-align: center;
99 justify-content: space-between;
100 flex-wrap: wrap;
101
102 &-item {
103 @extend .bb;
104
105 margin-right: $marginSmall;
106
107 &:last-child {
108 margin-right: 0;
109 }
110
111
112 position: relative;
113 width: 291px;
114 // width: 100%;
115 height: 393px;
116 border-radius: $borderRadiusSmall;
117 @extend .box-shadow;
118 background-color: #fbfbfb;
119
120 .img {
121 width: 100%;
122 height: 291px;
123 background-size: cover;
124 }
125
126 .img1 {
127 background: url("~@/assets/images/index/recommend-1.png") no-repeat center;
128 background-size: cover;
129 }
130
131 .img2 {
132 background: url("~@/assets/images/index/recommend-2.png") no-repeat center;
133 background-size: cover;
134 }
135
136 .img3 {
137 background: url("~@/assets/images/index/recommend-3.png") no-repeat center;
138 background-size: cover;
139 }
140
141 .img4 {
142 background: url("~@/assets/images/index/recommend-4.png") no-repeat center;
143 background-size: cover;
144 }
145
146
147 .btn {
148 position: absolute;
149 left: 0;
150 right: 0;
151 bottom: 36px;
152 margin: 0 auto;
153
154 @include btc2(162px, 48px, 16px);
155 }
156
157 img {
158 width: 100%;
159 @include border-top-radius($borderRadius);
160 }
161
162 &:first-child {
163 padding-left: 0;
164 }
165
166 &:last-child {
167 padding-right: 0;
168 }
169 }
170 }
171
172 // 详情
173 .detail {
174 display: flex;
175 max-width: 1200px;
176
177
178 .txt {
179 position: relative;
180 @extend .fcc;
181 @extend .bb;
182 @include ellipsis(14);
183 padding-left: 26px;
184 flex: 1;
185 line-height: 2.3;
186
187 }
188
189 .txt:lang(zh) {
190 letter-spacing: 1.4px;
191 }
192 }
193
194
195 .swiper-button-prev {
196 background-image: url('~@/assets/images/common/button-prev.png');
197 left: 360px;
198
199 }
200
201 .swiper-button-next {
202 background-image: url('~@/assets/images/common/button-next.png');
203 right: 360px;
204 }
205
206 .swiper-container {
207 height: 100%;
208 }
209
210 .swiper-pagination-fraction,
211 .swiper-pagination-custom,
212 .swiper-container-horizontal>.swiper-pagination-bullets {
213 bottom: 48px;
214 }
215
216 .swiper-pagination-bullet {
217 width: 12px;
218 height: 12px;
219 background-color: #dcdddd;
220 }
221
222 .swiper-pagination-bullet-active {
223 width: 12px;
224 height: 12px;
225 background-color: $cOrange;
226 }
227
228 .box-shadow {
229 box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
230 }
231
232 @media (max-width: 1200px) {
233 .content {
234 @include content-percent();
235 }
236
237 // 推荐产品
238 .recommend {
239 justify-content: center;
240
241 &-item {
242 width: 46% !important;
243 padding: 0 !important;
244 margin: 2% !important;
245 }
246 }
247
248 // 详情
249 .detail {
250 display: block;
251
252 .vjs-custom-skin {
253 width: 100%;
254 }
255
256
257 .txt {
258 padding: 0;
259 margin: $marginSmall 0 $marginMedium;
260 }
261 }
262 }
263
264
265 @media (max-width: 768px) {
266 .content {}
267
268 .banner-contaner {
269 height: auto;
270 }
271
272 .banner-pc {
273 display: none;
274 }
275
276 .banner-mobile {
277 display: block;
278 }
279
280 // 推荐产品
281 .recommend {
282 &-item {
283 width: 100% !important;
284 margin: $marginSmall-M auto !important;
285 }
286 }
287
288 .box-shadow {
289 box-shadow: none;
290 }
291
292 .swiper-pagination-fraction,
293 .swiper-pagination-custom,
294 .swiper-container-horizontal>.swiper-pagination-bullets {
295 bottom: 2px;
296 }
297
298 }
1
2 <template>
3 <div class="page page-index">
4 <div class="banner-contaner">
5 <!-- banner 轮播 -->
6
7 <div class="banner banner-pc">
8 <swiper :options="swiperOption">
9 <swiper-slide v-for="(item,index) in bannerList" :key="index">
10 <img class="banner-img" :src="item.pcBannerUrl">
11 <div class="btn-wrap">
12 <div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
13 <div class="banner-btn" v-if="btnItem.n && btnItem.t && btnItem.c" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{backgroundColor:btnItem.c}">{{btnItem.n}}</div>
14 </div>
15 </div>
16 </swiper-slide>
17 <div class="swiper-button-prev" slot="button-prev"></div>
18 <div class="swiper-button-next" slot="button-next"></div>
19 <div class="swiper-pagination" slot="pagination"></div>
20 </swiper>
21 </div>
22
23 <div class="banner banner-mobile">
24 <swiper class="swiper" :options="swiperOption">
25 <swiper-slide v-for="(item,index) in bannerList" :key="index">
26 <img class="banner-img" :src="item.mobileBannerUrl">
27 <div class="btn-wrap">
28 <div class="banner-btn" v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{color:btnItem.c}">{{btnItem.n}}&nbsp;&gt;</div>
29 </div>
30 </swiper-slide>
31 <div class="swiper-pagination" slot="pagination"></div>
32 </swiper>
33 </div>
34
35 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
36 <div class="swiper-button-next" slot="button-next"></div> -->
37 </div>
38 <div class="content">
39 <!-- 推荐产品 -->
40 <div class="box recommend gird-g">
41 <div class="recommend-item pure-u-1 pure-u-md-1-2">
42 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t1')}}</div>
43 <div class="img img1"></div>
44 </div>
45 <div class="recommend-item pure-u-1 pure-u-md-1-2">
46 <div @click="onRecommendHandler(3)" class="btn pointer">{{$t('index.recommend.t2')}}</div>
47 <div class="img img2"></div>
48 </div>
49 <div class="recommend-item pure-u-1 pure-u-md-1-2">
50 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t3')}}</div>
51 <div class="img img3"></div>
52 </div>
53 <div class="recommend-item pure-u-1 pure-u-md-1-2">
54 <div @click="onRecommendHandler(4)" class="btn pointer">{{$t('index.recommend.t4')}}</div>
55 <div class="img img4"></div>
56 </div>
57 </div>
58 <!-- 详情 -->
59 <div class="box detail">
60 <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true">
61 </video-player>
62 <div v-if="$i18n.locale == 'zh'" class="txt">
63 中国平安人寿保险股份有限公司成立于2002年,是中国平安保险（集团）股份有限公司旗下的重要成员。截至2017年12月31日,平安人寿注册资本为338亿元，在全国拥有42家分公司（含7家电话销售中心）及超过3,300个营业网点,寿险代理人达138.6万名。公司个险、银保、电销、互联网多渠道齐头并进，实现协同发展，运营管理水平及客户体验领先市场，并依托集团“金融+科技”双驱动战略，在合规经营、防范风险的前提下，开启平台经营新时代，持续提升产品、科技两大核心竞争力，推动内含价值及规模持续、健康、稳定增长。
64 </div>
65 <div v-else-if="$i18n.locale == 'tc'" class="txt">
66 中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
67 </div>
68 <div v-else class="txt">
69 Ping An Life Insurance Co., Ltd. of China was founded in 2002. It is an important member of Ping An insurance (Group) Co., Ltd. As of December 31, 2017, Ping An life had a registered capital of 33.8 billion yuan. It has 42 branches (including 7 telemarketing centers) and more than 3300 business outlets nationwide, with 1.386 million life insurance agents. The company's personal insurance, bancassurance, telemarketing and Internet multi-channel go hand in hand to achieve coordinated development, leading the market in operation and management level and customer experience, and relying on the group's "Finance + technology" dual drive strategy, under the premise of compliant operation and risk prevention, to open a new era of platform operation, continuously improve the two core competitiveness of products and technology, and promote the sustainability of embedded value and scale Healthy and stable growth.
70 </div>
71 </div>
72 </div>
73 </div>
74 </template>
75
76 <script src="./index.js"></script>
77 <style lang="scss" scoped>
78 @import "./index.scss";
79 </style>
...@@ -8,12 +8,60 @@ import { ...@@ -8,12 +8,60 @@ import {
8 httpGet, 8 httpGet,
9 httpPost 9 httpPost
10 } from '@/api/fetch-api.js'; 10 } from '@/api/fetch-api.js';
11 import {
12 mapGetters,
13 mapActions,
14 mapState
15 } from "vuex";
16 var UA = require("ua-device");
11 17
12 export default { 18 export default {
13 data() { 19 data() {
14 return { 20 return {
15 key: 'value', 21 key: 'value',
22 // swiper
23 swiperOption: {
24 navigation: {
25 nextEl: '.swiper-button-next',
26 prevEl: '.swiper-button-prev'
27 },
28 pagination: {
29 el: '.swiper-pagination',
30 clickable: true,
31 },
32 autoplay: {
33 delay: 5000,
34 stopOnLastSlide: false,
35 disableOnInteraction: false
36 },
37 speed: 1000,
38 },
39 bannerList: [],
40 bannerCandidateList: [],
16 41
42 // 导航菜单
43 tabList: [{
44 name: "平安“好e時”<br>自願醫保標準計劃",
45 url: "",
46 id: 0,
47 }, {
48 name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
49 url: "",
50 id: 1,
51 }, {
52 name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
53 url: "",
54 id: 2,
55 }, {
56 name: "Ping An GenRich<br>Insurance Plan",
57 url: "",
58 id: 3,
59 }, {
60 name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
61 url: "",
62 id: 4,
63 }],
64 curTab: {}
17 } 65 }
18 }, 66 },
19 components: {}, 67 components: {},
...@@ -26,15 +74,75 @@ export default { ...@@ -26,15 +74,75 @@ export default {
26 }, 74 },
27 }, 75 },
28 methods: { 76 methods: {
77
78 initData() {
79 this.curTab = this.tabList[0];
80 this.fetchBanner().then(res => {
81 this.bannerCandidateList = res;
82 this.refreshBanner();
83 });
84 },
85 fetchBanner() {
86 return new Promise((resolve, reject) => {
87 httpPost({
88 url: api.banner
89 }).then(res => {
90 resolve(res);
91 });
92 });
93 },
94 refreshBanner() {
95 let key = this.locale;
96 if (key == "zh") {
97 key = "cn";
98 }
99 let bannerList = [];
100 this.bannerCandidateList.forEach(element => {
101 bannerList.push(element[key]);
102 });
103 this.$set(this, 'bannerList', bannerList);
104 },
105 btnNavigateTo(type, link) {
106 switch (type) {
107 case "none":
108 break;
109 case "news":
110 this.$router.push({
111 path: "/news/detail",
112 query: {
113 c: link
114 }
115 });
116 break;
117 case "product":
118 break;
119 case "vhis":
120 this.$router.push({
121 path: "/vhis",
122 query: {
123 p: link
124 }
125 });
126 break;
127 default:
128 location.href = link;
129 break;
130 }
131 },
132 // 选择标签
133 onTabHandler(item) {
134 this.curTab = item;
135 }
29 }, 136 },
30 beforeDestroy() { 137 beforeDestroy() {},
31 },
32 mounted() { 138 mounted() {
139 this.initData();
33 }, 140 },
34 created() { 141 created() {
35 this.$root.eventBus.$on("langChange", () => { 142 this.$root.eventBus.$on("langChange", () => {
36 try { 143 try {
37 } catch (e) { } 144 this.refreshBanner();
145 } catch (e) {}
38 }); 146 });
39 } 147 }
40 148
......
1 @import '@/styles/_support.scss'; 1 @import '@/styles/_support.scss';
2 2
3 .content { 3 .page {}
4 padding-bottom: 27px;
5 }
6 4
7 .top-space { 5 .top-space {
8 height: 27px; 6 height: 27px;
...@@ -16,6 +14,7 @@ ...@@ -16,6 +14,7 @@
16 // banner 轮播 14 // banner 轮播
17 .banner-contaner { 15 .banner-contaner {
18 width: 100%; 16 width: 100%;
17 // height: 502px;
19 height: 470px; 18 height: 470px;
20 margin: 0 auto; 19 margin: 0 auto;
21 position: relative; 20 position: relative;
...@@ -32,7 +31,6 @@ ...@@ -32,7 +31,6 @@
32 margin-left: -960px; 31 margin-left: -960px;
33 top: 0; 32 top: 0;
34 width: 1920px; 33 width: 1920px;
35 height: 100%;
36 overflow: hidden; 34 overflow: hidden;
37 35
38 .banner-img { 36 .banner-img {
...@@ -42,26 +40,32 @@ ...@@ -42,26 +40,32 @@
42 40
43 .btn-wrap { 41 .btn-wrap {
44 position: absolute; 42 position: absolute;
45 z-index: 1; 43 z-index: 2;
46 // 两个banner图按钮位置不一样，和原先约定的按钮位置固定不一致 44 // 两个banner图按钮位置不一样，和原先约定的按钮位置固定不一致
47 // 如要调整位置，请调整top,right。如需要右对齐请使用right 45 // 如要调整位置，请调整top,right。如需要右对齐请使用right
48 // 已用padding适应文本过长的情况(英文等); 46 // 已用padding适应文本过长的情况(英文等);
49 // top: 272px; 47 // top: 272px;
50 // left: 1228px; 48 // left: 1228px;
51 // top: 310px; 49 // top: 310px;
52 top: 295px; 50 top: 309px;
53 right: 432px; 51 left: 466px;
54 display: flex; 52 display: flex;
55 53
56 .banner-btn { 54 .banner-btn {
57 @extend .pointer; 55 @extend .pointer;
58 @extend .bb; 56 @extend .bb;
59 @include btc2(126px, 48px, $fontSizeTitle); 57 @include btc4(300px, 50px, $fontSizeTitle);
58 font-size: 22px;
60 width: auto; 59 width: auto;
61 padding: 0 24px; 60 padding: 0 24px;
62 min-width: 126px; 61 min-width: 288px;
63 margin-left: 12px; 62 margin-left: 12px;
64 background-image: none; 63 background: url("~@assets/images/vhis/vhis-btn.png");
64
65 }
66
67 .banner-btn:lang(zh) {
68 letter-spacing: 1.5px;
65 } 69 }
66 } 70 }
67 } 71 }
...@@ -87,115 +91,159 @@ ...@@ -87,115 +91,159 @@
87 .banner-btn { 91 .banner-btn {
88 @extend .pointer; 92 @extend .pointer;
89 padding: 0 12px; 93 padding: 0 12px;
90 color: $cOrange; 94 color: $cOrange2;
91 } 95 }
92 } 96 }
93 } 97 }
94 98
95 // 推荐产品 99 // 导航菜单切换
96 .recommend { 100 .nav-tab {
101 min-height: 100px;
97 display: flex; 102 display: flex;
103 font-size: 22px;
98 text-align: center; 104 text-align: center;
99 justify-content: space-between; 105 font-weight: bold;
100 flex-wrap: wrap; 106 color: $cOrange2;
101 107
102 &-item { 108 width: 1200px;
103 @extend .bb; 109 margin: 0 auto;
104 110
105 margin-right: $marginSmall; 111 &-item {
112 @extend .fcc;
113 border-right: solid 2px #ffffff;
114 cursor: pointer;
115 color: #ff6839;
116 background-color: #fff1ed;
106 117
107 &:last-child { 118 &:last-child {
108 margin-right: 0; 119 border-right: none;
109 }
110
111
112 position: relative;
113 width: 291px;
114 // width: 100%;
115 height: 393px;
116 border-radius: $borderRadiusSmall;
117 @extend .box-shadow;
118 background-color: #fbfbfb;
119
120 .img {
121 width: 100%;
122 height: 291px;
123 background-size: cover;
124 }
125
126 .img1 {
127 background: url("~@/assets/images/index/recommend-1.png") no-repeat center;
128 background-size: cover;
129 }
130
131 .img2 {
132 background: url("~@/assets/images/index/recommend-2.png") no-repeat center;
133 background-size: cover;
134 }
135
136 .img3 {
137 background: url("~@/assets/images/index/recommend-3.png") no-repeat center;
138 background-size: cover;
139 }
140
141 .img4 {
142 background: url("~@/assets/images/index/recommend-4.png") no-repeat center;
143 background-size: cover;
144 } 120 }
121 }
145 122
123 &-item-act {
124 color: #ffffff;
125 @include linear-bg();
126 }
127 }
146 128
147 .btn { 129 // 推荐 为什么选择平安人寿
148 position: absolute; 130 .recommend {
149 left: 0; 131 margin: 100px auto 0;
150 right: 0; 132 text-align: center;
151 bottom: 36px; 133 position: relative;
152 margin: 0 auto;
153 134
154 @include btc2(162px, 48px, 16px); 135 .tit {
155 } 136 color: $cOrange2;
137 font-size: 36px;
138 font-weight: bold;
139 }
156 140
157 img { 141 .features {
158 width: 100%; 142 display: flex;
159 @include border-top-radius($borderRadius); 143 justify-content: center;
160 } 144 align-items: center;
145 margin: 44px auto 0;
161 146
162 &:first-child { 147 &-item {
163 padding-left: 0; 148 position: relative;
149 text-align: center;
150 font-size: 22px;
151 width: 316px;
152
153 .icon {
154 @extend .fcc;
155 height: 164px;
156 text-align: center;
157 }
158
159 .desc {
160 margin-top: 16px;
161 }
164 } 162 }
163 }
165 164
166 &:last-child { 165 .contact-tips {
167 padding-right: 0; 166 position: absolute;
167 bottom: 0;
168 right: 0;
169 @include linear-bg();
170 @extend .fcc;
171 padding: 0 24px;
172 height: 52px;
173 border-radius: 26px;
174 font-size: 22px;
175 font-weight: bold;
176 color: #ffffff;
177 cursor: pointer;
178
179 .icon {
180 background-image: url('~@/assets/images/index/icon-contact-tips.png');
181 @extend .bis;
182 width: 35px;
183 height: 31px;
184 margin-top: 4px;
185 margin-right: 10px;
168 } 186 }
169 } 187 }
170 } 188 }
171 189
172 // 详情 190 // 线上报价
173 .detail { 191 .quote {
174 display: flex; 192 background: url('~@/assets/images/index/index-quote-bg-temp.png') center no-repeat;
175 max-width: 1200px; 193 width: 100%;
194 height: 1482px;
195 ;
196 overflow: hidden;
197 margin: 52px auto 0;
198 }
176 199
200 // 联系我们表单
201 .contact {
202 position: relative;
203 background-color: #eff0f0;
204 padding-top: 100px;
177 205
178 .txt { 206 .panel {
179 position: relative; 207 display: flex;
180 @extend .fcc;
181 @extend .bb;
182 @include ellipsis(14);
183 padding-left: 26px;
184 flex: 1;
185 line-height: 2.3;
186 208
187 } 209 .panel-left {
210 .t1 {
211 font-size: 36px;
212 color: $cOrange2;
213 font-weight: bold;
214
215 &:lang(zh) {
216 letter-spacing: 1.8px;
217 }
218 }
219
220 .t2{
221 margin-top: 50px;
222 font-size: 24px;
223 font-weight: bold;
224 }
225
226 .pic-mobile{
227 margin-top: 248px;
228 }
229 }
188 230
189 .txt:lang(zh) { 231 .panel-right {
190 letter-spacing: 1.4px; 232 @extend .bb;
233 flex: 1;
234 padding-left: 40px;
235 .form{
236 width: 100%;
237 // height: 600px;
238 // background-color: wheat;
239 }
240 }
191 } 241 }
192 } 242 }
193 243
194
195 .swiper-button-prev { 244 .swiper-button-prev {
196 background-image: url('~@/assets/images/common/button-prev.png'); 245 background-image: url('~@/assets/images/common/button-prev.png');
197 left: 360px; 246 left: 360px;
198
199 } 247 }
200 248
201 .swiper-button-next { 249 .swiper-button-next {
...@@ -234,31 +282,6 @@ ...@@ -234,31 +282,6 @@
234 @include content-percent(); 282 @include content-percent();
235 } 283 }
236 284
237 // 推荐产品
238 .recommend {
239 justify-content: center;
240
241 &-item {
242 width: 46% !important;
243 padding: 0 !important;
244 margin: 2% !important;
245 }
246 }
247
248 // 详情
249 .detail {
250 display: block;
251
252 .vjs-custom-skin {
253 width: 100%;
254 }
255
256
257 .txt {
258 padding: 0;
259 margin: $marginSmall 0 $marginMedium;
260 }
261 }
262 } 285 }
263 286
264 287
...@@ -277,18 +300,6 @@ ...@@ -277,18 +300,6 @@
277 display: block; 300 display: block;
278 } 301 }
279 302
280 // 推荐产品
281 .recommend {
282 &-item {
283 width: 100% !important;
284 margin: $marginSmall-M auto !important;
285 }
286 }
287
288 .box-shadow {
289 box-shadow: none;
290 }
291
292 .swiper-pagination-fraction, 303 .swiper-pagination-fraction,
293 .swiper-pagination-custom, 304 .swiper-pagination-custom,
294 .swiper-container-horizontal>.swiper-pagination-bullets { 305 .swiper-container-horizontal>.swiper-pagination-bullets {
......
...@@ -14,24 +14,9 @@ ...@@ -14,24 +14,9 @@
14 </div> 14 </div>
15 </div> 15 </div>
16 </swiper-slide> 16 </swiper-slide>
17 <!-- <swiper-slide> 17 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
18 <img @click="toVhis" class="banner-img" src="https://ow.go.qudone.com/pingan/upload/cbb6f8bb32eb4fc1aea97d210b0f7536.png"> 18 <div class="swiper-button-next" slot="button-next"></div> -->
19 <div class="btn-wrap"> 19 <!-- <div class="swiper-pagination" slot="pagination"></div> -->
20 <div class="banner-btn">产品详情</div>
21 <div class="banner-btn">在线报价</div>
22 </div>
23 </swiper-slide>
24 <swiper-slide>
25 <img @click="toVhis" class="banner-img" src="https://ow.go.qudone.com/pingan/upload/fcb27c52c7fb4584b12f9832f1323abe.png">
26 <div class="btn-wrap">
27 <div class="banner-btn">产品详情</div>
28 <div class="banner-btn">在线报价</div>
29 </div>
30 </swiper-slide> -->
31
32 <div class="swiper-button-prev" slot="button-prev"></div>
33 <div class="swiper-button-next" slot="button-next"></div>
34 <div class="swiper-pagination" slot="pagination"></div>
35 </swiper> 20 </swiper>
36 </div> 21 </div>
37 22
...@@ -43,63 +28,69 @@ ...@@ -43,63 +28,69 @@
43 <div class="banner-btn" v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{color:btnItem.c}">{{btnItem.n}}&nbsp;&gt;</div> 28 <div class="banner-btn" v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{color:btnItem.c}">{{btnItem.n}}&nbsp;&gt;</div>
44 </div> 29 </div>
45 </swiper-slide> 30 </swiper-slide>
46
47 <!-- <swiper-slide>
48 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m1-'+locale+'.jpg')">
49 <div class="btn-wrap">
50 <div class="banner-btn">产品详情></div>
51 <div class="banner-btn">在线报价></div>
52 </div>
53 </swiper-slide>
54 <swiper-slide>
55 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m2-'+locale+'.jpg')">
56 <div class="btn-wrap">
57 <div class="banner-btn">产品详情></div>
58 <div class="banner-btn">在线报价></div>
59 </div>
60 </swiper-slide> -->
61 <div class="swiper-pagination" slot="pagination"></div> 31 <div class="swiper-pagination" slot="pagination"></div>
62 </swiper> 32 </swiper>
63 </div> 33 </div>
64
65 <!-- <div class="swiper-button-prev" slot="button-prev"></div> 34 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
66 <div class="swiper-button-next" slot="button-next"></div> --> 35 <div class="swiper-button-next" slot="button-next"></div> -->
36
67 </div> 37 </div>
68 <div class="content"> 38 <!-- 导航菜单切换 -->
69 <!-- 推荐产品 --> 39 <div class="nav-tab">
70 <div class="box recommend gird-g"> 40 <div @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" class="nav-tab-item" :class="{'nav-tab-item-act':item.id == curTab.id}" :style="'width: calc(100% / '+tabList.length+');'">{{item.name}}</div>
71 <div class="recommend-item pure-u-1 pure-u-md-1-2"> 41 </div>
72 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t1')}}</div> 42 <!-- 推荐 为什么选择平安人寿 -->
73 <div class="img img1"></div> 43 <div class="content recommend">
74 </div> 44 <div class="tit">為何選擇平安人壽？</div>
75 <div class="recommend-item pure-u-1 pure-u-md-1-2"> 45 <div class="features">
76 <div @click="onRecommendHandler(3)" class="btn pointer">{{$t('index.recommend.t2')}}</div> 46 <div class="features-item">
77 <div class="img img2"></div> 47 <div class="icon">
48 <img src="@/assets/images/index/recommend-icon-1.png" alt="">
49 </div>
50 <div class="desc">簡單方便<br>線上客戶服務系統</div>
78 </div> 51 </div>
79 <div class="recommend-item pure-u-1 pure-u-md-1-2"> 52 <div class="features-item">
80 <div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t3')}}</div> 53 <div class="icon">
81 <div class="img img3"></div> 54 <img src="@/assets/images/index/recommend-icon-2.png" alt="">
55 </div>
56 <div class="desc">信心保證<br>服務超過2億客戶</div>
82 </div> 57 </div>
83 <div class="recommend-item pure-u-1 pure-u-md-1-2"> 58 <div class="features-item">
84 <div @click="onRecommendHandler(4)" class="btn pointer">{{$t('index.recommend.t4')}}</div> 59 <div class="icon">
85 <div class="img img4"></div> 60 <img src="@/assets/images/index/recommend-icon-3.png" alt="">
61 </div>
62 <div class="desc">國際級<br>風險管理</div>
86 </div> 63 </div>
87 </div> 64 </div>
88 <!-- 详情 --> 65 <div class="contact-tips">
89 <div class="box detail"> 66 <span class="icon"></span>
90 <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"> 67 聯絡我們
91 </video-player> 68 </div>
92 <div v-if="$i18n.locale == 'zh'" class="txt"> 69 </div>
93 中国平安人寿保险股份有限公司成立于2002年,是中国平安保险（集团）股份有限公司旗下的重要成员。截至2017年12月31日,平安人寿注册资本为338亿元，在全国拥有42家分公司（含7家电话销售中心）及超过3,300个营业网点,寿险代理人达138.6万名。公司个险、银保、电销、互联网多渠道齐头并进，实现协同发展，运营管理水平及客户体验领先市场，并依托集团“金融+科技”双驱动战略，在合规经营、防范风险的前提下，开启平台经营新时代，持续提升产品、科技两大核心竞争力，推动内含价值及规模持续、健康、稳定增长。 70
94 </div> 71 <!-- 线上报价 -->
95 <div v-else-if="$i18n.locale == 'tc'" class="txt"> 72 <div class="quote"></div>
96 中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。 73
74 <!-- 联系我们表单 -->
75 <div class="contact">
76 <div class="box-w panel">
77 <div class="panel-left">
78 <div class="t1">如欲了解我們的產品，<br>歡迎聯絡我們。</div>
79 <div class="t2">想了解更多？致電2983 8866^聯絡我們。</div>
80 <img class="pic-mobile" src="@/assets/images/index/index-mobile.png" alt="">
97 </div> 81 </div>
98 <div v-else class="txt"> 82 <div class="panel-right">
99 Ping An Life Insurance Co., Ltd. of China was founded in 2002. It is an important member of Ping An insurance (Group) Co., Ltd. As of December 31, 2017, Ping An life had a registered capital of 33.8 billion yuan. It has 42 branches (including 7 telemarketing centers) and more than 3300 business outlets nationwide, with 1.386 million life insurance agents. The company's personal insurance, bancassurance, telemarketing and Internet multi-channel go hand in hand to achieve coordinated development, leading the market in operation and management level and customer experience, and relying on the group's "Finance + technology" dual drive strategy, under the premise of compliant operation and risk prevention, to open a new era of platform operation, continuously improve the two core competitiveness of products and technology, and promote the sustainability of embedded value and scale Healthy and stable growth. 83 <div class="form">
84 <div class="ipt-wrap2">
85 <div class="cont">
86 <input class="ipt" type="text">
87 </div>
88 </div>
89 </div>
100 </div> 90 </div>
101 </div> 91 </div>
102 </div> 92 </div>
93
103 </div> 94 </div>
104 </template> 95 </template>
105 96
......
...@@ -67,11 +67,12 @@ $borderSize: 6px; ...@@ -67,11 +67,12 @@ $borderSize: 6px;
67 margin-left: 12px; 67 margin-left: 12px;
68 background: url("~@assets/images/vhis/vhis-btn.png"); 68 background: url("~@assets/images/vhis/vhis-btn.png");
69 69
70 &:lang(zh) {
71 letter-spacing: 1.5px;
72 }
70 } 73 }
71 74
72 .banner-btn:lang(zh) { 75
73 letter-spacing: 1.5px;
74 }
75 } 76 }
76 } 77 }
77 78
...@@ -171,23 +172,27 @@ $borderSize: 6px; ...@@ -171,23 +172,27 @@ $borderSize: 6px;
171 color: $cOrange2; 172 color: $cOrange2;
172 font-weight: bold; 173 font-weight: bold;
173 font-size: 34px; 174 font-size: 34px;
174 }
175 175
176 .t1:lang(zh) { 176 &:lang(zh) {
177 letter-spacing: 6px; 177 letter-spacing: 6px;
178 }
178 } 179 }
179 180
181
182
180 .t2 { 183 .t2 {
181 font-size: 24px; 184 font-size: 24px;
182 line-height: 1.39; 185 line-height: 1.39;
183 // margin-top: 36px; 186 // margin-top: 36px;
184 max-width: 780px; 187 max-width: 780px;
185 margin: 36px auto 0; 188 margin: 36px auto 0;
186 }
187 189
188 .t2:lang(zh) { 190 &:lang(zh) {
189 letter-spacing: 2px; 191 letter-spacing: 2px;
192 }
190 } 193 }
194
195
191 } 196 }
192 197
193 // 产品 198 // 产品
...@@ -199,12 +204,14 @@ $borderSize: 6px; ...@@ -199,12 +204,14 @@ $borderSize: 6px;
199 color: $cOrange2; 204 color: $cOrange2;
200 font-size: 36px; 205 font-size: 36px;
201 font-weight: bold; 206 font-weight: bold;
202 }
203 207
204 .tit:lang(zh) { 208 &:lang(zh) {
205 letter-spacing: 2.5px; 209 letter-spacing: 2.5px;
210 }
206 } 211 }
207 212
213
214
208 .prod { 215 .prod {
209 margin: 24px auto 0; 216 margin: 24px auto 0;
210 color: $cOrange2; 217 color: $cOrange2;
...@@ -245,12 +252,14 @@ $borderSize: 6px; ...@@ -245,12 +252,14 @@ $borderSize: 6px;
245 .t1 { 252 .t1 {
246 font-size: 22px; 253 font-size: 22px;
247 font-weight: bold; 254 font-weight: bold;
248 }
249 255
250 .t1:lang(zh) { 256 &:lang(zh) {
251 letter-spacing: 2px; 257 letter-spacing: 2px;
258 }
252 } 259 }
253 260
261
262
254 .more { 263 .more {
255 display: flex; 264 display: flex;
256 margin-top: 6px; 265 margin-top: 6px;
...@@ -265,11 +274,13 @@ $borderSize: 6px; ...@@ -265,11 +274,13 @@ $borderSize: 6px;
265 274
266 .c1 { 275 .c1 {
267 font-size: 18px; 276 font-size: 18px;
268 }
269 277
270 .c1:lang(zh) { 278 &:lang(zh) {
271 letter-spacing: 1.2px; 279 letter-spacing: 1.2px;
280 }
272 } 281 }
282
283
273 } 284 }
274 285
275 .desc { 286 .desc {
...@@ -313,12 +324,14 @@ $borderSize: 6px; ...@@ -313,12 +324,14 @@ $borderSize: 6px;
313 color: $cOrange2; 324 color: $cOrange2;
314 font-size: 36px; 325 font-size: 36px;
315 font-weight: bold; 326 font-weight: bold;
316 }
317 327
318 .tit:lang(zh) { 328 &:lang(zh) {
319 letter-spacing: 1.8px; 329 letter-spacing: 1.8px;
330 }
320 } 331 }
321 332
333
334
322 .tit-s { 335 .tit-s {
323 font-size: $fontSize-M2; 336 font-size: $fontSize-M2;
324 color: $cFontGray2; 337 color: $cFontGray2;
...@@ -350,12 +363,14 @@ $borderSize: 6px; ...@@ -350,12 +363,14 @@ $borderSize: 6px;
350 width: 50%; 363 width: 50%;
351 padding: 18px 18px 18px 0; 364 padding: 18px 18px 18px 0;
352 color: $cFontGray3; 365 color: $cFontGray3;
353 }
354 366
355 .tt:lang(zh) { 367 &:lang(zh) {
356 letter-spacing: 1.12px; 368 letter-spacing: 1.12px;
369 }
357 } 370 }
358 371
372
373
359 .label { 374 .label {
360 background-color: #fef1ed; 375 background-color: #fef1ed;
361 padding-left: 100px; 376 padding-left: 100px;
...@@ -389,12 +404,14 @@ $borderSize: 6px; ...@@ -389,12 +404,14 @@ $borderSize: 6px;
389 .t1 { 404 .t1 {
390 color: $cOrange2; 405 color: $cOrange2;
391 } 406 }
392 }
393 407
394 .tt:lang(zh) { 408 &:lang(zh) {
395 letter-spacing: 1.12px; 409 letter-spacing: 1.12px;
410 }
396 } 411 }
397 412
413
414
398 .tt2 { 415 .tt2 {
399 padding: 50px 64px 26px 50px; 416 padding: 50px 64px 26px 50px;
400 padding: 48px; 417 padding: 48px;
...@@ -523,13 +540,6 @@ $borderSize: 6px; ...@@ -523,13 +540,6 @@ $borderSize: 6px;
523 } 540 }
524 } 541 }
525 542
526 // .label:lang(zh) {
527 // line-height: 1.5;
528 // }
529
530 // .val:lang(zh) {
531 // line-height: 1.5;
532 // }
533 } 543 }
534 544
535 &-item-4 { 545 &-item-4 {
......
...@@ -57,13 +57,12 @@ ...@@ -57,13 +57,12 @@
57 flex: 1; 57 flex: 1;
58 display: flex; 58 display: flex;
59 align-items: center; 59 align-items: center;
60 }
61 60
62 .ipt:lang(zh) { 61 &:lang(zh) {
63 letter-spacing: 1.2px; 62 letter-spacing: 1.2px;
63 }
64 } 64 }
65 65
66
67 .down-arrow { 66 .down-arrow {
68 position: absolute; 67 position: absolute;
69 top: 26.4px; 68 top: 26.4px;
...@@ -106,6 +105,60 @@ ...@@ -106,6 +105,60 @@
106 } 105 }
107 106
108 107
108 // 输入框
109 .ipt-wrap2 {
110 .ipt {
111 @extend .bb;
112 width: 100%;
113 height: 50px;
114 border-radius: 5px;
115 border: 2px solid transparent;
116 background-clip: padding-box, border-box;
117 background-origin: padding-box, border-box;
118 background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08);
119
120 background-color: #ffffff;
121 padding: 0 24px;
122 flex: 1;
123 display: flex;
124 align-items: center;
125 font-size: 22px;
126
127 &:lang(zh) {
128 letter-spacing: 1.1px;
129 }
130 }
131
132 .down-arrow {
133 position: absolute;
134 top: 26.4px;
135 right: 24px;
136 background-image: url('~@/assets/images/common/down-arrow.png');
137 width: 12px;
138 height: 8px;
139 pointer-events: none;
140 cursor: default;
141
142 }
143
144 .eye {
145 position: absolute;
146 top: 14.4px;
147 right: 24px;
148 background-image: url('~@/assets/images/common/icon-eyes-off.png');
149 width: 27px;
150 height: 24px;
151 pointer-events: none;
152 cursor: default;
153 }
154
155 .eye-act {
156 background-image: url('~@/assets/images/common/icon-eyes-on.png');
157 }
158 }
159
160
161
109 // 轮播 162 // 轮播
110 .swiper-pagination-bullet { 163 .swiper-pagination-bullet {
111 width: 12px !important; 164 width: 12px !important;
...@@ -116,8 +169,6 @@ ...@@ -116,8 +169,6 @@
116 background: $cOrange !important; 169 background: $cOrange !important;
117 } 170 }
118 171
119
120
121 @media (max-width: 768px) { 172 @media (max-width: 768px) {
122 .alert { 173 .alert {
123 padding: 4px 36px 4px 12px; 174 padding: 4px 36px 4px 12px;
......
...@@ -6,7 +6,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts'; ...@@ -6,7 +6,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
6 6
7 @import "~element-ui/packages/theme-chalk/src/index"; 7 @import "~element-ui/packages/theme-chalk/src/index";
8 8
9 @import '@/styles/_support.scss'; 9 // @import '@/styles/_support.scss';
10 10
11 .filter-comp{ 11 .filter-comp{
12 .el-checkbox-group { 12 .el-checkbox-group {
...@@ -19,7 +19,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts'; ...@@ -19,7 +19,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
19 } 19 }
20 20
21 .el-checkbox__label { 21 .el-checkbox__label {
22 font-size: $fontSize-M2; 22 font-size: 24px;
23 } 23 }
24 } 24 }
25 25
......