首页PC布局

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

@@ -1,16 +1,20 @@
 @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:Helvetica Neue,Helvetica,'Microsoft Jhenghei','Microsoft YaHei',Arial,'Trebuchet MS',Calibri,Helvetica,sans-serif;font-size:15px;}
+body,input,textarea,button,select{font-family:Source Han Sans CN,'Microsoft YaHei',SimSun,Arial,Helvetica,sans-serif;}
+body{font-size:14px;color:#333;background:#EBECEF;}
 .clear{clear:both;}
 .clear:after{content:"";display:table;clear:both;}
 ::-ms-clear,::-ms-reveal{display:none;}
 a{text-decoration:none;color:#000;}
 a:focus{text-decoration:none;outline:none;}
+a:hover{color:#E15616;}
 img{border:none;vertical-align:middle;}
 button{border:none;outline:none;}
 input:focus {box-shadow: 0 0 5px #003399;}
 pre{white-space:pre-wrap;}
 li{list-style-position:inside;}
+header li,footer li{list-style:none;}
+/* 定义动画效果 */
 @-webkit-keyframes fadeInDown{
   from{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}
   to{opacity:1;-webkit-transform:none;transform:none;}
@@ -19,11 +23,149 @@ li{list-style-position:inside;}
   from{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}
   to{opacity:1;-webkit-transform:none;transform:none;}
 }
+/**
+ * PC端
+ */
 @media screen and (min-width:768px){
-/* PC端 */
+   body{width:100%;min-width:1200px;}
+  .jqSelect{position:relative;width:100px;height:32px;line-height:32px;border:1px solid #666;border-radius:2px;cursor:pointer}
+  .jqSelect:after{content: "\276F";font-weight: normal;position: absolute;right: 10px;top: 0;transform: rotate(90deg);}
+  .jqSelect select{display:none}
+  .jqSelect [data-select]{display:inline-block;box-sizing:border-box;padding:0 15px;width:100%;height:32px;line-height:32px;vertical-align:middle}
+  .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;}
+  /* 头部 */
+  .baseHeadTop{width:100%;font-size:14px;background:#FBFBFB}
+  .baseHeadTop ul{height:40px;line-height:40px}
+  .baseHeadTop ul li{float:right;margin-left:12px;position:relative}
+  .baseHeadTop li > a{display:inline-block;padding:0 6px;height:40px;border-bottom:1px solid transparent}
+  .baseHeadTop li > a:hover,.baseHeadTop li > a.on{color:#E15616;border-color:#E15616}
+  .baseHeadTop li .qrCode{display:none;position:absolute;right:calc((100% - 72px)/2);width:72px;height:96px;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:2px;z-index:9}
+  .baseHeadTop li:hover .qrCode{display:block;-webkit-animation:fadeInDown .6s;animation:fadeInDown .6s}
+  .baseHeadTop li .qrCode img{width:72px;height:72px}
+  .baseHeadTop li .qrCode p{line-height:24px;white-space:nowrap;text-align:center;color:#4A4F58}
+  .baseHeadTop li > a.cTab{padding-right: 18px;}
+  .baseHeadTop li > a.cTab:after{content: "\276F";font-weight: normal;position: absolute;right: 6px;top: 0;transform: rotate(90deg);}
+  .baseHeadTop li .cShow{display:none;position:absolute;right:calc((100% - 90px)/2);width:90px;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:2px;z-index:8}
+  .baseHeadTop li .cShow a{display:inline-block;width:100%;height:38px;line-height:38px;white-space:nowrap;text-align:center}
+  .baseHeadTop li .cShow a:hover{background:#FEF6F3;color:#E15616}
+  .baseHeadCenter,.baseTopNav{width:100%;background:#FFF}
+  .baseHeadCenter .wrap{height:82px;box-sizing:border-box;padding-top:10px}
+  .baseHeadCenter .logo{float:left;width:178px;height:44px;margin-right:122px}
+  .baseHeadCenter .searchBox{width:684px;float:left}
+  .baseHeadCenter .search{width:100%;height:44px;line-height:44px;border:1px solid #FFE6DC;position:relative}
+  .baseHeadCenter .search:before{content:"";position:absolute;left:104px;top:16px;height:12px;border-right:2px solid #C0C6D1}
+  .baseHeadCenter .search .jqSelect{width:104px;height:44px;line-height:44px;border:none}
+  .baseHeadCenter .search .jqSelect:after{right:16px}
+  .baseHeadCenter .search .jqSelect ul{z-index:999;}
+  .baseHeadCenter .keyword{width:578px;height:44px;line-height:44px;text-indent:15px;position:absolute;right:0;top:0;border:none;outline:none}
+  .baseHeadCenter .keyword:focus{outline:none;border:none}
+  .baseHeadCenter .searchBtn{position:absolute;right:12px;top:7px;width:30px;height:30px;background:url(/img/base/icon.png) no-repeat 5px 5px}
+  .baseHeadCenter .hotword{color:#93979F;font-size:12px;line-height:24px}
+  .baseHeadCenter .hotword a{color:#93979F;padding:0 5px}
+  .baseHeadCenter .hotword a:hover{color:#E15616}
+  .baseHeadCenter .headCart{width:184px;height:44px;float:right;position:relative;}
+  .baseHeadCenter .headCart .addBtn{display:inline-block;width:100%;height:44px;line-height:44px;box-sizing:border-box;border:1px solid #FFE6DC;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}
+  .baseHeadCenter .headCart .addBtn:before{content:'';display:inline-block;width:20px;height:20px;vertical-align:middle;background:url(/img/base/icon.png) no-repeat -30px -1px;margin-right:2px}
+  .baseHeadCenter .cartData{display:none;position:absolute;right:0;top:44px;width:360px;box-sizing:border-box;padding:10px;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,0.17);border-radius:2px}
+  .baseHeadCenter .cartData .empty{text-align:center;font-size:16px;line-height:26px;padding:62px 0}
+  .baseHeadCenter .cartData .empty a{color:#E15616;margin:0 5px;border-bottom:1px solid #e15616}
+  .baseHeadCenter .cartData .empty img{display:block;margin:0 auto 28px auto;width:160px;height:136px}
+  .baseHeadCenter .headCart:hover .cartData{display:block;-webkit-animation:fadeInDown .4s;animation:fadeInDown .4s}
+  .baseTopNav{position:relative;height:44px;border-top:1px solid #E15616}
+  .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: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{content:'';display:inline-block;width:20px;height:20px;vertical-align:middle;background:url(/img/base/nav.png) no-repeat;margin-left:1px}
+  .baseTopNav .nav.home:after{background-position:-30px -1px}
+  .baseTopNav .classBtn:after{background-position:0 -1px;transition: all .5s;}
+  .baseTopNav .classBtn.on:after{transform:rotate(90deg);}
+  .baseTopNav .navBox li:nth-of-type(1) .nav:after{background-position:-60px -1px}
+  .baseTopNav .navBox li:nth-of-type(2) .nav:after{background-position:-90px -1px}
+  .baseTopNav .navBox li:nth-of-type(3) .nav:after{background-position:-120px -1px}
+  .baseTopNav .navBox li:nth-of-type(4) .nav:after{background-position:0 -31px}
+  .baseTopNav .navBox li:nth-of-type(5) .nav:after{background-position:-30px -31px}
+  .baseTopNav .navBox li:nth-of-type(6) .nav:after{background-position:-60px -31px}
+  .baseTopNav .navBox li:nth-of-type(7) .nav:after{background-position:-90px -31px}
+  .baseTopNav .service:after{background-position:-120px -31px}
+  .baseTopNav .navBox{width:500px}
+  .baseTopNav .navBox ul{width:980px;}
+  .baseTopNav .navBox li{float:left;position:relative}
+  .baseTopNav .navBox li>div{display:none;position:absolute;left:0;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:0 0 2px 2px;z-index:990}
+  .baseTopNav .navBox li:hover div{display:block}
+  .baseTopNav .navBox li>div a{display:inline-block;width:100%;height:38px;line-height:38px;white-space:nowrap;text-align:center;box-sizing:border-box;padding:0 15px}
+  .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 .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}
+  .classifyBox .clsCon{padding:10px 0}
+  .classifyBox .line{position:relative;padding-left:100px;line-height:32px}
+  .classifyBox .line:after{content:"";position:absolute;left:100px;top:0;border-right:1px solid #FFE6DC;height:100%}
+  .classifyBox .lft{position:absolute;top:0;left:0;width:100px;color:#000}
+  .classifyBox .lft a{display:inline-block;width:100%;line-height:24px;padding:10px;box-sizing:border-box}
+  .classifyBox .rgt{color:#666;padding:6px 0 6px 6px;position:relative}
+  .classifyBox .rgt a{display:inline-block;height:32px;line-height:32px;padding:0 22px;cursor:pointer;color:#666}
+  .classifyBox .rgt a.on,.classifyBox .clsCon .rgt a:hover{color:#e15616;background:#fbe7de}
+  .classifyBox .line:hover .rgt:after,.classifyBox .line.on .rgt:after{content:"";position:absolute;left:0;top:0;z-index:1;border-right:1px solid #E15616;height:100%}
+  .classifyBox .line:hover .lft a,.classifyBox .line.on .lft a{color:#E15616}
+  .classifyBox .line:hover,.classifyBox .line.on{background:#fbfafa}
+  /* 底部 */
+  .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{content:"";display:inline-block;width:70px;height:70px;vertical-align:middle;background:url("/img/base/icon.png") no-repeat}
+  .footTop .wrap span:nth-of-type(1):before{background-position:0 -30px}
+  .footTop .wrap span:nth-of-type(2):before{background-position:-80px -30px}
+  .footTop .wrap span:nth-of-type(3):before{background-position:-160px -30px}
+  .footTop .wrap span:nth-of-type(4):before{background-position:-240px -30px}
+  .footMain{width:100%;background:#4A4F58}
+  .footLink{display:table;padding:12px 0}
+  .footLink>div{display:table-cell;width:171px}
+  .footLink>div span,.footLink>div a{display:inline-block;width:100%}
+  .footLink>div span{line-height:48px;font-size:14px;font-weight:bold;color:#FFF}
+  .footLink>div a{line-height:36px;font-size:12px;color:#BEC2C9}
+  .footLink>div a:hover{color:#E15616;text-decoration:underline}
+  .footContact{text-align:center;padding-top:30px}
+  .footContact p{display:inline-block;width:72px;background:#FFF;border-radius:2px;overflow:hidden;margin:0 16px}
+  .footContact p img{width:72px;height:72px}
+  .footContact p span{line-height:24px;white-space:nowrap;font-size:12px}
+  .footContact .cellNumber{height:60px;line-height:60px;font-size:12px;color:#FFF;white-space:nowrap}
+  .copyright{text-align:center;color:#FFF;font-size:12px;padding-bottom:25px}
+  .copyright p{display:inline-block;white-space:nowrap;padding-left:35px;position:relative}
+  .copyright p span:nth-of-type(2){margin-right:34px}
+  .copyright p:before{content:"";position:absolute;left:0;width:32px;height:32px;background:url(/img/base/icon.png) no-repeat 0 -110px}
+
+
+
+
+
+
+
 
 }
+/**
+* 移动端
+*/
 @media screen and (max-width:768px){
-/* 移动端 */
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 }

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

@@ -1,107 +1,52 @@
 @charset "utf-8";
+li{list-style:none;}
+/**
+ * PC端
+ */
 @media screen and (min-width:768px){
-/* PC端 */
-        .slideBox {
-            width: 450px;
-            height: 230px;
-            overflow: hidden;
-            position: relative;
-            border: 1px solid #ddd;
-        }
+    .slideBox{width:100%;height:510px;min-width:1200px;overflow:hidden;position:relative}
+    .slideBox .bd{position:relative;height:100%;z-index:0}
+    .slideBox .bd li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;}
+    .slideBox .bd img{width:auto;height:510px;display:block;margin-left: 50%;transform: translateX(-50%);}
+    .slideBox .prev,.slideBox .next{position:absolute;top:50%;margin-top:-34px;display:block;width:44px;height:68px;line-height:68px;background:rgba(255,230,220,.2);color:#FFF;font-size:40px;text-align:center;border-radius:2px}
+    .slideBox .prev{left:5px;right:auto}
+    .slideBox .next{left:auto;right:5px}
+    .slideBox .prev:after{content:"\276C"}
+    .slideBox .next:after{content:"\276D"}
+    .slideBox .prev:hover,.slideBox .next:hover{background:rgba(255,230,220,.6)}
+    .slideBox .hd{width:100%;height:4px;position:absolute;left:0;bottom:15px;z-index:1;text-align:center;font-size:0}
+    .slideBox .hd li{display:inline-block;border:5px solid transparent;cursor:pointer}
+    .slideBox .hd li:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px;}
+    .slideBox .hd li.on:before{width:28px;background:#fff}
 
-        .slideBox .hd {
-            height: 15px;
-            overflow: hidden;
-            position: absolute;
-            right: 5px;
-            bottom: 5px;
-            z-index: 1;
-            zoom: 1;
-            float: left;
-        }
 
-        .slideBox .hd li {
-            float: left;
-            margin-right: 2px;
-            width: 15px;
-            height: 15px;
-            line-height: 14px;
-            text-align: center;
-            background: #fff;
-            cursor: pointer;
-        }
 
-        .slideBox .hd li.on {
-            background: #f00;
-            color: #fff;
-        }
 
-        .slideBox .bd {
-            position: relative;
-            height: 100%;
-            z-index: 0;
-        }
 
-        .slideBox .bd li {
-            zoom: 1;
-            vertical-align: middle;
-        }
+    .picScroll-left{width:1200px;overflow:hidden;position:relative;border:1px solid #ccc}
+    .picScroll-left .hd{overflow:hidden;height:30px;background:#f4f4f4;padding:0 10px}
+    .picScroll-left .hd .prev,.picScroll-left .hd .next{display:block;width:5px;height:9px;float:right;margin-right:5px;margin-top:10px;overflow:hidden;cursor:pointer;background:url("https://www.caimei365.com/Newindex/img/right.png") no-repeat}
+    .picScroll-left .hd .next{background-position:0 -50px}
+    .picScroll-left .hd{float:right;overflow:hidden;zoom:1;margin-top:10px;zoom:1}
+    .picScroll-left .hdli{float:left;width:9px;height:9px;overflow:hidden;margin-right:5px;text-indent:-999px;cursor:pointer;background:url("images/icoCircle.gif") 0 -9px no-repeat}
+    .picScroll-left .hdli.on{background-position:0 0}
+    .picScroll-left .bd{padding:10px}
+    .picScroll-left .bd{overflow:hidden;zoom:1}
+    .picScroll-left .bd li{margin:0 8px;float:left;width:126px;height:126px;_display:inline;overflow:hidden;text-align:center}
+    .picScroll-left .bd li .pic{text-align:center}
+    .picScroll-left .bd li .pic img{width:120px;height:90px;display:block;padding:2px;border:1px solid #ccc}
+    .picScroll-left .bd li .pic a:hover img{border-color:#999}
+    .picScroll-left .bd li .title{line-height:24px}
 
-        .slideBox .bd img {
-            width: 450px;
-            height: 230px;
-            display: block;
-        }
-
-        /* 下面是前/后按钮代码，如果不需要删除即可 */
-        .slideBox .prev,
-        .slideBox .next {
-            position: absolute;
-            left: 3%;
-            top: 50%;
-            margin-top: -25px;
-            display: block;
-            width: 32px;
-            height: 40px;
-            background: #000 url(https://www.caimei365.com/Newindex/img/right.png);
-            filter: alpha(opacity=50);
-            opacity: 0.5;
-        }
-
-        .slideBox .next {
-            left: auto;
-            right: 3%;
-            background-position: 8px 5px;
-        }
-
-        .slideBox .prev:hover,
-        .slideBox .next:hover {
-            filter: alpha(opacity=100);
-            opacity: 1;
-        }
-
-
-		/* 本例子css */
-		.picScroll-left{ width:576px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
-		.picScroll-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
-		.picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
-			 cursor:pointer; background:url("https://www.caimei365.com/Newindex/img/right.png") no-repeat;}
-		.picScroll-left .hd .next{ background-position:0 -50px;  }
-		.picScroll-left .hd{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
-		.picScroll-left .hdli{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
-		.picScroll-left .hdli.on{ background-position:0 0; }
-		.picScroll-left .bd{ padding:10px;   }
-		.picScroll-left .bd{ overflow:hidden; zoom:1; }
-		.picScroll-left .bd li{ margin:0 8px; float:left;width:126px;height:126px; _display:inline; overflow:hidden; text-align:center;  }
-		.picScroll-left .bd li .pic{ text-align:center; }
-		.picScroll-left .bd li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
-		.picScroll-left .bd li .pic a:hover img{ border-color:#999;  }
-		.picScroll-left .bd li .title{ line-height:24px;   }
 
 
 
 }
+/**
+* 移动端
+*/
 @media screen and (max-width:768px){
-/* 移动端 */
+
+
 
 }

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

@@ -10,7 +10,79 @@ var mainClassify = new Vue({
         $.getJSON(spiServer+"/product/classify").done(function (r) {
             if (r.code === 0 && r.data) {
                 _self.classify = r.data;
+                setTimeout(function(){
+                    $('#mainClassify').slide({
+                        mainCell:".clsCon"
+                        ,titCell:".clsTab a"
+                        ,trigger: "mouseover"
+                    });
+                },500);
             }
         });
     }
 });
+function jqClickShow(tab, con){
+    $("body").on("click", tab, function(e){
+        e.stopPropagation();
+        if($(tab).hasClass("on")){
+            $(tab).removeClass("on");
+            $(con).slideUp("fast");
+        }else{
+            $(tab).addClass("on");
+            $(con).slideDown("fast");
+        }
+    }).on("click", function(){
+        $(tab).removeClass("on");
+        $(con).slideUp("fast");
+    });
+}
+function jqHoverShow(tab, con){
+    $("body").on("mouseover", tab, function(e){
+        e.stopPropagation();
+        if($(tab).hasClass("on")){
+            $(tab).removeClass("on");
+            $(con).slideUp("fast");
+        }else{
+            $(tab).addClass("on");
+            $(con).slideDown("fast");
+        }
+    }).on("mouseover", con, function(e){
+        e.stopPropagation();
+    }).on("mouseover", function(e){
+        $(tab).removeClass("on");
+        $(con).slideUp("fast");
+    });
+}
+function jqSelect(selectBox){
+    $("body").on("click", selectBox, function(e){
+        e.stopPropagation();
+        var select = $(this).find("select");
+        var options = select.find("option");
+        var list = "";
+        for (var i=0; i<options.length; i++){
+            list += '<li data-id="'+$(options[i]).val()+'">'+$(options[i]).text()+'</li>';
+            if($(options[i]).val()===select.val()){
+                $(this).find("[data-select]").text($(options[i]).text()).attr('data-select',$(options[i]).val());
+            }
+        }
+        $(this).find("ul").html(list);
+        $(this).find("ul").slideToggle("fast");
+    }).on("click", selectBox + " li", function(e){
+        e.stopPropagation();
+        $(this).parent().prev().attr('data-select',$(this).attr("data-id")).text($(this).text());
+        $(this).parents("pc").next().val($(this).attr("data-id"));
+        $(this).parent().slideUp("fast");
+    }).on("click", function(){
+        $(selectBox).find("ul").slideUp("fast");
+    });
+}
+
+
+
+
+$(function(){
+    jqClickShow(".baseHeadTop .cTab", ".baseHeadTop .cShow");
+    jqSelect(".jqSelect");
+    jqHoverShow(".classBtn", "#mainClassify");
+
+});

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

@@ -25,7 +25,7 @@ var homeData = new Vue({
                             ,interTime: 3000
                             ,autoPlay: true
                             ,autoPage: false
-                            //trigger: "click"
+                            ,trigger: "mouseover"
                         });
                     },500);
                 }

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

@@ -1,103 +1,55 @@
 <footer xmlns:th="http://www.w3.org/1999/xhtml">
-    <div>
-        <div>
-            <img src="/img/base/foot_guo.png">
+    <div class="footTop">
+        <div class="wrap">
             <span>国内首家美业共享平台</span>
-        </div>
-        <div>
-            <img src="/img/base/foot_zheng.png">
             <span>采美正品联盟货源保证</span>
-        </div>
-        <div>
-            <img src="/img/base/foot_ru.png">
             <span>5000+美容机构入驻</span>
-        </div>
-        <div>
-            <img src="/img/base/foot_sup.png">
             <span>100+国际国内知名供应商</span>
         </div>
     </div>
-    <!--底部帮助页-->
-    <div>
-        <div th:each="type: ${helpPages}">
-            <span th:text="${type.name}"></span>
-            <a th:each="page: ${type.helpPages}" th:href="@{/help.html( id=${page.id} )}" th:text="${page.name}"></a>
-        </div>
-    </div>
-    <!--二维码-->
-    <div>
-        <div>
-            <div>
-                <img src="/img/base/qr_code_caimei.png"/>
-                <p>采美商城</p>
-                <div class="hover">
-                    <img src="/img/base/qr_code_caimei.png" alt="采美365网"/>
-                    <p>微信扫一扫<br/>关注采美365网</p>
-                </div>
+    <div class="footMain">
+        <!--底部帮助页-->
+        <div class="footLink wrap">
+            <div th:each="type: ${helpPages}">
+                <span th:text="${type.name}"></span>
+                <a th:each="page: ${type.helpPages}" th:href="@{/help.html( id=${page.id} )}" th:text="${page.name}"></a>
             </div>
             <div>
-                <img src="/img/base/qr_code_applets.png"/>
-                <p>采美小程序</p>
-                <div class="hover">
-                    <img src="/img/base/qr_code_applets.png" alt="采美小程序"/>
-                    <p>微信扫一扫<br/>查看采美小程序</p>
-                </div>
+                <span>友情链接</span>
+                <a th:each="friend: ${friendLinks}" th:href="${friend.link}" th:text="${friend.name}"></a>
             </div>
+        </div>
+        <!--二维码-->
+        <div class="footContact wrap">
             <div>
-                <img src="/img/base/qr_code_hehe.png"/>
-                <p>呵呵商城</p>
-                <div class="hover">
-                    <img src="/img/base/qr_code_hehe.png" alt="采美小程序"/>
-                    <p>微信扫一扫<br/>关注呵呵商城</p>
-                </div>
+                <p>
+                    <img src="/img/base/qr_code_caimei.png"/>
+                    <span>采美商城</span>
+                </p>
+                <p>
+                    <img src="/img/base/qr_code_applets.png"/>
+                    <span>采美小程序</span>
+                </p>
+                <p>
+                    <img src="/img/base/qr_code_hehe.png"/>
+                    <span>呵呵商城</span>
+                </p>
+                <p>
+                    <img src="/img/base/qr_code_kefu.png"/>
+                    <span>采美客服</span>
+                </p>
             </div>
-            <div>
-                <img src="/img/base/qr_code_kefu.png"/>
-                <p>采美客服</p>
-                <div class="hover">
-                    <img src="/img/base/qr_code_kefu.png" alt="采美小程序"/>
-                    <p>微信扫一扫<br/>添加客服了解更多</p>
-                </div>
+            <div class="cellNumber">
+                <span>周一至周五 09:00-18:00</span>
+                <span>座机：0755-22907771</span>/<span>手机 : 153-3885-1365</span>
             </div>
         </div>
-        <div>
-            <p>座机：0755-22907771</p>
-            <p>手机 : 153-3885-1365</p>
-            <p>（周一至周五 09:00-18:00）</p>
+        <!--copyright-->
+        <div class="wrap copyright">
+            <p><span>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved. 深圳市采美信息技术有限公司</span><br>
+            <span>粤B1-20160129 备案号 粤ICP备14019824号</span><span>中华人民共和国增值电信业务经营许可证</span></p>
         </div>
     </div>
-
-    <div>
-        <p>合作品牌</p>
-        <a href="/supplier.html?sid=1237"><img src="/img/brands/1.png"/></a>
-        <a href="/supplier.html?sid=1172"><img src="/img/brands/2.png"/></a>
-        <a href="/supplier.html?sid=1173"><img src="/img/brands/3.png"/></a>
-        <a href="/supplier.html?sid=1040"><img src="/img/brands/4.png"/></a>
-        <a href="/supplier.html?sid=1208"><img src="/img/brands/5.png"/></a>
-        <a href="/supplier.html?sid=1242"><img src="/img/brands/6.png"/></a>
-        <a href="/supplier.html?sid=1234"><img src="/img/brands/7.png"/></a>
-        <a href="/supplier.html?sid=1205"><img src="/img/brands/8.png"/></a>
-        <a href="/supplier.html?sid=1241"><img src="/img/brands/9.png"/></a>
-        <a href="/supplier.html?sid=1225"><img src="/img/brands/10.png"/></a>
-        <a href="/supplier.html?sid=1218"><img src="/img/brands/11.png"/></a>
-        <a href="/supplier.html?sid=1211"><img src="/img/brands/12.png"/></a>
-        <a href="/supplier.html?sid=1193"><img src="/img/brands/13.png"/></a>
-        <a href="/supplier.html?sid=1184"><img src="/img/brands/14.png"/></a>
-    </div>
-
-    <div class="new-link-right">
-        <p>中华人民共和国增值电信业务经营许可证</p>
-        <p>粤B1-20160129 备案号 粤ICP备14019824号</p>
-        <p>深圳市采美信息技术有限公司</p>
-        <p>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved</p>
-    </div>
-
-    <!--友情链接-->
-    <div>
-        <a th:each="friend: ${friendLinks}" th:href="${friend.link}" th:text="${friend.name}"></a>
-    </div>
-
-
 </footer>
 <script type="text/javascript" src="/lib/jquery-3.5.1.min.js"></script>
 <script type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>

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

@@ -5,4 +5,4 @@
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <meta http-equiv="keywords" content="采美、易耗品商城、光电美容仪器项目、光电中心、皮肤管理中心、光电转型、美容院转型、光电美容">
 <meta http-equiv="description" content="采美365网——中国美业互联网共享经济平台，中国美业较大的光电美容干货信息平台，提供美容专业线客装产品、美容院消耗品、专业线院装产品、光电美容仪器、光电美容项目交易，同时提供采美公益大讲堂、光电美容干货、光电美容资讯、美业动态等行业信息。采集梦想，美启未来。">
-<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+

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

@@ -1,96 +1,116 @@
 <header xmlns:th="http://www.w3.org/1999/xhtml">
-    <ul>
-        <li><a href="javascript:void(0);">登录</a></li>
-        <li><a href="javascript:void(0);">注册</a></li>
-        <li>
-            <a href="javascript:void(0);">用户名</a>
-            <div>
-                <a href="javascript:void(0);">我的采美</a>
-                <a href="javascript:void(0);">机构资料</a>
-                <a href="javascript:void(0);">我的机构</a>
-                <a href="javascript:void(0);">店铺管理</a>
-                <a href="javascript:void(0);">退出登录</a>
-            </div>
-        </li>
-        <li><a href="javascript:void(0);">我的订单</a></li>
-        <li class="qr-code">
-            <a href="javascript:void(0);">采美365公众号</a>
-            <div class="hover">
-                <img src="/img/base/qr_code_caimei.png" alt="采美365网"/>
-                <p>扫描关注<br/>获取更多优惠信息</p>
-            </div>
-        </li>
-        <li class="qr-code">
-            <a href="javascript:void(0);">呵呵商城</a>
-            <div class="hover">
-                <img src="/img/base/qr_code_hehe.png" alt="呵呵商城"/>
-                <p>扫描关注<br/>获取更多优惠信息</p>
-            </div>
-        </li>
-    </ul>
-
-    <div>
-        <div>
+    <!--顶部导航-->
+    <div class="baseHeadTop">
+        <ul class="wrap clear">
+            <li>
+                <a href="javascript:void(0);">采美365网</a>
+                <div class="qrCode">
+                    <img src="/img/base/qr_code_caimei.png" alt="采美365网"/>
+                    <p>扫描关注</p>
+                </div>
+            </li>
+            <li>
+                <a href="javascript:void(0);">呵呵商城</a>
+                <div class="qrCode">
+                    <img src="/img/base/qr_code_hehe.png" alt="呵呵商城"/>
+                    <p>扫描关注</p>
+                </div>
+            </li>
+            <li>
+                <a class="cTab" href="javascript:void(0);">用户名称</a>
+                <div class="cShow">
+                    <a href="javascript:void(0);">我的采美</a>
+                    <a href="javascript:void(0);">机构资料</a>
+                    <a href="javascript:void(0);">我的机构</a>
+                    <a href="javascript:void(0);">店铺管理</a>
+                    <a href="javascript:void(0);">我的订单</a>
+                    <a href="javascript:void(0);">退出登录</a>
+                </div>
+            </li>
+            <li><a href="javascript:void(0);">注册</a></li>
+            <li><a href="javascript:void(0);">登录</a></li>
+        </ul>
+    </div>
+    <!--搜索及购物车-->
+    <div class="baseHeadCenter">
+        <div class="wrap clear">
             <a href="/" class="logo">
-                <img src="/img/base/logo.png" alt="采美"/>
-                <span>生美/医美采购服务平台</span>
+                <img src="/img/base/logo.png" alt="采美 生美/医美采购服务平台"/>
             </a>
-            <div class="search">
-                <div>
-                    <span class="current" data-id="0">产品</span>
-                    <span data-id="1">供应商</span>
-                    <span data-id="2">项目仪器</span>
+            <div class="searchBox">
+                <div class="search">
+                    <div class="jqSelect">
+                        <div class="pc">
+                            <span data-select="1">供应商</span>
+                            <ul><li data-id="1">供应商</li></ul>
+                        </div>
+                        <select>
+                            <option value="0">产品</option>
+                            <option value="1">供应商</option>
+                            <option value="2">项目仪器</option>
+                        </select>
+                    </div>
+                    <input class="keyword" type="text" placeholder="请输入关键字" />
+                    <a class="searchBtn" href="javascript:void(0);"></a>
                 </div>
-                <label>
-                    <input type="text" placeholder="请输入关键字" th:value="${path}" />
-                    <a href="javascript:void(0);">搜索</a>
-                </label>
                 <!-- 热门搜索关键词 -->
-                <div>
+                <div class="hotword">
                     <span th:each="word,wordStat: ${searchHotWord}">
                         <i th:if="${wordStat.index}>0">/</i>
                         <a th:href="@{/product/search.shtml( keyword=${word} )}" target="_blank" th:text="${word}"></a>
                     </span>
                 </div>
             </div>
-        </div>
-        <!--商品分类（异步数据）vue渲染-->
-        <div id="topMenu">
-            <div>
-                <a href="javascript:void(0);">商品分类</a>
-                <div id="mainClassify">
-                    <div class="tab-tit">
-                        <template v-for="big in classify">
-                            <a v-if="big.validFlag==1" :href="'/product/category.shtml?category='+big.bigTypeID+'-0-0'" v-text="big.name"></a>
-                        </template>
-                    </div>
-                    <div class="tab-con">
-                        <div class="type-item" 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/category.shtml?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/category.shtml?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" v-text="tiny.name"></a>
-                                    </template>
-                                </div>
-                            </div>
-                        </div>
+            <div class="headCart">
+                <a href="javascript:void(0);" class="addBtn">购物车</a>
+                <div id="cartData" class="cartData">
+                    <div class="empty">
+                        <img src="/img/base/empty_cart.png">
+                        <p>购物车暂无商品</p>
+                        <p>请先<a href="javascript:void(0);">登录</a>添加商品到购物车</p>
                     </div>
                 </div>
             </div>
-            <nav>
-                <ul>
+        </div>
+    </div>
+    <!--商品分类及主导航菜单-->
+    <div class="baseTopNav">
+        <div class="wrap clear">
+            <a class="classBtn nav" href="javascript:void(0);">商品分类</a>
+            <a class="home nav" href="/">首页</a>
+            <div class="navBox">
+                <ul class="clear">
                     <!--导航菜单-->
                     <li th:each="menu: ${topMenuList}">
-                        <a href="javascript:void(0);" th:text="${menu.name}"></a>
+                        <a class="nav" href="javascript:void(0);" th:text="${menu.name}"></a>
                         <div th:if="${not #lists.isEmpty(menu.subMenus)}">
                             <a th:each="sub: ${menu.subMenus}" href="javascript:void(0);" th:text="${sub.name}"></a>
                         </div>
                     </li>
                 </ul>
-            </nav>
+            </div>
+            <a class="service nav" href="/">维修</a>
+        </div>
+        <div id="mainClassify" class="classifyBox">
+            <div class="clsTab">
+                <template v-for="(big,i) in classify">
+                    <a :class="{'on':i==0}" v-if="big.validFlag==1" :href="'/product/category.shtml?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>
     </div>
     <input type="hidden" th:value="${spiServer}" id="spiServer">

src/main/resources/templates/index.html

@@ -4,6 +4,7 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/headLink"></template>
+    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon">
     <link rel="stylesheet" th:href="@{/css/base.css(v=${version})}">
     <link rel="stylesheet" th:href="@{/css/index.css(v=${version})}">
 </head>
@@ -24,7 +25,7 @@
         <a class="next" href="javascript:void(0)"></a>
     </div>
     <!--页面主体数据-->
-    <div class="main">
+    <div class="wrap">
         <div th:each="item: ${pageFloors}">
             <div th:if="${item.type}==1">
                 <!--推荐专区-->