Commit 0c5aa9962db80f28737e0d9da285ead253f25fcf
1 parent
2a17d843
tabbar组件样式优化
Showing
3 changed files
with
9 additions
and
7 deletions
src/components/imgListBox/imgListBox.less
src/components/tabBox/tabBox.less
| @@ -8,7 +8,7 @@ | @@ -8,7 +8,7 @@ | ||
| 8 | .van-tabs--line .van-tabs__wrap{ | 8 | .van-tabs--line .van-tabs__wrap{ |
| 9 | height: 60px; | 9 | height: 60px; |
| 10 | line-height: 30px; | 10 | line-height: 30px; |
| 11 | - padding: 30px 0; | 11 | + padding: 30px 0 0 0; |
| 12 | } | 12 | } |
| 13 | // tab标题颜色和字号 | 13 | // tab标题颜色和字号 |
| 14 | .van-tab{ | 14 | .van-tab{ |
| @@ -49,11 +49,11 @@ | @@ -49,11 +49,11 @@ | ||
| 49 | width: 100%; | 49 | width: 100%; |
| 50 | height: 100%; | 50 | height: 100%; |
| 51 | background-color: #F9F9F9; | 51 | background-color: #F9F9F9; |
| 52 | - //.column-commodity-excessive { | ||
| 53 | - // background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%); | ||
| 54 | - // width: 750px; | ||
| 55 | - // height: 30px; | ||
| 56 | - //} | 52 | + .column-commodity-excessive { |
| 53 | + background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%); | ||
| 54 | + width: 750px; | ||
| 55 | + height: 30px; | ||
| 56 | + } | ||
| 57 | } | 57 | } |
| 58 | } | 58 | } |
| 59 | } | 59 | } |
src/components/tabBox/tabBox.vue
| @@ -43,6 +43,8 @@ | @@ -43,6 +43,8 @@ | ||
| 43 | <!-- 商品推荐 --> | 43 | <!-- 商品推荐 --> |
| 44 | <div :style="{backgroundColor:tabbar[2].color || tabbarBackgroud}" class="skeleton commodity" ref="commodity"> | 44 | <div :style="{backgroundColor:tabbar[2].color || tabbarBackgroud}" class="skeleton commodity" ref="commodity"> |
| 45 | <!--infinite-scroll-immediate-check="true"可避免上拉多次调用接口问题--> | 45 | <!--infinite-scroll-immediate-check="true"可避免上拉多次调用接口问题--> |
| 46 | + <!-- 渐变过度 --> | ||
| 47 | + <div class="column-commodity-excessive"></div> | ||
| 46 | <div class="column-commodity-list" infinite-scroll-immediate-check="true" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance"> | 48 | <div class="column-commodity-list" infinite-scroll-immediate-check="true" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance"> |
| 47 | <column-commodity-list-box | 49 | <column-commodity-list-box |
| 48 | v-if="item.style === '15'" | 50 | v-if="item.style === '15'" |