Commit 1ed9e60d4ae25374e30fd4fc099980f9c74d6782
1 parent
89e9ca7d
购好物首页UI细节优化~
Showing
4 changed files
with
9 additions
and
4 deletions
src/components/swiper/swiper.less
| @@ -22,11 +22,12 @@ | @@ -22,11 +22,12 @@ | ||
| 22 | overflow: hidden; | 22 | overflow: hidden; |
| 23 | .img-box { | 23 | .img-box { |
| 24 | width: 100%; | 24 | width: 100%; |
| 25 | - height: auto; | 25 | + height: 100%; |
| 26 | + overflow: hidden; | ||
| 26 | .img { | 27 | .img { |
| 27 | display: block; | 28 | display: block; |
| 28 | width: 100%; | 29 | width: 100%; |
| 29 | - height: auto; | 30 | + height: 100%; |
| 30 | border-radius: 16px; | 31 | border-radius: 16px; |
| 31 | object-fit: cover; | 32 | object-fit: cover; |
| 32 | overflow: hidden; | 33 | overflow: hidden; |
src/components/swiper/swiper.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="swiper-box" :class="{'points-mall-swiper':isPointsMall}" v-if="swipers && swipers.length"> | 2 | <div class="swiper-box" :class="{'points-mall-swiper':isPointsMall}" v-if="swipers && swipers.length"> |
| 3 | - <swipe class="swipe" :autoplay="5000" :touchable="swipers.length === 1 ? false : true" :show-indicators="options && options.showIndicators !== undefined ? options.showIndicators : showIndicators" @change="onChange"> | 3 | + <swipe class="swipe" :autoplay="0" :touchable="swipers.length === 1 ? false : true" :show-indicators="options && options.showIndicators !== undefined ? options.showIndicators : showIndicators" @change="onChange"> |
| 4 | <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index"> | 4 | <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index"> |
| 5 | <div class="item" @click="$parent.$parent.gotoDetail(item)"> | 5 | <div class="item" @click="$parent.$parent.gotoDetail(item)"> |
| 6 | <div class="img-box"> | 6 | <div class="img-box"> |
src/pages/optimization2/optimization2.less
| @@ -41,6 +41,10 @@ | @@ -41,6 +41,10 @@ | ||
| 41 | border-radius: 24px; | 41 | border-radius: 24px; |
| 42 | overflow: hidden; | 42 | overflow: hidden; |
| 43 | &.banner-box { | 43 | &.banner-box { |
| 44 | + margin-bottom: 0; | ||
| 45 | + &.bottom { | ||
| 46 | + margin-bottom: 40px; | ||
| 47 | + } | ||
| 44 | .swiper-box { | 48 | .swiper-box { |
| 45 | width: 710px; | 49 | width: 710px; |
| 46 | height: 280px; | 50 | height: 280px; |
src/pages/optimization2/optimization2.vue
| @@ -23,7 +23,7 @@ | @@ -23,7 +23,7 @@ | ||
| 23 | <div class="main-box"> | 23 | <div class="main-box"> |
| 24 | 24 | ||
| 25 | <!-- 主Banner --> | 25 | <!-- 主Banner --> |
| 26 | - <div class="section banner-box" v-if="swipers && swipers.length"> | 26 | + <div class="section banner-box" :class="{'bottom': !showNavs}" v-if="swipers && swipers.length"> |
| 27 | <swiper-box | 27 | <swiper-box |
| 28 | :swipers="swipers" | 28 | :swipers="swipers" |
| 29 | :options="{ | 29 | :options="{ |