Merge remote-tracking branch 'origin/developerB' into developerB

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

@@ -1,13 +1,17 @@
 package com.caimei.www.controller.unlimited;
 
 import com.caimei.www.controller.BaseController;
+import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.pojo.page.PageContent;
+import com.caimei.www.pojo.save.Suggestion;
 import com.caimei.www.service.page.HelpService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
 
 /**
  * Description
@@ -31,12 +35,25 @@ public class HelpPageController extends BaseController {
      */
     @GetMapping("/help/{id}.html")
     public String help(final Model model, @PathVariable Integer id ) {
-        // 默认平台介绍
-        if(null == id) {id = 1016;}
         PageContent helpPage = helpService.getHelpPageById(id);
+        if(null == helpPage){
+            // 默认平台介绍
+            return "redirect:/help/1016.html";
+        }
+        model.addAttribute("pageId", id);
+        model.addAttribute("pageTypeId", helpPage.getType());
         model.addAttribute("pageInfo", helpPage);
         return HELP_PAGE_PATH;
     }
 
-
+    /**
+     * 保存投诉建议
+     * @param suggestion
+     * @return
+     */
+    @PostMapping("/help/suggestion")
+    @ResponseBody
+    public JsonModel suggestion(Suggestion suggestion) {
+        return helpService.suggestionSave(suggestion);
+    }
 }

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

@@ -1,8 +1,10 @@
 package com.caimei.www.mapper;
 
+import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.pojo.page.ImageLink;
 import com.caimei.www.pojo.page.PageContent;
 import com.caimei.www.pojo.page.PageFloor;
+import com.caimei.www.pojo.save.Suggestion;
 import org.apache.ibatis.annotations.Mapper;
 
 import java.util.List;
@@ -68,4 +70,15 @@ public interface SinglePageDao {
      * @return
      */
     PageContent getHelpPageById(Integer id);
+
+
+    /**
+     * 保存投诉建议
+     * @param suggestion
+     * @return
+     */
+    void suggestionSave(Suggestion suggestion);
+    Integer getMaxSuggestionId();
+
+
 }

src/main/java/com/caimei/www/pojo/save/Suggestion.java

@@ -0,0 +1,25 @@
+package com.caimei.www.pojo.save;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/9/1
+ */
+@Data
+public class Suggestion implements Serializable {
+	private Integer suggestionID;
+	private Integer suggestionTypeID;
+	private Integer userID;
+	private String addTime;
+	private String title;
+	private String content;
+	private String linkMan;
+	private String mobile;
+	private String replyContent;
+	private String status;
+}

src/main/java/com/caimei/www/service/page/HelpService.java

@@ -1,6 +1,8 @@
 package com.caimei.www.service.page;
 
+import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.pojo.page.PageContent;
+import com.caimei.www.pojo.save.Suggestion;
 
 /**
  * Description
@@ -11,4 +13,11 @@ import com.caimei.www.pojo.page.PageContent;
 public interface HelpService {
     /** 根据ID查找帮助页 */
     PageContent getHelpPageById(Integer id);
+
+    /**
+     * 保存投诉建议
+     * @param suggestion
+     * @return
+     */
+    JsonModel suggestionSave(Suggestion suggestion);
 }

src/main/java/com/caimei/www/service/page/impl/HelpServiceImpl.java

@@ -1,12 +1,18 @@
 package com.caimei.www.service.page.impl;
 
 import com.caimei.www.mapper.SinglePageDao;
+import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.pojo.page.PageContent;
+import com.caimei.www.pojo.save.Suggestion;
 import com.caimei.www.service.page.HelpService;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
+import javax.xml.crypto.Data;
+import java.text.SimpleDateFormat;
+import java.util.Date;
 
 /**
  * Description
@@ -31,4 +37,21 @@ public class HelpServiceImpl implements HelpService {
     public PageContent getHelpPageById(Integer id) {
         return singlePageDao.getHelpPageById(id);
     }
+
+    /**
+     * 保存投诉建议
+     *
+     * @param suggestion
+     * @return
+     */
+    @Override
+    public JsonModel suggestionSave(Suggestion suggestion) {
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+        String format = sdf.format(new Date());
+        Integer maxId = singlePageDao.getMaxSuggestionId();
+        suggestion.setAddTime(format);
+        suggestion.setSuggestionID(maxId+1);
+        singlePageDao.suggestionSave(suggestion);
+        return JsonModel.success("投诉建议成功！","");
+    }
 }

src/main/resources/mapper/SinglePageMapper.xml

@@ -69,6 +69,20 @@
         where helpPageID=#{id}
         and validFlag=1 and showFlag=1
     </select>
