Merge branch 'developerB' of http://git.caimei365.com/chao/caimei-caimei365-www into developerB

src/main/java/com/caimei/www/controller/unlimited/ProductController.java

@@ -24,6 +24,8 @@ public class ProductController extends BaseController {
 	private static final String PROMOTIONS_LIST_PATH = "product/promotions";
     private static final String INSTRUMENT_PAGE_PATH = "product/instrument";
     private static final String INSTRUMENT_LIST_PATH = "product/instruelist";
+    private static final String PRODUCT_PRODUCE = "product/produce";
+    private static final String PRODUCT_PRODUCE_LIST = "product/produce-list";
 
     private ProductService productService;
     @Autowired
@@ -76,4 +78,20 @@ public class ProductController extends BaseController {
     public String instruelist(){
         return INSTRUMENT_LIST_PATH;
     }
+
+    /**
+     * 仪器页
+     */
+    @GetMapping("/product/produce.html")
+    public String produce(){
+        return PRODUCT_PRODUCE;
+    }
+
+    /**
+     * 仪器列表页
+     */
+    @GetMapping("/product/produce-list.html")
+    public String producelist(){
+        return PRODUCT_PRODUCE_LIST;
+    }
 }

src/main/resources/config/dev/application-dev.yml

@@ -4,7 +4,7 @@ spring:
   #数据源连接--start
   datasource:
     #driverClassName: com.mysql.jdbc.Driver
-    url: jdbc:mysql://192.168.2.101:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+    url: jdbc:mysql://192.168.2.100:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
     username: developer
     password: 05bZ/OxTB:X+yd%1
 #    url: jdbc:mysql://119.29.0.46:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
@@ -53,7 +53,7 @@ logging:
 # 服务域名
 caimei:
   siteEnv: 0 #网站环境，（2：正式环境，1：测试环境，0：开发环境）
-  spiServer: http://localhost:8008
+  spiServer: http://1921.168.100.68:8008
   imageDomain: https://img-b.caimei365.com
   wwwDomain: https://www-b.caimei365.com
 

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

@@ -56,9 +56,10 @@ iframe{width:320px !important;height: 280px !important}
 .content-model .model-content .model-button .button{width: 120px;height: 32px;border-radius: 2px;background-color: #e15616;text-align: center;line-height: 32px;font-size: 14px;float: right;color: #FFFFFF;cursor: pointer;}
 
 /* 头部 */
-.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{width:100%;font-size:14px;background:#F7F7F7;}
+.baseHeadTop .header_top_left{float: left;font-size: 14px;line-height: 40px;color: #909090;}
+.baseHeadTop .header_top_ul{height:40px;line-height:40px;float: right;}
+.baseHeadTop .header_top_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}
@@ -70,10 +71,37 @@ iframe{width:320px !important;height: 280px !important}
 .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: 995;}
 .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}
+
+
+/* 购物车 */
+.baseHeadTop li.headCart{position:relative;}
+.baseHeadTop li.headCart .addBtn{display:inline-block;width:100%;height:44px;line-height:44px;box-sizing:border-box;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}
+.baseHeadTop li.headCart .addBtn:before{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:-30px -1px;margin-right:2px}
+.baseHeadTop li.headCart .addBtn em{color:#E15616;font-style:normal;margin-left:4px;}
+.baseHeadTop .cartData{display:none;position:absolute;right:0;top:40px;width:360px;box-sizing:border-box;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,0.2);border-radius:2px}
+.baseHeadTop .cartData .empty{padding:72px 10px;text-align:center;font-size:16px;line-height:26px;}
+.baseHeadTop .cartData .empty a{color:#E15616;margin:0 5px;border-bottom:1px solid #e15616}
+.baseHeadTop .cartData .empty img{display:block;margin:0 auto 28px auto;width:160px;height:136px}
+.baseHeadTop .cartMain{max-height:424px;overflow:auto}
+.baseHeadTop .cartItem{width:100%;height:auto;box-sizing:border-box;padding:10px 10px 10px 106px;position:relative}
+.baseHeadTop .cartItem img{position:absolute;left:10px;top:10px;width:86px;height:86px;box-shadow:0 0 2px #eee}
+.baseHeadTop .cartItem span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px}
+.baseHeadTop .cartItem span.unit{color:#93979F}
+.baseHeadTop .cartItem span.price{color:#F94B4B;margin-top:14px}
+.baseHeadTop .cartItem .delBtn{position:absolute;right:10px;bottom:0;width:30px;line-height:30px;text-align:center;font-size:0;cursor: pointer;}
+.baseHeadTop .cartItem .delBtn:before{content:'\2715';color:#93979F;font-size:14px}
+.baseHeadTop .cartBtm{border-top:1px solid #EBECEF;box-sizing:border-box;height:60px;line-height:24px;padding:6px 10px;position:relative;}
+.baseHeadTop .cartBtm .btn{position:absolute;right:10px;top:10px;height:40px;line-height:40px;border-radius:2px;padding:0 20px;background:#E15616;color:#FFF;font-size:14px}
+.baseHeadTop .cartBtm .btn:hover{opacity:.8}
+.baseHeadTop .cartBtm>span{display:block}
+.baseHeadTop .cartBtm>span em{font-style:normal;color:#F94B4B}
+.baseHeadTop .headCart:hover .cartData{display:block;-webkit-animation:fadeInDown .4s;animation:fadeInDown .4s}
+
+
 .baseHeadCenter,.baseTopNav{width:100%;background:#FFF}
-.baseHeadCenter .wrap{height:82px;box-sizing:border-box;padding-top:10px}
+.baseHeadCenter .wrap{height: 100px;box-sizing: border-box;padding: 10px 0;}
 .baseHeadCenter .logo{float:left;width:178px;height:44px;margin-right:122px}
-.baseHeadCenter .searchBox{width:684px;float:left}
+.baseHeadCenter .searchBox{width:668px;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}
@@ -83,9 +111,18 @@ iframe{width:320px !important;height: 280px !important}
 .baseHeadCenter .keyword:focus{outline:none;border:none}
 .baseHeadCenter .searchBtn{position:absolute;right: 0;top: 0;font-size:0;padding: 7px 12px;height: 30px;line-height: 30px;}
 .baseHeadCenter .searchBtn:before{width: 30px;height: 30px;background-position: 4px 4px;}
-.baseHeadCenter .hotKey{color:#FFB496;font-size:12px;line-height:24px}
+.baseHeadCenter .hotKey{color:#FFB496;font-size:12px;line-height:28px}
 .baseHeadCenter .hotKey .word{padding:0 5px;font-style:normal;cursor:pointer;}
 .baseHeadCenter .hotKey .word:hover{color:#E15616}
+.baseHeadCenter .wechat_qrcode{width: 180px;height: 100%;float: left;margin-left: 33px;}
+.baseHeadCenter .wechat_qrcode .q_item{width: 60px;height: 100%;float: left;margin: 0 15px;position: relative;cursor: pointer;}
+.baseHeadCenter .wechat_qrcode .q_item:hover .q_item_code{display: block;}
+.baseHeadCenter .wechat_qrcode .q_item p{font-size: 12px;color: #909090;line-height: 20px;text-align: center;}
+.baseHeadCenter .wechat_qrcode .q_item_icon{width: 48px;height: 48px;border: 1px solid #ffe6dc;border-radius: 2px;margin: 0 auto;}
+.baseHeadCenter .wechat_qrcode .q_item_code{width: 128px;height: 128px;border-radius: 2px;position: absolute;top: 20px;left:24px;z-index: 999;display: none;box-shadow: 0px 3px 6px 0px rgba(74, 79, 88, 0.1);}
+.baseHeadCenter .wechat_qrcode .q_item_icon img{width: 48px;height: 48px;display: block;border-radius: 2px;}
+.baseHeadCenter .wechat_qrcode .q_item_code img{width: 128px;height: 128px;display: block;border-radius: 2px;}
+
 .baseHeadCenter.account{border-bottom:1px solid #E15616}
 .baseHeadCenter.account .wrap{padding-top:20px}
 .baseHeadCenter.account .accountLogin{font-size:20px;float:right;line-height:44px}
@@ -103,29 +140,6 @@ iframe{width:320px !important;height: 280px !important}
 .baseHeadCenter.article .search:before{display:none}
 .baseHeadCenter.article .keyword{width:100%}
 
-/* 购物车 */
-.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 .headCart .addBtn em{color:#E15616;font-style:normal;margin-left:4px;}
-.baseHeadCenter .cartData{display:none;position:absolute;right:0;top:44px;width:360px;box-sizing:border-box;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,0.2);border-radius:2px}
-.baseHeadCenter .cartData .empty{padding:72px 10px;text-align:center;font-size:16px;line-height:26px;}
-.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 .cartMain{max-height:424px;overflow:auto}
-.baseHeadCenter .cartItem{width:100%;height:auto;box-sizing:border-box;padding:10px 10px 10px 106px;position:relative}
-.baseHeadCenter .cartItem img{position:absolute;left:10px;top:10px;width:86px;height:86px;box-shadow:0 0 2px #eee}
-.baseHeadCenter .cartItem span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px}
-.baseHeadCenter .cartItem span.unit{color:#93979F}
-.baseHeadCenter .cartItem span.price{color:#F94B4B;margin-top:14px}
-.baseHeadCenter .cartItem .delBtn{position:absolute;right:10px;bottom:0;width:30px;line-height:30px;text-align:center;font-size:0;cursor: pointer;}
-.baseHeadCenter .cartItem .delBtn:before{content:'\2715';color:#93979F;font-size:14px}
-.baseHeadCenter .cartBtm{border-top:1px solid #EBECEF;box-sizing:border-box;height:60px;line-height:24px;padding:6px 10px;position:relative;}
-.baseHeadCenter .cartBtm .btn{position:absolute;right:10px;top:10px;height:40px;line-height:40px;border-radius:2px;padding:0 20px;background:#E15616;color:#FFF;font-size:14px}
-.baseHeadCenter .cartBtm .btn:hover{opacity:.8}
-.baseHeadCenter .cartBtm>span{display:block}
-.baseHeadCenter .cartBtm>span em{font-style:normal;color:#F94B4B}
-.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;}
@@ -137,6 +151,7 @@ iframe{width:320px !important;height: 280px !important}
 .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 .classBtn:hover .baseTopNav .classifyBox{display: block;}
 .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}
@@ -148,37 +163,46 @@ iframe{width:320px !important;height: 280px !important}
 .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%);box-shadow:0 3px 6px rgba(45,48,54,.2);}
+.baseTopNav .classifyBox{display:block;position:absolute;left:0;top:44px;z-index:990;min-height: 510px;padding: 0 0 20px 0;}
 /* 分类 */
-.classifyBox{width:1184px;margin:0 auto;box-sizing:border-box;padding:8px 16px;background:#FFF;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;cursor:default;height:100%;padding:0 10px 0 10px;font-size:16px;font-weight:bold;color:#2D3036;border-bottom:1px solid transparent;margin-right: 30px}
+.classifyBox{margin:0 auto;box-sizing:border-box;background:rgba(255,255,255,0.90);border-radius:0 0 2px 2px}
+.classifyBox .clsTab{height:56px;line-height:56px;white-space:nowrap;border-bottom:1px solid #FFE6DC;padding:0 30px;}
+.classifyBox .clsTab a{display:inline-block;height:100%;padding:0 10px 0 10px;font-size:16px;font-weight:bold;color:#2D3036;border-bottom:1px solid transparent;margin-right: 30px}
 .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;color: #627386;}
-.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: #627386;}
-.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{background:#fbfafa}
+.classifyBox .clsCon{padding:20px 0;box-sizing: border-box;}
+.classifyBox .tabItem_lift{width: 152px;float: left;border-right: 1px solid #FFE6DC;}
+.classifyBox .tabItem_lift a{display:inline-block;width:100%;line-height:40px;box-sizing:border-box;color: #627386;padding:10px 0 10px 30px;float: left;transform: translateX(-3px);}
+.classifyBox .tabItem_lift .tabItem_lift_icon{width: 20px;height: 20px;display: block;float: left;}
+.classifyBox .tabItem_lift .tabItem_lift_p{float: left;margin-left: 8px;line-height: 20px;}
+.classifyBox .tabItem_lift a.on{background: #fef6f3;color: #E15616;border-color: #ffffff;transform: translateX(0);transition: all 0.8s;}
+.classifyBox .tabItem_right{float: left;box-sizing: border-box;min-width: 280px;}
+.classifyBox .tabItem_right .tabItem_right_content {display: none;}
+.classifyBox .tabItem_right .tabItem_right_content.on{display: block;}
+.classifyBox .tabItem_right .line{position:relative;line-height:40px;height: 40px;}
+.classifyBox .tabItem_right .lft{float: left;color:#000;line-height:40px;height: 40px;width: 150px;box-sizing: border-box;padding: 0 16px;font-weight: bold;}
+.classifyBox .tabItem_right .lft.none{width: 100px;}
+.classifyBox .tabItem_right .lft.none a{color: #E15616;}
+.classifyBox .tabItem_right .lft a{display:inline-block;width:100%;line-height:40px;box-sizing:border-box;color: #627386;}
+.classifyBox .tabItem_right .lft a p{text-align: left;float: left;}
+.classifyBox .tabItem_right .lft a span{text-align: right;float: right;display: inline-block;}
+.classifyBox .tabItem_right .rgt{color:#666;position:relative;box-sizing: border-box;padding: 0 10px;height: 100%;line-height: 40px;float: left;}
+.classifyBox .tabItem_right .rgt a{display:inline-block;height:44x;line-height:44px;padding:0 22px;cursor:pointer;color: #627386;box-sizing: border-box;border-bottom: 1px solid #FFFFFF;}
+.classifyBox .tabItem_right .rgt a.on,.classifyBox .clsCon .rgt a:hover{color:#e15616;border-color: #E15616;}
+.classifyBox .tabItem_right .rgt a p{text-align: left;float: left;}
+.classifyBox .tabItem_right .rgt a span{text-align: right;float: right;display: inline-block;}
+/*.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 .tabItem_right .line:hover .lft a,.classifyBox .line.on .lft a{color:#E15616}
+.classifyBox .tabItem_right .line:hover{background:#fbfafa}
 /* 底部 */
 .footTop{width:100%;height:60px;padding:20px 0;margin-top:30px;background:#FFF}
 .footTop .wrap{text-align:justify;font-size:0;}
 .footTop .wrap:after{content: '';display:inline-block;width:100%;}
-.footTop .wrap span{display:inline-block;height:60px;line-height:60px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center}
+.footTop .wrap span{display:inline-block;height:60px;line-height:60px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center;}
 .footTop .wrap span:before{width:60px;height:60px;vertical-align:middle;margin-right:5px;}
-.footTop .wrap span:nth-of-type(1):before{background-position:-5px -65px}
-.footTop .wrap span:nth-of-type(2):before{background-position:-85px -65px}
-.footTop .wrap span:nth-of-type(3):before{background-position:-165px -65px}
-.footTop .wrap span:nth-of-type(4):before{background-position:-245px -65px}
+.footTop .wrap span:nth-of-type(1):before{background-position:-5px -65px;}
+.footTop .wrap span:nth-of-type(2):before{background-position:-85px -65px;}
+.footTop .wrap span:nth-of-type(3):before{background-position:-165px -65px;}
+.footTop .wrap span:nth-of-type(4):before{background-position:-245px -65px;}
 .footMain{width:100%;background:#4A4F58}
 .footLink{display:table;padding:12px 0}
 .footLink>div{display:table-cell;width:171px}
@@ -288,8 +312,8 @@ iframe{width:320px !important;height: 280px !important}
 #scrollTop .item:hover .phoneHover{display:block}
 /* 活动标签，阶梯价格 */
 .priceTag{position:relative}
-.priceTag .tag,.listTag{display:inline-block;height:24px;line-height:24px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#E15616;cursor:pointer;background:#fff;padding:0 24px 0 10px;position:relative;font-style:normal}
-.listTag{float:right;padding:0 12px;margin:12px 15px 0 0;}
+.priceTag .tag,.listTag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#E15616;cursor:pointer;background:#fff;padding:0 24px 0 10px;position:relative;font-style:normal}
+.listTag{float:right;padding:0 5px;margin:12px 15px 0 0;}
 .priceTag .tag:before{width:24px;height:24px;background-position:-88px 3px;position:absolute;right:0;top:0}
 .priceTag .tag.on:before{background-position:-117px 3px}
 .priceTag .ladder,.priceTag .promotion{position:absolute;background:#fff;box-shadow:0 3px 6px 0 #d7dfec;border-radius:2px;line-height:42px;left:0;top:28px;z-index:9;transition:all .8s;display:none}

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

@@ -4,7 +4,7 @@
  */
 li{list-style:none;}
 /* 轮播 */
-#swiper-container{width:100%;height:510px;min-width:1184px;overflow:hidden;position:relative}
+#swiper-container{width:100%;height:510px;min-width:1184px;overflow:hidden;position:relative;}
 #swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
 #swiper-container .tempWrap{margin:0 auto;}
 #swiper-container .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden}

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

@@ -0,0 +1,471 @@
+@charset "utf-8";
+/**
+ * PC端
+ */
+li{list-style:none;}
+/* 轮播 */
+#swiper-container{width:100%;height:510px;min-width:1184px;overflow:hidden;position:relative;float: left;}
+#swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
+#swiper-container .tempWrap{margin:0 auto;}
+#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;max-width:none;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}
+
+.section_container{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+.section_container .inner{
+    width:1184px;
+    margin: 0 auto;
+}
+/*左右楼层*/
+.section_left{
+    width: 900px;
+    float:left;
+}
+.section_page{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+.section_page .section_page_title{
+    width: 100%;
+    height: 103px;
+    box-sizing: border-box;
+    padding: 31px 0 16px 0;
+}
+.section_page .section_page_title h1{
+    font-size: 24px;
+    line-height: 31px;
+    text-align: left;
+    color: #4a4f58;
+}
+.section_page .section_page_title p{
+    font-size: 14px;
+    line-height: 19px;
+    text-align: left;
+    color: #93979f;
+    margin-top: 6px;
+}
+.section_page .section_page_main{
+    width: 100%;
+    float: left;
+    height: 568px;
+    overflow: hidden;
+    transition: all 0.6s;
+}
+.section_page .section_page_main.type_03{
+    height: 704px;
+}
+.section_page .section_page_main.max{
+    height:auto;
+}
+.section_page  .page_main_item{
+    width: 164px;
+    height: 268px;
+    float: left;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    background-color: #FFFFFF;
+    transition:all 0.4s;
+    display: block;
+}
+.section_page  .page_main_item.ad_04{
+    border-radius: 2px;
+}
+.section_page  .page_main_item.ad_04:hover{
+    transform:translateY(-5px);
+    box-shadow:0 12px 12px rgba(102,102,102,0.1),0 14px 14px rgba(102,102,102,0.1),0 16px 16px rgba(102,102,102,0.1);
+}
+.section_page .page_main_item.ad_01{
+    width: 884px;
+    height: 120px;
+}
+.section_page .page_main_item.ad_02{
+    width: 524px;
+}
+.section_page .page_main_item.ad_03{
+    width: 344px;
+}
+.section_page .page_main_item_adv{
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+.section_page .page_main_image{
+    width: 164px;
+    height: 164px;
+    display: block;
+    float: left;
+    border-radius: 2px 2px 0 0;
+}
+.section_page .page_main_text{
+    width: 100%;
+    height: 42px;
+    float: left;
+    box-sizing: border-box;
+    margin-top: 8px;
+    padding: 0 8px;
+    white-space: normal;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: 21px;
+}
+.section_page .page_main_price{
+    width: 100%;
+    height: 54px;
+    float: left;
+    box-sizing: border-box;
+    padding: 0 8px;
+}
+.section_page .page_main_price .main_price_text{
+    width: 100%;
+    height: 54px;
+    float: left;
+    box-sizing: border-box;
+}
+.section_page .page_main_price .main_price_unde{
+    width: 100%;
+    height: 31px;
+    line-height: 31px;
+    font-size: 14px;
+    color: #4a4f58;
+    text-align: left;
+    float: left;
+}
+.section_page .page_main_price .main_price_show{
+    width: 100%;
+    height: 31px;
+    line-height: 31px;
+    font-size: 14px;
+    color: #f94b4b;
+    text-align: left;
+    float: left;
+}
+.section_page .page_main_price .main_price_show.none{
+    color: #999999;
+    text-decoration: line-through;
+}
+.section_page .page_main_price .price_text_tag{
+    width: 100%;
+    height: 22px;
+    box-sizing: border-box;
+    float: left;
+    margin-top: 3px;
+}
+.section_page .page_main_price .price_text_tag .listTag{
+    margin:0;
+    float: left;
+}
+.section_page .page_main_price .main_price_none{
+    width: 100%;
+    height: 54px;
+    padding: 16px 0;
+    box-sizing: border-box;
+}
+.section_page .page_main_price .main_price_none .listTag{
+    margin:0;
+}
+.section_page .page_main_price .price_grade{
+    float: left;
+    margin:0;
+    height: 22px;
+    line-height: 22px;
+    color: #4A4F58;
+    font-style: normal;
+    font-size: 14px;
+}
+.section_page .page_main_price .price_grade span{
+    display: inline-block;
+    float: left;
+}
+.section_page .page_main_price .icon:before{
+    width: 67px;
+    height: 22px;
+}
+.section_page .page_main_price .price_grade_1:before{
+    background-position:0 -714px;
+}
+.section_page .page_main_price .price_grade_2:before{
+    background-position:0 -744px;
+}
+.section_page .page_main_price .price_grade_3:before{
+    background-position:0 -774px;
+}
+.section_page .page_main_price .price_grade_4:before{
+    background-position:0 -804px;
+}
+.section_page .page_main_price .price_grade_5:before{
+    background-position:0 -834px;
+}
+.section_page .section_page_more{
+    width: 100%;
+    height: 32px;
+    float: left;
+}
+.section_page .section_page_more .more{
+    width: 98px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+    margin:  0 auto;
+    border-radius: 2px;
+    border: 1px solid #cccccc;
+    color: #909090;
+    text-align: left;
+    transition: all 0.2s;
+    cursor: pointer;
+    padding-left: 15px;
+    box-sizing: border-box;
+    position: relative;
+}
+.section_page .section_page_more .more .icon:before{
+    background-position: -93px 7px;
+    width: 20px;
+    height: 32px;
+    right: 0;
+    position: absolute;
+}
+.section_page .section_page_more .more:hover{
+    color: #E15616;
+    border-color: #E15616;
+}
+.section_page .section_page_more .more:hover .icon:before{
+    background-position: -153px 7px;
+}
+/*地库供应商*/
+.section_page .section_page_bottom{
+    width: 100%;
+    float: left;
+    height: auto;
+}
+.section_page  .page_main_li{
+    width: 134px;
+    height: 166px;
+    float: left;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    background-color: #FFFFFF;
+    transition:all 0.4s;
+    display: block;
+}
+.section_page .page_main_li.ad_01{
+    width: 884px;
+    height: 184px;
+}
+.section_page  .page_main_li.ad_02:hover{
+    transform:translateY(-5px);
+    box-shadow:0 12px 12px rgba(102,102,102,0.1),0 14px 14px rgba(102,102,102,0.1),0 16px 16px rgba(102,102,102,0.1);
+}
+.section_page  .page_main_li.ad_02:hover .page_main_name{
+    color: #E15616;
+    font-weight: bold;
+}
+.section_page  .page_main_li .page_main_logo{
+    width: 100%;
+    height: 134px;
+    display: block;
+    float: left;
+}
+.section_page  .page_main_li .page_main_name{
+    width: 100%;
+    height: 32px;
+    float: left;
+    line-height: 32px;
+    text-align: center;
+    font-size: 14px;
+    color: #4a4f58;
+    background-color: #f9f9f9;
+}
+/*右边区域*/
+.section_right{
+    width: 284px;
+    float: right;
+    box-sizing: border-box;
+    padding-top: 103px;
+}
+.section_right .section_right_item{
+    width: 100%;
+    height: auto;
+    background-color: #FFFFFF;
+    float: left;
+    margin-bottom: 16px;
+    padding: 16px;
+    box-sizing: border-box;
+    border-radius: 2px;
+}
+.section_right .right_item_title{
+    width: 100%;
+    height: 22px;
+    line-height: 22px;
+    float: left;
+    margin-bottom: 8px;
+}
+.section_right .right_item_title p{
+    float: left;
+    font-size: 16px;
+    font-weight: bold;
+    color: #4a4f58;
+    text-align: left;
+}
+.section_right .right_item_title a{
+    display: inline-block;
+    float: right;
+    font-size: 12px;
+    color: #909090;
+    text-align: right;
+}
+.section_right .right_item_title a:hover{
+    color: #E15616;
+    text-decoration: underline;
+}
+.section_right .right_item_main{
+    width: 100%;
+    height: auto;
+}
+.section_right .item_banner{
+    width: 252px;
+    height: 252px;
+    display: block;
+    float: left;
+    position: relative;
+    margin-bottom: 10px;
+}
+.section_right .item_banner img{
+    width: 252px;
+    height: 252px;
+    display: block;
+}
+.section_right .item_banner .name{
+    width: 100%;
+    height: 32px;
+    position: absolute;
+    bottom: 0;
+    background: rgba(0,0,0,0.4);
+    line-height: 32px;
+    font-size: 16px;
+    color: #ffffff;
+    text-align: left;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+.section_right .item_banner .statu{
+    width: 72px;
+    height: 22px;
+    border-radius: 11px;
+    background: rgba(0,0,0,0.4);
+    position: absolute;
+    left: 8px;
+    top: 8px;
+}
+.section_right .item_banner .statu i{
+    display: block;
+    width: 14px;
+    height: 14px;
+    float: left;
+    margin: 4px 0 0 4px;
+}
+.section_right .item_banner .statu .icon-wart{
+    background: url("/img/live/icon-live.png");
+    background-size: cover;
+}
+.section_right .item_banner .statu .icon-live{
+    background: url("/img/live/icon-liveing.gif");
+    background-size: cover;
+}
+.section_right .item_banner .statu .icon-end{
+    width: 11px;
+    height: 12px;
+    margin: 5px 0 0 5px;
+    background: url("/img/live/icon-lives.png");
+    background-size: cover;
+}
+.section_right .item_banner .statu p{
+    float: left;
+    width: 50px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 22px;
+    color: #FFF;
+}
+.section_right  .item_text{
+    display: block;
+    width: 100%;
+    height:26px;
+    line-height: 26px;
+    font-size: 14px;
+    color: #4a4f58;
+    margin: 3px 0;
+}
+.section_right  .item_text .item_text_name{
+    width: 164px;
+    text-align: left;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    padding-left: 12px;
+    box-sizing: border-box;
+    float: left;
+    position: relative;
+}
+.section_right  .item_text .item_text_name:before{
+    content: '';
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: #cccccc;
+    position: absolute;
+    left: 0;
+    top: 11px;
+}
+.section_right  .item_text .item_text_time{
+    float: right;
+}
+.section_right  .item_text:hover{
+    color: #E15616;
+    text-decoration: underline;
+}
+.section_right  .item_text:hover .item_text_name:before{
+    background-color: #E15616;
+}
+footer{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+
+
+
+
+/* 首页右侧导航 */
+#sideNav{display:none;position:fixed;right:50%;margin-right:-700px;width:88px;z-index:9999;bottom:220px;}
+#sideNav .item{width:100%;background-color:#fff;box-sizing:border-box;text-align:center;box-shadow:0 2px 4px rgb(254,246,243);border-radius:2px;margin-bottom:10px;font-size:12px;position:relative}
+#sideNav .item>a{display:block;width:100%;box-sizing:border-box;padding:8px 6px;line-height:14px;position:relative}
+#sideNav .item>a:before{content:'';position:absolute;width:70px;left:9px;top:0;border-top:1px solid #FEF6F3}
+#sideNav .item>a:first-child:before{display:none}
+#sideNav .item>a.on{background:#FEF6F3;color:#E15616}
+
+
+/* 中屏导航与广告显示 */
+@media screen and (max-width:1420px){
+    #sideNav,#scrollTop{right:10px;margin-right:0;opacity:.9;}
+    #advertising{left:10px;margin-left:0;opacity:.9;}
+}

src/main/resources/static/css/product/instruement-list.css

@@ -0,0 +1,116 @@
+@media screen and (min-width:768px){
+#productList{width: 1184px;margin:32px auto}
+.crumbs-nav{height: 40px}
+.crumbs-nav .crumbs-link{color:#4a4f58 }
+.sortBox .down{position:relative;margin:0 8px}
+.sortBox .down:before,.sortBox .down:after{position:absolute;right:32px;content:'';width:0;height:0;border-style:solid}
+.sortBox .down:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:25px}
+.sortBox .down:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:31px}
+.sortBox .down.up:before{border-bottom-color:#E15616}
+.sortBox .down.up:after{border-top-color:#E15616;opacity:.3}
+.classifyBox .classification div{
+    display: inline-block;
+    line-height: 64px;
+    text-align: center;
+    color: #4a4f58;
+    font-size: 16px;
+    cursor: pointer;
+}
+.classifyBox .classification {
+    border-bottom: 1px solid #f7f7f7;
+}
+.classifyBox .classification .class-title{
+    border-right: 1px solid #f7f7f7;
+    width: 127px;
+}
+.classifyBox .classification .class-nav-main{
+}
+.classifyBox .classification .class-nav-main div.on{
+    color: #e15616;
+}
+.classifyBox .classification .class-nav-main div{
+    width: 127px;
+}
+.crumbs-nav >div{display: inline-block}
+.crumbs-nav-item{
+    display: inline-block;
+    padding: 0 12px;
+    border: 1px solid #cccccc;
+    line-height: 24px;
+    margin-right: 16px;
+    color: #909090;
+    border-radius: 2px;
+    cursor: pointer;
+}
+.crumbs-nav-item.on{
+color: #e15616;
+border: 1px solid #e15616;
+}
+.sortBox .on{background:#ffe6dc }
+.list-container{
+    margin-top: 32px;
+    width: 1200px;
+}
+.list-container ul li.productItem {
+    width: 184px;
+    height: 288px;
+    float: left;
+    background: #fff;
+    position: relative;
+    margin: 0 16px 16px 0;
+    overflow: hidden;
+    float: left;
+}
+.list-container ul li img {
+    width: 100%;
+    height: 184px;
+}
+.list-container ul li .name{
+    display: block;
+    padding: 0 16px;
+    height: 40px;
+    line-height: 21px;
+    vertical-align: middle;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-inline-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical
+}
+.productItem .price{
+    border: 0;
+}
+.productItem .price .icon:before{
+    width: 63px;
+}
+.productItem .price .icon.i5:before {
+    background-position: -2px -832px;
+}
+.productItem .price .icon.i1:before {
+    background-position: -2px -712px;
+}
+.productItem .price .icon.i2:before {
+    background-position: -2px -742px;
+}
+.productItem .price .icon.i3:before {
+    background-position: -2px -772px;
+}
+.productItem .price .icon.i4:before {
+    background-position: -2px -802px;
+}
+.listTag{
+   margin: 12px 8px 0 0;
+   padding: 0 2px;
+}
+.productItem .image .icon{
+    position: inherit;
+}
+}
+
+
+
+@media screen and (max-width:768px){
+
+}
+

src/main/resources/static/css/product/instruement.css

@@ -1,13 +1,187 @@
-#container{
-width: 1184px;
-margin: auto;
+@media screen and (min-width:768px) {
+#container {width: 1184px;margin: 32px auto;overflow: hidden;}
+#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
+#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
+.instrue-left {width: 900px;float: left;}
+.normal-nav{margin-top: 10px}
+.instrue-left .top-category .normal-nav .nav-list:hover{border: 1px solid #e15616;
+    transform:translateY(-5px);
+    box-shadow:0 6px 6px rgba(102,102,102,0.1),0 6px 6px rgba(102,102,102,0.1),0 6px 6px rgba(102,102,102,0.1);
+    }
+.instrue-left .top-category .normal-nav .nav-list {border:1px solid #fff;display: inline-block;margin: 0 16px 16px 0;width: 132px;height: 88px;background: #fff;text-align: center;color: #4a4f58;font-size: 16px;line-height: 130px;cursor: pointer;}
+.instrue-left .top-category .normal-nav .nav-list.active {border: 1px solid #e15616;color: #e15616;}
+.instrue-right {float: right;width: 252px;background: #fff;padding: 16px;}
+.instrue-right .wrap_tittle{
+    padding-bottom: 10px;
+    color: #4a4f58;
+    font-size: 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #f5f5f5;
+    position: relative;
 }
-.instrue-left{
-  width: 884px;
+.instrue-right .hot-search{
+    padding:24px 0px 0px 0px;
+}
+.instrue-right .hot-search ul .hot-list{
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    background: #f7f7f7;
+    margin: 0 12px 12px 0;
+    padding: 0 13px;
+    color: #4a4f58;
+    cursor: pointer;
+}
+.productItem:hover .name{
+    color: #e15616;
+}
+.productItem:hover{
+    transform:translateY(-5px);
+    box-shadow:0 12px 12px rgba(102,102,102,0.1),0 14px 14px rgba(102,102,102,0.1),0 16px 16px rgba(102,102,102,0.1);
+}
+.instrue-right .wrap_tittle .line{
+    height: 2px;
+    width: 16px;
+    background: #e15616;
+    display: block;
+    position: absolute;
+    bottom: 0
+}
+.floorTit {
+    padding: 24px 0 16px 0;
+    position: relative;
+}
+.floorTit h2, .floorTit h3 {
+    font-weight: bold;
+    color: #4a4f58;
+    font-size: 24px;
+    line-height: 40px;
+}
+.floorTit h5 {
+    font-weight: normal;
+    color:#93979f;
+    font-size: 14px;
+    line-height: 16px;
+}
+.hotList ul li.img01 {
+    width: 524px;
+}
+.hotList ul li.img02{
+    width: 344px;
+}
+.hotList ul li.imgbaner{
+    width: 884px;
+    height: 120px;
+}
+.hotList ul li img {
+    width: 100%;
+    height: 100%;
+}
+.hotList ul{
+    height: 560px;
+    overflow: hidden;
+}
+.hotList ul.type{
+    height: 704px;
+}
+.hotList ul.height{
+    height: auto;
+}
+.hotList ul li {
+    width: 164px;
+    height: 268px;
+    float: left;
+    background: #fff;
+    position: relative;
+    margin: 0 16px 16px 0;
+    overflow: hidden;
     float: left;
+    transition: all 0.4s;
+}
+.collocation ul li{
+    height: 218px;
+}
+.swiper-container ul li{
     margin-right: 16px;
 }
-.instrue-right{
-float: right;
-width: 284px;
+.swiper-container ul{
+   height: auto;
+}
+.collocation ul{
+    height: 468px;
+}
+.hotList ul li a{
+    display: block;
+}
+.hotList ul .productItem img{
+    width: 100%;
+    height: 164px;
+}
+.productItem .name {
+    display: block;
+    padding: 0 16px;
+    height: 40px;
+    line-height: 21px;
+    vertical-align: middle;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-inline-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical
+}
+.productItem .price{
+    border: 0;
+}
+.listTag{
+   margin: 12px 8px 0 0;
+   padding: 0 2px;
+}
+.productItem .price .icon:before{
+    width: 63px;
+}
+.productItem .price .icon.i5:before {
+    background-position: -2px -832px;
+}
+.productItem .price .icon.i1:before {
+    background-position: -2px -712px;
+}
+.productItem .price .icon.i2:before {
+    background-position: -2px -742px;
+}
+.productItem .price .icon.i3:before {
+    background-position: -2px -772px;
+}
+.productItem .price .icon.i4:before {
+    background-position: -2px -802px;
+}
+.unfold{
+    width: 83px;
+    height: 32px;
+    border: 1px solid #cccccc;
+    line-height: 32px;
+    margin: 10px auto;
+    border-radius: 2px;
+    color: #909090;
+    padding-left: 13px;
+    cursor: pointer;
+    position: relative;
+}
+.icon.more:before{
+    background-position: -93px 7px;
+    width: 20px;
+    height: 32px;
+    right: 0;
+    position: absolute
+}
+.unfold:hover{
+    color: #E15616;
+    border-color: #E15616;
+}
+.productItem .price em.p{
+    color:#f94b4b ;
+}
+
 }

src/main/resources/static/css/product/produce-list.css

@@ -0,0 +1,201 @@
+@media screen and (min-width:768px) {
+#container {
+    width: 1184px;
+    margin: 32px auto;
+    overflow: hidden;
+}
+
+.instrue-left {
+    width: 884px;
+    float: left;
+    margin-right: 16px;
+}
+
+.instrue-left .top-category .normal-nav .nav-list {
+    display: inline-block;
+    margin: 0 16px 16px 0;
+    width: 134px;
+    height: 88px;
+    background: #fff;
+    text-align: center;
+    color: #4a4f58;
+    font-size: 16px;
+    line-height: 130px;
+    cursor: pointer;
+}
+
+.instrue-left .top-category .normal-nav .nav-list.active {
+    border: 1px solid #e15616;
+    color: #e15616;
+}
+
+.instrue-left .top-category .normal-nav .nav-list:nth-child(6) {
+    margin-right: 0
+}
+
+.instrue-right {
+    float: right;
+    width: 252px;
+    background: #fff;
+    padding: 16px;
+}
+.instrue-right .wrap_tittle{
+    padding-bottom: 10px;
+    color: #4a4f58;
+    font-size: 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #f5f5f5;
+    position: relative;
+}
+.instrue-right .hot-search{
+    padding:24px 0px 0px 0px;
+}
+.instrue-right .hot-search ul .hot-list{
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    background: #f7f7f7;
+    margin: 0 12px 12px 0;
+    padding: 0 13px;
+    color: #4a4f58;
+    cursor: pointer;
+}
+.line{
+    height: 2px;
+    width: 16px;
+    background: #e15616;
+    display: block;
+    position: absolute;
+    bottom: 0
+}
+.floorTit {
+    padding: 24px 0 16px 0;
+    position: relative;
+}
+.floorTit h2, .floorTit h3 {
+    font-weight: bold;
+    color: #4a4f58;
+    font-size: 24px;
+    line-height: 40px;
+}
+.floorTit h5 {
+    font-weight: normal;
+    color:#93979f;
+    font-size: 14px;
+    line-height: 16px;
+}
+.recommend ul li:first-child {
+    width: 524px;
+}
+
+.hotList ul li img {
+    width: 100%;
+    height: 100%;
+}
+.hotList ul{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    height: 560px;
+    overflow: hidden;
+}
+.hotList ul.height{
+    height: auto;
+}
+.hotList ul:after{
+    display:block;
+    content:"";
+    width: 164px;
+    height:0px;
+}
+.hotList ul li {
+    width: 164px;
+    height: 268px;
+    float: left;
+    background: #fff;
+    position: relative;
+    margin: 0 0 16px 0;
+    overflow: hidden;
+    display: inline-block;
+}
+.collocation ul li{
+    height: 218px;
+}
+.swiper-container ul li{
+    margin-right: 16px;
+}
+.swiper-container ul{
+   height: auto;
+}
+.collocation ul{
+    height: 468px;
+}
+.hotList ul li a{
+    display: block;
+}
+.hotList ul .productItem img{
+    width: 100%;
+    height: 164px;
+}
+.productItem .name {
+    display: block;
+    padding: 0 16px;
+    height: 40px;
+    line-height: 21px;
+    vertical-align: middle;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-inline-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical
+}
+.productItem .price{
+    border: 0;
+}
+.listTag{
+   margin: 12px 8px 0 0;
+   padding: 0 2px;
+}
+.productItem .price .icon:before{
+    width: 63px;
+}
+.productItem .price .icon.i5:before {
+    background-position: -2px -832px;
+}
+.productItem .price .icon.i1:before {
+    background-position: -2px -712px;
+}
+.productItem .price .icon.i2:before {
+    background-position: -2px -742px;
+}
+.productItem .price .icon.i3:before {
+    background-position: -2px -772px;
+}
+.productItem .price .icon.i4:before {
+    background-position: -2px -802px;
+}
+.unfold{
+    width: 83px;
+    height: 32px;
+    border: 1px solid #cccccc;
+    line-height: 32px;
+    margin: 32px auto;
+    border-radius: 2px;
+    color: #909090;
+    padding-left: 13px;
+    cursor: pointer;
+    position: relative;
+}
+.icon.more:before{
+    background-position: -93px 7px;
+    width: 20px;
+    height: 32px;
+    right: 0;
+    position: absolute
+}
+#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
+#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
+}

src/main/resources/static/css/product/produce.css

@@ -0,0 +1,201 @@
+@media screen and (min-width:768px) {
+#container {
+    width: 1184px;
+    margin: 32px auto;
+    overflow: hidden;
+}
+
+.instrue-left {
+    width: 884px;
+    float: left;
+    margin-right: 16px;
+}
+
+.instrue-left .top-category .normal-nav .nav-list {
+    display: inline-block;
+    margin: 0 16px 16px 0;
+    width: 134px;
+    height: 88px;
+    background: #fff;
+    text-align: center;
+    color: #4a4f58;
+    font-size: 16px;
+    line-height: 130px;
+    cursor: pointer;
+}
+
+.instrue-left .top-category .normal-nav .nav-list.active {
+    border: 1px solid #e15616;
+    color: #e15616;
+}
+
+.instrue-left .top-category .normal-nav .nav-list:nth-child(6) {
+    margin-right: 0
+}
+
+.instrue-right {
+    float: right;
+    width: 252px;
+    background: #fff;
+    padding: 16px;
+}
+.instrue-right .wrap_tittle{
+    padding-bottom: 10px;
+    color: #4a4f58;
+    font-size: 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #f5f5f5;
+    position: relative;
+}
+.instrue-right .hot-search{
+    padding:24px 0px 0px 0px;
+}
+.instrue-right .hot-search ul .hot-list{
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    background: #f7f7f7;
+    margin: 0 12px 12px 0;
+    padding: 0 13px;
+    color: #4a4f58;
+    cursor: pointer;
+}
+.line{
+    height: 2px;
+    width: 16px;
+    background: #e15616;
+    display: block;
+    position: absolute;
+    bottom: 0
+}
+.floorTit {
+    padding: 24px 0 16px 0;
+    position: relative;
+}
+.floorTit h2, .floorTit h3 {
+    font-weight: bold;
+    color: #4a4f58;
+    font-size: 24px;
+    line-height: 40px;
+}
+.floorTit h5 {
+    font-weight: normal;
+    color:#93979f;
+    font-size: 14px;
+    line-height: 16px;
+}
+.recommend ul li:first-child {
+    width: 524px;
+}
+
+.hotList ul li img {
+    width: 100%;
+    height: 100%;
+}
+.hotList ul{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    height: 560px;
+    overflow: hidden;
+}
+.hotList ul.height{
+    height: auto;
+}
+.hotList ul:after{
+    display:block;
+    content:"";
+    width: 164px;
+    height:0px;
+}
+.hotList ul li {
+    width: 164px;
+    height: 268px;
+    float: left;
+    background: #fff;
+    position: relative;
+    margin: 0 0 16px 0;
+    overflow: hidden;
+    display: inline-block;
+}
+.collocation ul li{
+    height: 218px;
+}
+.swiper-container ul li{
+    margin-right: 16px;
+}
+.swiper-container ul{
+   height: auto;
+}
+.collocation ul{
+    height: 468px;
+}
+.hotList ul li a{
+    display: block;
+}
+.hotList ul .productItem img{
+    width: 100%;
+    height: 164px;
+}
+.productItem .name {
+    display: block;
+    padding: 0 16px;
+    height: 40px;
+    line-height: 21px;
+    vertical-align: middle;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-inline-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical
+}
+.productItem .price{
+    border: 0;
+}
+.listTag{
+   margin: 12px 8px 0 0;
+   padding: 0 2px;
+}
+.productItem .price .icon:before{
+    width: 63px;
+}
+.productItem .price .icon.i5:before {
+    background-position: -2px -832px;
+}
+.productItem .price .icon.i1:before {
+    background-position: -2px -712px;
+}
+.productItem .price .icon.i2:before {
+    background-position: -2px -742px;
+}
+.productItem .price .icon.i3:before {
+    background-position: -2px -772px;
+}
+.productItem .price .icon.i4:before {
+    background-position: -2px -802px;
+}
+.unfold{
+    width: 83px;
+    height: 32px;
+    border: 1px solid #cccccc;
+    line-height: 32px;
+    margin: 32px auto;
+    border-radius: 2px;
+    color: #909090;
+    padding-left: 13px;
+    cursor: pointer;
+    position: relative;
+}
+.icon.more:before{
+    background-position: -93px 7px;
+    width: 20px;
+    height: 32px;
+    right: 0;
+    position: absolute
+}
+#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
+#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
+}

src/main/resources/static/css/single-page/repair.css

@@ -22,7 +22,7 @@ li{list-style:none}
 */
 @media screen and (max-width:768px){
 .title{height:10vw;line-height:10vw;padding-left:10px;font-size:3.7vw;color:#4A4F58;background:#FFF;font-weight:bold;text-align:center}
-.title .btn{display:none}
+.title .btn{display: block;background: #e15616;color: #fff;position: fixed;bottom: 0;width: 95%;border-radius: 45px;margin: auto;z-index: 999}
 .content{width:100vw;margin:0 auto;background:#FFF}
 .content img{display:block;width:100%}
 .content .btnBox{height:21.4vw}

src/main/resources/static/css/single-page/topic.css

@@ -8,9 +8,10 @@ li{list-style:none}
 .pageTop img{width:100%;height:auto}
 .pageTop p{padding:16px;color:#93979F;font-size:16px;line-height:26px}
 
-.pageFloor .title{height:24px;line-height:24px;padding-left:10px;border-left:4px solid #E15616;margin:32px 0 16px 0;font-size:24px;color:#4A4F58;font-weight:bold;text-align:left;}
+.pageFloor .title{height:24px;line-height:24px;padding-left:10px;border-left:4px solid #E15616;margin:32px 0 16px 0;font-size:24px;color:#4A4F58;font-weight:bold;text-align:left;position: relative;}
 .pageFloor .title .more {float:right;color:#627386;font-size:18px;font-weight:normal;}
 .pageFloor .title .more:hover{color:#E15616}
+.pageFloor .title .talk_link{display: block;width: 120px;height: 40px;border-radius: 2px;border: 1px solid #E15616;background-color: #ffe6dc;line-height: 40px;text-align: center;font-size: 14px;color: #E15616;position: absolute;right: 0;top: -16px;}
 .pageFloor .content{width:1202px}
 .pageFloor .content li{float:left;width:284px;height:334px;margin:0 16px 16px 0;background:#FFF}
 .pageFloor .content li img{display:block;width:284px;height:284px}

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

@@ -43,34 +43,186 @@ var globalHead = new Vue({
         },
         shopId:'',
         userIdentity:'',
-        articleType: ''
+        articleType: '',
+        TabList:[
+            {name:'产品',link:'/product/produce.html'},
+            {name:'仪器',link:'/product/instrument.html'}
+        ],
+        NavsList:[
+            {
+                name:'产品',
+                validFlag:1,
+                smalltypeList:[
+                    {
+                        name:'中胚层产品',
+                        icon:'/img/info/mall.png',
+                        validFlag:1,
+                        tinytypeList:[
+                            {name:'水光针/动能素',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'玻尿酸（小分子)',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'导入液',validFlag:1,threeList:[{name:'3级分类'}]}
+                        ]
+                    },
+                    {
+                        name:'抗衰除皱',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'术后修复',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'SPA产品',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'私密产品',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'紧致',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'修复',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'消炎',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'美化',validFlag:1,threeList:[{name:'3级分类'}]},
+                        ]
+                    },
+                    {
+                        name:'服务类产品',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'耗材',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'针剂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'线材',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'假体',validFlag:1,threeList:[]}
+                        ]
+                    },
+                    {
+                        name:'临期产品',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                ]
+            },{
+                name:'仪器',
+                validFlag:1,
+                smalltypeList:[
+                    {
+                        name:'面部抗衰',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'超声',validFlag:1},
+                            {name:'射频',validFlag:1},
+                            {name:'激光',validFlag:1}
+                        ]
+                    },
+                    {
+                        name:'瘦身塑型',
+                        validFlag:1,
+                        icon:'/img/info/kuqi.jpg',
+                        tinytypeList:[
+                            {name:'光纤溶脂抽脂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'射频溶脂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'超声溶脂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'隔空溶脂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'增肌溶脂',validFlag:1,threeList:[{name:'3级分类'}]}
+                        ]
+                    },
+                    {
+                        name:'产后修复',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'私密',
+                        validFlag:1,
+                        icon:'/img/info/kuqi.jpg',
+                        tinytypeList:[
+                            {name:'抗衰保健',validFlag:1},
+                            {name:'美化',validFlag:1},
+                            {name:'检测',validFlag:1}
+                        ]
+                    },
+                    {
+                        name:'皮肤管理',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'小气泡清洁',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'激光祛斑美肤',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'光子嫩肤',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'黄金微针',validFlag:1,threeList:[]},
+                            {name:'微针美塑',validFlag:1},
+                            {name:'水光针',validFlag:1},
+                            {name:'射频紧肤',validFlag:1},
+                            {name:'激光祛皱',validFlag:1},
+                            {name:'超声HIFU',validFlag:1}
+                        ]
+                    },
+                    {
+                        name:'耗材',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'针剂',validFlag:1},
+                            {name:'线材',validFlag:1},
+                            {name:'假体',validFlag:1}
+                        ]
+                    }
+                ]
+            }
+        ]
     },
     methods: {
         // 导航分类数据
         getClassify: function() {
             var _self = this;
-            $.getJSON(spiServer+"/product/classify").done(function (r) {
-                if (r.code === 0 && r.data) {
-                    _self.classify = r.data;
+            // PublicApi.GetProductClassify({},function(response){
+            //     if(response.code == 0){
+            //         _self.classify = response.data;
+            //         console.log('22222222222222222');
                     if(isPC){
                         setTimeout(function(){
                             $('#mainClassify').slide({
-                                mainCell:".clsCon"
-                                ,titCell:".clsTab a"
-                                ,trigger: "mouseover"
+                                mainCell:".clsCon",
+                                titCell:".clsTab a",
+                                trigger: "mouseover"
+                            });
+                        },500);
+                        setTimeout(function(){
+                            $('#mainClassify').slide({
+                                mainCell:".tabItem_right",
+                                titCell:".tabItem_lift a",
+                                trigger: "mouseover"
                             });
                         },500);
                     }else{
                         setTimeout(function(){
                             $('#mainClassify').slide({
-                                mainCell:".clsCon"
-                                ,titCell:".clsTab a"
-                                ,trigger: "click"
+                                mainCell:".clsCon",
+                                titCell:".clsTab a",
+                                trigger: "click"
                             });
                         },500);
                     }
-                }
-            });
+            //     }else{
+            //         CAIMEI.Alert(response.msg, '确定');
+            //     }
+            // });
         },
         // 头部购物车数据
         getHeadCart: function(userId) {

src/main/resources/static/js/common/serviceapi/utils.service.js

@@ -7,6 +7,12 @@ var PublicApi = {
         uploadimg: function (params, callback) {//供应商添加物流上传图片
             Http.uploadImage({ url:'/formData/MultiPictareaddData',data:params},callback)
         },
+        GetProductClassify:function(params,callback){ //获取分类
+            Http.AjaxService({ url:'/product/classify', type:'get', data:params, json:false})
+                .then(function(res){
+                    callback(res)
+                });
+        },
         GetProvince:function(params,callback){ //获取省份信息
             Http.AjaxService({ url:'/club/province', type:'get', data:params, json:false})
                 .then(function(res){

src/main/resources/static/js/product/instruement-list.js

@@ -0,0 +1,202 @@
+var productList = new Vue({
+    el:'#productList',
+    data:{
+        searchFlag: false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        classify:[
+            {
+            name:'面部抗衰',
+            smallTypeID:'1001',
+            tinytypeList:[
+                { name: "高端护理",smallTypeID:'101'},
+                { name: "高端护理",smallTypeID:'102'},
+                { name: "高端护理",smallTypeID:'103'},
+                { name: "高端护理",smallTypeID:'104'},
+                { name: "高端护理",smallTypeID:'105'},
+            ]},
+            {
+            name:'瘦身塑形',
+            smallTypeID:'1002',
+            tinytypeList:[
+                { name: "超声",smallTypeID:'2002'},
+                { name: "射频",smallTypeID:'2003'},
+                { name: "激光",smallTypeID:'2004'},
+                { name: "高端护理",smallTypeID:'2005'},
+                { name: "高端护理",smallTypeID:'2001'},
+            ]},
+            {
+            name:'产后修复',
+            smallTypeID:'1003',
+            tinytypeList:[
+                { name: "修复",smallTypeID:'3003'},
+                { name: "修复",smallTypeID:'3002'},
+                { name: "修复",smallTypeID:'3004'},
+                { name: "修复",smallTypeID:'3005'},
+                { name: "修复",smallTypeID:'3001'},
+            ]},
+            {
+            name:'精油系列',
+            smallTypeID:'1004',
+            tinytypeList:[
+                { name: "补水",smallTypeID:'4005'},
+                { name: "保湿",smallTypeID:'4004'},
+                { name: "保湿",smallTypeID:'4003'},
+                { name: "保湿",smallTypeID:'4002'},
+                { name: "补水",smallTypeID:'4001'},
+            ]},
+        ],
+        listData:[
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "1",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料:",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "2",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料:",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "3",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料:",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "4",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料:",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "4",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料:",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "4",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+        ],
+         termsName:'',
+         twoclassName:'',
+         smallTypeID:'',
+         twosmallTypeID:'',
+         tinytypeList:[],
+         termsNameflag:false,
+         twoclassflag:false,
+          params: {
+            size: 0,
+            num: 0,
+            keyword: "",
+            sortField: "",
+            sortType: 1, // 1降序，其他升序
+            bid: "",
+            sid: "",
+            tid: ""
+        },
+    },
+    methods:{
+     toSortList: function (sortField, sortType) {
+            var params = {
+                sortfield: sortField,
+                sorttype: sortType
+            };
+            window.location.href = updateUrlParam(params);
+        },
+        remove:function(){
+            this.twoclassflag = false;
+        },
+        oneclass:function (item) {//选择一及分类
+            this.termsName=item.name;
+            this.smallTypeID = item.smallTypeID;
+            this.tinytypeList = item.tinytypeList;
+            this.termsNameflag = true
+        },
+        twoclass:function (item) {//选择二级分类
+            this.twoclassName = item.name;
+            this.twosmallTypeID = item.smallTypeID;
+            this.twoclassflag = true;
+        }
+    },
+    created:function () {
+        setTimeout(function(){
+            // 图片懒加载
+            $("img[data-original]").lazyload();
+        },500)
+    }
+
+})

src/main/resources/static/js/product/instruement.js

@@ -2,14 +2,95 @@
     el:'#instrueMent',
     data:{
         categorylist:[
-            {name:'中胚层产品'},
-            {name:'中胚层产品'},
-            {name:'中胚层产品'},
-            {name:'中胚层产品'},
-            {name:'中胚层产品'},
-            {name:'中胚层产品'},
-            {name:'中胚层产品'},
-            {name:'中胚层产品'},
-            ]
+            {name:'中胚层产品',value:'0'},
+            {name:'中胚层产品',value:'1'},
+            {name:'中胚层产品',value:'2'},
+            {name:'中胚层产品',value:'3'},
+            {name:'中胚层产品',value:'4'},
+            {name:'中胚层产品',value:'5'},
+            {name:'中胚层产品',value:'6'},
+            {name:'中胚层产品',value:'7'},
+            ],
+        hotlist:[
+            {name:'玻尿酸',value:'0'},
+            {name:'械字号',value:'1'},
+            {name:'导入液',value:'2'},
+            {name:'热门仪器',value:'3'},
+            {name:'除皱',value:'4'},
+            {name:'微整形 ',value:'5'},
+            {name:'纹绣',value:'6'},
+            {name:'美白嫩肤',value:'7'},
+        ],
+         recommendPage: 1,
+         recommends: [],
+         userId:0,
+         moreflag:true,
+    },
+    methods:{
+        toserch:function(name){
+        window.location.href='/product/instruelist.html?name='+name
+        },
+        seeMore:function(){
+            this.moreflag = false
+        },
+         getRecommends: function(){
+            var _self = this;
+            $.getJSON("/home/recommend").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommends = r.data;
+                    _self.recommendPage = Math.ceil(r.data.length / 5);
+                        setTimeout(function(){
+                        if (isPC) {
+                            $('#recommendBox').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,interTime: 3000
+                                ,autoPlay: true
+                                ,scroll:5
+                                ,vis:5
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            var swiper = new Swiper('#recommendBox', {
+                                slidesPerView: 2,
+                                slidesPerColumn: 2,
+                                spaceBetween: 0,
+                                slidesPerGroup: 2,
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination'
+                                }
+                            });
+                        }
+                    },500);
+                      setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500)
+                        // 获取价格
+                    var productIdArr = [];
+                    _self.recommends.map(function (item) {
+                        // 0公开价格 1不公开价格 2仅对会员机构公开
+                        if (item.priceFlag !== 1) {
+                            productIdArr.push(item.id)
+                        }
+                    });
+                    setProductPrice(_self.recommends, productIdArr.join(","), _self.userId, function () {
+                        _self.$forceUpdate();
+                    });
+                }
+            });
+        },
+    },
+    created: function() {
+    var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+        }
+    this.getRecommends();
     }
  })

src/main/resources/static/js/product/produce-list.js

@@ -0,0 +1,93 @@
+ var instrueMent = new Vue({
+    el:'#instrueMent',
+    data:{
+        categorylist:[
+            {name:'中胚层产品',value:'0'},
+            {name:'中胚层产品',value:'1'},
+            {name:'中胚层产品',value:'2'},
+            {name:'中胚层产品',value:'3'},
+            {name:'中胚层产品',value:'4'},
+            {name:'中胚层产品',value:'5'},
+            {name:'中胚层产品',value:'6'},
+            {name:'中胚层产品',value:'7'},
+            ],
+        hotlist:[
+            {name:'玻尿酸',value:'0'},
+            {name:'械字号',value:'1'},
+            {name:'导入液',value:'2'},
+            {name:'热门仪器',value:'3'},
+            {name:'除皱',value:'4'},
+            {name:'微整形 ',value:'5'},
+            {name:'纹绣',value:'6'},
+            {name:'美白嫩肤',value:'7'},
+        ],
+         recommendPage: 1,
+         recommends: [],
+         userId:0,
+         moreflag:true,
+    },
+    methods:{
+        seeMore:function(){
+            this.moreflag = false
+        },
+         getRecommends: function(){
+            var _self = this;
+            $.getJSON("/home/recommend").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommends = r.data;
+                    _self.recommendPage = Math.ceil(r.data.length / 5);
+                        setTimeout(function(){
+                        if (isPC) {
+                            $('#recommendBox').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,interTime: 3000
+                                ,autoPlay: true
+                                ,scroll:5
+                                ,vis:5
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            var swiper = new Swiper('#recommendBox', {
+                                slidesPerView: 2,
+                                slidesPerColumn: 2,
+                                spaceBetween: 0,
+                                slidesPerGroup: 2,
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination'
+                                }
+                            });
+                        }
+                    },500);
+                      setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500)
+                        // 获取价格
+                    var productIdArr = [];
+                    _self.recommends.map(function (item) {
+                        // 0公开价格 1不公开价格 2仅对会员机构公开
+                        if (item.priceFlag !== 1) {
+                            productIdArr.push(item.id)
+                        }
+                    });
+                    setProductPrice(_self.recommends, productIdArr.join(","), _self.userId, function () {
+                        _self.$forceUpdate();
+                    });
+                }
+            });
+        },
+    },
+    created: function() {
+    var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+        }
+    this.getRecommends();
+    }
+ })

src/main/resources/static/js/product/produce.js

@@ -0,0 +1,93 @@
+ var instrueMent = new Vue({
+    el:'#instrueMent',
+    data:{
+        categorylist:[
+            {name:'中胚层产品',value:'0'},
+            {name:'中胚层产品',value:'1'},
+            {name:'中胚层产品',value:'2'},
+            {name:'中胚层产品',value:'3'},
+            {name:'中胚层产品',value:'4'},
+            {name:'中胚层产品',value:'5'},
+            {name:'中胚层产品',value:'6'},
+            {name:'中胚层产品',value:'7'},
+            ],
+        hotlist:[
+            {name:'玻尿酸',value:'0'},
+            {name:'械字号',value:'1'},
+            {name:'导入液',value:'2'},
+            {name:'热门仪器',value:'3'},
+            {name:'除皱',value:'4'},
+            {name:'微整形 ',value:'5'},
+            {name:'纹绣',value:'6'},
+            {name:'美白嫩肤',value:'7'},
+        ],
+         recommendPage: 1,
+         recommends: [],
+         userId:0,
+         moreflag:true,
+    },
+    methods:{
+        seeMore:function(){
+            this.moreflag = false
+        },
+         getRecommends: function(){
+            var _self = this;
+            $.getJSON("/home/recommend").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommends = r.data;
+                    _self.recommendPage = Math.ceil(r.data.length / 5);
+                        setTimeout(function(){
+                        if (isPC) {
+                            $('#recommendBox').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,interTime: 3000
+                                ,autoPlay: true
+                                ,scroll:5
+                                ,vis:5
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            var swiper = new Swiper('#recommendBox', {
+                                slidesPerView: 2,
+                                slidesPerColumn: 2,
+                                spaceBetween: 0,
+                                slidesPerGroup: 2,
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination'
+                                }
+                            });
+                        }
+                    },500);
+                      setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500)
+                        // 获取价格
+                    var productIdArr = [];
+                    _self.recommends.map(function (item) {
+                        // 0公开价格 1不公开价格 2仅对会员机构公开
+                        if (item.priceFlag !== 1) {
+                            productIdArr.push(item.id)
+                        }
+                    });
+                    setProductPrice(_self.recommends, productIdArr.join(","), _self.userId, function () {
+                        _self.$forceUpdate();
+                    });
+                }
+            });
+        },
+    },
+    created: function() {
+    var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+        }
+    this.getRecommends();
+    }
+ })

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

@@ -51,7 +51,7 @@
                     <div class="foot-icon mini">
                         <i class="icon mIcon icon-mini"></i>
                     </div>
-                    <div class="foot-code"><img src="/img/common/qr_code_mini.png"/></div>
+                    <div class="foot-code"><img src="/img/common/qr_code_mini.jpg"/></div>
                     <P>采美小程序</P>
                 </div>
             </div>

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

@@ -1,40 +1,58 @@
 <header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">
     <!--顶部导航-->
     <div class="baseHeadTop">
-        <ul class="wrap clear">
-            <li>
-                <a href="javascript:void(0);">采美365网</a>
-                <div class="qrCode">
-                    <img src="/img/common/qr_code_caimei.png" alt="采美365网"/>
-                    <p>扫描关注</p>
-                </div>
-            </li>
-            <li>
-                <a href="javascript:void(0);">呵呵商城</a>
-                <div class="qrCode">
-                    <img src="/img/common/qr_code_hehe.png" alt="呵呵商城"/>
-                    <p>扫描关注</p>
-                </div>
-            </li>
-            <li v-if="loginStatus" id="mGlobalMenu" @click="hideGlobalMenu()">
-                <a class="cTab" href="javascript:void(0);" v-if="userIdentity == 3" v-text="userData.name"></a>
-                <a class="cTab" href="javascript:void(0);" v-else v-text="userData.userName"></a>
-                <div class="cShow" v-if="userIdentity == 4 || userIdentity == 2">
-                    <a href="/user/dashboard.html">我的采美</a>
-                    <a href="/user/setting/information.html">机构资料</a>
-                    <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
-                </div>
-                <div class="cShow" v-if="userIdentity == 3">
-                    <a href="/supplier/dashboard.html">我的采美</a>
-                    <a href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
-                    <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
-                </div>
-            </li>
-            <template v-else>
-                <li><a href="/register.html">注册</a></li>
-                <li><a href="/login.html">登录</a></li>
-            </template>
-        </ul>
+        <div class="wrap clear">
+            <div class="header_top_left">欢迎来到采美采购服务平台</div>
+            <ul class="header_top_ul">
+                <li class="headCart">
+                    <a href="javascript:void(0)" class="addBtn icon" @click="goCartsLinkFn">购物车<em v-text="'('+headCart.cartCount+')'"></em></a>
+                    <div class="cartData">
+                        <div v-if="headCart.cartCount>0">
+                            <div class="cartMain">
+                                <div class="cartItem" v-for="cart in headCart.cartList">
+                                    <a href="javascript:void(0)" @click="productDetailsFn(cart.id)">
+                                        <img :src="cart.image" >
+                                        <span class="name" v-text="cart.name"></span>
+                                        <span class="unit" v-text="'包装规格：'+cart.unit"></span>
+                                        <span class="unit" v-text="'数量：'+cart.number"></span>
+                                        <span class="price" v-text="'￥'+parseFloat(cart.price).toFixed(2)"></span>
+                                    </a>
+                                    <span class="delBtn" @click="DeleteCartProducts(cart.id)"></span>
+                                </div>
+                            </div>
+                            <div class="cartBtm">
+                                <span>共计：<em v-text="headCart.productCount"></em> 件</span>
+                                <span>合计：<em v-text="parseFloat(headCart.priceTotal).toFixed(2)"></em> 元</span>
+                                <a class="btn" href="/shopping/cart.html">去购物车结算</a>
+                            </div>
+                        </div>
+                        <div v-else class="empty">
+                            <img src="/img/common/empty_cart.png">
+                            <p>购物车暂无商品</p>
+                            <p v-if="!loginStatus">请先<a href="/login.html">登录</a>添加商品到购物车</p>
+                        </div>
+                    </div>
+                </li>
+                <li v-if="loginStatus" id="mGlobalMenu" @click="hideGlobalMenu()">
+                    <a class="cTab" href="javascript:void(0);" v-if="userIdentity == 3" v-text="userData.name"></a>
+                    <a class="cTab" href="javascript:void(0);" v-else v-text="userData.userName"></a>
+                    <div class="cShow" v-if="userIdentity == 4 || userIdentity == 2">
+                        <a href="/user/dashboard.html">我的采美</a>
+                        <a href="/user/setting/information.html">机构资料</a>
+                        <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                    </div>
+                    <div class="cShow" v-if="userIdentity == 3">
+                        <a href="/supplier/dashboard.html">我的采美</a>
+                        <a href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
+                        <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                    </div>
+                </li>
+                <template v-else>
+                    <li><a href="/register.html">注册</a></li>
+                    <li><a href="/login.html">登录</a></li>
+                </template>
+            </ul>
+        </div>
     </div>
     <!--搜索及购物车-->
     <div class="baseHeadCenter">
@@ -73,33 +91,16 @@
                     </span>
                 </div>
             </div>
-            <div class="headCart">
-                <a href="javascript:void(0)" class="addBtn icon" @click="goCartsLinkFn">购物车<em v-text="'('+headCart.cartCount+')'"></em></a>
-                <div class="cartData">
-                    <div v-if="headCart.cartCount>0">
-                        <ul class="cartMain">
-                            <li class="cartItem" v-for="cart in headCart.cartList">
-                                <a href="javascript:void(0)" @click="productDetailsFn(cart.id)">
-                                    <img :src="cart.image" >
-                                    <span class="name" v-text="cart.name"></span>
-                                    <span class="unit" v-text="'包装规格：'+cart.unit"></span>
-                                    <span class="unit" v-text="'数量：'+cart.number"></span>
-                                    <span class="price" v-text="'￥'+parseFloat(cart.price).toFixed(2)"></span>
-                                </a>
-                                <span class="delBtn" @click="DeleteCartProducts(cart.id)"></span>
-                            </li>
-                        </ul>
-                        <div class="cartBtm">
-                            <span>共计：<em v-text="headCart.productCount"></em> 件</span>
-                            <span>合计：<em v-text="parseFloat(headCart.priceTotal).toFixed(2)"></em> 元</span>
-                            <a class="btn" href="/shopping/cart.html">去购物车结算</a>
-                        </div>
-                    </div>
-                    <div v-else class="empty">
-                        <img src="/img/common/empty_cart.png">
-                        <p>购物车暂无商品</p>
-                        <p v-if="!loginStatus">请先<a href="/login.html">登录</a>添加商品到购物车</p>
-                    </div>
+            <div class="wechat_qrcode">
+                <div class="q_item">
+                    <div class="q_item_icon"><img src="/img/common/qr_code_caimei.png" alt=""></div>
+                    <div class="q_item_code"><img src="/img/common/qr_code_caimei.png" alt=""></div>
+                    <p>采美公众号</p>
+                </div>
+                <div class="q_item">
+                    <div class="q_item_icon"><img src="/img/common/qr_code_mini.jpg" alt=""></div>
+                    <div class="q_item_code"><img src="/img/common/qr_code_mini.jpg" alt=""></div>
+                    <p>采美小程序</p>
                 </div>
             </div>
         </div>
@@ -107,49 +108,80 @@
     <!--商品分类及主导航菜单-->
     <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 th:if="${menu.link}" class="nav" th:href="${menu.link}" th:text="${menu.name}"></a>
-                        <a th:unless="${menu.link}" 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}" th:href="${sub.link}" th:text="${sub.name}"></a>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <a class="service nav" href="/repair.html">维修</a>
-        </div>
-        <div id="mainClassify" class="classifyBox mFixed">
-            <div v-if="!isPC" class="clsHead clear">
-                <a href="javascript:void(0);" class="mClassBtn mIcon" title="分类"></a>
-                <a href="/" class="logo">
-                    <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
-                </a>
-                <a href="javascript:void(0);" class="close" title="关闭"></a>
-            </div>
-            <div class="clsTab">
-                <template v-for="(big,i) in classify">
-                    <a :class="{'on':i==0}" v-if="big.validFlag==1" href="javascript:void(0);" v-text="big.name"></a>
-                </template>
+            <div class="baseTopNav_nav">
+                <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 th:if="${menu.link}" class="nav" th:href="${menu.link}" th:text="${menu.name}"></a>
+                            <a th:unless="${menu.link}" class="nav" href="javascript:void(0);" th:text="${menu.name}"></a>
+                        </li>
+                    </ul>
+                </div>
+                <a class="service nav" href="/repair.html">维修</a>
             </div>
-            <div class="clsCon">
-                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID" style="display: none;">
-                    <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 mfw">
-                            <template v-for="tiny in small.tinytypeList">
-                                <a v-if="tiny.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID">
-                                    <img v-if="!isPC" :src="tiny.icon" alt="tiny.name">
-                                    <span v-text="tiny.name"></span>
+            <div id="mainClassify" class="classifyBox mFixed">
+                <div v-if="!isPC" class="clsHead clear">
+                    <a href="javascript:void(0);" class="mClassBtn mIcon" title="分类"></a>
+                    <a href="/" class="logo">
+                        <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
+                    </a>
+                    <a href="javascript:void(0);" class="close" title="关闭"></a>
+                </div>
+                <div class="clsTab">
+                    <template v-for="(tab,i) in TabList">
+                        <a :class="{'on':i==0}" :href="tab.link" v-text="tab.name" target="_blank"></a>
+                    </template>
+                </div>
+                <div class="clsCon">
+                    <div class="tabItem" v-for="big in NavsList" :bid="big.bigTypeID" style="display: none;">
+                        <div class="tabItem_lift">
+                            <template v-for="(small,index) in big.smalltypeList" v-if="small.validFlag==1">
+                                <a :class="{'on':index==0}" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'">
+                                    <img class="tabItem_lift_icon" :src="small.icon ? small.icon : '/img/info/kuqi.jpg'" alt="">
+                                    <p class="tabItem_lift_p" v-text="small.name"></p>
                                 </a>
                             </template>
                         </div>
+                        <div class="tabItem_right">
+                            <div class="tabItem_right_content" v-for="(small,i) in big.smalltypeList" v-if="small.validFlag==1" :class="{'on':i==0}">
+                                <div class="line" v-if="small.tinytypeList.length>0"   v-for="tiny in small.tinytypeList">
+                                    <div class="lft">
+                                        <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'">
+                                            <p>{{ tiny.name }}</p>
+                                            <span> > </span>
+                                        </a>
+                                    </div>
+                                    <div class="rgt mfw">
+                                        <template v-if="tiny.threeList && tiny.threeList.length>0"   v-for="three in tiny.threeList">
+                                            <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+three.tinyTypeID">
+                                                <img v-if="!isPC" :src="three.icon" alt="three.name">
+                                                <span v-text="three.name"></span>
+                                            </a>
+                                        </template>
+                                        <template v-if="tiny.threeList && tiny.threeList.length==0">
+                                            <a href="">
+                                                <img v-if="!isPC" :src="tiny.icon" alt="tiny.name">
+                                                <p>全部商品</p>
+                                                <span> > </span>
+                                            </a>
+                                        </template>
+                                    </div>
+                                </div>
+                                <template v-if="small.tinytypeList && small.tinytypeList.length==0">
+                                    <div class="line">
+                                        <div class="lft none">
+                                            <a href="">
+                                                <img v-if="!isPC" :src="tiny.icon" alt="tiny.name">
+                                                <span>全部商品></span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

src/main/resources/templates/index.html

@@ -6,14 +6,13 @@
     <meta name="baidu-site-verification" content="KbkRJg9357"/>
     <template th:replace="components/head-link"></template>
     <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">
+    <link th:href="@{/css/index/index_new.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
-
 <!-- 首页 -->
-<div id="container">
+<div id="container" v-cloak>
     <!--首页图片轮播-->
     <div id="swiper-container" class="swiper-container">
         <ul class="swiper-wrapper">
@@ -25,178 +24,528 @@
         <a class="swiper-button-prev" href="javascript:void(0)"></a>
         <a class="swiper-button-next" href="javascript:void(0)"></a>
     </div>
-    <!--移动端首页导航-->
-    <div class="mNavBox h5Only">
-        <ul class="mfw">
-            <!--导航菜单-->
-            <li class="first" th:each="menu: ${topMenuList}">
-                <a th:if="${menu.link}" class="nav mIcon" th:href="${menu.link}"><span th:text="${menu.name}"></span></a>
-                <a th:unless="${menu.link}" class="nav mIcon" href="javascript:void(0);" @click="showSubNav($event)">
-                    <span th:text="${menu.name}"></span>
-                </a>
-                <div class="navItem" th:if="${not #lists.isEmpty(menu.subMenus)}">
-                    <div class="mfw">
-                        <a class="second" th:each="sub: ${menu.subMenus}" th:href="${sub.link}">
-                            <img th:src="${sub.image}">
-                            <span th:text="${sub.name}"></span>
-                        </a>
+    <!--首页楼层主体数据-->
+    <div class="section_container">
+        <div class="inner">
+            <div class="section_left">
+                <div class="section_page" v-for="(page,index) in pageList">
+                    <div class="section_page_title">
+                        <h1>{{ page.title }}</h1>
+                        <p>{{ page.content }}</p>
                     </div>
-                </div>
-            </li>
-            <li class="first"><a class="nav mIcon" href="/repair.html"><span>维修</span></a></li>
-        </ul>
-    </div>
-    <!--页面主体数据-->
-    <div class="wrap">
-        <div>
-            <div class="floorTit toLogin">
-                <h2 v-for="item in pageFloors" v-if="item.type==1" v-text="item.title" data-id="1"></h2>
-                <h2 v-else-if="pageFloors.length==0" data-id="1">推荐专区</h2>
-            </div>
-            <div class="floorCon">
-                <div id="recommendBox" class="swiper-container">
-                    <ul class="swiper-wrapper" v-cloak>
-                        <li class="swiper-slide productItem mfc" v-for="p in recommends">
-                            <div class="item">
-                                <a class="image" :href="'/product-'+p.id+'.html'">
-                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
-                                    <span v-if="p.actType==1||p.actType==2" :class="p.actType==1?'icon mIcon hot':'icon mIcon new'"></span>
-                                </a>
-                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
-                                    <span v-html="p.name"></span>
-                                </a>
-                                <div class="price mfhc">
-                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                    <template v-if="page.type == 1">
+                        <div class="section_page_main" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_02"><img :src="page.advertisement" alt=""></a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
                                         <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
-                                        <template v-if="p.priceFlag==1">
-                                            <em>￥价格未公开</em>
-                                            <div class="btnBox">
-                                                <a href="javascript:void(0)" class="btn cat">价格未公开，请联系 0755-22907771</a>
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
                                             </div>
                                         </template>
                                         <template v-else>
-                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
-                                                <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
-                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                 <div class="main_price_text">
+                                                     <div class="price_text_tag">
+                                                         <p class="listTag" v-if="pros.actStatus==1">
+                                                             {{pros.promotions.name}}
+                                                             <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                         </p>
+                                                     </div>
+                                                     <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                         ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                     </div>
+                                                 </div>
                                             </template>
-                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
-                                                <em>￥会员可见</em>
-                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                                <div class="btnBox">
-                                                    <a href="/user/setting/upgrade.html" class="btn">升级会员查看价格</a>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
                                                 </div>
                                             </template>
                                             <template v-else>
-                                                <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
-                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
                                             </template>
                                         </template>
                                     </template>
                                     <template v-else>
-                                        <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
-                                        <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                        <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">登录查看价格</a></div>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
                                     </template>
                                 </div>
-                            </div>
-                        </li>
-                    </ul>
-                    <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
+                         </div>
+                    </template>
+                    <template v-if="page.type == 2">
+                        <div class="section_page_main" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_02"><img class="page_main_item_adv" :src="page.advertisement" alt=""> </a>
+                            <a href="" class="page_main_item ad_03"><img class="page_main_item_adv" :src="page.advertisement1" alt=""> </a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 3">
+                        <div class="section_page_main type_03" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_01"><img class="page_main_item_adv" :src="page.banner" alt=""> </a>
+                            <a href="" class="page_main_item ad_02"><img class="page_main_item_adv" :src="page.advertisement" alt=""> </a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 4">
+                        <div class="section_page_main type_03" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_01"><img class="page_main_item_adv" :src="page.banner" alt=""> </a>
+                            <a href="" class="page_main_item ad_02"><img class="page_main_item_adv" :src="page.advertisement" alt=""> </a>
+                            <a href="" class="page_main_item ad_03"><img class="page_main_item_adv" :src="page.advertisement1" alt=""> </a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)"><i class="icon mIcon"></i>查看更多</div>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 5">
+                        <div class="section_page_main type_03" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_01"><img class="page_main_item_adv" :src="page.banner" alt=""> </a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 6">
+                        <div class="section_page_main type_03" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
+                                </div>
+                            </a>
+                            <a href="" class="page_main_item ad_01"><img class="page_main_item_adv" :src="page.banner" alt=""> </a>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 7">
+                        <div class="section_page_main" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
+                                </div>
+                            </a>
+                        </div>
+                    </template>
                 </div>
-            </div>
-        </div>
-        <div v-for="item in pageFloors">
-            <div v-if="item.type==6">
-                <!--大专题-->
-                <div v-for="bigTopic in item.subFloors">
-                    <div class="floorTit">
-                        <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
-                        <h5 v-text="bigTopic.detail"></h5>
+                <div class="section_page">
+                    <div class="section_page_title">
+                        <h1>优质供应商</h1>
+                        <p>采美正品联盟 质量保证</p>
                     </div>
-                    <div class="floorCon">
-                        <ul class="floorList clear mfw">
-                            <li v-for="floor in bigTopic.floorData" style="display: inline-block">
-                                <a :href="floor.link">
-                                    <img src="/img/base/placeholder.png" :data-original="floor.image" :alt="floor.title">
-                                    <p v-text="floor.title"></p>
-                                </a>
-                            </li>
-                        </ul>
+                    <div class="section_page_bottom">
+                        <a href="" class="page_main_li ad_01"><img class="page_main_item_adv" src="https://www.caimei365.com/img/common/goodsup.png" alt=""> </a>
+                        <a href="" class="page_main_li ad_02" v-for="(shop,index) in supplierList">
+                            <img class="page_main_logo" :src="shop.logo" alt="">
+                            <div class="page_main_name">{{ shop.name }}</div>
+                        </a>
                     </div>
                 </div>
             </div>
-            <div v-if="item.type==4">
-                <div class="floorTit">
-                    <h2 v-text="item.title" data-id="4">专题</h2>
-                    <a class="more" href="/promotions.html">更多商品专题</a>
-                </div>
-                <div class="floorCon">
-                    <div id="goodsTopic" class="swiper-container">
-                        <ul class="swiper-wrapper" v-cloak>
-                            <li class="swiper-slide mfc" v-for="topic in item.floorData">
-                                <a :href="topic.link">
-                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in item.floorData.length"></span></div>
-                        <a class="swiper-button-prev" href="javascript:void(0)"></a>
-                        <a class="swiper-button-next" href="javascript:void(0)"></a>
+            <div class="section_right">
+                <div class="section_right_item">
+                    <div class="right_item_title">
+                        <p>精彩直播</p>
+                        <a href="" target="_blank">更多></a>
+                    </div>
+                    <div class="right_item_main" v-for="(live,index) in liveList">
+                        <a href="" class="item_banner" v-if="index === 0" target="_blank">
+                            <img :src="live.banner" alt="">
+                            <div class="name">{{ live.title }}</div>
+                            <div class="statu">
+                                <i :class="live.status | statusTypeClass"></i>
+                                <p>{{ live.status | statusType }}</p>
+                            </div>
+                        </a>
+                        <a href="" class="item_text" v-if="index > 0" target="_blank">
+                            <p class="item_text_name">{{ live.title }}</p>
+                            <p class="item_text_time">{{ live.time }}</p>
+                        </a>
                     </div>
                 </div>
-            </div>
-            <div v-if="item.type==5" class="floorCon smallTopic">
-                <!--小专题-->
-                <ul class="mfw">
-                    <li v-for="topic in item.floorData" style="display: inline-block">
-                        <a :href="topic.link">
-                            <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
-                            <p v-text="topic.title"></p>
+                <div class="section_right_item">
+                    <div class="right_item_title">
+                        <p>热门文章</p>
+                        <a href="https://www.caimei365.com/info/center-3-1.html" target="_blank">更多></a>
+                    </div>
+                    <div class="right_item_main" v-for="(live,index) in liveList">
+                        <a href="" class="item_banner" v-if="index === 0" target="_blank">
+                            <img :src="live.banner" alt="">
+                            <div class="name">{{ live.title }}</div>
                         </a>
-                    </li>
-                </ul>
-            </div>
-            <div v-if="item.type==3">
-                <div class="floorTit">
-                    <h2 v-text="item.title" data-id="3">优质供应商</h2>
-                    <h5>采美正品联盟 质量保证</h5>
+                        <a href="" class="item_text" v-if="index > 0" target="_blank">
+                            <p class="item_text_name">{{ live.title }}</p>
+                            <p class="item_text_time">{{ live.time }}</p>
+                        </a>
+                    </div>
                 </div>
-                <div class="floorCon">
-                    <div class="supplierList">
-                        <ul class="clear mfw">
-                            <li><img src="/img/common/goodsup.png"/></li>
-                            <li v-for="topic in item.floorData" style="display: inline-block">
-                                <a :href="topic.link">
-                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
-                                    <p v-text="topic.title"></p>
-                                </a>
-                            </li>
-                        </ul>
+                <div class="section_right_item">
+                    <div class="right_item_title">
+                        <p>最新活动</p>
+                        <a href="/promotions.html" target="_blank">更多></a>
+                    </div>
+                    <div class="right_item_main" v-for="(live,index) in liveList">
+                        <a href="" class="item_banner" v-if="index === 0" target="_blank">
+                            <img :src="live.banner" alt="">
+                            <div class="name">{{ live.title }}</div>
+                        </a>
+                        <a href="" class="item_text" v-if="index > 0" target="_blank">
+                            <p class="item_text_name">{{ live.title }}</p>
+                            <p class="item_text_time">{{ live.time }}</p>
+                        </a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <!--右侧边栏导航-->
-    <div id="sideNav">
-        <div class="item">
-            <a v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value" href="javascript:void(0);"></a>
-        </div>
-    </div>
-    <!--左侧广告图-->
-    <div id="advertising">
-        <div class="item" v-for="ad in advertising">
-            <a :href="ad.link" target="_blank">
-                <img :src="ad.image" :alt="ad.title">
-            </a>
-            <span class="close"></span>
-        </div>
-    </div>
 </div>
-
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
 </body>
-</html>
+</html>

src/main/resources/templates/index_old.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网--医疗美容生活美容正品采购平台</title>
+    <meta name="baidu-site-verification" content="KbkRJg9357"/>
+    <template th:replace="components/head-link"></template>
+    <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>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 首页 -->
+<div id="container">
+    <!--首页图片轮播-->
+    <div id="swiper-container" class="swiper-container">
+        <ul class="swiper-wrapper">
+            <li class="swiper-slide mfc" v-for="img in images">
+                <a :href="img.link"><img :src="img.image" :alt="img.title"></a>
+            </li>
+        </ul>
+        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in images.length"></span></div>
+        <a class="swiper-button-prev" href="javascript:void(0)"></a>
+        <a class="swiper-button-next" href="javascript:void(0)"></a>
+    </div>
+    <!--移动端首页导航-->
+    <div class="mNavBox h5Only">
+        <ul class="mfw">
+            <!--导航菜单-->
+            <li class="first" th:each="menu: ${topMenuList}">
+                <a th:if="${menu.link}" class="nav mIcon" th:href="${menu.link}"><span th:text="${menu.name}"></span></a>
+                <a th:unless="${menu.link}" class="nav mIcon" href="javascript:void(0);" @click="showSubNav($event)">
+                    <span th:text="${menu.name}"></span>
+                </a>
+                <div class="navItem" th:if="${not #lists.isEmpty(menu.subMenus)}">
+                    <div class="mfw">
+                        <a class="second" th:each="sub: ${menu.subMenus}" th:href="${sub.link}">
+                            <img th:src="${sub.image}">
+                            <span th:text="${sub.name}"></span>
+                        </a>
+                    </div>
+                </div>
+            </li>
+            <li class="first"><a class="nav mIcon" href="/repair.html"><span>维修</span></a></li>
+        </ul>
+    </div>
+    <!--页面主体数据-->
+    <div class="wrap">
+        <div>
+            <div class="floorTit toLogin">
+                <h2 v-for="item in pageFloors" v-if="item.type==1" v-text="item.title" data-id="1"></h2>
+                <h2 v-else-if="pageFloors.length==0" data-id="1">推荐专区</h2>
+            </div>
+            <div class="floorCon">
+                <div id="recommendBox" class="swiper-container">
+                    <ul class="swiper-wrapper" v-cloak>
+                        <li class="swiper-slide productItem mfc" v-for="p in recommends">
+                            <div class="item">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                    <span v-if="p.actType==1||p.actType==2" :class="p.actType==1?'icon mIcon hot':'icon mIcon new'"></span>
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <span v-html="p.name"></span>
+                                </a>
+                                <div class="price mfhc">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="p.priceFlag==1">
+                                            <em>￥价格未公开</em>
+                                            <div class="btnBox">
+                                                <a href="javascript:void(0)" class="btn cat">价格未公开，请联系 0755-22907771</a>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                <em>￥会员可见</em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                <div class="btnBox">
+                                                    <a href="/user/setting/upgrade.html" class="btn">升级会员查看价格</a>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                        <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                        <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">登录查看价格</a></div>
+                                    </template>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+                </div>
+            </div>
+        </div>
+        <div v-for="item in pageFloors">
+            <div v-if="item.type==6">
+                <!--大专题-->
+                <div v-for="bigTopic in item.subFloors">
+                    <div class="floorTit">
+                        <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
+                        <h5 v-text="bigTopic.detail"></h5>
+                    </div>
+                    <div class="floorCon">
+                        <ul class="floorList clear mfw">
+                            <li v-for="floor in bigTopic.floorData" style="display: inline-block">
+                                <a :href="floor.link">
+                                    <img src="/img/base/placeholder.png" :data-original="floor.image" :alt="floor.title">
+                                    <p v-text="floor.title"></p>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div v-if="item.type==4">
+                <div class="floorTit">
+                    <h2 v-text="item.title" data-id="4">专题</h2>
+                    <a class="more" href="/promotions.html">更多商品专题</a>
+                </div>
+                <div class="floorCon">
+                    <div id="goodsTopic" class="swiper-container">
+                        <ul class="swiper-wrapper" v-cloak>
+                            <li class="swiper-slide mfc" v-for="topic in item.floorData">
+                                <a :href="topic.link">
+                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
+                                </a>
+                            </li>
+                        </ul>
+                        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in item.floorData.length"></span></div>
+                        <a class="swiper-button-prev" href="javascript:void(0)"></a>
+                        <a class="swiper-button-next" href="javascript:void(0)"></a>
+                    </div>
+                </div>
+            </div>
+            <div v-if="item.type==5" class="floorCon smallTopic">
+                <!--小专题-->
+                <ul class="mfw">
+                    <li v-for="topic in item.floorData" style="display: inline-block">
+                        <a :href="topic.link">
+                            <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
+                            <p v-text="topic.title"></p>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div v-if="item.type==3">
+                <div class="floorTit">
+                    <h2 v-text="item.title" data-id="3">优质供应商</h2>
+                    <h5>采美正品联盟 质量保证</h5>
+                </div>
+                <div class="floorCon">
+                    <div class="supplierList">
+                        <ul class="clear mfw">
+                            <li><img src="/img/common/goodsup.png"/></li>
+                            <li v-for="topic in item.floorData" style="display: inline-block">
+                                <a :href="topic.link">
+                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
+                                    <p v-text="topic.title"></p>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--右侧边栏导航-->
+    <div id="sideNav">
+        <div class="item">
+            <a v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value" href="javascript:void(0);"></a>
+        </div>
+    </div>
+    <!--左侧广告图-->
+    <div id="advertising">
+        <div class="item" v-for="ad in advertising">
+            <a :href="ad.link" target="_blank">
+                <img :src="ad.image" :alt="ad.title">
+            </a>
+            <span class="close"></span>
+        </div>
+    </div>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/product/instruelist.html

@@ -2,16 +2,94 @@
 <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
-    <title>采美365网-仪器</title>
+    <title>采美365网-仪器列表</title>
     <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/equipment/list.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/product/instruement-list.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
-    <!-- 引用头部 -->
-    <template th:replace="components/header"></template>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
 
-    <!-- 引入底部 -->
+<!-- 商品列表 -->
+<div id="productList">
+    <div class="crumbs-nav">
+        <div class="crumbs-link"> 筛选条件： </div>
+        <div  class="crumbs-nav-main">
+            <div class="crumbs-nav-item" v-if="termsNameflag">{{termsName}}</div>
+            <div class="crumbs-nav-item on" @click="remove" v-if="twoclassflag">{{twoclassName}} x</div>
+        </div>
+    </div>
+     <div  id="listClassify" class="classifyBox">
+        <div class="classification">
+            <div class="class-title">分类</div>
+            <div class="class-nav-main">
+                <div v-for="item in classify" @click="oneclass(item)" :class="{'on':item.smallTypeID==smallTypeID}">{{item.name}}</div>
+            </div>
+        </div>
+        <div class="classification">
+            <div class="class-title">二级</div>
+            <div class="class-nav-main">
+                <div v-for="item in tinytypeList" @click="twoclass(item)" :class="{'on':item.smallTypeID==twosmallTypeID}">{{item.name}}</div>
+            </div>
+        </div>
+        <div class="sortBox classification">
+            <div class="class-title" :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</div>
+                <div class="class-nav-main">
+                <template>
+                    <div class="down" @click="toSortList('sales',0)"><span>销量</span></div>
+                </template>
+                <template>
+                    <div class="down" @click="toSortList('favorite',0)"><span>人气</span></div>
+                </template>
+                <template>
+                    <div class="down"  @click="toSortList('price',0)"><span>价格</span></div>
+                </template>
+                </div>
+        </div>
+     </div>
+    <template>
+        <div class="list-container">
+            <ul class="clear mfw">
+                <li class="productItem " v-for="p in listData">
+                    <a class="image" :href="'/product-'+p.id+'.html'">
+                     <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                     <p class="name" v-html="p.name"></p>
+                     <div class="price mfhc">
+                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                            <template v-if="p.priceFlag==1">
+                                <em>￥价格未公开</em>
+                            </template>
+                            <template v-else>
+                                <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                    <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                </template>
+                                <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                    <em>￥会员可见</em>
+                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                </template>
+                                <template v-else>
+                                    <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                </template>
+                            </template>
+                        </template>
+                        <template v-else>
+                            <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                            <span class="listTag" >单品满减</span>
+                        </template>
+                     </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </template>
+</div>
+<!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<!--<script charset="utf-8" type="text/javascript" th:src="@{/js/product/list.js(v=${version})}"></script>-->
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/instruement-list.js(v=${version})}"></script>
 </body>
-
+</html>

src/main/resources/templates/product/instrument.html

@@ -14,11 +14,369 @@
             <div class="instrue-left">
                 <div class="top-category">
                     <ul class="normal-nav clearfix">
-                        <li v-for="(item,index)in categorylist">{{item.name}}</li>
+                        <li class="nav-list" v-for="(item,index) in categorylist" @click="toserch(item.name)"><i class=""></i>{{item.name}}</li>
                     </ul>
                 </div>
+                <div>
+                    <div class="floorTit">
+                        <h2>热门仪器</h2>
+                        <h5>采美正品联盟 质量保证</h5>
+                    </div>
+                    <div class="floorCon">
+                         <div class="hotList recommend">
+                            <ul class="clear mfw" :class="moreflag?'':'height'">
+                                <li  class="img01"><img src="https://img-b.caimei365.com/group1/M00/03/11/Cmgy61_S3bGAKnQdAAEL2eOO3HU338.png"/></li>
+                                <li class="productItem " v-for="p in recommends">
+                                    <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name"></a>
+                                    <a class="name" :href="'/product-'+p.id+'.html'" target="_blank"><p v-html="p.name"></p> </a>
+                                     <div class="price mfhc">
+                                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                            <template v-if="p.priceFlag==1">
+                                                <em>￥价格未公开</em>
+                                            </template>
+                                            <template v-else>
+                                                <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                    <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                    <em>￥会员可见</em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else>
+                                                    <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                            </template>
+                                        </template>
+                                        <template v-else>
+                                            <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                            <span class="listTag" >单品满减</span>
+                                        </template>
+                                     </div>
+                                </li>
+                            </ul>
+                            <div class="unfold" @click="seeMore" v-if="moreflag">查看更多 ∨</div>
+                         </div>
+                    </div>
+               </div>
+               <div>
+                    <div class="floorTit">
+                        <h2>推荐仪器</h2>
+                    </div>
+                    <div class="floorCon">
+                         <div class="hotList">
+                            <ul class="clear mfw" :class="moreflag?'':'height'">
+                                <li class="productItem " v-for="p in recommends">
+                                    <a class="image" :href="'/product-'+p.id+'.html'">
+                                        <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                    </a>
+                                    <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                        <p v-html="p.name"></p>
+                                    </a>
+                                     <div class="price mfhc">
+                                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                            <template v-if="p.priceFlag==1">
+                                                <em>￥价格未公开</em>
+                                            </template>
+                                            <template v-else>
+                                                <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                    <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                    <em>￥会员可见</em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else>
+                                                    <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                            </template>
+                                        </template>
+                                        <template v-else>
+                                            <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                            <span class="listTag" >单品满减</span>
+                                        </template>
+                                     </div>
+                                </li>
+                            </ul>
+                            <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
+                         </div>
+                    </div>
+               </div>
+               <div>
+                   <div class="floorTit">
+                        <h2>搭配项目</h2>
+                   </div>
+                    <div class="floorCon">
+                        <div class="hotList collocation">
+                            <ul class="clear" :class="moreflag?'':'height'">
+                                <li  class="productItem " v-for="p in recommends">
+                                   <a class="image" :href="'/product-'+p.id+'.html'">
+                                        <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                    </a>
+                                    <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                        <p v-html="p.name"></p>
+                                    </a>
+                                </li>
+                            </ul>
+                            <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
+                        </div>
+                    </div>
+               </div>
+               <div>
+                    <div class="floorTit">
+                        <h2>你可能需要</h2>
+                    </div>
+                    <div class="floorCon">
+                         <div class="hotList swiper-container" id="recommendBox" >
+                            <ul class="swiper-wrapper" :class="moreflag?'':'height'"  v-cloak>
+                                <li class="productItem " v-for="p in recommends">
+                                    <a class="image" :href="'/product-'+p.id+'.html'">
+                                        <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                    </a>
+                                    <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                        <p v-html="p.name"></p>
+                                    </a>
+                                     <div class="price mfhc">
+                                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                            <template v-if="p.priceFlag==1">
+                                                <em>￥价格未公开</em>
+                                            </template>
+                                            <template v-else>
+                                                <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                    <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                    <em>￥会员可见</em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else>
+                                                    <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                            </template>
+                                        </template>
+                                        <template v-else>
+                                            <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                            <span class="listTag" >单品满减</span>
+                                        </template>
+                                     </div>
+                                </li>
+                            </ul>
+                            <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+                         </div>
+                    </div>
+               </div>
+             <template>
+                <div class="floorTit">
+                     <h2>精彩活动</h2>
+                 </div>
+                 <div class="floorCon">
+                    <div class="hotList">
+                        <ul class="type" :class="moreflag?'':'height'">
+                            <li class='imgbaner'><img src="http://m.360buyimg.com/babel/jfs/t1/154859/31/6073/29706/5fb1d2c4E73af2908/9054ba7e4d595637.jpg.webp"></li>
+                            <li class="img01"><img src="https://img-b.caimei365.com/group1/M00/03/11/Cmgy61_S3bGAKnQdAAEL2eOO3HU338.png"/></li>
+                            <li class="productItem " v-for="p in recommends">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <p v-html="p.name"></p>
+                                </a>
+                                <div class="price">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="p.priceFlag==1">
+                                            <em>￥价格未公开</em>
+                                        </template>
+                                        <template v-else>
+                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                <em>￥会员可见</em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else>
+                                                <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                        <span class="listTag" >单品满减</span>
+                                    </template>
+                                 </div>
+                            </li>
+                        </ul>
+                        <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
+                    </div>
+                 </div>
+            </template>
+            <template>
+                <div class="floorTit">
+                     <h2>新品专区</h2>
+                 </div>
+                 <div class="floorCon">
+                    <div class="hotList">
+                        <ul class="type" :class="moreflag?'':'height'">
+                            <li class='imgbaner'><img src="http://m.360buyimg.com/babel/jfs/t1/154859/31/6073/29706/5fb1d2c4E73af2908/9054ba7e4d595637.jpg.webp"></li>
+                            <li class="img01"><img src="https://img-b.caimei365.com/group1/M00/03/11/Cmgy61_S3bGAKnQdAAEL2eOO3HU338.png"/></li>
+                            <li class="img02"><img src="https://img-b.caimei365.com/group1/M00/03/11/Cmgy61_S3WSAC5igAAIpbsQkSoo172.png"/></li>
+                            <li class="productItem " v-for="p in recommends">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <p v-html="p.name"></p>
+                                </a>
+                                <div class="price">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="p.priceFlag==1">
+                                            <em>￥价格未公开</em>
+                                        </template>
+                                        <template v-else>
+                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                <em>￥会员可见</em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else>
+                                                <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                        <span class="listTag" >单品满减</span>
+                                    </template>
+                                 </div>
+                            </li>
+                        </ul>
+                        <div class="unfold" @click="seeMore" >查看更多 ∨</div>
+                    </div>
+                 </div>
+            </template>
+            <template>
+                <div class="floorTit">
+                     <h2>测试测试</h2>
+                 </div>
+                 <div class="floorCon">
+                    <div class="hotList">
+                        <ul class="type" :class="moreflag?'':'height'">
+                            <li class='imgbaner'><img src="http://m.360buyimg.com/babel/jfs/t1/154859/31/6073/29706/5fb1d2c4E73af2908/9054ba7e4d595637.jpg.webp"></li>
+                            <li class="productItem " v-for="p in recommends">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <p v-html="p.name"></p>
+                                </a>
+                                <div class="price">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                            <template v-if="p.priceFlag==1">
+                                                <em>￥价格未公开</em>
+                                            </template>
+                                            <template v-else>
+                                                <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                    <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                    <em>￥会员可见</em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else>
+                                                    <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                            </template>
+                                        </template>
+                                        <template v-else>
+                                            <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                            <span class="listTag" >单品满减</span>
+                                        </template>
+                                 </div>
+                            </li>
+                        </ul>
+                        <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
+                    </div>
+                 </div>
+            </template>
+            <template>
+                <div class="floorTit">
+                     <h2>测试测试</h2>
+                 </div>
+                 <div class="floorCon">
+                    <div class="hotList">
+                        <ul class="type" :class="moreflag?'':'height'">
+                            <li class="productItem " v-for="p in recommends">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <p v-html="p.name"></p>
+                                </a>
+                                <div class="price">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="p.priceFlag==1">
+                                            <em>￥价格未公开</em>
+                                        </template>
+                                        <template v-else>
+                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                <em>￥会员可见</em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else>
+                                                <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                        <span class="listTag" >单品满减</span>
+                                    </template>
+                                 </div>
+                            </li>
+                            <li class='imgbaner'><img src="https://img-b.caimei365.com/group1/M00/03/12/Cmgy61_S4BWAYIrqAAMWFPMHILs549.png"></li>
+                        </ul>
+                        <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
+                    </div>
+                 </div>
+            </template>
+            </div>
+            <div class="instrue-right">
+                <div class="wrap_tittle">
+                    大家都在搜
+                <span class="line"></span>
+                </div>
+                <div class="hot-search">
+                   <ul>
+                       <li class="hot-list" v-for="(item,index) in hotlist">{{item.name}}</li>
+                   </ul>
+                </div>
             </div>
-            <div class="instrue-right"></div>
         </div>
     </div>
 

src/main/resources/templates/product/produce-list.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-仪器</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/equipment/list.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+    <!-- 引用头部 -->
+    <template th:replace="components/header"></template>
+
+    <!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+</body>
+

src/main/resources/templates/product/produce.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-仪器</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/equipment/list.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+    <!-- 引用头部 -->
+    <template th:replace="components/header"></template>
+
+    <!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+</body>
+

src/main/resources/templates/single-page/investment.html

@@ -6,22 +6,22 @@
     <template th:replace="components/head-link"></template>
     <style type="text/css">
         /** PC */
-        @media screen and (min-width:768px){#investment .wrap{width:1184px;margin:0 auto -30px auto}
-            #investment .wrap img{display:block;width:100%}
-            #investment .wrap .btn{position:fixed;right:50%;margin-right:-510px;width:235px;top:200px}
-            #investment .wrap .btn a{display:block;width:235px;height:45px;margin-bottom:16px}
-            #investment .more{background:url(/img/investment/pc_more.png) no-repeat center center}
-            #investment .back{background:url(/img/investment/pc_back.png) no-repeat center center}
-            #investment .down{background:url(/img/investment/pc_download.png) no-repeat center center}
+        @media screen and (min-width:768px){#investment .wrap{width:1184px;margin:0 auto -30px auto;}
+            #investment .wrap img{display:block;width:100%;}
+            #investment .wrap .btn{position:fixed;right:50%;margin-right:-510px;width:152px;top:250px;}
+            #investment .wrap .btn a{display:block;width:152px;height:42px;margin-bottom:16px;}
+            #investment .more{background:url(/img/investment/icon-more.png) no-repeat center center;}
+            #investment .back{background:url(/img/investment/icon-back.png) no-repeat center center;}
+            #investment .bank{background:url(/img/investment/icon-bank.png) no-repeat center center;}
         }
         /** 移动端 */
-        @media screen and (max-width:768px){#investment .wrap{width:100vw;margin:0 auto;position:relative}
+        @media screen and (max-width:768px){#investment .wrap{width:100vw;margin:0 auto;position:relative;}
             #investment .wrap img{display:block;width:100%}
-            #investment .wrap .btn{position:absolute;left:23vw;bottom:4vw}
-            #investment .wrap .btn a{display:inline-block;width:54vw;height:12vw;background-size:100%}
-            #investment .more{background:url(/img/investment/pc_more.png) no-repeat center center}
-            #investment .back{background:url(/img/investment/pc_back.png) no-repeat center center}
-            #investment .down{background:url(/img/investment/pc_download.png) no-repeat center center}
+            #investment .wrap .btn{position:absolute;left:50%;bottom:4vw}
+            #investment .wrap .btn a{display:inline-block;width:39vw;height:12vw;background-size:100%;}
+            #investment .more{background:url(/img/investment/icon-more.png) no-repeat center center;}
+            #investment .back{background:url(/img/investment/icon-back.png) no-repeat center center;}
+            #investment .bank{background:url(/img/investment/icon-bank.png) no-repeat center center;}
         }
     </style>
 </head>
@@ -39,14 +39,14 @@
                 <img src="/img/investment/pc_3.jpg">
                 <div class="btn">
                     <a href="javascript:void(0);" class="more" @click="showMore()"></a>
-                    <!--<a href="javascript:void(0);" class="down" @click="toDownload()"></a>-->
+                    <a href="https://www.caimei365.com/page.html?id=223" class="bank" target="_blank"></a>
                 </div>
             </template>
             <template v-else>
                 <img src="/img/investment/pc_4.jpg">
                 <div class="btn">
                     <a href="javascript:void(0);" class="back" @click="goBack()"></a>
-                    <!--<a href="javascript:void(0);" class="down" @click="toDownload()"></a>-->
+                    <a href="https://www.caimei365.com/page.html?id=223" class="bank" target="_blank"></a>
                 </div>
             </template>
         </div>
@@ -57,6 +57,7 @@
                 <img src="/img/investment/h5_3.jpg">
                 <div class="btn">
                     <a href="javascript:void(0);" class="more" @click="showMore()"></a>
+                    <a href="https://www.caimei365.com/page.html?id=223" class="bank"></a>
                 </div>
             </template>
             <template v-else>
@@ -64,6 +65,7 @@
                 <img src="/img/investment/h5_5.jpg">
                 <div class="btn">
                     <a href="javascript:void(0);" class="back" @click="goBack()"></a>
+                    <a href="https://www.caimei365.com/page.html?id=223" class="bank"></a>
                 </div>
             </template>
         </div>

src/main/resources/templates/single-page/topic.html

@@ -23,6 +23,7 @@
             <div class="title">
                 <span v-text="floor.title"></span>
                 <a v-if="floor.link" :href="floor.link" class="more">查看更多>>></a>
+                <a v-if="pageType==6" class="talk_link" href="https://www.caimei365.com/info/detail-5856-1.html" target="_blank">超皮秒防伪查询</a>
             </div>
             <ul class="content clear">
                 <li v-for="item in floor.floorData">