购好物，mall页面样式优化~

王强
1 parent e43e4cfb
Showing 4 changed files with 55 additions and 17 deletions
src/components/tabBox/tabBox.less
src/components/tabBox/tabBox.vue
src/pages/mall/mall.less
src/pages/mall/mall.vue
@@ -42,9 +42,25 @@
         .skeleton {
             &.brief {
                 background-color: #ffffff;
+                .html-box {
+                    .box {
+                        .html {
+                            p {
+                                margin-bottom: 0;
+                            }
+                        }
+                    }
+                }
             }
             &.boutique {
-                background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%);
+                // background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%);
+                .img-list-box {
+                    .box {
+                        .img-box {
+                            padding: 0;
+                        }
+                    }
+                }
             }
             &.commodity {
                 width: 100%;
@@ -4,17 +4,17 @@
       <van-tabs @change="onChange" swipeable v-model="active" ellipsis swipe-threshold="3">
           <van-tab v-for="(item,index) in tabbar" :key="index" :title="item.title">
           </van-tab>
-          <div class="tabBox_main"  ref="tabsSwiperBox">
+          <div class="tabBox_main" ref="tabsSwiperBox">
               <div class="tabbar" v-for="(item, index) in tabbaromponents&&tabbaromponents.ads" :key="index">
                   <!-- 关爱屋简介 -->
-                  <div :style="{backgroundColor:(tabbar&&tabbar[0].color) || tabbarBackgroud}" class="skeleton brief" ref="brief">
+                  <div :style="{background:(tabbar&&tabbar[0].color) || tabbarBackgroud}" class="skeleton brief" ref="brief">
                       <html-box
                           v-if="item.style === '14'"
                           :htmls="item.content">
                       </html-box>
                   </div>
                   <!-- 精品推荐 -->
-                  <div :style="{backgroundColor:(tabbar&&tabbar[0].color) || tabbarBackgroud}" class="skeleton boutique" ref="boutique">
+                  <div :style="{background:(tabbar&&tabbar[0].color) || tabbarBackgroud}" class="skeleton boutique" ref="boutique">
                       <img-list-box
                           v-if="item.style === '12'"
                           @detail="toDetail"
@@ -40,9 +40,9 @@
                       </style-7>
                   </div>
                   <!-- 商品推荐 -->
-                  <div :style="{backgroundColor:(tabbar&&tabbar[0].color) || tabbarBackgroud}" class="skeleton commodity" ref="commodity">
+                  <div :style="{background:(tabbar&&tabbar[0].color) || tabbarBackgroud}" class="skeleton commodity" ref="commodity" v-if="commoditys && commoditys.list && commoditys.list.length">
                       <!--infinite-scroll-immediate-check="true"可避免上拉多次调用接口问题-->
-                       <!-- 渐变过度 -->
+                        <!-- 渐变过度 -->
                       <div class="column-commodity-excessive"></div>
                       <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">
                           <column-commodity-list-box
@@ -17,13 +17,24 @@
         z-index:1000
     }
     .pl {
-      background-color: transparent;
-      width: 100%;
-      &.is-open-app {
-          height: 144px;
-      }
-      &.is-cnlive {
-          height: 123px;
-      }
-  }
+        background-color: transparent;
+        width: 100%;
+        &.is-open-app {
+            height: 144px;
+        }
+        &.is-cnlive {
+            height: 123px;
+        }
+    }
+    .navs-box {
+        /deep/.icon-swiper-box {
+            .swipe {
+                &.van-swipe {
+                    .icons-com {
+                        width: 20%;
+                    }
+                }
+            }
+        }
+    }
 }
 \ No newline at end of file
@@ -26,10 +26,19 @@
         </swiper>
  
         <!--导航-->
-        <horiz-list class="components-box" v-if="navs && navs.length" @jump="jump"
+        <!-- <horiz-list class="components-box" v-if="navs && navs.length" @jump="jump"
             :lists="navs"
             com="4">
-        </horiz-list>
+        </horiz-list> -->
+
+        <!-- 其它频道 -->
+        <div class="navs-box" v-if="navs && navs.length">
+
+            <!-- 轮播展示其它频道 -->
+            <icon-swiper-box @jump="toPage"
+                :icons="navs">
+            </icon-swiper-box>
+        </div>
  
         <!-- 遍历ads，输出列表数据 -->
         <div class="ads-box">
@@ -77,6 +86,7 @@
     import videoArea from "@/components/videoArea/videoArea";
     import style7 from "@/components/style_7/style_7";
     import horizList from "@/components/horizList/horizList";
+    import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
     import tabBox from "@/components/tabBox/tabBox";
     import backBox from "@/components/backBox/backBox";
  
@@ -102,6 +112,7 @@
             videoArea,
             style7,
             horizList,
+            iconSwiperBox,
             tabBox,
             backBox,
             callAppBox