调整样式，DEP统计功能

src/main/java/com/caimei/www/pojo/page/ProductDetail.java

@@ -1,71 +1,72 @@
-package com.caimei.www.pojo.page;
-
-import com.caimei.www.pojo.order.LadderPrice;
-import lombok.Data;
-import lombok.EqualsAndHashCode;
-
-import java.math.BigDecimal;
-import java.util.List;
-
-/**
- * Description
- *
- * @author : Charles
- * @date : 2020/7/8
- */
-@EqualsAndHashCode(callSuper = true)
-@Data
-public class ProductDetail extends ProductList {
-	private Integer minBuyNumber;
-	private Integer stock;
-    private Integer step;
-    private Integer recommendType;
-    private Integer validFlag;
-	private String productCode;
-	private String tags;
-	private String[] tagList;
-	private String remarks;
-	private List<Sku> skus;
-	/** 详情 */
-	private Integer productDetailChose;
-	private String detailInfo;
-	private String commonDetailInfo;
-	private String orderInfo;
-	private String serviceInfo;
-	/** 品牌 */
-    private Integer brandId;
-	private String brandName;
-	/** 分类 */
-    private Integer tinyTypeId;
-	private String tinyTypeText;
-    private Integer smallTypeId;
-	private String smallTypeText;
-    private Integer bigTypeId;
-	private String bigTypeText;
-	/** 供应商 */
-    private Integer shopId;
-	private String shopTitle;
-	private String businessScope;
-	private String license;
-	private String shopAddress;
-	/** 活动状态：1有效，0失效 */
-	private Integer activityFlag;
-	/** 启用阶梯价格标识：1是，0否  */
-	private Integer ladderFlag;
-	/** 阶梯价 */
-	List<LadderPrice> ladderPrices;
-	/**
-	 * 仪器培训方式：1线上培训，2线下培训
-	 */
-	private Integer trainingMethod;
-	/**
-	 * 售价是否包含：1售价未包含，2售价已包含
-	 */
-	private Integer trainingType;
-	/**
-	 * 培训费用(售价未包含)
-	 */
-	private BigDecimal trainingFee;
-
-	private Integer productType;
-}
+package com.caimei.www.pojo.page;
+
+import com.caimei.www.pojo.order.LadderPrice;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+
+import java.math.BigDecimal;
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/7/8
+ */
+@EqualsAndHashCode(callSuper = true)
+@Data
+public class ProductDetail extends ProductList {
+	private Integer minBuyNumber;
+	private Integer stock;
+    private Integer step;
+    private Integer recommendType;
+    private Integer validFlag;
+	private String productCode;
+	private String tags;
+	private String[] tagList;
+	private String remarks;
+	private List<Sku> skus;
+	/** 详情 */
+	private Integer productDetailChose;
+	private String detailInfo;
+	private String commonDetailInfo;
+	private String orderInfo;
+	private String serviceInfo;
+	/** 品牌 */
+    private Integer brandId;
+	private String brandName;
+	/** 分类 */
+    private Integer tinyTypeId;
+	private String tinyTypeText;
+    private Integer smallTypeId;
+	private String smallTypeText;
+    private Integer bigTypeId;
+	private String bigTypeText;
+	/** 供应商 */
+    private Integer shopId;
+	private String shopTitle;
+	private String businessScope;
+	private String license;
+	private String shopAddress;
+	private String shopLogo;
+	/** 活动状态：1有效，0失效 */
+	private Integer activityFlag;
+	/** 启用阶梯价格标识：1是，0否  */
+	private Integer ladderFlag;
+	/** 阶梯价 */
+	List<LadderPrice> ladderPrices;
+	/**
+	 * 仪器培训方式：1线上培训，2线下培训
+	 */
+	private Integer trainingMethod;
+	/**
+	 * 售价是否包含：1售价未包含，2售价已包含
+	 */
+	private Integer trainingType;
+	/**
+	 * 培训费用(售价未包含)
+	 */
+	private BigDecimal trainingFee;
+
+	private Integer productType;
+}

src/main/resources/mapper/ProductMapper.xml

