Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
94c2f05e by simon
Options

默认提交

1 parent 220da92c
Inline Side-by-side
Showing 9 changed files with 62 additions and 6 deletions
...@@ -26,11 +26,11 @@ export default { ...@@ -26,11 +26,11 @@ export default {
26 el: '.swiper-pagination', 26 el: '.swiper-pagination',
27 clickable: true, 27 clickable: true,
28 }, 28 },
29 autoplay: { 29 // autoplay: {
30 delay: 5000, 30 // delay: 5000,
31 stopOnLastSlide: false, 31 // stopOnLastSlide: false,
32 disableOnInteraction: false 32 // disableOnInteraction: false
33 }, 33 // },
34 speed: 1000, 34 speed: 1000,
35 35
36 }, 36 },
......
...@@ -38,7 +38,30 @@ ...@@ -38,7 +38,30 @@
38 .banner-img { 38 .banner-img {
39 width: 100%; 39 width: 100%;
40 height: 100%; 40 height: 100%;
41 cursor: pointer; 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 right: 432px;
53 display: flex;
54
55 .banner-btn {
56 @extend .pointer;
57 @extend .bb;
58 @include btc2(126px, 48px, $fontSizeTitle);
59 width: auto;
60 padding: 0 24px;
61 min-width: 126px;
62 margin-left: 12px;
63 background-image: none;
64 }
42 } 65 }
43 } 66 }
44 67
...@@ -49,6 +72,23 @@ ...@@ -49,6 +72,23 @@
49 .banner-img { 72 .banner-img {
50 width: 100%; 73 width: 100%;
51 } 74 }
75
76 .btn-wrap{
77 position: absolute;
78 z-index: 1;
79 top: 87%;
80 left: 0;
81 right: 0;
82 margin: 0 auto;
83 display: flex;
84 justify-content: center;
85
86 .banner-btn{
87 @extend .pointer;
88 padding: 0 12px;
89 color: $cOrange;
90 }
91 }
52 } 92 }
53 93
54 // 推荐产品 94 // 推荐产品
......
...@@ -8,9 +8,17 @@ ...@@ -8,9 +8,17 @@
8 <swiper :options="swiperOption"> 8 <swiper :options="swiperOption">
9 <swiper-slide> 9 <swiper-slide>
10 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-p1-'+locale+'.png')"> 10 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-p1-'+locale+'.png')">
11 <div class="btn-wrap">
12 <div class="banner-btn">产品详情</div>
13 <div class="banner-btn">在线报价</div>
14 </div>
11 </swiper-slide> 15 </swiper-slide>
12 <swiper-slide> 16 <swiper-slide>
13 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-p2-'+locale+'.png')"> 17 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-p2-'+locale+'.png')">
18 <div class="btn-wrap">
19 <div class="banner-btn">产品详情</div>
20 <div class="banner-btn">在线报价</div>
21 </div>
14 </swiper-slide> 22 </swiper-slide>
15 <div class="swiper-pagination" slot="pagination"></div> 23 <div class="swiper-pagination" slot="pagination"></div>
16 </swiper> 24 </swiper>
...@@ -20,9 +28,17 @@ ...@@ -20,9 +28,17 @@
20 <swiper class="swiper" :options="swiperOption"> 28 <swiper class="swiper" :options="swiperOption">
21 <swiper-slide> 29 <swiper-slide>
22 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m1-'+locale+'.jpg')"> 30 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m1-'+locale+'.jpg')">
31 <div class="btn-wrap">
32 <div class="banner-btn">产品详情></div>
33 <div class="banner-btn">在线报价></div>
34 </div>
23 </swiper-slide> 35 </swiper-slide>
24 <swiper-slide> 36 <swiper-slide>
25 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m2-'+locale+'.jpg')"> 37 <img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m2-'+locale+'.jpg')">
38 <div class="btn-wrap">
39 <div class="banner-btn">产品详情></div>
40 <div class="banner-btn">在线报价></div>
41 </div>
26 </swiper-slide> 42 </swiper-slide>
27 <div class="swiper-pagination" slot="pagination"></div> 43 <div class="swiper-pagination" slot="pagination"></div>
28 </swiper> 44 </swiper>
......