商品详情

src/main/resources/static/css/product/detail.h5.css

@@ -2,3 +2,65 @@
 /**
 * 移动端
 */
+li{list-style:none}
+.productBox{width:100%;background:#FFF}
+.productBox .imageBox{width:100%;height:100vw;position:relative}
+#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}
+.productBox .detailBox{box-sizing:border-box;padding:0 3.3vw;overflow:hidden}
+.productBox .detailBox .crumbs{height:8vw;line-height:8vw;font-size:3.1vw;overflow:hidden;color:#93979F}
+.productBox .detailBox .crumbs a{color:#93979F}
+.productBox .detailBox .title{font-size:4.2vw;font-weight:bold;line-height:6.4vw;color:#4A4F58;margin-bottom:3.5vw}
+.productBox .detailBox .tags span{display:inline-block;height:4.2vw;line-height:4.2vw;padding:0 1vw;font-size:2.6vw;color:#FFF;background:#86B2FF;border-radius:2px;margin-right:2.7vw}
+.productBox .detailBox .detail{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}
+.productBox .detailBox .detail hr{border:none;border-top:1px dashed #BEC2C9;margin:2vw 0}
+.productBox .detailBox .row>i{font-style:normal;margin-right:2vw}
+.productBox .detailBox .row em{font-style:normal;color:#4A4F58}
+.productBox .detailBox .row em.ser{color:#93979F;display:inline-block;margin-right:4vw}
+.productBox .detailBox .row em.ser:before{content:'\2713';display:inline-block;width:3.4vw;height:3.4vw;text-align:center;line-height:3.4vw;font-size:3.4vw;background:#E15616;border-radius:1.7vw;color:#FFF;margin-right:1.4vw}
+.productBox .detailBox .price{height:21vw}
+.productBox .detailBox .price .icon{display:inline-block;font-size:0;width:4vw;height:4vw;line-height:4vw;position:relative;vertical-align:text-top;margin-top:0}
+.productBox .detailBox .price .icon.on{position:absolute;left:0;top:0;margin:0}
+.productBox .detailBox .price .icon:before{width:4vw;height:4vw;background-position:55% 25.2%}
+.productBox .detailBox .price .icon.on:before{background-position:49% 25.2%}
+.productBox .detailBox .number{display:inline-block;width:26.6vw;line-height:6.4vw;height:6.4vw;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top}
+.productBox .detailBox .number>em{display:inline-block;width:6.4vw;height:6.4vw;background:#FFE6DC;font-size:4vw;line-height:6vw;vertical-align:top}
+.productBox .detailBox .number input{width:13.5vw;border:none;line-height:6vw;vertical-align:top;text-align:center;color:#E15616;font-size:3.4vw}
+.productBox .detailBox .detail .flag{position:absolute;right:0;top:0;font-size:0}
+.productBox .detailBox .detail .flag:before{display:inline-block;width:20vw;height:20vw;background-position:-2.5% 52%}
+.productBox .detailBox .detail .btn{position:absolute;right:2.8vw;top:2.8vw;height:6vw;line-height:6vw;padding:0 2vw;background:#F94B4B;font-size:3.4vw;color:#FFF;border-radius:2px}
+.productBox .detailBox .btnBox:before{content:'';display:block;width:200%;height:2.7vw;background:#F5F5F5;margin-left:-25%}
+.productBox .detailBox .btnBox{text-align:center}
+.productBox .detailBox .btnBox .cart,.productBox .detailBox .btnBox .buy{display:inline-block;width:40vw;height:11.2vw;line-height:11.2vw;text-align:center;border:1px solid #E15616;background:#FFE6DC;cursor:pointer;border-radius:2px;font-size:3.4vw;color:#E15616;margin:1.7vw 1.1vw}
+.productBox .detailBox .btnBox .buy{background:#E15616;color:#FFF}
+.productBox .detailBox .concatBox{height:20vw;padding-bottom:4vw}
+.productBox .detailBox .concatBox img{height:20vw;width:auto}
+
+.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:41.8vw;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}
+.mShopBox{box-sizing:border-box;background:#FFF;margin:2.6vw 0;line-height:7.5vw;font-size:3.4vw;padding:2vw 3.3vw}
+.mShopBox span{display:block;white-space:nowrap;color:#93979F}
+.mShopBox span em{white-space:normal;font-style:normal;line-height:4.5vw;display:inline-block;vertical-align:top;box-sizing:border-box;padding:1.5vw 0;width:76vw}
+.mShopBox span:first-child em{width:auto;margin-right:2vw;}
+.mShopBox .shop,.shopBox .heart{vertical-align:text-top}
+.mShopBox .shop:before{width:7.5vw;height:6vw;background-position:-1% 60%;margin-top:-1vw;}
+.mShopBox .heart:before{width:5.5vw;height:5.5vw;background-position:0% 36.5%}
+.mShopBox .name:after{content:'\276F';float:right;font-size:4vw;color:#707070}
+
+.detailBox{background:#FFF;margin-bottom: 2.7vw;}
+.detailBox .tabTit{text-align:justify;padding:1.5vw 3.3vw;line-height:0;font-size:0;}
+.detailBox .tabTit span{display:inline-block;height:7.5vw;line-height:7.5vw;border-bottom:2px solid transparent;color:#93979F;font-size:3.4vw}
+.detailBox .tabTit span.on{color:#E15621;border-color:#E15621}
+.detailBox .tabTit:after{content:'';display:inline-block;width:100%}
+.detailBox .tabCon{padding:1.2vw 3.3vw 3.3vw;text-align:center;font-size:3.4vw;}
+.detailBox .tabCon img{max-width:100%}
+.detailBox .tabCon table{width:100%;text-align:left}
+.detailBox .tabCon td{padding:1.5vw;line-height:5vw}
+.detailBox .tabCon td:nth-of-type(1){width:20%;color:#93979F}
+.detailBox .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
+.detailBox .comment{color:#93979F;padding:5vw 0}

src/main/resources/static/css/product/detail.pc.css

@@ -53,130 +53,43 @@ li{list-style:none;}
 .productBox .detailBox .concatBox{height:120px;padding:15px}
 .productBox .detailBox .concatBox img{height:120px;width:auto}
 
-.recommendBox{margin-bottom:16px}
+.recommendBox{margin-bottom:16px;overflow: hidden;}
 .recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
-.recommendBox .bd{width:100%;height:205px;padding:15px 0;background:#FFF}
-.recommendBox .bd li{float:left;width:153px;height:205px;margin-left:14px;overflow:hidden;line-height:22px}
-.recommendBox .bd li a{display:block;width:100%;height:100%;color:#93979F}
-.recommendBox .bd li a:hover{color:#E15616}
-.recommendBox .bd li img{display:block;width:153px;height:153px}
+#productRecommend{width:100%;min-height:205px;padding:15px 7px;background:#FFF}
+#productRecommend li{float:left;width:167px;height:205px;overflow:hidden;}
+#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:153px;height:153px}
+#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;}
 
-.wrap>.detailBox{
-    float:left;
-    box-sizing: border-box;
-    padding:0 16px;
-    width:884px;
-    background: #FFF;
-}
-.detailBox .tabTit{
-    height:40px;
-    line-height: 40px;
-    border-bottom: 1px solid #E15621;
-    font-size:16px;
-    color:#93979F;
-}
-.detailBox .tabTit span{
-    display: inline-block;
-    box-sizing: border-box;
-    min-width: 130px;
-    text-align: center;
-    height:100%;
-    padding:0 32px;
-    cursor: pointer;
-}
-.detailBox .tabTit span:hover{color:#E15621;}
-.detailBox .tabTit span.on,.detailBox .tabTit span.on:hover{
-    background:#E15621;
-    color:#FFF;
-}
-.detailBox .tabCon{
-    padding:16px 0;
-    text-align: center;
-}
-.detailBox .tabCon table{width:100%;text-align:left;}
-.detailBox .tabCon td{
-    padding:10px 12px;
-    line-height: 20px;
-}
-.detailBox .tabCon td:nth-of-type(1){width:20%;color:#93979F;}
-.detailBox .tabCon td:nth-of-type(2){width:80%;color:#4A4F58;}
-.detailBox .comment{
-    color:#93979F;padding:40px 0;
-}
+.wrap>.detailBox{float:left;box-sizing:border-box;padding:0 16px;width:884px;background:#FFF}
+.detailBox .tabTit{height:40px;line-height:40px;border-bottom:1px solid #E15621;font-size:16px;color:#93979F}
+.detailBox .tabTit span{display:inline-block;box-sizing:border-box;min-width:130px;text-align:center;height:100%;padding:0 32px;cursor:pointer}
+.detailBox .tabTit span:hover{color:#E15621}
+.detailBox .tabTit span.on,.detailBox .tabTit span.on:hover{background:#E15621;color:#FFF}
+.detailBox .tabCon{padding:16px 0;text-align:center}
+.detailBox .tabCon img{max-width:100%;}
+.detailBox .tabCon table{width:100%;text-align:left}
+.detailBox .tabCon td{padding:10px 12px;line-height:20px}
+.detailBox .tabCon td:nth-of-type(1){width:20%;color:#93979F}
+.detailBox .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
+.detailBox .comment{color:#93979F;padding:40px 0}
 
-.wrap>.rgt{
-    float:right;
-    width:284px;
-
-}
-.wrap>.rgt .hd{
-    height:40px;
-    line-height: 40px;
-    padding:0 16px;
-    font-size: 16px;
-    color:#E15616;
-    font-weight: bold;
-    background:#FEF6F3;
-}
-.shopBox {
-    margin-bottom: 16px;
-    background: #FFF;
-}
-.shopBox .bd{
-    padding: 0 16px 16px;
-}
-.shopBox .bd .name{
-    height:40px;
-    line-height: 40px;
-    font-weight: bold;
-    color: #4A4F58;
-    font-size: 14px;
-    border-bottom: 1px solid #F7F7F7;
-}
-.shopBox .shop,.shopBox .heart{vertical-align: text-top;}
-.shopBox .shop:before{
-    width: 30px;
-    height: 25px;
-    background-position: 5px -297px;
-}
-.shopBox .bd .heart:before{
-    width: 25px;
-    height: 25px;
-    background-position: -35px -297px;
-}
-.shopBox .bd .tit{
-    line-height: 30px;
-    font-weight: bold;
-    color: #4A4F58;
-    font-size: 14px;
-}
-.shopBox .bd .con{
-    line-height: 20px;
-    color:#93979F;
-    font-size: 12px;
-    margin-bottom: 12px;
-}
-.shopBox .bd .btn{
-    display: block;
-    width:100%;
-    height:36px;
-    line-height: 36px;
-    text-align: center;
-    box-sizing: border-box;
-    border-radius: 2px;
-    border:1px solid #E15616;
-    font-size: 14px;
-    color:#E15616;
-    margin-top: 12px;
-}
-
-.wrap>.rgt .contact{
-background: #FFF;
-}
-.wrap>.rgt .contact .bd{
-    padding:10px 16px 16px;
-    line-height: 24px;
-    font-size: 14px;
-    color: #4A4F58;
-    font-weight: bold;
-}
+.wrap>.rgt{float:right;width:284px}
+.wrap>.rgt .hd{height:40px;line-height:40px;padding:0 16px;font-size:16px;color:#E15616;font-weight:bold;background:#FEF6F3}
+.shopBox{margin-bottom:16px;background:#FFF}
+.shopBox .bd{padding:0 16px 16px}
+.shopBox .bd .name{height:40px;line-height:40px;font-weight:bold;color:#4A4F58;font-size:14px;border-bottom:1px solid #F7F7F7}
+.shopBox .shop,.shopBox .heart{vertical-align:text-top}
+.shopBox .shop:before{width:30px;height:25px;background-position:5px -297px}
+.shopBox .bd .heart:before{width:25px;height:25px;background-position:-35px -297px}
+.shopBox .bd .tit{line-height:30px;font-weight:bold;color:#4A4F58;font-size:14px}
+.shopBox .bd .con{line-height:20px;color:#93979F;font-size:12px;margin-bottom:12px}
+.shopBox .bd .btn{display:block;width:100%;height:36px;line-height:36px;text-align:center;box-sizing:border-box;border-radius:2px;border:1px solid #E15616;font-size:14px;color:#E15616;margin-top:12px}
+.wrap>.rgt .contact{background:#FFF}
+.wrap>.rgt .contact .bd{padding:10px 16px 16px;line-height:24px;font-size:14px;color:#4A4F58;font-weight:bold}

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

@@ -1,6 +1,3 @@
-/**
- * Created by ZHJY on 2020/6/18.
- */
 var productDetail = new Vue({
     el: "#container",
     data: {
@@ -11,6 +8,7 @@ var productDetail = new Vue({
         price: 564,
         priceFlag: 2,
         recommendType: 1,
+        recommendPage: 1,
         recommends: [],
         parameters: [],
 
@@ -34,7 +32,7 @@ var productDetail = new Vue({
                                 ,"on"
                             ).init();
                         } else {
-                            /*var swiper = new Swiper('#swiper-container', {
+                            var swiper = new Swiper('#swiperImage', {
                                 loop : true,
                                 autoplay: {
                                     delay: 2000,
@@ -42,9 +40,9 @@ var productDetail = new Vue({
                                 },
                                 pagination: {
                                     el: '.swiper-pagination',
-                                    clickable :true
+                                    type: 'fraction'
                                 }
-                            });*/
+                            });
                         }
                     },500);
                 }
@@ -59,6 +57,27 @@ var productDetail = new Vue({
             }).done(function (r) {
                 if (r.code === 0 && r.data) {
                     _self.recommends = r.data;
+                    _self.recommendPage = Math.ceil(r.data.length / 7);
+                    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,
+                                freeMode: true,
+                                spaceBetween: 0
+                            });
+                        }
+                    },500);
                 }
             });
         },

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

@@ -16,16 +16,19 @@
     <div class="wrap">
         <div class="productBox clear">
             <div class="imageBox" id="imgShown">
-                <div class="bigImage">
+                <div v-if="isPC" class="bigImage">
                     <img :src="images[0]">
                     <span class="mask"></span>
                 </div>
-                <div class="smallImage">
-                    <ul class="clear">
-                        <li v-for="img in images"><img :src="img"></li>
+                <div id="swiperImage" class="smallImage swiper-container">
+                    <ul class="swiper-wrapper clear">
+                        <li class="swiper-slide mfc" v-for="img in images">
+                            <img :src="img">
+                        </li>
                     </ul>
+                    <div class="swiper-pagination mfc"></div>
                 </div>
-                <div class="zoomImage">
+                <div v-if="isPC" class="zoomImage">
                     <div class="zoom">
                         <img :src="images[0]">
                     </div>
@@ -73,6 +76,7 @@
                             <input type="number" th:value="*{minBuyNumber}">
                             <em class="add">+</em>
                         </span>
+                        <input type="hidden" th:value="*{step}">
                     </p>
                     <hr>
                     <p class="row"><span class="l">服务</span><i>：</i>
@@ -81,31 +85,45 @@
                         <em class="ser">正品保证</em>
                     </p>
                     <a href="javascript:void(0);" class="btn">登录查看价格</a>
-                    <span class="icon flag"></span>
+                    <span class="icon mIcon flag"></span>
                 </div>
                 <div class="btnBox">
                     <a href="javascript:void(0);" class="cart icon">加入购物车</a>
                     <a href="javascript:void(0);" class="buy">立即购买</a>
                 </div>
-                <div class="concatBox"><img src="/img/product/concat.png"></div>
+                <div class="concatBox">
+                    <img v-if="isPC" src="/img/product/concat.png">
+                    <img v-else src="/img/product/concat_m.png">
+                </div>
             </div>
         </div>
 
         <div class="recommendBox">
             <div class="hd">相关推荐</div>
-            <div class="bd">
-                <ul class="clear">
-                    <li class="item" v-for="p in recommends">
-                        <a class="image" :href="'/product/detail.html?pid='+p.pid" target="_blank">
-                            <img :src="p.image" :alt="p.name">
-                            <span v-text="p.name" ></span>
-                        </a>
+            <div id="productRecommend" class="swiper-container">
+                <ul class="swiper-wrapper" v-cloak>
+                    <li class="swiper-slide" v-for="p in recommends">
+                        <div class="item">
+                            <a class="image" :href="'/product/detail.html?pid='+p.pid" target="_blank">
+                                <img :src="p.image" :alt="p.name">
+                                <span v-html="p.name"></span>
+                            </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>
     <div class="wrap clear">
+        <div v-if="!isPC" class="mShopBox">
+            <a th:href="@{'/shop/home.html?sid=' + ${product.shopId}}">
+                <span class="name"><em th:text="${product.shopTitle}"><i class="mIcon shop"></i></em><i class="mIcon shop"></i></span>
+                <span>经营范围：<em th:text="${product.businessScope}"></em></span>
+                <span>所在地区：<em th:text="${product.shopAddress}"></em></span>
+                <span>满意度：<em><i th:each="i:${#numbers.sequence(1,5)}" class="mIcon heart"></i></em></span>
+            </a>
+        </div>
         <div class="detailBox">
             <div class="tabTit">
                 <span class="on">产品介绍</span>
@@ -120,15 +138,6 @@
                 </div>
                 <div class="item">
                     <table>
-                        <tr>
-                            <td>重量：</td>
-                            <td>180g</td>
-                        </tr>
-                        <tr>
-                            <td>颜色：</td>
-                            <td>大核心技术保证了浅色及大核心技术保了浅色及大核心技术保证了浅色及大核心技术保大核心技术保证了浅色及大 核心技术保了浅色及大核心技术保证了浅色及大核心技术保</td>
-                        </tr>
-
                         <tr v-for="pa in parameters">
                             <td v-text="pa.paramsName"></td>
                             <td v-text="pa.paramsContent"></td>
@@ -143,7 +152,7 @@
                 </div>
             </div>
         </div>
-        <div class="rgt">
+        <div v-if="isPC" class="rgt">
             <div class="shopBox">
                 <div class="hd">供应商信息</div>
                 <div class="bd">
@@ -167,20 +176,6 @@
             </div>
         </div>
     </div>
-
-    <hr>
-<div th:text="${product.pid}"></div>
-
-<div th:text="${product.remarks}"></div>
-<div th:text="${product.validFlag}"></div>
-
-<div th:text="${product.step}"></div>
-
-<div th:text="${product.brandId}"></div>
-    <hr>
-
-
-
 </div>
 
 <!-- 引入底部 -->