h5公共布局

src/main/java/com/caimei/www/controller/BaseController.java

@@ -6,6 +6,7 @@ import com.caimei.www.pojo.TopMenu;
 import com.caimei.www.service.BaseService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.server.reactive.ServerHttpRequest;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.ModelAttribute;
@@ -33,7 +34,10 @@ public class BaseController {
     }
 
 	@ModelAttribute
-	public Model init(final Model model) {
+	public Model init(final Model model, ServerHttpRequest request) {
+		// 判断请求设备
+		List<String> strings = request.getHeaders().get("User-Agent");
+        model.addAttribute("agent", strings.get(0));
 	    // 静态文件版本号
 	    model.addAttribute("version", buildTime);
 		// spi服务器地址
@@ -50,6 +54,7 @@ public class BaseController {
 		// 友情链接
 		List<FriendLink> friendLinks = baseService.getFriendLinks();
 		model.addAttribute("friendLinks", friendLinks);
+
 		return model;
 	}
 

src/main/resources/static/css/base.css → src/main/resources/static/css/base/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{width:100%;font-size:14px;color:#333;background:#EBECEF;}
+body{width:100%;min-height:100%;font-size:14px;color:#333;background:#EBECEF;}
 .clear{clear:both;}
 .clear:after{content:'';display:table;clear:both;}
 ::-ms-clear,::-ms-reveal{display:none;}

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

@@ -0,0 +1,81 @@
+@charset "utf-8";
+/**
+* 移动端
+*/
+.baseHeadCenter,#container,.footMain{width: 100%;overflow: hidden;}
+.jqSelect .pc,.baseHeadTop,.baseHeadCenter .headCart,.baseHeadCenter .hotword,.baseTopNav{display:none;}
+.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:-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}
+/* 头部 */
+.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;font-size: 0;}
+.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%}
+/* 分类 */
+
+
+
+
+
+
+
+
+
+/* 底部 */
+.footMain{width:100%;box-sizing:border-box;background:#4A4F58;color:#FFF}
+.footLink .list{width:100%;padding:0 3vw;box-sizing:border-box}
+.footLink .con{display:none}
+.footLink .tab,.footLink .con a{width:100%;box-sizing:border-box;display:block;font-size:3.4vw;height:10.6vw;line-height:10.6vw;border-top:1px solid #999FAB;position:relative}
+.footLink .list:first-child .tab{border-top:none}
+.footLink .con a{color:#999}
+.footLink .tab:after,.footLink .con a:after{font-size:5vw;position:absolute;top:2.1vw;right:0;width:6.4vw;height:6.4vw;line-height:6.4vw;text-align:center}
+.footLink .tab:after{content:'\271B';transition:all .8s}
+.footLink .con a:after{content:'\276F'}
+.footLink .list.on{background:#2D3036}
+.footLink .list.on .tab:after{transform:rotate(90deg);content:'\2758'}
+.footContact{text-align:center;padding:6.4vw 0}
+.footContact p{display:inline-block;width:26.6vw;background:#FFF;border-radius:2px;overflow:hidden;margin:0 1.2vw}
+.footContact p img{width:26.6vw;height:26.6vw}
+.footContact p span{line-height:8.8vw;white-space:nowrap;font-size:3.2vw;color:#4A4F58}
+.footContact .cellNumber{line-height:7.2vw;font-size:2.8vw;color:#FFF;padding-top:3vw}
+.footContact .cellNumber span{margin:0 2vw;display:inline-block}
+.footContact .cellNumber span:first-child{display:block}
+.footContact .cellNumber a{color:#FFF}
+.copyright{text-align:center;color:#FFF;font-size:2.8vw;padding-bottom:4vw}
+.copyright .item:before{width:10vw;height:10vw;font-size:0;background-position:0% 19.4%}
+.copyright .item span{display:block;line-height:5.5vw}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,133 @@
+@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;}
+.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}
+.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;font-size:0;}
+.baseHeadCenter .searchBtn:before{width:30px;height:30px;background-position: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{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:-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{width:20px;height:20px;vertical-align:middle;margin-left:1px}
+.baseTopNav .nav.home:after{background-position:-30px -31px}
+.baseTopNav .classBtn:after{background-position:0 -31px;transition: all .5s;}
+.baseTopNav .classBtn.on:after{transform:rotate(90deg);}
+.baseTopNav .navBox li:nth-of-type(1) .nav:after{background-position:-60px -31px}
+.baseTopNav .navBox li:nth-of-type(2) .nav:after{background-position:-90px -31px}
+.baseTopNav .navBox li:nth-of-type(3) .nav:after{background-position:-120px -31px}
+.baseTopNav .navBox li:nth-of-type(4) .nav:after{background-position:-150px -31px}
+.baseTopNav .navBox li:nth-of-type(5) .nav:after{background-position:-180px -31px}
+.baseTopNav .navBox li:nth-of-type(6) .nav:after{background-position:-210px -31px}
+.baseTopNav .navBox li:nth-of-type(7) .nav:after{background-position:-240px -31px}
+.baseTopNav .service:after{background-position:-270px -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{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}
+.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}
+.footContact .cellNumber span {margin: 0 12px;}
+.footContact .cellNumber a{color:#FFF;}
+.copyright{text-align:center;color:#FFF;font-size:12px;padding-bottom:25px}
+.copyright .item{white-space:nowrap;padding-left:35px;position:relative;float:left;margin-left:50%;transform:translateX(-50%)}
+.copyright .item:before{position:absolute;left:0;width:32px;height:32px;background-position:0 -140px}
+.copyright p span{margin:0 5px}
+.copyright p:nth-of-type(2) span:first-child{margin-right:50px}
+
+
+
+
+
+
+
+
+

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

@@ -1,62 +0,0 @@
-@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

@@ -1,128 +0,0 @@
-@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.h5.css → src/main/resources/static/css/index/index.h5.css

@@ -25,4 +25,3 @@ li{list-style:none;}
 
 
 
-

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

@@ -58,6 +58,29 @@ function jqHoverShow(tab, con){
         $(con).slideUp("fast");
     });
 }
+function jqMultipleShow(event, item, tab, con){
+    $("body").on(event, item+' '+tab, function(e){
+        e.stopPropagation();
+        $(this).parents(item).siblings(item).find(con).slideUp("fast");
+        $(this).parents(item).siblings(item).removeClass("on");
+        $(this).parents(item).siblings(item).find(tab).removeClass("on");
+        if($(this).hasClass("on")){
+            $(this).removeClass("on");
+            $(this).parents(item).removeClass("on");
+            $(this).parents(item).find(con).slideUp("fast");
+        }else{
+            $(this).addClass("on");
+            $(this).parents(item).addClass("on");
+            $(this).parents(item).find(con).slideDown("fast");
+        }
+    }).on(event,  item+' '+con, function(e){
+        e.stopPropagation();
+    }).on(event, function(){
+        $(item+' '+tab).removeClass("on");
+        $(item).removeClass("on");
+        $(item+' '+con).slideUp("fast");
+    });
+}
 function jqSelect(selectBox){
     $("body").on("click", selectBox, function(e){
         e.stopPropagation();
@@ -86,12 +109,18 @@ function jqSelect(selectBox){
 
 
 $(function(){
+    $(window).resize(function() {
+        var flag = (isPC && $(window).width()<=768) || (!isPC && $(window).width()>768)
+        if(flag){
+            window.location.reload();
+        }
+    });
     if(isPC){
         jqClickShow(".baseHeadTop .cTab", ".baseHeadTop .cShow");
         jqSelect(".jqSelect");
         jqHoverShow(".classBtn", "#mainClassify");
     }else{
-        alert(isPC);
+        jqMultipleShow("click", ".footLink .list", ".tab", ".con");
     }
 
 

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

@@ -31,17 +31,20 @@ var homeData = new Vue({
                             });
                         } 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'
-                              }
+                                loop : true,
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                                navigation: {
+                                    nextEl: '.swiper-button-next',
+                                    prevEl: '.swiper-button-prev'
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination',
+                                    type: 'bullets',
+                                    clickable :true
+                                }
                             });
                         }
                     },500);

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

@@ -1,22 +1,26 @@
 <footer xmlns:th="http://www.w3.org/1999/xhtml">
     <div class="footTop">
         <div class="wrap">
-            <span>国内首家美业共享平台</span>
-            <span>采美正品联盟货源保证</span>
-            <span>5000+美容机构入驻</span>
-            <span>100+国际国内知名供应商</span>
+            <span class="icon">国内首家美业共享平台</span>
+            <span class="icon">采美正品联盟货源保证</span>
+            <span class="icon">5000+美容机构入驻</span>
+            <span class="icon">100+国际国内知名供应商</span>
         </div>
     </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 class="list" th:each="type: ${helpPages}">
+                <span class="tab" th:text="${type.name}"></span>
+                <div class="con">
+                    <a th:each="page: ${type.helpPages}" th:href="@{/help.html( id=${page.id} )}" th:text="${page.name}"></a>
+                </div>
             </div>
-            <div>
-                <span>友情链接</span>
-                <a th:each="friend: ${friendLinks}" th:href="${friend.link}" th:text="${friend.name}"></a>
+            <div class="list">
+                <span class="tab">友情链接</span>
+                <div class="con">
+                    <a th:each="friend: ${friendLinks}" th:href="${friend.link}" th:text="${friend.name}"></a>
+                </div>
             </div>
         </div>
         <!--二维码-->
@@ -41,13 +45,15 @@
             </div>
             <div class="cellNumber">
                 <span>周一至周五 09:00-18:00</span>
-                <span>座机：0755-22907771</span>/<span>手机 : 153-3885-1365</span>
+                <span>座机：<a href="tel:075522907771">0755-22907771</a></span>/<span>手机：<a href="tel:15338851365">153-3885-1365</a></span>
             </div>
         </div>
         <!--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 class="wrap copyright clear">
+            <div class="item icon mIcon">
+                <p><span>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved.</span><span>深圳市采美信息技术有限公司</span></p>
+                <p><span>粤B1-20160129 备案号 粤ICP备14019824号</span><span>中华人民共和国增值电信业务经营许可证</span></p>
+            </div>
         </div>
     </div>
 </footer>

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

@@ -6,6 +6,6 @@
     <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)">
+    <link th:href="@{/css/base/base.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/base.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/base.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">

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

@@ -39,8 +39,8 @@
                 <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
             </a>
             <div class="mf h5Only mUserCenter">
-                <a href="javascript:void(0);" class="mUserIcon mIcon" title="个人中心"></a>
                 <a href="javascript:void(0);" class="mAddCart mIcon" title="购物车"></a>
+                <a href="javascript:void(0);" class="mUserIcon mIcon" title="个人中心"></a>
             </div>
             <div class="searchBox">
                 <div class="search">
@@ -56,7 +56,7 @@
                         </select>
                     </div>
                     <input class="keyword" type="text" placeholder="请输入关键字" />
-                    <a class="searchBtn mIcon" href="javascript:void(0);"></a>
+                    <a class="searchBtn icon mIcon" href="javascript:void(0);"></a>
                 </div>
                 <!-- 热门搜索关键词 -->
                 <div class="hotword">
@@ -67,7 +67,7 @@
                 </div>
             </div>
             <div class="headCart">
-                <a href="javascript:void(0);" class="addBtn">购物车</a>
+                <a href="javascript:void(0);" class="addBtn icon">购物车</a>
                 <div id="cartData" class="cartData">
                     <div class="empty">
                         <img src="/img/base/empty_cart.png">
@@ -121,4 +121,5 @@
         </div>
     </div>
     <input type="hidden" th:value="${spiServer}" id="spiServer">
+    <input type="hidden" th:value="${agent}" id="userAgent">
 </header>

src/main/resources/templates/index.html

@@ -4,9 +4,9 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/headLink"></template>
-    <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)">
+    <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/index/index.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/index/index.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->