Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
9d872915 by joe
Options

首页banner修改

1 parent f8a6ed3a
Inline Side-by-side
Showing 6 changed files with 136 additions and 109 deletions
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
7 z-index: 11; 7 z-index: 11;
8 8
9 .header-container { 9 .header-container {
10 max-width: 950px; 10 // max-width: 950px;
11 max-width: 1024px;
11 height: 100%; 12 height: 100%;
12 margin: auto; 13 margin: auto;
13 display: flex; 14 display: flex;
......
...@@ -9,16 +9,23 @@ export default { ...@@ -9,16 +9,23 @@ export default {
9 return { 9 return {
10 key: 'value', 10 key: 'value',
11 swiperOption: { 11 swiperOption: {
12 navigation: { 12 // navigation: {
13 nextEl: '.swiper-button-next', 13 // nextEl: '.swiper-button-next',
14 prevEl: '.swiper-button-prev' 14 // prevEl: '.swiper-button-prev'
15 }, 15 // },
16 pagination: { 16 pagination: {
17 el: '.swiper-pagination', 17 el: '.swiper-pagination',
18 // renderBullet(index, className) { 18 // renderBullet(index, className) {
19 // return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>` 19 // return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
20 // } 20 // }
21 } 21 },
22 autoplay: {
23 delay: 5000,
24 stopOnLastSlide: false,
25 disableOnInteraction: false
26 },
27 speed: 1000,
28
22 } 29 }
23 } 30 }
24 }, 31 },
......
...@@ -13,26 +13,40 @@ ...@@ -13,26 +13,40 @@
13 } 13 }
14 14
15 // banner 轮播 15 // banner 轮播
16 .banner { 16 .banner-contaner {
17 box-shadow: 0 0 1.75rem 0 rgba(255, 87, 0, 0.1); 17 height: 360px;
18 }
18 19
20 .banner {
21 // box-shadow: 0 0 1.75rem 0 rgba(255, 87, 0, 0.1);
22 position: absolute;
23 left: 50%;
24 margin-left: -960px;
25 top: 0;
26 width: 1920px;
27 height: 100%;
28 overflow: hidden;
19 &-img { 29 &-img {
20 width: 100%; 30 width: 100%;
31 height: 100%;
21 } 32 }
22 } 33 }
23 34
24 // 推荐产品 35 // 推荐产品
25 .recommend { 36 .recommend {
26 display: flex; 37 display: flex;
27 flex-wrap: wrap; 38 // flex-wrap: wrap;
28 justify-content: center; 39 // justify-content: center;
29 width: auto; 40 // width: auto;
30 text-align: center; 41 text-align: center;
42 justify-content: space-between;
43 max-width: 1200px;
44
31 45
32 &-item { 46 &-item {
33 margin-top: 2.25rem; 47 margin-top: 2.25rem;
34 position: relative; 48 position: relative;
35 // width: 25.833333rem; 49 width: 25.833333rem;
36 border-radius: .75rem; 50 border-radius: .75rem;
37 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 51 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
38 background-color: #fbfbfb; 52 background-color: #fbfbfb;
...@@ -155,7 +169,6 @@ ...@@ -155,7 +169,6 @@
155 } 169 }
156 } 170 }
157 171
158
159 .swiper-button-prev { 172 .swiper-button-prev {
160 background-image: url('~@/assets/images/common/button-prev.png'); 173 background-image: url('~@/assets/images/common/button-prev.png');
161 } 174 }
......
1 1
2 <template> 2 <template>
3 <div class="content"> 3 <div>
4 <div class="top-space"></div> 4 <div class="banner-contaner">
5 <!-- banner 轮播 --> 5 <!-- banner 轮播 -->
6 <div class="box-w banner"> 6 <div class="banner">
7 <swiper :options="swiperOption"> 7 <swiper :options="swiperOption">
8 <swiper-slide> 8 <swiper-slide>
9 <img class="banner-img" src="@/assets/images/index/banner.png"> 9 <img class="banner-img" src="@/assets/images/index/banner-01.jpg">
10 </swiper-slide> 10 </swiper-slide>
11 <div class="swiper-button-prev" slot="button-prev"></div> 11 <swiper-slide>
12 <div class="swiper-button-next" slot="button-next"></div> 12 <img class="banner-img" src="@/assets/images/index/banner-02.jpg">
13 <div class="swiper-pagination" slot="pagination"></div> 13 </swiper-slide>
14 </swiper> 14 <div class="swiper-button-prev" slot="button-prev"></div>
15 </div> 15 <div class="swiper-button-next" slot="button-next"></div>
16 <!-- 推荐产品 --> 16 <div class="swiper-pagination" slot="pagination"></div>
17 <div class="box recommend"> 17 </swiper>
18 <div class="recommend-item">
19 <div @click="onRecommendHandler(1)" class="btn pointer">了解更多產品</div>
20 <div class="tt t1">為自己和家人尋找壹份保障</div>
21 <img src="@/assets/images/index/recommend-1.png">
22 </div>
23 <div class="recommend-item">
24 <div @click="onRecommendHandler(2)" class="btn pointer">立即預約</div>
25 <div class="tt t1">在線預約 專業服務</div>
26 <img src="@/assets/images/index/recommend-2.png">
27 </div>
28 <div class="recommend-item">
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>
33 <img src="@/assets/images/index/recommend-3.png">
34 </div> 18 </div>
35 </div> 19 </div>
36 <!-- 了解我们 --> 20 <div class="content">
37 <div class="box more"> 21 <!-- 推荐产品 -->
38 <div class="cont"> 22 <div class="box recommend">
39 <div class="btn pointer"></div> 23 <div class="recommend-item">
24 <div @click="onRecommendHandler(1)" class="btn pointer">了解更多產品</div>
25 <div class="tt t1">為自己和家人尋找壹份保障</div>
26 <img src="@/assets/images/index/recommend-1.png">
27 </div>
28 <div class="recommend-item">
29 <div @click="onRecommendHandler(2)" class="btn pointer">立即預約</div>
30 <div class="tt t1">在線預約 專業服務</div>
31 <img src="@/assets/images/index/recommend-2.png">
32 </div>
33 <div class="recommend-item">
34 <div @click="onRecommendHandler(3)" class="btn pointer">客户服务</div>
35 <div class="tt t2">專業客服為妳服務</div>
36 <div class="tt t1">想了解更多，可致電
37 <span class="cOrange">95511</span>聯絡我們，或進入</div>
38 <img src="@/assets/images/index/recommend-3.png">
39 </div>
40 </div>
41 <!-- 了解我们 -->
42 <div class="box more">
43 <div class="cont">
44 <div class="btn pointer"></div>
40 45
41 <!-- <img src="@/assets/images/index/more-1-zh.png"> --> 46 <!-- <img src="@/assets/images/index/more-1-zh.png"> -->
42 <img :src="require('@/assets/images/index/more-1-'+locale+'.png')"> 47 <img :src="require('@/assets/images/index/more-1-'+locale+'.png')">
48 </div>
43 </div> 49 </div>
44 </div> 50 <!-- 新闻资讯 -->
45 <!-- 新闻资讯 --> 51 <div class="box news">
46 <div class="box news"> 52 <div class="linear"></div>
47 <div class="linear"></div> 53 <div class="tit">{{$t('index.news')}}</div>
48 <div class="tit">{{$t('index.news')}}</div> 54 <div class="under-line"></div>
49 <div class="under-line"></div> 55 <div class="news-wrap">
50 <div class="news-wrap"> 56 <!-- hardcode start -->
51 <!-- hardcode start --> 57 <template v-if="locale == 'zh'">
52 <template v-if="locale == 'zh'"> 58 <div @click="onMoreNewsHandler" class="more pointer">
53 <div @click="onMoreNewsHandler" class="more pointer"> 59 {{$t('index.newMore')}} >
54 {{$t('index.newMore')}} > 60 </div>
55 </div> 61 <div @click="toNewsDetail()" class="news-item">
56 <div @click="toNewsDetail()" class="news-item"> 62 <div class="news-item-tit">平安人寿2019年2季度保险消费报告出炉！</div>
57 <div class="news-item-tit">平安人寿2019年2季度保险消费报告出炉！</div> 63 <div class="news-item-date">2019-09-27</div>
58 <div class="news-item-date">2019-09-27</div> 64 </div>
59 </div> 65 <div @click="toNewsDetail()" class="news-item">
60 <div @click="toNewsDetail()" class="news-item"> 66 <div class="news-item-tit">公益献礼华诞年，创新开拓扶贫路</div>
61 <div class="news-item-tit">公益献礼华诞年，创新开拓扶贫路</div> 67 <div class="news-item-date">2019-09-27</div>
62 <div class="news-item-date">2019-09-27</div> 68 </div>
63 </div> 69 <div @click="toNewsDetail()" class="news-item">
64 <div @click="toNewsDetail()" class="news-item"> 70 <div class="news-item-tit">平安920要放大招啦！内含超强攻略！</div>
65 <div class="news-item-tit">平安920要放大招啦！内含超强攻略！</div> 71 <div class="news-item-date">2019-09-27</div>
66 <div class="news-item-date">2019-09-27</div> 72 </div>
67 </div> 73 <div @click="toNewsDetail()" class="news-item">
68 <div @click="toNewsDetail()" class="news-item"> 74 <div class="news-item-tit">突发！平安人寿迅速应对广东阳江大巴交通事故</div>
69 <div class="news-item-tit">突发！平安人寿迅速应对广东阳江大巴交通事故</div> 75 <div class="news-item-date">2019-09-27</div>
70 <div class="news-item-date">2019-09-27</div> 76 </div>
71 </div> 77 <div @click="toNewsDetail()" class="news-item">
72 <div @click="toNewsDetail()" class="news-item"> 78 <div class="news-item-tit">伴成长、助扶贫，平安人寿客服节给家庭“AI”的力量</div>
73 <div class="news-item-tit">伴成长、助扶贫，平安人寿客服节给家庭“AI”的力量</div> 79 <div class="news-item-date">2019-09-27</div>
74 <div class="news-item-date">2019-09-27</div> 80 </div>
75 </div> 81 </template>
76 </template> 82 <template v-else>
77 <template v-else> 83 <div @click="onMoreNewsHandler" class="more pointer">
78 <div @click="onMoreNewsHandler" class="more pointer"> 84 {{$t('index.newMore')}} >
79 {{$t('index.newMore')}} > 85 </div>
80 </div> 86 <div @click="toNewsDetail()" class="news-item">
81 <div @click="toNewsDetail()" class="news-item"> 87 <div class="news-item-tit">平安人壽2019年2季度保險消費報告出爐！</div>
82 <div class="news-item-tit">平安人壽2019年2季度保險消費報告出爐！</div> 88 <div class="news-item-date">2019-09-27</div>
83 <div class="news-item-date">2019-09-27</div> 89 </div>
84 </div> 90 <div @click="toNewsDetail()" class="news-item">
85 <div @click="toNewsDetail()" class="news-item"> 91 <div class="news-item-tit">公益獻禮華誕年，創新開拓扶貧路</div>
86 <div class="news-item-tit">公益獻禮華誕年，創新開拓扶貧路</div> 92 <div class="news-item-date">2019-09-27</div>
87 <div class="news-item-date">2019-09-27</div> 93 </div>
88 </div> 94 <div @click="toNewsDetail()" class="news-item">
89 <div @click="toNewsDetail()" class="news-item"> 95 <div class="news-item-tit">平安920要放大招啦！內含超強攻略！</div>
90 <div class="news-item-tit">平安920要放大招啦！內含超強攻略！</div> 96 <div class="news-item-date">2019-09-27</div>
91 <div class="news-item-date">2019-09-27</div> 97 </div>
92 </div> 98 <div @click="toNewsDetail()" class="news-item">
93 <div @click="toNewsDetail()" class="news-item"> 99 <div class="news-item-tit">突發！平安人壽迅速應對廣東陽江大巴交通事故</div>
94 <div class="news-item-tit">突發！平安人壽迅速應對廣東陽江大巴交通事故</div> 100 <div class="news-item-date">2019-09-27</div>
95 <div class="news-item-date">2019-09-27</div> 101 </div>
96 </div> 102 <div @click="toNewsDetail()" class="news-item">
97 <div @click="toNewsDetail()" class="news-item"> 103 <div class="news-item-tit">伴成長、助扶貧，平安人壽客服節給家庭“AI”的力量</div>
98 <div class="news-item-tit">伴成長、助扶貧，平安人壽客服節給家庭“AI”的力量</div> 104 <div class="news-item-date">2019-09-27</div>
99 <div class="news-item-date">2019-09-27</div> 105 </div>
100 </div> 106 </template>
101 </template>
102 107
103 <!-- hardcode end --> 108 <!-- hardcode end -->
109 </div>
104 </div> 110 </div>
105 </div> 111 </div>
106 </div> 112 </div>
......