@@ -1,161 +1,162 @@
-<?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.page.ProductDetail">
-		select
-			p.productID as id,
-			p.`name` as `name`,
-			p.mainImage as image,
-			p.priceFlag,
-
-			p.tags as tags,
-			p.productRemarks as remarks,
-			IFNULL((SELECT validFlag FROM cm_organize_product_info  WHERE productId = p.productID AND organizeId = 0), 999) AS validFlag,
-			p.productCode as productCode,
-			p.step as step,
-			p.recommendType as recommendType,
-			p.visibility as visibility,
-			p.trainingMethod,
-			p.trainingType,
-			p.trainingFee,
-			p.productDetail as productDetailChose,
-
-			d.detailInfo as detailInfo,
-			d.commonDetailInfo as commonDetailInfo,
-			d.orderInfo as orderInfo,
-			d.serviceInfo as serviceInfo,
-
-			p.brandID as brandId,
-			br.name as brandName,
-			t.tinyTypeID as tinyTypeId,
-			t.name as tinyTypeText,
-			s.smallTypeID as smallTypeId,
-			s.name as smallTypeText,
-			b.bigTypeID as bigTypeId,
-			b.name as bigTypeText,
-			p.productType,
-			p.shopID as shopId,
-			sh.name as shopTitle,
-			sh.businessScope as businessScope,
-			sh.authorizationCertificateImage as license,
-			CONCAT(pr.name, ci.name) as shopAddress
-
-
-		from product p
-
-		left join productdetailinfo d on p.productID=d.productID
-		left join cm_brand as br on p.brandID = br.id
-
-        left join bigtype as b on p.bigTypeID = b.bigTypeID
-        left join smalltype as s on p.smallTypeID = s.smallTypeID
-        left join tinytype as t on p.tinyTypeID = t.tinyTypeID
-
-
-        left join shop as sh on p.shopID = sh.shopID
-        left join town as tn on sh.townId = tn.townID
-        left join city as ci on tn.cityID = ci.cityID
-        left join province as pr on ci.provinceID = pr.provinceID
-
-		where p.productID = #{productId}
-	</select>
-	<select id="getProductRecommendsById" resultType="com.caimei.www.pojo.page.ProductList">
-        select
-			p.productID as id,
-			p.`name` as `name`,
-			p.productType,
-			p.mainImage as image
-
-        from product as p
-		left join cm_organize_product_info copi on copi.productId = p.productId
-        left join cm_product_recommend as pr on pr.recommendProductID = p.productID
-        where
-            pr.productID = #{productId}
-          and copi.validFlag  = 2
-		  and copi.organizeId = 0
-          and p.visibility = 3
-        order by pr.sort desc
-	</select>
-	<select id="getAutoProductRecommends" resultType="com.caimei.www.pojo.page.ProductList">
-		select
-			p.productID as id,
-			p.`name` as `name`,
-			p.mainImage as image,
-			IFNULL(p.visibility,3) as visibility,
-			p.productType
-		from product as p
-				 left join cm_organize_product_info copi on copi.productId = p.productId
-		where copi.validFlag  = 2
-		  and copi.organizeId = 0
-		  and p.commodityType = (select commodityType from product as p1 where p1.productID = #{productId})
-		  and p.smallTypeID = (select smallTypeID from product as p2 where p2.productID = #{productId})
-		  and p.visibility = 3
-		order by p.sellNumber desc limit 0,7
-	</select>
-	<select id="getProductParameters" resultType="com.caimei.www.pojo.page.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>
-	<select id="getProductDetailImages" resultType="java.lang.String">
-		select image
-		from productimage
-		where productID = #{productId}
-		order by mainFlag desc ,sortIndex is null,sortIndex
-	</select>
-	<select id="getProductSellNumbers" resultType="com.caimei.www.pojo.page.ProductList">
-		select
-			p.productID as id,
-			p.`name` as `name`,
-			p.mainImage as image
-		from product as p
-		left join cm_organize_product_info copi on copi.productId = p.productId
-		where copi.validFlag  = 2
-		  and copi.organizeId = 0
-		<if test="productIds != null and productIds.length>0">
-			and p.productId in
-			<foreach item="productID" collection="productIds" open="(" separator="," close=")">
-				#{productID}
-			</foreach>
-		</if>
-		order by sellNumber desc limit 0,3
-	</select>
-    <select id="getPriceItemById" resultType="com.caimei.www.pojo.order.CartItem">
-		select
-			p.productID as productId,
-			p.price,
-			p.unit as unit,
-			p.step as step,
-			p.minBuyNumber as min,
-			p.priceFlag,
-			p.ladderPriceFlag as ladderFlag,
-			IFNULL((SELECT validFlag FROM cm_organize_product_info  WHERE productId = p.productID AND organizeId = 0), 999) AS validFlag,
-			p.productType,
-			p.stock as stock
-		from product p
-		where p.productID = #{productId}
-	</select>
-
-    <select id="getRecommendType" resultType="java.lang.Integer">
-        select recommendType
-        from product
-        where productId = #{productId}
-    </select>
-
-    <select id="findSkus" resultType="com.caimei.www.pojo.page.Sku">
-        select unit,
-               price,
-               ifnull(stock, 0)                as stock,
-               ifnull(minBuyNumber, (select buyNum
-                                     from product_ladder_price
-                                     where productId = #{productId}
-                                     order by buynum asc
-                                     limit 1)) as minBuyNumber
-        from cm_sku
-        where productId = #{productId}
-    </select>
-
-</mapper>
+<?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.page.ProductDetail">
+		select
+			p.productID as id,
+			p.`name` as `name`,
+			p.mainImage as image,
+			p.priceFlag,
+
+			p.tags as tags,
+			p.productRemarks as remarks,
+			IFNULL((SELECT validFlag FROM cm_organize_product_info  WHERE productId = p.productID AND organizeId = 0), 999) AS validFlag,
+			p.productCode as productCode,
+			p.step as step,
+			p.recommendType as recommendType,
+			p.visibility as visibility,
+			p.trainingMethod,
+			p.trainingType,
+			p.trainingFee,
+			p.productDetail as productDetailChose,
+
+			d.detailInfo as detailInfo,
+			d.commonDetailInfo as commonDetailInfo,
+			d.orderInfo as orderInfo,
+			d.serviceInfo as serviceInfo,
+
+			p.brandID as brandId,
+			br.name as brandName,
+			t.tinyTypeID as tinyTypeId,
+			t.name as tinyTypeText,
+			s.smallTypeID as smallTypeId,
+			s.name as smallTypeText,
+			b.bigTypeID as bigTypeId,
+			b.name as bigTypeText,
+			p.productType,
+			p.shopID as shopId,
+			sh.name as shopTitle,
+			sh.businessScope as businessScope,
+			sh.authorizationCertificateImage as license,
+			CONCAT(pr.name, ci.name) as shopAddress,
+			sh.logo
+
+
+		from product p
+
+		left join productdetailinfo d on p.productID=d.productID
+		left join cm_brand as br on p.brandID = br.id
+
+        left join bigtype as b on p.bigTypeID = b.bigTypeID
+        left join smalltype as s on p.smallTypeID = s.smallTypeID
+        left join tinytype as t on p.tinyTypeID = t.tinyTypeID
+
+
+        left join shop as sh on p.shopID = sh.shopID
+        left join town as tn on sh.townId = tn.townID
+        left join city as ci on tn.cityID = ci.cityID
+        left join province as pr on ci.provinceID = pr.provinceID
+
+		where p.productID = #{productId}
+	</select>
+	<select id="getProductRecommendsById" resultType="com.caimei.www.pojo.page.ProductList">
+        select
+			p.productID as id,
+			p.`name` as `name`,
+			p.productType,
+			p.mainImage as image
+
+        from product as p
+		left join cm_organize_product_info copi on copi.productId = p.productId
+        left join cm_product_recommend as pr on pr.recommendProductID = p.productID
+        where
+            pr.productID = #{productId}
+          and copi.validFlag  = 2
+		  and copi.organizeId = 0
+          and p.visibility = 3
+        order by pr.sort desc
+	</select>
+	<select id="getAutoProductRecommends" resultType="com.caimei.www.pojo.page.ProductList">
+		select
+			p.productID as id,
+			p.`name` as `name`,
+			p.mainImage as image,
+			IFNULL(p.visibility,3) as visibility,
+			p.productType
+		from product as p
+				 left join cm_organize_product_info copi on copi.productId = p.productId
+		where copi.validFlag  = 2
+		  and copi.organizeId = 0
+		  and p.commodityType = (select commodityType from product as p1 where p1.productID = #{productId})
+		  and p.smallTypeID = (select smallTypeID from product as p2 where p2.productID = #{productId})
+		  and p.visibility = 3
+		order by p.sellNumber desc limit 0,7
+	</select>
+	<select id="getProductParameters" resultType="com.caimei.www.pojo.page.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>
+	<select id="getProductDetailImages" resultType="java.lang.String">
+		select image
+		from productimage
+		where productID = #{productId}
+		order by mainFlag desc ,sortIndex is null,sortIndex
+	</select>
+	<select id="getProductSellNumbers" resultType="com.caimei.www.pojo.page.ProductList">
+		select
+			p.productID as id,
+			p.`name` as `name`,
+			p.mainImage as image
+		from product as p
+		left join cm_organize_product_info copi on copi.productId = p.productId
+		where copi.validFlag  = 2
+		  and copi.organizeId = 0
+		<if test="productIds != null and productIds.length>0">
+			and p.productId in
+			<foreach item="productID" collection="productIds" open="(" separator="," close=")">
+				#{productID}
+			</foreach>
+		</if>
+		order by sellNumber desc limit 0,3
+	</select>
+    <select id="getPriceItemById" resultType="com.caimei.www.pojo.order.CartItem">
+		select
+			p.productID as productId,
+			p.price,
+			p.unit as unit,
+			p.step as step,
+			p.minBuyNumber as min,
+			p.priceFlag,
+			p.ladderPriceFlag as ladderFlag,
+			IFNULL((SELECT validFlag FROM cm_organize_product_info  WHERE productId = p.productID AND organizeId = 0), 999) AS validFlag,
+			p.productType,
+			p.stock as stock
+		from product p
+		where p.productID = #{productId}
+	</select>
+
+    <select id="getRecommendType" resultType="java.lang.Integer">
+        select recommendType
+        from product
+        where productId = #{productId}
+    </select>
+
+    <select id="findSkus" resultType="com.caimei.www.pojo.page.Sku">
+        select unit,
+               price,
+               ifnull(stock, 0)                as stock,
+               ifnull(minBuyNumber, (select buyNum
+                                     from product_ladder_price
+                                     where productId = #{productId}
+                                     order by buynum asc
+                                     limit 1)) as minBuyNumber
+        from cm_sku
+        where productId = #{productId}
+    </select>
+
+</mapper>

src/main/resources/static/css/account/login.css

@@ -20,7 +20,7 @@ li{list-style:none}
  .loginForm form{margin-top:10px;}
  .loginForm .formLine{width: 100%; height:70px;padding:0;float: left;position: relative;}
  .loginForm .formLine.smscode{width:100%;}
- .loginForm .formLine .code-btn{width: 130px;height: 48px;line-height: 48px;text-align: center;background: #E15621;font-size: 14px;color: #FFFFFF;position: absolute;right: 0;top: 0;border-radius: 0 30px 30px 0;}
+ .loginForm .formLine .code-btn{width: 130px;height: 48px;line-height: 48px;text-align: center;background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);font-size: 14px;color: #FFFFFF;position: absolute;right: 0;top: 0;border-radius: 0 30px 30px 0;}
  .loginForm .formLine .code-btn.disabled{background: rgba(225,86,33,0.7);}
  .loginForm input{height:48px;line-height:48px;}
  .loginForm input.smscode{padding-right: 96px;box-sizing: border-box;}
@@ -30,7 +30,7 @@ li{list-style:none}
  .loginForm .submit{height:44px;line-height:0;font-size:0;text-align:justify;margin-top:10px;width: 100%;float: left;}
  .loginForm .submit:after{content:'';display:inline-block;width:100%}
  .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:44px;line-height:44px;background-color:#ffe6dc;border-radius:22px;border:solid 1px #FF5B00;text-align:center;color:#FF5B00;font-size:14px;cursor:pointer}
- .loginForm .submit button.btn{background-color:#FF5B00;color:#FFF}
+ .loginForm .submit button.btn{background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color:#FFF}
  .loginForm .submit button.disabled{background-color:#E1E1E1;color:#F7F7F7;border-color:#E1E1E1;}
  .loginForm .login-line{width: 100%;height: 1px;background: #E2E2E2;margin-top: 10px;float: left;position: relative;}
  .loginForm .login-line span{display: block;line-height: 24px;padding: 0 5px;text-align: center;font-size: 12px;color: #999999;position: absolute;background: #FFFFFF;left: 50%;top: -12px;margin-left: -40px;}
@@ -99,15 +99,15 @@ li{list-style:none}
  .loginForm .formLine{height:16.4vw;padding:0;position: relative;}
  .loginForm .formLine.smscode{width: 100%;}
  .loginForm input{height:11.2vw;line-height:6vw;padding: 2.6vw 0;box-sizing: border-box;border-radius: 5.5vw;}
- .loginForm .formLine .code-btn{width: 24.8vw;height:11.2vw;line-height: 11.2vw;text-align: center;background: #E15621;font-size:3.4vw;color: #FFFFFF;position: absolute;right: 0;top: 0;border-radius: 0 8.2vw 8.2vw 0;}
+ .loginForm .formLine .code-btn{width: 24.8vw;height:11.2vw;line-height: 11.2vw;text-align: center;background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);font-size:3.4vw;color: #FFFFFF;position: absolute;right: 0;top: 0;border-radius: 0 8.2vw 8.2vw 0;}
  .loginForm .formLine .code-btn.disabled{background: rgba(225,86,33,0.7);}
  .loginForm input.smscode{box-sizing: border-box;}
  .loginForm .checked{top:3.6vw;right:3.6vw;}
  .loginForm .forget{text-align:right;color:#4a4f58;font-size:3.4vw;line-height:3.4vw;margin-bottom:4.8vw}
  .loginForm .forget .btn{float: left;color: #E15621;}
  .loginForm .submit{line-height:11.2vw;font-size:3.4vw;text-align:center;color:#22272e;margin-top: 3vw;}
- .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:11.2vw;border:solid 1px #b8bfca;border-radius: 5.5vw;margin-bottom:4.8vw}
- .loginForm .submit button.btn{border-color:#FF5B00;background:#FF5B00;color:#FFF;}
+ .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:11.2vw;border-radius: 5.5vw;margin-bottom:4.8vw}
+ .loginForm .submit button.btn{background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color:#FFF;}
  .loginForm .submit button.disabled{background-color:#E1E1E1;color:#F7F7F7;border-color:#E1E1E1;}
  .loginForm .login-line{width: 100%;height: 1px;background: #E2E2E2;margin-top: 10px;float: left;position: relative;}
  .loginForm .login-line span{display: block;line-height: 24px;padding: 0 5px;text-align: center;font-size: 12px;color: #999999;position: absolute;background: #FFFFFF;left: 50%;top: -12px;margin-left: -30px;}

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

@@ -15,10 +15,11 @@
 .mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/supplier-login/H5.png) no-repeat;background-size:100vw auto;}
 /*.H5-icon:before{content:'';display:inline-block;font-size:0;background:url(/img/supplier-login/H5.png) no-repeat;background-size:100vw auto;}*/
 .H5-icon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/H5-icon.png) no-repeat;background-size:100vw auto;}
-.icon.shop,.icon.heart{vertical-align:middle;display:inline-block;height:5.5vw;line-height:5.5vw}
-.icon.shop:before{width:7.5vw;height:6vw;background-position:-91vw -.5vw}
-.icon.heart:before{width:5.5vw;height:5.5vw;background-position:0 -17vw}
-.icon.shop .tips{display:none;}
+.mIcon.shop,.mIcon.heart{vertical-align:middle;display:inline-block;height:5.5vw;line-height:5.5vw}
+.mIcon.shop:before{width:7.5vw;height:6vw;background-position:-91vw -.5vw}
+.mIcon.heart:before{width:5vw;height:5vw;background-position:-0vw -17vw;}
+.iconmIcon.heart:before{width:5.5vw;height:5.5vw;background-position:0 -17vw}
+.mIcon.shop .tips{display:none;}
 .couponTag{padding:0 2vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 1vw;}
 .mf{display:-ms-flexbox;display:-webkit-flex;display:flex;}
 .mfbt{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
@@ -239,7 +240,7 @@
 .priceTag .tag,.listTag{width:12vw;height:5vw;line-height:5vw;font-size:3vw;padding:0 6vw 0 3vw;background-color:#ffe6dc;color:#FF5B00;border-radius:2.6vw;font-style:normal;white-space:nowrap;}
 .priceTag .tag{position:absolute;left:0;top:-6.8vw}
 .listTag{padding:0 2vw;}
-.priceTag .tag:before{width:4vw;height:4vw;background-position:-51.6vw -.9vw;position:absolute;right:1.5vw;top:1.2vw}
+.priceTag .tag:before{width:4vw;height:4vw;background-position:-51.6vw -.9vw;position:absolute;right:1.5vw;top:.2vw}
 .priceTag .tag.on:before{background-position:-43vw -.9vw}
 .priceTag .ladder,.priceTag .promotion{display:none;background-color:rgba(74,79,88,.7);z-index:998}
 .priceTag .ladder>span{display:block;box-sizing:border-box;width:74.6vw;padding:4vw 0;background:#FFF;border-radius:1.6vw;position:relative;top:50%;margin:-60vw auto 0 auto;line-height:10vw;font-size:4.2vw}
@@ -310,7 +311,7 @@
 .ross-from .from-row .input::-moz-input-placeholder{ color:#FFFFFF;}
 .ross-from .from-row .input::-ms-input-placeholder{ color:#FFFFFF;}
 .ross-from .from-row .input::input-placeholder{ color:#FFFFFF;}
-.ross-from .from-row .from-btn{width: 100%;height: 12vw;float: left;line-height: 12vw;font-size: 4vw;color: #FFFFFF;text-align: center;background: #202020;cursor: pointer;}
+.ross-from .from-row .from-btn{width: 100%;height: 12vw;float: left;line-height: 12vw;font-size: 4vw;color: #FFFFFF;text-align: center;background: #202020;cursor: pointer;border-radius: 6vw;}
 .ross-from .from-row .from-btn.disabled{background: #CBCBCB;}
 .ross-from .from-row .link{display: block;line-height: 12vw;font-size: 4vw;color: #FFFFFF;margin: 0 24px;}
 .ross-from .from-row .link.left{float: left;}

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

@@ -31,7 +31,7 @@ iframe{width:320px !important;height: 280px !important}
 .WEB-icon:before{content:'';display:inline-block;background:url(/img/base/WEB-icon.png) no-repeat;font-size:0;}
 .icon.shop,.icon.heart{vertical-align:middle;display:inline-block;height:25px;line-height:25px;}
 .icon.shop:before{width:30px;height:25px;background-position:5px -297px}
-.icon.heart:before{width:25px;height:25px;background-position:-35px -297px}
+.icon.heart:before{width:25px;height:25px;background-position:-35px -295px}
 .icon.shop{position:relative;cursor:pointer}
 .icon.shop .tips{position:absolute;top:-30px;left:0;white-space:nowrap;background-color:#666;border-radius:2px;line-height:30px;font-size:12px;color:#FFF;text-align:center;display:inline-block;opacity:0;transition:all 1s;padding:0 10px;font-style:normal}
 .icon.shop .tips:before{content:"";width:10px;height:10px;background:#666;position:absolute;bottom:-3px;left:17px;transform:rotate(45deg)}
@@ -107,7 +107,7 @@ iframe{width:320px !important;height: 280px !important}
 .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:20px;padding:0 20px;background:#FF5B00;color:#FFF;font-size:14px}
+.baseHeadTop .cartBtm .btn{position:absolute;right:10px;top:10px;height:40px;line-height:40px;border-radius:20px;padding:0 20px;background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);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}
@@ -289,10 +289,10 @@ iframe{width:320px !important;height: 280px !important}
 .classifyBox .tabItem_right .line:hover .lft a,.classifyBox .line.on .lft a{color:#FF5B00}
 .classifyBox .tabItem_right .line:hover{background:#fbfafa}
 /* 底部 */
-.footTop{width:100%;height:60px;padding:20px 0;margin-top:30px;background:#FFF}
+.footTop{width:100%;height:60px;padding:20px 0;margin-top:30px;background:#4A4F58;}
 .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:#FFFFFF;font-weight:bold;font-size:17px;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;}
@@ -398,14 +398,14 @@ iframe{width:320px !important;height: 280px !important}
 .loginAlert:after{content:'';display:block;width:125px;height:125px;background:url(/img/account/to_login.png) no-repeat left top;background-size:100% 100%;margin:10px 0 0 15px;}
 #supplierLogin {display: none;}
 /* 咨询，回到顶部 */
-#scrollTop{display:none;position:fixed;right:0;margin-right:0;width:88px;z-index:9999;bottom:60px;}
-#scrollTop .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}
+#scrollTop{display:none;position:fixed;right:0;margin-right:0;width:88px;z-index:9999;bottom:50px;padding: 10px 0;background: #FFFFFF; border-radius: 16px;box-shadow: -2px 0 30px 2px rgba(97, 105, 119, 0.18);}
+#scrollTop .item{width:100%;border-radius: 10px;display: flex;align-items: center;flex-direction: row; background-color:#fff;box-sizing:border-box;text-align:center;font-size:12px;position:relative}
 #scrollTop .item>span{display:block;width:94px;box-sizing:border-box;position:relative;cursor:pointer;white-space:pre-wrap;word-break:break-all;}
 #scrollTop .item>span:hover{color:#FF5B00;}
-#scrollTop .item .phone{padding:4px 16px 4px 48px;line-height:16px;}
-#scrollTop .item .phone:before{width:32px;height:32px;background-position:0 -254px;position:absolute;top:4px;left:16px}
-#scrollTop .item .toTop{padding:12px 12px 12px 45px;line-height:16px;}
-#scrollTop .item .Iphone {padding:12px 12px 12px 45px;line-height:16px;}
+#scrollTop .item .phone{padding:4px 16px 4px 42px;line-height:16px;}
+#scrollTop .item .phone:before{width:32px;height:32px;background-position:-7px -255px;position:absolute;top:4px;left:16px}
+#scrollTop .item .toTop{padding:12px 12px 12px 40px;line-height:16px;}
+#scrollTop .item .Iphone {padding:12px 12px 12px 40px;line-height:16px;}
 #scrollTop .item .qrCode_cx {
     display: none;
     width: 240px;
@@ -419,6 +419,7 @@ iframe{width:320px !important;height: 280px !important}
     z-index: 999;
     justify-content: space-around;
     align-items: center;
+    border-radius: 8px;
 }
 #scrollTop .item .qrCode_cx:after {
     position: absolute;
@@ -446,9 +447,9 @@ iframe{width:320px !important;height: 280px !important}
     opacity: 1;
     border: 1px solid #FFE6DC;
 }
-#scrollTop .item .toTop:before{width:32px;height:32px;background-position:-42px -254px;position:absolute;top:4px;left:16px}
-#scrollTop .item .Iphone:before{width:32px;height:32px;background-position:-326px -646px;position:absolute;top:4px;left:16px;}
-#scrollTop .item .phoneHover{display:none;position:absolute;left:-238px;top:-145px;z-index:999;width:240px;height:383px;background:url(/img/common/hotline.png) no-repeat left top;box-sizing:border-box;padding:100px 15px 0 0;line-height:28px;font-size:14px;white-space:nowrap;}
+#scrollTop .item .toTop:before{width:32px;height:32px;background-position:-47px -254px;position:absolute;top:4px;left:16px}
+#scrollTop .item .Iphone:before{width:32px;height:32px;background-position:-333px -646px;position:absolute;top:4px;left:16px;}
+#scrollTop .item .phoneHover{display:none;position:absolute;left:-238px;top:-150px;z-index:999;width:240px;height:383px;background:url(/img/common/hotline.png) no-repeat left top;box-sizing:border-box;padding:100px 15px 0 0;line-height:28px;font-size:14px;white-space:nowrap;}
 #scrollTop .item .phoneHover a{color:#FF5B00}
 #scrollTop .item .phoneHover span{color:#93979F;margin-top:10px}
 #scrollTop .item .phoneHover a:hover{text-decoration:underline}
@@ -523,8 +524,8 @@ iframe{width:320px !important;height: 280px !important}
 .ross-from .from-row{width: 100%;height: 40px;float: left;margin: 12px 0;box-sizing: border-box;}
 .ross-from .from-row.none{margin: 0;padding-left: 60px;}
 .ross-from .from-row .label{width: 60px;height: 40px;float: left;line-height: 40px;font-size: 14px;color: #FFFFFF;text-align: right;padding-right: 5px;box-sizing: border-box;}
-.ross-from .from-row .input{width: 280px;height: 40px;float: left;border-radius: 2px; border: none; line-height: 40px;font-size: 14px;color: #202020;box-sizing: border-box;padding: 0 10px;background: #FFFFFF;}
-.ross-from .from-row .from-btn{width: 280px;height: 40px;float: left;line-height: 40px;font-size: 14px;color: #FFFFFF;text-align: center;background: #202020;cursor: pointer;}
+.ross-from .from-row .input{width: 280px;height: 40px;float: left;border-radius: 8px; border: none; line-height: 40px;font-size: 14px;color: #202020;box-sizing: border-box;padding: 0 10px;background: #FFFFFF;}
+.ross-from .from-row .from-btn{width: 280px;height: 40px;float: left;line-height: 40px;font-size: 14px;color: #FFFFFF;text-align: center;background: #202020;cursor: pointer;border-radius: 20px;}
 .ross-from .from-row .from-btn.disabled{background: #CBCBCB;}
 .ross-from .from-row .link{display: block;line-height: 28px;font-size: 14px;color: #FFFFFF;margin: 0 24px;}
 .ross-from .from-row .link.left{float: left;}

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

@@ -19,7 +19,7 @@
 .section_page .section_page_main.type_08{height:268px}
 .section_page .recommendBox-wrapperHot {overflow: visible !important;}
 .section_page .section_page_main.type_03{height:704px}
-.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;position: relative;overflow: hidden;border-radius: 8px;}
+.section_page  .page_main_item{width:164px;height:270px;float:left;margin-right:16px;margin-bottom:16px;background-color:#FFFFFF;transition:all 0.4s;display:block;position: relative;overflow: hidden;border-radius: 8px;}
 .section_page  .page_main_item.hot{width:164px;height:268px;float:left;margin-right:10px;margin-bottom:16px;background-color:#FFFFFF;transition:all 0.4s;display:block;position: relative;border-radius: 8px;}
 .section_page  .page_main_item.default{cursor:default}
 .section_page  .page_main_item.ad_04{border-radius:8px;}
@@ -104,7 +104,7 @@
  */
 @media screen and (max-width:768px) {
 .section_page{width:100%;height:auto;position: relative;}
-.section_page.hot{width:100%;height:auto;background: url("/img/hot/icon-hot-bg@h5.png");background-size: cover;border-radius: 2vw;}
+.section_page.hot{width:100%;height:auto;background: url("/img/hot/icon-hot-bg@h5.png");background-size: cover;border-radius: 4vw;}
 .section_page .section_page_title{padding:2.4vw 0 2.4vw 3.2vw;position:relative}
 .section_page .section_page_title h1{font-weight:bold;color:#4a4f58;font-size:4.8vw;line-height:9.7vw}
 .section_page .section_page_title p{font-weight:normal;color:#93979f;font-size:3.4vw;line-height:4.3vw}
@@ -112,13 +112,13 @@
 .section_page.hot .section_page_title p{color:#FFFFFF;}
 .swiper-container-floor.hotList{padding: 0 1vw;}
 .section_page.hot .section_page_btn{display: block;width:15.4vw;height: 5.9vw;background: url("/img/hot/icon-hot-btn@h5.png");background-size: cover;position: absolute;right:3.3vw;top: 6.8vw;}
-.section_page .page_main_item{width:45.6vw !important;height:68vw;overflow:hidden;margin:0 1.3vw 2.6vw 1.3vw;background:#fff;text-align:left;border-radius: 2vw;}
+.section_page .page_main_item{width:45.6vw !important;height:70vw;overflow:hidden;margin:0 1.3vw 2.6vw 1.3vw;background:#fff;text-align:left;border-radius: 2vw;}
 .section_page .page_main_image{width:45.6vw;height:45.6vw;border-radius: 2vw 2vw 0 0;}
 .section_page .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;right: 2vw;}
 .section_page .page_main_text{padding:0 2vw;height:9.3vw;line-height:5vw;font-size:3.4vw;vertical-align:middle;word-break:break-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1vw}
 .section_page .page_main_item.ad_02 img,.section_page .page_main_item.ad_03 img,.section_page .page_main_item.ad_01 img{height:100%;width:100%;border-radius: 2vw;}
 .section_page .page_main_price{width:100%;box-sizing:border-box;padding:0 1.5vw}
-.section_page .page_main_price .price_text_tag{width:100%;box-sizing:border-box;float:left;margin-top: 1.2vw}
+.section_page .page_main_price .price_text_tag{width:100%;box-sizing:border-box;float:left;margin-top: 1.2vw;min-height: 4.6vw;}
 .section_page .page_main_price .main_price_show{color:#f94b4b}
 .section_page .page_main_price .main_price_show del{color: #B8BFCA}
 .section_page .page_main_price .section_page .page_main_price .main_price_show.none{display:none}
@@ -127,9 +127,9 @@
 .section_page .page_main_price .price_text_tag .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
 .section_page .section_page_main.section_6{height:auto}
 .section_page .section_page_main.section_6 .section_page_more{display:none}
-.section_page .section_page_main.section_3,.section_page .section_page_main.section_4,.section_page .section_page_main.section_5{height:175vw}
+.section_page .section_page_main.section_3,.section_page .section_page_main.section_4,.section_page .section_page_main.section_5{height:180vw}
 .section_page_main.section_3 .page_main_item.ad_01,.section_page_main.section_4 .page_main_item.ad_01,.section_page_main.section_5 .page_main_item.ad_01,.section_page_main.section_6 .page_main_item.ad_01,.section_page .page_main_li.ad_01{width:93.6vw !important;height:auto;}
-.section_page .section_page_main{margin:auto;width:97vw;height:143vw;overflow:hidden;box-sizing: border-box;padding: 2vw 0;}
+.section_page .section_page_main{margin:auto;width:97vw;height:146vw;overflow:hidden;box-sizing: border-box;padding: 2vw 0;}
 .section_page .section_page_main.type_03{height:167vw}
 .section_page .section_page_more{display:none}
 .section_page .section_page_more.show{display:block}
@@ -168,7 +168,7 @@
 .section_page .page_main_price .price_grade_4:before{background-position:-84vw -90.7vw}
 .section_page .page_main_price .price_grade_5:before{background-position:-84vw -97.5vw}
 .section_page .page_main_price .main_price_none .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:right}
-.section_page .page_main_price .price_grade,.section_page .page_main_price .price_grade_shop,.section_page .page_main_price .price_grade_club{display:block;height:7vw;line-height:7vw;color:#4A4F58;font-style:normal;float:left}
+.section_page .page_main_price .price_grade,.section_page .page_main_price .price_grade_shop,.section_page .page_main_price .price_grade_club{display:block;height:7vw;line-height:7vw;color:#f94b4b;font-style:normal;float:left}
 .section_page .page_main_price .price_grade .icon,.section_page .page_main_price .price_grade_shop .icon,.section_page .page_main_price .price_grade_club .icon{display:inline-block;font-size:0;height:5vw;line-height:5vw;vertical-align:text-bottom}
 .section_page .page_main_tag{color:#9aa5b5;margin:1vw 3.2vw;border:.27vw solid #e3ebf7;display:inline-block;padding:0 1.3vw;border-radius:.54vw}
 .section_page .page_main_price .bold{font-weight:bold}
@@ -185,7 +185,7 @@
 
 
 #recommendBox{width: calc(100%);height:150vw;overflow:hidden;position:relative;}
-#recommendBox .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:2.6vw;left:0}
+#recommendBox .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:0vw;left:0}
 #recommendBox .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
 #recommendBox .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FF5B00;border-radius:.3vw}
 #recommendBox .swiper-pagination.hot .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FFFFFF;border-radius:.3vw}

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

@@ -44,7 +44,7 @@
 .subLine .checked.show{display:block}
 .subLine .errTips.show{visibility:visible}
 .subLine .errTips:before{width:20px;height:20px;background-position:-172px -296px;vertical-align:top}
-.subLine .btn{cursor: pointer;display:block;margin:32px auto;width:232px;height:50px;line-height:50px;background-color:#FF5B00;border-radius:25px;text-align:center;font-size:18px;color:#FFF}
+.subLine .btn{cursor: pointer;display:block;margin:32px auto;width:232px;height:50px;line-height:50px;background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);border-radius:25px;text-align:center;font-size:18px;color:#FFF}
 .subLine .btn.disabled{background-color: #999999;}
 .subLine .iconfont{width:16px;height: 16px;display: block;background:url(/img/base/icon.png) no-repeat;float: left;margin-right: 5px;cursor: pointer;}
 .subLine .icon-weigouxuan{background-position: -236px 0;}
@@ -92,11 +92,11 @@
 .formLine .showPwd{display:none;}
 .formLine.code input{width:57.4vw}
 .formLine.code .checked{right:auto;left:50vw;}
-.formLine.code .getCode{position:absolute;right:0;top:10vw;box-sizing:border-box;width:33.4vw;height:11.2vw;line-height:11.2vw;text-align:center;background-color:#ffe6dc;border-radius:5.2vw;border:solid 1px #FF5B00;color:#FF5B00;}
+.formLine.code .getCode{position:absolute;right:0;top:10vw;box-sizing:border-box;width:33.4vw;height:11.2vw;line-height:11.2vw;text-align:center;background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);border-radius:5.2vw;color:#FFFFFF;}
 .subLine{text-align:center;font-size:3.1vw;padding-top:5vw;}
 .subLine p input{margin-right:1vw;}
 .subLine p a{color:#1890f9}
-.subLine .btn{display:block;margin:5vw auto;width:100%;height:11.2vw;line-height:11.2vw;background-color:#FF5B00;border-radius:5.2vw;text-align:center;font-size:3.4vw;color:#FFF}
+.subLine .btn{display:block;margin:5vw auto;width:100%;height:11.2vw;line-height:11.2vw;background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);border-radius:5.2vw;text-align:center;font-size:3.4vw;color:#FFF}
 .subLine .btn.disabled{background-color: #999999;}
 .subLine .iconfont{width:4vw;height: 4vw;display: block;background:url(/img/base/icon_m.png) no-repeat;float: left;margin-right: 1vw;cursor: pointer;background-size: 100vw;}
 .subLine .icon-weigouxuan{background-position: -10vw -54.1vw;}

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

@@ -201,8 +201,8 @@ li{list-style:none;}
 footer{width:100%;height:auto;float:left}
 
 /* 首页右侧导航 */
-#sideNav{display:none;position:fixed;right:0;margin-right:0;width:88px;z-index:9999;bottom:180px;}
-#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{display:none;position:fixed;right:0;margin-right:0;width:88px;z-index:9999;bottom:200px;}
+#sideNav .item{width:100%;background-color:#fff;box-sizing:border-box;text-align:center;box-shadow:-2px 0 30px 2px rgba(97, 105, 119, 0.18);border-radius:16px;font-size:12px;position:relative;overflow: hidden;}
 #sideNav .item>a{display:block;width:100%;box-sizing:border-box;padding:14px 6px;line-height:14px;position:relative;font-size: 13px;}
 #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}

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

@@ -3,30 +3,32 @@
 * 移动端
 */
 li{list-style:none}
-.productBox{width:100%;background:#FFF;position: relative;padding-top: 27vw;}
+.productBox{width:100%;background:#FFF;position: relative;padding-top: 27vw;border-radius: 4vw;}
 .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 .cm-product-cover-tag{position:absolute;top: 0;right: 3vw;z-index: 99; width: 15.9vw;height: 10.5vw;background: url(/img/activity/cm_cover_bg_h5.png) no-repeat center;background-size: 15.9vw;text-align: center;color: #fff;line-height: 5.5vw;font-size: 2vw;}
-.productBox .detailBox{box-sizing:border-box;padding:0 3.3vw;overflow:hidden;position: relative;}
+.productBox .detailBox{box-sizing:border-box;padding:3.3vw;overflow:hidden;position: relative;}
 .productBox .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;left: 2vw;z-index: 99;}
 .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{width: 80vw;font-size:4.2vw;font-weight:bold;line-height:6.4vw;color:#4A4F58;margin-bottom:3.5vw;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;}
 .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:2.1vw;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:3vw;position:relative;margin:3.5vw 0}
+.productBox .detailBox .detail{box-sizing:border-box;padding:2.8vw;font-size:3.4vw;line-height:7.5vw;color:#93979F;background:rgba(0,0,0,.02);border-radius:3vw;position:relative;margin:3vw 0}
 .productBox .detailBox .detail hr{border:none;border-top:1px dashed #BEC2C9;margin:2vw 0}
 .productBox .detailBox .none-details{opacity: 0;box-sizing:border-box;padding:7vw;font-size:3.4vw;color:#9aa5b5;margin:10px 0;position:relative;min-height: 33.2vw;}
 .productBox .detailBox .none-details .none-image{width: 38.6vw;height: 30.5vw;display: block;margin: 0 auto;}
 .productBox .detailBox .none-details .none-text{width: 100%;height: 4vw;line-height: 4vw;text-align: center;color: #ffb496;font-size: 3.4vw;margin-top: 2vw;}
 .productBox .detailBox .none-details.show{opacity: 1;}
-.productBox .detailBox .product-collection{width:14vw;display: block;position: absolute;right: 2vw;top: 4.8vw;cursor: pointer;}
+.productBox .detailBox .product-collection{width:14vw;display: block;position: absolute;right: 2vw;top: 0.8vw;cursor: pointer;}
 .productBox .detailBox .product-collection img{height: 6.4vw;width: 6.4vw;display: block;margin: 0 auto;margin-bottom: .2vw;}
 .productBox .detailBox .product-collection p{height: 4.4vw;line-height: 4.4vw;text-align: center;font-size: 3vw;color: #333333;}
 .productBox .detailBox .row{position:relative;}
-.priceTag {position: absolute;left: 20vw;}
+.priceTag {position: absolute;left: 15vw;}
+.priceTag .tag{ min-width: 23vw; }
 .productBox .detailBox .row>i{font-style:normal;margin-right:2vw;}
 .productBox .detailBox .row>em{font-style:normal;color:#4A4F58}
+.productBox .detailBox .row>em.red{color:#f94b4b;}
 .productBox .detailBox .row>em.p{font-weight:bold;}
 .productBox .detailBox .row>em.p.price{color: #F94B4B;font-size:3.8vw;}
 .productBox .detailBox .row>em del{color: #93979F}
@@ -64,43 +66,45 @@ li{list-style:none}
 .productBox .detailBox .number>em{display:inline-block;width:6.4vw;height:6.4vw;background:#FFE6DC;font-size:4vw;line-height:6vw;vertical-align:top;font-style: normal;}
 .productBox .detailBox .number input{width:13.5vw;border:none;line-height:6vw;vertical-align:top;text-align:center;color:#FF5B00;font-size:3.4vw}
 .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 #FF5B00;background:#FFE6DC;cursor:pointer;border-radius:5.5vw;font-size:3.4vw;color:#FF5B00;margin:1.7vw 1.1vw}
-.productBox .detailBox .btnBox .buy{background:#FF5B00;color:#FFF}
+.productBox .detailBox .btnBox:before{content:'';display:none;width:200%;height:2.7vw;background:#F5F5F5;margin-left:-25%}
+.productBox .detailBox .btnBox{text-align:center;box-sizing: border-box;padding: 0 6vw 3vw 6vw; }
+.productBox .detailBox .btnBox .cart,
+.productBox .detailBox .btnBox .buy{display:inline-block;width:50%;height:11.2vw;line-height:11.2vw;text-align:center;background:#FFE6DC;cursor:pointer;border-radius:5.5vw;font-size:3.4vw;color:#FF5B00;float: left;box-shadow: rgba(255, 119, 0, 0.2) 0px 3px 15px 0px;}
+.productBox .detailBox .btnBox .buy{background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color:#FFFFFF;border-radius: 0 5.6vw 5.6vw 0;}
+.productBox .detailBox .btnBox .cart{ background: #ffe6dc;color: #ff5b00;border-radius: 5.6vw 0 0 5.6vw; }
 .productBox .detailBox .btnBox .cart.disable{background: #FFE6DC;border-color: rgba(255, 230, 220, 0.3);}
 .productBox .detailBox .btnBox .buy.disable{background: rgba(225, 86, 22, 0.2);border-color: rgba(225, 86, 22, 0.2);}
 .productBox .detailBox .concatBox{height:20vw;padding-bottom:4vw}
 .productBox .detailBox .concatBox img{height:20vw;width:auto}
-.productBox .detailBox .upgrade{width:100%;background:#F94B4B;border-radius:5.6vw;display:inline-block;text-align:center;height:11.2vw;line-height:11.2vw;font-size:3.4vw;color:#FFF;margin:1.7vw 0}
+.productBox .detailBox .upgrade{width:100%;background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);border-radius:5.6vw;display:inline-block;text-align:center;height:11.2vw;line-height:11.2vw;font-size:3.4vw;color:#FFF;margin:1.7vw 0}
 /*配套商品*/
-.product-supporting{width: 100%;height: 44vw;box-sizing: border-box;padding: 3.3vw;background-color: #FFFFFF;margin: 1.3vw 0;}
+.product-supporting{width: 100%;height: 44vw;box-sizing: border-box;padding: 3.3vw;background-color: #FFFFFF;margin: 3vw 0;border-radius: 4vw;}
 .product-supporting-title{width: 100%;height: 6.2vw;line-height: 6.2vw;font-size: 3.6vw;color: #333333;text-align: left;font-weight: bold;}
 .product-supporting-content{width: 100%;height: 24.2vw;margin-top: 3vw;position: relative;}
-.product-supporting-content .product-supporting-list{width:24.2vw;height: 24.2vw;float: left;box-sizing: border-box;border: 1px solid #E2E7EF;margin-right: 2.4vw;border-radius: 2px;}
+.product-supporting-content .product-supporting-list{width:24.2vw;height: 24.2vw;float: left;box-sizing: border-box;border: 1px solid #E2E7EF;margin-right: 2.4vw;border-radius: 2vw;overflow: hidden;}
 .product-supporting-content .product-supporting-list img{width:100%;height: 100%;display: block;border-radius: 2px;}
 .product-supporting-more{width: 14vw;height: 100%;position: absolute;right: 0;top: 0;padding-left: 7.5vw;box-sizing: border-box;display: flex;align-items: center;}
 .product-supporting-more .mIcon{width: 6.5vw;height: 6.5vw;}
 .product-supporting-more .mIcon::before{width: 6.5vw;height: 6.5vw;background: url("/img/base/icon-xiayibu@2x.png");background-size: cover;}
-.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}
+.recommendBox{margin:3vw 0;width:100%;background:#FFF;border-radius: 4vw;}
+.recommendBox .hd{font-size:3.4vw;color:#333333;font-weight:bold;padding:2.7vw;text-align:left;line-height: 8vw;}
 #productRecommend{width:100%;height:50vw;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 img{display:block;width:100%;height:26.8vw;border-radius: 3vw;}
 #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{box-sizing:border-box;background:#FFF;margin:3vw 0;line-height:7.5vw;font-size:3.4vw;padding:2vw 3.3vw;border-radius: 4vw;}
 .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{margin-right:2vw;}
 .mShopBox .name:after{content:'\276F';float:right;font-size:4vw;color:#707070}
 
-.productInfo{background:#FFF;margin-bottom: 2.7vw;}
+.productInfo{background:#FFF;margin-bottom: 2.7vw;border-radius: 4vw;}
 .productInfo .tabTit{padding:1.5vw 3.3vw;}
 .productInfo .tabTit span{display:inline-block;height:7.5vw;line-height:7.5vw;border-bottom:2px solid transparent;color:#93979F;font-size:3.4vw;margin-left:8vw;}
 .productInfo .tabTit span.on{color:#E15621;border-color:#E15621}
 .productInfo .tabTit span:first-child{margin-left:0;}
-.productInfo .tabCon{padding:1.2vw 3.3vw 3.3vw;text-align:center;font-size:3.4vw;word-break: break-all;}
+.productInfo .tabCon{padding:1.2vw 3.3vw 6vw;text-align:center;font-size:3.4vw;word-break: break-all;}
 .productInfo .tabCon img{max-width:100%;height:auto!important;}
 .productInfo .tabCon table{width:100%;text-align:left}
 .productInfo .tabCon td{padding:1.5vw;line-height:5vw}

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

@@ -3,20 +3,37 @@
  * PC端
  */
 li{list-style:none;}
-.productBox{width:100%;margin:16px 0;background:#FFF;box-sizing:border-box;padding:15px;border-radius: 8px;}
+.productShopBox{width: 100%;box-sizing: border-box;height: 80px;padding: 0 16px;margin: 16px auto;background: #FFFFFF;border-radius: 16px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
+.productShopBox a:hover{ color: #333333;}
+.productShopBox .shop-item{ display: flex;flex: 1;flex-direction: row;align-items: center; }
+.productShopBox .shopBox-logo{ width: 60px;height: 60px;border-radius: 30px;overflow: hidden;margin-right: 12px;background:rgba(0,0,0,0.02);}
+.productShopBox .shopBox-content{ display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-moz-box-orient: vertical;-moz-box-direction: normal;flex-direction: column }
+.productShopBox .shopBox-name{ font-weight: 600;font-size: 16px;line-height: 24px;color: #11192d;margin-right: 16px;}
+.productShopBox .shopBox-tit{ font-size: 14px;}
+.productShopBox .shopBox-main{ margin-top: 10px;display: flex;flex-direction: row;}
+.productShopBox .shopBox-con{ height: 24px;line-height: 24px;background-color: #f3f6f8;padding: 0 8px;margin-right: 4px;border-radius: 4px;display: flex;flex-direction: row;align-items: center;}
+.productShopBox .shopBox-con .icon.adr{ vertical-align: middle;display: inline-block;width: 20px;height: 20px;line-height: 25px; }
+.productShopBox .shopBox-con .icon.adr:before{width: 20px;height: 20px;background-position: -323px -332px;}
+.productShopBox .shopBox-btn a{ display: flex;flex-direction: row;align-items: center; height: 30px;line-height: 30px; padding: 0 16px; font-size: 14px;font-weight: 500;color: #11192d;border: 1px solid #e2e4e6;border-radius: 8px;text-align: center;}
+.productShopBox .shopBox-btn a .icon.shop{ vertical-align: middle;display: inline-block;width: 20px;height: 20px;line-height: 25px; }
+.productShopBox .shopBox-btn a .icon.shop:before{width: 20px;height: 20px;background-position: -182px -746px;}
+
+
+.productBox{width:100%;margin:16px 0 0 0;background:#FFF;box-sizing:border-box;padding:15px;border-radius: 24px 24px 0 0;padding-bottom: 40px;}
 .productBox .imageBox{float:left;width:452px;height:545px;position:relative}
 .productBox .page_main_type{width: 34px;height: 34px;text-align: justify;box-sizing: border-box;padding: 5px;border-radius: 0 0 8px 8px;background-color: #33CCBF;font-size: 12px;color: #FFFFFF;line-height: 13px;position: absolute;top: 0;left: 15px;z-index: 88;}
 .productBox .cm-product-cover-tag{position:absolute;top: 0;right: 15px;z-index: 99;width: 75px;height: 49px;background: url(/img/activity/cm_cover_bg_pc.png) no-repeat center;background-size: 75px;text-align: center;color: #fff;line-height: 27px;font-size: 12px;}
 .productBox .detailBox{float:right;width:686px;position: relative;}
-.productBox img{width:100%;height:100%;display:block}
-.productBox .bigImage{position:relative; width:452px;height:452px;background:#F3F7FE;border: 1px solid #e4e4e4;}
-.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 img{width:100%;height:100%;display:block;border-radius: 12px;}
+.productBox .bigImage{position:relative; width:452px;height:452px;background:rgba(0,0,0,.02);border-radius: 12px;}
+.productBox .bigImage:before{ content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, .02);border-radius: 12px; }
+.productBox .bigImage .mask{display:none;position:absolute;left:0;top:0;width:180px;height:180px;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;border-radius: 8px;overflow: hidden;cursor: pointer;}
-.productBox .smallImage li.on{opacity:1;border:1px solid #FF5B00}
+.productBox .smallImage li.on{opacity:1;border:2px solid #FF5B00}
 .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{display:none;overflow:hidden;position:absolute;right:-466px;top:0;width:452px;height:452px;border-radius: 12px;overflow: hidden; border:1px solid #e4e4e4;z-index:9999;background:#FFF}
 .productBox .zoomImage img{width:950px;height:950px;margin-right:10px;display:block;max-width:none;}
 .productBox .detailBox .product-collection{width: 72px;display: block;position: absolute;right: 0;top: 0;cursor: pointer;}
 .productBox .detailBox .product-collection img{height: 26px;width: 26px;display: block;margin: 0 auto;margin-bottom: 2px;}
@@ -27,7 +44,7 @@ li{list-style:none;}
 .productBox .detailBox .title{font-size:18px;font-weight:bold;line-height:24px;padding:5px 0;color:#4A4F58;width: 620px;}
 .productBox .detailBox .tags{padding:2px 0}
 .productBox .detailBox .tags span{display:inline-block;line-height:16px;padding: 3px 6px;font-size:12px;color: #9aa5b5;border-radius:14px;margin-right:10px;border: 1px solid #e2e7ef;}
-.productBox .detailBox .detail{box-sizing:border-box;padding:14px 20px;font-size:14px;color:#9aa5b5;background:#f3f7fe;border-radius:8px;margin:10px 0;position:relative;}
+.productBox .detailBox .detail{box-sizing:border-box;padding:14px 20px;font-size:14px;color:#9aa5b5;background:#F7F7F7;border-radius:12px;margin:10px 0;position:relative;}
 .productBox .detailBox .none-details{opacity: 0;box-sizing:border-box;padding:70px 20px;font-size:14px;color:#9aa5b5;margin:10px 0;position:relative;min-height: 332px;}
 .productBox .detailBox .none-details .none-image{width: 179px;height: 141px;display: block;margin: 0 auto;}
 .productBox .detailBox .none-details .none-text{width: 100%;height: 40px;line-height: 40px;text-align: center;color: #ffb496;font-size: 16px;}
@@ -50,7 +67,8 @@ li{list-style:none;}
 .productBox .detailBox .row .coupon-tags>em.couponTag-more{color: #4a4f58;cursor: pointer;}
 .productBox .detailBox .row .unit-tags{display: inline-block;padding-left: 7px;}
 .productBox .detailBox .row .unit-tags>em{font-style:normal;display: inline-block;margin-right: 8px;position: relative;}
-.productBox .detailBox .row .unit-tags .unitTags{display: inline-block;height: 24px;line-height: 24px;border: 1px solid #BFC6D2;border-radius: 12px;font-size: 14px;color: #627386;background: #FFFFFF;padding: 0 8px;position: relative;font-style: normal;cursor: pointer;margin-right: 8px;margin-bottom: 11px;min-width: 30px;text-align: center;}
+.productBox .detailBox .row .unit-tags .unitTags{display: inline-block;height: 24px;line-height: 24px;border: 1px solid #BFC6D2;border-radius: 4px;font-size: 14px;color: #627386;background: #FFFFFF;padding: 0 8px;position: relative;font-style: normal;cursor: pointer;margin-right: 8px;margin-bottom: 11px;min-width: 30px;text-align: center;}
+.productBox .detailBox .row .unit-tags .unitTags:hover{ background-color: #FFF6F2;transition: background-color 0.2s; }
 .productBox .detailBox .row .unit-tags .unitTags.active{border-color: #E15621;color: #E15621;}
 .productBox .detailBox .row .unit-tags .unitTags.active .tips{background: #FF5B00;}
 .productBox .detailBox .row .unit-tags .tips{display: block;padding: 0 4px;height: 16px;line-height: 16px;font-style: normal; font-size: 12px;text-align: center;background: #CBD2DF;border-radius: 2px;position: absolute;right: -5px;top: -8px;color: #FFFFFF;}
@@ -80,17 +98,19 @@ li{list-style:none;}
 .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{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 #FF5B00;background:#fff;cursor:pointer;border-radius:20px;font-size:16px;color:#FF5B00;margin:0 10px}
+.productBox .detailBox .btnBox .cart,
+.productBox .detailBox .btnBox .buy{display:block;text-align: center; width:160px;height:48px;line-height:48px;background:#fff;cursor:pointer;border-radius:20px;font-size:16px;color:#FF5B00;float: left;box-shadow: rgba(255, 119, 0, 0.2) 0px 3px 15px 0px;}
+.productBox .detailBox .btnBox .cart{ background: #ffe6dc;color: #ff5b00;border-radius: 24px 0 0 24px; }
 .productBox .detailBox .btnBox .cart.disable{background: #FFE6DC;border-color: rgba(255, 230, 220, 0.3);color: #EFC5B2;}
 .productBox .detailBox .btnBox .buy.disable{background: rgba(225, 86, 22, 0.2);border-color: rgba(225, 86, 22, 0.2);}
 .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:#FF5B00;color:#FFF}
+.productBox .detailBox .btnBox .buy{background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color:#FFFFFF;border-radius: 0 24px 24px 0;}
 .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}
-.productBox .detailBox .upgrade{background:#F94B4B;border-radius:20px;display:inline-block;text-align:center;color:#FFFFFF;height:40px;line-height:40px;padding:0 30px;font-size:16px}
+.productBox .detailBox .upgrade{background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);box-shadow: rgba(255, 119, 0, 0.2) 0px 3px 15px 0px;border-radius:20px;display:inline-block;text-align:center;color:#FFFFFF;height:40px;line-height:40px;padding:0 40px;font-size:16px}
 /*配套商品*/
-.product-supporting{width: 100%;min-height: 200px;background-color: #FFFFFF;box-sizing: border-box;padding: 16px;margin-bottom: 16px;border-radius: 8px;}
+.product-supporting{width: 100%;min-height: 200px;background-color: #FFFFFF;box-sizing: border-box;padding: 16px;}
 .product-supporting-title{width: 100%;height: 30px;line-height: 30px;text-align: left;font-size: 16px;color: #333333;font-weight: bold;}
 .product-supporting-content{width: 100%;height: auto;}
 .product-supporting-td{width: 100%;height: 38px;line-height: 38px;}
@@ -101,32 +121,32 @@ li{list-style:none;}
 .product-supporting-td p.td-4{width: 20%;}
 .product-supporting-td p.td-5{width: 20%;}
 .product-supporting-td p.td-6{width: 15%;}
-.product-supporting-list{width: 100%;height: 102px;box-sizing: border-box;padding: 16px;}
-.product-supporting-list.active{background-color: #F3F7FE;}
+.product-supporting-list{width: 100%;height: 102px;box-sizing: border-box;padding: 16px;border-radius: 12px;}
+.product-supporting-list.active{background-color: #F7F7F7;}
 .product-supporting-list .tr{font-size: 14px;color: #627386;float: left;text-align: center;}
 .product-supporting-list .tr-1{width:10%;}
 .product-supporting-list .tr-1 a{width: 70px;height: 70px;display: block;position: relative;}
 .product-supporting-list .tr-1 a .smalltype{width: 22px;height: 22px;position: absolute;top: 0;right: 5px;z-index: 88;}
-.product-supporting-list .tr-1 .images{width: 70px;height: 70px;display: block;box-sizing: border-box;border: 1px solid #E2E7EF;border-radius: 2px;}
+.product-supporting-list .tr-1 .images{width: 70px;height: 70px;display: block;box-sizing: border-box;border: 1px solid #E2E7EF;border-radius: 8px;}
 .product-supporting-list .tr-2{width:20%;height: 100%;box-sizing: border-box;padding: 16px 0;}
 .product-supporting-list .tr-2 p{text-align: justify;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;}
 .product-supporting-list .tr-3{width:15%;box-sizing: border-box;padding: 16px;position: relative;}
-.product-supporting-list .tr-3 .sku-popup{position: relative;height: 26px;display: inline-block;box-sizing: border-box;cursor: pointer; border: 1px solid #E2E7EF;border-radius: 13px;padding: 0 8px;}
+.product-supporting-list .tr-3 .sku-popup{position: relative;height: 26px;display: inline-block;box-sizing: border-box;cursor: pointer; border: 1px solid #E2E7EF;border-radius: 12px;padding: 0 8px;}
 .product-supporting-list .tr-3 .sku-popup .sku-text{width: 54px;height: 24px;text-align: left; display: block;line-height: 24px;font-size: 12px;color: #22272E;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;float: left;}
 .product-supporting-list .tr-3 .sku-popup .sku-icon{width: 24px;height: 24px;float: right;}
 .product-supporting-list .tr-3 .sku-popup .sku-icon .icon:before{width: 24px;height: 24px;background-position:-83px 2px;}
-.product-supporting-list .tr-3 .sku-popup-viw{width: 360px;height: 394px;z-index: 99; box-sizing: border-box;padding: 16px;position: absolute;bottom: -376px;left: 36px;background: #FFFFFF;box-shadow: 0px 6px 16px 1px rgba(0,0,0,0.1);border: 1px solid #E2E7EF;}
+.product-supporting-list .tr-3 .sku-popup-viw{width: 360px;height: 350px;z-index: 99; box-sizing: border-box;padding: 16px;position: absolute;bottom: -333px;left: 36px;background: #FFFFFF;box-shadow: 0px 6px 16px 1px rgba(0,0,0,0.1);border: 1px solid #E2E7EF;border-radius: 12px;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-title{width: 100%;height: 80px;float: left;margin-bottom: 10px;}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-image{width: 80px;height: 80px;float: left;border: 1px dashed #E2E7EF;box-sizing: border-box;}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-image{width: 80px;height: 80px;float: left;border: 1px dashed #E2E7EF;box-sizing: border-box;border-radius: 8px;overflow: hidden;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-image img{width: 100%;height: 100%;display: block}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-price{width: 200px;height: 80px;float: left;box-sizing: border-box;padding-left: 16px;padding-top: 16px;text-align: left;color: #F94B4B;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-price .price_grade{float: left;width: 100%;margin-bottom: 10px;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon:before{width:63px;height: 22px;}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i1:before{background-position:-2px -715px}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i2:before{background-position:-2px -745px}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i3:before{background-position:-2px -775px}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i4:before{background-position:-2px -805px}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i5:before{background-position:-2px -835px}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i1:before{background-position:-2px -709px}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i2:before{background-position:-2px -735px}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i3:before{background-position:-2px -765px}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i4:before{background-position:-2px -790px}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-price .icon.i5:before{background-position:-2px -820px}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-price .main_price_show{float: left;width: 100%;margin-bottom: 10px;color: #F94B4B;text-align: left;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-price .price_text_tag{float: left;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-price .couponTag{float: left;margin-right: 5px;}
@@ -140,17 +160,17 @@ li{list-style:none;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-price .svip-tag .svip-price span{color: #333}
 
 .product-supporting-list .tr-3 .sku-popup-viw .sku-h1 {width: 100%;height: 20px;line-height: 20px;font-size: 14px;color: #22272E;font-weight: bold;float: left;text-align: left;}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-unit{width: 100%;height: 180px;padding: 12px 0;overflow-y: scroll;box-sizing: border-box;}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-unit .unitTags{display: inline-block;height: 24px;line-height: 24px;border: 1px solid #BFC6D2;border-radius: 2px;font-size: 12px;color: #627386;background: #FFFFFF;padding: 0 8px;position: relative;font-style: normal;cursor: pointer;margin-right: 8px;margin-bottom: 11px;float: left;}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-unit{width: 100%;height: 150px;padding: 12px 0;overflow-y: scroll;box-sizing: border-box;}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-unit .unitTags{display: inline-block;height: 24px;line-height: 24px;border: 1px solid #BFC6D2;border-radius: 12px;font-size: 12px;color: #627386;background: #FFFFFF;padding: 0 16px;position: relative;font-style: normal;cursor: pointer;margin-right: 8px;margin-bottom: 11px;float: left;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-price .price_text_tag .listTag{margin: 0;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-unit .unitTags.active{border-color: #E15621;color: #E15621;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-unit .unitTags.active .tips{background: #FF5B00;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-unit .tips{display: block;padding: 0 4px;height: 16px;line-height: 16px;font-style: normal; font-size: 12px;text-align: center;background: #CBD2DF;border-radius: 2px;position: absolute;right: -5px;top: -8px;color: #FFFFFF;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-button{width: 100%;height: 80px;position: absolute;bottom: 0;left: 0;}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-button .sku-button-center{width: 184px;height: 80px;margin: 0 auto;box-sizing: border-box;padding: 24px 0;}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-button .sku-btn{width: 68px;height: 32px;display: block;margin: 0 12px;font-size: 14px;text-align: center;line-height: 32px;float: left;}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-button .sku-btn.cancel{background: #E2E2E2;color: #4A4F58;}
-.product-supporting-list .tr-3 .sku-popup-viw .sku-button .sku-btn.confirm{background: #E15621;color: #FFFFFF;}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-button .sku-button-center{width: 200px;height: 84px;margin: 0 auto;box-sizing: border-box;padding: 24px 0;}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-button .sku-btn{width: 50%;height: 36px;display: block;font-size: 14px;text-align: center;line-height: 36px;float: left;}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-button .sku-btn.cancel{background: #E2E2E2;color: #4A4F58;border-radius: 18px 0 0 18px;}
+.product-supporting-list .tr-3 .sku-popup-viw .sku-button .sku-btn.confirm{background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color: #FFFFFF;border-radius: 0 18px 18px 0;}
 .product-supporting-list .tr-3 .sku-popup-viw .sku-button .sku-btn.disable{background: rgba(255,86,22,0.3);color: #FFFFFF;}
 
 
@@ -184,18 +204,18 @@ li{list-style:none;}
 .product-supporting-button .product-supporting-total .ore{color: #E15621;}
 .product-supporting-button .product-supporting-total .red{color: #F94B4B;}
 .product-supporting-button .product-supporting-btn{width: 100%;height: 36px;text-align: right;}
-.product-supporting-button .product-supporting-btn .btn{width: 128px;height: 36px;text-align: center;border: 1px solid #E15621;float: right;margin-left: 20px;line-height: 36px;font-size: 14px;cursor: pointer;border-radius: 18px;}
-.product-supporting-button .product-supporting-btn .btn.add{background-color: #FFE6DC;color: #E15621;}
-.product-supporting-button .product-supporting-btn .btn.buy{background-color: #E15621;color: #FFFFFF;}
+.product-supporting-button .product-supporting-btn .btn{width: 128px;height: 36px;text-align: center;float: right;margin-left: 20px;line-height: 36px;font-size: 14px;cursor: pointer;border-radius: 18px;}
+.product-supporting-button .product-supporting-btn .btn.add{background: #ffe6dc;color: #FF5B00;}
+.product-supporting-button .product-supporting-btn .btn.buy{background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color: #FFFFFF;}
 .recommendBox{margin-bottom:16px;overflow: hidden;}
 .recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 15px}
-#productRecommend{padding:16px 5px;background: #fff}
+#productRecommend{padding:16px 5px;background: #fff;border-radius: 24px;}
 #productRecommend li{float:left;width:167px;height:205px;overflow:hidden;background:#FFF;}
 #productRecommend li .item{width:151px;height:205px;margin:0 auto;line-height:22px;background:#FFF;}
 #productRecommend li .item a{display:block;width:100%;height:100%;color:#93979F}
 #productRecommend li .item a:hover{color:#FF5B00}
-#productRecommend li .item a:hover img{border: solid 1px #FF5B00;}
-#productRecommend li .item img{display:block;width:151px;height:151px;border:solid 1px #e2e7ef;}
+#productRecommend li .item a:hover img{border: solid 2px #FF5B00;}
+#productRecommend li .item img{display:block;width:151px;height:151px;border:solid 2px #e2e7ef;border-radius: 12px;box-sizing: border-box;}
 #productRecommend li .item span{max-height:44px;padding-top:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
 #productRecommend .swiper-wrapper{height:205px;overflow:hidden;background:url(/img/base/placeholder.png) repeat-x center;background-size:162px;}
 #productRecommend .swiper-pagination{width:100%;height:14px;z-index:1;text-align:center;font-size:0;}
@@ -203,12 +223,12 @@ li{list-style:none;}
 #productRecommend .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#FF5B00;border-radius:2px}
 #productRecommend .swiper-pagination span.on{width:28px;opacity:1;}
 
-.wrap>.productInfo{float:left;box-sizing:border-box;padding:0 0;width:884px;background:#FFF;min-height: 487px;border-radius: 8px;overflow: hidden;}
-.productInfo .tabTit{height:40px;line-height:40px;border-bottom:1px solid #ffe6dc;font-size:16px;color:#333333}
+.wrap>.productInfo{float:left;box-sizing:border-box;padding:0 0;width:100%;background:#FFF;min-height: 487px;border-radius: 0 0 24px 24px;overflow: hidden;}
+.productInfo .tabTit{height:40px;line-height:40px;box-sizing: border-box;padding: 0 16px; border-bottom:1px solid hsla(0,0%,59.2%,.1);font-size:16px;color:#333333}
 .productInfo .tabTit span{display:inline-block;box-sizing:border-box;min-width:130px;text-align:center;height:100%;padding:0 32px;cursor:pointer}
 .productInfo .tabTit span:hover{color:#E15621}
-.productInfo .tabTit span.on,.productInfo .tabTit span.on:hover{background:#ffe6dc;color:#FF5B00;font-weight: bold;}
-.productInfo .tabCon{padding:16px;text-align:center;word-break: break-all;}
+.productInfo .tabTit span.on,.productInfo .tabTit span.on:hover{color:#333333;font-weight: 600;border-bottom: 2px solid #ff5b00;}
+.productInfo .tabCon{padding:16px 166px 80px 166px;text-align:center;word-break: break-all;box-sizing: border-box;}
 .productInfo .tabCon img{width:100%;height: auto;}
 .productInfo .tabCon table{width:100%;text-align:left}
 .productInfo .tabCon td{padding:10px 12px;line-height:20px}
@@ -223,16 +243,15 @@ li{list-style:none;}
 .productInfo .product-qualificationImg image{width: 100%;height: auto;display: block;}
 .wrap>.rgt{float:right;width:284px}
 .wrap>.rgt .hd{height:40px;line-height:40px;padding:0 16px;font-size:16px;color:#FF5B00;font-weight:bold;background:#ffe6dc}
-.shopBox{margin-bottom:16px;background:#FFF;border-radius: 8px;overflow: hidden;}
+.shopBox{margin-bottom:16px;background:#FFF;border-radius: 8px;overflow: hidden;display: none;}
 .shopBox .bd{padding:15px}
 .shopBox .bd .name{line-height:20px;padding: 10px 0;font-weight:bold;color:#4A4F58;font-size:14px;border-bottom:1px solid #F7F7F7;position: relative}
 .shopBox .bd .tit{line-height:30px;font-weight:bold;color:#4A4F58;font-size:14px}
 .shopBox .bd .con{line-height:20px;color:#627386;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:18px;font-size:14px;color:#FF5B00;margin-top:12px;background: #fef6f3}
-.wrap>.rgt .section{background:#FFF;border-radius: 8px;overflow: hidden;}
-.wrap>.rgt .section .bd{padding:15px;line-height:24px;font-size:12px;color:#627386;margin-bottom: 12px}
-.wrap>.rgt .section .bd div:nth-child(1){font-weight: bold;font-size: 14px;color: #4a4f58;}
-.wrap>.rgt .section .bd div{margin-bottom: 12px}
+.wrap .return-instructions{background:#FFF;border-radius: 24px;overflow: hidden;}
+.wrap .return-instructions .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 15px}
+.wrap .return-instructions .bd{padding:0 12px;line-height:24px;font-size:12px;color:#666666;margin-bottom: 12px}
 
 .row img{width:12px;height:12px;display:inline-block;margin:-3px 5px}
 .row .fuwu{margin-right:15px}
@@ -313,7 +332,7 @@ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appear
 /*资料样式*/
 .cm-database{text-align:initial}
 /*去登陆*/
-.cm-goLogin{width:884px;height:56px;margin-left:-16px;margin-bottom: 16px;background:#FFE6DC;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.cm-goLogin{width:100%;height:56px;margin-left:-16px;margin-bottom: 16px;background:#FFE6DC;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
 .cm-goLogin span:nth-child(1){font-size:16px;color:#FF5B00;line-height:56px}
 .cm-goLogin span:nth-child(2){width:80px;height:35px;background:#FF5B00;border-radius:18px;color:#fff;font-size: 16px;text-align: center;line-height: 35px;cursor: pointer;}
 .cm-database .cm-category .cm-category-title{padding-bottom:16px;font-size:16px;font-weight:bold;color:#4A4F58;border-bottom:1px solid #E2E7EF}

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

@@ -1,177 +1,178 @@
-.productItem .price .price_text_tag{-webkit-transform: scale(0.8) translateX(-20px);-ms-transform: scale(0.8) translateX(-20px);transform: scale(0.8) translateX(-20px)}
-
-@media screen and (min-width:768px){
-    #productList{width: 1184px;margin:32px auto;position: relative;}
-    .crumbs-nav{height: 40px}
-    .search-text{float: left;}
-    .crumbs-nav-main{float: left;}
-    .crumbs-nav .crumbs-link{color:#4a4f58;float: left;}
-    .search-text-brand{float: left;position: relative; height: 24px;padding: 0 24px 0 12px;line-height: 24px;box-sizing: border-box;border: 1px solid #DDDDDD;border-radius: 2px;text-align: center;font-size: 14px;color: #4A4F58;}
-    .search-text-brand a{color: #E15621;}
-    .search-text-brand .icon:before{background-position: -120px -657px;width: 24px;height: 24px;right: 0;position: absolute;cursor: pointer;}
-    .product-brand{width:1184px;box-sizing:border-box;min-height: 88px;padding:24px 12px 12px 12px;font-size:0;text-align:center;background:#FFF;position: relative;}
-    .product-brand .product-brand-name{width: 116px;float: left;border-right: 1px solid #F7F7F7;line-height: 44px;text-align: center;font-size: 16px;color: #4A4F58;}
-    .product-brand .product-brand-name.show{line-height: 88px;}
-    .product-brand-oper{width: 110px;height: 32px;position: absolute;right: 24px;top: 24px;}
-    .product-brand-more{width: 50px;height: 24px;line-height: 24px;font-size: 14px;color: #909090;text-align: left;transition: all 0.2s;cursor: pointer;box-sizing: border-box;float: left;position: relative;}
-    .product-brand-more .icon:before{background-position: -93px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
-    .product-brand-more.show .icon:before{background-position: -123px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
-    .product-brand-add{width: 56px;height: 24px;box-sizing: border-box;border: 1px solid #E2E7EF;float: right;font-size: 14px;color: #9AA5B5;line-height: 24px;text-align: center;cursor: pointer;}    .product-brand-list{width: 970px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
-    .product-brand-list{width: 900px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
-    .product-brand-list.show{height: 150px;}
-    .product-brand-list .brand-list{width: 90px;height: 32px;padding: 0 12px;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 32px;font-size: 16px;color: #4A4F58;border-radius: 2px;margin-right: 24px;margin-bottom: 12px;}
-    .product-brand-list .brand-list.checked{border-color: #E15621;}
-    .product-brand-list .brand-list.checked a{color: #E15621;}
-    .product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
-    .product-brand-list .brand-list a:hover{color: #4A4F58;}
-    .product-brand-list .brand-list.checked a:hover{color: #E15621;}
-    .product-brand-button{width: 100%;height: 32px;float: left;}
-    .product-brand-button .brand-button{width: 160px;height: 32px;margin: 0 auto;}
-    .product-brand-button .brand-button .btn{width: 64px;height: 32px;cursor: pointer;float: left;margin: 0 8px;border-radius: 2px; line-height: 32px;text-align: center;font-size: 14px;box-sizing: border-box;color: #FFFFFF;}
-    .product-brand-button .brand-button .btn.confirm.disabled{background-color: #E2E7EF;}
-    .product-brand-button .brand-button .btn.confirm{background-color: #E15621;}
-    .product-brand-button .brand-button .btn.cancel{background-color: #FFFFFF;border: 1px solid #E2E7EF;color: #4A4F58;}
-
-    .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;text-align:center;background:#FFFFFF;position: relative;}
-    .sortBox li{float: left;}
-    .sortBox li:before,.sortBox li:after{position:absolute;right:35px;content:'';width:0;height:0;border-style:solid}
-    .sortBox li:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:27px}
-    .sortBox li:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:34px}
-    .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
-    .sortBox li.up:before{border-bottom-color:#FF5B00}
-    .sortBox li.up:after{border-top-color:#FF5B00;opacity:.3}
-    .sortBox li.down:after{border-top-color:#FF5B00}
-    .sortBox li.down:before{border-bottom-color:#FF5B00;opacity:.3}
-    .sortBox .sortBox-checked{width: 200px;height: 64px;position: absolute;top: 0;right: 0;box-sizing: border-box;padding: 18px;}
-    .sortBox-checked .sortBox-new{float: right;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;margin-right: 10px;}
-    .sortBox-checked .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
-    .sortBox-checked .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
-
-    .classification .class-nav-main div,.classification .class-nav-main li{text-align:center;display:inline-block;line-height:64px;color:#4a4f58;font-size:16px;cursor:pointer;padding:0 16px}
-    #listClassify{margin:0 auto;-webkit-box-sizing:border-box;box-sizing:border-box;background:rgba(255,255,255,1);border-radius:0 0 2px 2px}
-    .classification{border-bottom:1px solid #f7f7f7;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-flex}
-    .classification .class-title{width:127px;text-align:center;font-size:16px;line-height:64px}
-    .classification .class-nav-main{width:1040px;display:inline-block;border-left:1px solid #f7f7f7;font-size:0}
-    .classification .class-nav-main div.on,.classification .class-nav-main div.on a{color:#FF5B00}
-    .crumbs-nav >div{display:inline-block}
-    .crumbs-nav-item{display:inline-block;height: 24px;padding:0 12px;border:1px solid #DDDDDD;line-height:24px;margin-right:16px;color:#909090;border-radius:2px;cursor:pointer;box-sizing: border-box;}
-    .crumbs-nav-item.on{color:#FF5B00;border:1px solid #FF5B00}
-    .sortBox .on{background:#ffe6dc}
-    .classification.sortBox .class-nav-main li{border-right:1px solid #f7f7f7;width:127px;padding:0;position:relative}
-    .list-container{margin-top:32px;width:1200px}
-    .list-container ul li.productItem{width:184px;height:268px;float:left;background:#fff;position:relative;margin:0 16px 16px 0;overflow:hidden;float:left}
-    .list-container ul li img{width:100%;height:164px}
-    .list-container ul li .name{display:block;padding:0 8px;margin-top:8px;height:40px;line-height:21px;vertical-align:middle;word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-    .productItem .page_main_type{width: 34px;height: 34px;text-align: justify;box-sizing: border-box;padding: 5px;border-radius: 0 0 8px 8px;background-color: #33CCBF;font-size: 12px;color: #FFFFFF;line-height: 13px;position: absolute;top: 0;right: 10px;z-index: 88;}
-    .productItem .price{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 8px;height:54px;width:100%}
-    .productItem .price .icon:before{width:63px}
-    .productItem .price .icon.i5:before{background-position:-2px -818px}
-    .productItem .price .icon.i1:before{background-position:-2px -708px}
-    .productItem .price .icon.i2:before{background-position:-2px -736px}
-    .productItem .price .icon.i3:before{background-position:-2px -764px}
-    .productItem .price .icon.i4:before{background-position:-2px -791px}
-    .listTag{margin:12px 8px 0 0;padding:0 2px}
-    .productItem .image .icon{position:inherit}
-    .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#FF5B00}
-    .empty{margin-top:32px;background:#fff}
-    .empty p{color:#909090;font-size:14px}
-    .productItem .price em{font-weight: normal}
-    .productItem .price em.bold{font-weight: bold}
-    .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin-top: 3px;}
-    .productItem .price .price_text_tag .listTag{margin: 0;float: left}
-    .productItem .price .price_text_tag .couponTag{margin: 0 4px 0 0;float: left}
-    .productItem .price .main_price_unde { width: 100%;height: 31px;line-height: 31px;font-size: 14px;color: #4a4f58;text-align: left;float: left;}
-    .productItem .price .main_price_show { width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
-    .productItem .price .main_price_show.none { color: #999999; text-decoration: line-through;}
-    .productItem .name .tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;}
-    /*会员标签*/
-    .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-18px);-ms-transform: scale(0.8) translateX(-18px);transform: scale(0.8) translateX(-18px)}
-    .productItem .price .price_text_tag .svip-tag,
-    .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)}
-    .productItem .price .price_text_tag .svip-tag{width:100%;height:22px;letter-spacing:0}
-    .productItem .price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
-    .productItem .price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
-    .productItem .price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-27px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
-    .productItem .price .price_text_tag .svip-tag .svip-price span{color: #333}
-
-}
-
-
-
-@media screen and (max-width:768px){
-    #productList{position: relative;}
-    .sortBox{width:100%;margin:1px auto;box-sizing:border-box;background:#FFF;}
-    .sortBox li{width:15vw;height:11.6vw;line-height:11.6vw;text-align:center;font-size:3.4vw;color:#93979F;position:relative;margin:0 5vw}
-    .sortBox li.on,.sortBox li.up,.sortBox li.down{color:#FF5B00}
-    .sortBox li:before,.sortBox li:after{position:absolute;right:0;content:'';width:0;height:0;border-style:solid}
-    .sortBox li:before{border-width:0 .8vw .8vw .8vw;border-color:transparent transparent #BEC2C9 transparent;top:5vw}
-    .sortBox li:after{border-width:.8vw .8vw 0 .8vw;border-color:#BEC2C9 transparent transparent transparent;top:6.5vw}
-    .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
-    .sortBox li.up:before{border-bottom-color:#FF5B00}
-    .sortBox li.up:after{border-top-color:#FF5B00;opacity:.3}
-    .sortBox li.down:after{border-top-color:#FF5B00}
-    .sortBox li.down:before{border-bottom-color:#FF5B00;opacity:.3}
-    .sortBox li.screen:before{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw;}
-    .sortBox li.screen:after{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw}
-    .sortBox li.screen .mIcon{width: 4vw;height: 4vw;display: block;position: absolute;top: 0.8vw;right: -2vw;}
-    .sortBox li.screen .mIcon:before{width: 4vw;height: 4vw;background-position: -70vw -78vw;}
-    .list-container ul{margin: 3.2vw auto;width: 97vw;}
-    .list-container ul li{width: 45.6vw;height: 70vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;}
-    .productItem{position: relative;}
-    .productItem .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;right: 2vw;}
-    .productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;float: left;}
-    .productItem .price .mIcon:before{width:15.8vw;height: 5vw}
-    .productItem .price .mIcon.i5:before {background-position: -84vw -97.5vw;}
-    .productItem .price .mIcon.i1:before {background-position: -84vw -69.5vw;}
-    .productItem .price .mIcon.i2:before {background-position: -84vw -76.5vw;}
-    .productItem .price .mIcon.i3:before {background-position: -84vw -83.7vw;}
-    .productItem .price .mIcon.i4:before {background-position: -84vw -90.7vw;}
-    .productItem .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
-    .productItem img {width: 45.6vw;height: 45.6vw;}
-    .productItem .name {display: block;padding: 0 1.2vw;height: 9.3vw;line-height: 4.8vw;font-size: 3.4vw;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
-    .price {padding: 2vw 1.2vw;overflow: hidden;}
-    .couponTag{padding:0 0.4vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 1vw;}
-    .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
-    .price_grade{width: 100%;float: left;margin-top: 2vw;}
-    .productItem .price .main_price_unde {width: 100%;height: 6.5vw;line-height: 6.5vw;font-size: 3.4vw;color: #4a4f58;text-align: left;float: left;}
-    .productItem .price .price_text_tag {width: 100%;box-sizing: border-box;float: left;}
-    .productItem .price .main_price_show{color: #f94b4b}
-    .productItem .name span.tag{width: 11.3vw;height: 4.3vw;line-height: 4.3vw;font-size: 2.8vw;display: inline-block;margin-right: 1.3vw;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: .25vw;}
-    /*会员标签*/
-    .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-4.2vw);-ms-transform: scale(0.8) translateX(-4.2vw);transform: scale(0.8) translateX(-4.2vw)}
-    .productItem .price .price_text_tag .svip-tag,
-    .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(1.2vw);-ms-transform: translateX(1.2vw);transform: translateX(1.2vw)}
-    .productItem .price .price_text_tag .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
-    .productItem .price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:9.8vw;height:4.74vw;text-align:center;line-height:4.74vw;font-size:2.8vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
-    .productItem .price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
-    .productItem .price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-6vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
-    .productItem .price .price_text_tag .svip-tag .svip-price span{color: #333}
-    .productItem .price .price_text_tag .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
-    /*筛选项*/
-    .product-brand-fiexd{width: 100%;height: 100%;position: fixed;top: 15vw;left: 0;background: rgba(0,0,0,0.6);z-index: 9999;}
-    .product-brand{width: 100%;position: relative;top: 0;left: 0;background: #FFFFFF;z-index: 9999;padding: 3vw 0;border-radius: 0 0 1.6vw 1.6vw;box-sizing: border-box;}
-    .product-brand .product-brand-name{width: 100%;float: left;line-height: 10.4vw;background: #F7F7F7;height: 10.4vw;padding:0 3vw;box-sizing: border-box;}
-    .product-brand .product-brand-name .title{float: left;}
-    .product-brand .product-brand-name .num{float: right;font-size: 3vw;}
-    .product-brand .product-brand-name .num span{color: #E15621;}
-    .product-brand-more{width: 100%;height: 32px;line-height: 32px;font-size: 3.4vw;float: left;color: #909090;text-align: center;box-sizing: border-box;}
-    .product-brand-more .icon:before{background-position: -51.5vw 0px;width: 5.4vw;height: 6.7vw;right: 37vw;position: absolute;}
-    .product-brand-more.show .icon:before{background-position: -43.5vw 0px;width: 5.4vw;height: 6.7vw;right: 37vw;position: absolute;}
-    .product-brand-list{width: 100%;float: left;box-sizing: border-box;padding:3vw;height:22vw;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
-    .product-brand-list.show{height: 44vw;}
-    .product-brand-list .brand-list{width: 20.5vw;height: 7.2vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 7.2vw;;font-size: 3vw;color: #4A4F58;border-radius: 1vw;margin-right: 3.2vw;margin-bottom: 2.4vw;}
-    .product-brand-list .brand-list:nth-child(4n){margin-right: 0;}
-    .product-brand-list .brand-list.checked{border-color: #E15621;}
-    .product-brand-list .brand-list.checked a{color: #E15621;}
-    .product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
-    .product-brand-list .brand-list a:hover{color: #4A4F58;}
-    .product-brand-list .brand-list.checked a:hover{color: #E15621;}
-    .product-screen{width: 100%;height: auto;padding:0 3vw;box-sizing: border-box;}
-    .product-screen .sortBox-new{width: 100%;height: 9vw;line-height: 16px;box-sizing: border-box;padding: 2.5vw 0;cursor: pointer;margin-right: 10px;}
-    .product-screen .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;float: right;}
-    .product-screen .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
-    .product-screen-btn{width: 100%;height: 11.2vw;float: left;margin-top: 4vw;}
-    .product-screen-btn .sub-button{width: 64vw;height: 11.2vw;margin: 0 auto;line-height: 11.2vw;background-color: #E15621;text-align: center;font-size: 3.4ve;color: #FFFFFF;}
-
-}
-
+.productItem .price .price_text_tag{-webkit-transform: scale(0.8) translateX(-20px);-ms-transform: scale(0.8) translateX(-20px);transform: scale(0.8) translateX(-20px)}
+
+@media screen and (min-width:768px){
+    #productList{width: 1184px;margin:32px auto;position: relative;}
+    .crumbs-nav{height: 40px}
+    .search-text{float: left;}
+    .crumbs-nav-main{float: left;}
+    .crumbs-nav .crumbs-link{color:#4a4f58;float: left;}
+    .search-text-brand{float: left;position: relative; height: 24px;padding: 0 24px 0 12px;line-height: 24px;box-sizing: border-box;border: 1px solid #DDDDDD;border-radius: 2px;text-align: center;font-size: 14px;color: #4A4F58;}
+    .search-text-brand a{color: #E15621;}
+    .search-text-brand .icon:before{background-position: -120px -657px;width: 24px;height: 24px;right: 0;position: absolute;cursor: pointer;}
+    .product-brand{width:1184px;box-sizing:border-box;min-height: 88px;padding:24px 12px 12px 12px;font-size:0;text-align:center;background:#FFF;position: relative;}
+    .product-brand .product-brand-name{width: 116px;float: left;border-right: 1px solid #F7F7F7;line-height: 44px;text-align: center;font-size: 16px;color: #4A4F58;}
+    .product-brand .product-brand-name.show{line-height: 88px;}
+    .product-brand-oper{width: 110px;height: 32px;position: absolute;right: 24px;top: 24px;}
+    .product-brand-more{width: 50px;height: 24px;line-height: 24px;font-size: 14px;color: #909090;text-align: left;transition: all 0.2s;cursor: pointer;box-sizing: border-box;float: left;position: relative;}
+    .product-brand-more .icon:before{background-position: -93px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
+    .product-brand-more.show .icon:before{background-position: -123px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
+    .product-brand-add{width: 56px;height: 24px;box-sizing: border-box;border: 1px solid #E2E7EF;float: right;font-size: 14px;color: #9AA5B5;line-height: 24px;text-align: center;cursor: pointer;}    .product-brand-list{width: 970px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
+    .product-brand-list{width: 900px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
+    .product-brand-list.show{height: 150px;}
+    .product-brand-list .brand-list{width: 90px;height: 32px;padding: 0 12px;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 32px;font-size: 16px;color: #4A4F58;border-radius: 16px;margin-right: 24px;margin-bottom: 12px;}
+    .product-brand-list .brand-list.checked{border-color: #E15621;}
+    .product-brand-list .brand-list.checked a{color: #E15621;}
+    .product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
+    .product-brand-list .brand-list a:hover{color: #4A4F58;}
+    .product-brand-list .brand-list.checked a:hover{color: #E15621;}
+    .product-brand-button{width: 100%;height: 32px;float: left;}
+    .product-brand-button .brand-button{width: 160px;height: 32px;margin: 0 auto;}
+    .product-brand-button .brand-button .btn{width: 64px;height: 32px;cursor: pointer;float: left;margin: 0 8px;border-radius: 2px; line-height: 32px;text-align: center;font-size: 14px;box-sizing: border-box;color: #FFFFFF;}
+    .product-brand-button .brand-button .btn.confirm.disabled{background-color: #E2E7EF;}
+    .product-brand-button .brand-button .btn.confirm{background-color: #E15621;}
+    .product-brand-button .brand-button .btn.cancel{background-color: #FFFFFF;border: 1px solid #E2E7EF;color: #4A4F58;}
+
+    .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;text-align:center;background:#FFFFFF;position: relative;}
+    .sortBox li{float: left;}
+    .sortBox li:before,.sortBox li:after{position:absolute;right:35px;content:'';width:0;height:0;border-style:solid}
+    .sortBox li:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:27px}
+    .sortBox li:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:34px}
+    .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
+    .sortBox li.up:before{border-bottom-color:#FF5B00}
+    .sortBox li.up:after{border-top-color:#FF5B00;opacity:.3}
+    .sortBox li.down:after{border-top-color:#FF5B00}
+    .sortBox li.down:before{border-bottom-color:#FF5B00;opacity:.3}
+    .sortBox .sortBox-checked{width: 200px;height: 64px;position: absolute;top: 0;right: 0;box-sizing: border-box;padding: 18px;}
+    .sortBox-checked .sortBox-new{float: right;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;margin-right: 10px;}
+    .sortBox-checked .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .sortBox-checked .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+
+    #listClassify{margin:0 auto;-webkit-box-sizing:border-box;box-sizing:border-box;background:rgba(255,255,255,1);border-radius:8px;overflow: hidden;}
+    .classification .class-nav-main div,.classification .class-nav-main li{text-align:center;display:inline-block;line-height:64px;color:#4a4f58;font-size:16px;cursor:pointer;padding:0 16px}
+    .classification{border-bottom:1px solid #f7f7f7;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-flex}
+    .classification .class-title{width:127px;text-align:center;font-size:16px;line-height:64px}
+    .classification .class-nav-main{width:1040px;display:inline-block;border-left:1px solid #f7f7f7;font-size:0}
+    .classification .class-nav-main div.on,.classification .class-nav-main div.on a{color:#FF5B00}
+    .crumbs-nav >div{display:inline-block}
+    .crumbs-nav-item{display:inline-block;height: 24px;padding:0 12px;border:1px solid #DDDDDD;line-height:24px;margin-right:16px;color:#909090;border-radius:12px;cursor:pointer;box-sizing: border-box;}
+    .crumbs-nav-item.on{color:#FF5B00;border:1px solid #FF5B00}
+    .sortBox .on{background:#ffe6dc}
+    .classification.sortBox .class-nav-main li{border-right:1px solid #f7f7f7;width:127px;padding:0;position:relative}
+    .list-container{margin-top:32px;width:1200px}
+    .list-container ul li.productItem{width:184px;height:268px;float:left;background:#fff;position:relative;margin:0 16px 16px 0;overflow:hidden;float:left}
+    .list-container ul li img{width:100%;height:164px}
+    .list-container ul li .name{display:block;padding:0 8px;margin-top:8px;height:40px;line-height:21px;vertical-align:middle;word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .productItem .page_main_type{width: 34px;height: 34px;text-align: justify;box-sizing: border-box;padding: 5px;border-radius: 0 0 8px 8px;background-color: #33CCBF;font-size: 12px;color: #FFFFFF;line-height: 13px;position: absolute;top: 0;right: 10px;z-index: 88;}
+    .productItem .price{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 8px;height:54px;width:100%}
+    .productItem .price .icon:before{width:63px}
+    .productItem .price .icon.i5:before{background-position:-2px -818px}
+    .productItem .price .icon.i1:before{background-position:-2px -708px}
+    .productItem .price .icon.i2:before{background-position:-2px -736px}
+    .productItem .price .icon.i3:before{background-position:-2px -764px}
+    .productItem .price .icon.i4:before{background-position:-2px -791px}
+    .listTag{margin:12px 8px 0 0;padding:0 2px}
+    .productItem .image .icon{position:inherit}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#FF5B00}
+    .empty{margin-top:32px;background:#fff}
+    .empty p{color:#909090;font-size:14px}
+    .productItem .price em{font-weight: normal}
+    .productItem .price em.bold{font-weight: bold}
+    .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin-top: 3px;}
+    .productItem .price .price_text_tag .listTag{margin: 0;float: left}
+    .productItem .price .price_text_tag .couponTag{margin: 0 4px 0 0;float: left}
+    .productItem .price .main_price_unde { width: 100%;height: 31px;line-height: 31px;font-size: 14px;color: #4a4f58;text-align: left;float: left;}
+    .productItem .price .main_price_show { width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
+    .productItem .price .main_price_show.none { color: #999999; text-decoration: line-through;}
+    .productItem .name .tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;}
+    /*会员标签*/
+    .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-18px);-ms-transform: scale(0.8) translateX(-18px);transform: scale(0.8) translateX(-18px)}
+    .productItem .price .price_text_tag .svip-tag,
+    .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)}
+    .productItem .price .price_text_tag .svip-tag{width:100%;height:22px;letter-spacing:0}
+    .productItem .price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+    .productItem .price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .productItem .price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-27px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
+    .productItem .price .price_text_tag .svip-tag .svip-price span{color: #333}
+
+}
+
+
+
+@media screen and (max-width:768px){
+    #productList{position: relative;padding-top: 27vw;}
+    footer{display: none; }
+    .sortBox{width:100%;margin:1px auto;box-sizing:border-box;background:#FFF;}
+    .sortBox li{width:15vw;height:11.6vw;line-height:11.6vw;text-align:center;font-size:3.4vw;color:#93979F;position:relative;margin:0 5vw}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{color:#FF5B00}
+    .sortBox li:before,.sortBox li:after{position:absolute;right:0;content:'';width:0;height:0;border-style:solid}
+    .sortBox li:before{border-width:0 .8vw .8vw .8vw;border-color:transparent transparent #BEC2C9 transparent;top:5vw}
+    .sortBox li:after{border-width:.8vw .8vw 0 .8vw;border-color:#BEC2C9 transparent transparent transparent;top:6.5vw}
+    .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
+    .sortBox li.up:before{border-bottom-color:#FF5B00}
+    .sortBox li.up:after{border-top-color:#FF5B00;opacity:.3}
+    .sortBox li.down:after{border-top-color:#FF5B00}
+    .sortBox li.down:before{border-bottom-color:#FF5B00;opacity:.3}
+    .sortBox li.screen:before{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw;}
+    .sortBox li.screen:after{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw}
+    .sortBox li.screen .mIcon{width: 4vw;height: 4vw;display: block;position: absolute;top: 0.8vw;right: -2vw;}
+    .sortBox li.screen .mIcon:before{width: 4vw;height: 4vw;background-position: -73vw -78.5vw;}
+    .list-container ul{margin: 3.2vw auto;width: 97vw;}
+    .list-container ul li{width: 45.6vw;height: 70vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;}
+    .productItem{position: relative;}
+    .productItem .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;right: 2vw;}
+    .productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;float: left;}
+    .productItem .price .mIcon:before{width:15.8vw;height: 5vw}
+    .productItem .price .mIcon.i5:before {background-position: -84vw -97.5vw;}
+    .productItem .price .mIcon.i1:before {background-position: -84vw -69.5vw;}
+    .productItem .price .mIcon.i2:before {background-position: -84vw -76.5vw;}
+    .productItem .price .mIcon.i3:before {background-position: -84vw -83.7vw;}
+    .productItem .price .mIcon.i4:before {background-position: -84vw -90.7vw;}
+    .productItem .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
+    .productItem img {width: 45.6vw;height: 45.6vw;}
+    .productItem .name {display: block;padding: 0 1.2vw;height: 9.3vw;line-height: 4.8vw;font-size: 3.4vw;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
+    .price {padding: 2vw 1.2vw;overflow: hidden;}
+    .couponTag{padding:0 0.4vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 1vw;}
+    .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
+    .price_grade{width: 100%;float: left;margin-top: 2vw;}
+    .productItem .price .main_price_unde {width: 100%;height: 6.5vw;line-height: 6.5vw;font-size: 3.4vw;color: #4a4f58;text-align: left;float: left;}
+    .productItem .price .price_text_tag {width: 100%;box-sizing: border-box;float: left;}
+    .productItem .price .main_price_show{color: #f94b4b}
+    .productItem .name span.tag{width: 11.3vw;height: 4.3vw;line-height: 4.3vw;font-size: 2.8vw;display: inline-block;margin-right: 1.3vw;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: .25vw;}
+    /*会员标签*/
+    .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-4.2vw);-ms-transform: scale(0.8) translateX(-4.2vw);transform: scale(0.8) translateX(-4.2vw)}
+    .productItem .price .price_text_tag .svip-tag,
+    .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(1.2vw);-ms-transform: translateX(1.2vw);transform: translateX(1.2vw)}
+    .productItem .price .price_text_tag .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
+    .productItem .price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:9.8vw;height:4.74vw;text-align:center;line-height:4.74vw;font-size:2.8vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+    .productItem .price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .productItem .price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-6vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
+    .productItem .price .price_text_tag .svip-tag .svip-price span{color: #333}
+    .productItem .price .price_text_tag .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
+    /*筛选项*/
+    .product-brand-fiexd{width: 100%;height: 100%;position: fixed;top: 15vw;left: 0;background: rgba(0,0,0,0.6);z-index: 9999;}
+    .product-brand{width: 100%;position: relative;top: 0;left: 0;background: #FFFFFF;z-index: 9999;padding: 3vw 0;border-radius: 0 0 4vw 4vw;box-sizing: border-box;}
+    .product-brand .product-brand-name{width: 100%;float: left;line-height: 10.4vw;background: #F7F7F7;height: 10.4vw;padding:0 3vw;box-sizing: border-box;}
+    .product-brand .product-brand-name .title{float: left;}
+    .product-brand .product-brand-name .num{float: right;font-size: 3vw;}
+    .product-brand .product-brand-name .num span{color: #E15621;}
+    .product-brand-more{width: 100%;height: 32px;line-height: 32px;font-size: 3.4vw;float: left;color: #909090;text-align: center;box-sizing: border-box;}
+    .product-brand-more .icon:before{background-position: -51.5vw 0px;width: 5.4vw;height: 6.7vw;right: 37vw;position: absolute;}
+    .product-brand-more.show .icon:before{background-position: -43.5vw 0px;width: 5.4vw;height: 6.7vw;right: 37vw;position: absolute;}
+    .product-brand-list{width: 100%;float: left;box-sizing: border-box;padding:3vw;height:22vw;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
+    .product-brand-list.show{height: 44vw;}
+    .product-brand-list .brand-list{width: 20.5vw;height: 7.2vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 7.2vw;;font-size: 3vw;color: #4A4F58;border-radius: 3.6vw;margin-right: 3.2vw;margin-bottom: 2.4vw;}
+    .product-brand-list .brand-list:nth-child(4n){margin-right: 0;}
+    .product-brand-list .brand-list.checked{border-color: #E15621;}
+    .product-brand-list .brand-list.checked a{color: #E15621;}
+    .product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
+    .product-brand-list .brand-list a:hover{color: #4A4F58;}
+    .product-brand-list .brand-list.checked a:hover{color: #E15621;}
+    .product-screen{width: 100%;height: auto;padding:0 3vw;box-sizing: border-box;}
+    .product-screen .sortBox-new{width: 100%;height: 9vw;line-height: 16px;box-sizing: border-box;padding: 2.5vw 0;cursor: pointer;margin-right: 10px;}
+    .product-screen .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;float: right;}
+    .product-screen .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+    .product-screen-btn{width: 100%;height: 11.2vw;float: left;margin-top: 4vw;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;padding: 0 10vw;}
+    .product-screen-btn .sub-button{ flex: 1; height: 11.2vw;margin: 0 2vw;line-height: 11.2vw;background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color:#FFFFFF;text-align: center;font-size: 3.4vw;border-radius: 5.6vw;}
+    .product-screen-btn .sub-button.cancel{ background: #E2E2E2;color: #4A4F58; }
+}
+

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

@@ -27,23 +27,25 @@
 
 
 @media screen and (max-width:768px) {
-    .instrue-right-content{width: 100%;padding:3.2vw;box-sizing: border-box;}
+    #instrueMent{ padding-top: 27vw; }
+    footer{ display: none; }
+    .instrue-right-content{width: 100%;padding:3vw 0;box-sizing: border-box;background: #fff;}
     .instrue-right-ross{width:100%;height:26vw;background: #F3920D;text-align: center;border-radius: 2px;float: left;margin-bottom: 3vw;}
     .instrue-right-ross>a{width: 100%;height: 100%;display: block;border-radius: 2px;}
     .instrue-right-ross>a img{width: 100%;height: 100%;display: block;border-radius: 2px;}
-    .instrue-right{width: 100%;background: #fff;position:relative;float: left;}
+    .instrue-right{width: 100%;position:relative;float: left;}
     .instrue-right .wrap_tittle{padding: 0 3.2vw;color: #909090; font-size: 3.4vw;}
-    .instrue-right .hot-search{padding: 2.7vw;overflow: hidden;height: 7vw;background: #fff;border-radius: 0 0 1.6vw 1.6vw;}
+    .instrue-right .hot-search{padding: 2.7vw;overflow: hidden;height: 4vw;background: #fff;border-radius: 0 0 1.6vw 1.6vw;}
     .instrue-right .hot-search .hot-list{display: inline-block;background: #f7f7f7;color: #4a4f58;font-size: 3.2vw;padding: .7vw 2vw;margin: 0 2.4vw 3.1vw 0;position: relative;}
-    .instrue-left{margin-top: 3vw;}
-    .top-category{background: #fff;}
+    .instrue-left{margin-top: 0;}
+    .top-category{background: #fff;box-sizing: border-box;padding: 2vw 0;}
     .top-category .nav-list{display: inline-block;width: 24%;height: 21vw;text-align: center;}
     .item_icon{height: 8.8vw;padding: 2.7vw 0;width: 100%}
     .item_icon img{width: 8.8vw;height: 8.8vw;display: block;margin: 0 auto}
-    .instrue-right .hot-search .right-box{position:absolute;right: 2.7vw;top:3vw;width:10%;text-align:center}
+    .instrue-right .hot-search .right-box{position:absolute;right: -0.4vw;top:6.5vw;width:10%;text-align:center}
     .close.mIcon:before{width: 5.4vw;height: 5.4vw;background-position: -42vw 0px;transition:none}ght .hot-search .left-box{width: 90%;float: left}
     .bg{position: fixed;background: rgba(34,39,46, 0.3);left: 0;width: 100%;height: 100%;z-index: 1000;transition: 0.5s;}
-    .mIcon.hot:before{width: 5.3vw;height:4.5vw;background-position: -53.9vw -69.3vw;position: absolute;top: -2.7vw;right: -2.7vw;}
+    .mIcon.hot:before{width: 5.3vw;height:4.5vw;background-position: -55.9vw -70.3vw;position: absolute;top: -2.7vw;right: -2.7vw;}
     .open.mIcon:before{width: 5.4vw;height: 5.4vw;background-position: -51vw 0px;transition:none}
     .noclick{pointer-events: none}
 }

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

@@ -96,8 +96,9 @@ li{list-style:none}
 */
 @media screen and (max-width:768px){
     #productList{position: relative;padding-top: 37vw;}
-    /*footer{display:none!important;}*/
-    .sortBox{width:100%;margin:1px auto;box-sizing:border-box;background:#FFF;position: fixed;top: 25vw;left: 0;border-radius: 0 0 2vw 2vw;z-index: 999;}
+    footer {display: none;}
+    body{ background: #FFFFFF; }
+    .sortBox{width:100%;margin:1px auto;box-sizing:border-box;background:#FFF;position: fixed;top: 25vw;left: 0;z-index: 999;border-bottom: 1px solid #e1e1e1;}
     .sortBox li{width:15vw;height:11.6vw;line-height:11.6vw;text-align:center;font-size:3.4vw;color:#93979F;position:relative;margin:0 5vw}
     .sortBox li.on,.sortBox li.up,.sortBox li.down{color:#FF5B00}
     .sortBox li:before,.sortBox li:after{position:absolute;right:0vw;content:'';width:0;height:0;border-style:solid}
@@ -111,7 +112,7 @@ li{list-style:none}
     .sortBox li.screen:before{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw;}
     .sortBox li.screen:after{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw}
     .sortBox li.screen .mIcon{width: 4vw;height: 4vw;display: block;position: absolute;top: 0.8vw;right: -2vw;}
-    .sortBox li.screen .mIcon:before{width: 4vw;height: 4vw;background-position: -70vw -78vw;}
+    .sortBox li.screen .mIcon:before{width: 4vw;height: 4vw;background-position:-73vw -78.5vw;}
     .productList{margin: 3.2vw auto;width: 97vw;}
     .productList .productItem{width: 45.6vw;height: 70vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;position: relative;}
     .productItem .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;right: 2vw;}
@@ -152,7 +153,7 @@ li{list-style:none}
     .productItem .price .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
     /*筛选项*/
     .product-brand-fiexd{width: 100%;height: 100%;position: fixed;top: 15vw;left: 0;background: rgba(0,0,0,0.6);z-index: 9999;}
-    .product-brand{width: 100%;position: relative;top: 0;left: 0;background: #FFFFFF;z-index: 9999;padding: 3vw 0;border-radius: 0 0 1.6vw 1.6vw;box-sizing: border-box;}
+    .product-brand{width: 100%;position: relative;top: 0;left: 0;background: #FFFFFF;z-index: 9999;padding: 3vw 0;border-radius:0 0 4vw 4vw;box-sizing: border-box;}
     .product-brand .product-brand-name{width: 100%;float: left;line-height: 10.4vw;background: #F7F7F7;height: 10.4vw;padding:0 3vw;box-sizing: border-box;}
     .product-brand .product-brand-name .title{float: left;}
     .product-brand .product-brand-name .num{float: right;font-size: 3vw;}
@@ -162,7 +163,7 @@ li{list-style:none}
     .product-brand-more.show .icon:before{background-position: -43.5vw 0px;width: 5.4vw;height: 6.7vw;right: 37vw;position: absolute;}
     .product-brand-list{width: 100%;float: left;box-sizing: border-box;padding:3vw;height:22vw;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
     .product-brand-list.show{height: 44vw;}
-    .product-brand-list .brand-list{width: 20.5vw;height: 7.2vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 7.2vw;;font-size: 3vw;color: #4A4F58;border-radius: 1vw;margin-right: 3.2vw;margin-bottom: 2.4vw;}
+    .product-brand-list .brand-list{width: 20.5vw;height: 7.2vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 7.2vw;;font-size: 3vw;color: #4A4F58;border-radius: 3.6vw;margin-right: 3.2vw;margin-bottom: 2.4vw;}
     .product-brand-list .brand-list:nth-child(4n){margin-right: 0;}
     .product-brand-list .brand-list.checked{border-color: #E15621;}
     .product-brand-list .brand-list.checked a{color: #E15621;}
@@ -173,8 +174,8 @@ li{list-style:none}
     .product-screen .sortBox-new{width: 100%;height: 9vw;line-height: 16px;box-sizing: border-box;padding: 2.5vw 0;cursor: pointer;margin-right: 10px;}
     .product-screen .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;float: right;}
     .product-screen .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
-    .product-screen-btn{width: 100%;height: 11.2vw;float: left;margin-top: 4vw;}
-    .product-screen-btn .sub-button{width: 64vw;height: 11.2vw;margin: 0 auto;line-height: 11.2vw;background-color: #E15621;text-align: center;font-size: 3.4ve;color: #FFFFFF;}
-    footer {display: none;}
+    .product-screen-btn{width: 100%;height: 11.2vw;float: left;margin-top: 4vw;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;padding: 0 10vw;}
+    .product-screen-btn .sub-button{ flex: 1; height: 11.2vw;margin: 0 2vw;line-height: 11.2vw;background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color:#FFFFFF;text-align: center;font-size: 3.4vw;border-radius: 5.6vw;}
+    .product-screen-btn .sub-button.cancel{ background: #E2E2E2;color: #4A4F58; }
 
 }

src/main/resources/static/css/product/product-supporting.h5.css

@@ -1,104 +1,104 @@
-@media screen and (max-width:768px) {
-    #supporting{width: 100%;}
-    .supporting-title{width:100%;height: 11.4vw;box-sizing: border-box;padding:3vw;background-color: #F7F7F7;box-sizing: border-box;}
-    .supporting-title .title{float: left;line-height: 5.4vw;font-size: 3.6vw;color: #2D3036;text-align: left;}
-    .supporting-title .coll-span{display: block;float: right;margin-left: 20px;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;}
-    .supporting-title .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
-    .supporting-title .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
-    .supporting-content{width: 100%;min-height:50vw;background-color: #FFFFFF;padding-bottom: 27.7vw;}
-    .supporting-list{width: 100%;height: 38vw;box-sizing: border-box;border-bottom: 1px solid #E1E1E1;padding:3.2vw 4vw;}
-    .supporting-list .list-checked{width: 6.5vw;height: 100%;display: flex;align-items: center;float: left;}
-    .supporting-list .list-checked .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
-    .supporting-list .list-checked .coll-checked.none{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan_desied@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
-    .supporting-list .list-checked .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
-    .supporting-list .list-image{width: 24vw;height: 100%;float: left;margin-right: 2vw;}
-    .supporting-list .list-image a{width: 24vw;height: 24vw;display: block;position: relative;}
-    .supporting-list .list-image .smalltype{width: 26px;height: 26px;position: absolute;top: 0;right: 5px;border:none;}
-    .supporting-list .list-image img{width: 24vw;height: 24vw;box-sizing: border-box;display: block;border: 1px solid #E1E1E1;border-radius: 2px;}
-    .supporting-list .list-info{width: 59vw;float: left;height: 100%;}
-    .supporting-list .list-info .list-name{width:100%;height: 10.5vw;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;line-height: 5.2vw;text-align: justify;font-size: 3.6vw;color: #22272E;}
-    .supporting-list .list-info .list-unit{width: 100%;line-height: 6vw;height: 6vw;font-size: 2.8vw;color: #627386;margin-bottom: 2vw;}
-    .supporting-list .list-info .list-unit .sku-label{line-height: 6vw;height: 6vw;font-size: 2.8vw;color: #627386;float: left;}
-    .supporting-list .list-info .list-unit .sku-popup{position: relative;height: 6vw;display: inline-block;box-sizing: border-box;cursor: pointer; border: 1px solid #E2E7EF;border-radius: 2px;padding: 0 8px;}
-    .supporting-list .list-info .list-unit .sku-popup .sku-text{width: 54px;height: 6vw;text-align: left; display: block;line-height: 6vw;font-size: 12px;color: #22272E;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;float: left;}
-    .supporting-list .list-info .list-unit .sku-popup .sku-icon{width: 24px;height: 24px;float: right;}
-    .supporting-list .list-info .list-unit .sku-popup .sku-icon .mIcon:before{width: 24px;height: 24px;background-position:-208px -1px;}
-    /*SKU弹窗*/
-    .supporting-list .list-unit .sku-popup-model{width: 100%;height: 100%;background: rgba(0,0,0,0.6);position: fixed;top: 0;left: 0;z-index: 1000;}
-    .supporting-list .list-unit .sku-popup-viw{width: 100%;height: 105vw;z-index: 1001; box-sizing: border-box;padding: 3.2vw;position: fixed;bottom: 0;left: 0;background: #FFFFFF;box-shadow: 0px 6px 16px 1px rgba(0,0,0,0.1);border: 1px solid #E2E7EF;}
-    .supporting-list .list-unit .sku-popup-viw .sku-title{width: 100%;height: 80px;float: left;margin-bottom: 10px;}
-    .supporting-list .list-unit .sku-popup-viw .sku-image{width: 80px;height: 80px;float: left;border: 1px dashed #E2E7EF;box-sizing: border-box;}
-    .supporting-list .list-unit .sku-popup-viw .sku-image img{width: 100%;height: 100%;display: block}
-    .supporting-list .list-unit .sku-popup-viw .sku-price{width: 200px;height: 80px;float: left;box-sizing: border-box;padding-left: 16px;padding-top: 16px;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .bold{float: left;display: block;font-size: 4vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .price_grade{float: left;width: 100%;margin-bottom: 10px;line-height: 4.8vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .main_price_unde{float: left;width: 100%;margin-bottom: 10px;color: #F94B4B;text-align: left;line-height: 24px;font-size: 4vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .main_price_show{float: left;width: 100%;margin-bottom: 10px;color: #F94B4B;text-align: left;line-height: 24px;font-size: 4vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .price_text_tag{float: left;line-height: 22px;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .couponTag{float: left;margin-right: 5px;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .icon{float: left;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon:before {width: 15.8vw;height: 5vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon:before {background-position: -84vw -90.7vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i5:before {background-position: -84vw -97.5vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i1:before {background-position: -84vw -69.5vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i2:before {background-position: -84vw -76.5vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i3:before {background-position: -84vw -83.7vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i4:before {background-position: -84vw -90.7vw;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag{height:22px;letter-spacing:0;float: left;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:4.8vw;text-align:center;line-height:4.8vw;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333;}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-22px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
-    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag .svip-price span{color: #333}
-    .supporting-list .list-unit .sku-popup-viw .sku-h1 {width: 100%;height: 20px;line-height: 20px;font-size: 14px;color: #22272E;font-weight: bold;float: left;text-align: left;}
-    .supporting-list .list-unit .sku-popup-viw .sku-unit{width: 100%;height: 148px;padding: 12px 0;overflow-y: scroll;box-sizing: border-box;}
-    .supporting-list .list-unit .sku-popup-viw .sku-unit .unitTags{display: inline-block;height: 28px;line-height: 28px;border: 1px solid #BFC6D2;border-radius: 2px;font-size: 12px;color: #627386;background: #FFFFFF;padding: 0 8px;position: relative;font-style: normal;cursor: pointer;margin-right: 8px;margin-bottom: 11px;float: left;}
-    .supporting-list .list-unit .sku-popup-viw .sku-unit .unitTags.active{border-color: #E15621;color: #E15621;}
-    .supporting-list .list-unit .sku-popup-viw .sku-unit .unitTags.active .tips{background: #FF5B00;}
-    .supporting-list .list-unit .sku-popup-viw .sku-unit .tips{display: block;padding: 0 4px;height: 18px;line-height: 18px;font-style: normal; font-size: 12px;text-align: center;background: #CBD2DF;border-radius: 2px;position: absolute;right: -5px;top: -8px;color: #FFFFFF;}
-    .supporting-list .list-unit .sku-popup-viw .sku-button{width: 100%;height: 30vw;position: absolute;bottom: 0;left: 0;}
-    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-button-center{width: 72vw;height: 17vw;margin: 24px auto;box-sizing: border-box;padding: 16px 0;}
-    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-btn{width: 30vw;height: 9vw;display: block;margin: 0 12px;font-size: 14px;text-align: center;line-height: 9vw;float: left;}
-    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-btn.cancel{background: #E2E2E2;color: #4A4F58;}
-    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-btn.confirm{background: #E15621;color: #FFFFFF;}
-    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-btn.disable{background: rgba(255,86,22,0.3);color: #FFFFFF;}
-    
-    .supporting-list .list-info .list-price{width: 100%;line-height: 5vw;height: 5vw;font-size: 2.8vw;margin-bottom: 1.5vw;}
-    .supporting-list .list-info .list-price .price-box{float: left;line-height: 5vw;}
-    .supporting-list .list-info .list-price .price-box .main_price_unde{color: #f94b4b;}
-
-    .supporting-list .list-info .list-price .price-box .main_price_show{color: #F94B4B;font-size: 3.6vw;line-height: 5vw;}
-    .supporting-list .list-info .list-price .price-box .main_price_show.none{text-decoration: line-through;color: #999999;}
-    .supporting-list .list-info .list-price .price-number{float: right;width: 20.8vw;height: 5vw;box-sizing: border-box;}
-    .supporting-list .list-info .list-price .price-number .number{display: inline-block;width: 100%;line-height: 5.5vw;height: 5.5vw;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;}
-    .supporting-list .list-info .list-price .price-number .number>em{display: inline-block;width: 5vw;height: 5vw;background: #FFE6DC;font-size: 3.8vw;line-height: 5vw;vertical-align: top;font-style: normal;text-align: center;}
-    .supporting-list .list-info .list-price .price-number .number input{width: 10.2vw;border: none;line-height: 5vw;vertical-align: top;text-align: center;color: #FF5B00;font-size: 3.4vw;}
-
-    .supporting-list .list-info .list-price .price_grade{width: 100%;float: left;}
-    .supporting-list .list-info .list-price .price_grade .bold{font-size: 3.4vw;}
-    .supporting-list .list-info .list-price .mIcon:before{width:15.8vw;height: 5vw}
-    .supporting-list .list-info .list-price .mIcon.i5:before {background-position: -84vw -97.5vw;}
-    .supporting-list .list-info .list-price .mIcon.i1:before {background-position: -84vw -69.5vw;}
-    .supporting-list .list-info .list-price .mIcon.i2:before {background-position: -84vw -76.5vw;}
-    .supporting-list .list-info .list-price .mIcon.i3:before {background-position: -84vw -83.7vw;}
-    .supporting-list .list-info .list-price .mIcon.i4:before {background-position: -84vw -90.7vw;}
-    .supporting-list .list-info .list-price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
-
-    .supporting-list .list-info .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
-    .supporting-list .list-info .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:7.8vw;height:4.74vw;text-align:center;line-height:4.74vw;font-size:2.6vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
-    .supporting-list .list-info .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
-    .supporting-list .list-info .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-5vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
-    .supporting-list .list-info .svip-tag .svip-price span{color: #333}
-    .supporting-list .list-info .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
-
-    .supporting-submit{width: 100%;height: 26.7vw;box-sizing: border-box;padding:7.2vw 3.3vw;position:fixed;bottom: 0;left: 0;z-index: 999;background-color: #FFFFFF;display: flex;box-shadow: 8px 8px 8px 8px rgb(0 0 0 / 7%);}
-    .supporting-submit .supporting-submit-total{flex: 4;}
-    .supporting-submit .supporting-submit-total p{line-height:5.6vw;font-size: 3.4vw;color: #4A4F58; }
-    .supporting-submit .supporting-submit-total p .ore{color: #E15621;}
-    .supporting-submit .supporting-submit-total p .red{color: #F94B4B;}
-    .supporting-submit .supporting-submit-button{flex: 6;display: flex;}
-    .supporting-submit .btn{width: 22.4vw;height: 11.2vw;flex: 1;line-height: 11.2vw;border: 1px solid #E15621;text-align: center;color: #FFFFFF;font-size: 3.4vw;margin: 0 2vw;border-radius: 2px;}
-    .supporting-submit .btn.buy{background-color: #E15621;}
-    .supporting-submit .btn.add{background-color: #FFE6DC;color: #E15621;}
-
-
-}
+@media screen and (max-width:768px) {
+    #supporting{width: 100%;padding-top: 27vw;}
+    .supporting-title{width:100%;height: 11.4vw;box-sizing: border-box;padding:3vw;background-color: #F7F7F7;box-sizing: border-box;}
+    .supporting-title .title{float: left;line-height: 5.4vw;font-size: 3.6vw;color: #2D3036;text-align: left;}
+    .supporting-title .coll-span{display: block;float: right;margin-left: 20px;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;}
+    .supporting-title .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .supporting-title .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+    .supporting-content{width: 100%;min-height:50vw;background-color: #f5f5f5;padding: 0 2vw; padding-bottom: 27.7vw;box-sizing: border-box;}
+    .supporting-list{width: 100%;height: 38vw;box-sizing: border-box;padding:3.2vw 2vw;margin-bottom: 2vw;background: #FFFFFF;border-radius: 4vw;}
+    .supporting-list .list-checked{width: 6.5vw;height: 100%;display: flex;align-items: center;float: left;}
+    .supporting-list .list-checked .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .supporting-list .list-checked .coll-checked.none{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan_desied@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .supporting-list .list-checked .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+    .supporting-list .list-image{width: 24vw;height: 100%;float: left;margin-right: 2vw;}
+    .supporting-list .list-image a{width: 24vw;height: 24vw;display: block;position: relative;}
+    .supporting-list .list-image .smalltype{width: 26px;height: 26px;position: absolute;top: 0;right: 5px;border:none;}
+    .supporting-list .list-image img{width: 24vw;height: 24vw;box-sizing: border-box;display: block;border: 1px solid #E1E1E1;border-radius: 2vw;}
+    .supporting-list .list-info{width: 59vw;float: left;height: 100%;}
+    .supporting-list .list-info .list-name{width:100%;height: 10.5vw;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;line-height: 5.2vw;text-align: justify;font-size: 3.6vw;color: #22272E;}
+    .supporting-list .list-info .list-unit{width: 100%;line-height: 6vw;height: 6vw;font-size: 2.8vw;color: #627386;margin-bottom: 2vw;}
+    .supporting-list .list-info .list-unit .sku-label{line-height: 6vw;height: 6vw;font-size: 2.8vw;color: #627386;float: left;}
+    .supporting-list .list-info .list-unit .sku-popup{position: relative;height: 6vw;display: inline-block;box-sizing: border-box;cursor: pointer; border: 1px solid #E2E7EF;border-radius: 3vw;padding: 0 8px;}
+    .supporting-list .list-info .list-unit .sku-popup .sku-text{width: 54px;height: 6vw;text-align: left; display: block;line-height: 6vw;font-size: 12px;color: #22272E;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;float: left;}
+    .supporting-list .list-info .list-unit .sku-popup .sku-icon{width: 24px;height: 24px;float: right;}
+    .supporting-list .list-info .list-unit .sku-popup .sku-icon .mIcon:before{width: 24px;height: 24px;background-position:-208px -1px;}
+    /*SKU弹窗*/
+    .supporting-list .list-unit .sku-popup-model{width: 100%;height: 100%;background: rgba(0,0,0,0.1);position: fixed;top: 0;left: 0;z-index: 1000;}
+    .supporting-list .list-unit .sku-popup-viw{width: 100%;height: 105vw;border-radius: 4vw 4vw 0 0; z-index: 1001; box-sizing: border-box;padding: 3.2vw;position: fixed;bottom: 0;left: 0;background: #FFFFFF;box-shadow: 0px 6px 16px 1px rgba(0,0,0,0.1);border: 1px solid #E2E7EF;}
+    .supporting-list .list-unit .sku-popup-viw .sku-title{width: 100%;height: 80px;float: left;margin-bottom: 10px;}
+    .supporting-list .list-unit .sku-popup-viw .sku-image{width: 80px;height: 80px;float: left;border: 1px dashed #E2E7EF;box-sizing: border-box;border-radius: 2vw;overflow: hidden;}
+    .supporting-list .list-unit .sku-popup-viw .sku-image img{width: 100%;height: 100%;display: block}
+    .supporting-list .list-unit .sku-popup-viw .sku-price{width: 200px;height: 80px;float: left;box-sizing: border-box;padding-left: 16px;padding-top: 16px;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .bold{float: left;display: block;font-size: 4vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .price_grade{float: left;width: 100%;margin-bottom: 10px;line-height: 4.8vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .main_price_unde{float: left;width: 100%;margin-bottom: 10px;color: #F94B4B;text-align: left;line-height: 24px;font-size: 4vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .main_price_show{float: left;width: 100%;margin-bottom: 10px;color: #F94B4B;text-align: left;line-height: 24px;font-size: 4vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .price_text_tag{float: left;line-height: 22px;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .couponTag{float: left;margin-right: 5px;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .icon{float: left;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon:before {width: 15.8vw;height: 5vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon:before {background-position: -84vw -90.7vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i5:before {background-position: -84vw -97.5vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i1:before {background-position: -84vw -69.5vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i2:before {background-position: -84vw -76.5vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i3:before {background-position: -84vw -83.7vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .mIcon.i4:before {background-position: -84vw -90.7vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag{height:22px;letter-spacing:0;float: left;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:4.8vw;text-align:center;line-height:4.8vw;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333;}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-22px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
+    .supporting-list .list-unit .sku-popup-viw .sku-price .svip-tag .svip-price span{color: #333}
+    .supporting-list .list-unit .sku-popup-viw .sku-h1 {width: 100%;height: 20px;line-height: 20px;font-size: 14px;color: #22272E;font-weight: bold;float: left;text-align: left;}
+    .supporting-list .list-unit .sku-popup-viw .sku-unit{width: 100%;height: 148px;padding: 12px 0;overflow-y: scroll;box-sizing: border-box;}
+    .supporting-list .list-unit .sku-popup-viw .sku-unit .unitTags{display: inline-block;height: 6vw;line-height: 6vw;border: 1px solid #BFC6D2;border-radius: 3vw;font-size: 3.4vw;color: #627386;background: #FFFFFF;padding: 0 8px;position: relative;font-style: normal;cursor: pointer;margin-right: 8px;margin-bottom: 11px;float: left;}
+    .supporting-list .list-unit .sku-popup-viw .sku-unit .unitTags.active{border-color: #E15621;color: #E15621;}
+    .supporting-list .list-unit .sku-popup-viw .sku-unit .unitTags.active .tips{background: #FF5B00;}
+    .supporting-list .list-unit .sku-popup-viw .sku-unit .tips{display: block;padding: 0 4px;height: 18px;line-height: 18px;font-style: normal; font-size: 12px;text-align: center;background: #CBD2DF;border-radius: 2px;position: absolute;right: -5px;top: -8px;color: #FFFFFF;}
+    .supporting-list .list-unit .sku-popup-viw .sku-button{width: 100%;height: 30vw;position: absolute;bottom: 0;left: 0;}
+    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-button-center{width: 75vw;height: 19vw;margin: 24px auto;box-sizing: border-box;padding: 4vw 0;}
+    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-btn{width: 50%;height: 11vw;display: block;font-size: 14px;text-align: center;line-height: 11vw;float: left;}
+    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-btn.cancel{background: #E2E2E2;color: #4A4F58;border-radius: 5vw 0 0 5vw;}
+    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-btn.confirm{background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color: #FFFFFF;border-radius: 0 5vw 5vw 0;}
+    .supporting-list .list-unit .sku-popup-viw .sku-button .sku-btn.disable{background: rgba(255,86,22,0.3);color: #FFFFFF;}
+
+    .supporting-list .list-info .list-price{width: 100%;line-height: 5vw;height: 5vw;font-size: 2.8vw;margin-bottom: 1.5vw;}
+    .supporting-list .list-info .list-price .price-box{float: left;line-height: 5vw;}
+    .supporting-list .list-info .list-price .price-box .main_price_unde{color: #f94b4b;}
+
+    .supporting-list .list-info .list-price .price-box .main_price_show{color: #F94B4B;font-size: 3.6vw;line-height: 5vw;}
+    .supporting-list .list-info .list-price .price-box .main_price_show.none{text-decoration: line-through;color: #999999;}
+    .supporting-list .list-info .list-price .price-number{float: right;width: 20.8vw;height: 5vw;box-sizing: border-box;}
+    .supporting-list .list-info .list-price .price-number .number{display: inline-block;width: 100%;line-height: 5.5vw;height: 5.5vw;box-sizing: border-box;border: 1px solid #FFE6DC;border-radius: 2.7vw;font-size: 0;white-space: nowrap;text-align: center;overflow: hidden;vertical-align: top;}
+    .supporting-list .list-info .list-price .price-number .number>em{display: inline-block;width: 5vw;height: 5vw;background: #FFE6DC;font-size: 3.8vw;line-height: 5vw;vertical-align: top;font-style: normal;text-align: center;}
+    .supporting-list .list-info .list-price .price-number .number input{width: 10.2vw;border: none;line-height: 5vw;vertical-align: top;text-align: center;color: #FF5B00;font-size: 3.4vw;}
+
+    .supporting-list .list-info .list-price .price_grade{width: 100%;float: left;}
+    .supporting-list .list-info .list-price .price_grade .bold{font-size: 3.4vw;}
+    .supporting-list .list-info .list-price .mIcon:before{width:15.8vw;height: 5vw}
+    .supporting-list .list-info .list-price .mIcon.i5:before {background-position: -84vw -97.5vw;}
+    .supporting-list .list-info .list-price .mIcon.i1:before {background-position: -84vw -69.5vw;}
+    .supporting-list .list-info .list-price .mIcon.i2:before {background-position: -84vw -76.5vw;}
+    .supporting-list .list-info .list-price .mIcon.i3:before {background-position: -84vw -83.7vw;}
+    .supporting-list .list-info .list-price .mIcon.i4:before {background-position: -84vw -90.7vw;}
+    .supporting-list .list-info .list-price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
+
+    .supporting-list .list-info .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
+    .supporting-list .list-info .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:7.8vw;height:4.74vw;text-align:center;line-height:4.74vw;font-size:2.6vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+    .supporting-list .list-info .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .supporting-list .list-info .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-5vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
+    .supporting-list .list-info .svip-tag .svip-price span{color: #333}
+    .supporting-list .list-info .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
+    .listTag{ width: auto;display: inline-block; }
+    .supporting-submit{width: 100%;height: 26.7vw;box-sizing: border-box;padding:7.2vw 3.3vw;position:fixed;bottom: 0;left: 0;z-index: 999;background-color: #FFFFFF;display: flex;box-shadow: 8px 8px 8px 8px rgb(0 0 0 / 7%);border-radius: 4vw;}
+    .supporting-submit .supporting-submit-total{flex: 4;}
+    .supporting-submit .supporting-submit-total p{line-height:5.6vw;font-size: 3.4vw;color: #4A4F58; }
+    .supporting-submit .supporting-submit-total p .ore{color: #E15621;}
+    .supporting-submit .supporting-submit-total p .red{color: #F94B4B;}
+    .supporting-submit .supporting-submit-button{flex: 6;display: flex;}
+    .supporting-submit .btn{width: 24vw;height: 9vw;flex: 1;line-height: 9vw;text-align: center;color: #FFFFFF;font-size: 3.4vw;margin: 0 2vw;border-radius: 5vw;box-shadow: rgba(255, 119, 0, 0.2) 0 1vw 3vw 0;}
+    .supporting-submit .btn.add{background-color: #ffe6dc;color: #ff5b00;}
+    .supporting-submit .btn.buy{background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color: #FFFFFF;}
+
+
+}

src/main/resources/static/css/supplier/list.css

@@ -4,39 +4,43 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
-    .supplierList{width:1184px;margin:16px auto;background:#FFF}
-    .supplierItem{box-sizing:border-box;padding:16px;border-top:1px solid #F5F5F5}
+    .supplierList{width:1184px;margin:16px auto;background:#FFF;border-radius: 12px;}
+    .supplierItem{box-sizing:border-box;padding:16px;border-top:1px solid #F5F5F5;min-height: 180px;}
     .supplierItem:first-child{border:none}
     .supplierItem .right{float:right;width:576px;position:relative}
     .supplierItem .left{float:left;width:560px;box-sizing:border-box;padding-left:152px;position:relative}
-    .supplierItem .left .logo{position:absolute;left:0;top:0;width:136px;height:124px;line-height:120px;border:1px solid #e1e1e1;}
+    .supplierItem .left .logo{position:absolute;left:0;top:0;width:136px;height:136px;line-height:136px;border:1px solid rgba(0,0,0,0.06);border-radius: 8px;}
     .supplierItem .left .logo img{width:100%;max-height:100%;background-color:#FFF;vertical-align:middle;}
     .supplierItem .left h5{line-height:32px;font-weight:bold;font-size:20px;}
     .supplierItem .left h5 span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align: middle;max-width:84%;}
     .supplierItem .left p{line-height:26px;font-size:14px;color:#93979F;white-space:nowrap}
     .supplierItem .left p>span{white-space:normal;height:auto;display:inline-block;vertical-align:top;max-width:82%}
-    .supplierItem .left .tag{display:inline-block;height:20px;line-height:20px;font-style:normal;background:#86B2FB;color:#FFF;border-radius:2px;margin-right:10px;padding:0 5px}
+    .supplierItem .left .tag{display:inline-block;font-size: 14px;height:20px;line-height:20px;font-style:normal;background:#86B2FB;color:#FFF;border-radius:10px;margin-right:10px;padding:0 5px}
     .supplierItem .products{position:relative;height:124px}
-    .supplierItem .products li{float:left;width:100px;min-height:100px;background:url(/img/base/placeholder.png) no-repeat center center;background-size:80%;margin-right:16px;border: 1px solid #e1e1e1;}
+    .supplierItem .products li{float:left;width:100px;min-height:100px;background:url(/img/base/placeholder.png) no-repeat center center;background-size:80%;margin-right:16px;border: 1px solid #e1e1e1;border-radius: 8px;overflow: hidden;}
     .supplierItem .products li img{width:98px;height:98px}
     .supplierItem .products li span{display:block;padding-top:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#93979F}
     .supplierItem .products a:hover span{color:#FF5B00;}
-    .supplierItem .right .four{position:absolute;right:0;top:38px;line-height:24px;font-size:16px;color:#FF5B00}
-    .supplierItem .right .four:hover{border-bottom:1px solid #FF5B00}
-
+    .supplierItem .right .four{ position:absolute;right:0;top:38px;display: flex;flex-direction: row;align-items: center; height: 30px;line-height: 30px; padding: 0 16px; font-size: 14px;font-weight: 500;color: #11192d;border: 1px solid #e2e4e6;border-radius: 8px;text-align: center;}
+    .supplierItem .right .four .icon.shop{ vertical-align: middle;display: inline-block;width: 20px;height: 20px;line-height: 25px; }
+    .supplierItem .right .four .icon.shop:before{width: 20px;height: 20px;background-position: -182px -746px;}
+    .empty{ background: #FFFFFF;margin-top: 24px;min-height: 480px;font-size: 14px;color: #999999; }
 }
 
 /**
 * 移动端
 */
 @media screen and (max-width:768px){
-    .supplierItem{width:100vw;margin:2.8vw auto 0;box-sizing:border-box;padding:2.6vw 3.3vw;background:#FFF;overflow:hidden}
+    #supplierList{ padding-top: 27vw; }
+    footer{ display: none; }
+    body{ background: #FFFFFF; }
+    .supplierItem{width:100vw;margin:2.8vw auto 0;box-sizing:border-box;padding:2.6vw 3.3vw;background:#FFF;overflow:hidden;border-bottom: 2vw solid #f7f7f7;}
     .supplierItem .left{padding-left:13.6vw;position:relative}
     .supplierItem .left .logo{position:absolute;left:0;top:0;width:12.2vw;height:12.2vw;background:url(/img/base/placeholder.png) no-repeat center center;background-size:80%;}
     .supplierItem .left .logo img{width:100%;max-height:100%}
     .supplierItem .left h5{line-height:6vw;font-weight:bold;font-size:3.7vw;position:relative}
     .supplierItem .left h5 span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;max-width:84%}
-    .supplierItem .left h5 a:after{content:'\276F';position:absolute;right:2vw;top:2vw;font-weight:normal}
+    .supplierItem .left h5 a:after{content:'\276F';position:absolute;right:2vw;top:10vw;font-weight:normal}
     .supplierItem .left p{line-height:6vw;font-size:3.4vw;color:#93979F;white-space:nowrap}
     .supplierItem .left p>span{white-space:normal;height:auto;display:inline-block;vertical-align:top;max-width:82%}
     .supplierItem .left .tag{display:inline-block;height:4.4vw;line-height:4.4vw;font-size:2.6vw;font-style:normal;background:#86B2FB;color:#FFF;border-radius:2px;margin-right:2.2vw;padding:0 1vw}
@@ -44,5 +48,5 @@ li{list-style:none}
     .supplierItem .products li{width:29.4vw;min-height:29.4vw;background:url(/img/base/placeholder.png) no-repeat center center;background-size:80%;margin:0 1.3vw}
     .supplierItem .products li img{width:29.4vw;height:29.4vw}
     .supplierItem .products li span{display:block;line-height:4vw;padding-top:2.6vw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:3vw;color:#93979F}
-
+    .supplierItem .right .four{ display: none;}
 }

src/main/resources/static/css/user-center/address/list.css

@@ -74,9 +74,9 @@ li{list-style:none}
     .container .list p{display:inline-block;min-width:49%;line-height:5vw;font-size:3.4vw;color:#22272e}
     .container .list p .label{color:#627386;margin-right:2vw}
     .container .list-right{padding-top:2vw}
-    .container .list-btn,.header-button .btn-server{display:inline-block;height:8vw;line-height:8vw;font-size:3.4vw;color:#1890f9;padding:0 3vw;border-radius:4.5vw;background-color:#e0f1ff;border:solid 1px #1890f9}
+    .container .list-btn,.header-button .btn-server{display:inline-block;height:8vw;line-height:8vw;font-size:3.4vw;color:#1890f9;padding:0 3vw;border-radius:4.5vw;background-color:#e0f1ff;}
     .container .list-btn.ico{background-color:#ffd8d8;color:#f94b4b;border-color:#f94b4b;margin-left:2vw}
-    .header-button .btn-server{background-color:#FF5B00;color:#FFF;border-color:#FF5B00;}
+    .header-button .btn-server{background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color: #FFFFFF;}
     .container .list-btn i{font-style:normal;}
     .container .list-defalut{height:8vw;line-height:8vw}
     .container .list-defalut .mIcon{display:inline-block;vertical-align:middle}
@@ -90,13 +90,14 @@ li{list-style:none}
     .container .list.checked{border:1px solid #FF5B00}
     .container .list.checked .seclet{opacity:1}
     .addressWrap{position:fixed;bottom:0;left:0;width:100%;height:100%;margin:0 auto;background-color:rgba(74,79,88,.7);z-index:999999;box-sizing:border-box;}
-    .addressWrap .form{width:100%;box-sizing:border-box;position:absolute;bottom:0;left:0;background:#FFF;border-radius:2vw 2vw 0 0;padding:3.3vw}
+    .addressWrap .form{width:100%;box-sizing:border-box;position:absolute;bottom:0;left:0;background:#FFF;border-radius:4vw 4vw 0 0;padding:3.3vw}
     .addressWrap .btnBox .group{text-align:center}
     .addressWrap .btnBox .group p:first-child{margin-bottom:5vw}
     .addressWrap .btnBox .group .check{display:inline-block;color:#1890f9}
     .addressWrap .btnBox .group .check input{vertical-align:top;margin-right:2vw}
-    .addressWrap .btnBox .group .btn{display:inline-block;width:40vw;height:11vw;line-height:11vw;text-align:center;font-size:3.4vw;color:#FF5B00;border:1px solid #FF5B00;background:#FFE6DC;border-radius: 5.5vw;}
-    .addressWrap .btnBox .group .btn.save{background-color:#FF5B00;color:#FFF;border-color:#FF5B00}
+    .addressWrap .btnBox .group .btn{display:inline-block;width:40vw;height:11vw;line-height:11vw;text-align:center;font-size:3.4vw;color:#FF5B00;background:#FFE6DC;border-radius: 5.5vw;}
+    .addressWrap .btnBox .group .btn.save{background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color: #FFFFFF;}
+    .addressWrap .btnBox .group .btn.con{background: #E2E2E2;color: #4A4F58;}
     input[type=checkbox]:checked:after{background: #1890f9;border: 1px solid #1890f9}
     input[type=checkbox]:after{border: 1px solid #1890f9;}
     input::placeholder,textarea::placeholder{color: #9aa5b5}

src/main/resources/static/css/user-center/operation/list.css

@@ -53,26 +53,28 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
+    input::placeholder{color: #9aa5b5}
     body{ background: #FFFFFF; }
     #operationPage{padding-top: 27vw;}
     footer{display: none;}
-    .order-header{padding: 2.7vw 4vw;background: #fff}
-    .search{float: left; width:50%;height: 10vw;border: 1px solid #b8bfca;margin-bottom: 2.7vw;line-height: 10vw;font-size:3.1vw;overflow: hidden;border-radius: 5vw;}
-    .search span.label{padding-left: 2.7vw;color: #627386}
-    .search-input {height: -webkit-fill-available;width: 70vw;font-size:3.1vw;border: none;border-radius: .27vw}
-    input::placeholder{color: #9aa5b5}
-    .header-button a{width: 35.3vw;height: 10vw;border: 1px solid #FF5B00;text-align: center;line-height: 10vw;background: #ffe6dc;display: inline-block;color: #FF5B00;font-size: 3.7vw;border-radius: 5vw;}
-    .header-button .btn-serch{color: #fff;background: #FF5B00}
+    .order-header{padding:3vw;background: #fff}
+    .order-header .header-bt {width: 100%;height: auto;float: left;}
+    .order-header .header-bt .header-search{width: 100%;height: 10vw;display: flex;flex-direction: row;align-items: center;}
+    .order-header .header-bt .search{flex: 1;display: flex;flex-direction: row;align-items: center; width:50%;height: 10vw;border: 1px solid #b8bfca;margin-bottom: 2.7vw;line-height: 10vw;font-size:3.1vw;overflow: hidden;border-radius: 5vw;}
+    .order-header .header-bt .search .search-input {flex: 1; font-size:3.1vw;border: none;border-radius: .27vw;box-sizing: border-box;padding: 0 3vw;}
+    .header-button{ width: 100%;height: 10vw;display: flex;flex-direction: row;align-items: center; }
+    .header-button a{flex: 1;display: flex;height: 10vw;justify-content: center;line-height: 10vw;background: #ffe6dc;color: #FF5B00;font-size: 3.7vw;border-radius: 5vw;}
+    .header-button a.btn-add{  }
+    .header-button a.btn-serch{background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color: #FFFFFF;}
     .header-button{text-align:center;padding: 1.7vw 0;}
     .section .list{margin: 2.7vw 0;background: #fff;padding: 2.7vw 3.3vw;}
     .list div span{display: inline-block;line-height: 6.4vw;color: #9aa5b5;}
     .list-one span{width: 35%;font-size: 3.2vw}
     .list div span p{color: #22272e;font-size: 3.6vw}
-    .list-one span:last-child{width: 27%}
+    .list-one span:last-child{width: 27%;}
     .operat{float: right}
     .list div{margin-bottom: 1.7vw}
-    .operat  a{width: 22.4vw;height: 9.6vw;line-height: 9.6vw;text-align: center;display: inline-block; border-radius: 6.4vw;
-    font-size: 3.4vw;margin-left: 2.7vw}
+    .operat  a{width: 22.4vw;height: 9vw;line-height: 9vw;text-align: center;display: inline-block; border-radius: 5vw;font-size: 3.4vw;margin-left: 2.7vw}
     .operat  a.del{border: 1px solid #f94b4b;background: #ffd8d8;color: #f94b4b;}
     .operat  a.upd{border: 1px solid #1890f9;background: #e0f1ff;color: #1890f9;width: 23vw}
 

src/main/resources/static/css/user-center/repair/list.css

@@ -59,8 +59,8 @@ li{list-style:none}
     .header-search .search input{height: -webkit-fill-available;width: 75vw;border: none;}
     .header-search>div .label{color: #627386;margin-left: 1.7vw;line-height: 8vw}
     .header-search input::placeholder{color: #627386}
-    .header-search .search .select{background: #fff;padding-left: 2vw;height: 11.7vw;width:100%;border: none;color: #627386;border: .27vw solid rgba(184,191,202,.5)}
-    .btn-server{width: 35.3vw;height: 10vw;line-height: 10vw;border-radius: 5vw;text-align: center;color: #FF5B00;border: .27vw solid #FF5B00;background: #ffe6dc;margin:2.7vw auto;display: block;}
+    .header-search .search .select{background: #fff;padding-left: 2vw;height: 11.7vw;width:100%;color: #627386;border: .27vw solid rgba(184,191,202,.5);}
+    .btn-server{width: 35.3vw;height: 10vw;line-height: 10vw;border-radius: 5vw;text-align: center;color: #FFFFFF;background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);margin:2.7vw auto;display: block;}
     #orderDate .search-input{display: inline-block;}
     #orderDate{position: relative}
     .header-search .search-input input{width:39vw;height: 11.8vw;line-height: 11.8vw;padding-left: 2.7vw;border: .27vw solid rgba(184,191,202,.5);color: #627386;}
@@ -74,6 +74,6 @@ li{list-style:none}
     .container .section .td>span{color:#9aa5b5;font-size:3.2vw;width:100%}
     .container .section .td.td-1{color:#FF5B00}
     .container .section .td-8 a{width:22.4vw;height:9.6vw;line-height:9.6vw;text-align:center;color:#1890f9;background-color:#e0f1ff;border-radius:5vw;border:solid 1px #1890f9;position:absolute;bottom:3.2vw;right:3.2vw}
-    .navLayout .link{display:block;margin:2vw auto;width:90vw;height:11.2vw;line-height:11.2vw;background-color:#FF5B00;border-radius:5.5vw;text-align:center;font-size:3.4vw;color:#FFF;position: fixed;border-bottom: 0;left: 50%;margin-left: -45vw;}
+    .navLayout .link{display:block;margin:2vw auto;width:90vw;height:11.2vw;line-height:11.2vw;background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);border-radius:5.5vw;text-align:center;font-size:3.4vw;color:#FFF;position: fixed;border-bottom: 0;left: 50%;margin-left: -45vw;}
     input::placeholder{color:  #9AA5B5}
 }

src/main/resources/static/css/user-center/setting/upgrade.css

@@ -52,6 +52,7 @@ li{list-style:none}
 @media screen and (max-width:768px){
 body{width:100%;height:100%;background:#FFF url(/img/account/register.png) no-repeat center bottom;background-size:100% auto;background-attachment: fixed;}
 footer{display:none}
+#upgradePage{padding-top: 27vw;}
 .container{padding: 3.3vw}
 .container .title-tips {
     margin-bottom: 4.3vw;

src/main/resources/static/js/account/login.js

@@ -313,6 +313,9 @@ var loginPage = new Vue({
     mounted () {
         const _self = this;
         this.openFullScreen1()
+        const partnerId = CAIMEI.getUrlParam('partnerId');
+        console.log('partnerId', partnerId)
+        CAIMEI.Storage.setItem('partnerId',partnerId)
         $('body').on("focus",'[needverify]:visible',function(){
             $(this).siblings('.errTips').removeClass("show").siblings('.checked').removeClass("show");
         });

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

@@ -505,26 +505,11 @@ $(function(){
         * 0:产品  1:供应商  2:项目仪器  NaN:文章
         * 关键词 keyword
         * */
-        var type = isPC ? $('#topSearch').find('[data-select]').attr("data-select") * 1 : $('#topSearch').find('select').val() * 1;
-        var keyword = $.trim($('#topSearch').find('.keyword').val());
-        var tip = isNaN(type) ? '请输入文章关键字！' : '请至少输入两个关键字！';
+        const type = isPC ? $('#topSearch').find('[data-select]').attr("data-select") * 1 : $('#topSearch').find('select').val() * 1;
+        const keyword = $.trim($('#topSearch').find('.keyword').val());
+        const tips = isNaN(type) ? '请输入文章关键词' : '请输入搜索关键词';
         if ((type === 0 && keyword.length < 2) || (!type && !keyword)) {
-            $.confirm({
-                useBootstrap: false,
-                boxWidth: (isPC ? '300px' : '70%'),
-                title: '提示',
-                content: tip,
-                closeIcon: true,
-                animation: 'opacity',
-                closeAnimation: 'opacity',
-                animateFromElement: false,
-                buttons: {
-                    close: {
-                        text: '确定',
-                        btnClass: 'btn-confirm'
-                    }
-                }
-            });
+            CAIMEI.dialog(tips,true,function () {});
             return false;
         }
         if (type === 0) {
@@ -548,12 +533,6 @@ $(function(){
             // 文章
             window.location.href = '/info/search-1.html?keyword=' + encodeURIComponent(keyword);
         }
-        // 搜索词统计
-        // BeautyArchiveApi.setSearchKeywords({keyword}, (res) => {
-        //     if (res.code === 0) {
-        //         console.log('搜索词统计成功')
-        //     }
-        // })
     }).on('keyup', '.keyword', function (event) {
         // 搜索输入框 按回车键搜索
         var keyCode = event.keyCode || event.which;

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

@@ -297,14 +297,17 @@ var productList = new Vue({
                                    '&bpn='+this.hrefBrandId+ '&pro=' + this.params.promotionFlag +
                                    '&newg='+newFlag;
         },
-        showIsProductScreen:function(){//
+        showIsProductScreen(){//
             this.isProductScreen = true;
         },
-        handleConfirmScreen:function(){
+        handleConfirmScreen(){
             this.params.num = 1;
             this.listData = [];
             this.getListByKeyword();
             this.isProductScreen = false;
+        },
+        handleCancelScreen(){// 取消筛选弹窗
+            this.isProductScreen = false
         }
     },
     created: function () {

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

@@ -1,374 +1,377 @@
-var productList = new Vue({
-    el:'#productList',
-    mixins: [cmSysVitaMixins],
-    data:{
-        userId:0,
-        listLoading: true,
-        requestFlag: true,
-        noMore: false,
-        listData:[],
-        typeSort:0,
-        bigTypeId:0,
-        smallTypeId:0,//二级分类id
-        tinyTypeId:0,//三级分类id
-        listRecord: 0,
-        pageInput: '1',
-        source:'www',
-        params: {
-            id:'',
-            identity:GLOBAL_USER_IDENTITY,
-            sortField:'',
-            sortType: 1, // 上传0，下传1 綜合1
-            pageSize: 24,
-            pageNum: 1,
-            idType:1,
-            brandIds: '', // 品牌Id
-            newFlag: 0, // 查询新品标记，默认0，新品1
-            promotionFlag: 0, // 查询促销标记，默认0，促销1
-        },
-        addhtml:'<span class="tag">美博会</span>',
-        brandParam: {
-            keyword: '',
-            id: '',
-            idType: '',
-            identity: 0
-        },
-        hrefBrandId:'',
-        brandLists: [],
-        defaultBrandLists:[],
-        checkedBrandList:[],
-        checkedBrandLength:0,
-        isProductScreen:false,
-        isActiviChecked:false,
-        isNewsChecked:false,
-        isShowAllBrands:false,
-        isShowAllBrandsButton:false,
-        isAllcheckedBrand:false,
-        isChoiceBrandText:false,
-        choiceBrandText:''
-    },
-     filters:{
-         NumFormat:function(value) {//处理金额
-            return Number(value).toFixed(2);
-        },
-    },
-    computed: {
-        pageTotal: function () {
-            var total = Math.ceil(this.listRecord / this.params.pageSize);
-            return total > 0 ? total : 1;
-        },
-    },
-    methods:{
-        // 是否显示vip标签价格
-        showVipPriceTag: function(pros){
-            //非会员
-            // if(!GLOBAL_VIP_FLAG === 1) return false;
-            // 商品所有机构可见
-            if(pros.priceFlag === 0  && pros.svipProductFlag === 1 ) return true;
-            // 商品价格仅资质机构可见
-            if(pros.priceFlag === 2  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2) return true;
-            // 商品价格仅医美机构可见
-            if(pros.priceFlag === 3  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 &&  GLOBAL_CLUB_TYPE === 1) return true;
-            // 其它
-            return false;
-        },
-        getproductList:function(){//商品列表
-           var _self=this;
-           ProductApi.GetSearchProduct(_self.params,function (res) {
-               if( res.code==0){
-                     _self.listData=[];
-                     var result = JSON.parse(res.data);
-                     console.log(result);
-                      _self.listRecord = result.total;
-                       var resultData = setSearchProductList(result.items, _self.userId, function(){
-                            _self.$forceUpdate();
-                            setTimeout(function(){
-                                // 图片懒加载
-                                $("img[data-original]").lazyload();
-                            },500);
-                        });
-                        if(isPC){
-                            _self.listData = resultData;
-                        }else{
-                            _self.listData = _self.listData.concat(resultData);
-                        }
-                   console.log('listData',_self.listData);
-               }else {
-                  console.log('暂无数据')
-               }
-               _self.listLoading = false;
-               _self.requestFlag = true;
-           })
-        },
-        checkNum: function () {
-            if (this.pageInput > this.pageTotal) {
-                this.pageInput = this.pageTotal;
-            } else if (this.pageInput < 1) {
-                this.pageInput = 1;
-            }
-        },
-        toPagination: function (pageNum) {
-            if (pageNum <= this.pageTotal) {
-                this.params.pageNum = pageNum*1;
-                var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-'+this.params.pageNum+'-'+this.params.pageSize;
-                if (this.params.sortField) {
-                    url += '-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn=' + this.hrefBrandId + '&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
-                } else {
-                    url += '.html?bpn=' + this.hrefBrandId + '&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
-                }
-                window.location.href = url;
-            }
-        },
-        toSortList: function (sortField, sortType) {
-            var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+sortField+'-'+sortType+'.html?bpn=' + this.hrefBrandId + '&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
-            this.params.sortField= sortField;
-            this.params.sortType = sortType;
-            this.params.pageNum = 1;
-            window.location.href = url;
-        },
-        PromotionsFormat:function(promo){//促销活动类型数据处理
-            if(promo!=null){
-                if(promo.type == 1 && promo.mode == 1){
-                    return true
-                }else{
-                    return false
-                }
-            }
-            return false
-        },
-        getCommoditySearchQUeryBrand:function() { // 查询筛选项品牌
-            var _self = this;
-            ProductApi.getCommoditySearchQUeryBrand(_self.brandParam,function (response) {
-                console.log(response);
-                if (response.code === 0 && response.data ) {
-                    var data = response.data;
-                    _self.defaultBrandLists = data.map((el, index) => {
-                        if(_self.hrefBrandId && _self.hrefBrandId == el.id){
-                            el.isChecked = true;
-                        }else{
-                            el.isChecked = false;
-                        }
-                        return el;
-                    })
-                    _self.brandLists = _self.defaultBrandLists.slice(0,6)
-                }else {
-                    console.log('查询品牌列表异常')
-                }
-            });
-        },
-        choiceBrandHref: function (brand, index) {// PC端品牌跳转链接
-            if(this.isShowAllBrandsButton){
-                var _self = this;
-                brand.isChecked = !brand.isChecked;
-                if (brand.isChecked) {
-                    _self.checkedBrandList.push(brand.id);
-                } else {
-                    for (var i = 0; i < _self.checkedBrandList.length; i++){
-                        // 删除掉未勾选中的元素
-                        if(_self.checkedBrandList[i] === brand.id) {
-                            _self.checkedBrandList.splice(i, 1);
-                        }
-                    }
-                }
-                _self.isAllcheckedBrand = false;
-                _self.checkedBrandLength = _self.checkedBrandList.length;
-                _self.params.brandIds = this.checkedBrandList.join(',');
-            }else {
-                var url = '/product/classify-' + this.typeSort + '-' + this.bigTypeId + '-' + this.smallTypeId + '-' + this.tinyTypeId + '-1-' + this.params.pageSize + '-' + this.params.sortField + '-' + this.params.sortType + '.html?bpn=' + brand.id + '&pro=' + this.params.promotionFlag + '&newg=' + this.params.newFlag;
-                window.location.href = url;
-            }
-        },
-        choiceBrandAllHref:function(){// PC全部品牌跳转链接
-            var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn=&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
-            window.location.href =  url;
-        },
-        choiceBrand:function(brand,index){// 选择品牌
-            var _self = this;
-            brand.isChecked = !brand.isChecked;
-            if (brand.isChecked) {
-                _self.checkedBrandList.push(brand.id);
-            } else {
-                for (var i = 0; i < _self.checkedBrandList.length; i++){
-                    // 删除掉未勾选中的元素
-                    if(_self.checkedBrandList[i] === brand.id) {
-                        _self.checkedBrandList.splice(i, 1);
-                    }
-                }
-            }
-            _self.isAllcheckedBrand = false;
-            _self.checkedBrandLength = _self.checkedBrandList.length;
-            _self.params.brandIds = this.checkedBrandList.join(',');
-        },
-        choiceBrandAll:function(){ // 点击选择全部品牌
-            this.isAllcheckedBrand = true
-            this.params.brandIds = ''
-            this.brandLists.forEach(function(el){
-                el.isChecked = false
-            });
-        },
-        showMoreItem:function(){// 点击更多品牌
-            this.isShowAllBrands = !this.isShowAllBrands;
-            if( this.isShowAllBrands){
-                this.brandLists = this.defaultBrandLists;
-            }else{
-                this.brandLists = this.defaultBrandLists.slice(0,6)
-            }
-        },
-        showMoreItemCheckedAll:function () {//点击多选按钮
-            this.isShowAllBrands = true;
-            this.isShowAllBrandsButton = true
-            this.brandLists = this.defaultBrandLists;
-        },
-        handleCancel:function () {//取消多选
-            this.isShowAllBrandsButton = false
-        },
-        handleConfirm:function () {// 确认查询多选
-            if(this.checkedBrandList.length == 0){return;}
-            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn='+this.params.brandIds+ '&pro='+ this.params.promotionFlag +'&newg='+ this.params.newFlag;
-            window.location.href = url;
-        },
-        handleDeleteBrands:function () {// 删除选择的品牌
-            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?pro='+ this.params.promotionFlag +'&newg='+ this.params.newFlag;
-            window.location.href = url;
-        },
-        hanldCheckedActivi:function(){// 选择促销商品选项
-            this.isActiviChecked = !this.isActiviChecked;
-            if(this.isActiviChecked){
-                this.params.promotionFlag = 1
-            }else{
-                this.params.promotionFlag = 0
-            }
-        },
-        hanldCheckedNews:function(){// 选择新品选项
-            this.isNewsChecked = !this.isNewsChecked;
-            if(this.isNewsChecked){
-                this.params.newFlag = 1
-            }else{
-                this.params.newFlag = 0
-            }
-        },
-        hanldCheckedActiviHref(){// 选择促销商品选项跳转链接(PC专用)
-            var promotionFlag = this.isActiviChecked ? 0 : 1;
-            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn='+this.hrefBrandId+ '&pro='+promotionFlag+'&newg='+ this.params.newFlag;
-            window.location.href = url;
-        },
-        hanldCheckedNewsHref(){// 选择新品选项跳转链接(PC专用)
-            var newFlag = this.isNewsChecked ? 0 : 1;
-            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn='+this.hrefBrandId+ '&pro=' + this.params.promotionFlag+'&newg='+newFlag;
-            window.location.href = url;
-        },
-        showIsProductScreen:function(){//
-            this.isProductScreen = true;
-        },
-        handleConfirmScreen:function(){// 确定筛选项
-            if (GLOBAL_USER_ID && GLOBAL_USER_ID>0) {
-                this.params.pageNum = 1;
-                this.listData = [];
-                this.getproductList();
-                this.isProductScreen = false;
-            }else{
-                var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn='+this.params.brandIds+ '&pro=' + this.params.promotionFlag+'&newg='+this.params.newFlag;
-                console.log('url============>',url)
-                window.location.href = url;
-            }
-        }
-    },
-    created:function () {
-        var _self = this;
-        var userInfo = localStorage.getItem('userInfo');
-        if(userInfo){
-            this.userId = JSON.parse(userInfo).userId;
-        }
-        var paramsArr = window.location.pathname.split(".")[0].split("-");
-        this.typeSort =  paramsArr.length>=2 ? paramsArr[1]*1 : 0;
-        this.bigTypeId = paramsArr.length>=3 ? paramsArr[2]*1 : 0;
-        this.smallTypeId = paramsArr.length>=4 ? paramsArr[3]*1 : 0;
-        this.tinyTypeId = paramsArr.length>=5 ? paramsArr[4]*1 : 0;
-        this.params.pageNum = paramsArr.length>=6 ? paramsArr[5]*1 : 1;
-        this.params.sortField= paramsArr.length>=8 ? paramsArr[7] : "";
-        this.params.sortType = paramsArr.length>=9 ? paramsArr[8]*1 : 1;
-        this.hrefBrandId = getUrlParam("bpn") ? getUrlParam("bpn") : null; //bpn 品牌链接参数
-        this.params.promotionFlag = getUrlParam("pro") ? getUrlParam("pro")*1 : 0; // pro 促销商品链接参数
-        this.params.newFlag = getUrlParam("newg") ? getUrlParam("newg")*1 : 0; // newg 新品链接参数
-        if(this.params.promotionFlag == 1){
-            this.isActiviChecked = true;
-        }else{
-            this.isActiviChecked = false;
-        }
-        if(this.params.newFlag == 1){
-            this.isNewsChecked = true;
-        }else{
-            this.isNewsChecked = false;
-        }
-    },
-    mounted:function () {
-        var _self = this;
-        this.listRecord = $('#productCount').val() ? $('#productCount').val()*1 : 0;
-        if (this.bigTypeId && this.smallTypeId && this.tinyTypeId) {
-            this.params.id= this.brandParam.id = this.tinyTypeId;
-            this.params.idType = this.brandParam.idType = 3;
-        } else if (this.bigTypeId && this.smallTypeId) {
-            this.params.id= this.brandParam.id = this.smallTypeId;
-            this.params.idType = this.brandParam.idType = 2;
-        } else {
-            this.params.id= this.brandParam.id = this.bigTypeId;
-            this.params.idType = this.brandParam.idType = 1;
-        }
-        if (GLOBAL_USER_ID && GLOBAL_USER_ID>0) {
-            _self.getproductList();
-        } else {
-            _self.listLoading = false;
-            _self.$nextTick(function(){
-                // 图片懒加载
-                $("img[data-original]").lazyload();
-            });
-        }
-        //设置数据统计
-        this.$nextTick(function(){
-            _self.cmSysParams.pageType = 10;//设置数据统计
-            _self.cmSysParams.pageLabel = $('.crumbs-nav-item.on').eq(-1).text();//设置数据统计
-        })
-        // 获取对应品牌列表
-        this.getCommoditySearchQUeryBrand();
-        // 设置选中的品牌
-        setTimeout(()=>{
-            if(this.hrefBrandId){
-                const brandIdsArray = this.hrefBrandId.split(',')
-                this.params.brandIds = this.hrefBrandId +',';
-                this.isChoiceBrandText = true
-                const names = brandIdsArray.map(function (item) {
-                    const find = _self.defaultBrandLists.find(el => el.id === item*1)
-                    return find && find.name
-                })
-                this.choiceBrandText = names.join('，').slice(0,15)
-            }
-        },500)
-        if(!isPC){
-            $('footer').addClass("noneImportant");
-            //移动端上垃加载更多
-            $(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.pageSize)?Math.ceil(_self.listRecord / _self.params.pageSize):1;
-                    var next = _self.params.pageNum+1;
-                    if(next <= totalPage){
-                        if (_self.requestFlag){
-                            _self.params.pageNum = next;
-                                // 获取列表数据
-                             _self.getproductList();
-                        }
-                        _self.requestFlag = false;
-                    }else{
-                        //到底了
-                        _self.noMore = true;
-                        $('footer').removeClass("noneImportant");
-                    }
-                }
-            });
-        }
-    }
-
-})
+var productList = new Vue({
+    el:'#productList',
+    mixins: [cmSysVitaMixins],
+    data:{
+        userId:0,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        listData:[],
+        typeSort:0,
+        bigTypeId:0,
+        smallTypeId:0,//二级分类id
+        tinyTypeId:0,//三级分类id
+        listRecord: 0,
+        pageInput: '1',
+        source:'www',
+        params: {
+            id:'',
+            identity:GLOBAL_USER_IDENTITY,
+            sortField:'',
+            sortType: 1, // 上传0，下传1 綜合1
+            pageSize: 24,
+            pageNum: 1,
+            idType:1,
+            brandIds: '', // 品牌Id
+            newFlag: 0, // 查询新品标记，默认0，新品1
+            promotionFlag: 0, // 查询促销标记，默认0，促销1
+        },
+        addhtml:'<span class="tag">美博会</span>',
+        brandParam: {
+            keyword: '',
+            id: '',
+            idType: '',
+            identity: 0
+        },
+        hrefBrandId:'',
+        brandLists: [],
+        defaultBrandLists:[],
+        checkedBrandList:[],
+        checkedBrandLength:0,
+        isProductScreen:false,
+        isActiviChecked:false,
+        isNewsChecked:false,
+        isShowAllBrands:false,
+        isShowAllBrandsButton:false,
+        isAllcheckedBrand:false,
+        isChoiceBrandText:false,
+        choiceBrandText:''
+    },
+     filters:{
+         NumFormat:function(value) {//处理金额
+            return Number(value).toFixed(2);
+        },
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.params.pageSize);
+            return total > 0 ? total : 1;
+        },
+    },
+    methods:{
+        // 是否显示vip标签价格
+        showVipPriceTag: function(pros){
+            //非会员
+            // if(!GLOBAL_VIP_FLAG === 1) return false;
+            // 商品所有机构可见
+            if(pros.priceFlag === 0  && pros.svipProductFlag === 1 ) return true;
+            // 商品价格仅资质机构可见
+            if(pros.priceFlag === 2  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2) return true;
+            // 商品价格仅医美机构可见
+            if(pros.priceFlag === 3  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 &&  GLOBAL_CLUB_TYPE === 1) return true;
+            // 其它
+            return false;
+        },
+        getproductList:function(){//商品列表
+           var _self=this;
+           ProductApi.GetSearchProduct(_self.params,function (res) {
+               if( res.code==0){
+                     _self.listData=[];
+                     var result = JSON.parse(res.data);
+                     console.log(result);
+                      _self.listRecord = result.total;
+                       var resultData = setSearchProductList(result.items, _self.userId, function(){
+                            _self.$forceUpdate();
+                            setTimeout(function(){
+                                // 图片懒加载
+                                $("img[data-original]").lazyload();
+                            },500);
+                        });
+                        if(isPC){
+                            _self.listData = resultData;
+                        }else{
+                            _self.listData = _self.listData.concat(resultData);
+                        }
+                   console.log('listData',_self.listData);
+               }else {
+                  console.log('暂无数据')
+               }
+               _self.listLoading = false;
+               _self.requestFlag = true;
+           })
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                this.params.pageNum = pageNum*1;
+                var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-'+this.params.pageNum+'-'+this.params.pageSize;
+                if (this.params.sortField) {
+                    url += '-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn=' + this.hrefBrandId + '&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
+                } else {
+                    url += '.html?bpn=' + this.hrefBrandId + '&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
+                }
+                window.location.href = url;
+            }
+        },
+        toSortList: function (sortField, sortType) {
+            var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+sortField+'-'+sortType+'.html?bpn=' + this.hrefBrandId + '&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
+            this.params.sortField= sortField;
+            this.params.sortType = sortType;
+            this.params.pageNum = 1;
+            window.location.href = url;
+        },
+        PromotionsFormat:function(promo){//促销活动类型数据处理
+            if(promo!=null){
+                if(promo.type == 1 && promo.mode == 1){
+                    return true
+                }else{
+                    return false
+                }
+            }
+            return false
+        },
+        getCommoditySearchQUeryBrand:function() { // 查询筛选项品牌
+            var _self = this;
+            ProductApi.getCommoditySearchQUeryBrand(_self.brandParam,function (response) {
+                console.log(response);
+                if (response.code === 0 && response.data ) {
+                    var data = response.data;
+                    _self.defaultBrandLists = data.map((el, index) => {
+                        if(_self.hrefBrandId && _self.hrefBrandId == el.id){
+                            el.isChecked = true;
+                        }else{
+                            el.isChecked = false;
+                        }
+                        return el;
+                    })
+                    _self.brandLists = _self.defaultBrandLists.slice(0,6)
+                }else {
+                    console.log('查询品牌列表异常')
+                }
+            });
+        },
+        choiceBrandHref: function (brand, index) {// PC端品牌跳转链接
+            if(this.isShowAllBrandsButton){
+                var _self = this;
+                brand.isChecked = !brand.isChecked;
+                if (brand.isChecked) {
+                    _self.checkedBrandList.push(brand.id);
+                } else {
+                    for (var i = 0; i < _self.checkedBrandList.length; i++){
+                        // 删除掉未勾选中的元素
+                        if(_self.checkedBrandList[i] === brand.id) {
+                            _self.checkedBrandList.splice(i, 1);
+                        }
+                    }
+                }
+                _self.isAllcheckedBrand = false;
+                _self.checkedBrandLength = _self.checkedBrandList.length;
+                _self.params.brandIds = this.checkedBrandList.join(',');
+            }else {
+                var url = '/product/classify-' + this.typeSort + '-' + this.bigTypeId + '-' + this.smallTypeId + '-' + this.tinyTypeId + '-1-' + this.params.pageSize + '-' + this.params.sortField + '-' + this.params.sortType + '.html?bpn=' + brand.id + '&pro=' + this.params.promotionFlag + '&newg=' + this.params.newFlag;
+                window.location.href = url;
+            }
+        },
+        choiceBrandAllHref:function(){// PC全部品牌跳转链接
+            var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn=&pro=' + this.params.promotionFlag +'&newg='+ this.params.newFlag;
+            window.location.href =  url;
+        },
+        choiceBrand:function(brand,index){// 选择品牌
+            var _self = this;
+            brand.isChecked = !brand.isChecked;
+            if (brand.isChecked) {
+                _self.checkedBrandList.push(brand.id);
+            } else {
+                for (var i = 0; i < _self.checkedBrandList.length; i++){
+                    // 删除掉未勾选中的元素
+                    if(_self.checkedBrandList[i] === brand.id) {
+                        _self.checkedBrandList.splice(i, 1);
+                    }
+                }
+            }
+            _self.isAllcheckedBrand = false;
+            _self.checkedBrandLength = _self.checkedBrandList.length;
+            _self.params.brandIds = this.checkedBrandList.join(',');
+        },
+        choiceBrandAll:function(){ // 点击选择全部品牌
+            this.isAllcheckedBrand = true
+            this.params.brandIds = ''
+            this.brandLists.forEach(function(el){
+                el.isChecked = false
+            });
+        },
+        showMoreItem:function(){// 点击更多品牌
+            this.isShowAllBrands = !this.isShowAllBrands;
+            if( this.isShowAllBrands){
+                this.brandLists = this.defaultBrandLists;
+            }else{
+                this.brandLists = this.defaultBrandLists.slice(0,6)
+            }
+        },
+        showMoreItemCheckedAll:function () {//点击多选按钮
+            this.isShowAllBrands = true;
+            this.isShowAllBrandsButton = true
+            this.brandLists = this.defaultBrandLists;
+        },
+        handleCancel:function () {//取消多选
+            this.isShowAllBrandsButton = false
+        },
+        handleConfirm:function () {// 确认查询多选
+            if(this.checkedBrandList.length == 0){return;}
+            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn='+this.params.brandIds+ '&pro='+ this.params.promotionFlag +'&newg='+ this.params.newFlag;
+            window.location.href = url;
+        },
+        handleDeleteBrands:function () {// 删除选择的品牌
+            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?pro='+ this.params.promotionFlag +'&newg='+ this.params.newFlag;
+            window.location.href = url;
+        },
+        hanldCheckedActivi:function(){// 选择促销商品选项
+            this.isActiviChecked = !this.isActiviChecked;
+            if(this.isActiviChecked){
+                this.params.promotionFlag = 1
+            }else{
+                this.params.promotionFlag = 0
+            }
+        },
+        hanldCheckedNews:function(){// 选择新品选项
+            this.isNewsChecked = !this.isNewsChecked;
+            if(this.isNewsChecked){
+                this.params.newFlag = 1
+            }else{
+                this.params.newFlag = 0
+            }
+        },
+        hanldCheckedActiviHref(){// 选择促销商品选项跳转链接(PC专用)
+            var promotionFlag = this.isActiviChecked ? 0 : 1;
+            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn='+this.hrefBrandId+ '&pro='+promotionFlag+'&newg='+ this.params.newFlag;
+            window.location.href = url;
+        },
+        hanldCheckedNewsHref(){// 选择新品选项跳转链接(PC专用)
+            var newFlag = this.isNewsChecked ? 0 : 1;
+            var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn='+this.hrefBrandId+ '&pro=' + this.params.promotionFlag+'&newg='+newFlag;
+            window.location.href = url;
+        },
+        showIsProductScreen:function(){//
+            this.isProductScreen = true;
+        },
+        handleConfirmScreen:function(){// 确定筛选项
+            if (GLOBAL_USER_ID && GLOBAL_USER_ID>0) {
+                this.params.pageNum = 1;
+                this.listData = [];
+                this.getproductList();
+                this.isProductScreen = false;
+            }else{
+                var url =  '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+this.params.sortField+'-'+this.params.sortType+'.html?bpn='+this.params.brandIds+ '&pro=' + this.params.promotionFlag+'&newg='+this.params.newFlag;
+                console.log('url============>',url)
+                window.location.href = url;
+            }
+        },
+        handleCancelScreen(){ // 取消筛选
+            this.isProductScreen = false;
+        }
+    },
+    created:function () {
+        var _self = this;
+        var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+        }
+        var paramsArr = window.location.pathname.split(".")[0].split("-");
+        this.typeSort =  paramsArr.length>=2 ? paramsArr[1]*1 : 0;
+        this.bigTypeId = paramsArr.length>=3 ? paramsArr[2]*1 : 0;
+        this.smallTypeId = paramsArr.length>=4 ? paramsArr[3]*1 : 0;
+        this.tinyTypeId = paramsArr.length>=5 ? paramsArr[4]*1 : 0;
+        this.params.pageNum = paramsArr.length>=6 ? paramsArr[5]*1 : 1;
+        this.params.sortField= paramsArr.length>=8 ? paramsArr[7] : "";
+        this.params.sortType = paramsArr.length>=9 ? paramsArr[8]*1 : 1;
+        this.hrefBrandId = getUrlParam("bpn") ? getUrlParam("bpn") : null; //bpn 品牌链接参数
+        this.params.promotionFlag = getUrlParam("pro") ? getUrlParam("pro")*1 : 0; // pro 促销商品链接参数
+        this.params.newFlag = getUrlParam("newg") ? getUrlParam("newg")*1 : 0; // newg 新品链接参数
+        if(this.params.promotionFlag == 1){
+            this.isActiviChecked = true;
+        }else{
+            this.isActiviChecked = false;
+        }
+        if(this.params.newFlag == 1){
+            this.isNewsChecked = true;
+        }else{
+            this.isNewsChecked = false;
+        }
+    },
+    mounted:function () {
+        var _self = this;
+        this.listRecord = $('#productCount').val() ? $('#productCount').val()*1 : 0;
+        if (this.bigTypeId && this.smallTypeId && this.tinyTypeId) {
+            this.params.id= this.brandParam.id = this.tinyTypeId;
+            this.params.idType = this.brandParam.idType = 3;
+        } else if (this.bigTypeId && this.smallTypeId) {
+            this.params.id= this.brandParam.id = this.smallTypeId;
+            this.params.idType = this.brandParam.idType = 2;
+        } else {
+            this.params.id= this.brandParam.id = this.bigTypeId;
+            this.params.idType = this.brandParam.idType = 1;
+        }
+        if (GLOBAL_USER_ID && GLOBAL_USER_ID>0) {
+            _self.getproductList();
+        } else {
+            _self.listLoading = false;
+            _self.$nextTick(function(){
+                // 图片懒加载
+                $("img[data-original]").lazyload();
+            });
+        }
+        //设置数据统计
+        this.$nextTick(function(){
+            _self.cmSysParams.pageType = 10;//设置数据统计
+            _self.cmSysParams.pageLabel = $('.crumbs-nav-item.on').eq(-1).text();//设置数据统计
+        })
+        // 获取对应品牌列表
+        this.getCommoditySearchQUeryBrand();
+        // 设置选中的品牌
+        setTimeout(()=>{
+            if(this.hrefBrandId){
+                const brandIdsArray = this.hrefBrandId.split(',')
+                this.params.brandIds = this.hrefBrandId +',';
+                this.isChoiceBrandText = true
+                const names = brandIdsArray.map(function (item) {
+                    const find = _self.defaultBrandLists.find(el => el.id === item*1)
+                    return find && find.name
+                })
+                this.choiceBrandText = names.join('，').slice(0,15)
+            }
+        },500)
+        if(!isPC){
+            $('footer').addClass("noneImportant");
+            //移动端上垃加载更多
+            $(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.pageSize)?Math.ceil(_self.listRecord / _self.params.pageSize):1;
+                    var next = _self.params.pageNum+1;
+                    if(next <= totalPage){
+                        if (_self.requestFlag){
+                            _self.params.pageNum = next;
+                                // 获取列表数据
+                             _self.getproductList();
+                        }
+                        _self.requestFlag = false;
+                    }else{
+                        //到底了
+                        _self.noMore = true;
+                        $('footer').removeClass("noneImportant");
+                    }
+                }
+            });
+        }
+    }
+
+})

src/main/resources/static/js/supplier/list.js

@@ -1,136 +1,137 @@
-var supplierList = new Vue({
-    el: "#supplierList",
-    mixins: [cmSysVitaMixins],
-    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);
-            console.log(total)
-            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;
-            SupplierApi.GetSearchShopList({
-                keyword: this.params.keyword,
-                pageSize: this.params.size,
-                pageNum: this.params.num
-            },function (res) {
-                if (res.code === 0 && res.data) {
-                    var result = JSON.parse(res.data);
-                    console.log(result);
-                    _self.listRecord = result.total;
-                    var resultData = result.items;
-                    if(isPC){
-                        _self.listData = resultData;
-                    }else{
-                        _self.listData = _self.listData.concat(resultData);
-                    }
-                    setTimeout(function(){
-                        // 图片懒加载
-                        $("img[data-original]").lazyload();
-                    },500);
-                    _self.listLoading = false;
-                    _self.requestFlag = true;
-                }else {
-                    CAIMEI.Alert(res.msg, '确定');
-                }
-            });
-        },
-        hanldHrefLink:function (shop) {
-            if(shop.shopType == 2){
-                return;
-            }
-            window.open('/supplier-'+shop.shopId+'.html');
-        }
-
-    },
-    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.cmSysParams.pageType = 9;
-        this.cmSysParams.pageLabel = this.handleShopKey = this.params.keyword;
-        // 搜索框赋值
-        $('#topSearch').find('[data-select]').attr("data-select", 1).text("供应商");
-        $('#topSearch').find('.jqSelect').find('select').val(1);
-        $('#topSearch').find('.keyword').val(this.params.keyword);
-        // 获取列表数据
-        this.getListByKeyword();
-    },
-    mounted: function () {
-        var _self = this;
-        if(!isPC){
-            $('footer').addClass("noneImportant");
-            //移动端上垃加载更多
-            $(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){
-                        if (_self.requestFlag){
-                            _self.params.num = next;
-                            // 获取列表数据
-                            _self.getListByKeyword();
-                        }
-                        _self.requestFlag = false;
-                    }else{
-                        //到底了
-                        _self.noMore = true;
-                        $('footer').removeClass("noneImportant");
-                    }
-                }
-            });
-        }
-    }
-});
+var supplierList = new Vue({
+    el: "#supplierList",
+    mixins: [cmSysVitaMixins],
+    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);
+            console.log(total)
+            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;
+            SupplierApi.GetSearchShopList({
+                keyword: this.params.keyword,
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            },function (res) {
+                if (res.code === 0 && res.data) {
+                    var result = JSON.parse(res.data);
+                    console.log(result);
+                    _self.listRecord = result.total;
+                    var resultData = result.items;
+                    if(isPC){
+                        _self.listData = resultData;
+                    }else{
+                        _self.listData = _self.listData.concat(resultData);
+                    }
+                    setTimeout(function(){
+                        // 图片懒加载
+                        $("img[data-original]").lazyload();
+                    },500);
+                    _self.listLoading = false;
+                    _self.requestFlag = true;
+                }else {
+                    _self.listLoading = false;
+                    _self.requestFlag = true;
+                }
+            });
+        },
+        hanldHrefLink:function (shop) {
+            if(shop.shopType == 2){
+                return;
+            }
+            window.open('/supplier-'+shop.shopId+'.html');
+        }
+
+    },
+    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.cmSysParams.pageType = 9;
+        this.cmSysParams.pageLabel = this.handleShopKey = this.params.keyword;
+        // 搜索框赋值
+        $('#topSearch').find('[data-select]').attr("data-select", 1).text("供应商");
+        $('#topSearch').find('.jqSelect').find('select').val(1);
+        $('#topSearch').find('.keyword').val(this.params.keyword);
+        // 获取列表数据
+        this.getListByKeyword();
+    },
+    mounted: function () {
+        var _self = this;
+        if(!isPC){
+            $('footer').addClass("noneImportant");
+            //移动端上垃加载更多
+            $(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){
+                        if (_self.requestFlag){
+                            _self.params.num = next;
+                            // 获取列表数据
+                            _self.getListByKeyword();
+                        }
+                        _self.requestFlag = false;
+                    }else{
+                        //到底了
+                        _self.noMore = true;
+                        $('footer').removeClass("noneImportant");
+                    }
+                }
+            });
+        }
+    }
+});

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

@@ -106,9 +106,6 @@
                 </div>
             </div>
         </div>
-        <div class="item">
-            <span class="toTop icon mIcon">TOP</span>
-        </div>
         <div class="item">
             <span class="Iphone icon mIcon">手机端</span>
             <div class="qrCode_cx">
@@ -122,5 +119,8 @@
                 </div>
             </div>
         </div>
+        <div class="item">
+            <span class="toTop icon mIcon">TOP</span>
+        </div>
     </div>
 </footer>

src/main/resources/templates/index.html

@@ -653,7 +653,6 @@
     <div id="sideNav" v-if="isPC">
         <div class="item">
             <a class="item-sideNav" href="javascript:void(0);" v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value"></a>
-            <a class="item-sideNav" href="javascript:void(0);"></a>
         </div>
     </div>
     <!--新用户优惠券弹窗-->

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

@@ -16,7 +16,6 @@
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
-
 <!-- 商品详情 -->
 <div id="productDetail" v-cloak>
     <input type="hidden" th:value="${productId}" id="productId">
@@ -24,6 +23,32 @@
     <input type="hidden" th:value="${product?.stock}" id="productStock">
     <input type="hidden" th:value="${product?.visibility}" id="productVisibility">
     <div class="wrap">
+        <div class="productShopBox" v-if="isPC">
+            <a th:href="@{'/supplier-'+ ${product.shopId} +'.html'}" class="shop-item">
+                <div class="shopBox-logo">
+                    <img src="/img/base/placeholder.png" th:data-original="${product.shopLogo}" th:alt="${product.shopTitle}">
+                </div>
+                <div class="shopBox-content">
+                    <div class="shopBox-title">
+                        <span class="shopBox-name" th:text="${product.shopTitle}"></span>
+                        <span class="shopBox-tit">满意度：<i th:each="i:${#numbers.sequence(1,5)}" class="icon heart"></i></span>
+                    </div>
+                    <div class="shopBox-main">
+                        <div class="shopBox-con" th:if="not${#strings.isEmpty(product.shopAddress)}">
+                            <i class="icon adr"></i>
+                            <span th:text="${product.shopAddress}"></span>
+                        </div>
+                        <span class="shopBox-con" th:if="not${#strings.isEmpty(product.businessScope)}" th:text="${product.businessScope}"></span>
+                    </div>
+                </div>
+            </a>
+            <div class="shopBox-btn">
+                <a class="shopBox-btn-a" th:href="@{'/supplier-'+ ${product.shopId} +'.html'}">
+                    <i class="icon shop"></i>
+                    <span>进入店铺</span>
+                </a>
+            </div>
+        </div>
         <div class="productBox clear">
             <div class="imageBox" id="imgShown" th:object="${product}">
                 <div class="cm-product-cover-tag"  v-if="pcActType === 1"></div>
@@ -31,14 +56,11 @@
                 <div v-if="isPC" class="bigImage">
                     <img th:src="${images[0]}">
                     <span class="mask"></span>
-<!--                    <span class="cm-product-cover-tag" v-if="isPC && pcActType === 1">云上美博会</span>-->
                 </div>
                 <div id="swiperImage" class="smallImage swiper-container">
                     <ul class="swiper-wrapper clear">
                         <li class="swiper-slide mfc" th:each="img : ${images}">
                             <img th:src="${img}">
-<!--                            <span class="cm-product-cover-tag" v-if="!isPC && pcActType === 1">云上美博会</span>-->
-<!--                            <span class="cm-product-cover-tag" v-if="!isPC && pcActType === 1"></span>-->
                         </li>
                     </ul>
                     <div class="swiper-pagination mfc"></div>
@@ -75,7 +97,7 @@
                         <!--登录-->
                         <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                             <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
-                            <em v-if="priceObj.priceFlag==1" v-text="'￥价格未公开'"></em>
+                            <em v-if="priceObj.priceFlag==1" class="red" v-text="'￥价格未公开'"></em>
                             <!--仅会员可见 -->
                             <em v-else-if="priceObj.priceFlag==2 && GLOBAL_USER_IDENTITY == 4 && GLOBAL_VIP_FLAG!=1" class="red" v-text="'￥会员可见'"></em>
                             <!--仅医美机构可见 -->
@@ -269,15 +291,13 @@
                     <p class="none-text">此商品已{{disabledText}},请浏览以下推荐商品~</p>
                     <p class="none-text">咨询类似商品，请联系客服!</p>
                 </div>
-                <div v-if="!isPC" class="wechatH5 btnBox"><img src="/img/base/wechat.h5.png" style="padding: 2.7vw 0">
-                </div>
                 <template v-if="!isHideButton">
                     <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                        <div class="btnBox" v-if="priceObj.priceFlag==2 && priceObj.userIdentity==4 && GLOBAL_VIP_FLAG !== 1">
+                        <div class="btnBox" v-if="priceObj.priceFlag===2 && GLOBAL_USER_IDENTITY===4 && GLOBAL_VIP_FLAG !== 1">
                             <a class="upgrade" href="/user/setting/upgrade.html"
                                onclick="_czc.push(['_trackEvent','商品详情','点击','升级查看价格','','Um_Event_ProductUpgrade'])">升级会员查看价格</a>
                         </div>
-                        <div class="btnBox"
+                        <div class="btnBox clear"
                              v-else-if="(priceObj.priceFlag==0 && priceObj.userIdentity!=3) ||
                                     (priceObj.priceFlag==2 && priceObj.userIdentity==2) ||
                                     (priceObj.priceFlag==2 && GLOBAL_VIP_FLAG === 1) ||
@@ -296,10 +316,11 @@
                         </div>
                     </template>
                 </template>
+                <div v-if="!isPC" class="wechatH5 btnBox"><img src="/img/base/wechat.h5.png" style="padding: 2.7vw 0"></div>
             </div>
         </div>
         <!--配套商品区域-->
-        <div class="wrap" v-if="!isNoneDisabled && isShowSupportingList && defaultSupportingList.length>0">
+        <template v-if="!isNoneDisabled && isShowSupportingList && defaultSupportingList.length>0">
             <div class="product-supporting">
                 <!--PC-->
                 <template v-if="isPC">
@@ -327,7 +348,7 @@
                                     </a>
                                 </div>
                                 <div class="tr tr-3">
-                                     <div class="sku-popup" @click="handleShowPopup(pros,index)">
+                                    <div class="sku-popup" @click="handleShowPopup(pros,index)">
                                         <p class="sku-text" v-text="pros.unit"></p>
                                         <div class="sku-icon"><i class="icon"></i></div>
                                     </div>
@@ -401,7 +422,7 @@
                                                     <i class="tips" v-if="sku.stock ===0">缺货</i>
                                                 </span>
                                         </div>
-                                        <div class="sku-button">
+                                        <div class="sku-button" v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                                             <div class="sku-button-center">
                                                 <a class="sku-btn cancel" href="javascript:void(0);" @click="handleSkuCancel(pros)">取消</a>
                                                 <a class="sku-btn confirm" :class="isbtnDisable ? 'disable' : ''" href="javascript:void(0);" @click="handleSkuConfirm(pros)">确定</a>
@@ -530,63 +551,14 @@
                     </div>
                 </template>
             </div>
-        </div>
-        <!--相关推荐区域-->
-        <div v-if="!GLOBAL_USER_ID" class="recommendBox" th:if="${lists.size()>0}">
-            <div class="hd">相关推荐</div>
-            <div id="productRecommend" class="swiper-container">
-                <ul class="swiper-wrapper" v-cloak>
-                    <li class="swiper-slide mfc" th:each="p : ${lists}">
-                        <div class="item">
-                            <a class="image" th:href="'/product-'+${p.id}+'.html'" target="_blank">
-                                <img th:src="${p.image}" th:alt="${p.name}"
-                                     onerror="javascript:this.src='/img/base/placeholder.png';">
-                                <span th:html="${p.name}"></span>
-                            </a>
-                        </div>
-                    </li>
-                    <!--<li class="swiper-slide  defaulImg" v-for="(item,index) in recommendIndex">
-                       <div class="item">
-                            <a href="javascript:0" class="image">
-                                <img src="/img/base/placeholder.png" alt="">
-                            </a>
-                     </div>
-                    </li>-->
-                </ul>
-                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
-            </div>
-        </div>
-        <div class="recommendBox" v-if="GLOBAL_USER_ID && recommends.length>0">
-            <div class="hd">相关推荐</div>
-            <div id="productRecommend" class="swiper-container">
-                <ul class="swiper-wrapper" v-cloak>
-                    <li class="swiper-slide mfc" v-for="p in recommends">
-                        <div class="item">
-                            <a class="image" :href="'/product-'+p.productId+'.html'" target="_blank">
-                                <img :src="p.image" :alt="p.name"
-                                     onerror="javascript:this.src='/img/base/placeholder.png';">
-                                <span v-html="p.name"></span>
-                            </a>
-                        </div>
-                    </li>
-                    <!--<li class="swiper-slide  defaulImg" v-for="(item,index) in recommendIndex">
-                       <div class="item">
-                            <a href="javascript:0" class="image">
-                                <img src="/img/base/placeholder.png" alt="">
-                            </a>
-                     </div>
-                    </li>-->
-                </ul>
-                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
-            </div>
-        </div>
+        </template>
     </div>
     <div class="wrap clear">
         <div v-if="!isPC" class="mShopBox">
             <a th:href="@{'/supplier-'+${product.shopId}+'.html'}">
                 <span class="name"><em th:text="${product.shopTitle}"></em><i th:if="not${#strings.isEmpty(product.license)}" class="icon mIcon shop"></i></span>
-                <span>经营范围：<em th:text="${product.businessScope}"></em></span>
-                <span>所在地区：<em th:text="${product.shopAddress}"></em></span>
+                <span th:if="not${#strings.isEmpty(product.businessScope)}">经营范围：<em th:text="${product.businessScope}"></em></span>
+                <span th:if="not${#strings.isEmpty(product.shopAddress)}">所在地区：<em th:text="${product.shopAddress}"></em></span>
                 <span>满意度：<em><i th:each="i:${#numbers.sequence(1,5)}" class="mIcon heart"></i></em></span>
             </a>
         </div>
@@ -603,7 +575,6 @@
                 <span :class="tabsIndex == 3 ? 'on' : ''" v-if="isTrainingMethod" @click="detailsClicktab(3)">培训方案</span>
                 <span v-if="archiveId !== 0 && GLOBAL_USER_IDENTITY !== 3" :class="tabsIndex == 4 ? 'on' : ''" @click="detailsClicktab(4)">相关资料</span>
                 <span :class="tabsIndex == 5 ? 'on' : ''" v-if="isQualificationImg" @click="detailsClicktab(5)">商品资质</span>
-                <!--<span>评价</span>-->
             </div>
             <div class="tabCon">
                 <div class="item" v-if="tabsIndex == 0">
@@ -722,7 +693,6 @@
                                         <div class="cm-row clear">
                                             <span class="cm-time">{{ item.addTime | formatTime }}</span>
                                             <span class="cm-view" @click="handlePreviewOffice(item)">预览文件</span>
-<!--                                            <span class="cm-view" v-else  @click="fileContentPreview(item)">预览文件</span>-->
                                         </div>
                                     </div>
                                 </div>
@@ -766,44 +736,6 @@
 
             </div>
         </div>
-        <div v-if="isPC" class="rgt">
-            <div class="shopBox">
-                <div class="hd">供应商信息</div>
-                <div class="bd">
-                    <a href="javascript:void(0);">
-                        <div class="name"><span th:text="${product.shopTitle}"></span><i
-                                th:if="not${#strings.isEmpty(product.license)}" class="icon shop"></i></div>
-                    </a>
-                    <template v-if="!isShowCaimeiShop">
-                        <template th:if="not${#strings.isEmpty(product.businessScope)}">
-                            <div class="tit">经营范围：</div>
-                            <div class="con" th:text="${product.businessScope}"></div>
-                        </template>
-                        <template th:if="not${#strings.isEmpty(product.shopAddress)}">
-                            <div class="tit">所在地区：</div>
-                            <div class="con" th:text="${product.shopAddress}"></div>
-                        </template>
-                        <div class="tit">满意度：<i th:each="i:${#numbers.sequence(1,5)}" class="icon heart"></i></div>
-                        <a th:href="@{'/supplier-'+ ${product.shopId} +'.html'}" class="btn"
-                           onclick="_czc.push(['_trackEvent','商品详情','点击','查看主页','','Um_Event_ProductShopHome'])">查看主页</a>
-                    </template>
-                </div>
-            </div>
-            <div class="contact section">
-                <div class="hd">联系方式</div>
-                <div class="bd">
-                    <div>采美客服（转接供应商）</div>
-                    <div>电话：</div>
-                    <div>0755-22907771</div>
-                    <div>153-3885-1365</div>
-                </div>
-            </div>
-            <!-- 特殊商品退货须知 -->
-            <div class="return-instructions section" v-if="returnGoodsStutas">
-                <div class="hd">特殊商品退货须知</div>
-                <div class="bd" v-html="helpContent"></div>
-            </div>
-        </div>
         <!--优惠券弹窗-->
         <template v-if="GLOBAL_USER_ID>0">
             <div class="coupon-popup" v-show="isShowPopup" :class="isShowPopup ? 'show' : 'hide'">
@@ -885,6 +817,50 @@
             </div>
         </template>
     </div>
+    <div class="wrap clear">
+        <!-- 特殊商品退货须知"-->
+        <div class="return-instructions" v-if="returnGoodsStutas">
+            <div class="hd">特殊商品退货须知</div>
+            <div class="bd" v-html="helpContent"></div>
+        </div>
+    </div>
+    <div class="wrap clear">
+        <!--相关推荐区域-->
+        <div v-if="!GLOBAL_USER_ID" class="recommendBox" th:if="${lists.size()>0}">
+            <div class="hd">相关推荐</div>
+            <div id="productRecommend" class="swiper-container">
+                <ul class="swiper-wrapper" v-cloak>
+                    <li class="swiper-slide mfc" th:each="p : ${lists}">
+                        <div class="item">
+                            <a class="image" th:href="'/product-'+${p.id}+'.html'" target="_blank">
+                                <img th:src="${p.image}" th:alt="${p.name}"
+                                     onerror="javascript:this.src='/img/base/placeholder.png';">
+                                <span th:html="${p.name}"></span>
+                            </a>
+                        </div>
+                    </li>
+                </ul>
+                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+            </div>
+        </div>
+        <div class="recommendBox" v-if="GLOBAL_USER_ID && recommends.length>0">
+            <div class="hd">相关推荐</div>
+            <div id="productRecommend" class="swiper-container">
+                <ul class="swiper-wrapper" v-cloak>
+                    <li class="swiper-slide mfc" v-for="p in recommends">
+                        <div class="item">
+                            <a class="image" :href="'/product-'+p.productId+'.html'" target="_blank">
+                                <img :src="p.image" :alt="p.name"
+                                     onerror="javascript:this.src='/img/base/placeholder.png';">
+                                <span v-html="p.name"></span>
+                            </a>
+                        </div>
+                    </li>
+                </ul>
+                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+            </div>
+        </div>
+    </div>
     <!--Ross 弹窗-->
     <template v-if="showRossHtml">
         <template th:replace="components/ross-advert"></template>

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

@@ -1,293 +1,294 @@
-<!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/product/instruement-list.css(v=${version})}" rel="stylesheet" type="text/css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-<!--页面参数-->
-<input type="hidden" th:value="${productCount}" id="productCount">
-<!-- 商品列表 -->
-<div id="productList" v-cloak>
-    <div class="crumbs-nav" v-if="isPC">
-        <div class="search-text">
-            <div class="crumbs-link"> 筛选条件： </div>
-            <div  class="crumbs-nav-main">
-                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(bigTypeName)}" th:text="${bigTypeName}"></div>
-                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(smallTypeName)}" th:text="${smallTypeName}"></div>
-                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(tinyTypeName)}" th:text="${tinyTypeName}"></div>
-                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(tinyTypeName)}" th:text="${tinyTypeName}"></div>
-            </div>
-        </div>
-        <div class="search-text-brand" v-if="isChoiceBrandText">
-            品牌：
-            <a href="javascript:void(0);">{{ choiceBrandText }}</a>
-            <i class="icon icon-del" @click="handleDeleteBrands"></i>
-        </div>
-    </div>
-     <!--loading-->
-    <div v-if="listLoading" class="loading">
-        <img src="/img/base/loading.gif">
-    </div>
-    <template v-else>
-        <div id="listClassify">
-        <template v-if="isPC">
-            <div class="classification">
-                <div class="class-title">分类</div>
-                <div class="class-nav-main">
-                    <div th:each="bigType : ${bigTypeJson}" th:class="${bigType.bigTypeId == bigTypeId}?'on':''">
-                        <a th:text="${bigType.name}" th:href="'/product/classify-'+ ${typeSort} +'-'+ ${bigType.bigTypeId} +'.html'"></a>
-                    </div>
-                </div>
-            </div>
-            <div class="classification" th:if="not${#lists.isEmpty(smallTypeJson)}">
-                <div class="class-title">二级</div>
-                <div class="class-nav-main">
-                    <div th:each="smallType : ${smallTypeJson}" th:class="${smallType.smallTypeId == smallTypeId}?'on':''">
-                        <a th:text="${smallType.name}" th:href="'/product/classify-'+ ${typeSort} +'-'+ ${bigTypeId} +'-'+ ${smallType.smallTypeId} +'.html'"></a>
-                    </div>
-                </div>
-            </div>
-            <div class="classification" th:if="not${#lists.isEmpty(tinyTypeJson)}">
-                <div class="class-title">三级</div>
-                <div class="class-nav-main">
-                    <div th:each="tinyType : ${tinyTypeJson}" th:class="${tinyType.tinyTypeId == tinyTypeId}?'on':''">
-                        <a th:text="${tinyType.name}" th:href="'/product/classify-'+ ${typeSort} +'-'+ ${bigTypeId} +'-'+ ${smallTypeId} +'-'+ ${tinyType.tinyTypeId} +'.html'"></a>
-                    </div>
-                </div>
-            </div>
-        </template>
-        <!--品牌选择-->
-        <template v-if="isPC">
-            <div class="product-brand clear">
-                <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
-                    <p class="title">品牌</p>
-                </div>
-                <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
-                    <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAllHref" :class="hrefBrandId ? '' : 'checked'"><a href="javascript:void(0)">全部</a></div>
-                    <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"
-                         @click="choiceBrandHref(brand, index)" :class="brand.isChecked ? 'checked' : ''">
-                        <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
-                    </div>
-                </div>
-                <div class="product-brand-oper" v-if="!isShowAllBrandsButton">
-                    <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''"
-                         @click="showMoreItem">{{
-                        isShowAllBrands ? '收起' : '更多' }} <i class="icon mIcon"></i></div>
-                    <div class="product-brand-add" v-if="defaultBrandLists.length>2" @click="showMoreItemCheckedAll">+多选</div>
-                </div>
-                <div class="product-brand-button" v-if="isShowAllBrandsButton">
-                    <div class="brand-button">
-                        <div class="btn confirm" :class="checkedBrandList.length>0 ? '' : 'disabled'" @click="handleConfirm">确定</div>
-                        <div class="btn cancel" @click="handleCancel">取消</div>
-                    </div>
-                </div>
-            </div>
-        </template>
-        <template v-else>
-            <div class="product-brand-fiexd" v-if="isProductScreen">
-                <div class="product-brand clear">
-                    <div class="product-screen">
-                        <div class="sortBox-new" @click="hanldCheckedActivi">
-                            <span>促销商品</span>
-                            <span class="coll-checked" :class="[isActiviChecked ? 'checked': '']"></span>
-                        </div>
-                        <div class="sortBox-new" @click="hanldCheckedNews">
-                            <span>新品</span>
-                            <span class="coll-checked" :class="[isNewsChecked ? 'checked': '']"></span>
-                        </div>
-                    </div>
-                    <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
-                        <p class="title">品牌</p>
-                        <p v-if="!isPC" class="num">已选中<span>{{ checkedBrandLength }}</span>个品牌</p>
-                    </div>
-                    <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
-                        <div class="brand-list" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
-                        <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"
-                             @click="choiceBrand(brand, index)" :class="brand.isChecked ? 'checked' : ''">
-                            <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
-                        </div>
-                    </div>
-                    <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''" @click="showMoreItem">{{
-                        isShowAllBrands ? '收起' : '查看全部' }} <i
-                                class="icon mIcon"></i></div>
-                    <div class="product-screen-btn" @click="handleConfirmScreen">
-                        <div class="sub-button">确定</div>
-                    </div>
-                </div>
-            </div>
-        </template>
-            <div class="sortBox classification">
-                <ul class="mfc class-nav-main">
-                    <li class="class-title" :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
-                        <template>
-                            <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
-                            @click="toSortList('sales',0)"><span>销量</span></li>
-                            <li v-else-if="params.sortField == 'sales' && params.sortType == 0" class="up"
-                            @click="toSortList('sales',1)"><span>销量</span></li>
-                            <li v-else @click="toSortList('sales',1)"><span>销量</span></li>
-                        </template>
-                        <template>
-                             <li v-if="params.sortField == 'favorite' && params.sortType == 1" class="down"
-                            @click="toSortList('favorite',0)"><span>人气</span></li>
-                            <li v-else-if="params.sortField == 'favorite' && params.sortType == 0" class="up"
-                            @click="toSortList('favorite',1)"><span>人气</span></li>
-                            <li v-else @click="toSortList('favorite',1)"><span>人气</span></li>
-                        </template>
-                        <template>
-                             <li v-if="params.sortField == 'price' && params.sortType == 1" class="down"
-                            @click="toSortList('price',0)"><span>价格</span></li>
-                            <li v-else-if="params.sortField == 'price' && params.sortType == 0" class="up"
-                            @click="toSortList('price',1)"><span>价格</span></li>
-                            <li v-else @click="toSortList('price',1)"><span>价格</span></li>
-                        </template>
-                        <template v-if="!isPC">
-                            <li class="screen" @click="showIsProductScreen">
-                                <span>筛选</span>
-                                <i class="mIcon"></i>
-                            </li>
-                        </template>
-                </ul>
-                <div class="sortBox-checked" v-if="isPC">
-                    <div class="sortBox-new" @click="hanldCheckedActiviHref">
-                        <span class="coll-checked" :class="[isActiviChecked ? 'checked': '']"></span>
-                        <span>促销商品</span>
-                    </div>
-                    <div class="sortBox-new" @click="hanldCheckedNewsHref">
-                        <span class="coll-checked" :class="[isNewsChecked ? 'checked': '']"></span>
-                        <span>新品</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!--商品列表-->
-        <div th:if="not${#lists.isEmpty(productListJson)}" class="list-container">
-            <!--未登录游客，后台渲染便于SEO-->
-            <div v-if="!GLOBAL_USER_ID">
-                <ul class="clear mfw">
-                    <li class="productItem" th:each="product : ${productListJson}" th:object="${product}">
-                        <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
-                        <a class="image" th:href="'/product-'+ *{productId} +'.html'">
-                            <img src="/img/base/placeholder.png"  th:attr="data-original=*{image}" th:alt="*{name}">
-                            <p class="name">
-                                <th:block th:if="${product.containsKey('beautyActFlag')}">
-                                    <span th:if="*{beautyActFlag}==1" class="tag">美博会</span>
-                                </th:block>
-                                <th:block th:text="*{name}"></th:block>
-                            </p>
-                            <div class="price">
-                                <div class="price_text_tag "></div>
-                                <div class="price_grade "><span class="bold">￥</span><i th:attr="class=*{'icon mIcon i'+priceGrade}"></i></div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <div v-else>
-                <ul class="clear mfw">
-                    <!--登陆后获取动态数据-->
-                    <li class="productItem" v-for="p in listData">
-                        <div class="page_main_type" v-if="p.productType === 2">医疗器械</div>
-                        <a class="image" :href="'/product-'+p.productId+'.html'">
-                            <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
-                            <p class="name" v-html="addhtml + p.name" v-if="p.beautyActFlag==1"></p>
-                            <p class="name" v-html="p.name" v-else></p>
-                            <div class="price">
-                                <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
-                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                                    <div class="price_text_tag">
-                                        <p class="couponTag"v-if="p.couponsLogo">优惠券</p>
-                                        <template v-if="p.svipProductFlag === 1">
-                                            <div class="svip-tag">
-                                                <div class="svip-icon">SVIP</div>
-                                                <template v-if="showVipPriceTag(p)">
-                                                    <div class="svip-price">
-                                                        <span v-html="p.svipPriceTag"></span>
-                                                    </div>
-                                                </template>
-                                            </div>
-                                        </template>
-                                        <template v-else>
-                                            <p class="listTag" v-if="p.actStatus==1">
-                                                {{p.promotions.name}}
-                                                <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:￥{{p.price | NumFormat}}</span>
-                                            </p>
-                                        </template>
-                                    </div>
-                                    <!--价格未公开-->
-                                    <div class="main_price_unde" v-if="p.priceFlag==1">￥价格未公开</div>
-                                    <!--机构价格-->
-                                    <template v-else-if="GLOBAL_USER_IDENTITY === 2 || (p.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && p.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
-                                        <div class="main_price_show"
-                                            :class="{none: PromotionsFormat(p.promotions) || showVipPriceTag(p)}">
-                                            <span>￥{{ (PromotionsFormat(p.promotions) || showVipPriceTag(p) ? p.originalPrice : p.price ) | NumFormat }}</span>
-                                        </div>
-                                    </template>
-                                    <!--会员可见-->
-                                    <div class="main_price_unde" v-else-if="p.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">￥会员可见</div>
-                                    <!--仅医美机构可见-->
-                                    <div class="main_price_unde" v-else-if="p.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">￥仅医美机构可见</div>
-                                    <!--其他-->
-                                    <div class="price_grade" v-else><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
-                                </template>
-                                <!--
-                                <template v-else>
-                                     <div class="price_text_tag">
-                                         <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
-                                         <template v-if="p.svipProductFlag === 1">
-                                             <div class="svip-tag">
-                                                 <div class="svip-icon">SVIP</div>
-                                             </div>
-                                         </template>
-                                         <template v-else>
-                                             <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
-                                         </template>
-                                      </div>
-                                      <div class="price_grade "><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
-                                </template>
-                                -->
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-         <!--数据为空 -->
-        <div th:if="${#lists.isEmpty(productListJson)}" class="empty">
-            <img src="/img/common/list-empty.png">
-            <div class="msg">
-                <p>此分类下暂无商品</p>
-            </div>
-        </div>
-    </template>
-    <!--分页-->
-    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
-    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
-        <th:block th:if="not${#lists.isEmpty(pageBtnList)}">
-            <th:block th:each="page : ${pageBtnList}">
-                <a th:if="${page.btn} == -1" class="prev" th:href="${page.path}"></a>
-                <span th:if="${page.btn} == 0">···</span>
-                <a th:if="${page.btn} > 0" th:class="${page.btn == pageBtnNum} ? 'on' : ''" th:href="${page.path}" th:text="${page.btn}"></a>
-                <a th:if="${page.btn} == -2" class="next" th:href="${page.path}"></a>
-            </th:block>
-        </th:block>
-        <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/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/product/produce-list.js(v=${version})}"></script>
-</body>
-</html>
+<!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/product/instruement-list.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!--页面参数-->
+<input type="hidden" th:value="${productCount}" id="productCount">
+<!-- 商品列表 -->
+<div id="productList" v-cloak>
+    <div class="crumbs-nav" v-if="isPC">
+        <div class="search-text">
+            <div class="crumbs-link"> 筛选条件： </div>
+            <div  class="crumbs-nav-main">
+                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(bigTypeName)}" th:text="${bigTypeName}"></div>
+                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(smallTypeName)}" th:text="${smallTypeName}"></div>
+                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(tinyTypeName)}" th:text="${tinyTypeName}"></div>
+                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(tinyTypeName)}" th:text="${tinyTypeName}"></div>
+            </div>
+        </div>
+        <div class="search-text-brand" v-if="isChoiceBrandText">
+            品牌：
+            <a href="javascript:void(0);">{{ choiceBrandText }}</a>
+            <i class="icon icon-del" @click="handleDeleteBrands"></i>
+        </div>
+    </div>
+     <!--loading-->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <template v-else>
+        <div id="listClassify">
+        <template v-if="isPC">
+            <div class="classification">
+                <div class="class-title">分类</div>
+                <div class="class-nav-main">
+                    <div th:each="bigType : ${bigTypeJson}" th:class="${bigType.bigTypeId == bigTypeId}?'on':''">
+                        <a th:text="${bigType.name}" th:href="'/product/classify-'+ ${typeSort} +'-'+ ${bigType.bigTypeId} +'.html'"></a>
+                    </div>
+                </div>
+            </div>
+            <div class="classification" th:if="not${#lists.isEmpty(smallTypeJson)}">
+                <div class="class-title">二级</div>
+                <div class="class-nav-main">
+                    <div th:each="smallType : ${smallTypeJson}" th:class="${smallType.smallTypeId == smallTypeId}?'on':''">
+                        <a th:text="${smallType.name}" th:href="'/product/classify-'+ ${typeSort} +'-'+ ${bigTypeId} +'-'+ ${smallType.smallTypeId} +'.html'"></a>
+                    </div>
+                </div>
+            </div>
+            <div class="classification" th:if="not${#lists.isEmpty(tinyTypeJson)}">
+                <div class="class-title">三级</div>
+                <div class="class-nav-main">
+                    <div th:each="tinyType : ${tinyTypeJson}" th:class="${tinyType.tinyTypeId == tinyTypeId}?'on':''">
+                        <a th:text="${tinyType.name}" th:href="'/product/classify-'+ ${typeSort} +'-'+ ${bigTypeId} +'-'+ ${smallTypeId} +'-'+ ${tinyType.tinyTypeId} +'.html'"></a>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <!--品牌选择-->
+        <template v-if="isPC">
+            <div class="product-brand clear">
+                <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
+                    <p class="title">品牌</p>
+                </div>
+                <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
+                    <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAllHref" :class="hrefBrandId ? '' : 'checked'"><a href="javascript:void(0)">全部</a></div>
+                    <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"
+                         @click="choiceBrandHref(brand, index)" :class="brand.isChecked ? 'checked' : ''">
+                        <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
+                    </div>
+                </div>
+                <div class="product-brand-oper" v-if="!isShowAllBrandsButton">
+                    <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''"
+                         @click="showMoreItem">{{
+                        isShowAllBrands ? '收起' : '更多' }} <i class="icon mIcon"></i></div>
+                    <div class="product-brand-add" v-if="defaultBrandLists.length>2" @click="showMoreItemCheckedAll">+多选</div>
+                </div>
+                <div class="product-brand-button" v-if="isShowAllBrandsButton">
+                    <div class="brand-button">
+                        <div class="btn confirm" :class="checkedBrandList.length>0 ? '' : 'disabled'" @click="handleConfirm">确定</div>
+                        <div class="btn cancel" @click="handleCancel">取消</div>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <div class="product-brand-fiexd" v-if="isProductScreen">
+                <div class="product-brand clear">
+                    <div class="product-screen">
+                        <div class="sortBox-new" @click="hanldCheckedActivi">
+                            <span>促销商品</span>
+                            <span class="coll-checked" :class="[isActiviChecked ? 'checked': '']"></span>
+                        </div>
+                        <div class="sortBox-new" @click="hanldCheckedNews">
+                            <span>新品</span>
+                            <span class="coll-checked" :class="[isNewsChecked ? 'checked': '']"></span>
+                        </div>
+                    </div>
+                    <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
+                        <p class="title">品牌</p>
+                        <p v-if="!isPC" class="num">已选中<span>{{ checkedBrandLength }}</span>个品牌</p>
+                    </div>
+                    <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
+                        <div class="brand-list" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
+                        <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"
+                             @click="choiceBrand(brand, index)" :class="brand.isChecked ? 'checked' : ''">
+                            <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
+                        </div>
+                    </div>
+                    <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''" @click="showMoreItem">{{
+                        isShowAllBrands ? '收起' : '查看全部' }} <i
+                                class="icon mIcon"></i></div>
+                    <div class="product-screen-btn">
+                        <div class="sub-button cancel" @click="handleCancelScreen">取消</div>
+                        <div class="sub-button" @click="handleConfirmScreen">确定</div>
+                    </div>
+                </div>
+            </div>
+        </template>
+            <div class="sortBox classification">
+                <ul class="mfc class-nav-main">
+                    <li class="class-title" :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
+                        <template>
+                            <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
+                            @click="toSortList('sales',0)"><span>销量</span></li>
+                            <li v-else-if="params.sortField == 'sales' && params.sortType == 0" class="up"
+                            @click="toSortList('sales',1)"><span>销量</span></li>
+                            <li v-else @click="toSortList('sales',1)"><span>销量</span></li>
+                        </template>
+                        <template>
+                             <li v-if="params.sortField == 'favorite' && params.sortType == 1" class="down"
+                            @click="toSortList('favorite',0)"><span>人气</span></li>
+                            <li v-else-if="params.sortField == 'favorite' && params.sortType == 0" class="up"
+                            @click="toSortList('favorite',1)"><span>人气</span></li>
+                            <li v-else @click="toSortList('favorite',1)"><span>人气</span></li>
+                        </template>
+                        <template>
+                             <li v-if="params.sortField == 'price' && params.sortType == 1" class="down"
+                            @click="toSortList('price',0)"><span>价格</span></li>
+                            <li v-else-if="params.sortField == 'price' && params.sortType == 0" class="up"
+                            @click="toSortList('price',1)"><span>价格</span></li>
+                            <li v-else @click="toSortList('price',1)"><span>价格</span></li>
+                        </template>
+                        <template v-if="!isPC">
+                            <li class="screen" @click="showIsProductScreen">
+                                <span>筛选</span>
+                                <i class="mIcon"></i>
+                            </li>
+                        </template>
+                </ul>
+                <div class="sortBox-checked" v-if="isPC">
+                    <div class="sortBox-new" @click="hanldCheckedActiviHref">
+                        <span class="coll-checked" :class="[isActiviChecked ? 'checked': '']"></span>
+                        <span>促销商品</span>
+                    </div>
+                    <div class="sortBox-new" @click="hanldCheckedNewsHref">
+                        <span class="coll-checked" :class="[isNewsChecked ? 'checked': '']"></span>
+                        <span>新品</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--商品列表-->
+        <div th:if="not${#lists.isEmpty(productListJson)}" class="list-container">
+            <!--未登录游客，后台渲染便于SEO-->
+            <div v-if="!GLOBAL_USER_ID">
+                <ul class="clear mfw">
+                    <li class="productItem" th:each="product : ${productListJson}" th:object="${product}">
+                        <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
+                        <a class="image" th:href="'/product-'+ *{productId} +'.html'">
+                            <img src="/img/base/placeholder.png"  th:attr="data-original=*{image}" th:alt="*{name}">
+                            <p class="name">
+                                <th:block th:if="${product.containsKey('beautyActFlag')}">
+                                    <span th:if="*{beautyActFlag}==1" class="tag">美博会</span>
+                                </th:block>
+                                <th:block th:text="*{name}"></th:block>
+                            </p>
+                            <div class="price">
+                                <div class="price_text_tag "></div>
+                                <div class="price_grade "><span class="bold">￥</span><i th:attr="class=*{'icon mIcon i'+priceGrade}"></i></div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div v-else>
+                <ul class="clear mfw">
+                    <!--登陆后获取动态数据-->
+                    <li class="productItem" v-for="p in listData">
+                        <div class="page_main_type" v-if="p.productType === 2">医疗器械</div>
+                        <a class="image" :href="'/product-'+p.productId+'.html'">
+                            <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                            <p class="name" v-html="addhtml + p.name" v-if="p.beautyActFlag==1"></p>
+                            <p class="name" v-html="p.name" v-else></p>
+                            <div class="price">
+                                <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                    <div class="price_text_tag">
+                                        <p class="couponTag"v-if="p.couponsLogo">优惠券</p>
+                                        <template v-if="p.svipProductFlag === 1">
+                                            <div class="svip-tag">
+                                                <div class="svip-icon">SVIP</div>
+                                                <template v-if="showVipPriceTag(p)">
+                                                    <div class="svip-price">
+                                                        <span v-html="p.svipPriceTag"></span>
+                                                    </div>
+                                                </template>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <p class="listTag" v-if="p.actStatus==1">
+                                                {{p.promotions.name}}
+                                                <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:￥{{p.price | NumFormat}}</span>
+                                            </p>
+                                        </template>
+                                    </div>
+                                    <!--价格未公开-->
+                                    <div class="main_price_unde" v-if="p.priceFlag==1">￥价格未公开</div>
+                                    <!--机构价格-->
+                                    <template v-else-if="GLOBAL_USER_IDENTITY === 2 || (p.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && p.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                                        <div class="main_price_show"
+                                            :class="{none: PromotionsFormat(p.promotions) || showVipPriceTag(p)}">
+                                            <span>￥{{ (PromotionsFormat(p.promotions) || showVipPriceTag(p) ? p.originalPrice : p.price ) | NumFormat }}</span>
+                                        </div>
+                                    </template>
+                                    <!--会员可见-->
+                                    <div class="main_price_unde" v-else-if="p.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">￥会员可见</div>
+                                    <!--仅医美机构可见-->
+                                    <div class="main_price_unde" v-else-if="p.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">￥仅医美机构可见</div>
+                                    <!--其他-->
+                                    <div class="price_grade" v-else><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
+                                </template>
+                                <!--
+                                <template v-else>
+                                     <div class="price_text_tag">
+                                         <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                                         <template v-if="p.svipProductFlag === 1">
+                                             <div class="svip-tag">
+                                                 <div class="svip-icon">SVIP</div>
+                                             </div>
+                                         </template>
+                                         <template v-else>
+                                             <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                         </template>
+                                      </div>
+                                      <div class="price_grade "><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
+                                </template>
+                                -->
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+         <!--数据为空 -->
+        <div th:if="${#lists.isEmpty(productListJson)}" class="empty">
+            <img src="/img/common/list-empty.png">
+            <div class="msg">
+                <p>此分类下暂无商品</p>
+            </div>
+        </div>
+    </template>
+    <!--分页-->
+    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+        <th:block th:if="not${#lists.isEmpty(pageBtnList)}">
+            <th:block th:each="page : ${pageBtnList}">
+                <a th:if="${page.btn} == -1" class="prev" th:href="${page.path}"></a>
+                <span th:if="${page.btn} == 0">···</span>
+                <a th:if="${page.btn} > 0" th:class="${page.btn == pageBtnNum} ? 'on' : ''" th:href="${page.path}" th:text="${page.btn}"></a>
+                <a th:if="${page.btn} == -2" class="next" th:href="${page.path}"></a>
+            </th:block>
+        </th:block>
+        <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/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/produce-list.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -16,7 +16,7 @@
         <th:block th:if="${typeFloorJson.get('contentLabel')}!=null" th:object="${typeFloorJson}">
             <input type="hidden" th:value="${typeFloorJson.get('contentLabel')}" id="contentLabel">
         </th:block>
-        <div class="instrue-right-content">
+        <div class="instrue-right-content clear">
             <div class="instrue-right" th:if="${typeFloorJson.get('hotSearchList')}!=null and ${typeFloorJson.get('hotSearchList').size}>0">
                 <div class="wrap_tittle"> 大家都在搜<span class="line"></span></div>
                 <div v-if="isPC" class="hot-search">

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

@@ -84,8 +84,9 @@
                     <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''" @click="showMoreItem">{{
                         isShowAllBrands ? '收起' : '查看全部' }} <i
                                 class="icon mIcon"></i></div>
-                    <div class="product-screen-btn" @click="handleConfirmScreen">
-                        <div class="sub-button">确定</div>
+                    <div class="product-screen-btn">
+                        <div class="sub-button cancel" @click="handleCancelScreen">取消</div>
+                        <div class="sub-button" @click="handleConfirmScreen">确定</div>
                     </div>
                 </div>
             </div>

src/main/resources/templates/product/product-supporting.html

@@ -1,222 +1,222 @@
-<!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/product/product-supporting.h5.css(v=${version})}" rel="stylesheet" type="text/css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-
-<!-- 购物车列表 -->
-<div id="supporting">
-    <div v-if="listLoading" class="loading">
-        <img src="/img/base/loading.gif">
-    </div>
-    <!--列表-->
-    <template v-else>
-        <div class="supporting-title">
-            <div class="title">配套商品</div>
-            <div class="coll-span all" @click="isCheckedAll">
-                <span class="coll-checked" :class="[isAllChecked ? 'checked': '']"></span>
-                <span>全选</span>
-            </div>
-        </div>
-        <div class="supporting-content">
-            <div class="supporting-list" v-for="(pros,index) in supportingList" :key="index">
-                <div class="list-checked"  @click="checkedSoperv(pros)">
-                    <span v-if="disabledChecked(pros)" class="coll-checked none"></span>
-                    <span v-else class="coll-checked" :class="[pros.isChecked ? 'checked': '']"></span>
-                </div>
-                <div class="list-image">
-                    <a :href="'/product-'+pros.productId+'.html'">
-                        <img class="smalltype" src="/img/base/icon-bigtype@2x.png" alt="" v-if="pros.productType == 2">
-                        <img :src="pros.image" :alt="pros.name">
-                    </a>
-                </div>
-                <div class="list-info">
-                    <div class="list-name"><a :href="'/product-'+pros.productId+'.html'">{{ pros.name }}</a></div>
-                    <div class="list-unit">
-                        <div class="sku-label">规格：</div>
-                        <div class="sku-popup" @click="handleShowPopup(pros,index)">
-                            <p class="sku-text" v-text="pros.unit"></p>
-                            <div class="sku-icon"><i class="mIcon"></i></div>
-                        </div>
-                        <div class="sku-popup-model" v-if="showSkuPopup"></div>
-                        <div class="sku-popup-viw" v-if="currentIndex === index && showSkuPopup">
-                            <div class="sku-title">
-                                <div class="sku-image"><img :src="handlePros.image" :alt="handlePros.name"></div>
-                                <div class="sku-price">
-                                    <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
-                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                                        <!--0公开价格 1不公开价格 2仅对会员机构公开-->
-                                        <div class="main_price_unde" v-if="handlePros.priceFlag==1">￥价格未公开</div>
-                                        <!--机构价仅会员可见 && 用户是普通机构-->
-                                        <div class="main_price_unde" v-else-if="handlePros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
-                                            ￥会员可见
-                                        </div>
-                                        <!--机构价仅会员可见 && 用户是普通机构-->
-                                        <div class="main_price_unde" v-else-if="handlePros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
-                                            ￥仅医美机构可见
-                                        </div>
-                                        <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
-                                        <template
-                                                v-else-if="GLOBAL_USER_IDENTITY === 2 || (handlePros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && handlePros.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
-                                            <div class="main_price_show"
-                                                 :class="{none: PromotionsFormat(handlePros.promotions) || (handlePros.svipProductFlag === 1 && showVipPriceTag(handlePros))}">
-                                                ￥{{ (PromotionsFormat(handlePros.promotions) || showVipPriceTag(handlePros) ? handlePros.originalPrice :
-                                                handlePros.price ) | NumFormat }}
-                                            </div>
-                                        </template>
-                                        <!--供应商除自己的商品外，也显示价格等级-->
-                                        <div class="price_grade" v-else><span class="bold">￥</span><i
-                                                :class="'icon mIcon i'+handlePros.priceGrade"></i></div>
-                                        <div class="price_text_tag clear">
-                                            <p class="couponTag" v-if="handlePros.couponsLogo">优惠券</p>
-                                            <template v-if="handlePros.svipProductFlag === 1">
-                                                <div class="svip-tag">
-                                                    <div class="svip-icon">SVIP</div>
-                                                    <template v-if="showVipPriceTag(handlePros)">
-                                                        <div class="svip-price">
-                                                            <span v-html="handlePros.svipPriceTag"></span>
-                                                        </div>
-                                                    </template>
-                                                </div>
-                                            </template>
-                                            <template v-else>
-                                                <p class="listTag" v-if="handlePros.actStatus==1">{{handlePros.promotions.name}}
-                                                    <span v-if="handlePros.priceFlag != 1 && PromotionsFormat(handlePros.promotions)">:￥{{handlePros.price | NumFormat}}</span>
-                                                </p>
-                                            </template>
-                                        </div>
-                                    </template>
-                                    <template v-else>
-                                        <div class="price_grade"><span class="bold">￥</span><i :class="'icon mIcon i'+handlePros.priceGrade"></i></div>
-                                        <div class="price_text_tag">
-                                            <p class="couponTag" v-if="handlePros.couponsLogo">优惠券</p>
-                                            <template v-if="handlePros.svipProductFlag === 1">
-                                                <div class="svip-tag">
-                                                    <div class="svip-icon">SVIP</div>
-                                                </div>
-                                            </template>
-                                            <template v-else>
-                                                <p class="listTag" v-if="handlePros.actStatus==1">{{handlePros.promotions.name}}</p>
-                                            </template>
-                                        </div>
-                                    </template>
-                                </div>
-                            </div>
-                            <div class="sku-h1">规格:</div>
-                            <div class="sku-unit">
-                                <span class="unitTags" @click="handleSupportingChoisSku(pros,sku,index)" v-for="(sku, index) in handlePros.skus" :key="index" :class="skuSupportingIndex === index ? 'active':''">
-                                    {{ sku.unit }}
-                                    <i class="tips" v-if="sku.stock ===0">缺货</i>
-                                </span>
-                            </div>
-                            <div class="sku-button">
-                                <div class="sku-button-center">
-                                    <a class="sku-btn cancel" href="javascript:void(0);" @click="handleSkuCancel(pros)">取消</a>
-                                    <a class="sku-btn confirm" :class="isbtnDisable ? 'disable' : ''" href="javascript:void(0);" @click="handleSkuConfirm(pros)">确定</a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="list-price">
-                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                            <div class="price-box">
-                                <!--0公开价格 1不公开价格 2仅对会员机构公开-->
-                                <div class="main_price_unde" v-if="pros.priceFlag==1">￥价格未公开</div>
-                                <!--机构价仅会员可见 && 用户是普通机构-->
-                                <div class="main_price_unde" v-else-if="pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
-                                    ￥会员可见
-                                </div>
-                                <!--仅医美机构可见-->
-                                <div class="main_price_unde" v-else-if="pros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
-                                    ￥仅医美机构可见
-                                </div>
-                                <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
-                                <template
-                                        v-else-if="GLOBAL_USER_IDENTITY === 2 || (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && pros.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
-                                    <div class="main_price_show"
-                                         :class="{none: PromotionsFormat(pros.promotions) || (pros.svipProductFlag === 1 && showVipPriceTag(pros))}">
-                                        ￥{{ (PromotionsFormat(pros.promotions) || showVipPriceTag(pros) ? pros.originalPrice :
-                                        pros.price ) | NumFormat }}
-                                    </div>
-                                </template>
-                                <!--供应商除自己的商品外，也显示价格等级-->
-                                <div class="price_grade" v-else><span class="bold">￥</span><i :class="'icon mIcon i'+pros.priceGrade"></i></div>
-                            </div>
-                            <div class="price-number" v-if="!disabledChecked(pros)">
-                            <span class="number">
-                                <em class="sub" @click="supportingNumberSub(pros)">-</em>
-                                <input type="number" :value="pros.number" v-model="pros.number" @change="supportingNumberChange(pros)">
-                                <em class="add" @click="supportingNumberAdd(pros)">+</em>
-                            </span>
-                            </div>
-                        </template>
-                        <template v-else>
-                            <div class="price_grade">
-                                <span class="bold">￥</span><i :class="'icon mIcon i'+pros.priceGrade"></i>
-                            </div>
-                        </template>
-                    </div>
-                    <div class="list-tags">
-                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                            <div class="price_text_tag clear">
-                                <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
-                                <template v-if="pros.svipProductFlag === 1">
-                                    <div class="svip-tag">
-                                        <div class="svip-icon">SVIP</div>
-                                        <template v-if="showVipPriceTag(pros)">
-                                            <div class="svip-price">
-                                                <span v-html="pros.svipPriceTag"></span>
-                                            </div>
-                                        </template>
-                                    </div>
-                                </template>
-                                <template v-else>
-                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}
-                                        <span v-if="pros.priceFlag != 1 && PromotionsFormat(pros.promotions)">:￥{{pros.price | NumFormat}}</span>
-                                    </p>
-                                </template>
-                            </div>
-                        </template>
-                        <template v-else>
-                            <div class="price_text_tag">
-                                <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
-                                <template v-if="pros.svipProductFlag === 1">
-                                    <div class="svip-tag">
-                                        <div class="svip-icon">SVIP</div>
-                                    </div>
-                                </template>
-                                <template v-else>
-                                    <p class="listTag" v-if="pros.actStatus==1">{{p.promotions.name}}</p>
-                                </template>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="supporting-submit">
-            <div class="supporting-submit-total">
-                <p>共<span class="ore">{{ totalNumber }}</span>件商品</p>
-                <p>合计<span class="red">￥{{ totalPrice | NumFormat }}元</span></p>
-            </div>
-            <div class="supporting-submit-button">
-                <div class="btn add" @click="handleSupportingSubmit('add')">加入购物车</div>
-                <div class="btn buy" @click="handleSupportingSubmit('buy')">立即购买</div>
-            </div>
-        </div>
-    </template>
-</div>
-<!-- 引入底部 -->
-<template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/product/mixins/supportMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/product/product-supporting.js(v=${version})}"></script>
-</body>
-</html>
+<!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/product/product-supporting.h5.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 购物车列表 -->
+<div id="supporting">
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <!--列表-->
+    <template v-else>
+        <div class="supporting-title">
+            <div class="title">配套商品</div>
+            <div class="coll-span all" @click="isCheckedAll">
+                <span class="coll-checked" :class="[isAllChecked ? 'checked': '']"></span>
+                <span>全选</span>
+            </div>
+        </div>
+        <div class="supporting-content">
+            <div class="supporting-list" v-for="(pros,index) in supportingList" :key="index">
+                <div class="list-checked"  @click="checkedSoperv(pros)">
+                    <span v-if="disabledChecked(pros)" class="coll-checked none"></span>
+                    <span v-else class="coll-checked" :class="[pros.isChecked ? 'checked': '']"></span>
+                </div>
+                <div class="list-image">
+                    <a :href="'/product-'+pros.productId+'.html'">
+                        <img class="smalltype" src="/img/base/icon-bigtype@2x.png" alt="" v-if="pros.productType == 2">
+                        <img :src="pros.image" :alt="pros.name">
+                    </a>
+                </div>
+                <div class="list-info">
+                    <div class="list-name"><a :href="'/product-'+pros.productId+'.html'">{{ pros.name }}</a></div>
+                    <div class="list-unit">
+                        <div class="sku-label">规格：</div>
+                        <div class="sku-popup" @click="handleShowPopup(pros,index)">
+                            <p class="sku-text" v-text="pros.unit"></p>
+                            <div class="sku-icon"><i class="mIcon"></i></div>
+                        </div>
+                        <div class="sku-popup-model" v-if="showSkuPopup" @click="handleSkuCancel(pros)"></div>
+                        <div class="sku-popup-viw" v-if="currentIndex === index && showSkuPopup">
+                            <div class="sku-title">
+                                <div class="sku-image"><img :src="handlePros.image" :alt="handlePros.name"></div>
+                                <div class="sku-price">
+                                    <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <!--0公开价格 1不公开价格 2仅对会员机构公开-->
+                                        <div class="main_price_unde" v-if="handlePros.priceFlag==1">￥价格未公开</div>
+                                        <!--机构价仅会员可见 && 用户是普通机构-->
+                                        <div class="main_price_unde" v-else-if="handlePros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                            ￥会员可见
+                                        </div>
+                                        <!--机构价仅会员可见 && 用户是普通机构-->
+                                        <div class="main_price_unde" v-else-if="handlePros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                            ￥仅医美机构可见
+                                        </div>
+                                        <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                                        <template
+                                                v-else-if="GLOBAL_USER_IDENTITY === 2 || (handlePros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && handlePros.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                                            <div class="main_price_show"
+                                                 :class="{none: PromotionsFormat(handlePros.promotions) || (handlePros.svipProductFlag === 1 && showVipPriceTag(handlePros))}">
+                                                ￥{{ (PromotionsFormat(handlePros.promotions) || showVipPriceTag(handlePros) ? handlePros.originalPrice :
+                                                handlePros.price ) | NumFormat }}
+                                            </div>
+                                        </template>
+                                        <!--供应商除自己的商品外，也显示价格等级-->
+                                        <div class="price_grade" v-else><span class="bold">￥</span><i
+                                                :class="'icon mIcon i'+handlePros.priceGrade"></i></div>
+                                        <div class="price_text_tag clear">
+                                            <p class="couponTag" v-if="handlePros.couponsLogo">优惠券</p>
+                                            <template v-if="handlePros.svipProductFlag === 1">
+                                                <div class="svip-tag">
+                                                    <div class="svip-icon">SVIP</div>
+                                                    <template v-if="showVipPriceTag(handlePros)">
+                                                        <div class="svip-price">
+                                                            <span v-html="handlePros.svipPriceTag"></span>
+                                                        </div>
+                                                    </template>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <span class="listTag" v-if="handlePros.actStatus==1">{{handlePros.promotions.name}}
+                                                    <span v-if="handlePros.priceFlag != 1 && PromotionsFormat(handlePros.promotions)">:￥{{handlePros.price | NumFormat}}</span>
+                                                </span>
+                                            </template>
+                                        </div>
+                                    </template>
+                                    <template v-else>
+                                        <div class="price_grade"><span class="bold">￥</span><i :class="'icon mIcon i'+handlePros.priceGrade"></i></div>
+                                        <div class="price_text_tag">
+                                            <p class="couponTag" v-if="handlePros.couponsLogo">优惠券</p>
+                                            <template v-if="handlePros.svipProductFlag === 1">
+                                                <div class="svip-tag">
+                                                    <div class="svip-icon">SVIP</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <span class="listTag" v-if="handlePros.actStatus==1">{{handlePros.promotions.name}}</span>
+                                            </template>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                            <div class="sku-h1">规格:</div>
+                            <div class="sku-unit">
+                                <span class="unitTags" @click="handleSupportingChoisSku(pros,sku,index)" v-for="(sku, index) in handlePros.skus" :key="index" :class="skuSupportingIndex === index ? 'active':''">
+                                    {{ sku.unit }}
+                                    <i class="tips" v-if="sku.stock ===0">缺货</i>
+                                </span>
+                            </div>
+                            <div class="sku-button">
+                                <div class="sku-button-center">
+                                    <a class="sku-btn cancel" href="javascript:void(0);" @click="handleSkuCancel(pros)">取消</a>
+                                    <a class="sku-btn confirm" :class="isbtnDisable ? 'disable' : ''" href="javascript:void(0);" @click="handleSkuConfirm(pros)">确定</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="list-price">
+                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                            <div class="price-box">
+                                <!--0公开价格 1不公开价格 2仅对会员机构公开-->
+                                <div class="main_price_unde" v-if="pros.priceFlag==1">￥价格未公开</div>
+                                <!--机构价仅会员可见 && 用户是普通机构-->
+                                <div class="main_price_unde" v-else-if="pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                    ￥会员可见
+                                </div>
+                                <!--仅医美机构可见-->
+                                <div class="main_price_unde" v-else-if="pros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                    ￥仅医美机构可见
+                                </div>
+                                <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                                <template
+                                        v-else-if="GLOBAL_USER_IDENTITY === 2 || (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && pros.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                                    <div class="main_price_show"
+                                         :class="{none: PromotionsFormat(pros.promotions) || (pros.svipProductFlag === 1 && showVipPriceTag(pros))}">
+                                        ￥{{ (PromotionsFormat(pros.promotions) || showVipPriceTag(pros) ? pros.originalPrice :
+                                        pros.price ) | NumFormat }}
+                                    </div>
+                                </template>
+                                <!--供应商除自己的商品外，也显示价格等级-->
+                                <div class="price_grade" v-else><span class="bold">￥</span><i :class="'icon mIcon i'+pros.priceGrade"></i></div>
+                            </div>
+                            <div class="price-number" v-if="!disabledChecked(pros)">
+                            <span class="number">
+                                <em class="sub" @click="supportingNumberSub(pros)">-</em>
+                                <input type="number" :value="pros.number" v-model="pros.number" @change="supportingNumberChange(pros)">
+                                <em class="add" @click="supportingNumberAdd(pros)">+</em>
+                            </span>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="price_grade">
+                                <span class="bold">￥</span><i :class="'icon mIcon i'+pros.priceGrade"></i>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="list-tags">
+                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                            <div class="price_text_tag clear">
+                                <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
+                                <template v-if="pros.svipProductFlag === 1">
+                                    <div class="svip-tag">
+                                        <div class="svip-icon">SVIP</div>
+                                        <template v-if="showVipPriceTag(pros)">
+                                            <div class="svip-price">
+                                                <span v-html="pros.svipPriceTag"></span>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <span class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}
+                                        <span v-if="pros.priceFlag != 1 && PromotionsFormat(pros.promotions)">:￥{{pros.price | NumFormat}}</span>
+                                    </span>
+                                </template>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="price_text_tag">
+                                <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
+                                <template v-if="pros.svipProductFlag === 1">
+                                    <div class="svip-tag">
+                                        <div class="svip-icon">SVIP</div>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <span class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</span>
+                                </template>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="supporting-submit">
+            <div class="supporting-submit-total">
+                <p>共<span class="ore">{{ totalNumber }}</span>件商品</p>
+                <p>合计<span class="red">￥{{ totalPrice | NumFormat }}元</span></p>
+            </div>
+            <div class="supporting-submit-button">
+                <div class="btn add" @click="handleSupportingSubmit('add')">加入购物车</div>
+                <div class="btn buy" @click="handleSupportingSubmit('buy')">立即购买</div>
+            </div>
+        </div>
+    </template>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/mixins/supportMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/product-supporting.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -17,63 +17,70 @@
     <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>暂未找到你搜索的供应商，快去<a href="/supplier/list.html">供应商列表</a>看看吧~</p>
-        </div>
-    </div>
-    <!--列表-->
-    <ul v-else class="supplierList">
-        <li class="supplierItem clear" v-for="shop in listData"  @click="hanldHrefLink(shop)">
-            <div class="left">
-                <a href="javascript:void(0);" class="logo">
-                    <img src="/img/base/placeholder.png" :data-original="shop.logo">
-                </a>
-                <h5><a href="javascript:void(0);" :title="shop.name">
-                    <span v-html="shop.name"></span>
-                </a>
-                <a v-if="shop.license" :href="shop.license" target="_blank" class="icon mIcon shop"></a>
-                </h5>
-                <p>满意度：<span><i v-for="i in 5" class="icon mIcon heart"></i></span></p>
-                <p>所在地区：<span v-text="shop.address"></span></p>
-                <p>经营范围：
-                <span v-if="shop.business!=''"><em v-for="scop in shop.business ? shop.business.split('/') : 0" class="tag" v-text="scop"></em></span>
-                <span v-else>暂无</span></p>
+    <template v-else>
+        <!--数据为空-->
+        <div v-if="!listLoading && (!listData || listData.length==0)" class="empty">
+            <img src="/img/common/empty.png">
+            <div class="msg">
+                <p>暂未找到你搜索的供应商，快去<a href="/supplier/list.html">供应商列表</a>看看吧~</p>
             </div>
-            <div class="right">
-                <ul class="products clear mfc">
-                    <template v-if="shop.products && shop.products.length>0">
-                        <li v-for="product in shop.products">
-                            <a :href="'/product-'+product.productId+'.html'" target="_blank">
-                                <img src="/img/base/placeholder.png" :data-original="product.image">
-                                <span v-html="product.name"></span>
-                            </a>
-                        </li>
-                        <li v-if="shop.products.length<3" v-for="i in (3-shop.products.length)"></li>
-                    </template>
-                    <li v-else-if="isPC" v-for="i in 3"></li>
-                </ul>
-                <a v-if="isPC && shop.shopId!=1161" href="javascript:void(0);" class="four" onclick="_czc.push(['_trackEvent','搜索供应商','点击','查看主页','','Um_Event_SearchShopListHome'])">进入本店铺>>></a>
+        </div>
+        <template v-else >
+            <!--列表-->
+            <ul class="supplierList">
+                <li class="supplierItem clear" v-for="shop in listData"  @click="hanldHrefLink(shop)">
+                    <div class="left">
+                        <a href="javascript:void(0);" class="logo">
+                            <img src="/img/base/placeholder.png" :data-original="shop.logo">
+                        </a>
+                        <h5><a href="javascript:void(0);" :title="shop.name">
+                            <span v-html="shop.name"></span>
+                        </a>
+                            <a v-if="shop.license" :href="shop.license" target="_blank" class="icon mIcon shop"></a>
+                        </h5>
+                        <p>满意度：<span><i v-for="i in 5" class="icon mIcon heart"></i></span></p>
+                        <p>所在地区：<span v-text="shop.address"></span></p>
+                        <p>经营范围：
+                            <span v-if="shop.business!=''"><em v-for="scop in shop.business ? shop.business.split('/') : 0" class="tag" v-text="scop"></em></span>
+                            <span v-else>暂无</span>
+                        </p>
+                    </div>
+                    <div class="right">
+                        <ul class="products clear mfc">
+                            <template v-if="shop.products && shop.products.length>0">
+                                <li v-for="product in shop.products">
+                                    <a :href="'/product-'+product.productId+'.html'" target="_blank">
+                                        <img src="/img/base/placeholder.png" :data-original="product.image">
+                                        <span v-html="product.name"></span>
+                                    </a>
+                                </li>
+                                <li v-if="shop.products.length<3" v-for="i in (3-shop.products.length)"></li>
+                            </template>
+                        </ul>
+                        <a v-if="isPC && shop.shopId!=1161" href="javascript:void(0);" class="four">
+                            <i class="icon shop"></i>
+                            <span>进入店铺</span>
+                        </a>
+                    </div>
+                </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>
-        </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>
+    </template>
     <!--Ross 弹窗-->
     <template v-if="showRossHtml">
         <template th:replace="components/ross-advert"></template>

src/main/resources/templates/user-center/address/list.html

@@ -1,129 +1,129 @@
-<!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/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/user-center/address/list.css(v=${version})}" rel="stylesheet" type="text/css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-<!-- 我的地址 -->
-<div id="orderPage">
-    <div class="navLayout" v-cloak>
-        <div v-if="isPC" class="crumbs">
-            <span>我的交易</span>
-            <span>&gt;</span>
-            <span>收货地址管理</span>
-        </div>
-        <div class="wrap clear">
-            <!--左侧导航-->
-            <template th:replace="user-center/components/tableft"></template>
-            <div class="right">
-                <div class="order-header">
-                    <div class="header-bt">
-                        <p>已保存<span>{{addressList.length}}</span>条地址,还能保存 <span>{{20-(addressList.length)}}</span>条地址</p>
-                    </div>
-                    <div class="header-button">
-                        <a class="btn-server" href="javascript: void(0);" @click="createAddress()">新增地址</a>
-                    </div>
-                </div>
-                <!--loading-->
-                <div v-if="isRequset" class="loading">
-                    <img src="/img/base/loading.gif">
-                </div>
-                <div class="container clear" v-else>
-                    <div class="section address-none" v-show="isShwoAddModel">
-                        <div class="addressWrap">
-                            <div class="form">
-                                <div class="formLine">
-                                    <p class="label"><em>*</em>收货人：</p>
-                                    <input type="text" v-model.trim="addressForm.receiver" placeholder="请输入收货人姓名" :rule="rule.name" maxlength="10" @blur="blurHandle($event)" needverify>
-                                    <i class="checked icon mIcon"></i>
-                                    <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
-                                </div>
-                                <div class="formLine">
-                                    <p class="label"><em>*</em>联系方式：</p>
-                                    <input type="text" v-model.trim="addressForm.mobile" placeholder="请输入您的常用手机号" :rule="rule.mobile" maxlength="11" @blur="blurHandle($event)" needverify>
-                                    <i class="checked icon mIcon"></i>
-                                    <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
-                                </div>
-                                <div class="formLine">
-                                    <p class="label"><em>*</em>联系地址：</p>
-                                    <select name="province" v-model="addressForm.provinceId" @change="getCityOptions(addressForm.provinceId)">
-                                        <option value="" >请选择</option>
-                                        <option v-for="(item ,index) in provinceOptions" :key="index" :value='item.id'>{{item.name}}</option>
-                                    </select>
-                                    <select name="city" v-model="addressForm.cityId" @change="getTownOptions(addressForm.cityId)">
-                                        <option value="" >请选择</option>
-                                        <option v-for="(item ,index) in cityOptions" :key="index" :value="item.id">{{item.name}}</option>
-                                    </select>
-                                    <select name="town" v-model="addressForm.townId">
-                                        <option value="" >请选择</option>
-                                        <option v-for="(item ,index) in townOptions" :key="index" :value="item.id">{{item.name}}</option>
-                                    </select>
-                                    <textarea v-model.trim="addressForm.desc" placeholder="建议您如实填写详细地址，例如：街道名称，门牌号码，楼层和房间号等信息"  @blur="blurHandle($event)" needverify></textarea>
-                                    <span class="errTips icon mIcon" tips="请输入正确的联系地址"></span>
-                                </div>
-                                <div class="btnBox">
-                                    <div class="group">
-                                        <p>
-                                            <label class="check"><input v-model="addressForm.default" name="default" type="checkbox">设为默认地址</label>
-                                        </p>
-                                        <p>
-                                            <a class="btn save"  href="javascript:void(0)" @click="saveAddressForm()">保存</a>
-                                            <a class="btn con"  href="javascript:void(0)" @click="hideAddressForm()">取消</a>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="section" v-if="addressList.length > 0">
-                        <div class="list" v-for="(item, index) in addressList" :key="index">
-                            <div class="list-left">
-                                <p><span class="label">收货人:</span>{{item.receiver}}</p>
-                                <p><span class="label">联系方式:</span>{{item.mobile}}</p>
-                                <p><span class="label">收货地址:</span><span class="prov">{{item.province}}</span>{{item.city}}{{item.town}}{{item.address}}</p>
-                            </div>
-                            <div class="list-right  mfbt">
-                                <div class="list-defalut">
-                                    <template v-if="item.defaultFlag == 1">
-                                        <i class="icon mIcon"></i>
-                                        <span class="span-s">默认地址</span>
-                                    </template>
-                                    <a v-else @click="setDefaultAddress(item.addressId)" href="javascript:void(0)">设为默认地址</a>
-                                </div>
-                                <div class="list-button">
-                                    <a class="list-btn ico" href="javascript:void(0)" @click.stop="deleteAddress(item.addressId)">
-                                        <i class="icon mIcon">
-                                            <span>删除</span>
-                                        </i>
-                                    </a>
-                                    <a class="list-btn" href="javascript:void(0)" @click.stop="editAddress(item)">修改</a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <!--数据为空-->
-                    <div v-else class="empty">
-                        <img src="/img/common/empty.png">
-                        <div class="msg"><p>暂无数据</p></div>
-                    </div>
-                </div>
-            </div>
-        </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/center.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/order.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/address/list.js(v=${version})}"></script>
-</body>
-</html>
+<!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/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/user-center/address/list.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 我的地址 -->
+<div id="orderPage">
+    <div class="navLayout" v-cloak>
+        <div v-if="isPC" class="crumbs">
+            <span>我的交易</span>
+            <span>&gt;</span>
+            <span>收货地址管理</span>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="user-center/components/tableft"></template>
+            <div class="right">
+                <div class="order-header">
+                    <div class="header-bt">
+                        <p>已保存<span>{{addressList.length}}</span>条地址,还能保存 <span>{{20-(addressList.length)}}</span>条地址</p>
+                    </div>
+                    <div class="header-button">
+                        <a class="btn-server" href="javascript: void(0);" @click="createAddress()">新增地址</a>
+                    </div>
+                </div>
+                <!--loading-->
+                <div v-if="isRequset" class="loading">
+                    <img src="/img/base/loading.gif">
+                </div>
+                <div class="container clear" v-else>
+                    <div class="section address-none" v-show="isShwoAddModel">
+                        <div class="addressWrap">
+                            <div class="form">
+                                <div class="formLine">
+                                    <p class="label"><em>*</em>收货人：</p>
+                                    <input type="text" v-model.trim="addressForm.receiver" placeholder="请输入收货人姓名" :rule="rule.name" maxlength="10" @blur="blurHandle($event)" needverify>
+                                    <i class="checked icon mIcon"></i>
+                                    <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
+                                </div>
+                                <div class="formLine">
+                                    <p class="label"><em>*</em>联系方式：</p>
+                                    <input type="text" v-model.trim="addressForm.mobile" placeholder="请输入您的常用手机号" :rule="rule.mobile" maxlength="11" @blur="blurHandle($event)" needverify>
+                                    <i class="checked icon mIcon"></i>
+                                    <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
+                                </div>
+                                <div class="formLine">
+                                    <p class="label"><em>*</em>联系地址：</p>
+                                    <select name="province" v-model="addressForm.provinceId" @change="getCityOptions(addressForm.provinceId)">
+                                        <option value="" >请选择</option>
+                                        <option v-for="(item ,index) in provinceOptions" :key="index" :value='item.id'>{{item.name}}</option>
+                                    </select>
+                                    <select name="city" v-model="addressForm.cityId" @change="getTownOptions(addressForm.cityId)">
+                                        <option value="" >请选择</option>
+                                        <option v-for="(item ,index) in cityOptions" :key="index" :value="item.id">{{item.name}}</option>
+                                    </select>
+                                    <select name="town" v-model="addressForm.townId">
+                                        <option value="" >请选择</option>
+                                        <option v-for="(item ,index) in townOptions" :key="index" :value="item.id">{{item.name}}</option>
+                                    </select>
+                                    <textarea v-model.trim="addressForm.desc" placeholder="建议您如实填写详细地址，例如：街道名称，门牌号码，楼层和房间号等信息"  @blur="blurHandle($event)" needverify></textarea>
+                                    <span class="errTips icon mIcon" tips="请输入正确的联系地址"></span>
+                                </div>
+                                <div class="btnBox">
+                                    <div class="group">
+                                        <p>
+                                            <label class="check"><input v-model="addressForm.default" name="default" type="checkbox">设为默认地址</label>
+                                        </p>
+                                        <p>
+                                            <a class="btn con"  href="javascript:void(0)" @click="hideAddressForm">取消</a>
+                                            <a class="btn save"  href="javascript:void(0)" @click="saveAddressForm">保存</a>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section" v-if="addressList.length > 0">
+                        <div class="list" v-for="(item, index) in addressList" :key="index">
+                            <div class="list-left">
+                                <p><span class="label">收货人:</span>{{item.receiver}}</p>
+                                <p><span class="label">联系方式:</span>{{item.mobile}}</p>
+                                <p><span class="label">收货地址:</span><span class="prov">{{item.province}}</span>{{item.city}}{{item.town}}{{item.address}}</p>
+                            </div>
+                            <div class="list-right  mfbt">
+                                <div class="list-defalut">
+                                    <template v-if="item.defaultFlag == 1">
+                                        <i class="icon mIcon"></i>
+                                        <span class="span-s">默认地址</span>
+                                    </template>
+                                    <a v-else @click="setDefaultAddress(item.addressId)" href="javascript:void(0)">设为默认地址</a>
+                                </div>
+                                <div class="list-button">
+                                    <a class="list-btn ico" href="javascript:void(0)" @click.stop="deleteAddress(item.addressId)">
+                                        <i class="icon mIcon">
+                                            <span>删除</span>
+                                        </i>
+                                    </a>
+                                    <a class="list-btn" href="javascript:void(0)" @click.stop="editAddress(item)">修改</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!--数据为空-->
+                    <div v-else class="empty">
+                        <img src="/img/common/empty.png">
+                        <div class="msg"><p>暂无数据</p></div>
+                    </div>
+                </div>
+            </div>
+        </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/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/order.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/address/list.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/user-center/operation/list.html

@@ -1,137 +1,135 @@
-<!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/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/user-center/operation/list.css(v=${version})}" rel="stylesheet" type="text/css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-<!-- 运营人员管理 -->
-<div id="operationPage">
-    <div class="navLayout" v-cloak>
-        <div v-if="isPC" class="crumbs">
-            <span>机构管理中心</span>
-            <span>&gt;</span>
-            <span>运营人员管理</span>
-        </div>
-        <div class="wrap clear">
-            <!--左侧导航-->
-            <template th:replace="user-center/components/tableft"></template>
-            <div class="right">
-                <div class="order-header">
-                    <div class="header-bt">
-                        <div class="header-search">
-                            <div class="search">
-                                <span class="label">姓名:</span>
-                                <input type="text" v-model="listQuery.linkName" placeholder="请输入运营人员姓名" class="search-input">
-                            </div>
-                            <div class="search">
-                                <span class="label">手机号:</span>
-                                <input type="text" v-model="listQuery.mobile" placeholder="请输入运营人员手机号" class="search-input">
-                            </div>
-                        </div>
-                        <div class="header-button">
-                            <a class="btn-serch" href="javascript: void(0);" @click="searchOperationFn">搜索</a>
-                            <a class="btn-add" href="/user/operation/form.html">添加运营人员</a>
-                        </div>
-                    </div>
-                </div>
-                <!--loading-->
-                <div v-if="isRequset" class="loading">
-                    <img src="/img/base/loading.gif">
-                </div>
-                <div class="container clear" v-else>
-                    <!--数据为空-->
-                    <div class="section" v-if="operationList.length > 0 && isPC">
-                        <div class="title">
-                            <div class="td td-1">姓名</div>
-                            <div class="td td-2">手机号</div>
-                            <div class="td td-3">邀请码</div>
-                            <div class="td td-4">有效期</div>
-                            <div class="td td-5">状态</div>
-                            <div class="td td-6">微信昵称</div>
-                            <div class="td td-7">添加时间</div>
-                            <div class="td td-8">绑定时间</div>
-                            <div class="td td-9">操作</div>
-                        </div>
-                        <div class="content">
-                            <div class="list" v-for="(item, index) in operationList" :key="index">
-                                <div class="td td-1">{{item.linkName}}</div>
-                                <div class="td td-2">{{item.mobile}}</div>
-                                <div class="td td-3">
-                                    <p>{{item.invitationCode}}</p>
-                                    <p :style="{color: ColorFn(item.effectiveFlag)}">{{item.effectiveFlag | stateTextExp}}</p>
-                                </div>
-                                <div class="td td-4">{{item.effectiveDays > 0 ? item.effectiveDays+'天': '- -'}}</div>
-                                <div class="td td-5" :style="{color: statusColorFn(item.status)}">{{item.status | stateExp}}</div>
-                                <div class="td td-6">{{item.nickName ? item.nickName : '- -'}}</div>
-                                <div class="td td-7">{{item.addTime}}</div>
-                                <div class="td td-8">{{item.bindTime}}</div>
-                                <div class="td td-9">
-                                    <a class="upd" href="javascript: void(0);" v-if="item.status == 1" @click="UpdataOperationFn(item)">更新邀请码</a>
-                                    <a class="del" href="javascript: void(0);" @click="DeleteOperationFn(item)">删除</a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="section" v-else-if="operationList.length > 0 && !isPC">
-                            <div class="list"  v-for="(item, index) in operationList" :key="index">
-                                  <div class="list-one">
-                                      <span>姓名：<p>{{item.linkName}}</p></span>
-                                      <span>手机号：<p>{{item.mobile}}</p></span>
-                                      <span>邀请码：<p>{{item.invitationCode}}</p></span>
-                                  </div>
-                                  <div class="list-one">
-                                      <span>添加时间：<p>{{item.addTime}}</p></span>
-                                      <span>绑定时间：<p>{{item.bindTime}}</p></span>
-                                      <span>邀请码有效期：<p>{{item.effectiveDays > 0 ? item.effectiveDays+'天': '- -'}}</p></span>
-                                  </div>
-                                  <div>
-                                      <span>微信昵称：<p>{{item.nickName}}</p></span>
-                                  </div>
-                                  <div>
-                                      <span>状态：<p :style="{color: statusColorFn(item.status)}">{{item.status | stateExp}}</p></span>
-                                      <div class="operat">
-                                            <a class="upd" href="javascript: void(0);" v-if="item.status == 1" @click="UpdataOperationFn(item)">更新邀请码</a>
-                                            <a class="del" href="javascript: void(0);" @click="DeleteOperationFn(item)">删除</a>
-                                       </div>
-                                  </div>
-                            </div>
-                    </div>
-                    <div v-else class="empty">
-                        <img src="/img/common/empty.png">
-                        <div class="msg"><p>暂无数据</p></div>
-                    </div>
-                </div>
-                <!--分页-->
-                <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
-                <div v-if="isPC && pageTotal>1" class="pageWrap clear">
-                    <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)" href="javascript:void(0);"></a>
-                    <template v-for="n in showPageBtn">
-                        <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
-                        <span v-else>···</span>
-                    </template>
-                    <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*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>
-        </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/center.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/operation/list.js(v=${version})}"></script>
-</body>
-</html>
+<!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/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/user-center/operation/list.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 运营人员管理 -->
+<div id="operationPage">
+    <div class="navLayout" v-cloak>
+        <div v-if="isPC" class="crumbs">
+            <span>机构管理中心</span>
+            <span>&gt;</span>
+            <span>运营人员管理</span>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="user-center/components/tableft"></template>
+            <div class="right">
+                <div class="order-header">
+                    <div class="header-bt">
+                        <div class="header-search">
+                            <div class="search">
+                                <input type="text" v-model="listQuery.linkName" placeholder="请输入运营人员姓名" class="search-input">
+                            </div>
+                            <div class="search">
+                                <input type="text" v-model="listQuery.mobile" placeholder="请输入运营人员手机号" class="search-input">
+                            </div>
+                        </div>
+                        <div class="header-button">
+                            <a class="btn-serch" href="javascript: void(0);" @click="searchOperationFn">搜索</a>
+                            <a class="btn-add" href="/user/operation/form.html">添加运营人员</a>
+                        </div>
+                    </div>
+                </div>
+                <!--loading-->
+                <div v-if="isRequset" class="loading">
+                    <img src="/img/base/loading.gif">
+                </div>
+                <div class="container clear" v-else>
+                    <!--数据为空-->
+                    <div class="section" v-if="operationList.length > 0 && isPC">
+                        <div class="title">
+                            <div class="td td-1">姓名</div>
+                            <div class="td td-2">手机号</div>
+                            <div class="td td-3">邀请码</div>
+                            <div class="td td-4">有效期</div>
+                            <div class="td td-5">状态</div>
+                            <div class="td td-6">微信昵称</div>
+                            <div class="td td-7">添加时间</div>
+                            <div class="td td-8">绑定时间</div>
+                            <div class="td td-9">操作</div>
+                        </div>
+                        <div class="content">
+                            <div class="list" v-for="(item, index) in operationList" :key="index">
+                                <div class="td td-1">{{item.linkName}}</div>
+                                <div class="td td-2">{{item.mobile}}</div>
+                                <div class="td td-3">
+                                    <p>{{item.invitationCode}}</p>
+                                    <p :style="{color: ColorFn(item.effectiveFlag)}">{{item.effectiveFlag | stateTextExp}}</p>
+                                </div>
+                                <div class="td td-4">{{item.effectiveDays > 0 ? item.effectiveDays+'天': '- -'}}</div>
+                                <div class="td td-5" :style="{color: statusColorFn(item.status)}">{{item.status | stateExp}}</div>
+                                <div class="td td-6">{{item.nickName ? item.nickName : '- -'}}</div>
+                                <div class="td td-7">{{item.addTime}}</div>
+                                <div class="td td-8">{{item.bindTime}}</div>
+                                <div class="td td-9">
+                                    <a class="upd" href="javascript: void(0);" v-if="item.status == 1" @click="UpdataOperationFn(item)">更新邀请码</a>
+                                    <a class="del" href="javascript: void(0);" @click="DeleteOperationFn(item)">删除</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="section" v-else-if="operationList.length > 0 && !isPC">
+                            <div class="list"  v-for="(item, index) in operationList" :key="index">
+                                  <div class="list-one">
+                                      <span>姓名：<p>{{item.linkName}}</p></span>
+                                      <span>手机号：<p>{{item.mobile}}</p></span>
+                                      <span>邀请码：<p>{{item.invitationCode}}</p></span>
+                                  </div>
+                                  <div class="list-one">
+                                      <span>添加时间：<p>{{item.addTime}}</p></span>
+                                      <span>绑定时间：<p>{{item.bindTime}}</p></span>
+                                      <span>邀请码有效期：<p>{{item.effectiveDays > 0 ? item.effectiveDays+'天': '- -'}}</p></span>
+                                  </div>
+                                  <div>
+                                      <span>微信昵称：<p>{{item.nickName}}</p></span>
+                                  </div>
+                                  <div>
+                                      <span>状态：<p :style="{color: statusColorFn(item.status)}">{{item.status | stateExp}}</p></span>
+                                      <div class="operat">
+                                            <a class="upd" href="javascript: void(0);" v-if="item.status == 1" @click="UpdataOperationFn(item)">更新邀请码</a>
+                                            <a class="del" href="javascript: void(0);" @click="DeleteOperationFn(item)">删除</a>
+                                       </div>
+                                  </div>
+                            </div>
+                    </div>
+                    <div v-else class="empty">
+                        <img src="/img/common/empty.png">
+                        <div class="msg"><p>暂无数据</p></div>
+                    </div>
+                </div>
+                <!--分页-->
+                <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+                <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+                    <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)" href="javascript:void(0);"></a>
+                    <template v-for="n in showPageBtn">
+                        <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+                        <span v-else>···</span>
+                    </template>
+                    <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*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>
+        </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/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/operation/list.js(v=${version})}"></script>
+</body>
+</html>