-
+    <select id="getMaxSuggestionId" resultType="java.lang.Integer">
+        select MAX(suggestionID) from suggestion
+    </select>
+    <insert id="suggestionSave" parameterType="com.caimei.www.pojo.save.Suggestion">
+        insert into suggestion
+        (suggestionID, suggestionTypeID, userID, title, content, linkMan, mobile, addTime)
+        values (#{suggestionID,jdbcType=INTEGER},
+                #{suggestionTypeID,jdbcType=INTEGER},
+                #{userID,jdbcType=INTEGER},
+                #{title,jdbcType=VARCHAR},
+                #{content,jdbcType=VARCHAR},
+                #{linkMan,jdbcType=VARCHAR},
+                #{mobile,jdbcType=VARCHAR},
+                #{addTime,jdbcType=VARCHAR})
+    </insert>
 
 </mapper>

src/main/resources/static/css/article/article.css

@@ -36,6 +36,20 @@ dl,dd,dt{zoom:1}
 .article img{max-width:100% !important;height:auto !important}
 @media screen and (min-width:768px){.header .h5-head{display:none}
 	.icon:before{content:'';display:inline-block;background:url(/img/base/icon.png) no-repeat;font-size:0}
+	/* 分享，回到顶部 */
+	#scrollTop{display:none;position:fixed;right:50%;margin-right:-700px;width:88px;z-index:9999;bottom:120px;}
+	#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 .item>span{display:block;width:100%;box-sizing:border-box;position:relative;cursor:pointer;}
+	#scrollTop .item>span:hover{color:#E15616;}
+	#scrollTop .item .wechat{padding:4px 16px 4px 48px;line-height:16px;}
+	#scrollTop .item .wechat:before{width:32px;height:32px;background-position:0 -254px;position:absolute;top:4px;left:16px}
+	#scrollTop .item .toTop{padding:12px 16px 12px 48px;line-height:16px;}
+	#scrollTop .item .toTop:before{width:32px;height:32px;background-position:-42px -254px;position:absolute;top:4px;left:16px}
+	#scrollTop .item .wechatHover{display:none;position:absolute;left:-150px;top:-150px;z-index:999;width:150px;height:150px;padding:15px;background:#FFF;}
+	#scrollTop .item .wechatHover a{color:#E15616}
+	#scrollTop .item .wechatHover span{color:#93979F;margin-top:10px}
+	#scrollTop .item .wechatHover a:hover{text-decoration:underline}
+	#scrollTop .item:hover .wechatHover{display:block}
 	.pageWrap{width:100%;text-align:center;padding:20px 0 36px}
 	.pageWrap a{box-sizing:border-box;display:inline-block;width:40px;height:40px;line-height:40px;border:1px solid #EBECEF;font-size:16px;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}
 	.pageWrap a.on{background:#e15616;color:#fff;border:1px solid #e15616}
@@ -153,9 +167,16 @@ dl,dd,dt{zoom:1}
 	.article .like:before{width:50px;height:50px;background-position:-320px -60px;vertical-align:middle;margin-right:5px}
 	.like.hasDian{color:#e15616}
 	.dea-tag a{display:inline-block;color:#fff;height:32px;line-height:32px;padding:0 12px;background:#e15616;text-align:center;border-radius:4px;margin-right:15px;cursor:pointer}
+
+
+
 }
 @media screen and (max-width:768px){.header .logo,.header .home{display:none}
 	.mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/icon_m.png) no-repeat;background-size:100vw auto;transition:all .5s}
+	#scrollTop{display:none;position:fixed;right:0;;z-index:9999;bottom:4vw;}
+	#scrollTop .item{width:12vw;background-color:rgba(190,194,201,.3);box-sizing:border-box;text-align:center;margin-bottom:2.5vw;font-size:3vw;position:relative}
+	#scrollTop .item>span{box-sizing:border-box;display:block;padding:1.5vw;line-height:3.4vw;}
+	#scrollTop .item .toTop:before{display:block;margin:0 auto;width:5.8vw;height:5.8vw;background-position:-58.8vw -9vw}
 	.loading{box-sizing:border-box;padding:20vw 0;text-align:center}
 	.header{position:relative}
 	.h5-head{box-sizing:border-box;width:100%;background:#FFF;height:13.6vw;margin-bottom:2.6vw;padding:0 2.6vw;position:relative}
@@ -221,4 +242,6 @@ dl,dd,dt{zoom:1}
 	.article .like{display:block;width:35vw;height:12vw;line-height:12vw;margin:5vw auto;border:1px solid #eee;color:#777;padding:0 6vw;border-radius:5px;background:#f7f7f7}
 	.article .like:before{height:10vw;width:10vw;background-position:-75.3vw -38.6vw;vertical-align:middle;margin-right:1vw}
 	.classify{height:10vw;line-height:10vw;border-left:solid 4px #e15616;font-size:3.7vw;color:#333;padding:0 3vw;background:#fff}
+
+
 }

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

@@ -279,14 +279,14 @@ header{box-shadow: 0 2px 10px #ebecef;}
  .activitystyle{
     border-bottom: 1px solid #fff !important;
 }
-.activity .icon{
-       width: 15px;
-    height: 15px;
-    position: absolute;
-    top: 10px;
-    background: transparent url(/img/base/tubiao@2x.png) no-repeat no-repeat scroll right 5px center;
-    background-position: -168px -48px;
-    right: 0;
+
+.activity .icon.shaky:before{
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        top: -5px;
+        right: 0;
+        background-position: -90px 6px
 }
 .activity  .activeicon{
     background-position: -207px -46px;

src/main/resources/static/css/flea-market/intro.css

@@ -1,4 +1,5 @@
   @media screen and (min-width:768px) {
+
       .body {
           position: relative;
           width: 1190px;
@@ -20,7 +21,7 @@
           background: #FFFFFF;
           border-radius: 20px;
           margin-top: 40px;
-          padding: 20px 40px 0 40px;
+          padding: 20px 0 0 40px;
           margin-bottom: 80px;
           height: 273px;
           border-bottom: 10px solid #f1ac90;
@@ -40,7 +41,10 @@
           cursor: pointer;
           border-radius: 22px;
       }
-
+      .top_title div:nth-child(2){
+            position: absolute;
+            top: 38px;
+      }
       #second-hand-btn button:first-child {
           left: 15%;
       }
@@ -79,6 +83,7 @@
           color: #FFFFFF;
           font-size: 18px;
       }
+      .jioayi{ font-size: 24px;    color: #353C44;}
 
       .mian_text h1 {
           font-size: 36px;
@@ -183,43 +188,47 @@
           opacity: 1;
           margin-top: -27px;
       }
+      .yellow_icon.y{
+         width: 150px !important;
+      }
 
       .top_title div {
           display: inline-block;
       }
+      .jiaoyi{
+        color: #353C44;
+        font-size: 24px
+      }
+      .jiaoyi_img{
+        display: none;
+      }
   }
 
 
 
 /* 移动端*/
 @media screen and (max-width:768px){
+   #fleaMarket{
+      padding: 10px;
+     background-image: linear-gradient(#FF7676, #E15616);
+}
      .title{letter-spacing: .2rem;font-size: 0.48rem}
      .second-hand-wrapper img{
             width: 100%;
             display: block;
-            margin: 0 auto;
+            margin: 2.7vw auto;
         }
         #second-hand-btn button {
-            position: absolute;
-            width: 40%;
-            height: 20%;
-            background:linear-gradient(225deg,rgba(255,107,107,1) 0%,rgba(247,76,0,1) 100%);
-            border-radius:15px;
-            color: #fff;
-            border: none;
-            font-size: .3rem;
-            outline: none;
-        }
-        #second-hand-btn div{
-        height: 70px}
-        #second-hand-btn button:first-child, #second-hand-btn button:nth-child(3) {
-            left: 9%;
-        }
-        #second-hand-btn button:nth-child(2), #second-hand-btn button:nth-child(4) {
-            left: 52%;
-        }
-        #second-hand-btn button:nth-child(3), #second-hand-btn button:nth-child(4) {
-            top: 36%;
+                width: 37.3vw;
+                height: 12vw;
+                background: linear-gradient(225deg,rgba(255,107,107,1) 0%,rgba(247,76,0,1) 100%);
+                border-radius: 4vw;
+                color: #fff;
+                border: none;
+                font-size: 3.7vw;
+                outline: none;
+                margin-bottom: 2.7vw;
+                margin-right: 2.7vw
         }
          body{
             position: relative;
@@ -228,13 +237,10 @@
         }
         .second-hand-wrapper{
             background-image: url("/img/flea-market/bg22.png");
-            background-position: 50% 18%;
+            background-position: 50% 9%;
             background-repeat: no-repeat;
             background-size: 100%;
         }
-         body{
-            background-image: linear-gradient(#FF7676, #E15616);
-        }
        .second-hand-wrapper h1{
             color: #FFFFFF;
             letter-spacing: 2px;
@@ -242,12 +248,13 @@
         #second-hand-btn {
             position: relative;
             background: #FFFFFF;
-            border-radius: 0.4rem;
-            margin-top: 0.4rem;
-            padding: 20px 15px 0px 15px;
-            margin-bottom: .5rem;
-            border-bottom: 5px solid #f1ac90;
-            border-right: 5px solid #f1ac90;
+            border-radius: 4vw;
+            margin-top: 4vw;
+            padding: 5.3vw 3vw 5vw 4vw;
+            margin-bottom: 2vw;
+            border-bottom: 1.3vw solid #f1ac90;
+            border-right: 1.3vw solid #f1ac90;
+            text-align: center;
         }
         .top_title{
             padding: 20px 0 20px 0;
@@ -290,61 +297,63 @@
              font-size: 4.8vw;
             font-weight: bold;
         }
+        .mian_content{
+            margin-top: 10.7vw;
+        }
         .font_content{
              background: #FFFFFF;
-            border-radius: 0.4rem;
-            margin-top: 0.24rem;
-            padding: 0.2rem;
+            border-radius: 5vw;
+            margin-top: 4vw;
+            padding: 2.5vw;
             font-weight: 400;
-            line-height: 0.5rem;
+            line-height: 6vw;
             color: rgba(109,114,120,1);
             opacity: 1;
             position: relative;
-            border-bottom: 5px solid #f1ac90;
-            border-right: 5px solid #f1ac90;
+            border-bottom: 1.3vw solid #f1ac90;
+            border-right: 1.3vw solid #f1ac90;
         }
         .content_list p{
-         font-size:.3rem;
+         font-size:4vw;
         font-family:Source Han Sans CN;
 
         }
         .content_list span{
-         font-size: .24rem;
+         font-size: 3vw;
         }
         .content_list{
-         margin-bottom: .3rem;
+         margin-bottom: 5vw;
         }
         .tishiyu{
-         background: #FFF8F8;
-        font-size: 0.24rem;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        line-height: 20px;
-        color: #FF7354;
-        opacity: 1;
-        padding: 10px;
-        border-radius: 10px;
+            background: #FFF8F8;
+            font-size: 3vw;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            line-height: 5.3vw;
+            color: #FF7354;
+            opacity: 1;
+            padding: 2.6vw;
+            border-radius: 2.7vw
         }
         .twobuy{
-        background: #EF5C3C;
-         border-radius: 0.2rem;
-         font-size: 0.24rem;
-         font-family: AlibabaPuHuiTiB;
-         opacity: 1;
-         padding: 3px;
-         color: #FFFFFF;
-         /*letter-spacing: 0.1rem;*/
-         margin-bottom: 0.4rem;
-         text-align: center;
-         width: 3.3rem;
+            background: #EF5C3C;
+            border-radius: 2vw;
+            font-size: 3.7vw;
+            font-family: AlibabaPuHuiTiB;
+            opacity: 1;
+            padding: .8vw;
+            color: #FFFFFF;
+            margin-bottom: 2.6vw;
+            text-align: center;
+            width: 48vw
         }
         .threebuy{
-        background: #EF5C3C;
-        border-radius: 5px;
-        font-size: .24rem;
-        color: #fff;
-        padding: 3px;
-        margin-bottom: 0.2rem;
+            background: #EF5C3C;
+            border-radius: 1.3vw;
+            font-size: 3.2vw;
+            color: #fff;
+            padding: .8vw;
+            margin-bottom: 5vw
         }
         .bluefont{
             font-size: .32rem !important;
@@ -352,18 +361,26 @@
         }
         .foot_font{
             text-align: center;
-            font-size: 0.34rem;
-            line-height: 0.6rem;
-
+            font-size: 4.5vw;
+            line-height: 7vw
         }
         .yellow_icon{
              width: 42vw;
-            height: 2vw;
+            height: 3vw;
             background: rgba(250,185,0,1);
             opacity: 1;
             margin-top: -3vw
         }
+        .yellow_icon.m{
+            width: 21.3vw;
+        }
         .top_title div{
             display: inline-block;
         }
+        .jiaoyi{
+            font-size: 3.2vw;
+        }
+         .jiaoyi_pimg{
+           display: none !important;
+      }
 }

src/main/resources/static/css/flea-market/secondDetail.css

@@ -1,630 +1,804 @@
-.preview-container{
-    width: 100%;
-    height: auto;
-    background-color: #f6f6f6;
-    margin-bottom: 20px;
-}
-.preview-container-top{
-    width: 100%;
-    height: 80px;
-    background-color: #FFC684;
-    font-size: 30px;
-    color: #FFF;
-    line-height: 80px;
-    text-align: center;
-}
-.inner-container{
-    width: 1200px;
-    height: auto;
-    margin: 0 auto;
-}
-.preview-header{
-    width: 100%;
-    padding: 12px;
-    background-color: #FFFFFF;
-    margin: 10px 0 20px 0;
-}
-.preview-header .preview-banner{
-    width: 450px;
-    height: 548px;
-    float: left;
-    border:1px solid #EFEFEF;
-    position: relative;
-}
-.preview-header .preview-info{
-    width: 704px;
-    float: right;
-    opacity: 0;
-}
-.preview-header .preview-info.active{
-    opacity: 1;
-}
-.preview-header .preview-banner-big{
-    width: 448px;
-    height: 448px;
-    float: left;
-}
-.preview-header .preview-banner-big .preview-img{
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-.preview-header .preview-banner-big span{
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 215px;
-    height: 215px;
-    border: 1px solid #aaa;
-    background: rgba(255,208,22,0.4);
-    opacity: .5;
-    filter: alpha(opacity: 50);
-    cursor: move;
-}
-.preview-header .preview-banner-small{
-    width: 100%;
-    height: 98px;
-    padding:  10px;
-    float: left;
-}
-.preview-header .preview-banner-small .item{
-    width: 78px;
-    height: 78px;
-    /*border: 2px solid #FFF;*/
-    margin-right: 9px;
-    float: left;
-    background-color: #fff;
-    cursor: pointer;
-}
-.preview-header .preview-banner-small .item:last-child{
-    margin-right: 0;
-}
-.preview-header .preview-banner-small .item img{
-    width: 100%;
-    height: 100%;
-    display: block;
-    -moz-transition: .5s;
-    -webkit-transition: .5s;
-    transition: .5s;
-}
-.preview-header .preview-banner-small .item.item-cur{
-    border-color: #e15616;
-}
-.preview-header .preview-banner-small .item.item-cur img{
-    opacity: 1;
-}
-.preview-header .preview-box{
-    display: none;
-    overflow: hidden;
-    position: absolute;
-    right: -555px;
-    top: 0;
-    width: 548px;
-    height: 548px;
-    border: 1px solid #e4e4e4;
-    z-index: 9999;
-    background: #FFFFFF;
-}
-.preview-header .preview-box img{
-    width: 1096px;
-    height: 1096px;
-    margin-right: 10px;
-    display: block;
-}
-.preview-info .preview-info-title{
-    width: 100%;
-    height: auto;
-    float: left;
-    position: relative;
-}
-.preview-info .preview-info-title .info-p{
-    height: auto;
-    float: left;
-}
-.preview-info .preview-info-title .info-p.classly{
-    font-size: 14px;
-    color: #999;
-}
-.preview-info .preview-info-title .info-p.name{
-    font-size: 18px;
-    color: #333;
-    font-weight: bold;
-    line-height: 24px;
-    height: auto;
-    width: 100%;
-    margin: 10px 0;
-}
-.preview-info .preview-info-title .info-p.label .label-s{
-    font-size: 12px;
-    background: #A69DFE;
-    color: #fff;
-    padding: 5px 10px;
-    border-radius: 2px;
-    margin: 0 10px 5px 0;
-    display: inline-block;
-}
-.preview-info  .preview-info-main{
-    width: 100%;
-    /*height: 326px;*/
-    padding:16px 20px;
-    background-color: #FDF8F6;
-    border-radius: 2px;
-    float: left;
-    margin-top: 15px;
-}
-.preview-info  .preview-info-main .info{
-    width: 50%;
-    height: 30px;
-    float: left;
-    margin-bottom: 5px;
-    line-height: 30px;
-}
-.preview-info  .preview-info-main .info .label{
-    width: 70px;
-    height: 30px;
-    float: left;
-    display: block;
-    font-size: 14px;
-    line-height: 30px;
-    text-align: right;
-    color: #999;
-}
-.preview-info  .preview-info-main .info p{
-    float: left;
-    height: 100%;
-    padding-left: 20px;
-}
-.preview-info  .preview-info-main .info.price .fave-tag{
-    width: 54px;
-    height: 22px;
-    display: inline-block;
-    border-radius: 2px;
-    background:linear-gradient(45deg,rgba(255,42,42,1) 0%,rgba(255,145,0,1) 100%);
-    box-shadow:0px 3px 6px rgba(255,145,0,0.17);
-    font-size: 14px;
-    text-align: center;
-    line-height: 22px;
-    color: #FFF;
-    float: left;
-    margin-right: 5px;
-    margin-top: 4px;
-}
-.preview-info  .preview-info-main .info.price .fave-text{
-     font-size: 14px;
-     color: #FF2A2A;
- }
-.preview-info  .preview-info-main .info.price .fave-text .big{
-    font-size: 16px;
-}
-.preview-info  .preview-info-main .info.price .fave-text-none{
-    font-size: 14px;
-    color: #333;
-    text-decoration: line-through;
-}
-.preview-info  .preview-info-main .info .num-box{
-    width: 91px;
-    height: 24px;
-    border-radius: 4px ;
-    border: 1px solid #EEE;
-    float: left;
-    margin-top: 2px;
-    margin-left: 20px;
-}
-.preview-info  .preview-info-main .info .num-box span{
-    display: inline-block;
-    float: left;
-    line-height: 24px;
-    font-size: 14px;
-    text-align: center;
-    height: 24px;
-}
-.preview-info  .preview-info-main .info .num-box span:nth-child(2){
-    width: 45px;
-    border-right:1px solid #EEE;
-    border-left:1px solid #EEE;
-    color: #e15616;
-}
-.preview-info  .preview-info-main .info .num-box span:nth-child(1),
-.preview-info  .preview-info-main .info .num-box span:nth-child(3){
-    width: 22px;
-    color: #999;
-}
-.preview-info  .preview-info-main .info.sever{
-    margin-top: 10px;
-    border-top: 1px dashed #F9DDD0;
-    line-height: 40px;
-    height: 40px;
-}
-.preview-info  .preview-info-main .info.sever .label{
-    line-height: 40px;
-}
-.preview-info  .preview-info-main .info.sever .text{
-    padding-left: 24px;
-    background: url("/public/3.0/img/product/selected.png") left center no-repeat;
-    margin-right: 15px;
-}
-.preview-info  .preview-info-btn{
-    width: 100%;
-    height: 36px;
-    float: left;
-    margin-top: 20px;
-}
-.preview-info  .preview-info-btn .info-btn{
-    float: left;
-    width: 154px;
-    height: 36px;
-    float: left;
-    margin: 0 10px;
-    border-radius: 2px;
-    line-height: 36px;
-    text-align: center;
-    font-size: 14px;
-}
-.preview-info  .preview-info-btn .info-btn.buy{
-    background-color: #e15616;
-    color: #FFF;
-}
-.preview-info  .preview-info-btn .info-btn.cart{
-    background-color: #FFF;
-    color: #e15616;
-    border: 1px solid #e15616;
-}
-/*下半部分*/
-.preview-bottom{
-    width: 100%;
-    min-height:522px ;
-}
-.preview-bottom .preview-left{
-    width: 890px;
-    min-height:522px ;
-    float: left;
-    background: #fff;
-}
-.preview-bottom .preview-right{
-    width: 290px;
-    min-height:522px ;
-    float: right;
-}
-.preview-bottom .preview-left .preview-tabs{
-    width: 100%;
-    height: 40px;
-    border-bottom: 1px solid #e15616;
-}
-.preview-bottom .preview-left .preview-tabs-item{
-    width: 128px;
-    height: 39px;
-    line-height: 39px;
-    background-color: #FFF;
-    font-size: 16px;
-    color:#333 ;
-    float: left;
-    text-align: center;
-    cursor: pointer;
-}
-.preview-bottom .preview-left .preview-tabs-item.active{
-    background-color: #e15616;
-    color: #FFF;
-}
-.preview-bottom .preview-left .preview-section{
-    width: 100%;
-    height: auto;
-    padding:10px 20px;
-}
-.preview-bottom .preview-left  .preview-section-html{
-    width: 100%;
-    height: auto;
-}
-.preview-bottom .preview-left  .preview-section-html img{
-    width: 100%;
-    height: auto;
-    display: block;
-}
-.preview-bottom .preview-section .parameter-main {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    background-color: #FFFFFF;
-    border: 1px solid #EFEFEF;
-    border-radius: 4px;
-}
-.preview-bottom .preview-section .parameter-main .item-tabody {
-    width: 100%;
-    height: auto;
-    border-bottom: 1px solid #EFEFEF;
-    font-size: 14px;
-    display: flex;
-    flex-wrap: wrap;
-}
-.preview-bottom .preview-section .parameter-main .item-td{
-    width: 238px;
-    float: left;
-    border-right: 1px solid #EFEFEF;
-    color: #999999;
-    padding:10px 20px;
-    display: flex;
-    flex: 2;
-    flex-direction: column;
-}
-.preview-bottom .preview-section .parameter-main .item-tr{
-    width: 462px;
-    float: left;
-    color: #333333;
-    padding:10px 20px;
-    display: flex;
-    flex: 8;
-    flex-direction: column;
-}
-.preview-bottom .preview-section .parameter-main .item-tr:last-child{
-    border-bottom: none;
-}
-.preview-bottom .preview-section .parameter-text{
-    width: 100%;
-    height: auto;
-    margin-bottom: 30px;
-}
-.preview-bottom .preview-section .parameter-text-title{
-    font-size: 16px;
-    color: #333;
-    line-height: 36px;
-    text-align: left;
-}
-.preview-bottom .preview-section .parameter-text-p{
-    font-size: 14px;
-    color: #999;
-    line-height: 24px;
-    text-align: justify;
-}
-.preview-bottom .preview-section .none{
-    font-size: 14px;
-    color: #e15616;
-    line-height: 36px;
-    text-align: center;
-}
-.preview-right .preview-shopinfo{
-    width: 100%;
-    height: auto;
-    background-color: #FFF;
-    margin-bottom: 20px;
-    float: left;
-}
-.preview-right .preview-shopinfo .title{
-    width: 100%;
-    padding: 0 15px;
-    height: 40px;
-    background-color: #FFA347;
-    line-height: 40px;
-    font-size: 16px;
-    color: #FFF;
-    float: left;
-}
-.preview-right .preview-shopinfo .shopinfo-main{
-    width: 100%;
-    padding: 0 15px;
-    background-color: #FFF;
-    float: left;
+@media screen and (min-width:768px) {
+.recommendBox{margin-bottom:16px;overflow: hidden;}
+.recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
+#productRecommend{padding:10px;background: #fff}
+#productRecommend li{float:left;width:153px !important;height:205px;overflow:hidden;list-style: none;}
+#productRecommend li .item{width:153px;height:205px;margin:0 auto;line-height:22px}
+#productRecommend li .item a{display:block;width:100%;height:100%;color:#93979F}
+#productRecommend li .item a:hover{color:#E15616}
+#productRecommend li .item img{display:block;width:100%;height:100%}
+#productRecommend li .item span{max-height:44px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
+#productRecommend .swiper-wrapper{height:205px;}
+#productRecommend .swiper-pagination{width:100%;height:14px;z-index:1;text-align:center;font-size:0;}
+#productRecommend .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#productRecommend .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#productRecommend .swiper-pagination span.on{width:28px;opacity:1;}
+    .preview-container {
+        width: 100%;
+        height: auto;
+        background-color: #f6f6f6;
+        margin-bottom: 20px;
+    }
+
+    .preview-container-top {
+        width: 100%;
+        height: 80px;
+        background-color: #FFC684;
+        font-size: 30px;
+        color: #FFF;
+        line-height: 80px;
+        text-align: center;
+    }
+
+    .inner-container {
+        width: 1184px;
+        height: auto;
+        margin: 0 auto;
+    }
+
+    .preview-header {
+        padding: 12px;
+        background-color: #FFFFFF;
+        margin: 10px 0 20px 0;
+        overflow: hidden
+    }
+
+    .preview-header .preview-banner {
+        width: 452px;
+        height: 545px;
+        float: left;
+        position: relative;
+    }
+
+    .preview-header .preview-info {
+        width: 685px;
+        float: right;
+        opacity: 0;
+    }
+
+    .preview-header .preview-info.active {
+        opacity: 1;
+    }
+
+    .preview-header .preview-banner-big {
+        width: 452px;
+        height: 452px;
+        float: left;
+    }
+
+    .preview-header .preview-banner-big .preview-img {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+
+    .preview-header .preview-banner-big span {
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 215px;
+        height: 215px;
+        border: 1px solid #aaa;
+        background: rgba(255, 208, 22, 0.4);
+        opacity: .5;
+        filter: alpha(opacity:50);
+        cursor: move;
+    }
+
+    .preview-header .preview-banner-small {
+        width: 100%;
+        height: 98px;
+        padding: 10px;
+        float: left;
+    }
+
+    .preview-header .preview-banner-small .item {
+        width: 78px;
+        height: 78px;
+        margin-right: 9px;
+        float: left;
+        background-color: #fff;
+        cursor: pointer;
+        list-style: none;
+        opacity: .5;
+    }
+
+    .preview-header .preview-banner-small .item:last-child {
+        margin-right: 0;
+    }
+
+    .preview-header .preview-banner-small .item img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        -moz-transition: .5s;
+        -webkit-transition: .5s;
+        transition: .5s;
+    }
+
+    .preview-header .preview-banner-small .item.item-cur {
+        border-color: #e15616;
+    }
+
+    .preview-header .preview-banner-small .item.item-cur img {
+        opacity: 1;
+    }
+
+    .preview-header .preview-box {
+        display: none;
+        overflow: hidden;
+        position: absolute;
+        right: -555px;
+        top: 0;
+        width: 548px;
+        height: 548px;
+        border: 1px solid #e4e4e4;
+        z-index: 9999;
+        background: #FFFFFF;
+    }
+
+    .preview-header .preview-box img {
+        width: 1096px;
+        height: 1096px;
+        margin-right: 10px;
+        display: block;
+    }
+
+    .preview-info .preview-info-title {
+        width: 100%;
+        height: auto;
+        float: left;
+        position: relative;
+    }
+
+    .preview-info .preview-info-title .info-p {
+        height: auto;
+        float: left;
+    }
+
+    .preview-info .preview-info-title .info-p.classly {
+        font-size: 14px;
+        color: #999;
+    }
+
+    .preview-info .preview-info-title .info-p.name {
+        font-size: 18px;
+        color: #333;
+        font-weight: bold;
+        line-height: 24px;
+        height: auto;
+        width: 100%;
+        margin: 10px 0;
+    }
+
+    .preview-info .preview-info-title .info-p.label .label-s {
+        font-size: 12px;
+        background: #A69DFE;
+        color: #fff;
+        padding: 5px 10px;
+        border-radius: 2px;
+        margin: 0 10px 5px 0;
+        display: inline-block;
+    }
+
+    .preview-info .preview-info-main {
+        padding: 16px 20px;
+        background-color: #f3f7fe;
+        border-radius: 2px;
+        float: left;
+        margin-top: 15px;
+    }
+
+    .preview-info .preview-info-main .info {
+        width: 50%;
+        height: 30px;
+        float: left;
+        margin-bottom: 5px;
+        line-height: 30px;
+    }
+
+    .preview-info .preview-info-main .info .label {
+        width: 70px;
+        height: 30px;
+        float: left;
+        display: block;
+        font-size: 14px;
+        line-height: 30px;
+        text-align: right;
+        color: #999;
+    }
+
+    .preview-info .preview-info-main .info p {
+        float: left;
+        height: 100%;
+        padding-left: 20px;
+    }
+
+    .preview-info .preview-info-main .info.price .fave-tag {
+        width: 54px;
+        height: 22px;
+        display: inline-block;
+        border-radius: 2px;
+        background: linear-gradient(45deg, rgba(255, 42, 42, 1) 0%, rgba(255, 145, 0, 1) 100%);
+        box-shadow: 0px 3px 6px rgba(255, 145, 0, 0.17);
+        font-size: 14px;
+        text-align: center;
+        line-height: 22px;
+        color: #FFF;
+        float: left;
+        margin-right: 5px;
+        margin-top: 4px;
+    }
+
+    .preview-info .preview-info-main .info.price .fave-text {
+        font-size: 14px;
+        color: #FF2A2A;
+    }
+
+    .preview-info .preview-info-main .info.price .fave-text .big {
+        font-size: 16px;
+    }
+
+    .preview-info .preview-info-main .info.price .fave-text-none {
+        font-size: 14px;
+        color: #333;
+        text-decoration: line-through;
+    }
+
+    .preview-info .preview-info-main .info .num-box {
+        width: 91px;
+        height: 24px;
+        border-radius: 4px;
+        border: 1px solid #EEE;
+        float: left;
+        margin-top: 2px;
+        margin-left: 20px;
+    }
+
+    .preview-info .preview-info-main .info .num-box span {
+        display: inline-block;
+        float: left;
+        line-height: 24px;
+        font-size: 14px;
+        text-align: center;
+        height: 24px;
+    }
+
+    .preview-info .preview-info-main .info .num-box span:nth-child(2) {
+        width: 45px;
+        border-right: 1px solid #EEE;
+        border-left: 1px solid #EEE;
+        color: #e15616;
+    }
+
+    .preview-info .preview-info-main .info .num-box span:nth-child(1),
+    .preview-info .preview-info-main .info .num-box span:nth-child(3) {
+        width: 22px;
+        color: #999;
+    }
+
+    .preview-info .preview-info-main .info.sever {
+        margin-top: 10px;
+        border-top: 1px dashed #F9DDD0;
+        line-height: 40px;
+        height: 40px;
+    }
+
+    .preview-info .preview-info-main .info.sever .label {
+        line-height: 40px;
+    }
+
+    .preview-info .preview-info-main .info.sever .text {
+        padding-left: 24px;
+        background: url("/public/3.0/img/product/selected.png") left center no-repeat;
+        margin-right: 15px;
+    }
+
+    .preview-info .preview-info-btn {
+        width: 100%;
+        height: 36px;
+        float: left;
+        margin-top: 20px;
+    }
+
+    .preview-info .preview-info-btn .info-btn {
+        float: left;
+        width: 154px;
+        height: 36px;
+        float: left;
+        margin: 0 10px;
+        border-radius: 2px;
+        line-height: 36px;
+        text-align: center;
+        font-size: 14px;
+    }
+
+    .preview-info .preview-info-btn .info-btn.buy {
+        background-color: #e15616;
+        color: #FFF;
+    }
+
+    .preview-info .preview-info-btn .info-btn.cart {
+        background-color: #FFF;
+        color: #e15616;
+        border: 1px solid #e15616;
+    }
+
+    /*下半部分*/
+    .preview-bottom {
+        width: 100%;
+        min-height: 522px;
+    }
+
+    .preview-bottom .preview-left {
+        width: 890px;
+        min-height: 522px;
+        float: left;
+        background: #fff;
+    }
+
+    .preview-bottom .preview-right {
+        width: 290px;
+        min-height: 522px;
+        float: right;
+    }
+
+    .preview-bottom .preview-left .preview-tabs {
+        width: 100%;
+        height: 40px;
+        border-bottom: 1px solid #e15616;
+    }
+
+    .preview-bottom .preview-left .preview-tabs-item {
+        width: 128px;
+        height: 39px;
+        line-height: 39px;
+        background-color: #FFF;
+        font-size: 16px;
+        color: #333;
+        float: left;
+        text-align: center;
+        cursor: pointer;
+    }
+
+    .preview-bottom .preview-left .preview-tabs-item.active {
+        background-color: #e15616;
+        color: #FFF;
+    }
+
+    .preview-bottom .preview-left .preview-section {
+        width: 100%;
+        height: auto;
+        padding: 10px 20px;
+    }
+
+    .preview-bottom .preview-left .preview-section-html {
+        width: 100%;
+        height: auto;
+    }
+
+    .preview-bottom .preview-left .preview-section-html img {
+        width: 100%;
+        height: auto;
+        display: block;
+    }
+
+    .preview-bottom .preview-section .parameter-main {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        background-color: #FFFFFF;
+        border: 1px solid #EFEFEF;
+        border-radius: 4px;
+    }
+
+    .preview-bottom .preview-section .parameter-main .item-tabody {
+        width: 100%;
+        height: auto;
+        border-bottom: 1px solid #EFEFEF;
+        font-size: 14px;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .preview-bottom .preview-section .parameter-main .item-td {
+        width: 238px;
+        float: left;
+        border-right: 1px solid #EFEFEF;
+        color: #999999;
+        padding: 10px 20px;
+        display: flex;
+        flex: 2;
+        flex-direction: column;
+    }
+
+    .preview-bottom .preview-section .parameter-main .item-tr {
+        width: 462px;
+        float: left;
+        color: #333333;
+        padding: 10px 20px;
+        display: flex;
+        flex: 8;
+        flex-direction: column;
+    }
+
+    .preview-bottom .preview-section .parameter-main .item-tr:last-child {
+        border-bottom: none;
+    }
+
+    .preview-bottom .preview-section .parameter-text {
+        width: 100%;
+        height: auto;
+        margin-bottom: 30px;
+    }
+
+    .preview-bottom .preview-section .parameter-text-title {
+        font-size: 16px;
+        color: #333;
+        line-height: 36px;
+        text-align: left;
+    }
+
+    .preview-bottom .preview-section .parameter-text-p {
+        font-size: 14px;
+        color: #999;
+        line-height: 24px;
+        text-align: justify;
+    }
+
+    .preview-bottom .preview-section .none {
+        font-size: 14px;
+        color: #e15616;
+        line-height: 36px;
+        text-align: center;
+    }
+
+    .preview-right .preview-shopinfo {
+        width: 100%;
+        height: auto;
+        background-color: #FFF;
+        margin-bottom: 20px;
+        float: left;
+    }
+
+    .preview-right .preview-shopinfo .title {
+        width: 100%;
+        padding: 0 15px;
+        height: 40px;
+        background-color: #FFA347;
+        line-height: 40px;
+        font-size: 16px;
+        float: left;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main {
+        width: 100%;
+        padding: 0 15px;
+        background-color: #FFF;
+        float: left;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main .name {
+        width: 100%;
+        height: 40px;
+        border-bottom: 1px solid #f7f7f7;
+        float: left;
+        font-size: 16px;
+        color: #333;
+        line-height: 40px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main .shopinfo-text {
+        width: 100%;
+        height: auto;
+        float: left;
+        margin-bottom: 10px;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main .shopinfo-text h1 {
+        font-size: 14px;
+        color: #333;
+        font-weight: normal;
+        line-height: 24px;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main .shopinfo-text p {
+        font-size: 12px;
+        color: #666;
+        font-weight: normal;
+        line-height: 24px;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main .shopinfo-text .star {
+        width: 16px;
+        height: 16px;
+        display: block;
+        float: left;
+        margin: 0 4px;
+        background: url(/web/supplier/img/icon-star@2x.png) no-repeat center center;
+        margin-top: 4px;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main .shopinfo-btn {
+        width: 266px;
+        height: 36px;
+        background: rgba(225, 86, 22, 1);
+        opacity: 1;
+        border-radius: 2px;
+        margin: 0 auto;
+        font-size: 14px;
+        color: #FFFF;
+        line-height: 36px;
+        text-align: center;
+        cursor: pointer;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main .tel {
+        width: 120px;
+        height: 131px;
+        float: left;
+        padding-top: 30px;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main .tel p {
+        font-size: 16px;
+        color: #333;
+        line-height: 24px;
+        text-align: left;
+    }
+
+    .preview-right .preview-shopinfo .shopinfo-main .tel-icon {
+        width: 131px;
+        height: 131px;
+        float: right;
+        background: url(/web/supplier/img/icon-tel.png) no-repeat center center;
+        background-size: contain;
+    }
+
+    .member-detail {
+        color: #999999;
+        font-size: 14px;
+    }
+
+    .loginWithParam {
+        color: #FC4444;
+        font-size: 14px;
+    }
+
+    .dedArea-title {
+        padding: 10px 20px;
+        border-bottom: 1px solid #E15616;
+        font-size: 16px;
+    }
+
+    .recommended-item div {
+        width: 152px !important;
+        height: 153px;
+        margin-top: 10px;
+    }
+
+    .recommended-item img {
+        width: 100%;
+        height: 100%;
+    }
+
+    .recommended-item p {
+        color: #666666;
+    }
+
+    .main {
+        width: 1184px;
+        margin: 20px auto 0;
+    }
+
+    .title {
+        line-height: 40px;
+        padding-left: 10px;
+        margin: 0 auto;
+        font-size: 16px;
+        color: #333333;
+        border-bottom: 1px solid #E15616;
+        font-weight: bold;
+    }
+
+    .mainContent {
+        width: 100%;
+        font-size: 0;
+    }
+
+    .mainContentLeft {
+        width: 100%;
+        display: inline-block;
+        background-color: #fff;
+        vertical-align: top;
+    }
+
+    .Disclaimer {
+        padding: 20px 10px;
+        background-color: #fff;
+    }
+
+    .Disclaimer h3 {
+        font-size: 14px;
+        margin-bottom: 20px;
+        color: #333333;
+    }
+
+    .Disclaimer p {
+        font-size: 14px;
+        color: #999999;
+        padding: 0 10px
+    }
+
+    .contentHtml {
+        font-size: 14px;
+        padding: 0 20px 10px;
+        text-align: left;
+        margin: auto;
+    }
+
+    .contentHtml img {
+        display: block;
+        margin: 20px auto 0;
+        max-width: 100%;
+    }
+
+    .yishou_img {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(-9%, 7%);
+        width: 15%;
+        opacity: 0;
+    }
+
+    .iconLogo {
+        position: absolute;
+        left: 0;
+        top: 0;
+        color: #fff;
+        font-size: 14px;
+        padding: 5px 12px;
+        border-radius: 0 0 10px 0;
+    }
+
+    .brandMain {
+        position: absolute;
+        left: 30px;
+        top: 29px;
+        width: 90%;
+        padding: 15px;
+        border: 1px solid #F2F2F2;
+        border-radius: 10px;
+        background-color: #fff;
+        cursor: pointer;
+        line-height: 24px;
+        letter-spacing: 1.5px;
+    }
+
+    .Brand img {
+        vertical-align: -1px;
+        margin-left: 5px;
+    }
+
+    .zheng-graphics {
+        position: absolute;
+        left: 60px;
+        top: -9px;
+        width: 15px;
+        height: 15px;
+        background-color: #fff;
+        border: 1px solid rgba(234, 234, 234, 1);
+        /*box-shadow: 2px -2px 5px -2px rgba(0, 0, 0, 0.16);*/
+        transform: rotate(-45deg);
+        border-left: 0;
+        border-bottom: 0;
+        z-index: 1;
+    }
+
+    .brandMain:hover {
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .16);
+    }
+
+    .brandMain:hover .zheng-graphics {
+        box-shadow: 2px -2px 5px -2px rgba(0, 0, 0, 0.16);
+    }
+
+    .defaulImg div {
+        border: none;
+    }
+
+    .show {
+        opacity: 1 !important;
+    }
+
+    .ercode img {
+        opacity: 0;
+    }
+
+    .hoverBrand:hover .brandMain {
+        display: block;
+    }
+
+    .swiper-pagination {
+        bottom: 0 !important;
+    }
+
+    .preview-header .preview-banner-small .item.addImg {
+        border: 1px solid #e15616;
+        opacity:1;
+    }
 }
-.preview-right .preview-shopinfo .shopinfo-main .name{
-    width: 100%;
-    height: 40px;
-    border-bottom: 1px solid #f7f7f7;
-    float: left;
-    font-size: 16px;
-    color: #333;
-    line-height: 40px;
+
+
+/* 移动端*/
+@media screen and (max-width:768px){
+.inner-container{width: 100%;overflow: hidden;}
+#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}
+#imgShown{width: 100%; height: 100vw;position: relative;}
+.preview-info{
+    box-sizing: border-box;
+    padding: 0 3.3vw;
     overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-}
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text{
-    width: 100%;
-    height: auto;
-    float: left;
-    margin-bottom: 10px;
-}
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text h1{
-    font-size: 14px;
-    color: #333;
-    font-weight: normal;
-    line-height: 24px;
-}
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text p{
-    font-size: 12px;
-    color: #666;
-    font-weight: normal;
-    line-height: 24px;
-}
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-text .star{
-    width: 16px;
-    height: 16px;
-    display: block;
-    float: left;
-    margin: 0 4px;
-    background: url(/web/supplier/img/icon-star@2x.png)no-repeat center center;
-    margin-top: 4px;
-}
-.preview-right .preview-shopinfo .shopinfo-main .shopinfo-btn{
-    width:266px;
-    height:36px;
-    background:rgba(225,86,22,1);
-    opacity:1;
-    border-radius:2px;
-    margin: 0 auto;
-    font-size: 14px;
-    color: #FFFF;
-    line-height: 36px;
-    text-align: center;
-    cursor: pointer;
-}
-.preview-right .preview-shopinfo .shopinfo-main .tel{
-    width: 120px;
-    height: 131px;
-    float: left;
-    padding-top: 30px;
-}
-.preview-right .preview-shopinfo .shopinfo-main .tel p{
-    font-size: 16px;
-    color: #333;
-    line-height: 24px;
-    text-align: left;
-}
-.preview-right .preview-shopinfo .shopinfo-main .tel-icon{
-    width:  131px;
-    height: 131px;
-    float: right;
-    background: url(/web/supplier/img/icon-tel.png)no-repeat center center;
-    background-size: contain;
-}
-.member-detail{
-    color:#999999 ;
-    font-size: 14px;
-}
-.loginWithParam {
-    color: #FC4444;
-    font-size: 14px;
- }
-.dedArea-title {
-    padding: 10px 20px;
-    border-bottom: 1px solid #E15616;
-    font-size: 16px;
-}
-.recommended-item div {
-    width: 152px !important;
-    height: 153px;
-    margin-top: 10px;
-}
-.recommended-item img{
-    width: 100%;
-    height: 100%;
-}
-.recommended-item p{
-    color: #666666;
-}
+    background: #fff
 
-.main {
-    width: 1200px;
-    margin: 20px auto 0;
-}
- .title{
-    width: 1200px;
-    line-height: 40px;
-    padding-left: 10px;
-    margin: 0 auto;
-    background-color: #fff;
-    font-size: 16px;
-    color: #333333;
-    border-bottom: 1px solid #E15616;
-    font-weight: bold;
-  }
-.mainContent{
-    width: 100%;
-    font-size: 0;
-}
-.mainContentLeft {
-    width: 1200px;
-    display: inline-block;
-    background-color: #fff;
-    vertical-align: top;
-}
-.Disclaimer {
-    padding: 20px 10px;
-    background-color: #fff;
-}
-.Disclaimer h3 {
-    font-size: 14px;
-    margin-bottom: 20px;
-    color: #333333;
-}
-.Disclaimer p {
-    font-size: 14px;
-    color: #999999;
-    padding: 0 10px
-}
-.contentHtml {
-    font-size: 14px;
-    padding: 0 20px 10px;
-    text-align: left;
-    width: 1200px;
-    margin: auto;
-}
-.contentHtml img {
-    display: block;
-    /*width: 100%;*/
-    /*height: 100%;*/
-    margin: 20px auto 0;
-    max-width: 100%;
-}
-.yishou_img {
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translate(-9%, 7%);
-    width: 15%;
-    opacity: 0;
-}
-.iconLogo {
-    position: absolute;
-    left: 0;
-    top: 0;
-    color: #fff;
-    font-size: 14px;
-    padding: 5px 12px;
-    border-radius: 0 0 10px 0;
-}
-.brandMain {
-    position: absolute;
-    left: 30px;
-    top: 29px;
-    width: 90%;
-    padding: 15px;
-    border: 1px solid #F2F2F2;
-    border-radius: 10px;
-    background-color: #fff;
-    cursor: pointer;
-    line-height: 24px;
-    letter-spacing: 1.5px;
-}
-.Brand img {
-    vertical-align: -1px;
-    margin-left: 5px;
 }
+.preview-info-main{
+    box-sizing: border-box;
+    padding: 2.8vw;
+    font-size: 3.4vw;
+    line-height: 7.5vw;
+    color: #93979F;
+    background: #f3f7fe;
+    border-radius: 2px;
+    position: relative;
+    margin: 3.5vw 0;
+    overflow: hidden
+}
+  .preview-info .preview-info-main .info {
+        width: 100%;
+        height: 30px;
+        float: left;
+        margin-bottom: 5px;
+        line-height: 30px;
+    }
 
-.zheng-graphics {
-    position: absolute;
-    left: 60px;
-    top: -9px;
-    width: 15px;
-    height: 15px;
-    background-color: #fff;
-    border: 1px solid rgba(234, 234, 234, 1);
-    /*box-shadow: 2px -2px 5px -2px rgba(0, 0, 0, 0.16);*/
-    transform: rotate(-45deg);
-    border-left: 0;
-    border-bottom: 0;
-    z-index: 1;
-}
-.brandMain:hover{
-    box-shadow: 0px 0px 10px 0px rgba(0,0,0,.16);
-}
-.brandMain:hover .zheng-graphics{
-    box-shadow: 2px -2px 5px -2px rgba(0, 0, 0, 0.16);
-}
+    .preview-info .preview-info-main .info .label {
+        width: 70px;
+        height: 30px;
+        float: left;
+        display: block;
+        font-size: 14px;
+        line-height: 30px;
+        text-align: right;
+        color: #999;
+    }
 
-.defaulImg div{
-    border: none;
-}
-.show{
-   opacity: 1 !important;
-}
-.ercode img{
-    opacity: 0;
-}
-.hoverBrand:hover .brandMain{
-   display: block;
-}
-.swiper-pagination{
-    bottom: 0 !important;
-}
- .addImg{
-        border:1px solid #e15616;
+    .preview-info .preview-info-main .info p {
+        float: left;
+        height: 100%;
+        padding-left: 20px;
+    }
+    .preview-info-title{
+        font-size: 16px;
+        color: #22272e;
+        padding-top: 15px
     }
+    .ercode{
+        padding: 2.8vw;
+    }
+    .ercode img{
+        width: 100%;
+        height: 100%;
+    }
+    .main{
+        margin-top: 5vw;
+        padding: 2.8vw;
+        background: #fff
+    }
+}

src/main/resources/static/css/help/help.css

@@ -8,19 +8,33 @@ li{list-style:none}
 .navLayout .left .title{color:#22272e;font-weight:bold;border-bottom:1px solid #f5f5f5}
 .navLayout .navList .tab{display:block;color:#22272e;position:relative}
 .navLayout .navList .tab:before{content:'\276F';font-weight:normal;position:absolute;right:10px;top:0;transform:rotate(90deg);width:32px;height:32px;line-height:32px;text-align:center;color:#bec2c9}
-.navLayout .navList .tab.on:before{top:18px;transform:rotate(270deg);color:#e15616}
-.navLayout .navList .tab.on{color:#e15616}
-.navLayout .navList .con{position:relative}
+.navLayout .navList .con{position:relative;}
 .navLayout .navList .con:before,.navLayout .navList .con:after{content:'';position:absolute;width:168px;border-top:1px solid #f5f5f5;left:16px}
 .navLayout .navList .con:before{top:0}
 .navLayout .navList .con:after{bottom:0}
 .navLayout .navList .con a{display:block;font-size:14px;color:#627386;text-indent:32px}
+.navLayout .navList.on .tab:before{top:18px;transform:rotate(270deg);color:#e15616}
+.navLayout .navList.on .tab{color:#e15616}
 .navLayout .navList .con a.on{color:#e15616;background-color:#ffe6dc}
 .navLayout .right{float:right;width:968px}
 .pageContent{background:#FFF;padding:16px}
-
-
-
+.pageContent form{
+    width: 498px;
+    margin: 0 auto;
+    padding: 50px 0;
+}
+/*.pageContent form button{
+    display: block;
+    margin: 0 auto;
+    width: 200px;
+    height: 50px;
+    line-height: 50px;
+    background-color: #e15616;
+    border-radius: 2px;
+    text-align: center;
+    font-size: 18px;
+    color: #FFF;
+}*/
 
 
 
@@ -30,6 +44,25 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
+.navLayout{background:#FFF;border-top:1px solid #F5F5F5;border-bottom:1px solid #F5F5F5;}
+.navLayout .crumbs{display:none;}
+.navLayout .left{width:29.3vw;border-right:1px solid #F5F5F5;line-height:11.8vw;white-space:nowrap;text-indent:3.3vw;font-size:3.4vw;}
+.navLayout .left .title{color:#22272e;font-weight:bold;border-bottom:1px solid #f5f5f5;font-size: 3.7vw;}
+.navLayout .navList .tab{display:block;color:#22272e;position:relative}
+.navLayout .navList .tab:before{content:'\276F';font-weight:normal;position:absolute;right:1.4vw;top:1vw;transform:rotate(90deg);width:6.4vw;height:6.4vw;line-height:6.4vw;text-align:center;color:#bec2c9}
+.navLayout .navList .con a{display:block;color:#9aa5b5;}
+.navLayout .navList.on .tab:before{top:4vw;transform:rotate(270deg);color:#e15616}
+.navLayout .navList.on .tab{color:#e15616}
+.navLayout .navList .con a.on{color:#e15616;background-color:#ffe6dc}
+.navLayout .right{width:70.5vw}
+.pageContent{padding:3.3vw}
+
+.pageContent .formLine .diyBox {
+    width: 24vw;
+}
+
+
+
 
 
 }

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

@@ -47,5 +47,13 @@ var articleRelated = new Vue({
     },
     mounted: function () {
         var _self = this;
+        var thisUri = window.location.href;
+        $('#qrcode').qrcode({
+            "render": "canvas",
+            "width": '120',
+            "height": '120',
+            "color": "#3a3",
+            "text": thisUri
+        });
     }
 });

src/main/resources/static/js/flea-market/list.js

@@ -106,7 +106,7 @@ var fleaMarketList = new Vue({
                 })
           },
           getproduct:function(id){
-            window.location.href = '/flea-market/secondDetail.html?productID='+id;
+            window.location.href = '/flea-market/detail.html?productID='+id;
             return false
           },
            returnedTarget:function(){//对象合并 IE 兼容方法

src/main/resources/static/js/flea-market/secondDetail.js

@@ -36,6 +36,30 @@ var fleaMarket = new Vue({
           SecondApi.ProductDetail({productId:_this.id},function (res) {
            if(res.code==0){
                 _this.isRequest =true;
+                    setTimeout(function(){
+                        if (isPC) {
+                            var magnifier = new ImageMagnifier(
+                                '#imgShown #CM____pic_thumb li'
+                                ,'#imgShown .bigImage'
+                                ,'#imgShown .preview-box'
+                                ,'#imgShown .mask'
+                                ,'#imgShown .bigitem'
+                                ,"on"
+                            ).init();
+                        } else {
+                            var swiper = new Swiper('#swiperImage', {
+                                loop : true,
+                                autoplay: {
+                                    delay: 2000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination',
+                                    type: 'fraction'
+                                }
+                            });
+                        }
+                    },500);
            }else {
                 _this.isRequest =false;
            }
@@ -129,7 +153,7 @@ var fleaMarket = new Vue({
         //相關推薦輪播
         var mySwiper = new Swiper('.swiper-container',{
                 slidesPerView: 7,
-                spaceBetween: 18,
+                spaceBetween: 12,
                 slidesPerGroup: 7,
                 autoplay: {
                     delay:10000,

src/main/resources/static/js/help/help.js

@@ -0,0 +1,59 @@
+;
+jqMultipleShow("click", ".navList", ".tab", ".con");
+
+var helpSuggestion = new Vue({
+    el: "#suggestion",
+    data: {
+        btnLoading: false,
+        userId: 0,
+        suggestion: {
+            type: 1,
+            title: "",
+            content: "",
+            name: "",
+            phone: ""
+        },
+        rule:{
+            name: '^[a-zA-Z\\u4e00-\\u9fa5]{2,}$',
+            phone: '^\\d{6,12}$'
+        }
+    },
+    methods: {
+        blurHandle: function(event) { // 失去焦点校验
+            var el = event.currentTarget;
+            verifyHandle(el);
+        },
+        postSuggestion: function () {  // 账号登录
+            var _self = this;
+            var pass = verifyForm();
+            if (this.btnLoading) {
+                return false;
+            }
+            this.$nextTick(function () {
+                if (!pass) {
+                    return false;
+                }
+                _self.btnLoading = true;
+                var params = {
+	                suggestionTypeID: _self.suggestion.type,
+	                userID: _self.userId,
+	                title: _self.suggestion.title,
+	                content: _self.suggestion.content,
+	                linkMan: _self.suggestion.name,
+	                mobile: _self.suggestion.phone
+                };
+                console.log(JSON.stringify(params));
+                $.post("/help/suggestion", params, function(res){
+                    alertInfo(res.msg);
+                    _self.btnLoading = false;
+                });
+            });
+        }
+
+    },
+    mounted: function () {
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+        }
+    }
+});

src/main/resources/static/lib/jquery.qrcode.min.js

@@ -0,0 +1,28 @@
+(function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){this.typeNumber=a;this.errorCorrectLevel=c;this.modules=null;this.moduleCount=0;this.dataCache=null;this.dataList=[]}function q(a,c){if(void 0==a.length)throw Error(a.length+"/"+c);for(var d=0;d<a.length&&0==a[d];)d++;this.num=Array(a.length-d+c);for(var b=0;b<a.length-d;b++)this.num[b]=a[b+d]}function p(a,c){this.totalCount=a;this.dataCount=c}function t(){this.buffer=[];this.length=0}u.prototype={getLength:function(){return this.data.length},
+write:function(a){for(var c=0;c<this.data.length;c++)a.put(this.data.charCodeAt(c),8)}};o.prototype={addData:function(a){this.dataList.push(new u(a));this.dataCache=null},isDark:function(a,c){if(0>a||this.moduleCount<=a||0>c||this.moduleCount<=c)throw Error(a+","+c);return this.modules[a][c]},getModuleCount:function(){return this.moduleCount},make:function(){if(1>this.typeNumber){for(var a=1,a=1;40>a;a++){for(var c=p.getRSBlocks(a,this.errorCorrectLevel),d=new t,b=0,e=0;e<c.length;e++)b+=c[e].dataCount;
+for(e=0;e<this.dataList.length;e++)c=this.dataList[e],d.put(c.mode,4),d.put(c.getLength(),j.getLengthInBits(c.mode,a)),c.write(d);if(d.getLengthInBits()<=8*b)break}this.typeNumber=a}this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17;this.modules=Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){this.modules[d]=Array(this.moduleCount);for(var b=0;b<this.moduleCount;b++)this.modules[d][b]=null}this.setupPositionProbePattern(0,0);this.setupPositionProbePattern(this.moduleCount-
+7,0);this.setupPositionProbePattern(0,this.moduleCount-7);this.setupPositionAdjustPattern();this.setupTimingPattern();this.setupTypeInfo(a,c);7<=this.typeNumber&&this.setupTypeNumber(a);null==this.dataCache&&(this.dataCache=o.createData(this.typeNumber,this.errorCorrectLevel,this.dataList));this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,c){for(var d=-1;7>=d;d++)if(!(-1>=a+d||this.moduleCount<=a+d))for(var b=-1;7>=b;b++)-1>=c+b||this.moduleCount<=c+b||(this.modules[a+d][c+b]=
+0<=d&&6>=d&&(0==b||6==b)||0<=b&&6>=b&&(0==d||6==d)||2<=d&&4>=d&&2<=b&&4>=b?!0:!1)},getBestMaskPattern:function(){for(var a=0,c=0,d=0;8>d;d++){this.makeImpl(!0,d);var b=j.getLostPoint(this);if(0==d||a>b)a=b,c=d}return c},createMovieClip:function(a,c,d){a=a.createEmptyMovieClip(c,d);this.make();for(c=0;c<this.modules.length;c++)for(var d=1*c,b=0;b<this.modules[c].length;b++){var e=1*b;this.modules[c][b]&&(a.beginFill(0,100),a.moveTo(e,d),a.lineTo(e+1,d),a.lineTo(e+1,d+1),a.lineTo(e,d+1),a.endFill())}return a},
+setupTimingPattern:function(){for(var a=8;a<this.moduleCount-8;a++)null==this.modules[a][6]&&(this.modules[a][6]=0==a%2);for(a=8;a<this.moduleCount-8;a++)null==this.modules[6][a]&&(this.modules[6][a]=0==a%2)},setupPositionAdjustPattern:function(){for(var a=j.getPatternPosition(this.typeNumber),c=0;c<a.length;c++)for(var d=0;d<a.length;d++){var b=a[c],e=a[d];if(null==this.modules[b][e])for(var f=-2;2>=f;f++)for(var i=-2;2>=i;i++)this.modules[b+f][e+i]=-2==f||2==f||-2==i||2==i||0==f&&0==i?!0:!1}},setupTypeNumber:function(a){for(var c=
+j.getBCHTypeNumber(this.typeNumber),d=0;18>d;d++){var b=!a&&1==(c>>d&1);this.modules[Math.floor(d/3)][d%3+this.moduleCount-8-3]=b}for(d=0;18>d;d++)b=!a&&1==(c>>d&1),this.modules[d%3+this.moduleCount-8-3][Math.floor(d/3)]=b},setupTypeInfo:function(a,c){for(var d=j.getBCHTypeInfo(this.errorCorrectLevel<<3|c),b=0;15>b;b++){var e=!a&&1==(d>>b&1);6>b?this.modules[b][8]=e:8>b?this.modules[b+1][8]=e:this.modules[this.moduleCount-15+b][8]=e}for(b=0;15>b;b++)e=!a&&1==(d>>b&1),8>b?this.modules[8][this.moduleCount-
+b-1]=e:9>b?this.modules[8][15-b-1+1]=e:this.modules[8][15-b-1]=e;this.modules[this.moduleCount-8][8]=!a},mapData:function(a,c){for(var d=-1,b=this.moduleCount-1,e=7,f=0,i=this.moduleCount-1;0<i;i-=2)for(6==i&&i--;;){for(var g=0;2>g;g++)if(null==this.modules[b][i-g]){var n=!1;f<a.length&&(n=1==(a[f]>>>e&1));j.getMask(c,b,i-g)&&(n=!n);this.modules[b][i-g]=n;e--; -1==e&&(f++,e=7)}b+=d;if(0>b||this.moduleCount<=b){b-=d;d=-d;break}}}};o.PAD0=236;o.PAD1=17;o.createData=function(a,c,d){for(var c=p.getRSBlocks(a,
+c),b=new t,e=0;e<d.length;e++){var f=d[e];b.put(f.mode,4);b.put(f.getLength(),j.getLengthInBits(f.mode,a));f.write(b)}for(e=a=0;e<c.length;e++)a+=c[e].dataCount;if(b.getLengthInBits()>8*a)throw Error("code length overflow. ("+b.getLengthInBits()+">"+8*a+")");for(b.getLengthInBits()+4<=8*a&&b.put(0,4);0!=b.getLengthInBits()%8;)b.putBit(!1);for(;!(b.getLengthInBits()>=8*a);){b.put(o.PAD0,8);if(b.getLengthInBits()>=8*a)break;b.put(o.PAD1,8)}return o.createBytes(b,c)};o.createBytes=function(a,c){for(var d=
+0,b=0,e=0,f=Array(c.length),i=Array(c.length),g=0;g<c.length;g++){var n=c[g].dataCount,h=c[g].totalCount-n,b=Math.max(b,n),e=Math.max(e,h);f[g]=Array(n);for(var k=0;k<f[g].length;k++)f[g][k]=255&a.buffer[k+d];d+=n;k=j.getErrorCorrectPolynomial(h);n=(new q(f[g],k.getLength()-1)).mod(k);i[g]=Array(k.getLength()-1);for(k=0;k<i[g].length;k++)h=k+n.getLength()-i[g].length,i[g][k]=0<=h?n.get(h):0}for(k=g=0;k<c.length;k++)g+=c[k].totalCount;d=Array(g);for(k=n=0;k<b;k++)for(g=0;g<c.length;g++)k<f[g].length&&
+(d[n++]=f[g][k]);for(k=0;k<e;k++)for(g=0;g<c.length;g++)k<i[g].length&&(d[n++]=i[g][k]);return d};s=4;for(var j={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,
+78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(a){for(var c=a<<10;0<=j.getBCHDigit(c)-j.getBCHDigit(j.G15);)c^=j.G15<<j.getBCHDigit(c)-j.getBCHDigit(j.G15);return(a<<10|c)^j.G15_MASK},getBCHTypeNumber:function(a){for(var c=a<<12;0<=j.getBCHDigit(c)-
+j.getBCHDigit(j.G18);)c^=j.G18<<j.getBCHDigit(c)-j.getBCHDigit(j.G18);return a<<12|c},getBCHDigit:function(a){for(var c=0;0!=a;)c++,a>>>=1;return c},getPatternPosition:function(a){return j.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,c,d){switch(a){case 0:return 0==(c+d)%2;case 1:return 0==c%2;case 2:return 0==d%3;case 3:return 0==(c+d)%3;case 4:return 0==(Math.floor(c/2)+Math.floor(d/3))%2;case 5:return 0==c*d%2+c*d%3;case 6:return 0==(c*d%2+c*d%3)%2;case 7:return 0==(c*d%3+(c+d)%2)%2;default:throw Error("bad maskPattern:"+
+a);}},getErrorCorrectPolynomial:function(a){for(var c=new q([1],0),d=0;d<a;d++)c=c.multiply(new q([1,l.gexp(d)],0));return c},getLengthInBits:function(a,c){if(1<=c&&10>c)switch(a){case 1:return 10;case 2:return 9;case s:return 8;case 8:return 8;default:throw Error("mode:"+a);}else if(27>c)switch(a){case 1:return 12;case 2:return 11;case s:return 16;case 8:return 10;default:throw Error("mode:"+a);}else if(41>c)switch(a){case 1:return 14;case 2:return 13;case s:return 16;case 8:return 12;default:throw Error("mode:"+
+a);}else throw Error("type:"+c);},getLostPoint:function(a){for(var c=a.getModuleCount(),d=0,b=0;b<c;b++)for(var e=0;e<c;e++){for(var f=0,i=a.isDark(b,e),g=-1;1>=g;g++)if(!(0>b+g||c<=b+g))for(var h=-1;1>=h;h++)0>e+h||c<=e+h||0==g&&0==h||i==a.isDark(b+g,e+h)&&f++;5<f&&(d+=3+f-5)}for(b=0;b<c-1;b++)for(e=0;e<c-1;e++)if(f=0,a.isDark(b,e)&&f++,a.isDark(b+1,e)&&f++,a.isDark(b,e+1)&&f++,a.isDark(b+1,e+1)&&f++,0==f||4==f)d+=3;for(b=0;b<c;b++)for(e=0;e<c-6;e++)a.isDark(b,e)&&!a.isDark(b,e+1)&&a.isDark(b,e+
+2)&&a.isDark(b,e+3)&&a.isDark(b,e+4)&&!a.isDark(b,e+5)&&a.isDark(b,e+6)&&(d+=40);for(e=0;e<c;e++)for(b=0;b<c-6;b++)a.isDark(b,e)&&!a.isDark(b+1,e)&&a.isDark(b+2,e)&&a.isDark(b+3,e)&&a.isDark(b+4,e)&&!a.isDark(b+5,e)&&a.isDark(b+6,e)&&(d+=40);for(e=f=0;e<c;e++)for(b=0;b<c;b++)a.isDark(b,e)&&f++;a=Math.abs(100*f/c/c-50)/5;return d+10*a}},l={glog:function(a){if(1>a)throw Error("glog("+a+")");return l.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;256<=a;)a-=255;return l.EXP_TABLE[a]},EXP_TABLE:Array(256),
+LOG_TABLE:Array(256)},m=0;8>m;m++)l.EXP_TABLE[m]=1<<m;for(m=8;256>m;m++)l.EXP_TABLE[m]=l.EXP_TABLE[m-4]^l.EXP_TABLE[m-5]^l.EXP_TABLE[m-6]^l.EXP_TABLE[m-8];for(m=0;255>m;m++)l.LOG_TABLE[l.EXP_TABLE[m]]=m;q.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var c=Array(this.getLength()+a.getLength()-1),d=0;d<this.getLength();d++)for(var b=0;b<a.getLength();b++)c[d+b]^=l.gexp(l.glog(this.get(d))+l.glog(a.get(b)));return new q(c,0)},mod:function(a){if(0>
+this.getLength()-a.getLength())return this;for(var c=l.glog(this.get(0))-l.glog(a.get(0)),d=Array(this.getLength()),b=0;b<this.getLength();b++)d[b]=this.get(b);for(b=0;b<a.getLength();b++)d[b]^=l.gexp(l.glog(a.get(b))+c);return(new q(d,0)).mod(a)}};p.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],
+[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,
+116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,
+43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,
+3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,
+55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,
+45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]];p.getRSBlocks=function(a,c){var d=p.getRsBlockTable(a,c);if(void 0==d)throw Error("bad rs block @ typeNumber:"+a+"/errorCorrectLevel:"+c);for(var b=d.length/3,e=[],f=0;f<b;f++)for(var h=d[3*f+0],g=d[3*f+1],j=d[3*f+2],l=0;l<h;l++)e.push(new p(g,j));return e};p.getRsBlockTable=function(a,c){switch(c){case 1:return p.RS_BLOCK_TABLE[4*(a-1)+0];case 0:return p.RS_BLOCK_TABLE[4*(a-1)+1];case 3:return p.RS_BLOCK_TABLE[4*
+(a-1)+2];case 2:return p.RS_BLOCK_TABLE[4*(a-1)+3]}};t.prototype={get:function(a){return 1==(this.buffer[Math.floor(a/8)]>>>7-a%8&1)},put:function(a,c){for(var d=0;d<c;d++)this.putBit(1==(a>>>c-d-1&1))},getLengthInBits:function(){return this.length},putBit:function(a){var c=Math.floor(this.length/8);this.buffer.length<=c&&this.buffer.push(0);a&&(this.buffer[c]|=128>>>this.length%8);this.length++}};"string"===typeof h&&(h={text:h});h=r.extend({},{render:"canvas",width:256,height:256,typeNumber:-1,
+correctLevel:2,background:"#ffffff",foreground:"#000000"},h);return this.each(function(){var a;if("canvas"==h.render){a=new o(h.typeNumber,h.correctLevel);a.addData(h.text);a.make();var c=document.createElement("canvas");c.width=h.width;c.height=h.height;for(var d=c.getContext("2d"),b=h.width/a.getModuleCount(),e=h.height/a.getModuleCount(),f=0;f<a.getModuleCount();f++)for(var i=0;i<a.getModuleCount();i++){d.fillStyle=a.isDark(f,i)?h.foreground:h.background;var g=Math.ceil((i+1)*b)-Math.floor(i*b),
+j=Math.ceil((f+1)*b)-Math.floor(f*b);d.fillRect(Math.round(i*b),Math.round(f*e),g,j)}}else{a=new o(h.typeNumber,h.correctLevel);a.addData(h.text);a.make();c=r("<table></table>").css("width",h.width+"px").css("height",h.height+"px").css("border","0px").css("border-collapse","collapse").css("background-color",h.background);d=h.width/a.getModuleCount();b=h.height/a.getModuleCount();for(e=0;e<a.getModuleCount();e++){f=r("<tr></tr>").css("height",b+"px").appendTo(c);for(i=0;i<a.getModuleCount();i++)r("<td></td>").css("width",
+d+"px").css("background-color",a.isDark(e,i)?h.foreground:h.background).appendTo(f)}}a=c;jQuery(a).appendTo(this)})}})(jQuery);

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

@@ -80,6 +80,17 @@
                     <p v-if="isPC" class="P_img"><em class="pv icon mIcon" v-text="item.pv"></em></p>
                 </div>
             </div>
+            <div id="scrollTop">
+                <div class="item" v-if="isPC">
+                    <span class="wechat icon mIcon">微信分享</span>
+                    <div class="wechatHover mFixed">
+                        <div id="qrcode"></div>
+                    </div>
+                </div>
+                <div class="item">
+                    <span class="toTop icon mIcon">置顶</span>
+                </div>
+            </div>
         </div>
     </div>
     <!--侧边栏-->
@@ -87,6 +98,7 @@
 </div>
 <template th:replace="article/components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" src="/lib/jquery.qrcode.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/detail.js(v=${version})}"></script>
 </body>

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

@@ -97,6 +97,11 @@
     </div>
     <!--侧边栏-->
     <template th:replace="article/components/sidebar"></template>
+    <div id="scrollTop">
+        <div class="item">
+            <span class="toTop icon mIcon">置顶</span>
+        </div>
+    </div>
 </div>
 <template th:replace="article/components/footer"></template>
 <template th:replace="components/foot-link"></template>

src/main/resources/templates/flea-market/detail.html

@@ -4,23 +4,24 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
+     <link th:href="@{/css/flea-market/secondDetail.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 
 <!-- 二手市场介绍 -->
-<!--    <div class="preview-container" id="fleaMarket" >-->
-<!--    <div class="inner-container">-->
-<!--        <div class="preview-header clearfix">-->
-<!--            <div class="preview-banner clearfix">-->
-<!--                <div class="preview-banner-big">-->
-<!--                    <img class="preview-img" :src="previewBigimage" >-->
-<!--                    <span class="hover"></span>-->
-<!--                </div>-->
-<!--                  <div class="iconLogo"  v-if="detail.brandName==null||detail.brandName==''" ></div>-->
-<!--                  <div class="iconLogo"  v-else-if="detail.brandID==161&&detail.brandName"  style="background:rgba(225,86,22,0.5)" >{{detail.brandName}}</div>-->
-<!--                  <div class="iconLogo"  v-else style="background: rgba(22,116,225,0.5);">{{detail.brandName}}</div>-->
+    <div class="preview-container" id="fleaMarket" >
+    <div class="inner-container">
+        <div class="preview-header clearfix">
+            <div class="preview-banner clearfix" id="imgShown" >
+                <div class="preview-banner-big bigImage" v-if="isPC">
+                    <img class="preview-img" :src="previewBigimage" >
+                    <span class="mask"></span>
+                </div>
+                  <div class="iconLogo"  v-if="detail.brandName==null||detail.brandName==''" ></div>
+                  <div class="iconLogo"  v-else-if="detail.brandID==161&&detail.brandName"  style="background:rgba(225,86,22,0.5)" >{{detail.brandName}}</div>
+                  <div class="iconLogo"  v-else style="background: rgba(22,116,225,0.5);">{{detail.brandName}}</div>
 <!--                <div class="preview-banner-small" id="CM____pic_thumb">-->
 <!--                    <ul class="preview-thumb-ul">-->
 <!--                        <li class="item" v-for="(item, index) in previewThumb"  :class="current==index?'addImg':''" :key="index" :data-src="item" @click="ImgList(item,index)">-->
@@ -28,139 +29,144 @@
 <!--                        </li>-->
 <!--                    </ul>-->
 <!--                </div>-->
-<!--                <div class="preview-box" id="mag">-->
-<!--                    <div class="bigitem">-->
-<!--                        <img id="magnifierImg" :src="previewBigimage"/>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--            <div class="preview-info clearfix" v-show="isRequest" :class="isRequest?'active' : ''">-->
-<!--                <div class="preview-info-title">-->
-<!--                    <span class="hoverBrand"  >-->
-<!--                    <p class="info-p brandName" v-show="bnameShow" style="color: #999999">品牌：{{detail.brandName}}</p>-->
-<!--                    <span class="Brand" style="padding: 15px" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" v-show="Showlogo"><img src="/html/secondHand/img/logo.png"/> </span>-->
-<!--                    </span>-->
-<!--                     <p class="info-p name">{{detail.name}}</p>-->
-<!--                    <div class="brandMain" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" v-show="isShow" v-if="detail.brandInfo!=null||detail.brandInfo !=''"><div class="zheng-graphics"></div>{{detail.brandInfo}}</div>-->
-<!--                    <img src="/html/secondHand/img/yishou.png" class="yishou_img" v-if="soldImage" :class="soldImage?'show':''">-->
-<!--                </div>-->
-<!--                <div class="preview-info-main clearfix">-->
-<!--                    <div class="info price" style="width: 100%" >-->
-<!--                        <span class="label">交&nbsp;&nbsp;易&nbsp;&nbsp;价：</span>-->
-<!--                        <p>-->
-<!--                            <span v-if="detail.detailTalkFlag==2&&userID==null" class="fave-text">价格详聊</span></span>-->
-<!--                            <span v-else-if="userID==null"><a class="member-detail ladder-a loginWithParam" >登录查看价格></a></span>-->
-<!--                            <span v-else-if="userID!=null&&detail.detailTalkFlag==2" class="fave-text">价格详聊</span></span>-->
-<!--                            <span v-else class="fave-text">￥<span class="big">{{detail.price1Str}}</span></span>-->
+                    <div id="swiperImage" class="CM____pic_thumb swiper-container">
+                        <ul class="swiper-wrapper clear preview-thumb-ul">
+                            <li class="swiper-slide mfc"v-for="(item, index) in previewThumb" :class="current==index?'addImg':''" :key="index" :data-src="item" @click="ImgList(item,index)">
+                                <img :src="item">
+                            </li>
+                        </ul>
+                        <div class="swiper-pagination mfc"></div>
+                  </div>
 
-<!--                        </p>-->
-<!--                    </div>-->
-<!--                     <div class="info " v-if="HandType">-->
-<!--                        <span class="label">市&nbsp;&nbsp;场&nbsp;&nbsp;价：</span>-->
-<!--                        <p>{{detail.normalPriceStr}}</p>-->
-<!--                    </div>-->
-<!--                    <div class="info " v-if="HandType">-->
-<!--                       <span class="label" style="width: 90px">采购价/原价：</span>-->
-<!--                        <p>{{detail.originalPriceStr}}</p>-->
-<!--                    </div>-->
-<!--                    <div class="info " v-if="HandType">-->
-<!--                       <span class="label" style="width: 84px">产品到期日：</span>-->
-<!--                        <p>{{detail.maturityYears}}</p>-->
-<!--                    </div>-->
-<!--                    <div class="info bind">-->
-<!--                       <span class="label">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类：</span>-->
-<!--                        <p>{{detail.typeStr}}</p>-->
-<!--                    </div>-->
-<!--                    <div class="info ">-->
-<!--                       <span class="label">所&nbsp;&nbsp;在&nbsp;&nbsp;地：</span>-->
-<!--                        <p>{{detail.provinceCityDistrict}}</p>-->
-<!--                    </div>-->
-<!--                    <div class="info ">-->
-<!--                       <span class="label">商品成色：</span>-->
-<!--                        <p>{{detail.productQuality}}</p>-->
-<!--                    </div>-->
-<!--                     <div class="info " v-if="detail.showContactFlag==2">-->
-<!--                       <span class="label">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span>-->
-<!--                        <p>{{detail.contactName}}</p>-->
-<!--                    </div>-->
-<!--                    <div class="info unit" v-if="detail.fixedYears!='' && detail.fixedYears!=null">-->
-<!--                        <span class="label">出厂日期：</span>-->
-<!--                        <p>{{detail.fixedYears}}</p>-->
-<!--                    </div>-->
-<!--                    <div class="info unit" v-if="detail.showContactFlag==2">-->
-<!--                        <span class="label">联系方式：</span>-->
-<!--                        <p>{{detail.contactMobile}}</p>-->
-<!--                    </div>-->
-<!--                    <div class="info price" style="width: 100%" v-if="HandType">-->
-<!--                        <span class="label">库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存：</span>-->
-<!--                        <p>{{detail.stock}}</p>-->
-<!--                    </div>-->
-<!--                    <div class="info price" v-if="detail.productType!=null && detail.productType!=''">-->
-<!--                        <span class="label">商品类型：</span>-->
-<!--                        <p v-if="detail.productType==1">医美</p>-->
-<!--                        <p v-else>非医美</p>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--                <div class="ercode" v-if="ShowImage" ><img :class="ShowImage?'show':''" src="/html/secondHand/img/er.png"/></div>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--            &lt;!&ndash;  相关推荐 &ndash;&gt;-->
-<!--    <div class="product-recommended-area" v-show="recommde" >-->
-<!--        <div class="product-recommen dedArea-title">相关推荐</div>-->
-<!--        <div class="swiper-container" id="swiper-recommended">-->
-<!--            <div class="swiper-wrapper recommend-bananr">-->
-<!--                <div class="swiper-slide recommended-item" v-for="(item,index) in recommdeImage">-->
-<!--                    <a :href="'/html/secondHand/secondDetail.jsp?id='+item.recommendProductID" v-if="item.productCategory==2">-->
-<!--                        <div>-->
-<!--                            <img :src="item.mainImage" alt="">-->
-<!--                        </div>-->
-<!--                        <p>{{item.name}}</p>-->
-<!--                    </a>-->
-<!--                     <a :href="'/product-'+item.recommendProductID+'.html'" v-else>-->
-<!--                        <div>-->
-<!--                            <img :src="item.mainImage" alt="">-->
-<!--                        </div>-->
-<!--                        <p>{{item.name}}</p>-->
-<!--                    </a>-->
-<!--                </div>-->
-<!--                <div class="swiper-slide recommended-item defaulImg" v-for="(item,index) in recommdeindex">-->
-<!--                    <a href="javascript:0">-->
-<!--                        <div>-->
-<!--                            <img src="/html/maintenance/img/default.png" alt="">-->
-<!--                        </div>-->
-<!--                    </a>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--            <div class="swiper-pagination recommended-pagination"></div>-->
-<!--        </div>-->
-<!--    </div>-->
 
-<!--     <div class="main">-->
-<!--        <div class="title">商品详情</div>-->
-<!--        <div class="mainContent">-->
-<!--            <div class="mainContentLeft">-->
-<!--                <div class="Disclaimer">-->
-<!--                    <h3 >免责声明:</h3>-->
-<!--                    <p>-->
-<!--                        鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！-->
-<!--                    </p>-->
-<!--                </div>-->
-<!--                <div class="contentHtml">-->
-<!--                    {{detail.productDetails}}-->
-<!--                       <div style="margin:auto"  v-for="(item, index) in previewThumb" :key="index" :data-src="item">-->
-<!--                           <img :src="item"/>-->
-<!--                       </div>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--      </div>-->
+                <div class="preview-box" id="mag" v-if="isPC">
+                    <div class="bigitem">
+                        <img id="magnifierImg" :src="previewBigimage"/>
+                    </div>
+                </div>
+            </div>
+            <div class="preview-info clearfix" v-show="isRequest" :class="isRequest?'active' : ''">
+                <div class="preview-info-title">
+                    <span class="hoverBrand"  >
+                    <p class="info-p brandName" v-show="bnameShow" style="color: #999999">品牌：{{detail.brandName}}</p>
+                    <span class="Brand" style="padding: 15px" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" v-show="Showlogo"><img src="/img/flea-market/logo.png"/> </span>
+                    </span>
+                     <p class="info-p name">{{detail.name}}</p>
+                    <div class="brandMain" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)" v-show="isShow" v-if="detail.brandInfo!=null||detail.brandInfo !=''"><div class="zheng-graphics"></div>{{detail.brandInfo}}</div>
+                    <img src="/img/flea-market/yishou.png" class="yishou_img" v-if="soldImage" :class="soldImage?'show':''">
+                </div>
+                <div class="preview-info-main clearfix">
+                    <div class="info price" style="width: 100%" >
+                        <span class="label">交&nbsp;&nbsp;易&nbsp;&nbsp;价：</span>
+                        <p>
+                            <span v-if="detail.detailTalkFlag==2&&userID==null" class="fave-text">价格详聊</span></span>
+                            <span v-else-if="userID==null"><a class="member-detail ladder-a loginWithParam" >登录查看价格></a></span>
+                            <span v-else-if="userID!=null&&detail.detailTalkFlag==2" class="fave-text">价格详聊</span></span>
+                            <span v-else class="fave-text">￥<span class="big">{{detail.price1Str}}</span></span>
+
+                        </p>
+                    </div>
+                     <div class="info " v-if="HandType">
+                        <span class="label">市&nbsp;&nbsp;场&nbsp;&nbsp;价：</span>
+                        <p>{{detail.normalPriceStr}}</p>
+                    </div>
+                    <div class="info " v-if="HandType">
+                       <span class="label" style="width: 90px">采购价/原价：</span>
+                        <p>{{detail.originalPriceStr}}</p>
+                    </div>
+                    <div class="info " v-if="HandType">
+                       <span class="label" style="width: 84px">产品到期日：</span>
+                        <p>{{detail.maturityYears}}</p>
+                    </div>
+                    <div class="info bind">
+                       <span class="label">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类：</span>
+                        <p>{{detail.typeStr}}</p>
+                    </div>
+                    <div class="info ">
+                       <span class="label">所&nbsp;&nbsp;在&nbsp;&nbsp;地：</span>
+                        <p>{{detail.provinceCityDistrict}}</p>
+                    </div>
+                    <div class="info ">
+                       <span class="label">商品成色：</span>
+                        <p>{{detail.productQuality}}</p>
+                    </div>
+                     <div class="info " v-if="detail.showContactFlag==2">
+                       <span class="label">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span>
+                        <p>{{detail.contactName}}</p>
+                    </div>
+                    <div class="info unit" v-if="detail.fixedYears!='' && detail.fixedYears!=null">
+                        <span class="label">出厂日期：</span>
+                        <p>{{detail.fixedYears}}</p>
+                    </div>
+                    <div class="info unit" v-if="detail.showContactFlag==2">
+                        <span class="label">联系方式：</span>
+                        <p>{{detail.contactMobile}}</p>
+                    </div>
+                    <div class="info price" style="width: 100%" v-if="HandType">
+                        <span class="label">库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存：</span>
+                        <p>{{detail.stock}}</p>
+                    </div>
+                    <div class="info price" v-if="detail.productType!=null && detail.productType!=''">
+                        <span class="label">商品类型：</span>
+                        <p v-if="detail.productType==1">医美</p>
+                        <p v-else>非医美</p>
+                    </div>
+                </div>
+                <div class="ercode" v-if="ShowImage" ><img :class="ShowImage?'show':''" src="/img/flea-market/er.png"/></div>
+            </div>
+        </div>
+            <!--  相关推荐 -->
+     <div class="recommendBox" v-if="recommde">
+            <div class="hd">相关推荐</div>
+            <div id="productRecommend" class="swiper-container">
+                <ul class="swiper-wrapper" v-cloak>
+                    <li class="swiper-slide" v-for="p in recommdeImage">
+                        <div class="item">
+                            <a class="image" :href="'/product-'+p.id+'.html'" target="_blank">
+                                <img :src="p.image" :alt="p.name">
+                                <span v-html="p.name"></span>
+                            </a>
+                        </div>
+                    </li>
+                    <li class="swiper-slide  defaulImg" v-for="(item,index) in recommdeindex">
+                       <div class="item">
+                            <a href="javascript:0" class="image">
+                                <img src="/img/base/placeholder.png" alt="">
+                            </a>
+                     </div>
+                </li>
+                </ul>
+<!--                <div v-show="recommendPage>1" class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>-->
+            </div>
+        </div>
+
+     <div class="main">
+        <div class="title">商品详情</div>
+        <div class="mainContent">
+            <div class="mainContentLeft">
+                <div class="Disclaimer">
+                    <h3 >免责声明:</h3>
+                    <p>
+                        鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
+                    </p>
+                </div>
+                <div class="contentHtml">
+                    {{detail.productDetails}}
+                       <div style="margin:auto"  v-for="(item, index) in previewThumb" :key="index" :data-src="item">
+                           <img :src="item"/>
+                       </div>
+                </div>
+            </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" src="/lib/magnifier.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/second.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/secondDetail.js(v=${version})}"></script>

src/main/resources/templates/flea-market/intro.html

@@ -4,7 +4,7 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
-        <link th:href="@{/css/flea-market/intro.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/flea-market/intro.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
@@ -56,7 +56,7 @@
            </div>
 
             <div class="mian_content">
-                <h1>合作模式<div class="yellow_icon" style="width: 150px !important;"></div></h1>
+                <h1>合作模式<div class="yellow_icon y m" ></div></h1>
             <div class="font_content">
                 <p class="twobuy">成为自由卖家：二手出售方</p>
                   <div class="content_list">
@@ -84,16 +84,16 @@
             </div >
 
             <div class="mian_content">
-                <h1>交易流程<div class="yellow_icon" style="width: 150px !important;"></div></h1>
+                <h1>交易流程<div class="yellow_icon y m" ></div></h1>
                 <div class="font_content">
                  <div class="content_list">
                     <span>随着越来越多机构青睐性价比高的二手设备，采美二手市场也越来越火热，为了保障买卖双方利益和资金交易安全，
                     采美现将二手仪器交易的流程更加规范化，以促进二手市场的健康发展。</span>
                  </div>
                     <p class="threebuy">此流程适用于10万以下的设备，10万以上二手设备交易请联系高先生。</p>
-                    <span style="color: #353C44;font-size: 24px">具体的流程如下：</span>
-                    <img src="/img/flea-market/jiaoyi.png" style="margin-top: 10px"  v-if="isPC">
-                    <img src="/img/flea-market/jiaoyi3x.png" v-else>
+                    <span class="jioayi" style="">具体的流程如下：</span>
+                    <img src="/img/flea-market/jiaoyi.png" style="margin-top: 10px"class="jiaoyi_pimg" >
+                    <img src="/img/flea-market/jiaoyi3x.png" class="jiaoyi_img">
                 </div>
             </div>
             <div id="second-hand-btn" >
@@ -114,9 +114,7 @@
 
 </body>
 <script>
-  var isPC = ($(window).width()>768);
      $(document).ready(function() {
-
         $('#second-hand-btn button').on('click',function() {
             var index = $(this).index();
             if(index == 0) {

src/main/resources/templates/help/help.html

@@ -4,6 +4,7 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
+    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/help/help.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
@@ -18,25 +19,55 @@
         <span>&gt;</span>
         <span th:text="${pageInfo?.title}"></span>
     </div>
-    <div class="wrap clear">
+    <div class="wrap clear mf">
         <div class="left">
             <div class="title">帮助中心</div>
-            <div class="navList" th:each="type: ${helpPages}">
+            <div th:each="type: ${helpPages}" th:attr="class=${pageTypeId==type.id?'navList on':'navList'}">
                 <span class="tab" th:text="${type.name}"></span>
-                <div class="con">
-                    <a th:each="page: ${type.linkList}" th:href="'/help/'+${page.id}+'.html'" th:text="${page.name}"  th:attr="class=${pageInfo?.id==page.id?'on':''}"></a>
+                <div class="con" th:attr="style=${pageTypeId==type.id?'':'display:none'}">
+                    <a th:each="page: ${type.linkList}" th:href="'/help/'+${page.id}+'.html'" th:text="${page.name}"  th:attr="class=${pageId==page.id?'on':''}"></a>
                 </div>
             </div>
         </div>
         <div class="right">
-            <div class="pageContent" th:utext="${pageInfo?.content}"></div>
+            <div th:if="${pageId!=1026}" class="pageContent" th:utext="${pageInfo?.content}"></div>
+            <div th:if="${pageId==1026}" class="pageContent">
+                <form id="suggestion">
+                    <div class="formLine">
+                        <p><em>*</em>类型：</p>
+                        <label class="diyBox"><input type="radio" name="suggestionType" v-model="suggestion.type" value="1" ><i class="icon mIcon">投诉</i></label>
+                        <label class="diyBox"><input type="radio" name="suggestionType" v-model="suggestion.type" value="2" checked><i class="icon mIcon">建议</i></label>
+                        <span class="errTips icon mIcon mIcon" tips="请选择类型"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>标题：</p>
+                        <input type="text" v-model.trim="suggestion.title" placeholder="请输入标题" maxlength="50" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入标题"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>内容：</p>
+                        <textarea v-model.trim="suggestion.content" placeholder="请输入投诉/建议内容（建议输入10-500个字）" maxlength="500" @blur="blurHandle($event)" needverify></textarea>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入投诉/建议内容（建议输入10-500个字）"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>联系人：</p>
+                        <input type="text" v-model.trim="suggestion.name" placeholder="请输入您的姓名" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
+                    </div>
+                    <div class="formLine">
+                        <p><em>*</em>手机号：</p>
+                        <input type="text" v-model.trim="suggestion.phone" placeholder="请输入您的常用手机号" :rule="rule.phone" maxlength="12" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
+                    </div>
+                    <div class="subLine"><button type="button" class="btn" @click="postSuggestion()">提交</button></div>
+                </form>
+            </div>
         </div>
     </div>
-
-
-
-
-
 </div>
 
 <!-- 引入底部 -->

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

@@ -72,8 +72,8 @@
                         </p>
                     </template>
                     <p class="row" style="position:relative;" v-if="deailData.actStatus==1||deailData.ladderPriceFlag==1" ><span class="l">促销</span><i>：</i>
-                      <span class="activity" @click="activity" :class="isShow?'activitystyle':''" v-if="deailData.ladderPriceFlag==1">阶梯价格<i class="icon" :class="isShow?'activeicon':''"></i> </span>
-                      <span class="activity" @click="activity" :class="isShow?'activitystyle':''" v-if="deailData.actStatus==1">{{promotions.name}}：{{promotions.touchPrice.toFixed(2)}}<i class="icon" :class="isShow?'activeicon':''"></i> </span>
+                      <span class="activity" @click="activity" :class="isShow?'activitystyle':''" v-if="deailData.ladderPriceFlag==1">阶梯价格<i class="icon shaky" :class="isShow?'activeicon':''"></i> </span>
+                      <span class="activity" @click="activity" :class="isShow?'activitystyle':''" v-if="deailData.actStatus==1">{{promotions.name}}：{{promotions.touchPrice.toFixed(2)}}<i class="icon shaky" :class="isShow?'activeicon':''"></i> </span>
 
 
                     <template v-if="userId && userId>0">