首页新品轮播、新品橱窗优化、我的商品新品展示状态修改

src/main/resources/static/css/base/floor.css

@@ -17,6 +17,7 @@
 .section_page .floorCon{width:100%}
 .section_page .swiper-wrapper-floor{width:100%;height:268px}
 .section_page .section_page_main.type_08{height:268px}
+.section_page .recommendBox-wrapperHot {overflow: visible !important;}
 .section_page .section_page_main.type_03{height:704px}
 .section_page  .page_main_item{width:164px;height:268px;float:left;margin-right:16px;margin-bottom:16px;background-color:#FFFFFF;transition:all 0.4s;display:block;position: relative;}
 .section_page  .page_main_item.hot{width:164px;height:268px;float:left;margin-right:10px;margin-bottom:16px;background-color:#FFFFFF;transition:all 0.4s;display:block;position: relative;}
@@ -84,12 +85,18 @@
 .section_page  .page_main_li.ad_02:hover .page_main_name{color:#E15616;font-weight:bold}
 .section_page  .page_main_li .page_main_logo{width:100%;height:134px;display:block;float:left}
 .section_page  .page_main_li .page_main_name{width:100%;height:32px;float:left;line-height:32px;text-align:center;font-size:14px;color:#4a4f58;background-color:#f9f9f9}
-
-#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0}
+#recommendBox {position: relative;height: 329px;overflow: hidden;}
+#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;left:0;bottom: 0;}
 #recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2}
 #recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
-#recommendBox .swiper-pagination.hot span:before{content:"";display:inline-block;width:100%;height:4px;background:#FFFFFF;border-radius:2px}
+#recommendBox .swiper-pagination.hot span{display:inline-block;width:14px;height:6px;border:5px solid transparent;background: rgba(255, 180, 150, 0.39);cursor:pointer;opacity:1;}
+#recommendBox .swiper-pagination.hot span:before{content:"";display:inline-block;width:100%;height:6px;background: rgba(255, 180, 150, 0.39);border-radius:3px}
+#recommendBox .swiper-pagination span.on{width:28px;opacity:1}
 #recommendBox .swiper-pagination span.on{width:28px;opacity:1}
+#recommendBox .swiper-pagination.hot span.swiper-pagination-bullet-active{width:28px;opacity:1}
+#recommendBox .swiper-pagination.hot span.swiper-pagination-bullet-active:before{background:#FFFFFF;}
+.swiper-pagination-bullet{background: none !important;}
+
 }
 /**
  * 移动端

src/main/resources/static/css/index/index_new.pc.css

@@ -20,6 +20,20 @@ li{list-style:none;}
 #swiper-container .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
 #swiper-container .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px}
 #swiper-container .swiper-pagination span.on:before{width:28px;background:#fff}
+.swiper-slide {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
 /*公告*/
 #new-container{height: 48px;background: url("/img/base/icon-newbg@2x.png");background-size: cover;}
 #new-container .new-list{float: left;}

src/main/resources/static/js/index.js

@@ -184,34 +184,30 @@ var homeData = new Vue({
                         span += '<span></span>';
                     }
                     cell.html(span);
-                    $('.swiper-container-floor').slide({
+                    $('.mySwiperSlide').slide({
                         mainCell:".recommendBox-wrapper",
-                        titCell:".swiper-pagination-floor span",
+                        titCell:".swiper-pagination span",
                         effect: "leftLoop",
                         autoPlay: false,
                         scroll:5,
                         vis:5
                     });
-                    // var swiper = new Swiper(".swiper-container-floor", {
-                    //     slidesPerView: 5,
-                    //     spaceBetween: 20,
-                    //     slidesPerGroup: 5,
-                    //     autoplay:false,
-                    //     loop: true,
-                    //     loopFillGroupWithBlank: true,
-                    //     pagination: {
-                    //         el: ".swiper-pagination"
-                    //     }
-                    // });
-                    // $('.swiper-container-floor').slide({
-                    //     mainCell:".recommendBox-wrapperHot",
-                    //     titCell:".swiper-pagination-floor span",
-                    //     effect: "leftLoop",
-                    //     autoPlay: true,
-                    //     interTime:8000,
-                    //     scroll:5,
-                    //     vis:5
-                    // });
+                    var swiper = new Swiper(".mySwiper", {
+                        slidesPerView: 5,
+                        spaceBetween: 13,
+                        slidesPerGroup: 5,
+                        loop: true,
+                        autoplay: {
+                            delay: 4000,
+                            stopOnLastSlide: false,
+                            disableOnInteraction: true,
+                        },
+                        loopFillGroupWithBlank: false,
+                        pagination: {
+                            el: ".swiper-pagination",
+                            clickable:true
+                        }
+                    });
                 } else {
                     var swiper = new Swiper('#recommendBox', {
                         slidesPerView: 2,

src/main/resources/templates/index.html

@@ -11,6 +11,7 @@
     <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/index/index_new.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <link th:href="@{/css/index/index_new.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/lib/css/swiper-bundle.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
 <body>
@@ -52,7 +53,7 @@
     <div class="section_container">
         <div class="inner">
             <div id="sidebar" class="section_right">
-                <div class="box swiper-wrapper" >
+                <div class="box" >
                     <div class="section_right_item" th:if="${sideJson.get('liveList')}!=null and ${sideJson.get('liveList').size}>0">
                         <div class="right_item_title">
                             <p>精彩直播</p>
@@ -139,7 +140,7 @@
                             <p>{{ floor.detail }}</p>
                             <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
                         </div>
-                        <div class="swiper-container-floor hotList recommendBoxHot" id="recommendBox">
+                        <div class="swiper-container-floor hotList mySwiper" id="recommendBox">
                             <div class="swiper-wrapper section_page_main type_08 recommendBox-wrapper recommendBox-wrapperHot clear mfw section_8 max">
                                 <!-- 商品/图片 列表 -->
                                 <a :href="'/product-'+pros.product.productId+'.html'" class="swiper-slide page_main_item hot ad_04" target="_blank" v-for="pros in floor.floorImageList4">
@@ -220,7 +221,7 @@
                                     </div>
                                 </a>
                             </div>
-                            <div class="swiper-pagination swiper-pagination-floor mfc hot"  :data-id="floor.floorImageList4.length"></div>
+                            <div class="swiper-pagination swiper-pagination-floor hot mfc "  :data-id="floor.floorImageList4.length"></div>
                         </div>
                     </div>
                     <!--楼层-->
@@ -230,7 +231,7 @@
                                 <h1 :data-id="index+1">{{ floor.title }}</h1>
                                 <p>{{ floor.detail }}</p>
                             </div>
-                            <div :class="floor.floorContent.templateType == 8 ? 'swiper-container-floor' : ''"
+                            <div :class="floor.floorContent.templateType == 8 ? 'swiper-container-floor mySwiperSlide' : ''"
                                  :id="floor.floorContent.templateType == 8 ? 'recommendBox' : ''"
                             >
                                 <div :class="floor.floorContent.templateType == 8 ?
@@ -386,11 +387,11 @@
                             <p th:text="${floor.get('detail')}"></p>
                             <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
                         </div>
-                        <div class="hotList swiper-container-floor recommendBoxHot" id="recommendBox">
+                        <div class="hotList swiper-container-floor mySwiper" id="recommendBox">
                             <div class="section_page_main type_08 swiper-wrapper recommendBox-wrapper recommendBox-wrapperHot clear mfw section_8">
                                 <!-- 商品/图片 列表 -->
                                 <th:block th:each="pros : ${floor.get('floorImageList4')}"  th:object="${pros}">
-                                    <a th:href="*{link}" class="page_main_item hot ad_04 swiper-slide" target="_blank">
+                                    <a th:href="*{link}" class="swiper-slide page_main_item hot ad_04" target="_blank">
                                         <th:block th:if="${pros.get('product')}!=null" th:object="${pros.get('product')}">
                                             <img class="page_main_image" src="/img/base/placeholder.png" th:attr="data-original=*{image}" th:alt="*{name}">
                                         </th:block>
@@ -441,7 +442,7 @@
                                     </a>
                                 </th:block>
                             </div>
-                            <div class="swiper-pagination swiper-pagination-floor mfc" th:attr="data-id=${floor.get('floorImageList4').size}"></div>
+                            <div class="swiper-pagination swiper-pagination-floor hot mfc" th:attr="data-id=${floor.get('floorImageList4').size}"></div>
                         </div>
                     </div>
                     <!--静态化普通楼层-->
@@ -452,7 +453,7 @@
                                 <p th:text="${floor.get('detail')}"></p>
                             </div>
                             <th:block th:object="${floor.get('floorContent')}">
-                                <div th:class="*{templateType}==8? 'swiper-container-floor' : ''" th:id="*{templateType}==8? 'recommendBox' : ''">
+                                <div th:class="*{templateType}==8? 'swiper-container-floor mySwiperSlide' : ''" th:id="*{templateType}==8? 'recommendBox' : ''">
                                     <div th:class="*{templateType}==8? *{'section_page_main type_08 swiper-wrapper recommendBox-wrapper clear mfw section_'+templateType} : *{'section_page_main clear mfw section_'+templateType}">
                                         <!-- 广告图 -->
                                         <th:block th:if="*{templateType}==1 or *{templateType}==2 or *{templateType}==3 or *{templateType}==4 or *{templateType}==5">