页面结构调整，添加项目仪器

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

@@ -0,0 +1,45 @@
+package com.caimei.www.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+
+/**
+ * 项目仪器(instrument)
+ *
+ * @author : Charles
+ * @date : 2020/7/16
+ */
+@Controller
+public class InstrumentController extends BaseController {
+
+	private static final String INSTRUMENT_SEARCH_PATH = "instrument/search";
+	private static final String INSTRUMENT_DETAIL_PATH = "instrument/detail";
+
+//    private InstrumentService instrumentService;
+//    @Autowired
+//    public void setInstrumentService(InstrumentService instrumentService) {
+//        this.instrumentService = instrumentService;
+//    }
+
+
+    /**
+     * 供应商搜索结果页
+     */
+    @GetMapping("/instrument/search.html")
+    public String search() {
+        return INSTRUMENT_SEARCH_PATH;
+    }
+
+    /**
+     * 供应商详情页
+     */
+    @GetMapping("/instrument/detail.html")
+    public String home(final Model model, @RequestParam("id") Integer instrumentId) {
+        /*InstrumentDetail detail = instrumentService.getInstrumentDetailById(instrumentId);
+        model.addAttribute("instrument", detail);*/
+        return INSTRUMENT_DETAIL_PATH;
+    }
+
+}

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

@@ -15,7 +15,7 @@ import org.springframework.web.bind.annotation.ResponseBody;
 import java.util.List;
 
 /**
- * 商品页面及部分接口
+ * 商品（product）
  *
  * @author : Charles
  * @date : 2020/6/12
@@ -54,7 +54,7 @@ public class ProductController extends BaseController {
      * 商品详情页
      */
     @GetMapping("/product/detail.html")
