供应商

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

@@ -2,12 +2,12 @@
 @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{padding:16px;background: #fff}
+    #productRecommend li{float:left;width:167px;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 img{display:block;width:150px;height:153px;border: solid 1px #e2e7ef}
     #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;}
@@ -90,10 +90,10 @@
     #imgShown{width: 100%; height: 100vw;position: relative;background: #fff}
     .preview-info{box-sizing: border-box;padding: 0 3.3vw;overflow: hidden;background: #fff}
     .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;}
-    .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-title{font-size: 16px;color: #22272e;padding-top: 15px}
+    .preview-info .preview-info-main .info {width: 100%;height: 8vw;float: left;margin-bottom: 1.3vw;line-height: 8vw;}
+    .preview-info .preview-info-main .info .label {width: 18.7vw;height: 8vw;float: left;display: block;font-size: 3.4vw;line-height: 8vw;text-align: right;color: #999;}
+    .preview-info .preview-info-main .info p {float: left;height: 100%;padding-left: 5.3vw;color: #22272e;}
+    .preview-info-title{font-size: 3.6vw;color: #22272e;padding-top: 4vw;position: relative}
     .ercode{padding: 2.8vw;}
     .ercode img{width: 100%;height: 100%;}
     .main{margin-top: 5vw;padding: 2.8vw;background: #fff}
@@ -101,10 +101,10 @@
     .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;}
+    .info-p.name{color: #22272e;font-size: 4.2vw;}
+    .infotag {font-size:  3vw;padding:0 2.7vw;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 .27vw #f94b4b;color: #f94b4b;background-color: #fadbdb}
+    .infotag.brand {border: solid .27vw #f9a24b;color: #f9a24b;background-color: #faefdb;}
     .infotag.sold {border: solid .27vw #9aa5b5;color: #9aa5b5;background-color: #e3ebf7;}
     .infotag.other {border: solid .27vw #1890f9;color: #1890f9;background-color: #e3ebf7;}
     .Disclaimer{background: #fef6f3;border-radius: 2.7vw;padding: 2.7vw;}
@@ -113,5 +113,12 @@
     .fave-text{color: #f94b4b;font-weight: bold;}
     .fave-text .big{font-size: 3.7vw;}
     .loginWithParam {color: #FC4444;font-size: 3.2vw;cursor: pointer;}
-
+    .yishou_img {width: 14%;position: absolute;top: 2vw;right: 0;transform: translate(-9%, 7%)}
+    .recommendBox{margin-top:2vw;width:100%;background:#FFF}
+.recommendBox .hd{font-size:3.4vw;color:#E15621;font-weight:bold;padding:2.7vw;text-align:center}
+#productRecommend{width:100%;height:50vw;overflow:hidden;position:relative;box-sizing:border-box;padding:0 2.4vw}
+#productRecommend li{width:29.2vw!important;height:41.8vw;overflow:hidden;text-align:center;background:none}
+#productRecommend li .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:26.8vw;height:41.8vw;font-size:3.4vw}
+#productRecommend li .item img{display:block;width:100%;height:26.8vw}
+#productRecommend li .item span {color: #93979F;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-top: 2.6vw;}
 }

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

@@ -124,29 +124,56 @@ var fleaMarket = new Vue({
         this.id = $("#productId").val();
     },
     mounted: function () {
-     var _this = this;
-        _this.InfoData();
-         SecondApi.ProductRecommend({productId:_this.id},function (res) {
+     var _self = this;
+        _self.InfoData();
+         SecondApi.ProductRecommend({productId:_self.id},function (res) {
             if(res.code==0){
               console.log(res)
                if(res.data.length > 0){
-                       _this.recommdeImage = res.data;
-                       _this.recommde =true;
+                       _self.recommdeImage = res.data;
+                       _self.recommde =true;
                     }else {
-                       _this.recommde =false;
+                       _self.recommde =false;
                     }
                     if(res.data.length<7){
                         var length = 7-res.data.length;
-                        _this.recommdeindex = length;
+                        _self.recommdeindex = length;
                     }else {
                         var remainderres=res.data.length%7;
-                         _this.recommdeindex= 7-remainderres;
-                        console.log(_this.recommdeindex)
+                         _self.recommdeindex= 7-remainderres;
+                        console.log(_self.recommdeindex)
                     }
+                    self.recommendPage = isPC ? Math.ceil(res.data.length / 7) : Math.ceil(res.data.length / 3);
+                        setTimeout(function(){
+                            if (isPC) {
+                                $('#productRecommend').slide({
+                                    mainCell:".swiper-wrapper"
+                                    ,titCell:".swiper-pagination span"
+                                    ,effect: "leftLoop"
+                                    ,interTime: 3000
+                                    ,autoPlay: true
+                                    ,scroll:7
+                                    ,vis:7
+                                    ,trigger: "mouseover"
+                                });
+                            } else {
+                                var swiper = new Swiper('#productRecommend', {
+                                    slidesPerView: 3,
+                                    spaceBetween: 0,
+                                    autoplay: {
+                                        delay: 3000,
+                                        disableOnInteraction: false
+                                    },
+                                    pagination: {
+                                        el: '.swiper-pagination'
+                                    }
+                                });
+                            }
+                        },500);
 
             }
         });
-        SecondApi.ProductCount({productId: _this.id},function (res) {
+        SecondApi.ProductCount({productId: _self.id},function (res) {
             if(res.code==0){
                 console.log(res)
             }else {
@@ -154,30 +181,30 @@ var fleaMarket = new Vue({
             }
         });
         //相關推薦輪播
-        var mySwiper = new Swiper('#productRecommend',{
-                slidesPerView: 7,
-                spaceBetween: 12,
-                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();
-                        }
-                    }
-                }
-       })
+       //  var mySwiper = new Swiper('#productRecommend',{
+       //          slidesPerView: 7,
+       //          spaceBetween: 12,
+       //          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/detail.html

@@ -47,7 +47,7 @@
                 <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 class="Brand" v-if="isPC" 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>
@@ -120,14 +120,14 @@
             </div>
         </div>
             <!--  相关推荐 -->
-     <div class="recommendBox" v-if="recommde">
+    <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">
+                    <li class="swiper-slide mfc" 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">
+                            <a class="image" :href="'/product-'+p.productID+'.html'" target="_blank">
+                                <img :src="p.mainImage" :alt="p.name">
                                 <span v-html="p.name"></span>
                             </a>
                         </div>
@@ -137,13 +137,12 @@
                             <a href="javascript:0" class="image">
                                 <img src="/img/base/placeholder.png" alt="">
                             </a>
-                     </div>
-                </li>
+                       </div>
+                    </li>
                 </ul>
-<!--                <div v-show="recommendPage>1" class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>-->
+                <div 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">