推荐专区11

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

@@ -1,7 +1,7 @@
 @charset "utf-8";
 html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,pre,img,table,tr,th,td,form,input,textarea,button{margin:0;padding:0;}
 body,input,textarea,button,select{font-family:Source Han Sans CN,'Microsoft YaHei',SimSun,Arial,Helvetica,sans-serif;}
-body{width:100%;min-height:100%;font-size:14px;color:#333;background:#EBECEF;}
+body{width:100%;min-height:100%;font-size:14px;color:#333;background:#F5F5F5;}
 .clear{clear:both;}
 .clear:after{content:'';display:table;clear:both;}
 ::-ms-clear,::-ms-reveal{display:none;}

src/main/resources/static/css/index/index.h5.css

@@ -34,11 +34,6 @@ li{list-style:none;}
 .mNavBox .navItem{display:none;width:100vw;position:absolute;left:0;background:#F5F5F5}
 .mNavBox .navItem .second{display:block;text-align:center;width:25vw;padding:3.2vw 0;color:#999FAB;font-size:3.2vw;line-height:6.4vw;white-space:nowrap}
 .mNavBox .navItem .second img{display:block;margin:0 auto;width:6.4vw;height:6.4vw}
-/* 首页楼层 */
-.floorTit{width:93.4vw;margin:0 auto;}
-.floorTit h2{font-weight:bold;color:#2D3036;font-size:3.7vw;line-height:11.2vw;}
-.floorTit+ul img{width:60px;}
-.floorCon{width:97vw;margin:0 auto;}
 /* 推荐专区 */
 #recommendBox{width:100%;height:171vw;margin-top:-1.3vw;overflow:hidden;position:relative}
 #recommendBox .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:2.6vw;left:0}
@@ -63,5 +58,16 @@ li{list-style:none;}
 #recommendBox .swiper-slide .price .icon:before{width:4vw;height:4vw;background-position:55% 25.2%}
 #recommendBox .swiper-slide .price .icon.on:before{background-position:49% 25.2%}
 #recommendBox .swiper-slide .btn{height:9vw;line-height:9vw}
-#recommendBox .swiper-slide .btn{display:inline-block;width:35.8vw;height:9vw;text-align:center;overflow:hidden;color:#E15616;background:#FEF6F3;border-radius:2px}
-#recommendBox .swiper-slide .btn.on{background:#E15616;color:#FFF}
+#recommendBox .swiper-slide .btn{display:inline-block;width:35.8vw;height:9vw;text-align:center;overflow:hidden;color:#F94B4B;background:#FEF6F3;border-radius:2px}
+#recommendBox .swiper-slide .btn.add{background:#FEF6F3;color:#E15616;}
+/* 首页楼层 */
+.floorTit{width:93.4vw;margin:0 auto;}
+.floorCon{width:97vw;margin:0 auto;}
+.floorTit h2{font-weight:bold;color:#2D3036;font-size:3.7vw;line-height:11.2vw;}
+
+
+
+
+
+.floorTit+ul img{width:60px;}
+.floorCon{width:97vw;margin:0 auto;}

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

@@ -27,8 +27,6 @@ li{list-style:none;}
 .footTop .wrap span:nth-of-type(2):before{background-position:-80px -60px}
 .footTop .wrap span:nth-of-type(3):before{background-position:-160px -60px}
 .footTop .wrap span:nth-of-type(4):before{background-position:-240px -60px}
-/* 首页楼层 */
-.floorTit h2{font-weight:bold;color:#2D3036;font-size:24px;line-height:56px;padding-top:16px}
 /* 推荐专区 */
 #recommendBox{width:1220px;height:484px;margin-left:-10px;overflow:hidden;position:relative}
 #recommendBox .swiper-pagination{width:100%;height:68px;padding:27px 0;z-index:1;text-align:center;font-size:0;}
@@ -37,7 +35,7 @@ li{list-style:none;}
 #recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
 #recommendBox .swiper-wrapper{position:relative;width:200%;height:426px;overflow:hidden;z-index:0;}
 #recommendBox .swiper-wrapper .swiper-slide{float:left;width:285px;height:416px;margin:0 10px;}
-#recommendBox .swiper-slide .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;margin:0 auto;width:100%;height:100%;background:#FFF;box-shadow:0 3px 6px #ccc;border-radius:2px;font-size:16px}
+#recommendBox .swiper-slide .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;margin:0 auto;width:100%;height:100%;background:#FFF;border-radius:2px;font-size:16px}
 #recommendBox .swiper-slide .item img{display:block;width:100%;height:284px}
 #recommendBox .swiper-slide .image .icon{position:absolute;right:20px;top:10px}
 #recommendBox .swiper-slide .image .icon.hot:before,#recommendBox .swiper-slide .image .icon.new:before{display:block;width:50px;height:64px}
@@ -56,5 +54,50 @@ li{list-style:none;}
 #recommendBox .swiper-slide .item:hover .btnBox{display:block}
 #recommendBox .swiper-slide .item:hover{box-shadow:0px 3px 6px rgba(225,86,22,.5)}
 #recommendBox .swiper-slide .btn{display:block;width:158px;margin:12px auto;height:42px;line-height:42px;text-align:center;overflow:hidden;color:#F94B4B;background:#FFE6DC;border:1px solid #E15616;border-radius:2px}
-#recommendBox .swiper-slide .btn:hover,#recommendBox .swiper-slide .btn.on{background:#E15616;color:#FFF}
+#recommendBox .swiper-slide .btn.add{color:#E15616;background:#FFE6DC;border:1px solid #FFE6DC;}
+#recommendBox .swiper-slide .btn:hover{background:#E15616;color:#FFF}
 
+/* 首页楼层 */
+.floorTit{padding:24px 0 16px 0;
+    position: relative;}
+.floorTit h2,.floorTit h3{font-weight:bold;color:#2D3036;font-size:24px;line-height:40px;}
+.floorTit h5{font-weight:normal;color:#999FAB;font-size:14px;line-height:16px;}
+.floorTit a.more{
+    position: absolute;
+    right: 0;
+    top:40px;
+    height:30px;
+    line-height: 30px;
+}
+.floorTit a.more:after{
+    margin-left:5px;
+    content:'\276F';
+}
+.floorCon {width:1200px;margin:0 auto;}
+.floorList{width:200%;}
+.floorList>li{
+    width:224px;
+    height:278px;
+    margin-right:20px;
+    background: #FFF;
+    position: relative;
+}
+.floorList>li>a{display:block;width:100%;height:100%;}
+.floorList>li img{
+    display: block;
+    width:224px;
+    height:224px;
+}
+.floorList>li p{
+    height:54px;
+    line-height: 54px;
+    font-size: 16px;
+    color:#93979F;
+    text-align: center;
+}
+.floorList>li>a:hover p{
+    color:#E15616;
+}
+.floorList>li p:hover{
+    background:#FEF6F3;
+}

src/main/resources/templates/index.html

@@ -51,9 +51,8 @@
     <div class="wrap">
         <div th:each="item: ${pageFloors}">
             <div th:if="${item.type}==1">
-                <!--推荐专区-->
                 <div class="floorTit">
-                    <h2 th:text="${item.title}" data-id="1"></h2>
+                    <h2 th:text="${item.title}" data-id="1">推荐专区</h2>
                 </div>
                 <div class="floorCon">
                     <div id="recommendBox" class="swiper-container">
@@ -85,7 +84,7 @@
                                         </template>
                                         <div class="btnBox">
                                             <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
-                                            <a v-else-if="p.priceflag!=1" href="javascript:void(0)" class="btn on">加入购物车</a>
+                                            <a v-else-if="p.priceflag!=1" href="javascript:void(0)" class="btn add">加入购物车</a>
                                         </div>
                                     </div>
                                 </div>
@@ -95,19 +94,17 @@
                     </div>
                 </div>
             </div>
-            <div th:if="${item.type}==2">
-                <!--团购促销-->
+            <!--<div th:if="${item.type}==2">
                 <div class="floorTit">
-                    <h2 th:text="${item.title}" data-id="2"></h2>
+                    <h2 th:text="${item.title}" data-id="2">团购促销</h2>
                 </div>
-            </div>
+            </div>-->
             <div th:if="${item.type}==3">
-                <!--优质供应商-->
                 <div class="floorTit">
                     <h2 th:text="${item.title}" data-id="3">优质供应商</h2>
                     <h5>采美正品联盟 质量保证</h5>
                 </div>
-                <div>
+                <div class="floorCon">
                     <img src="/img/home/goodsup.png"/>
                     <ul>
                         <li v-for="topic in topicData3" style="display: inline-block">
@@ -120,19 +117,20 @@
                 </div>
             </div>
             <div th:if="${item.type}==4">
-                <!--商品专题-->
                 <div class="floorTit">
-                    <h2 th:text="${item.title}" data-id="4">商品专题</h2>
-                    <a href="javascript:void(0);">更多商品专题</a>
+                    <h2 th:text="${item.title}" data-id="4">专题</h2>
+                    <a class="more" href="javascript:void(0);">更多商品专题</a>
+                </div>
+                <div class="floorCon">
+                    <ul>
+                        <li v-for="topic in topicData4" style="display: inline-block">
+                            <a href="javascript:void(0);">
+                                <img :src="topic.image" :alt="topic.title">
+                                <p v-text="topic.title"></p>
+                            </a>
+                        </li>
+                    </ul>
                 </div>
-                <ul>
-                    <li v-for="topic in topicData4" style="display: inline-block">
-                        <a href="javascript:void(0);">
-                            <img :src="topic.image" :alt="topic.title">
-                            <p v-text="topic.title"></p>
-                        </a>
-                    </li>
-                </ul>
             </div>
             <div th:if="${item.type}==5">
                 <!--小专题-->
@@ -152,14 +150,16 @@
                         <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
                         <h5 v-text="bigTopic.detail"></h5>
                     </div>
-                    <ul>
-                        <li v-for="floor in bigTopic.floorData" style="display: inline-block">
-                            <a href="javascript:void(0);">
-                                <img :src="floor.image" :alt="floor.title">
-                                <p v-text="floor.title"></p>
-                            </a>
-                        </li>
-                    </ul>
+                    <div class="floorCon">
+                        <ul class="floorList clear">
+                            <li v-for="floor in bigTopic.floorData" style="display: inline-block">
+                                <a href="javascript:void(0);">
+                                    <img :src="floor.image" :alt="floor.title">
+                                    <p v-text="floor.title"></p>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </div>