-    public String detail(final Model model, @RequestParam("pid") Integer productId) {
+    public String detail(final Model model, @RequestParam("id") Integer productId) {
         ProductDetail detail = productService.getProductDetailById(productId);
         model.addAttribute("product", detail);
         return PRODUCT_DETAIL_PATH;

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

@@ -13,9 +13,9 @@ import org.springframework.web.bind.annotation.PathVariable;
 @Controller
 public class RedirectController {
 
-	@GetMapping("/product-{pid}.html")
-	public String toTest(@PathVariable("pid") Integer productId) {
-		return "redirect:/product/detail.html?pid=" + productId;
+	@GetMapping("/product-{id}.html")
+	public String toTest(@PathVariable("id") Integer productId) {
+		return "redirect:/product/detail.html?id=" + productId;
 	}
 
 }

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

@@ -6,7 +6,7 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 
 /**
- * Description
+ * 供应商（supplier）
  *
  * @author : Charles
  * @date : 2020/7/15
@@ -17,6 +17,12 @@ public class SupplierController extends BaseController {
 	private static final String SUPPLIER_SEARCH_PATH = "supplier/search";
 	private static final String SUPPLIER_HOME_PATH = "supplier/home";
 
+//    private SupplierService supplierService;
+//    @Autowired
+//    public void setSupplierService(SupplierService supplierService) {
+//        this.supplierService = supplierService;
+//    }
+
     /**
      * 供应商搜索结果页
      */
@@ -29,9 +35,9 @@ public class SupplierController extends BaseController {
      * 供应商详情页
      */
     @GetMapping("/supplier/home.html")
-    public String home(final Model model, @RequestParam("sid") Integer shopId) {
-        /*ProductDetail detail = productService.getProductDetailById(productId);
-        model.addAttribute("product", detail);*/
+    public String home(final Model model, @RequestParam("id") Integer supplierId) {
+        /*SupplierDetail detail = supplierService.getSupplierById(supplierId);
+        model.addAttribute("supplier", detail);*/
         return SUPPLIER_HOME_PATH;
     }
 

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

@@ -87,7 +87,7 @@ li{list-style:none;}
 #sideNav .item .phone:before{background-position:31.5% 26%;}
 #sideNav .item .toTop:before{background-position:21.5% 26%;}
 #sideNav .phoneHover{display:none;background-color:rgba(74,79,88,.7);z-index:999;}
-#sideNav .phoneHover>div{box-sizing:border-box;width:74.6vw;height:107.3vw;padding-top:32vw;background:url(/img/index/hotline_m.jpg) no-repeat left top;background-size:100% 100%;border-radius:1.6vw;position:relative;top:50%;margin:-60vw auto 0 auto;line-height:9.6vw;font-size:4.2vw}
+#sideNav .phoneHover>div{box-sizing:border-box;width:74.6vw;height:107.3vw;padding-top:32vw;background:url(/img/common/hotline_m.jpg) no-repeat left top;background-size:100% 100%;border-radius:1.6vw;position:relative;top:50%;margin:-60vw auto 0 auto;line-height:9.6vw;font-size:4.2vw}
 #sideNav .phoneHover i{font-style:normal;color:#FFF}
 #sideNav .phoneHover .close{position:absolute;left:50%;bottom:-12vw;margin-left:-2.7vw;width:5.4vw;height:5.4vw;line-height:5.4vw;text-align:center;border:1px solid #FFF;border-radius:50%;font-size:0}
 #sideNav .phoneHover .close:before{content:'\2715';font-size:4vw}

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

@@ -90,7 +90,7 @@ li{list-style:none;}
 #sideNav .item .phone:before{width:32px;height:32px;background-position:0 -254px;position:absolute;top:4px;left:16px}
 #sideNav .item .toTop{padding:12px 16px 12px 48px;line-height:16px;}
 #sideNav .item .toTop:before{width:32px;height:32px;background-position:-42px -254px;position:absolute;top:4px;left:16px}
-#sideNav .item .phoneHover{display:none;position:absolute;left:-282px;top:-168px;z-index:999;width:281px;height:383px;background:url(/img/index/hotline.png) no-repeat left top;box-sizing:border-box;padding:120px 20px 0 0;line-height:32px;font-size:16px;white-space:nowrap}
+#sideNav .item .phoneHover{display:none;position:absolute;left:-282px;top:-168px;z-index:999;width:281px;height:383px;background:url(/img/common/hotline.png) no-repeat left top;box-sizing:border-box;padding:120px 20px 0 0;line-height:32px;font-size:16px;white-space:nowrap}
 #sideNav .item .phoneHover a{color:#E15616}
 #sideNav .item .phoneHover span{color:#93979F;margin-top:10px}
 #sideNav .item .phoneHover a:hover{text-decoration:underline}

src/main/resources/static/css/instrument/detail.h5.css

@@ -0,0 +1,66 @@
+@charset "utf-8";
+/**
+* 移动端
+*/
+li{list-style:none}
+.productBox{width:100%;background:#FFF}
+.productBox .imageBox{width:100%;height:100vw;position:relative}
+#swiperImage .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center}
+#swiperImage .swiper-wrapper img{width:auto;height:100vw;display:block}
+.productBox .detailBox{box-sizing:border-box;padding:0 3.3vw;overflow:hidden}
+.productBox .detailBox .crumbs{height:8vw;line-height:8vw;font-size:3.1vw;overflow:hidden;color:#93979F}
+.productBox .detailBox .crumbs a{color:#93979F}
+.productBox .detailBox .title{font-size:4.2vw;font-weight:bold;line-height:6.4vw;color:#4A4F58;margin-bottom:3.5vw}
+.productBox .detailBox .tags span{display:inline-block;height:4.2vw;line-height:4.2vw;padding:0 1vw;font-size:2.6vw;color:#FFF;background:#86B2FF;border-radius:2px;margin-right:2.7vw}
+.productBox .detailBox .detail{box-sizing:border-box;padding:2.8vw;font-size:3.4vw;line-height:7.5vw;color:#93979F;background:#F3F7FE;border-radius:2px;position:relative;margin:3.5vw 0}
+.productBox .detailBox .detail hr{border:none;border-top:1px dashed #BEC2C9;margin:2vw 0}
+.productBox .detailBox .row>i{font-style:normal;margin-right:2vw}
+.productBox .detailBox .row em{font-style:normal;color:#4A4F58}
+.productBox .detailBox .row em.ser{color:#93979F;display:inline-block;margin-right:4vw}
+.productBox .detailBox .row em.ser:before{content:'\2713';display:inline-block;width:3.4vw;height:3.4vw;text-align:center;line-height:3.4vw;font-size:3.4vw;background:#E15616;border-radius:1.7vw;color:#FFF;margin-right:1.4vw}
+.productBox .detailBox .price{height:21vw}
+.productBox .detailBox .price .icon{display:inline-block;font-size:0;width:4vw;height:4vw;line-height:4vw;position:relative;vertical-align:text-top;margin-top:0}
+.productBox .detailBox .price .icon.on{position:absolute;left:0;top:0;margin:0}
+.productBox .detailBox .price .icon:before{width:4vw;height:4vw;background-position:55% 25.2%}
+.productBox .detailBox .price .icon.on:before{background-position:49% 25.2%}
+.productBox .detailBox .number{display:inline-block;width:26.6vw;line-height:6.4vw;height:6.4vw;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top}
+.productBox .detailBox .number>em{display:inline-block;width:6.4vw;height:6.4vw;background:#FFE6DC;font-size:4vw;line-height:6vw;vertical-align:top}
+.productBox .detailBox .number input{width:13.5vw;border:none;line-height:6vw;vertical-align:top;text-align:center;color:#E15616;font-size:3.4vw}
+.productBox .detailBox .detail .flag{position:absolute;right:0;top:0;font-size:0}
+.productBox .detailBox .detail .flag:before{display:inline-block;width:20vw;height:20vw;background-position:-2.5% 52%}
+.productBox .detailBox .detail .btn{position:absolute;right:2.8vw;top:2.8vw;height:6vw;line-height:6vw;padding:0 2vw;background:#F94B4B;font-size:3.4vw;color:#FFF;border-radius:2px}
+.productBox .detailBox .btnBox:before{content:'';display:block;width:200%;height:2.7vw;background:#F5F5F5;margin-left:-25%}
+.productBox .detailBox .btnBox{text-align:center}
+.productBox .detailBox .btnBox .cart,.productBox .detailBox .btnBox .buy{display:inline-block;width:40vw;height:11.2vw;line-height:11.2vw;text-align:center;border:1px solid #E15616;background:#FFE6DC;cursor:pointer;border-radius:2px;font-size:3.4vw;color:#E15616;margin:1.7vw 1.1vw}
+.productBox .detailBox .btnBox .buy{background:#E15616;color:#FFF}
+.productBox .detailBox .concatBox{height:20vw;padding-bottom:4vw}
+.productBox .detailBox .concatBox img{height:20vw;width:auto}
+
+.recommendBox{margin-top:2vw;width:100%;background:#FFF}
+.recommendBox .hd{font-size:3.4vw;color:#E15621;font-weight:bold;padding:2.7vw;text-align:center}
+#productRecommend{width:100%;height:41.8vw;overflow:hidden;position:relative;box-sizing:border-box;padding:0 2.4vw}
+#productRecommend li{width:29.2vw!important;height:41.8vw;overflow:hidden;text-align:center;background:none}
+#productRecommend li .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:26.8vw;height:41.8vw;font-size:3.4vw}
+#productRecommend li .item img{display:block;width:100%;height:26.8vw}
+#productRecommend li .item span{color:#93979F;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:2.6vw}
+.mShopBox{box-sizing:border-box;background:#FFF;margin:2.6vw 0;line-height:7.5vw;font-size:3.4vw;padding:2vw 3.3vw}
+.mShopBox span{display:block;white-space:nowrap;color:#93979F}
+.mShopBox span em{white-space:normal;font-style:normal;line-height:4.5vw;display:inline-block;vertical-align:top;box-sizing:border-box;padding:1.5vw 0;width:76vw}
+.mShopBox span:first-child em{width:auto;margin-right:2vw;}
+.mShopBox .shop,.shopBox .heart{vertical-align:text-top}
+.mShopBox .shop:before{width:7.5vw;height:6vw;background-position:-1% 60%;margin-top:-1vw;}
+.mShopBox .heart:before{width:5.5vw;height:5.5vw;background-position:0% 36.5%}
+.mShopBox .name:after{content:'\276F';float:right;font-size:4vw;color:#707070}
+
+.detailBox{background:#FFF;margin-bottom: 2.7vw;}
+.detailBox .tabTit{text-align:justify;padding:1.5vw 3.3vw;line-height:0;font-size:0;}
+.detailBox .tabTit span{display:inline-block;height:7.5vw;line-height:7.5vw;border-bottom:2px solid transparent;color:#93979F;font-size:3.4vw}
+.detailBox .tabTit span.on{color:#E15621;border-color:#E15621}
+.detailBox .tabTit:after{content:'';display:inline-block;width:100%}
+.detailBox .tabCon{padding:1.2vw 3.3vw 3.3vw;text-align:center;font-size:3.4vw;}
+.detailBox .tabCon img{max-width:100%}
+.detailBox .tabCon table{width:100%;text-align:left}
+.detailBox .tabCon td{padding:1.5vw;line-height:5vw}
+.detailBox .tabCon td:nth-of-type(1){width:20%;color:#93979F}
+.detailBox .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
+.detailBox .comment{color:#93979F;padding:5vw 0}

src/main/resources/static/css/instrument/detail.pc.css

@@ -0,0 +1,95 @@
+@charset "utf-8";
+/**
+ * PC端
+ */
+li{list-style:none;}
+.productBox{width:100%;margin:16px 0;background:#FFF;box-sizing:border-box;padding:15px}
+.productBox .imageBox{float:left;width:452px;height:545px;position:relative}
+.productBox .detailBox{float:right;width:686px}
+.productBox img{width:100%;height:100%;display:block}
+.productBox .bigImage{width:452px;height:452px;background:#F3F7FE}
+.productBox .bigImage .mask{display:none;position:absolute;left:0;top:0;width:215px;height:215px;border:1px solid #aaa;background:rgba(255,208,22,.4);opacity:.5;filter:alpha(opacity:50);cursor:move}
+.productBox .smallImage{height:79px;padding-top:14px;overflow:hidden}
+.productBox .smallImage ul{width:452px}
+.productBox .smallImage li{float:left;box-sizing:border-box;width:79px;height:79px;margin-left:14px;background:#F3F7FE;opacity:.5;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s}
+.productBox .smallImage li.on{opacity:1;border:1px solid #E15616}
+.productBox .smallImage li:first-child{margin-left:0}
+.productBox .zoomImage{display:none;overflow:hidden;position:absolute;right:-466px;top:0;width:452px;height:452px;border:1px solid #e4e4e4;z-index:9999;background:#FFF}
+.productBox .zoomImage img{width:950px;height:950px;margin-right:10px;display:block}
+
+.productBox .detailBox .crumbs{height:28px;line-height:28px;font-size:14px;overflow:hidden;color:#93979F}
+.productBox .detailBox .crumbs a{color:#93979F}
+.productBox .detailBox .crumbs a:hover{color:#E15616}
+.productBox .detailBox .title{font-size:18px;font-weight:bold;line-height:24px;padding:5px 0;color:#4A4F58}
+.productBox .detailBox .tags{padding:2px 0}
+.productBox .detailBox .tags span{display:inline-block;height:16px;line-height:16px;padding:0 6px;font-size:12px;color:#FFF;background:#86B2FF;border-radius:2px;margin-right:10px}
+.productBox .detailBox .detail{box-sizing:border-box;padding:14px 20px;font-size:14px;color:#93979F;background:#F3F7FE;border-radius:2px;margin:10px 0;position:relative;}
+.productBox .detailBox .detail hr{border:none;border-top:1px dashed #BEC2C9;margin:12px 0}
+.productBox .detailBox .row{position:relative;padding:3px 0 3px 62px;line-height:24px}
+.productBox .detailBox .row .l{position:absolute;left:0;top:3px;display:inline-block;width:60px;height:24px;text-align:justify}
+.productBox .detailBox .row .l:after{content:'';display:inline-block;width:100%}
+.productBox .detailBox .row>i{font-style:normal;margin-right:14px}
+.productBox .detailBox .row em{font-style:normal;color:#4A4F58}
+.productBox .detailBox .row em.ser{color:#93979F;display:inline-block;margin-right:20px}
+.productBox .detailBox .row em.ser:before{content:'\2713';display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;font-size:12px;background:#E15616;border-radius:6px;color:#FFF;margin-right:5px}
+.productBox .detailBox .price{height:24px}
+.productBox .detailBox .price .icon{display:inline-block;font-size:0;width:24px;height:24px;line-height:24px;position:relative;vertical-align:top}
+.productBox .detailBox .price .icon.on{position:absolute;left:0;top:0;margin:0}
+.productBox .detailBox .price .icon:before{width:24px;height:24px;background-position:-146px -251px}
+.productBox .detailBox .price .icon.on:before{background-position:-116px -251px}
+.productBox .detailBox .number{display:inline-block;width:130px;line-height:24px;height:24px;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top;}
+.productBox .detailBox .number>em{display:inline-block;width:24px;height:22px;background:#FFE6DC;font-size:20px;line-height:20px;vertical-align:top;cursor:pointer}
+.productBox .detailBox .number input{width:80px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616;}
+
+.productBox .detailBox .detail .flag{position:absolute;right:0;top:0;font-size:0}
+.productBox .detailBox .detail .flag:before{display:inline-block;width:115px;height:115px;background-position:0 -453px}
+.productBox .detailBox .detail .btn{position:absolute;right:20px;top:20px;height:32px;line-height:32px;padding:0 16px;background:#F94B4B;font-size:14px;color:#FFF;border-radius:2px}
+.productBox .detailBox .detail .row .btn{top:6px;right:0}
+.productBox .detailBox .btnBox{text-align:center;padding:15px 0}
+.productBox .detailBox .btnBox .cart,.productBox .detailBox .btnBox .buy{display:inline-block;width:160px;height:40px;line-height:40px;text-align:center;border:1px solid #E15616;background:#FFE6DC;cursor:pointer;border-radius:2px;font-size:16px;color:#E15616;margin:0 15px}
+.productBox .detailBox .btnBox .cart:before{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:-30px -1px;margin-right:2px}
+.productBox .detailBox .btnBox .buy{background:#E15616;color:#FFF}
+.productBox .detailBox .detail .btn:hover,.productBox .detailBox .btnBox .cart:hover,.productBox .detailBox .btnBox .buy:hover{opacity:.8}
+.productBox .detailBox .concatBox{height:120px;padding:15px}
+.productBox .detailBox .concatBox img{height:120px;width:auto}
+
+.recommendBox{margin-bottom:16px;overflow: hidden;}
+.recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
+#productRecommend{width:100%;min-height:205px;padding:15px 7px;background:#FFF}
+#productRecommend li{float:left;width:167px;height:205px;overflow:hidden;}
+#productRecommend li .item{width:153px;height:205px;margin:0 auto;line-height:22px}
+#productRecommend li .item a{display:block;width:100%;height:100%;color:#93979F}
+#productRecommend li .item a:hover{color:#E15616}
+#productRecommend li .item img{display:block;width:153px;height:153px}
+#productRecommend .swiper-wrapper{height:205px;}
+#productRecommend .swiper-pagination{width:100%;height:14px;z-index:1;text-align:center;font-size:0;}
+#productRecommend .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#productRecommend .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#productRecommend .swiper-pagination span.on{width:28px;opacity:1;}
+
+.wrap>.detailBox{float:left;box-sizing:border-box;padding:0 16px;width:884px;background:#FFF}
+.detailBox .tabTit{height:40px;line-height:40px;border-bottom:1px solid #E15621;font-size:16px;color:#93979F}
+.detailBox .tabTit span{display:inline-block;box-sizing:border-box;min-width:130px;text-align:center;height:100%;padding:0 32px;cursor:pointer}
+.detailBox .tabTit span:hover{color:#E15621}
+.detailBox .tabTit span.on,.detailBox .tabTit span.on:hover{background:#E15621;color:#FFF}
+.detailBox .tabCon{padding:16px 0;text-align:center}
+.detailBox .tabCon img{max-width:100%;}
+.detailBox .tabCon table{width:100%;text-align:left}
+.detailBox .tabCon td{padding:10px 12px;line-height:20px}
+.detailBox .tabCon td:nth-of-type(1){width:20%;color:#93979F}
+.detailBox .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
+.detailBox .comment{color:#93979F;padding:40px 0}
+
+.wrap>.rgt{float:right;width:284px}
+.wrap>.rgt .hd{height:40px;line-height:40px;padding:0 16px;font-size:16px;color:#E15616;font-weight:bold;background:#FEF6F3}
+.shopBox{margin-bottom:16px;background:#FFF}
+.shopBox .bd{padding:0 16px 16px}
+.shopBox .bd .name{height:40px;line-height:40px;font-weight:bold;color:#4A4F58;font-size:14px;border-bottom:1px solid #F7F7F7}
+.shopBox .shop,.shopBox .heart{vertical-align:middle;display:inline-block;width:25px;}
+.shopBox .shop:before{width:30px;height:25px;background-position:5px -297px}
+.shopBox .bd .heart:before{width:25px;height:25px;background-position:-35px -297px}
+.shopBox .bd .tit{line-height:30px;font-weight:bold;color:#4A4F58;font-size:14px}
+.shopBox .bd .con{line-height:20px;color:#93979F;font-size:12px;margin-bottom:12px}
+.shopBox .bd .btn{display:block;width:100%;height:36px;line-height:36px;text-align:center;box-sizing:border-box;border-radius:2px;border:1px solid #E15616;font-size:14px;color:#E15616;margin-top:12px}
+.wrap>.rgt .contact{background:#FFF}
+.wrap>.rgt .contact .bd{padding:10px 16px 16px;line-height:24px;font-size:14px;color:#4A4F58;font-weight:bold}

src/main/resources/static/css/instrument/search.h5.css

@@ -0,0 +1,12 @@
+@charset "utf-8";
+/**
+* 移动端
+*/
+li{list-style:none}
+footer{display:none!important}
+.loading{box-sizing:border-box;padding:20vw 0;text-align:center}
+.empty{box-sizing:border-box;padding:15vw 0;text-align:center;color:#4A4F58;line-height:8vw;font-size:3.4vw}
+.empty img{width:40vw;height:40vw}
+.empty a{color:#E15616}
+.noMore{height:10vw;line-height:10vw;text-align:center;color:#ccc}
+.instrumentList{width:100vw;margin:2.8vw auto 0;box-sizing:border-box;padding:2.6vw 3.3vw;background:#FFF;overflow:hidden}

src/main/resources/static/css/instrument/search.pc.css

@@ -0,0 +1,10 @@
+@charset "utf-8";
+/**
+ * PC端
+ */
+li{list-style:none;}
+.loading{box-sizing:border-box;padding:200px 0;text-align:center;}
+.empty{box-sizing:border-box;padding:100px 0;text-align:center;color:#4A4F58;line-height:30px;font-size:16px;}
+.empty img{width:180px;height:180px;}
+.empty a{color:#E15616;}
+.instrumentList{width:1184px;margin:16px auto;background:#FFF}

src/main/resources/static/js/instrument/detail.js

@@ -0,0 +1,68 @@
+var instrumentDetail = new Vue({
+    el: "#container",
+    data: {
+        productId: 0,
+        userId: 6,
+        userIdentity: '',
+        images: [],
+        price: 564,
+        priceFlag: 2,
+        recommendType: 1,
+        recommendPage: 1,
+        recommends: [],
+        parameters: [],
+
+    },
+    computed: {},
+    methods: {
+        getImages: function(){
+            var _self = this;
+            if(this.productId ===0){return;}
+            $.getJSON("/product/images",{productId: this.productId}).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.images = r.data;
+                    setTimeout(function(){
+                        if (isPC) {
+                            var magnifier = new ImageMagnifier(
+                                '#imgShown .smallImage li'
+                                ,'#imgShown .bigImage'
+                                ,'#imgShown .zoomImage'
+                                ,'#imgShown .mask'
+                                ,'#imgShown .zoom'
+                                ,"on"
+                            ).init();
+                        } else {
+                            var swiper = new Swiper('#swiperImage', {
+                                loop : true,
+                                autoplay: {
+                                    delay: 2000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination',
+                                    type: 'fraction'
+                                }
+                            });
+                        }
+                    },500);
+                }
+            });
+        }
+    },
+    created: function () {
+        this.productId = getUrlParam("pid") ? getUrlParam("pid")*1 : 0;
+        var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId*1;
+        }
+        this.getImages();
+    },
+    mounted: function () {
+        this.getRecommends();
+        $('.detailBox').slide({
+            mainCell:".tabCon"
+            ,titCell:".tabTit span"
+            ,trigger: "click"
+        });
+    }
+});

src/main/resources/static/js/instrument/search.js

@@ -0,0 +1,114 @@
+var instrumentList = new Vue({
+    el: "#container",
+    data: {
+        searchFlag: false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        params: {
+            size: 0,
+            num: 0,
+            keyword: ""
+        },
+        listData: [],
+        listRecord: 0,
+        pageInput: ''
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            total = total > 0 ? total : 1;
+            var index = this.params.num, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                var params = {pageNum: pageNum};
+                window.location.href = updateUrlParam(params);
+            }
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        getListByKeyword: function () {
+            var _self = this;
+            $.getJSON(spiServer+"/search/query/equipment", {
+                keyword: this.params.keyword,
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    var result = JSON.parse(r.data);
+                    _self.listRecord = result.total;
+                    if(isPC){
+                        _self.listData = result.items;
+                    }else{
+                        _self.listData = _self.listData.concat(result.items);
+                    }
+                }
+                _self.listLoading = false;
+                _self.requestFlag = true;
+            })
+        },
+
+    },
+    created: function () {
+        if(isPC){
+            this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 10;
+            this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
+        }else{
+            this.params.size = 10;
+            this.params.num = 1;
+        }
+        this.params.keyword = getUrlParam("keyword") ? getUrlParam("keyword") : "";
+        // 获取列表数据
+        this.getListByKeyword();
+    },
+    mounted: function () {
+        var searchTypeID = getUrlParam("searchTypeID");
+        var _self = this;
+        if(!isPC){
+            //移动端上垃加载更多
+            $(window).on('scroll', function(){
+                var scrollTop = $(this).scrollTop();
+                var scrollHeight = $(document).height();
+                var windowHeight = window.innerHeight;
+                if (scrollTop + windowHeight >= scrollHeight) {
+                    //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                    var totalPage = Math.ceil(_self.listRecord / _self.params.size)?Math.ceil(_self.listRecord / _self.params.size):1;
+                    var next = _self.params.num+1;
+                    if(next <= totalPage){
+                        _self.params.num = next;
+                        if (_self.requestFlag){
+                            console.log(_self.params);
+                            // 获取列表数据
+                            _self.getListByKeyword();
+                        }
+                        _self.requestFlag = false;
+                    }else{
+                        //到底了
+                        _self.noMore = true;
+                    }
+                }
+            });
+        }
+    }
+});

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

@@ -27,7 +27,7 @@
         <div class="footContact wrap">
             <div>
                 <p>
-                    <img src="/img/base/qr_code_caimei.png"/>
+                    <img src="/img/common/qr_code_caimei.png"/>
                     <span>采美商城</span>
                 </p>
                 <!--<p>
@@ -35,11 +35,11 @@
                     <span>采美小程序</span>
                 </p>-->
                 <p>
-                    <img src="/img/base/qr_code_hehe.png"/>
+                    <img src="/img/common/qr_code_hehe.png"/>
                     <span>呵呵商城</span>
                 </p>
                 <p>
-                    <img src="/img/base/qr_code_kefu.png"/>
+                    <img src="/img/common/qr_code_kefu.png"/>
                     <span>采美客服</span>
                 </p>
             </div>

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

@@ -5,14 +5,14 @@
             <li>
                 <a href="javascript:void(0);">采美365网</a>
                 <div class="qrCode">
-                    <img src="/img/base/qr_code_caimei.png" alt="采美365网"/>
+                    <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/base/qr_code_hehe.png" alt="呵呵商城"/>
+                    <img src="/img/common/qr_code_hehe.png" alt="呵呵商城"/>
                     <p>扫描关注</p>
                 </div>
             </li>
@@ -89,7 +89,7 @@
                         </div>
                     </div>
                     <div v-else class="empty">
-                        <img src="/img/base/empty_cart.png">
+                        <img src="/img/common/empty_cart.png">
                         <p>购物车暂无商品</p>
                         <p>请先<a href="javascript:void(0);">登录</a>添加商品到购物车</p>
                     </div>

src/main/resources/templates/index.html

@@ -59,11 +59,11 @@
                         <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/detail.html?pid='+p.pid" target="_blank">
+                                    <a class="image" :href="'/product/detail.html?id='+p.pid" target="_blank">
                                         <img :src="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/detail.html?pid='+p.pid" target="_blank">
+                                    <a class="name" :href="'/product/detail.html?id='+p.pid" target="_blank">
                                         <span v-html="p.name"></span>
                                     </a>
                                     <div class="price mfhc">
@@ -153,7 +153,7 @@
                 <div class="floorCon">
                     <div class="supplierList">
                         <ul class="clear mfw">
-                            <li><img src="/img/index/goodsup.png"/></li>
+                            <li><img src="/img/common/goodsup.png"/></li>
                             <li v-for="topic in topicData3" style="display: inline-block">
                                 <a href="javascript:void(0);">
                                     <img :src="topic.image" :alt="topic.title">

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

@@ -0,0 +1,25 @@
+<!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/headLink"></template>
+    <link th:href="@{/css/instrument/detail.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/instrument/detail.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>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/footLink"></template>
+<script charset="utf-8" type="text/javascript" src="/lib/magnifier.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/instrument/detail.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -0,0 +1,55 @@
+<!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/headLink"></template>
+    <link th:href="@{/css/instrument/search.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/instrument/search.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">
+    <!--loading-->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <!--数据为空-->
+    <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
+        <img src="/img/common/empty.png">
+        <div class="msg">
+            <p>搜索引擎“感冒”了，没有找到你搜索的商品哦！</p>
+            <p><a href="/">点这里吧</a>，采美还你一片绿洲~</p>
+        </div>
+    </div>
+    <!--列表-->
+    <ul v-else class="instrumentList">
+        <li class="instrumentItem clear" v-for="shop in listData">
+
+        </li>
+    </ul>
+    <!--分页-->
+    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+        <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
+        <template v-for="n in showPageBtn">
+            <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+            <span v-else>···</span>
+        </template>
+        <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
+        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="pageInput" @blur="checkNum()"/>
+        <span>页</span>&nbsp;
+        <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/footLink"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/instrument/search.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -92,8 +92,7 @@
                     <a href="javascript:void(0);" class="buy">立即购买</a>
                 </div>
                 <div class="concatBox">
-                    <img v-if="isPC" src="/img/product/concat.png">
-                    <img v-else src="/img/product/concat_m.png">
+                    <img src="/img/common/concat.png">
                 </div>
             </div>
         </div>
@@ -104,7 +103,7 @@
                 <ul class="swiper-wrapper" v-cloak>
                     <li class="swiper-slide" v-for="p in recommends">
                         <div class="item">
-                            <a class="image" :href="'/product/detail.html?pid='+p.pid" target="_blank">
+                            <a class="image" :href="'/product/detail.html?id='+p.pid" target="_blank">
                                 <img :src="p.image" :alt="p.name">
                                 <span v-html="p.name"></span>
                             </a>

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

@@ -94,7 +94,7 @@
     </div>
     <!--数据为空-->
     <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
-        <img src="/img/base/empty.png">
+        <img src="/img/common/empty.png">
         <div class="msg">
             <p>搜索引擎“感冒”了，没有找到你搜索的商品哦！</p>
             <p><a href="/">点这里吧</a>，采美还你一片绿洲~</p>
@@ -104,11 +104,11 @@
     <ul v-else class="productList clear mfw">
         <li class="productItem mfc" v-for="p in listData">
             <div class="item">
-                <a class="image" :href="'/product/detail.html?pid='+p.pid" target="_blank">
+                <a class="image" :href="'/product/detail.html?id='+p.pid" target="_blank">
                     <img :src="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/detail.html?pid='+p.pid" target="_blank">
+                <a class="name" :href="'/product/detail.html?id='+p.pid" target="_blank">
                     <span v-html="p.name"></span>
                 </a>
                 <div class="price mfhc">

src/main/resources/templates/supplier/search.html

@@ -19,7 +19,7 @@
     </div>
     <!--数据为空-->
     <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
-        <img src="/img/base/empty.png">
+        <img src="/img/common/empty.png">
         <div class="msg">
             <p>搜索引擎“感冒”了，没有找到你搜索的商品哦！</p>
             <p><a href="/">点这里吧</a>，采美还你一片绿洲~</p>