首页楼层h5

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

@@ -1,11 +1,11 @@
 @charset "utf-8";
 html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,pre,img,table,tr,th,td,form,input,textarea,button{margin:0;padding:0;}
 body,input,textarea,button,select{font-family:Source Han Sans CN,'Microsoft YaHei',SimSun,Arial,Helvetica,sans-serif;}
-body{width:100%;min-height:100%;font-size:14px;color:#333;background:#F5F5F5;}
+body{width:100%;min-height:100%;font-size:14px;color:#4A4F58;background:#F5F5F5;}
 .clear{clear:both;}
 .clear:after{content:'';display:table;clear:both;}
 ::-ms-clear,::-ms-reveal{display:none;}
-a{text-decoration:none;color:#000;}
+a{text-decoration:none;color:#4A4F58;}
 a:focus{text-decoration:none;outline:none;}
 a:hover{color:#E15616;}
 img{border:none;vertical-align:middle;}

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

@@ -3,7 +3,7 @@
 * 移动端
 */
 .baseHeadCenter,#container,.footMain{width: 100%;overflow: hidden;}
-.jqSelect .pc,.baseHeadTop,.baseHeadCenter .headCart,.baseHeadCenter .hotword,.baseTopNav{display:none;}
+.pcOnly,.jqSelect .pc,.baseHeadTop,.baseHeadCenter .headCart,.baseHeadCenter .hotword,.baseTopNav{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;}

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

@@ -2,8 +2,8 @@
 /**
 * PC端
 */
-body{min-width:1200px;}
-.h5Only{display:none;}
+body{min-width:1184px;}
+.h5Only{display:none!important;}
 /*定义滚动条样式*/
 ::-webkit-scrollbar{width:10px;height:10px;background-color:#F6F6F6}
 ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);border-radius:2px;background-color:#F6F6F6}
@@ -16,7 +16,7 @@ body{min-width:1200px;}
 .jqSelect ul{display:none;position:absolute;left:0;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:2px;z-index:9}
 .jqSelect ul li{box-sizing:border-box;padding:0 15px;display:inline-block;width:100%;height:38px;line-height:38px;white-space:nowrap;text-align:left;cursor:pointer}
 .jqSelect ul li:hover{background:#FEF6F3;color:#E15616}
-.wrap{width:1200px;margin:0 auto;}
+.wrap{width:1184px;margin:0 auto;}
 .icon:before,.baseTopNav .nav:after{content:'';display:inline-block;background:url(/img/base/icon.png) no-repeat;font-size:0;}
 /* 头部 */
 .baseHeadTop{width:100%;font-size:14px;background:#FBFBFB}
@@ -77,7 +77,7 @@ body{min-width:1200px;}
 .baseTopNav>.wrap{height:44px;box-sizing:border-box;position:relative;z-index:991;}
 .baseTopNav .home,.baseTopNav .classBtn,.baseTopNav .navBox{float:left}
 .baseTopNav .service{float:right}
-.baseTopNav .nav{display:inline-block;height:44px;line-height:44px;padding:0 20px;color:#4A4F58;font-size:14px;text-align:center;position:relative;border-left:1px solid transparent;border-right:1px solid transparent}
+.baseTopNav .nav{display:inline-block;height:44px;line-height:44px;padding:0 19px;color:#4A4F58;font-size:14px;text-align:center;position:relative;border-left:1px solid transparent;border-right:1px solid transparent}
 .baseTopNav .nav:hover,.baseTopNav .nav.on{color:#E15616;border-image:-webkit-linear-gradient(white,#E15616,white)1 20 1;border-image:-moz-linear-gradient(white,#E15616,white)1 20 1;border-image:-o-linear-gradient(white,#E15616,white)1 20 1;border-image:linear-gradient(white,#E15616,white)1 20 1}
 .baseTopNav .nav:after{width:20px;height:20px;vertical-align:middle;margin-left:1px}
 .baseTopNav .nav.home:after{background-position:-30px -31px}
@@ -100,7 +100,7 @@ body{min-width:1200px;}
 .baseTopNav .navBox li>div a:hover{background:#FEF6F3;color:#E15616}
 .baseTopNav .classifyBox{display:none;position:absolute;left:50%;top:44px;z-index:990;transform:translateX(-50%)}
 /* 分类 */
-.classifyBox{width:1200px;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{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:hover,.classifyBox .clsTab a.on{color:#E15616;border-color:#E15616}

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

@@ -9,10 +9,10 @@ li{list-style:none;}
 #swiper-container .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;}
 #swiper-container .swiper-wrapper img{width:auto;height:48vw;display:block}
 #swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{display:none}
-#swiper-container .swiper-pagination{width:100%;height:2.6vw;position:absolute;left:0;bottom:1vw;z-index:1;text-align:center;font-size:0}
-#swiper-container .swiper-pagination .swiper-pagination-bullet{display:inline-block;width:2vw;height:.6vw;border:1vw solid transparent;cursor:pointer;background:none}
-#swiper-container .swiper-pagination .swiper-pagination-bullet:before{content:"";display:inline-block;width:2vw;height:.6vw;background:rgba(255,255,255,.4);border-radius:.3vw}
-#swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before{width:4vw;background:#fff}
+#swiper-container .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
+#swiper-container .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
+#swiper-container .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FFF;border-radius:.3vw}
+#swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
 /* 首页导航 */
 .mNavBox{width:100%;margin:0 auto;padding:2.2vw 0;position:relative;background:#FFF}
 .mNavBox ul{width:100vw;margin:0 auto}
@@ -61,13 +61,57 @@ li{list-style:none;}
 #recommendBox .swiper-slide .btn{display:inline-block;width:35.8vw;height:9vw;text-align:center;overflow:hidden;color:#F94B4B;background:#FEF6F3;border-radius:2px}
 #recommendBox .swiper-slide .btn.add{background:#FEF6F3;color:#E15616;}
 /* 首页楼层 */
-.floorTit{width:93.4vw;margin:0 auto;}
-.floorCon{width:97vw;margin:0 auto;}
-.floorTit h2{font-weight:bold;color:#2D3036;font-size:3.7vw;line-height:11.2vw;}
-
-
-
-
-
-.floorTit+ul img{width:60px;}
-.floorCon{width:97vw;margin:0 auto;}
+.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:after{margin-left:4px;content:'\276F'}
+.floorCon{width:94vw;margin:0 auto;}
+.floorCon a{display:block;width:100%;height:100%}
+.floorList{width:96vw;margin-left:-1.3vw;}
+.floorList>li{position:relative;margin:0 1.3vw 2.6vw 1.3vw;width:29.4vw;height:39.2vw;background:#FFF}
+.floorList>li:nth-of-type(1),.floorList>li:nth-of-type(2){width:45.4vw;height:55.2vw}
+.floorList>li img{width:100%;height:auto}
+.floorList>li p{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;line-height:4vw;padding:2.9vw 1vw;text-align:center;background:rgba(255,255,255,.6);font-size:3vw;color:#93979F}
+/* 商品专题 */
+#goodsTopic{width:100%;height:37.8vw;overflow:hidden;position:relative}
+#goodsTopic .swiper-wrapper{position:relative;height:100%;z-index:0}
+#goodsTopic .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;}
+#goodsTopic .swiper-wrapper img{width:auto;height:37.8vw;display:block}
+#goodsTopic .swiper-button-prev,#goodsTopic .swiper-button-next{display:none}
+#goodsTopic .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
+#goodsTopic .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
+#goodsTopic .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FFF;border-radius:.3vw}
+#goodsTopic .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
+/* 小专题 */
+.smallTopic{overflow:hidden;padding-top:2.6vw}
+.smallTopic ul{width:96vw;margin-left:-1.3vw}
+.smallTopic li{position:relative;margin:0 1.3vw 2.6vw 1.3vw;width:45.4vw;height:45.4vw;background:#FFF}
+.smallTopic li img{display:block;height:100%;width:100%}
+.smallTopic li p{position:absolute;left:0;bottom:0;box-sizing:border-box;width:100%;line-height:5vw;padding:1.8vw 1vw;text-align:center;background:rgba(255,255,255,.6);color:#4A4F58;font-size:3.4vw}
+/* 优质供应商 */
+.supplierList ul{width:96vw;margin-left:-1.3vw}
+.supplierList ul li{width:21.4vw;height:26.6vw;background:#fff;position:relative;margin:0 1.3vw 2.2vw 1.3vw;overflow:hidden}
+.supplierList ul li:first-child{display:none;}
+.supplierList ul li a{display:block;width:100%;height:100%}
+.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}*/
+/* 首页右侧导航 */
+#advertising,#sideNav .item:first-child{display:none;}
+#sideNav{display:none;position:fixed;right:0;;z-index:9999;bottom:4vw;}
+#sideNav .item{width:12vw;background-color:rgba(190,194,201,.3);box-sizing:border-box;text-align:center;margin-bottom:2.5vw;font-size:3vw;position:relative}
+#sideNav .item>span{box-sizing:border-box;display:block;padding:1.5vw;line-height:3.4vw;}
+#sideNav .item .phone,#sideNav .item .toTop{width:100%;height:100%;}
+#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}

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

@@ -4,7 +4,7 @@
  */
 li{list-style:none;}
 /* 轮播 */
-#swiper-container{width:100%;height:510px;min-width:1200px;overflow:hidden;position:relative}
+#swiper-container{width:100%;height:510px;min-width:1184px;overflow:hidden;position:relative}
 #swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
 #swiper-container .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden}
 #swiper-container .swiper-wrapper img{width:auto;height:510px;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
@@ -18,23 +18,14 @@ li{list-style:none;}
 #swiper-container .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
 #swiper-container .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px}
 #swiper-container .swiper-pagination span.on:before{width:28px;background:#fff}
-/* 首页底部 */
-.footTop{width:100%;padding:27px 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}
 /* 推荐专区 */
-#recommendBox{width:1220px;height:484px;margin-left:-10px;overflow:hidden;position:relative}
+#recommendBox{width:1204px;height:484px;margin-left:-7.5px;overflow:hidden;position:relative}
 #recommendBox .swiper-pagination{width:100%;height:68px;padding:27px 0;z-index:1;text-align:center;font-size:0;}
 #recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
 #recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
 #recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
 #recommendBox .swiper-wrapper{position:relative;width:200%;height:426px;overflow:hidden;z-index:0;}
-#recommendBox .swiper-wrapper .swiper-slide{float:left;width:285px;height:416px;margin:0 10px;}
+#recommendBox .swiper-wrapper .swiper-slide{float:left;width:285px;height:416px;margin:0 7.5px;}
 #recommendBox .swiper-slide .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;margin:0 auto;width:100%;height:100%;background:#FFF;border-radius:2px;font-size:16px}
 #recommendBox .swiper-slide .item img{display:block;width:100%;height:284px}
 #recommendBox .swiper-slide .image .icon{position:absolute;right:20px;top:10px}
@@ -54,50 +45,84 @@ li{list-style:none;}
 #recommendBox .swiper-slide .item:hover .btnBox{display:block}
 #recommendBox .swiper-slide .item:hover{box-shadow:0px 3px 6px rgba(225,86,22,.5)}
 #recommendBox .swiper-slide .btn{display:block;width:158px;margin:12px auto;height:42px;line-height:42px;text-align:center;overflow:hidden;color:#F94B4B;background:#FFE6DC;border:1px solid #E15616;border-radius:2px}
-#recommendBox .swiper-slide .btn.add{color:#E15616;background:#FFE6DC;border:1px solid #FFE6DC;}
+#recommendBox .swiper-slide .btn.add{color:#E15616;}
 #recommendBox .swiper-slide .btn:hover{background:#E15616;color:#FFF}
-
 /* 首页楼层 */
-.floorTit{padding:24px 0 16px 0;
-    position: relative;}
-.floorTit h2,.floorTit h3{font-weight:bold;color:#2D3036;font-size:24px;line-height:40px;}
-.floorTit h5{font-weight:normal;color:#999FAB;font-size:14px;line-height:16px;}
-.floorTit a.more{
-    position: absolute;
-    right: 0;
-    top:40px;
-    height:30px;
-    line-height: 30px;
-}
-.floorTit a.more:after{
-    margin-left:5px;
-    content:'\276F';
-}
-.floorCon {width:1200px;margin:0 auto;}
-.floorList{width:200%;}
-.floorList>li{
-    width:224px;
-    height:278px;
-    margin-right:20px;
-    background: #FFF;
-    position: relative;
-}
-.floorList>li>a{display:block;width:100%;height:100%;}
-.floorList>li img{
-    display: block;
-    width:224px;
-    height:224px;
-}
-.floorList>li p{
-    height:54px;
-    line-height: 54px;
-    font-size: 16px;
-    color:#93979F;
-    text-align: center;
-}
-.floorList>li>a:hover p{
-    color:#E15616;
-}
-.floorList>li p:hover{
-    background:#FEF6F3;
-}
+.floorTit{padding:24px 0 16px 0;position:relative}
+.floorTit h2,.floorTit h3{font-weight:bold;color:#2D3036;font-size:24px;line-height:40px}
+.floorTit h5{font-weight:normal;color:#999FAB;font-size:14px;line-height:16px}
+.floorTit a.more{position:absolute;right:0;top:40px;height:30px;line-height:30px}
+.floorTit a.more:after{margin-left:5px;content:'\276F'}
+.floorCon{width:1184px;overflow:hidden;margin:0 auto}
+.floorList{width:200%}
+.floorList>li{width:224px;height:278px;margin-right:16px;background:#FFF;position:relative}
+.floorList>li a{display:block;width:100%;height:100%}
+.floorList>li img{display:block;width:224px;height:224px}
+.floorList>li p{position:absolute;left:0;bottom:0;font-size:16px;color:#93979F;width:100%;box-sizing:border-box;line-height:20px;padding:17px;text-align:center;background:rgba(255,255,255,.6)}
+.floorList>li>a:hover p{color:#E15616}
+.floorList>li p:hover{background:#FEF6F3}
+/* 商品专题 */
+#goodsTopic{width:1184px;height:237px;overflow:hidden;position:relative}
+#goodsTopic .swiper-wrapper{position:relative;height:100%;z-index:0}
+#goodsTopic .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden}
+#goodsTopic .swiper-wrapper img{width:100%;height:237px;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
+#goodsTopic .swiper-button-prev,#goodsTopic .swiper-button-next{position:absolute;top:50%;margin-top:-25px;display:block;width:30px;height:50px;line-height:50px;background:rgba(255,230,220,.2);color:#FFF;font-size:30px;text-align:center;border-radius:2px}
+#goodsTopic .swiper-button-prev{left:0;right:auto}
+#goodsTopic .swiper-button-next{left:auto;right:0}
+#goodsTopic .swiper-button-prev:after{content:"\276C"}
+#goodsTopic .swiper-button-next:after{content:"\276D"}
+#goodsTopic .swiper-button-prev:hover,#goodsTopic .swiper-button-next:hover{background:rgba(255,230,220,.6)}
+#goodsTopic .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:10px;z-index:1;text-align:center;font-size:0}
+#goodsTopic .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
+#goodsTopic .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px}
+#goodsTopic .swiper-pagination span.on:before{width:28px;background:#fff}
+/* 小专题 */
+.smallTopic{overflow:hidden;height:284px;padding-top:16px}
+.smallTopic ul{width:2400px}
+.smallTopic li{width:284px;height:284px;position:relative;margin-right:16px}
+.smallTopic li a{display:block;width:100%;height:100%}
+.smallTopic li img{display:block;height:100%;width:100%}
+.smallTopic li p{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;line-height:20px;padding:10px;text-align:center;background:rgba(255,255,255,.6);font-size:16px}
+/* 优质供应商 */
+.supplierList ul{width:1240px}
+.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 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}
+/* 首页底部 */
+.footTop{width:100%;padding:27px 0;margin-top: 30px;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}
+/* 首页左侧广告 */
+#advertising{display:none;position:fixed;left:50%;top:68%;z-index:99998;width:120px;margin-left:-700px;transform:translateY(-50%)}
+#advertising .item{position:relative;width:100px;height:180px;margin-bottom:10px}
+#advertising .item a{display:block;width:100%;height:100%}
+#advertising img{width:100%;height:100%;display:block}
+#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 .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>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:hover .phoneHover{display:block}
+

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

@@ -90,14 +90,6 @@ var homeData = new Vue({
                 }
             });
         },
-        getAdvertising: function(){
-            var _self = this;
-            $.getJSON("/home/advertising").done(function (r) {
-                if (r.code === 0 && r.data) {
-                    _self.advertising = r.data;
-                }
-            });
-        },
         getTopicData: function(){
             var _self = this;
             $.getJSON("/home/topic").done(function (r) {
@@ -107,11 +99,50 @@ var homeData = new Vue({
                     _self.topicData4 = r.data.topicData4;
                     _self.topicData5 = r.data.topicData5;
                     setTimeout(function(){
+                        // 设置侧边导航数据
                         _self.setAsideNav();
+                        // 商品专题
+                        if (isPC) {
+                            $('#goodsTopic').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,prevCell:".swiper-button-prev"
+		                        ,nextCell:".swiper-button-next"
+                                ,interTime: 2000
+                                ,autoPlay: true
+                                ,autoPage: false
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            var swiper = new Swiper('#goodsTopic', {
+                                loop : true,
+                                autoplay: {
+                                    delay: 2000,
+                                    disableOnInteraction: false
+                                },
+                                navigation: {
+                                    nextEl: '.swiper-button-next',
+                                    prevEl: '.swiper-button-prev'
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination',
+                                    clickable :true
+                                }
+                            });
+                        }
                     },500)
                 }
             });
         },
+        getAdvertising: function(){
+            var _self = this;
+            $.getJSON("/home/advertising").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.advertising = r.data;
+                }
+            });
+        },
         setAsideNav: function(){
             var _self = this;
             var titArr = $('.floorTit').find('h2,h3');
@@ -144,10 +175,27 @@ var homeData = new Vue({
     created: function() {
         this.getBanners();
         this.getRecommends();
-        this.getTopicData();
     },
     mounted: function() {
+        this.getTopicData();
         this.getAdvertising();
+        // 广告位滚动判断
+        window.onscroll= function(){
+            //滚动条距离
+            var scoll = document.documentElement.scrollTop||document.body.scrollTop
+            if(scoll >200){
+                $('#sideNav').show();
+                if(isPC){$('#advertising').show();}
+            }else {
+                $('#sideNav').hide();
+                $('#advertising').hide();
+            }
+        };
+        // 置顶
+        $('body').on("click", '#sideNav .toTop',function () {
+            $("html,body").animate({scrollTop:0},500);
+        });
+
 
     }
 });

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

@@ -36,7 +36,8 @@
         <div class="wrap clear">
             <a href="javascript:void(0);" class="h5Only mClassBtn mIcon" title="分类"></a>
             <a href="/" class="logo">
-                <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
+                <img class="pcOnly" src="/img/base/logo.png" alt="采美 生美/医美采购服务平台"/>
+                <img class="h5Only" src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
             </a>
             <div class="mf h5Only mUserCenter">
                 <a href="javascript:void(0);" class="mAddCart mIcon" title="购物车"></a>

src/main/resources/templates/index.html

@@ -19,7 +19,7 @@
                 <a :href="img.link"><img :src="img.image" :alt="img.title"></a>
             </li>
         </ul>
-        <div class="swiper-pagination"><span v-if="isPC" v-for="img in images"></span></div>
+        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in images.length"></span></div>
         <a class="swiper-button-prev" href="javascript:void(0)"></a>
         <a class="swiper-button-next" href="javascript:void(0)"></a>
     </div>
@@ -94,26 +94,23 @@
                     </div>
                 </div>
             </div>
-            <!--<div th:if="${item.type}==2">
-                <div class="floorTit">
-                    <h2 th:text="${item.title}" data-id="2">团购促销</h2>
-                </div>
-            </div>-->
-            <div th:if="${item.type}==3">
-                <div class="floorTit">
-                    <h2 th:text="${item.title}" data-id="3">优质供应商</h2>
-                    <h5>采美正品联盟 质量保证</h5>
-                </div>
-                <div class="floorCon">
-                    <img src="/img/home/goodsup.png"/>
-                    <ul>
-                        <li v-for="topic in topicData3" style="display: inline-block">
-                            <a href="javascript:void(0);">
-                                <img :src="topic.image" :alt="topic.title">
-                                <p v-text="topic.title"></p>
-                            </a>
-                        </li>
-                    </ul>
+            <div th:if="${item.type}==6">
+                <!--大专题-->
+                <div v-for="bigTopic in bigTopicData">
+                    <div class="floorTit">
+                        <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
+                        <h5 v-text="bigTopic.detail"></h5>
+                    </div>
+                    <div class="floorCon">
+                        <ul class="floorList clear mfw">
+                            <li v-for="floor in bigTopic.floorData" style="display: inline-block">
+                                <a href="javascript:void(0);">
+                                    <img :src="floor.image" :alt="floor.title">
+                                    <p v-text="floor.title"></p>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
             <div th:if="${item.type}==4">
@@ -122,19 +119,23 @@
                     <a class="more" href="javascript:void(0);">更多商品专题</a>
                 </div>
                 <div class="floorCon">
-                    <ul>
-                        <li v-for="topic in topicData4" style="display: inline-block">
-                            <a href="javascript:void(0);">
-                                <img :src="topic.image" :alt="topic.title">
-                                <p v-text="topic.title"></p>
-                            </a>
-                        </li>
-                    </ul>
+                    <div id="goodsTopic" class="swiper-container">
+                        <ul class="swiper-wrapper" v-cloak>
+                            <li class="swiper-slide mfc" v-for="topic in topicData4">
+                                <a href="javascript:void(0);">
+                                    <img :src="topic.image" :alt="topic.title">
+                                </a>
+                            </li>
+                        </ul>
+                        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in topicData4.length"></span></div>
+                        <a class="swiper-button-prev" href="javascript:void(0)"></a>
+                        <a class="swiper-button-next" href="javascript:void(0)"></a>
+                    </div>
                 </div>
             </div>
-            <div th:if="${item.type}==5">
+            <div th:if="${item.type}==5" class="floorCon smallTopic">
                 <!--小专题-->
-                <ul>
+                <ul class="mfw">
                     <li v-for="topic in topicData5" style="display: inline-block">
                         <a href="javascript:void(0);">
                             <img :src="topic.image" :alt="topic.title">
@@ -143,19 +144,19 @@
                     </li>
                 </ul>
             </div>
-            <div th:if="${item.type}==6">
-                <!--大专题-->
-                <div v-for="bigTopic in bigTopicData">
-                    <div class="floorTit">
-                        <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
-                        <h5 v-text="bigTopic.detail"></h5>
-                    </div>
-                    <div class="floorCon">
-                        <ul class="floorList clear">
-                            <li v-for="floor in bigTopic.floorData" style="display: inline-block">
+            <div th:if="${item.type}==3">
+                <div class="floorTit">
+                    <h2 th:text="${item.title}" data-id="3">优质供应商</h2>
+                    <h5>采美正品联盟 质量保证</h5>
+                </div>
+                <div class="floorCon">
+                    <div class="supplierList">
+                        <ul class="clear mfw">
+                            <li><img src="/img/home/goodsup.png"/></li>
+                            <li v-for="topic in topicData3" style="display: inline-block">
                                 <a href="javascript:void(0);">
-                                    <img :src="floor.image" :alt="floor.title">
-                                    <p v-text="floor.title"></p>
+                                    <img :src="topic.image" :alt="topic.title">
+                                    <p v-text="topic.title"></p>
                                 </a>
                             </li>
                         </ul>
@@ -165,40 +166,31 @@
         </div>
     </div>
     <!--右侧边栏导航-->
-    <div>
-        <div>
+    <div id="sideNav">
+        <div class="item">
             <a v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value" href="javascript:void(0);"></a>
         </div>
-        <div>
-            <img src="/img/base/qr_code_caimei.png"/>
-            <div class="hover">
-                <img src="/img/base/qr_code_caimei.png" alt="采美365网"/>
-                <p>微信扫一扫<br/>关注采美365网</p>
+        <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>
         </div>
-        <div>
-            <img src="/img/home/kefuBig.png"/>
-            <div class="hover">
-                <img src="/img/home/kefuBig.png"/>
-                <div>
-                    <p>咨询热线</p>
-                    <div>0755-22907771</div>
-                    <div>153-3885-1365</div>
-                </div>
-                <div>
-                    <p>工作日:</p>
-                    <div>9:00-18:00</div>
-                </div>
-            </div>
+        <div class="item">
+            <span class="toTop icon mIcon">置顶</span>
         </div>
     </div>
     <!--左侧广告图-->
-    <div>
-        <div v-for="ad in advertising">
+    <div id="advertising">
+        <div class="item" v-for="ad in advertising">
             <a href="javascript:void(0);">
                 <img :src="ad.image" :alt="ad.title">
-                <p v-text="ad.title"></p>
             </a>
+            <span class="close"></span>
         </div>
     </div>
 </div>