add

src/main/resources/static/css/base/base.h5.css

@@ -79,21 +79,33 @@
 .classifyBox .clsHead .close{float:right;text-align:center}
 .classifyBox .clsHead .close:before{content:'\2715';font-size:4.5vw;font-weight:bold}
 .classifyBox .mClassBtn:before{transform:rotate(90deg)}
-.classifyBox .clsTab,.classifyBox .clsCon{position:absolute;top:13.7vw;height:calc(100% - 13.7vw)}
-.classifyBox .clsTab{left: 0;width: 100%;height:12vw;background:#FFF}
+.classifyBox .clsTab,.classifyBox .clsCon{height:calc(100% - 13.7vw)}
+.classifyBox .clsTab{width: 100%;height:12vw;background:#FFF;border-bottom: .27vw solid #eeeeee; padding: 1vw 0;}
 .classifyBox .clsTab .clsTab-main{width: 100%;height: 12vw;display: flex;}
 .classifyBox .clsTab .clsTab-main a{flex:1;height: 12vw;text-align: center;font-size: 3.8vw;}
-.classifyBox .clsCon{right:0;width:73.6vw;overflow-y:scroll;-webkit-overflow-scrolling:touch}
+.classifyBox .clsCon{width:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch}
+.classifyBox .clsCon .tabItem{overflow: hidden}
+.classifyBox .clsCon .tabItem .tabItem_lift{width: 26vw;float: left;text-align: center;color: #93979f;}
+.classifyBox .clsCon .tabItem .tabItem_right{float: right;width: 74vw;}
 .classifyBox a{color:#93979F}
+.classifyBox .clsCon .tabItem .tabItem_lift a.on{background: #fff;color: #e15616;}
 .classifyBox .clsTab a{display:block;height:13vw;line-height:13vw;text-align:center;font-size:3.4vw}
 .classifyBox .clsTab a.on,.classifyBox .rgt a.on{color:#E15616}
 .classifyBox .clsTab .clsTab-main a.on{color: #4a4f58;font-weight: bold}
 .classifyBox .clsTab .clsTab-main a .line{width: 10vw;margin: 0 auto;height: .48vw;background-color: #e15616;}
-.classifyBox .tabItem .lft{height:10.7vw;line-height:10.7vw;padding-left:3vw;font-size:3.7vw}
-.classifyBox .tabItem .rgt{background:#FFF}
+.classifyBox .tabItem .lft{height:10.7vw;line-height:10.7vw;padding-left:4vw;font-size:3.6vw;background: #fff;border-bottom: .27vw solid #f5f5f5;font-weight: bold}
+.classifyBox .tabItem .lft p{color: #4a4f58;}
+.classifyBox .clsCon .tabItem .tabItem_lift a{display: block;height: 13vw;line-height: 13vw;text-align: center;font-size: 3.4vw;}
+.classifyBox .tabItem .rgt{background:#FFF;padding-left: 4vw}
 .classifyBox .tabItem .rgt a{width:20.8vw;height:29.8vw;margin:2.6vw 1.3vw}
 .classifyBox .tabItem .rgt img{display:block;width:20.8vw;height:20.8vw}
 .classifyBox .tabItem .rgt span{display:block;line-height:9vw;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:3.4vw;color:#4A4F58}
+.classifyBox .tabItem .rgt p{
+    text-align: center;
+    color: #4a4f58;
+    margin-top: 2.4vw;
+}
+.classifyBox .clsCon .tabItem .tabItem_right .line{margin-bottom: 2.4vw}
 /* 底部 */
 .footTop{width:100%;padding:2vw 0;background:#FFF;}
 .footTop .wrap span{font-size:2.6vw;padding:0 2vw;text-align:center}

src/main/resources/templates/components/header.html

@@ -131,54 +131,61 @@
                 <div class="clsTab">
                     <div class="clsTab-main">
                         <template v-for="(tab,i) in TabList">
-                            <a :class="{'on':i==0}" href="javascript:void(0);" v-text="tab.name"></a>
+                            <a :class="{'on':i==0}" href="javascript:void(0);">
+                                {{tab.name}}
+                                <p :class="{'line':i==0}"></p>
+                            </a>
                         </template>
                     </div>
                 </div>
                 <div class="clsCon">
-                    <div class="tabItem" v-for="big in NavsList" style="display: none;">
+                    <div class="tabItem" v-for="(big,index) in NavsList" style="display: none;">
                         <div class="tabItem_lift">
                             <template v-for="(nav,index) in big.list">
                                 <a :class="{'on':index==0}" href="javascript:void(0);">
-                                    <img class="tabItem_lift_icon" :src="nav.icon ? nav.icon : ''" alt="">
-                                    <p class="tabItem_lift_p" v-text="nav.name"></p>
+<!--                                    <img class="tabItem_lift_icon" :src="nav.icon ? nav.icon : ''" alt="">-->
+                                    {{ nav.name }}
                                 </a>
                             </template>
                         </div>
                         <div class="tabItem_right">
                             <div class="tabItem_right_content" v-for="(nav,i) in big.list" :class="{'on':i==0}">
-                                <div class="line" v-if="nav.smalltypeList.length>0"  v-for="small in nav.smalltypeList">
+                                <div class="line"  v-if="nav.smalltypeList.length>0" v-for="small in nav.smalltypeList">
                                     <div class="lft">
                                         <a :href="'/product/list.html?category='+nav.bigTypeID+'-'+small.smallTypeID+'-0'" target="_blank">
                                             <p>{{ small.name }}</p>
-                                            <span> > </span>
                                         </a>
                                     </div>
-                                    <div class="rgt mfw">
-                                        <template v-if="small.tinytypeList && small.tinytypeList.length>0"   v-for="tiny in small.tinytypeList">
+                                    <div class="rgt mfw" >
+                                        <template v-if="small.tinytypeList!='' && small.tinytypeList!=null"  v-for="tiny in small.tinytypeList">
                                             <a :href="'/product/list.html?category='+nav.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" target="_blank">
-                                                <img v-if="!isPC" :src="tiny.icon" alt="tiny.name">
+                                                <img v-if="!isPC" :src="tiny.crmIcon" alt="tiny.name">
                                                 <span v-text="tiny.name"></span>
                                             </a>
                                         </template>
                                         <template v-if="!small.tinytypeList">
                                             <a :href="'/product/list.html?category='+nav.bigTypeID+'-'+small.smallTypeID+'-0'" target="_blank">
-                                                <img v-if="!isPC" :src="tiny.icon" alt="全部商品">
+                                                <img v-if="!isPC" :src="small.crmIcon" alt="全部商品">
                                                 <p>全部商品</p>
                                             </a>
                                         </template>
                                     </div>
                                 </div>
-                                <template v-if="!nav.smalltypeList">
-                                    <div class="line">
-                                        <div class="lft none">
-                                            <a :href="'/product/list.html?category='+nav.bigTypeID+'-0'" target="_blank">
-                                                <img v-if="!isPC" :src="nav.icon" alt="全部商品">
-                                                <span>全部商品</span>
-                                            </a>
-                                        </div>
+                            <template v-if="!nav.smalltypeList">
+                                <div class="line">
+                                    <div class="lft none">
+                                        <a :href="'/product/list.html?category='+nav.bigTypeID+'-0'" target="_blank">
+                                            <p>{{ nav.name }}</p>
+                                        </a>
+                                    </div>
+                                    <div class="rgt mfw" >
+                                        <a :href="'/product/list.html?category='+nav.bigTypeID+'-0'" target="_blank">
+                                            <img v-if="!isPC" :src="nav.crmIcon" alt="全部商品">
+                                            <p>全部商品</p>
+                                        </a>
                                     </div>
-                                </template>
+                                </div>
+                            </template>
                             </div>
                         </div>
                     </div>