PC,h5公共布局整理

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

@@ -1,7 +1,7 @@
 @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{font-size:14px;color:#333;background:#EBECEF;}
+body{width:100%;font-size:14px;color:#333;background:#EBECEF;}
 .clear{clear:both;}
 .clear:after{content:'';display:table;clear:both;}
 ::-ms-clear,::-ms-reveal{display:none;}
@@ -23,193 +23,5 @@ header li,footer li{list-style:none;}
   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){
-  body{width:100%;min-width:1200px;}
-  .h5Only{display:none;}
-  .jqSelect{position:relative;width:100px;height:32px;line-height:32px;border:1px solid #666;border-radius:2px;cursor:pointer}
-  .jqSelect:before{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:before{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){
-  .jqSelect .pc,
-  .baseHeadTop,
-  .baseHeadCenter .headCart,
-  .baseHeadCenter .hotword{display:none;}
-  .mf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-  .mfbt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-moz-justify-content:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
-  .mfi{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
-  .jqSelect{position:relative;}
-  .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}
-  .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}
-  /* 头部 */
-  .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 .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 .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}
-  .baseHeadCenter .search{width:93.4vw;height:9.6vw;margin:0 auto;border:1px solid #FFE6DC;border-radius:2px;position:relative}
-  .baseHeadCenter .search .jqSelect{width:27vw;height:9.6vw;position:relative}
-  .baseHeadCenter .search .jqSelect select{width:27vw;height:9.6vw;line-height:9.6vw;border:none;font-size:3.7vw;color:#4A4F58;padding:0 6vw 0 3vw}
-  .baseHeadCenter .search .jqSelect:before{right:4vw;line-height:9.6vw}
-  .baseHeadCenter .search .jqSelect:after{content:'';position:absolute;right:0;top:3.4vw;width:.5vw;height:2.8vw;background:#BEC2C9}
-  .baseHeadCenter .search .keyword{position:absolute;right:0;top:0;border:none;outline:none;width:66.4vw;height:9.6vw;line-height:9.6vw;font-size:3.7vw;color:#4A4F58;text-indent:2.6vw}
-  .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%}
-  /* 分类 */
-
-
-
-
-
-
-
-
-
-  /* 底部 */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-}

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

@@ -0,0 +1,62 @@
+@charset "utf-8";
+/**
+* 移动端
+*/
+
+  .jqSelect .pc,
+  .baseHeadTop,
+  .baseHeadCenter .headCart,
+  .baseHeadCenter .hotword,
+  .baseTopNav{display:none;}
+  .mf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+  .mfbt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-moz-justify-content:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
+  .mfi{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
+  .jqSelect{position:relative;}
+  .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}
+  .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}
+  /* 头部 */
+  .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 .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 .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}
+  .baseHeadCenter .search{width:93.4vw;height:9.6vw;margin:0 auto;border:1px solid #FFE6DC;border-radius:2px;position:relative}
+  .baseHeadCenter .search .jqSelect{width:27vw;height:9.6vw;position:relative}
+  .baseHeadCenter .search .jqSelect select{width:27vw;height:9.6vw;line-height:9.6vw;border:none;font-size:3.7vw;color:#4A4F58;padding:0 6vw 0 3vw}
+  .baseHeadCenter .search .jqSelect:before{right:4vw;line-height:9.6vw}
+  .baseHeadCenter .search .jqSelect:after{content:'';position:absolute;right:0;top:3.4vw;width:.5vw;height:2.8vw;background:#BEC2C9}
+  .baseHeadCenter .search .keyword{position:absolute;right:0;top:0;border:none;outline:none;width:66.4vw;height:9.6vw;line-height:9.6vw;font-size:3.7vw;color:#4A4F58;text-indent:2.6vw}
+  .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%}
+  /* 分类 */
+
+
+
+
+
+
+
+
+
+  /* 底部 */
+
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,128 @@
+@charset "utf-8";
+/**
+ * PC端
+ */
+
+  body{min-width:1200px;}
+  .h5Only{display:none;}
+  .jqSelect{position:relative;width:100px;height:32px;line-height:32px;border:1px solid #666;border-radius:2px;cursor:pointer}
+  .jqSelect:before{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:before{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}
+
+
+
+
+
+
+
+

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

@@ -1,52 +0,0 @@
-@charset "utf-8";
-li{list-style:none;}
-/**
- * PC端
- */
-@media screen and (min-width:768px){
-    .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}
-
-
-
-
-
-    .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}
-
-
-
-
-}
-/**
-* 移动端
-*/
-@media screen and (max-width:768px){
-
-
-
-}

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

@@ -0,0 +1,28 @@
+@charset "utf-8";
+/**
+* 移动端
+*/
+
+li{list-style:none;}
+/* 轮播 */
+#swiper-container{width:100%;height:48vw;overflow:hidden;position:relative}
+#swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
+#swiper-container .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}
+#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}
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,53 @@
+@charset "utf-8";
+
+/**
+ * PC端
+ */
+li{list-style:none;}
+    /* 轮播 */
+    #swiper-container{width:100%;height:510px;min-width:1200px;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%)}
+    #swiper-container .swiper-button-prev,#swiper-container .swiper-button-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}
+    #swiper-container .swiper-button-prev{left:5px;right:auto}
+    #swiper-container .swiper-button-next{left:auto;right:5px}
+    #swiper-container .swiper-button-prev:after{content:"\276C"}
+    #swiper-container .swiper-button-next:after{content:"\276D"}
+    #swiper-container .swiper-button-prev:hover,#swiper-container .swiper-button-next:hover{background:rgba(255,230,220,.6)}
+    #swiper-container .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:15px;z-index:1;text-align:center;font-size:0}
+    #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}
+
+
+
+
+
+    .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}
+
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -1,5 +1,6 @@
 var spiServer = $("#spiServer").val();
-var windowWidth = $(window).width();
+var isPC = ($(window).width()>768);
+var classifyData = [];
 var mainClassify = new Vue({
     el: '#mainClassify',
     data: {
@@ -11,13 +12,16 @@ 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);
+                classifyData = r.data;
+                if(isPC){
+                    setTimeout(function(){
+                        $('#mainClassify').slide({
+                            mainCell:".clsCon"
+                            ,titCell:".clsTab a"
+                            ,trigger: "mouseover"
+                        });
+                    },500);
+                }
             }
         });
     }
@@ -82,12 +86,12 @@ function jqSelect(selectBox){
 
 
 $(function(){
-    if(windowWidth>768){
+    if(isPC){
         jqClickShow(".baseHeadTop .cTab", ".baseHeadTop .cShow");
         jqSelect(".jqSelect");
         jqHoverShow(".classBtn", "#mainClassify");
     }else{
-        alert(windowWidth);
+        alert(isPC);
     }
 
 

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

@@ -1,4 +1,3 @@
-var spiServer = $("#spiServer").val();
 var homeData = new Vue({
     el: '#container',
     data: {
@@ -18,15 +17,33 @@ var homeData = new Vue({
                 if (r.code === 0 && r.data) {
                     _self.images = r.data;
                     setTimeout(function(){
-                        $('#slideBox').slide({
-                            mainCell:"ul.bd"
-                            ,titCell:"ul.hd li"
-                            ,effect: "leftLoop"
-                            ,interTime: 3000
-                            ,autoPlay: true
-                            ,autoPage: false
-                            ,trigger: "mouseover"
-                        });
+                        if (isPC) {
+                            $('#swiper-container').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,prevCell:".swiper-button-prev"
+		                        ,nextCell:".swiper-button-next"
+                                ,interTime: 3000
+                                ,autoPlay: true
+                                ,autoPage: false
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            var swiper = new Swiper('#swiper-container', {
+                              autoplay: {
+                                delay: 3000,
+                                disableOnInteraction: true,
+                              },
+                              navigation: {
+                                nextEl: '.swiper-button-next',
+                                prevEl: '.swiper-button-prev'
+                              },
+                              pagination: {
+                                el: '.swiper-pagination'
+                              }
+                            });
+                        }
                     },500);
                 }
             });

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

@@ -26,10 +26,10 @@
                     <img src="/img/base/qr_code_caimei.png"/>
                     <span>采美商城</span>
                 </p>
-                <p>
+                <!--<p>
                     <img src="/img/base/qr_code_applets.png"/>
                     <span>采美小程序</span>
-                </p>
+                </p>-->
                 <p>
                     <img src="/img/base/qr_code_hehe.png"/>
                     <span>呵呵商城</span>
@@ -51,6 +51,8 @@
         </div>
     </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>
-<script type="text/javascript" src="/lib/vue2.6.11.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.5.1.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/swiper.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.11.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/base.js(v=${version})}"></script>

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

@@ -1,8 +1,11 @@
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-status-bar-style" content="black">
-<meta http-equiv="X-UA-Compatible" content="ie=edge">
-<meta http-equiv="keywords" content="采美、易耗品商城、光电美容仪器项目、光电中心、皮肤管理中心、光电转型、美容院转型、光电美容">
-<meta http-equiv="description" content="采美365网——中国美业互联网共享经济平台，中国美业较大的光电美容干货信息平台，提供美容专业线客装产品、美容院消耗品、专业线院装产品、光电美容仪器、光电美容项目交易，同时提供采美公益大讲堂、光电美容干货、光电美容资讯、美业动态等行业信息。采集梦想，美启未来。">
-
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <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">
+    <link rel="stylesheet" type="text/css" th:href="@{/css/base.css(v=${version})}">
+    <link rel="stylesheet" type="text/css" th:href="@{/css/head.h5.css(v=${version})}" media="screen and (max-width:768px)">
+    <link rel="stylesheet" type="text/css" th:href="@{/css/head.pc.css(v=${version})}" media="screen and (min-width:768px)">

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

@@ -97,25 +97,27 @@
             <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/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>
+            <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>
                     </div>
                 </div>
-            </div>
+            </template>
         </div>
     </div>
     <input type="hidden" th:value="${spiServer}" id="spiServer">

src/main/resources/templates/index.html

@@ -4,9 +4,9 @@
 <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})}">
+    <link rel="stylesheet" type="text/css" href="/lib/swiper.min.css" media="screen and (max-width:768px)"/>
+    <link rel="stylesheet" th:href="@{/css/index.h5.css(v=${version})}" media="screen and (max-width:768px)">
+    <link rel="stylesheet" th:href="@{/css/index.pc.css(v=${version})}" media="screen and (min-width:768px)">
 </head>
 <body>
 <!-- 引用头部 -->
@@ -14,15 +14,15 @@
 
 <div id="container">
     <!--首页图片轮播-->
-    <div id="slideBox" class="slideBox">
-        <ul class="bd">
-            <li v-for="img in images">
+    <div id="swiper-container" class="swiper-container">
+        <ul class="swiper-wrapper">
+            <li class="swiper-slide" v-for="img in images">
                 <a :href="img.link"><img :src="img.image" :alt="img.title"></a>
             </li>
         </ul>
-        <ul class="hd"><li v-for="img in images"></li></ul>
-        <a class="prev" href="javascript:void(0)"></a>
-        <a class="next" href="javascript:void(0)"></a>
+        <div class="swiper-pagination"><span v-if="isPC" v-for="img in images"></span></div>
+        <a class="swiper-button-prev" href="javascript:void(0)"></a>
+        <a class="swiper-button-next" href="javascript:void(0)"></a>
     </div>
     <!--页面主体数据-->
     <div class="wrap">
@@ -157,8 +157,6 @@
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/base.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
-
 </body>
 </html>