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 44 additions and 17 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>
11 <swiper-slide>
12 <img class="banner-img" src="@/assets/images/index/banner-02.jpg">
10 </swiper-slide> 13 </swiper-slide>
11 <div class="swiper-button-prev" slot="button-prev"></div> 14 <div class="swiper-button-prev" slot="button-prev"></div>
12 <div class="swiper-button-next" slot="button-next"></div> 15 <div class="swiper-button-next" slot="button-next"></div>
13 <div class="swiper-pagination" slot="pagination"></div> 16 <div class="swiper-pagination" slot="pagination"></div>
14 </swiper> 17 </swiper>
15 </div> 18 </div>
19 </div>
20 <div class="content">
16 <!-- 推荐产品 --> 21 <!-- 推荐产品 -->
17 <div class="box recommend"> 22 <div class="box recommend">
18 <div class="recommend-item"> 23 <div class="recommend-item">
...@@ -104,6 +109,7 @@ ...@@ -104,6 +109,7 @@
104 </div> 109 </div>
105 </div> 110 </div>
106 </div> 111 </div>
112 </div>
107 </template> 113 </template>
108 114
109 <script src="./index.js"></script> 115 <script src="./index.js"></script>
......