Commit 204aaacbfde3b89d327f84c37ef4faeb533b10b2
1 parent
3c59bbbb
样式优化
Showing
2 changed files
with
29 additions
and
10 deletions
src/components/tabBox/tabBox.less
| ... | ... | @@ -29,4 +29,22 @@ |
| 29 | 29 | .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{ |
| 30 | 30 | border-width: 0; |
| 31 | 31 | } |
| 32 | + .tabBox_main{ | |
| 33 | + .skeleton { | |
| 34 | + &.brief { | |
| 35 | + background-color: #ffffff; | |
| 36 | + } | |
| 37 | + &.boutique { | |
| 38 | + background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%); | |
| 39 | + } | |
| 40 | + &.commodity { | |
| 41 | + background-color: #F9F9F9; | |
| 42 | + .column-commodity-excessive { | |
| 43 | + background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%); | |
| 44 | + width: 750px; | |
| 45 | + height: 30px; | |
| 46 | + } | |
| 47 | + } | |
| 48 | + } | |
| 49 | + } | |
| 32 | 50 | } | ... | ... |
src/components/tabBox/tabBox.vue
| ... | ... | @@ -6,21 +6,26 @@ |
| 6 | 6 | <div class="tabBox_main"> |
| 7 | 7 | <div class="tabbar" v-for="(item, index) in tabbaromponents.ads" :key="index"> |
| 8 | 8 | <!-- 关爱屋简介 --> |
| 9 | + <div class="skeleton brief" ref="brief"> | |
| 9 | 10 | <html-box |
| 10 | 11 | v-if="item.style === '14'" |
| 11 | 12 | :htmls="item.content"> |
| 12 | 13 | </html-box> |
| 13 | - <!-- 精品推荐 --> | |
| 14 | + </div> | |
| 14 | 15 | <!-- 精品推荐 --> |
| 15 | - <!--<div class="boutique-list" v-infinite-scroll="loadBoutique" infinite-scroll-disabled="paging.boutique.loading" :infinite-scroll-distance="paging.distance">--> | |
| 16 | + <div class="skeleton boutique" ref="boutique"> | |
| 16 | 17 | <img-list-box |
| 17 | - v-if="item.style === '1'" | |
| 18 | + v-if="item.style === '12'" | |
| 18 | 19 | @detail="toDetail" |
| 19 | 20 | :imgLists="item.img"> |
| 20 | 21 | </img-list-box> |
| 21 | - <!--</div>--> | |
| 22 | - <!-- 商品推荐 --> | |
| 22 | + <!--优惠专区--> | |
| 23 | + <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail" | |
| 24 | + :discountZoneInfo="item"> | |
| 25 | + </discountZone> | |
| 26 | + </div> | |
| 23 | 27 | <!-- 商品推荐 --> |
| 28 | + <div class="skeleton commodity" ref="commodity"> | |
| 24 | 29 | <div class="column-commodity-list" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance"> |
| 25 | 30 | <column-commodity-list-box |
| 26 | 31 | v-if="item.style === '15'" |
| ... | ... | @@ -28,10 +33,7 @@ |
| 28 | 33 | :columnLists="commoditys"> |
| 29 | 34 | </column-commodity-list-box> |
| 30 | 35 | </div> |
| 31 | - <!--优惠专区--> | |
| 32 | - <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail" | |
| 33 | - :discountZoneInfo="item"> | |
| 34 | - </discountZone> | |
| 36 | + </div> | |
| 35 | 37 | </div> |
| 36 | 38 | </div> |
| 37 | 39 | </van-tab> |
| ... | ... | @@ -194,7 +196,6 @@ |
| 194 | 196 | * 上拉加载“爱心屋项目全部商品” |
| 195 | 197 | */ |
| 196 | 198 | loadCommodity() { |
| 197 | - | |
| 198 | 199 | // 判断是“精品推荐”页才加载 |
| 199 | 200 | if (this.tabbaromponents.title === '全部商品' && this.tabbaromponents.shop_id) { |
| 200 | 201 | ... | ... |