1
|
<template>
|
1
|
<template>
|
2
|
<view class="content">
|
2
|
<view class="content">
|
3
|
<image class="bg" src="../../static/bg_img@2x(2).png"></image>
|
3
|
<image class="bg" src="../../static/bg_img@2x(2).png"></image>
|
4
|
- <image class="card" src="../../static/card_img@2x.png"></image>
|
4
|
+ <view class="card">
|
|
|
5
|
+ <image src="../../static/card_img@2x.png"></image>
|
|
|
6
|
+ </view>
|
|
|
7
|
+
|
5
|
<view class="cardText">
|
8
|
<view class="cardText">
|
6
|
|
9
|
|
7
|
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" @change="swiperChange" :circle="true" circular="true">
|
10
|
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" @change="swiperChange" :circle="true" circular="true">
|
|
@@ -191,20 +194,23 @@ export default { |
|
@@ -191,20 +194,23 @@ export default { |
191
|
}
|
194
|
}
|
192
|
}
|
195
|
}
|
193
|
.dots{
|
196
|
.dots{
|
194
|
- position: absolute;
|
197
|
+ // position: absolute;
|
195
|
bottom: 36rpx;
|
198
|
bottom: 36rpx;
|
196
|
left: 50%;
|
199
|
left: 50%;
|
197
|
transform: translate(-50%);
|
200
|
transform: translate(-50%);
|
198
|
width: 50rpx;
|
201
|
width: 50rpx;
|
199
|
height: 10rpx;
|
202
|
height: 10rpx;
|
200
|
z-index: 999;
|
203
|
z-index: 999;
|
201
|
- display: flex;
|
|
|
202
|
- justify-content: space-between;
|
204
|
+ overflow: hidden;
|
|
|
205
|
+ margin:0 auto;
|
|
|
206
|
+ // display: flex;
|
|
|
207
|
+ // justify-content: space-between;
|
203
|
.dot{
|
208
|
.dot{
|
204
|
width: 10rpx;
|
209
|
width: 10rpx;
|
205
|
height: 10rpx;
|
210
|
height: 10rpx;
|
206
|
background-color: #fff;
|
211
|
background-color: #fff;
|
207
|
border-radius:12rpx;
|
212
|
border-radius:12rpx;
|
|
|
213
|
+ float: left;
|
208
|
}
|
214
|
}
|
209
|
.active{
|
215
|
.active{
|
210
|
width: 30rpx;
|
216
|
width: 30rpx;
|