|
|
@@ -5,11 +5,16 @@
|
|
|
<image src="/static/logo2.png"></image>
|
|
|
</view>
|
|
|
</u-navbar>
|
|
|
- <swiper indicator-dots="true" indicator-color="#fff" indicator-active-color="#007AFF" :style="{'height':swiperHeight+'rpx'}" @change="e => current = e.current" :interval="interval" :duration="duration" :autoplay="autoplay" :circular="true">
|
|
|
- <swiper-item v-for="(swiper,index) in list" :key="index">
|
|
|
- <image style="width:100%" @load="imageLoad" :src="$method.splitImgHost(swiper.adverUrl, true)" mode="widthFix"></image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
+ <view class="swiper">
|
|
|
+ <swiper :indicator-dots="false" indicator-color="#fff" indicator-active-color="#007AFF" :style="{'height':swiperHeight+'rpx'}" @change="swiperChange" :interval="interval" :duration="duration" :autoplay="autoplay" :circular="true">
|
|
|
+ <swiper-item v-for="(swiper,index) in list" :key="index">
|
|
|
+ <image @load="imageLoad" :src="$method.splitImgHost(swiper.adverUrl, true)" mode="widthFix"></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="dots">
|
|
|
+ <view class="dot" :class="{'active':index == current}" v-for="(swiper,index) in list"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="content">
|
|
|
<view class="notice" v-if="infoNums">
|
|
|
<image src="/static/icon/msg_icon1.png" class="icon"></image>
|
|
|
@@ -408,6 +413,9 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ swiperChange(e) {
|
|
|
+ this.current = e.detail.current;
|
|
|
+ },
|
|
|
tab(e) {
|
|
|
this.tabCurrent = e;
|
|
|
},
|
|
|
@@ -443,7 +451,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
+
|
|
|
.index {
|
|
|
.slot-wrap {
|
|
|
width:100%;
|
|
|
@@ -460,17 +468,37 @@ export default {
|
|
|
|
|
|
.swiper {
|
|
|
width:100%;
|
|
|
- image {
|
|
|
- width:100%;
|
|
|
- }
|
|
|
+ position: relative;
|
|
|
|
|
|
- .indicator__dot {
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
+ .dots {
|
|
|
+ position:absolute;
|
|
|
+ left:0;
|
|
|
+ bottom:8rpx;
|
|
|
+ width:100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
|
|
|
- &.indicator__dot--active {
|
|
|
- background: rgba(0, 122, 255, 1);
|
|
|
+ .dot {
|
|
|
+ width: 8rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin:0 4rpx;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: #007AFF;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ image {
|
|
|
+ width:100%;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.content {
|
chenxiong