项目仪器详情

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

@@ -1,10 +1,10 @@
 package com.caimei.www.controller;
 
-import com.caimei.www.pojo.ImageLink;
+import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.JsonModel;
-import com.caimei.www.pojo.HomeFloor;
+import com.caimei.www.pojo.content.HomeFloor;
 import com.caimei.www.pojo.base.HeadCart;
-import com.caimei.www.pojo.product.ProductList;
+import com.caimei.www.pojo.content.ProductList;
 import com.caimei.www.service.HomeService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;

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

@@ -1,10 +1,14 @@
 package com.caimei.www.controller;
 
+import com.caimei.www.pojo.content.InstrumentDetail;
+import com.caimei.www.service.InstrumentService;
+import org.springframework.beans.factory.annotation.Autowired;
 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)
  *
@@ -17,15 +21,15 @@ 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;
-//    }
+    private InstrumentService instrumentService;
+    @Autowired
+    public void setInstrumentService(InstrumentService instrumentService) {
+        this.instrumentService = instrumentService;
+    }
 
 
     /**
-     * 供应商搜索结果页
+     * 项目仪器搜索结果页
      */
     @GetMapping("/instrument/search.html")
     public String search() {
@@ -33,12 +37,12 @@ public class InstrumentController extends BaseController {
     }
 
     /**
-     * 供应商详情页
+     * 项目仪器详情页
      */
     @GetMapping("/instrument/detail.html")
     public String home(final Model model, @RequestParam("id") Integer instrumentId) {
-        /*InstrumentDetail detail = instrumentService.getInstrumentDetailById(instrumentId);
-        model.addAttribute("instrument", detail);*/
+        InstrumentDetail detail = instrumentService.getInstrumentById(instrumentId);
+        model.addAttribute("instrument", detail);
         return INSTRUMENT_DETAIL_PATH;
     }
 

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

@@ -1,9 +1,9 @@
 package com.caimei.www.controller;
 
 import com.caimei.www.pojo.JsonModel;
-import com.caimei.www.pojo.product.ProductDetail;
-import com.caimei.www.pojo.product.ProductList;
-import com.caimei.www.pojo.product.ProductParameter;
+import com.caimei.www.pojo.content.ProductDetail;
+import com.caimei.www.pojo.content.ProductList;
+import com.caimei.www.pojo.content.Parameter;
 import com.caimei.www.service.ProductService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
@@ -87,7 +87,7 @@ public class ProductController extends BaseController {
      */
     @GetMapping("/product/parameter")
     @ResponseBody
-    public JsonModel<List<ProductParameter>> getProductParameters(Integer productId) {
+    public JsonModel<List<Parameter>> getProductParameters(Integer productId) {
         return productService.getProductParameters(productId);
     }
 

src/main/java/com/caimei/www/mapper/HomeDao.java

@@ -1,8 +1,8 @@
 package com.caimei.www.mapper;
 
-import com.caimei.www.pojo.HomeFloor;
-import com.caimei.www.pojo.ImageLink;
-import com.caimei.www.pojo.product.ProductList;
+import com.caimei.www.pojo.content.HomeFloor;
+import com.caimei.www.pojo.content.ImageLink;
+import com.caimei.www.pojo.content.ProductList;
 import com.caimei.www.pojo.base.HeadCart;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;

src/main/java/com/caimei/www/mapper/InstrumentDao.java

@@ -0,0 +1,22 @@
+package com.caimei.www.mapper;
+
+import com.caimei.www.pojo.content.InstrumentDetail;
+import com.caimei.www.pojo.content.Parameter;
+import org.apache.ibatis.annotations.Mapper;
+
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/7/16
+ */
+@Mapper
+public interface InstrumentDao {
+    /** 项目仪器详情 */
+    InstrumentDetail getInstrumentById(Integer instrumentId);
+    /** 项目仪器参数 */
+    List<Parameter> getParametersByInstrumentId(Integer instrumentId);
+}
+

src/main/java/com/caimei/www/mapper/ProductDao.java

@@ -1,10 +1,9 @@
 package com.caimei.www.mapper;
 
-import com.caimei.www.pojo.product.ProductDetail;
-import com.caimei.www.pojo.product.ProductList;
-import com.caimei.www.pojo.product.ProductParameter;
+import com.caimei.www.pojo.content.ProductDetail;
+import com.caimei.www.pojo.content.ProductList;
+import com.caimei.www.pojo.content.Parameter;
 import org.apache.ibatis.annotations.Mapper;
-import org.apache.ibatis.annotations.Param;
 
 import java.util.List;
 
@@ -36,7 +35,7 @@ public interface ProductDao {
      * @param productId
      * @return
      */
-    List<ProductParameter> getProductParameters(Integer productId);
+    List<Parameter> getProductParameters(Integer productId);
 
     /**
      * 详情-图片

src/main/java/com/caimei/www/pojo/HomeFloor.java → src/main/java/com/caimei/www/pojo/content/HomeFloor.java

@@ -1,4 +1,4 @@
-package com.caimei.www.pojo;
+package com.caimei.www.pojo.content;
 
 import lombok.Data;
 

src/main/java/com/caimei/www/pojo/ImageLink.java → src/main/java/com/caimei/www/pojo/content/ImageLink.java

@@ -1,4 +1,4 @@
-package com.caimei.www.pojo;
+package com.caimei.www.pojo.content;
 
 import lombok.Data;
 

src/main/java/com/caimei/www/pojo/content/InstrumentDetail.java

@@ -0,0 +1,37 @@
+package com.caimei.www.pojo.content;
+
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.List;
+
+/**
+ * 项目仪器
+ *
+ * @author : Charles
+ * @date : 2020/7/16
+ */
+@Data
+public class InstrumentDetail implements Serializable {
+    private Integer id;
+    /** 类型：1二级列表 2项目详情 3讲师列表 4自由页面 */
+    private Integer type;
+    /** 标题 */
+    private String title;
+    /** seo关键词 */
+    private String keywords;
+    /** seo描述 */
+    private String description;
+    /** 主图 */
+    private String headImage;
+    /** 底部文字 */
+    private String bottomText;
+    /** 底部图片 */
+    private String bottomImage;
+    /** 移动端底部图片 */
+    private String crmBottomImage;
+    /** 项目详情页名称和内容 */
+    private List<Parameter> pageContents;
+
+    private static final long serialVersionUID = 1L;
+}

src/main/java/com/caimei/www/pojo/content/Parameter.java

@@ -0,0 +1,29 @@
+package com.caimei.www.pojo.content;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/7/8
+ */
+@Data
+public class Parameter implements Serializable {
+    private Integer id;
+    /** 商品ID,或 页面信息ID*/
+    private Integer parentId;
+    /** 参数名称 */
+    private String name;
+    /** 参数内容 */
+    private String content;
+    /**
+    * 商品删除标记: 0否,其余是,
+    * 页面内容类型: 1-表示首层位置，2-表示二层位置，3-表示项目详情、培训手册、合作项目公司， 4-二层下方按钮 ，5-crm端项目详情、培训手册、合作项目公司
+    * */
+    private String type;
+
+    private static final long serialVersionUID = 1L;
+}

src/main/java/com/caimei/www/pojo/product/ProductDetail.java → src/main/java/com/caimei/www/pojo/content/ProductDetail.java

@@ -1,10 +1,8 @@
-package com.caimei.www.pojo.product;
+package com.caimei.www.pojo.content;
 
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 
-import java.util.List;
-
 /**
  * Description
  *

src/main/java/com/caimei/www/pojo/product/ProductList.java → src/main/java/com/caimei/www/pojo/content/ProductList.java

@@ -1,4 +1,4 @@
-package com.caimei.www.pojo.product;
+package com.caimei.www.pojo.content;
 
 import lombok.Data;
 

src/main/java/com/caimei/www/pojo/product/ProductParameter.java

@@ -1,26 +0,0 @@
-package com.caimei.www.pojo.product;
-
-import lombok.Data;
-
-import java.io.Serializable;
-
-/**
- * Description
- *
- * @author : Charles
- * @date : 2020/7/8
- */
-@Data
-public class ProductParameter implements Serializable {
-    private Integer id;
-    /** 商品ID */
-    private Integer productId;
-    /** 参数名称 */
-    private String paramsName;
-    /** 参数内容 */
-    private String paramsContent;
-    /** 删除标记 0否 其余是 */
-    private String delFlag;
-
-    private static final long serialVersionUID = 1L;
-}

src/main/java/com/caimei/www/service/HomeService.java

@@ -1,10 +1,10 @@
 package com.caimei.www.service;
 
-import com.caimei.www.pojo.ImageLink;
+import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.JsonModel;
-import com.caimei.www.pojo.HomeFloor;
+import com.caimei.www.pojo.content.HomeFloor;
 import com.caimei.www.pojo.base.HeadCart;
-import com.caimei.www.pojo.product.ProductList;
+import com.caimei.www.pojo.content.ProductList;
 
 import java.util.List;
 import java.util.Map;

src/main/java/com/caimei/www/service/InstrumentService.java

@@ -0,0 +1,18 @@
+package com.caimei.www.service;
+
+import com.caimei.www.pojo.content.InstrumentDetail;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/7/16
+ */
+public interface InstrumentService {
+    /**
+     * 项目仪器详情
+     * @param instrumentId
+     * @return
+     */
+    InstrumentDetail getInstrumentById(Integer instrumentId);
+}

src/main/java/com/caimei/www/service/ProductService.java

@@ -1,9 +1,9 @@
 package com.caimei.www.service;
 
 import com.caimei.www.pojo.JsonModel;
-import com.caimei.www.pojo.product.ProductDetail;
-import com.caimei.www.pojo.product.ProductList;
-import com.caimei.www.pojo.product.ProductParameter;
+import com.caimei.www.pojo.content.ProductDetail;
+import com.caimei.www.pojo.content.ProductList;
+import com.caimei.www.pojo.content.Parameter;
 
 import java.util.List;
 
@@ -34,7 +34,7 @@ public interface ProductService {
      * @param productId
      * @return
      */
-    JsonModel<List<ProductParameter>> getProductParameters(Integer productId);
+    JsonModel<List<Parameter>> getProductParameters(Integer productId);
 
     /**
      * 详情-图片

src/main/java/com/caimei/www/service/impl/HomeServiceImpl.java

@@ -2,9 +2,9 @@ package com.caimei.www.service.impl;
 
 import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.mapper.HomeDao;
-import com.caimei.www.pojo.HomeFloor;
-import com.caimei.www.pojo.ImageLink;
-import com.caimei.www.pojo.product.ProductList;
+import com.caimei.www.pojo.content.HomeFloor;
+import com.caimei.www.pojo.content.ImageLink;
+import com.caimei.www.pojo.content.ProductList;
 import com.caimei.www.pojo.base.HeadCart;
 import com.caimei.www.service.HomeService;
 import com.caimei.www.utils.ImageUtil;

src/main/java/com/caimei/www/service/impl/InstrumentServiceImpl.java

@@ -0,0 +1,40 @@
+package com.caimei.www.service.impl;
+
+import com.caimei.www.mapper.InstrumentDao;
+import com.caimei.www.mapper.ProductDao;
+import com.caimei.www.pojo.content.InstrumentDetail;
+import com.caimei.www.pojo.content.Parameter;
+import com.caimei.www.service.InstrumentService;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/7/16
+ */
+@Service
+public class InstrumentServiceImpl implements InstrumentService {
+    @Resource
+    private InstrumentDao instrumentDao;
+    @Value("${caimei.wwwDomain}")
+    private String domain;
+
+    /**
+     * 项目仪器详情
+     *
+     * @param instrumentId
+     * @return
+     */
+    @Override
+    public InstrumentDetail getInstrumentById(Integer instrumentId) {
+        InstrumentDetail instrument = instrumentDao.getInstrumentById(instrumentId);
+        List<Parameter> contents = instrumentDao.getParametersByInstrumentId(instrumentId);
+        instrument.setPageContents(contents);
+        return instrument;
+    }
+}

src/main/java/com/caimei/www/service/impl/ProductServiceImpl.java

@@ -2,9 +2,9 @@ package com.caimei.www.service.impl;
 
 import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.mapper.ProductDao;
-import com.caimei.www.pojo.product.ProductDetail;
-import com.caimei.www.pojo.product.ProductList;
-import com.caimei.www.pojo.product.ProductParameter;
+import com.caimei.www.pojo.content.ProductDetail;
+import com.caimei.www.pojo.content.ProductList;
+import com.caimei.www.pojo.content.Parameter;
 import com.caimei.www.service.ProductService;
 import com.caimei.www.utils.ImageUtil;
 import io.netty.util.internal.StringUtil;
@@ -77,8 +77,8 @@ public class ProductServiceImpl implements ProductService {
      * @return
      */
     @Override
-    public JsonModel<List<ProductParameter>> getProductParameters(Integer productId) {
-        List<ProductParameter> list = productDao.getProductParameters(productId);
+    public JsonModel<List<Parameter>> getProductParameters(Integer productId) {
+        List<Parameter> list = productDao.getProductParameters(productId);
 		return JsonModel.success(list);
     }
 

src/main/resources/mapper/HomeMapper.xml

@@ -1,31 +1,31 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.caimei.www.mapper.HomeDao">
-	<select id="getHomePageFloor" resultType="com.caimei.www.pojo.HomeFloor">
+	<select id="getHomePageFloor" resultType="com.caimei.www.pojo.content.HomeFloor">
 		select id, type, floorTitle as title, floorDetail as detail
 		from new_page_floor
 		where delFlag = 0 and wwwEnabledStatus = '1'
 		order by sort
 	</select>
-	<select id="getHomeBigTopicFloor" resultType="com.caimei.www.pojo.HomeFloor">
+	<select id="getHomeBigTopicFloor" resultType="com.caimei.www.pojo.content.HomeFloor">
 		select id, title, description as detail
 		from cm_page_big_topic
 		where delFlag = 0 and enabledStatus = '1'
 		order by sort
 	</select>
-    <select id="getHomeBanners" resultType="com.caimei.www.pojo.ImageLink">
+    <select id="getHomeBanners" resultType="com.caimei.www.pojo.content.ImageLink">
 		select id, title, link, image
 		from new_page_homeImage
 		where wwwEnabledStatus = 1
 		order by sort desc, createDate desc
     </select>
-	<select id="getAdvertising" resultType="com.caimei.www.pojo.ImageLink">
+	<select id="getAdvertising" resultType="com.caimei.www.pojo.content.ImageLink">
 		select id, adTitle as title, link, adImage as image
 		from new_page_advertising
 		where delFlag = 0
 		order by sort, createDate desc
 	</select>
-	<select id="getRecommendeds" resultType="com.caimei.www.pojo.product.ProductList">
+	<select id="getRecommendeds" resultType="com.caimei.www.pojo.content.ProductList">
 		select
 			p.productID as pid,
 			p.`name` as `name`,
@@ -41,7 +41,7 @@
 		and p.shopID not in (SELECT s.`value` FROM `sys_dict` s WHERE s.type='heheShopID')
 		order by p.actSort
 	</select>
-	<select id="getBigTopicData" resultType="com.caimei.www.pojo.ImageLink">
+	<select id="getBigTopicData" resultType="com.caimei.www.pojo.content.ImageLink">
 		select
             id,
             title,
@@ -57,7 +57,7 @@
 		order by sort ,enabledStatus ,createDate
 		limit 0,5
 	</select>
-    <select id="getCommodityTopicData" resultType="com.caimei.www.pojo.ImageLink">
+    <select id="getCommodityTopicData" resultType="com.caimei.www.pojo.content.ImageLink">
 		select
             id,
             title,
@@ -71,7 +71,7 @@
 		and <![CDATA[ beginTime < sysdate() ]]>
 		order by sort limit 0,3
     </select>
-	<select id="getSmallTopicData" resultType="com.caimei.www.pojo.ImageLink">
+	<select id="getSmallTopicData" resultType="com.caimei.www.pojo.content.ImageLink">
 		select
             id,
             title,
@@ -82,7 +82,7 @@
 		order by sort
 		limit 0,4
 	</select>
-	<select id="getSuppliersTopData" resultType="com.caimei.www.pojo.ImageLink">
+	<select id="getSuppliersTopData" resultType="com.caimei.www.pojo.content.ImageLink">
 		select
             id,
             supplierName as title,

src/main/resources/mapper/InstrumentMapper.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.caimei.www.mapper.InstrumentDao">
+    <select id="getInstrumentById" resultType="com.caimei.www.pojo.content.InstrumentDetail">
+        select id, type, title, keywords, description,
+               headImage, bottomText, bottomImage, crmBottomImage1 as crmBottomImage
+		from cm_page
+		where id = #{instrumentId} and type='2' and enabledStatus=1
+    </select>
+    <select id="getParametersByInstrumentId" resultType="com.caimei.www.pojo.content.Parameter">
+        select id,
+               pageId as parentId,
+               name,
+               content,
+               type
+        from cm_page_name_content
+        where pageId=#{instrumentId}
+    </select>
+</mapper>

src/main/resources/mapper/ProductMapper.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.caimei.www.mapper.ProductDao">
-	<select id="getProductDetailById" resultType="com.caimei.www.pojo.product.ProductDetail">
+	<select id="getProductDetailById" resultType="com.caimei.www.pojo.content.ProductDetail">
 		select
 			p.productID as pid,
 			p.`name` as `name`,
@@ -54,7 +54,7 @@
 
 		where p.productID = #{productId}
 	</select>
-	<select id="getProductRecommendsById" resultType="com.caimei.www.pojo.product.ProductList">
+	<select id="getProductRecommendsById" resultType="com.caimei.www.pojo.content.ProductList">
         select
 			p.productID as pid,
 			p.`name` as `name`,
@@ -65,7 +65,7 @@
             p.productID = #{productId} and validFlag  = 2
         order by pr.sort desc
 	</select>
-	<select id="getAutoProductRecommends" resultType="com.caimei.www.pojo.product.ProductList">
+	<select id="getAutoProductRecommends" resultType="com.caimei.www.pojo.content.ProductList">
         select
 			p.productID as pid,
 			p.`name` as `name`,
@@ -76,8 +76,12 @@
 			p.tinyTypeID = (select tinyTypeID from product as p1 where p1.productID = #{productId})
         order by p.sellNumber desc limit 0,7
 	</select>
-	<select id="getProductParameters" resultType="com.caimei.www.pojo.product.ProductParameter">
-		select id, productId, paramsName, paramsContent, delFlag
+	<select id="getProductParameters" resultType="com.caimei.www.pojo.content.Parameter">
+		select id as id,
+		productId as parentId,
+		paramsName as `name`,
+		paramsContent as content,
+		delFlag as type
 		from cm_product_related_parameters
 		where productId = #{productId} and delFlag='0'
 	</select>

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

@@ -3,93 +3,14 @@
  * 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}
+.instrumentBox{width:100%;margin:16px 0;background:#FFF;box-sizing:border-box;padding:15px}
+.instrumentBox .imageBox{float:left;width:452px;height:300px;background:#F3F7FE;}
+.instrumentBox img{width:100%;height:100%;display:block}
+.instrumentBox .detailBox{float:right;width:686px;color:#93979F;background:#F3F7FE;box-sizing:border-box;padding:14px 20px;font-size:14px;border-radius:2px;position:relative;}
+.instrumentBox .detailBox hr{border:none;border-top:1px dashed #BEC2C9;margin:12px 0}
+.instrumentBox .detailBox .row{position:relative;padding:3px 0 3px 70px;line-height:24px}
+.instrumentBox .detailBox .row .l{display:inline-block;min-width:56px;height:24px;text-align:justify;vertical-align:top;margin-left:-70px;}
+.instrumentBox .detailBox .row .l:after{content:'';display:inline-block;width:100%}
+.instrumentBox .detailBox .row>i{font-style:normal;}
+.instrumentBox .detailBox .row em{font-style:normal;color:#4A4F58}
+.instrumentBox .detailBox .tit{color:#E15616;padding:3px 0;line-height:24px;}

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

@@ -46,7 +46,7 @@ li{list-style:none}
 .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 span:first-child em{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%}

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

@@ -25,10 +25,10 @@ li{list-style:none;}
 .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{position:relative;padding:3px 0 3px 80px;line-height:24px}
+.productBox .detailBox .row .l{display:inline-block;min-width:60px;height:24px;text-align:justify;vertical-align:top;margin-left:-80px;}
 .productBox .detailBox .row .l:after{content:'';display:inline-block;width:100%}
-.productBox .detailBox .row>i{font-style:normal;margin-right:14px}
+.productBox .detailBox .row>i{font-style:normal;}
 .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}
@@ -84,7 +84,7 @@ li{list-style:none;}
 .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 .bd .name{line-height:20px;padding: 10px 0;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}

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

@@ -2,7 +2,9 @@
 <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 th:text="'采美365网-'+${instrument.title}"></title>
+    <meta http-equiv="keywords" th:content="${instrument.keywords}">
+    <meta http-equiv="description" th:content="${instrument.description}">
     <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">
@@ -13,7 +15,23 @@
 
 <!--页面主体数据-->
 <div id="container">
-
+    <div class="wrap">
+        <div class="instrumentBox clear">
+            <div class="imageBox"><img th:src="${instrument.headImage}"></div>
+            <div class="detailBox">
+                <p class="row" th:each="item: ${instrument.pageContents}" th:if="${item.type}==1">
+                    <span class="l" th:text="${item.name}"></span><i>：</i><em th:text="${item.content}"></em>
+                </p>
+                <hr>
+                <p class="tit" th:each="item,status : ${instrument.pageContents}" th:if="${item.type}==2 and ${status.index}==4">
+                    <span th:text="${item.name}"></span>
+                </p>
+                <p class="row" th:each="item,status : ${instrument.pageContents}" th:if="${item.type}==2 and ${status.index}>4">
+                    <span class="l" th:text="${item.name}"></span><i>：</i><em th:text="${item.content}"></em>
+                </p>
+            </div>
+        </div>
+    </div>
 </div>
 
 <!-- 引入底部 -->