首页-侧边栏导航

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

@@ -43,6 +43,7 @@ li{list-style:none;}
 #recommendBox .swiper-wrapper .swiper-slide{width:50%;height:81.8vw;overflow:hidden;text-align:center;background:none}
 #recommendBox .swiper-slide .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:45.4vw;height:79.2vw;margin:0 auto;background:#FFF;box-shadow:0 1px 3px #ccc;border-radius:2px;font-size:3.4vw}
 #recommendBox .swiper-slide .item img{display:block;width:100%;height:45.4vw}
+#recommendBox .swiper-slide .item a{height:auto;}
 #recommendBox .swiper-wrapper img{width:auto;height:48vw;display:block}
 #recommendBox .swiper-slide .image .icon{position:absolute;right:2.4vw;top:2.4vw}
 #recommendBox .swiper-slide .image .icon.hot:before,#recommendBox .swiper-slide .image .icon.new:before{display:block;width:7.6vw;height:9vw}
@@ -64,7 +65,7 @@ li{list-style:none;}
 .floorTit{width:93.4vw;margin:0 auto;padding:1.6vw 0 2.6vw 0;position:relative}
 .floorTit h2,.floorTit h3{font-weight:bold;color:#2D3036;font-size:3.7vw;line-height:5.2vw}
 .floorTit h5{font-weight:normal;color:#999FAB;font-size:3.1vw;line-height:4.6vw;}
-.floorTit a.more{position:absolute;right:0;top:2.6vw;height:4.6vw;line-height:4.6vw;text-decoration: underline;}
+.floorTit a.more{position:absolute;right:0;top:2.6vw;height:4.6vw;line-height:4.6vw;text-decoration: underline;font-size:3vw;}
 .floorTit a.more:after{margin-left:4px;content:'\276F'}
 .floorCon{width:94vw;margin:0 auto;}
 .floorCon a{display:block;width:100%;height:100%}
@@ -97,14 +98,13 @@ li{list-style:none;}
 .supplierList ul li img{width:100%;height:21.4vw;}
 .supplierList li p{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;line-height:5.2vw;text-align:center;background:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:2.6vw;color:#93979F}
 /* 首页底部 */
-.footTop{width:100%;padding:1.5vw 0;background:#FFF}
-/*.footTop .wrap{white-space:nowrap;display:table}
-.footTop .wrap span{display:table-cell;height:70px;line-height:70px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center}
-.footTop .wrap span:before{width:70px;height:70px;vertical-align:middle;}
-.footTop .wrap span:nth-of-type(1):before{background-position:0 -60px}
-.footTop .wrap span:nth-of-type(2):before{background-position:-80px -60px}
-.footTop .wrap span:nth-of-type(3):before{background-position:-160px -60px}
-.footTop .wrap span:nth-of-type(4):before{background-position:-240px -60px}*/
+.footTop{width:100%;padding:2vw 0;background:#FFF;}
+.footTop .wrap span{font-size:2.6vw;padding:0 2vw;text-align:center}
+.footTop .wrap span:before{width:9.2vw;height:9.2vw;display:block;margin:0 auto}
+.footTop .wrap span:nth-of-type(1):before{background-position:2% 12%}
+.footTop .wrap span:nth-of-type(2):before{background-position:21% 12%}
+.footTop .wrap span:nth-of-type(3):before{background-position:40.5% 12%}
+.footTop .wrap span:nth-of-type(4):before{background-position:60% 12%}
 /* 首页右侧导航 */
 #advertising,#sideNav .item:first-child{display:none;}
 #sideNav{display:none;position:fixed;right:0;;z-index:9999;bottom:4vw;}
@@ -114,4 +114,13 @@ 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%;}
-.phoneHover{display: none}
+#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>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}
+#sideNav .phoneHover .close:before{content:'\2715';font-size:4vw}
+#sideNav .phoneHover span{color:#93979F;display:block;margin-top:1.4vw}
+#sideNav .phoneHover a{color:#E15616}
+#sideNav .phoneHover a>i{display:inline-block;height:7.2vw;line-height:7.2vw;padding:0 2vw;background:#F55C5C;border-radius:3.6vw;margin-left:4vw;font-size:3.4vw}
+
+

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

@@ -88,7 +88,7 @@ li{list-style:none;}
 .supplierList ul li{width:184px;height:224px;float:left;background:#fff;position:relative;margin:0 16px 16px 0;overflow:hidden}
 .supplierList ul li:first-child{width:784px}
 .supplierList ul li a{display:block;width:100%;height:100%}
-.supplierList ul li img{width:100%;height:auto}
+.supplierList ul li img{width:100%;height:100%}
 .supplierList li p{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;height:40px;line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:#93979F;font-size:16px}
 .supplierList li a:hover p{color:#E15616}
 /* 首页底部 */
@@ -108,21 +108,22 @@ li{list-style:none;}
 #advertising .close{position:absolute;right:0;top:0;width:20px;height:20px;line-height:20px;text-align:center;font-size:0;background:rgba(255,255,255,.6)}
 #advertising .close:before{content:'\2715';font-size:16px}
 /* 首页右侧导航 */
-#sideNav{display:none;position:fixed;right:50%;margin-right:-700px;width:88px;z-index:9999;bottom:46px}
+#sideNav{display:none;position:fixed;right:50%;margin-right:-700px;width:88px;z-index:9999;bottom:120px;}
 #sideNav .item{width:100%;background-color:#fff;box-sizing:border-box;text-align:center;box-shadow:0 2px 4px rgb(254,246,243);border-radius:2px;margin-bottom:10px;font-size:12px;position:relative}
-#sideNav .item a,#sideNav .item span{display:block;width:100%;box-sizing:border-box}
-#sideNav .item a{padding:8px 6px;line-height:14px;position:relative}
-#sideNav .item a:before{content:'';position:absolute;width:70px;left:9px;top:0;border-top:1px solid #FEF6F3}
-#sideNav .item a:first-child:before{display:none}
-#sideNav .item a.on{background:#FEF6F3;color:#E15616}
+#sideNav .item>a,#sideNav .item span{display:block;width:100%;box-sizing:border-box}
+#sideNav .item>a{padding:8px 6px;line-height:14px;position:relative}
+#sideNav .item>a:before{content:'';position:absolute;width:70px;left:9px;top:0;border-top:1px solid #FEF6F3}
+#sideNav .item>a:first-child:before{display:none}
+#sideNav .item>a.on{background:#FEF6F3;color:#E15616}
 #sideNav .item>span{position:relative;cursor:pointer;}
 #sideNav .item>span:hover{color:#E15616;}
 #sideNav .item .phone{padding:4px 16px 4px 48px;line-height:16px;}
 #sideNav .item .phone:before{width:32px;height:32px;background-position:0 -254px;position:absolute;top:4px;left:16px}
 #sideNav .item .toTop{padding:12px 16px 12px 48px;line-height:16px;}
 #sideNav .item .toTop:before{width:32px;height:32px;background-position:-42px -254px;position:absolute;top:4px;left:16px}
-#sideNav .item .phoneHover{display:none;position:absolute;left:-120px;top:-46px;z-index:999;line-height:20px;background:#FFF;border-radius:5px;white-space:nowrap;padding:10px}
-#sideNav .item .phoneHover .on{color:#E15616}
-#sideNav .item .phoneHover:after{content:'';position:absolute;right:-11px;top:50%;margin-top:-10px;width:0;height:0;border-width:15px 0 15px 15px;border-color:transparent;border-style:solid;border-left-color:#FFF}
+#sideNav .item .phoneHover{display:none;position:absolute;left:-282px;top:-168px;z-index:999;width:281px;height:383px;background:url(/img/index/hotline.png) no-repeat left top;box-sizing:border-box;padding:120px 20px 0 0;line-height:32px;font-size:16px;white-space:nowrap}
+#sideNav .item .phoneHover a{color:#E15616}
+#sideNav .item .phoneHover span{color:#93979F;margin-top:10px}
+#sideNav .item .phoneHover a:hover{text-decoration:underline}
 #sideNav .item:hover .phoneHover{display:block}
 

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

@@ -2,6 +2,7 @@ var spiServer = $("#spiServer").val();
 var isPC = ($(window).width()>768);
 var loginState = false;
 var classifyData = [];
+// 导航分类数据
 var mainClassify = new Vue({
     el: '#mainClassify',
     data: {
@@ -27,6 +28,7 @@ var mainClassify = new Vue({
         });
     }
 });
+// 头部购物车数据
 var headCart = new Vue({
     el: '#headCart',
     data: {
@@ -50,6 +52,7 @@ var headCart = new Vue({
         });
     }
 });
+// 初始化效果
 $(function(){
     $(window).resize(function() {
         var flag = (isPC && $(window).width()<=768) || (!isPC && $(window).width()>768)
@@ -69,6 +72,7 @@ $(function(){
 
 
 });
+// 公共方法
 function jqClickShow(tab, con){
     $("body").on("click", tab, function(e){
         e.stopPropagation();
@@ -147,5 +151,18 @@ function jqSelect(selectBox){
         $(selectBox).find("ul").slideUp("fast");
     });
 }
-
+//解决移动端滚动穿透
+function fixedBody(){
+    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+    setTimeout(function(){
+        document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
+    },10);
+}
+function looseBody() {
+    var body = document.body;
+    body.style.position = '';
+    var top = body.style.top;
+    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
+    body.style.top = '';
+}
 

src/main/resources/static/js/index.js

@@ -179,10 +179,12 @@ var homeData = new Vue({
     mounted: function() {
         this.getTopicData();
         this.getAdvertising();
-        // 广告位滚动判断
-        window.onscroll= function(){
-            //滚动条距离
-            var scoll = document.documentElement.scrollTop||document.body.scrollTop
+        // 侧边栏滚动判断
+        $(window).scroll(function () {
+            if($('body').attr("style") && $('body').attr("style").indexOf('fixed')>0){
+                return false;
+            }
+            var scoll = Math.max($('html').scrollTop(), $('body').scrollTop());
             if(scoll >200){
                 $('#sideNav').show();
                 if(isPC){$('#advertising').show();}
@@ -190,13 +192,33 @@ var homeData = new Vue({
                 $('#sideNav').hide();
                 $('#advertising').hide();
             }
-        };
+        });
         // 置顶
-        $('body').on("click", '#sideNav .toTop',function () {
+        $('#sideNav').on("click", '.toTop',function () {
             $("html,body").animate({scrollTop:0},500);
         });
-
-
+        // 侧边导航
+        $('#sideNav').on("click", 'a[data-id]',function () {
+            var id = $(this).attr('data-id');
+            var floorScroll = $('.floorTit [data-id='+id+']').offset().top;
+            $('html,body').animate({scrollTop: floorScroll},600);
+        });
+        // 热线
+        if(!isPC){
+            $('#sideNav').on("click", '.phone',function () {
+                $('#sideNav').find('.phoneHover').show();
+                fixedBody();
+            }).on("click", '.phoneHover div',function (e) {
+                e.stopPropagation();
+            }).on("click", '.phoneHover,.phoneHover .close',function () {
+                $('#sideNav').find('.phoneHover').hide();
+                looseBody();
+            });
+        }
+        //关闭广告图
+        $('#advertising').on('click','.close',function () {
+            $(this).parents('.item').hide();
+        })
     }
 });
 

src/main/resources/templates/index.html

@@ -152,7 +152,7 @@
                 <div class="floorCon">
                     <div class="supplierList">
                         <ul class="clear mfw">
-                            <li><img src="/img/home/goodsup.png"/></li>
+                            <li><img src="/img/index/goodsup.png"/></li>
                             <li v-for="topic in topicData3" style="display: inline-block">
                                 <a href="javascript:void(0);">
                                     <img :src="topic.image" :alt="topic.title">
@@ -173,11 +173,13 @@
         <div class="item">
             <span class="phone icon mIcon">咨询热线</span>
             <div class="phoneHover">
-                <span>咨询热线</span>
-                <span class="on">0755-22907771</span>
-                <span class="on">153-3885-1365</span>
-                <span>工作日:</span>
-                <span>9:00-18:00</span>
+                <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>
+                    <p><span>工作日</span></p>
+                    <p>周一 ～ 周五 / 09:00～18:00</p>
+                    <i class="close"></i>
+                </div>
             </div>
         </div>
         <div class="item">
@@ -195,11 +197,11 @@
     </div>
 </div>
 <div class="footTop">
-    <div class="wrap">
-        <span class="icon">国内首家美业共享平台</span>
-        <span class="icon">采美正品联盟货源保证</span>
-        <span class="icon">5000+美容机构入驻</span>
-        <span class="icon">100+国际国内知名供应商</span>
+    <div class="wrap mf">
+        <span class="icon mIcon mfi">国内首家美业共享平台</span>
+        <span class="icon mIcon mfi">采美正品联盟货源保证</span>
+        <span class="icon mIcon mfi">5000+美容机构入驻</span>
+        <span class="icon mIcon mfi">100+国际国内知名供应商</span>
     </div>
 </div>
 <!-- 引入底部 -->