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 {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// autoplay: {
// delay: 5000,
// stopOnLastSlide: false,
// disableOnInteraction: false
// },
speed: 1000,
},
......
......@@ -38,7 +38,30 @@
.banner-img {
width: 100%;
height: 100%;
cursor: pointer;
}
.btn-wrap {
position: absolute;
z-index: 1;
// 两个banner图按钮位置不一样，和原先约定的按钮位置固定不一致
// 如要调整位置，请调整top,right。如需要右对齐请使用right
// 已用padding适应文本过长的情况(英文等);
// top: 272px;
// left: 1228px;
top: 310px;
right: 432px;
display: flex;
.banner-btn {
@extend .pointer;
@extend .bb;
@include btc2(126px, 48px, $fontSizeTitle);
width: auto;
padding: 0 24px;
min-width: 126px;
margin-left: 12px;
background-image: none;
}
}
}
......@@ -49,6 +72,23 @@
.banner-img {
width: 100%;
}
.btn-wrap{
position: absolute;
z-index: 1;
top: 87%;
left: 0;
right: 0;
margin: 0 auto;
display: flex;
justify-content: center;
.banner-btn{
@extend .pointer;
padding: 0 12px;
color: $cOrange;
}
}
}
// 推荐产品
......
......@@ -8,9 +8,17 @@
<swiper :options="swiperOption">
<swiper-slide>
<img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-p1-'+locale+'.png')">
<div class="btn-wrap">
<div class="banner-btn">产品详情</div>
<div class="banner-btn">在线报价</div>
</div>
</swiper-slide>
<swiper-slide>
<img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-p2-'+locale+'.png')">
<div class="btn-wrap">
<div class="banner-btn">产品详情</div>
<div class="banner-btn">在线报价</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
......@@ -20,9 +28,17 @@
<swiper class="swiper" :options="swiperOption">
<swiper-slide>
<img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m1-'+locale+'.jpg')">
<div class="btn-wrap">
<div class="banner-btn">产品详情></div>
<div class="banner-btn">在线报价></div>
</div>
</swiper-slide>
<swiper-slide>
<img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m2-'+locale+'.jpg')">
<div class="btn-wrap">
<div class="banner-btn">产品详情></div>
<div class="banner-btn">在线报价></div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
......