导航-移动端分类

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

@@ -3,7 +3,7 @@
 * 移动端
 */
 .baseHeadCenter,#container,.footMain{width: 100%;overflow: hidden;}
-.pcOnly,.jqSelect .pc,.baseHeadTop,.baseHeadCenter .headCart,.baseHeadCenter .hotword,.baseTopNav{display:none!important;}
+.pcOnly,.jqSelect .pc,.baseHeadTop,.baseHeadCenter .headCart,.baseHeadCenter .hotword,.baseTopNav>.wrap{display:none!important;}
 .mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/icon_m.png) no-repeat;background-size:75vw auto;transition:all .5s}
 .mf{display:-ms-flexbox;display:-webkit-flex;display:flex;}
 .mfbt{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
@@ -15,15 +15,16 @@
 .jqSelect select{box-sizing:border-box;width:24vw;padding: 0 6vw 0 3vw;border-radius:2px;cursor:pointer;position:relative;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;}
 .jqSelect select::-ms-expand{display:none;}
 .jqSelect:before{content:'\276F';font-weight:normal;position:absolute;right:3vw;top:0;transform:rotate(90deg);font-size:3.6vw;color:#4A4F58}
+.mFixed{position:fixed;bottom:0;left:0;width:100%;height:100%;margin:0 auto;z-index:50;overflow-y:scroll;background-color:#FFF;-webkit-overflow-scrolling:touch}
 /* 头部 */
 .baseHeadCenter{box-sizing:border-box;width:100%;height:26.8vw;padding:0 2vw;position:relative;background:#FFF}
-.baseHeadCenter .logo{width:23.8vw;height:5.9vw;padding:3.75vw 0;position:absolute;top:0;left:50%;margin-left:-11.9vw}
-.baseHeadCenter .logo img{display:block;width:23.8vw;height:5.9vw}
-.baseHeadCenter .mClassBtn{float:left}
+.baseHeadCenter .logo,.classifyBox .logo{width:23.8vw;height:5.9vw;padding:3.75vw 0;position:absolute;top:0;left:50%;margin-left:-11.9vw}
+.baseHeadCenter .logo img,.classifyBox .logo img{display:block;width:23.8vw;height:5.9vw}
+.baseHeadCenter .mClassBtn,.classifyBox .mClassBtn{float:left}
 .baseHeadCenter .mUserCenter{float:right}
-.baseHeadCenter .mClassBtn,.baseHeadCenter .mUserIcon,.baseHeadCenter .mAddCart{padding:3.5vw 2.8vw;width:6.4vw;height:6.4vw}
-.baseHeadCenter .mClassBtn:before,.baseHeadCenter .mUserIcon:before,.baseHeadCenter .mAddCart:before{content:'';display:block;width:6.4vw;height:6.4vw}
-.baseHeadCenter .mClassBtn:before{background-position:0 0}
+.baseHeadCenter .mClassBtn,.classifyBox .mClassBtn,.baseHeadCenter .mUserIcon,.baseHeadCenter .mAddCart,.classifyBox .clsHead .close{padding:3.5vw 2.8vw;width:6.4vw;height:6.4vw}
+.baseHeadCenter .mClassBtn:before,.classifyBox .mClassBtn:before,.baseHeadCenter .mUserIcon:before,.baseHeadCenter .mAddCart:before{content:'';display:block;width:6.4vw;height:6.4vw}
+.baseHeadCenter .mClassBtn:before,.classifyBox .mClassBtn:before{background-position:0 0}
 .baseHeadCenter .mUserIcon:before{background-position:11% 0}
 .baseHeadCenter .mAddCart:before{background-position:22% 0}
 .baseHeadCenter .searchBox{position:absolute;top:13.4vw;left:0;width:100%;padding-top:1.8vw}
@@ -36,15 +37,22 @@
 .baseHeadCenter .search .searchBtn{position:absolute;right:1.2vw;top:0}
 .baseHeadCenter .search .searchBtn:before{content:'';display:block;width:9.6vw;height:9.6vw;background-position:33% -1%}
 /* 分类 */
-
-
-
-
-
-
-
-
-
+.classifyBox{display:none;background:#F7F7F7;overflow:hidden}
+.classifyBox .clsHead{position:relative;background:#FFF}
+.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:26vw;background:#FFF}
+.classifyBox .clsCon{right:0;width:73.6vw;overflow-y:scroll;-webkit-overflow-scrolling:touch}
+.classifyBox a{color:#93979F}
+.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 .tabItem .lft{height:10.7vw;line-height:10.7vw;padding-left:3vw;font-size:3.7vw}
+.classifyBox .tabItem .rgt{background:#FFF}
+.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}
 /* 底部 */
 .footMain{width:100%;box-sizing:border-box;background:#4A4F58;color:#FFF}
 .footLink .list{width:100%;padding:0 3vw;box-sizing:border-box}

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

@@ -102,7 +102,7 @@ body{min-width:1184px;}
 /* 分类 */
 .classifyBox{width:1184px;margin:0 auto;box-sizing:border-box;padding:8px 30px;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:0 0 2px 2px}
 .classifyBox .clsTab{height:56px;line-height:56px;white-space:nowrap;border-bottom:1px solid #FFE6DC}
-.classifyBox .clsTab a{display:inline-block;height:100%;padding:0 25px;font-size:16px;font-weight:bold;color:#2D3036;border-bottom:1px solid transparent}
+.classifyBox .clsTab a{display:inline-block;cursor:default;height:100%;padding:0 25px;font-size:16px;font-weight:bold;color:#2D3036;border-bottom:1px solid transparent}
 .classifyBox .clsTab a:hover,.classifyBox .clsTab a.on{color:#E15616;border-color:#E15616}
 .classifyBox .clsCon{padding:10px 0}
 .classifyBox .line{position:relative;padding-left:100px;line-height:32px}

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

@@ -114,7 +114,7 @@ li{list-style:none;}
 #sideNav .item .phone:before,#sideNav .item .toTop:before{display:block;margin:0 auto;width:5.8vw;height:5.8vw;}
 #sideNav .item .phone:before{background-position:31.5% 26%;}
 #sideNav .item .toTop:before{background-position:21.5% 26%;}
-#sideNav .phoneHover{display:none;position:fixed;bottom:0;left:0;width:100%;height:100%;margin:0 auto;z-index:90;overflow-y:scroll;background-color:rgba(74,79,88,.7);-webkit-overflow-scrolling:touch}
+#sideNav .phoneHover{display:none;background-color:rgba(74,79,88,.7);z-index:999;}
 #sideNav .phoneHover>div{box-sizing:border-box;width:74.6vw;height:107.3vw;padding-top:32vw;background:url(/img/index/hotline_m.jpg) no-repeat left top;background-size:100% 100%;border-radius:1.6vw;position:relative;top:50%;margin:-60vw auto 0 auto;line-height:9.6vw;font-size:4.2vw}
 #sideNav .phoneHover i{font-style:normal;color:#FFF}
 #sideNav .phoneHover .close{position:absolute;left:50%;bottom:-12vw;margin-left:-2.7vw;width:5.4vw;height:5.4vw;line-height:5.4vw;text-align:center;border:1px solid #FFF;border-radius:50%;font-size:0}

src/main/resources/static/js/base.js

@@ -23,6 +23,14 @@ var mainClassify = new Vue({
                             ,trigger: "mouseover"
                         });
                     },500);
+                }else{
+                    setTimeout(function(){
+                        $('#mainClassify').slide({
+                            mainCell:".clsCon"
+                            ,titCell:".clsTab a"
+                            ,trigger: "click"
+                        });
+                    },500);
                 }
             }
         });
@@ -66,6 +74,15 @@ $(function(){
         jqHoverShow(".classBtn", "#mainClassify");
     }else{
         jqMultipleShow("click", ".footLink .list", ".tab", ".con");
+        $("body").on('click', '.baseHeadCenter .mClassBtn',function () {
+            $('#mainClassify').show();
+            fixedBody();
+        }).on('click', '#mainClassify .close,#mainClassify .mClassBtn',function () {
+            $('#mainClassify').hide();
+            looseBody();
+        }).on('click', '#mainClassify',function (e) {
+            e.stopPropagation();
+        });
     }
 
 

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

@@ -115,28 +115,36 @@
             </div>
             <a class="service nav" href="/">维修</a>
         </div>
-        <div id="mainClassify" class="classifyBox">
-            <template v-if="isPC">
-                <div class="clsTab">
-                    <template v-for="(big,i) in classify">
-                        <a :class="{'on':i==0}" v-if="big.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-0-0'" v-text="big.name"></a>
-                    </template>
-                </div>
-                <div class="clsCon">
-                    <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID">
-                        <div class="line" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
-                            <div class="lft">
-                                <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>
-                            </div>
-                            <div class="rgt">
-                                <template v-for="tiny in small.tinytypeList">
-                                    <a v-if="tiny.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" v-text="tiny.name"></a>
-                                </template>
-                            </div>
+        <div id="mainClassify" class="classifyBox mFixed">
+            <div v-if="!isPC" class="clsHead clear">
+                <a href="javascript:void(0);" class="mClassBtn mIcon" title="分类"></a>
+                <a href="/" class="logo">
+                    <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
+                </a>
+                <a href="javascript:void(0);" class="close" title="关闭"></a>
+            </div>
+            <div class="clsTab">
+                <template v-for="(big,i) in classify">
+                    <a :class="{'on':i==0}" v-if="big.validFlag==1" href="javascript:void(0);" v-text="big.name"></a>
+                </template>
+            </div>
+            <div class="clsCon">
+                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID">
+                    <div class="line" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
+                        <div class="lft">
+                            <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>
+                        </div>
+                        <div class="rgt mfw">
+                            <template v-for="tiny in small.tinytypeList">
+                                <a v-if="tiny.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID">
+                                    <img v-if="!isPC" :src="tiny.icon" alt="tiny.name">
+                                    <span v-text="tiny.name"></span>
+                                </a>
+                            </template>
                         </div>
                     </div>
                 </div>
-            </template>
+            </div>
         </div>
     </div>
     <input type="hidden" th:value="${spiServer}" id="spiServer">

src/main/resources/templates/index.html

@@ -172,7 +172,7 @@
         </div>
         <div class="item">
             <span class="phone icon mIcon">咨询热线</span>
-            <div class="phoneHover">
+            <div class="phoneHover mFixed">
                 <div>
                     <p><a href="tel:075522907771">0755-22907771<i class="h5Only">点击咨询</i></a></p>
                     <p><a href="tel:15338851365">153-3885-1365<i class="h5Only">点击咨询</i></a></p>

src/main/resources/templates/product/list.html

@@ -13,6 +13,30 @@
 
 <!--页面主体数据-->
 <div id="container">
+
+<div id="listClassify" class="classifyBox">
+            <div class="clsTab">
+                <template v-for="(big,i) in classify">
+                    <a :class="{'on':i==0}" v-if="big.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-0-0'" v-text="big.name"></a>
+                </template>
+            </div>
+            <div class="clsCon">
+                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID">
+                    <div class="line" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
+                        <div class="lft">
+                            <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>
+                        </div>
+                        <div class="rgt">
+                            <template v-for="tiny in small.tinytypeList">
+                                <a v-if="tiny.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" v-text="tiny.name"></a>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
     <hr>
     <h1>商品列表</h1>
     <hr>