二手列表

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

@@ -1,60 +1,461 @@
-#fleaMarketList{margin-top: 20px}
-li {list-style: none; zoom: 1;}
-.secondTitle{
-    width: 1184px;
-	height: 40px;
-	background-color: #ffffff;
-	border-bottom: 1px solid #E15616;
-	margin-top: 20px
+/**
+ * PC端
+ */
+  li {list-style: none;zoom: 1;}
+@media screen and (min-width:768px) {
+    #fleaMarketList {
+        margin-top: 20px
+    }
+    .ListImg img {
+        width: 100%
+    }
+
+    .secondTitle {
+        width: 1184px;
+        height: 40px;
+        background-color: #ffffff;
+        border-bottom: 1px solid #E15616;
+        margin-top: 20px
+    }
+
+    .ClassA {
+        width: 128px;
+        height: 40px;
+        display: inline-block;
+        text-align: center;
+        line-height: 40px;
+        font-size: 16px;
+        cursor: pointer;
+        color: #333333;
+        border: 0;
+    }
+
+    .active {
+        background: #E15621;
+        color: #fff;
+    }
+
+    .fabu {
+        float: right;
+        text-align: center;
+        color: #e15616;
+        border-bottom: 1px solid #e15616;
+        height: 32px;
+        margin-right: 30px
+    }
+
+    .fabu a {
+        line-height: 40px;
+        color: #e15616
+    }
+
+    .mainTab {
+        background: #fff;
+        width: 128px;
+        position: absolute;
+        z-index: 1;
+    }
+
+    .Listitem:nth-of-type(4n) {
+        margin-right: 0;
+    }
+
+    .mainTab li {
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        color: #627386;
+        cursor: pointer;
+    }
+
+    .mainTab li.addstyle {
+        background: #ffe6dc;
+        color: #e15616;
+    }
+
+    .shopList {
+        width: 1184px;
+        margin: 20px auto;
+        font-size: 0;
+    }
+
+    .Listitem {
+        width: 284px;
+        display: inline-block;
+        margin: 0 16px 20px 0;
+    }
+
+    .itemImg {
+        position: relative;
+        width: 100%;
+        height: 284px;
+        margin-right: 20px;
+        background-color: #fff;
+        cursor: pointer;
+    }
+
+    .itemImg .bigImg {
+        width: 100%;
+        height: 100%;
+    }
+
+    .infotag {
+        font-size: 10px;
+        width: 58px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        display: inline-block;
+        border-radius: 2px;
+        flex: auto;
+        margin: 0 3px
+    }
+
+    .ItemInfo tag {
+        display: flex;
+    }
+
+    .infotag.news {
+        border: solid 1px #f94b4b;
+        color: #f94b4b;
+        background-color: #fadbdb
+    }
+
+    .infotag.brand {
+        border: solid 1px #f9a24b;
+        color: #f9a24b;
+        background-color: #faefdb;
+    }
+
+    .infotag.sold {
+        border: solid 1px #9aa5b5;
+        color: #9aa5b5;
+        background-color: #e3ebf7;
+    }
+
+    .infotag.other {
+        border: solid 1px #1890f9;
+        color: #1890f9;
+        background-color: #e3ebf7;
+    }
+
+    .ItemInfo {
+        background: #fff;
+        padding: 10px
+    }
+
+    .targetprice {
+        font-size: 16px;
+        color: #f94b4b;
+        cursor: pointer;
+    }
+
+    .productname {
+        font-size: 16px;
+        color: #22272e;
+        text-align: justify;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: 8px 0;
+    }
+
+    .shijian {
+        font-size: 12px;
+        color: #9aa5b5;
+        text-align: justify;
+        margin: 8px 0;
+        position: relative;
+    }
+
+    .shijian div {
+        display: inline-block;
+    }
+
+    .shijian div:nth-child(1) {
+        margin-right: 60px
+    }
+
+    .dizhi {
+        font-size: 12px;
+        color: #9aa5b5;
+        margin-bottom: 8px;
+        position: relative;
+        margin-right: 20px
+    }
+     .icon.shijian:before {
+        background-position: -117px -328.5px;
+        width: 20px;
+        height: 23px;
+        position: absolute;
+        right: 3px;
+        top: -4px
+     }
+    .icon.liulanliang:before {
+        background-position: -187px -326.5px;
+        width: 20px;
+        height: 20px
+    }
+
+    .icon.dizhi:before {
+            background-position: -326px -326.5px;
+            width: 20px;
+            height: 23px;
+            position: absolute;
+            right: -20px;
+            top: -5px
+    }
+
+    .isShow {
+        display: block;
+    }
+
+    .no-content {
+        padding: 180px 0 160px;
+        background-color: #fff;
+        opacity: 0;
+    }
+
+    .no-content img {
+        display: block;
+        margin: 0 auto;
+    }
+
+    .error-message {
+        font-size: 16px;
+        text-align: center;
+        margin-top: 50px;
+    }
+
+    .show {
+        opacity: 1 !important;
+    }
+
+    .page-area {
+        width: 1190px;
+        height: 60px;
+        padding-top: 20px;
+        font-size: 14px;
+        text-align: center;
+        clear: both;
+        background: #fff;
+        margin: 5px auto;
+    }
+
+    .page-area a {
+        border: 1px solid #EFEFEF;
+        color: #636262;
+        line-height: 14px;
+        padding: 4px 10px;
+        background: #fff;
+        border-radius: 3px;
+        -moz-border-radius: 3px;
+        vertical-align: inherit;
+    }
+
+    .page-area a:hover {
+        border: 1px solid #ccc;
+        color: #666;
+        text-decoration: none;
+    }
 }
