二手

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/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/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/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">