二手

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

@@ -1,3 +1,4 @@
+
 @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}
@@ -208,393 +209,40 @@
         text-align: right;
         color: #999;
     }
-
     .preview-info .preview-info-main .info p {
         float: left;
         height: 100%;
         padding-left: 20px;
+        color: #4a4f58;
     }
-
-    .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;
@@ -604,43 +252,39 @@
         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 div{
+        margin: 10px auto;
+    }
     .contentHtml img {
         display: block;
         margin: 20px auto 0;
@@ -655,7 +299,6 @@
         width: 15%;
         opacity: 0;
     }
-
     .iconLogo {
         position: absolute;
         left: 0;
@@ -665,7 +308,6 @@
         padding: 5px 12px;
         border-radius: 0 0 10px 0;
     }
-
     .brandMain {
         position: absolute;
         left: 30px;
@@ -679,12 +321,10 @@
         line-height: 24px;
         letter-spacing: 1.5px;
     }
-
     .Brand img {
         vertical-align: -1px;
         margin-left: 5px;
     }
-
     .zheng-graphics {
         position: absolute;
         left: 60px;
@@ -699,15 +339,12 @@
         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;
     }
@@ -732,6 +369,53 @@
         border: 1px solid #e15616;
         opacity:1;
     }
+    .infotag {
+        font-size: 10px;
+        width: 58px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        display: inline-block;
+        border-radius: 2px;
+        flex: auto;
+        margin: 0 10px
+    }
+
+    .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;
+    }
+    .fave-text{
+        color: #f94b4b;
+        font-weight: bold;
+    }
+    .fave-text .big{
+        font-size: 20px;
+    }
+
 }
 
 
@@ -740,7 +424,7 @@
 .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;}
+#imgShown{width: 100%; height: 100vw;position: relative;background: #fff}
 .preview-info{
     box-sizing: border-box;
     padding: 0 3.3vw;
@@ -801,4 +485,75 @@
         padding: 2.8vw;
         background: #fff
     }
+    .Disclaimer span{
+       display: block;
+       padding: 1.7vw 0;
+       text-align: center;
+    }
+    .Disclaimer P{
+        line-height: 6.4vw;
+    }
+    .contentHtml div{
+        margin-top: 2.7vw;
+    }
+    .contentHtml img{
+        width: 100%;
+    }
+    .info-p.name{
+        color: #22272e;
+        font-size: 5.6vw;
+    }
+    .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 1.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;
+    }
+    .Disclaimer{
+        background: #fef6f3;
+        border-radius: 2.7vw;
+        padding: 2.7vw;
+    }
+    .main .title{
+        padding: 2.7vw 0;
+        font-size: 4.27vw;
+        color: #22272e
+    }
+    .contentHtml{margin-top: 2.7vw}
+    .fave-text{
+            color: #f94b4b;
+            font-weight: bold;
+        }
+    .fave-text .big{
+        font-size: 3.7vw;
+    }
+
 }

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

@@ -151,7 +151,7 @@ var fleaMarket = new Vue({
             }
         });
         //相關推薦輪播
-        var mySwiper = new Swiper('.swiper-container',{
+        var mySwiper = new Swiper('#productRecommend',{
                 slidesPerView: 7,
                 spaceBetween: 12,
                 slidesPerGroup: 7,

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

@@ -10,7 +10,7 @@
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 
-<!-- 二手市场介绍 -->
+<!-- 二手商品详情 -->
     <div class="preview-container" id="fleaMarket" >
     <div class="inner-container">
         <div class="preview-header clearfix">
@@ -19,17 +19,17 @@
                     <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)">-->
-<!--                            <img :src="item">-->
-<!--                        </li>-->
-<!--                    </ul>-->
-<!--                </div>-->
-                    <div id="swiperImage" class="CM____pic_thumb swiper-container">
+<!--                  <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" v-if="isPC">
+                    <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 id="swiperImage" class="CM____pic_thumb swiper-container" v-if="(!isPC)">
                         <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">
@@ -65,6 +65,12 @@
                             <span v-else class="fave-text">￥<span class="big">{{detail.price1Str}}</span></span>
 
                         </p>
+                        <div class="tag">
+                           <span class="infotag news" v-if="detail.sold==0&&detail.newAdded==1">最新</span>
+                           <span class="infotag brand" v-if="detail.brandName==null&&detail.brandName==''">{{detail.brandName}}</span>
+                           <span class="infotag sold" v-if="detail.sold==1&&detail.newAdded==1||detail.sold==1&&detail.newAdded==0">已售</span>
+                           <span class="infotag other" v-if="detail.brandID==161&&detail.brandName!=''">{{detail.brandName}}</span>
+                         </div>
                     </div>
                      <div class="info " v-if="HandType">
                         <span class="label">市&nbsp;&nbsp;场&nbsp;&nbsp;价：</span>
@@ -145,14 +151,14 @@
         <div class="mainContent">
             <div class="mainContentLeft">
                 <div class="Disclaimer">
-                    <h3 >免责声明:</h3>
+                    <span >免责声明</span>
                     <p>
                         鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
                     </p>
                 </div>
                 <div class="contentHtml">
                     {{detail.productDetails}}
-                       <div style="margin:auto"  v-for="(item, index) in previewThumb" :key="index" :data-src="item">
+                       <div v-for="(item, index) in previewThumb" :key="index" :data-src="item">
                            <img :src="item"/>
                        </div>
                 </div>

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

@@ -45,7 +45,7 @@
                    <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>
+                   <span class="infotag other" v-if="item.brandID==161&&item.brandName!=''">{{item.brandName}}</span>
                   </div>
                   <div class="productname">
                     {{item.name}}