-.ClassA{
-    width: 128px;
-    height: 40px;
-    display: inline-block;
-    text-align: center;
-    line-height: 40px;
-    font-size: 16px;
-    cursor: pointer;
-    color: #333333;
+
+/* 移动端*/
+@media screen and (max-width:768px){
+#fleaMarketList{width: 100%;overflow: hidden}
+.shopList{background: #fff}
+.Listitem{height:33vw;padding: 10px;border-bottom: .24vw solid #F0F2F4}
+.ListImg{
+    width: 100%;
+    height: 35.3vw
 }
-.active{
-	background: #E15621;
-	color: #fff;
+.ListImg img {
+   width: 100%;
+   height: 100%;
 }
-.fabu{
-    float: right;
-    text-align: center;
-    color: #e15616;
-    border-bottom: 1px solid #e15616;
-    height: 32px;
-    margin-right: 30px
-}
-.fabu a{
-	line-height: 40px;
-    color: #e15616
-}
-.mainTab{
-	background: #fff;
-	width: 128px;
-}
-.mainTab li{
-	height: 40px;
-	line-height: 40px;
-	text-align: center;
-	color: #627386;
-	cursor: pointer;
-}
-.mainTab li.addstyle{
-	background: #ffe6dc;
-	color: #e15616;
-}
-.shopList {
-    width: 1184px;
-    margin: 0 auto;
-    font-size: 0;
-}
-.Listitem {
-    width: 285px;
-    display: inline-block;
-    margin: 0 20px 20px 0;
+ .secondTitle {
+        width: 100%;
+        height: 10vw;
+        background-color: #ffffff;
+        border-bottom: .24vw solid #F0F2F4;
+    }
+
+    .ClassA {
+        width: 32vw;
+        height: 10vw;
+        display: inline-block;
+        text-align: center;
+        line-height: 10vw;
+        font-size: 3.86vw;
+        cursor: pointer;
+        color: #9aa5b5;
+        border: 0;
+        position: relative;
+    }
+     .mainTab {
+        background: #fff;
+        width: 29vw;
+        position: absolute;
+        z-index: 1;
+    }
+       .Listitem:nth-of-type(4n) {
+        margin-right: 0;
+    }
+
+    .mainTab li {
+        height: 9.6vw;
+        line-height: 9.6vw;
+        text-align: center;
+        color: #627386;
+        cursor: pointer;
+    }
+     .active {
+        color: #E15621;
+    }
+    .line{
+        width: 10vw;
+        margin:0 auto;
+        height: .48vw;
+        background-color: #e15616;
+        display: block
+    }
+    .mainTab li.addstyle{
+        color: #e15616;
+    }
+    .itemImg{
+        width:31.2vw;
+        height:31.2vw;
+        float: left
+    }
+    .itemImg img{
+        width: 100%;
+        height: 100%;
+    }
+    .ItemInfo{
+      float: right;
+     width: 60vw
+    }
+    .infotag {
+        font-size:  0.4vw;
+        width: 11.6vw;
+        height: 4.8vw;
+        line-height:  4.8vw;
+        text-align: center;
+        display: inline-block;
+        border-radius: .48vw;
+        flex: auto;
+        margin: 0 .72vw
+    }
+    .infotag.news {
+        border: solid 1px #f94b4b;
+        color: #f94b4b;
+        background-color: #fadbdb
+    }
+
+    .infotag.brand {
+        border: solid 1px #f9a24b;
+        color: #f9a24b;
+        background-color: #faefdb;
+    }
+
+    .infotag.sold {
+        border: solid 1px #9aa5b5;
+        color: #9aa5b5;
+        background-color: #e3ebf7;
+    }
+
+    .infotag.other {
+        border: solid 1px #1890f9;
+        color: #1890f9;
+        background-color: #e3ebf7;
+    }
+     .targetprice {
+        font-size: 4vw;
+        color: #f94b4b;
+        cursor: pointer;
+    }
+    .productname{
+        color: #627386;
+        letter-spacing: 1px;
+        font-size: 4vw;
+        margin: 1.2vw 0;
+    }
+    .shijian {
+        font-size: 3.46vw;
+        color: #9aa5b5;
+        text-align: justify;
+        margin-bottom: 1.2vw ;
+        position: relative;
+    }
+
+    .shijian div {
+        display: inline-block;
+    }
+
+    .shijian div:nth-child(1) {
+        margin-right:16vw;
+    }
+    .dizhi {
+        font-size:  3.46vw;
+        color: #9aa5b5;
+        margin-bottom: 1.2vw;
+        position: relative;
+        margin-right: 20px
+    }
+
+    .mIcon.liulanliang:before {
+        background-position: -28.8vw -15.5vw;
+        width: 5.3vw;
+        height: 5.3vw;
+    }
+
+    .mIcon.shijian:before {
+        background-position: -36.8vw -15.5vw;
+        width: 4.9vw;
+        height: 6vw;
+        position: absolute;
+        right: .24vw;
+        top: -1.45vw;
+    }
+    .mIcon.dizhi:before {
+        background-position: -87.7vw -38.4vw;
+        width: 5.3vw;
+        height: 5.3vw;
+        position: absolute;
+        right: -6vw;
+        top: -1.3vw
+    }
+    .mIcon.off:before{
+        background-position: -68vw .53vw;
+        width: 5.3vw;
+        height: 5.3vw;
+        position: absolute;
+        right: 5vw;
+        top: 1.7vw;
+    }
+    .mIcon.open:before{
+        background-position: -60.3vw .53vw;
+        width: 5.3vw;
+        height: 5.3vw;
+        position: absolute;
+        right: 5vw;
+        top: 1.7vw;
+    }
+    .no-content{
+        padding:26.6vw 5.3vw;
+        background-color: #fff;
+        margin: auto;
+        }
+   .no-content img{
+        width: 50%;
+        display: block;
+        margin: 0 auto;
+        padding: 0.5rem 0;
+        }
+   .error-message{
+        text-align: center;
+        margin-top: 5.3vw;
+        font-size: 3.7vw;
+        color: #53504D
+        }
 }

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

@@ -0,0 +1,630 @@
+.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;
+}
+.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: 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;
+}
+
+.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;
+}
+ .addImg{
+        border:1px solid #e15616;
+    }

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

@@ -1,9 +1,13 @@
+var isPC = ($(window).width()>768);
 var fleaMarketList = new Vue({
      el: "#fleaMarketList",
      data:{
      currentId:1,
      currentID2:0,
      isShow:false,
+     showflag:false,
+     mainflag:false,
+     userID:JSON.parse(localStorage.getItem('userInfo')),
      tabTitle: [
                 {value:'1',name:'全部'},
                 {value:'2',name:'临期产品'},
@@ -19,17 +23,59 @@ var fleaMarketList = new Vue({
                 pageNum:1,
                 pageSize:12,
             },
+      tabchildList:[],
+      productsList:[],
+      tabchild:{},
+      listRecord: 0,
+     pageInput: '1',
+      params:{},
 
      },
+     computed: {
+          pageTotal: function () {
+                  var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+
+                  return total > 0 ? total : 1;
+            },
+           showPageBtn: function () {
+                var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+                    total = total > 0 ? total : 1;
+                var index = this.listQuery.pageNum, arr = [];
+                if (total <= 6) {
+                    for (var i = 1; i <= total; i++) {
+                        arr.push(i);
+                    }
+                    return arr;
+                }
+                if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+                if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+                return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+            },
+      },
      methods:{
+       toPagination: function (pageNum) {
+          var _this = this;
+           _this.productsList = [];
+            if (pageNum <= this.pageTotal) {
+                _this.listQuery.pageNum = pageNum;
+                _this.gettabList()
+            }
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
          handle: function (item) {//一級分类
                var _this = this;
                _this.currentId = item.value;
                _this.currentID2 = 0;
-               if(_this.currentId==1){
-               _this.isShow = true;
+               if ( _this.currentId==1){
+               _this.mainflag = true;
                }else {
-                _this.isShow=false;
+               _this.mainflag=false;
                }
                _this.gettabList();
           },
@@ -40,34 +86,54 @@ var fleaMarketList = new Vue({
           },
            gettabList:function () {
                 var _this = this;
-                // _this.returnedTarget();
-                 $.getJSON(spiServer+"/product/getSecondHandProductList",{
-                    secondHandType: _this.currentId,
-                    instrumentType:_this.currentID2
-                 }).done(function (res) {
+                _this.returnedTarget();
+                var params = Object.assign({secondHandType: _this.currentId,instrumentType:_this.currentID2}, _this.listQuery);
+                SecondApi.SeconHandProductList(params,function (res) {
                      if (res.code == 0) {
-                        console.log(res)
+                        console.log(res);
+                       if(res.data.results.length == 0){
+                            _this.tabchildList = [];
+                            _this.showflag = true;
+                             _this.listRecord = res.data.totalRecord;
+                       }else {
+                            _this.showflag = false;
+                            _this.isShow = true;
+                            _this.tabchildList = res.data.results;
+                            _this.listRecord = res.data.totalRecord;
+                       }
+                     }else{
                      }
-                 })
-
-                // var params = Object.assign({}, _this.listQuery);
-                // SecondApi.SeconHandProductList(params,function (res) {
-                //      if (res.code == 0) {
-                //         console.log(res);
-                //        if(res.data.results.length == 0){
-                //             _this.tabchildList = [];
-                //             _this.showflag = true;
-                //              _this.listRecord = res.data.totalRecord;
-                //        }else {
-                //             _this.showflag = false;
-                //             _this.isShow = true;
-                //             _this.tabchildList = res.data.results;
-                //             _this.listRecord = res.data.totalRecord;
-                //        }
-                //      }else{
-                //         layer.msg(response.msg, {icon: 7});
-                //      }
-                // })
+                })
+          },
+          getproduct:function(id){
+            window.location.href = '/flea-market/secondDetail.html?productID='+id;
+            return false
           },
+           returnedTarget:function(){//对象合并 IE 兼容方法
+            if (typeof Object.assign != 'function') {
+                Object.assign = function(target) {
+                    'use strict';
+                    if (target == null) {
+                        throw new TypeError('Cannot convert undefined or null to object');
+                    }
+                    target = Object(target);
+                    for (var index = 1; index < arguments.length; index++) {
+                        var source = arguments[index];
+                        if (source != null) {
+                            for (var key in source) {
+                                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                                    target[key] = source[key];
+                                }
+                            }
+                        }
+                    }
+                    return target;
+                };
+            }
+        }
      },
+     mounted:function () {
+          var _this = this;
+          _this.gettabList()
+      },
 });

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

@@ -0,0 +1,159 @@
+/**
+ * Created by xw on 2020/7/22.
+ */
+var previewContainer = new Vue({
+    el:"#fleaMarket",
+    data: {
+        tabIndex:0,
+        userId:'',
+        shopId:'',
+        id:window.location.href.split('=')[1],
+        isShow:false,
+        isRequest:false,
+        Showlogo:false,
+        detail:{},
+        previewBigimage:'',
+        previewThumb:[],
+        previewParams:[],
+        recommdeImage:[],
+        userID:JSON.parse(localStorage.getItem('userInfo')),
+        HandType:false,
+        ShowImage:false,
+        recommde:false,
+        soldImage:false,
+        vShow_brand:false,
+        bnameShow:false,
+        FlagTwo:false,
+        recommdeindex:0,
+        current:0,
+    },
+    computed: {
+
+    },
+    methods: {
+        InfoData: function(){
+          var  _this = this;
+          SecondApi.ProductDetail({productId:_this.id},function (res) {
+           if(res.code==0){
+                _this.isRequest =true;
+           }else {
+                _this.isRequest =false;
+           }
+             _this.detail = res.data;
+             _this.previewThumb =  res.data.imageList;
+             _this.previewBigimage =res.data.imageList[0];
+
+              if(_this.userID!=null){
+                if(res.data.secondHandType ==2){ //临期产品显示
+                   _this.HandType =true;
+                }else {
+                  _this.HandType =false;
+                }
+              }
+              if(res.data.showContactFlag!=2){
+                    _this.ShowImage=true;
+              }else {
+                    _this.ShowImage=false;
+              }
+              if(res.data.sold == 1){//sold是否出售 0未出售，1已出售
+                    _this.soldImage = true;
+                  }else {
+                    _this.soldImage = false;
+                  }
+             if(res.data.brandName !=''&& res.data.brandName!=null){
+                    _this.bnameShow = true;
+                if(res.data.brandID ==161){
+                    _this.vShow_brand = true;
+                }else {
+                    _this.vShow_brand = false;
+                }
+             }else {
+              _this.bnameShow = false;
+             }
+             if (res.data.detailTalkFlag ==1){ //是否详聊  1不开启，2开启
+                _this.FlagTwo==true;
+              }else {
+                _this.FlagTwo==false;
+             }
+             if(res.data.brandInfo==null||res.data.brandInfo==""){
+                _this.Showlogo = false;
+             }else {
+               _this.Showlogo = true;
+             }
+         })
+        },
+        changeActive:function(){
+        var _this = this;
+             _this.isShow = true;
+        },
+        removeActive:function(){
+         var _this = this;
+             _this.isShow = false;
+        },
+        ImgList:function(item,index){
+            var _this = this;
+            _this.current = index;
+            _this.previewBigimage = item;
+        },
+    },
+    mounted: function () {
+     var _this = this;
+        _this.InfoData();
+         SecondApi.ProductRecommend({productId:_this.id},function (res) {
+            if(res.code==0){
+              console.log(res)
+               if(res.data.length > 0){
+                       _this.recommdeImage = res.data;
+                       _this.recommde =true;
+                    }else {
+                       _this.recommde =false;
+                    }
+                    if(res.data.length<7){
+                        var length = 7-res.data.length;
+                        _this.recommdeindex = length;
+                    }else {
+                        var remainderres=res.data.length%7;
+                         _this.recommdeindex= 7-remainderres;
+                        console.log(_this.recommdeindex)
+                    }
+
+            }
+        });
+        SecondApi.ProductCount({productId: _this.id},function (res) {
+            if(res.code==0){
+                console.log(res)
+            }else {
+              console.log(res)
+            }
+        });
+        //相關推薦輪播
+        var mySwiper = new Swiper('.swiper-container',{
+                slidesPerView: 7,
+                spaceBetween: 18,
+                slidesPerGroup: 7,
+                autoplay: {
+                    delay:10000,
+                    disableOnInteraction: false,//是否禁止autoplay。默认为true：停止。
+                },
+                loop: false,
+                observer: true, //修改swiper自己或子元素时，自动初始化swiper
+                observeParents: true, //修改swiper的父元素时，自动初始化swiper
+                pagination: {
+                    el: '.swiper-pagination',
+                    clickable: true,
+                },
+                on:{
+                    init:function() {
+                        var length = this.slides.length;
+                        if(length < 8) {
+                            this.autoplay.stop();
+                        }
+                    }
+                }
+       })
+
+    }
+
+
+});
+

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

@@ -16,28 +16,87 @@
         <div class="ListImg" >
             <img src="/img/flea-market/banner.png"/>
        </div>
-       <ul class="secondTitle icon" >
-            <li class="ClassA" v-for="(item, index) in tabTitle" :key="index" @click="handle(item)" :class="currentId==item.value?'active':' '">{{item.name}}</li>
-            <li class="fabu"><a href="/flea-market/form.html">我要发布</a><li/>
-       </ul>
-       <ul class="mainTab" v-if="isShow" >
-           <li v-for="(item,index) in tabList" @click='handleChild(item)' :class="currentID2 ==index?'addstyle':' '">{{item.name}}</li>
+       <template>
+           <ul class="secondTitle " v-if="isPC">
+                <li class="ClassA icon "  v-for="(item, index) in tabTitle" :key="index" @click="handle(item)" :class="[currentId==item.value?'active':'',item.value==1?'jqSelect':'']">{{item.name}} </li>
+                <li class="fabu"><a href="/flea-market/form.html">我要发布</a><li/>
+           </ul>
+           <ul class="secondTitle" v-else>
+               <li class="ClassA  mIcon"  v-for="(item, index) in tabTitle" :key="index" @click="handle(item)" :class="[currentId==item.value?'active':'',item.value==1?'off':'']">{{item.name}}
+                <span class="line" v-if="currentId==item.value"></span>
+               </li>
+           </ul>
+       </template>
+
+
+
+       <ul class="mainTab"  v-if="mainflag">
+           <li v-for="(item,index) in tabList" @click='handleChild(item)' :class="currentID2 ==index?'addstyle':' '" >{{item.name}}</li>
+
        </ul>
        <div class="shopList">
-            <div class="Listitem">
-<!--                <div class="itemImg onhref">-->
-<!--                <img :src="">-->
-<!--                </div>-->
+            <div class="Listitem" v-if="isShow"   v-for="(item, index) in tabchildList">
+                <div class="itemImg onhref" :data-id="item.productID" @click="getproduct(item.productID)">
+                    <img :src="item.imageList[0]" :class="item.sold==1?'activeImg':''" class="bigImg">
+                </div>
+            <div class="ItemInfo" >
+                 <div class="tag">
+                   <span class="infotag news" v-if="item.sold==0&&item.newAdded==1">最新</span>
+                   <span class="infotag brand" v-if="item.brandName==null&&item.brandName==''">{{item.brandName}}</span>
+                   <span class="infotag sold" v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0">已售</span>
+                   <span class="infotag other" v-if="item.brandID==161&&item.brandName!=''">其它</span>
+                  </div>
+                  <div class="productname">
+                    {{item.name}}
+                  </div>
+                  <div class="targetprice">
+                    <span v-if="item.detailTalkFlag ==2 && userID==null">价格详聊</span>
+                    <span v-else-if="userID==null" class="priceparam" @click="toLogin">登录查看价格></span>
+                    <span v-else-if="userID!=null && item.detailTalkFlag==2">价格详聊</span>
+                    <span v-else>￥{{item.price1Str}}</span>
+                  </div>
+                  <div class="shijian">
+                        <div ><i class="icon mIcon  liulanliang"></i> {{item.viewingNum}}</div>
+                        <div><i class="icon mIcon  shijian"></i> {{item.onLineDateStr}}</div>
+                   </div>
+                  <div class="dizhi">
+                    <i class="icon mIcon dizhi"></i>
+                     {{item.provinceCityDistrict}}
+                  </div>
             </div>
+          </div>
+             <div class="no-content" v-show="showflag" :class="showflag?'show':''">
+               <img src="/img/flea-market/nologo.png" v-if="isPC"/>
+               <img src="/img/flea-market/kong_m.png" v-else />
+               <div class="error-message">
+                 <p>此分类下面没有商品，换其它分类瞅瞅</p>
+               </div>
+           </div>
+
+
        </div>
     </div>
-
+    <div  class="pageWrap clear" v-if="isPC">
+            <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)" href="javascript:void(0);"></a>
+            <template v-for="n in showPageBtn">
+                <a v-if="n" :class="{ 'on': (n==listQuery.pageNum) }" @click="toPagination(n)" href="javascript:void(0);">{{ n }}</a>
+                <template v-else>···</template>
+            </template>
+            <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)"href="javascript:void(0);"> </a>
+            <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+            <span>跳至</span>
+            <input v-model="pageInput" @blur="checkNum()"/>
+            <span>页</span>&nbsp;
+              <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+        </div>
 
 </div>
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<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/list.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <template th:replace="components/head-link"></template>
+</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-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)">
+                            <img :src="item">
+                        </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>
+
+                        </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>
+            <!--  相关推荐 -->
+    <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>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/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>
+</body>
+</html>