新版首页

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

@@ -27,10 +27,31 @@
 #swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
 .section-content-image,
 .section-content-naves,
-.section-content-adv,
 .section-content-mains-top,
+.section-content-advert-top,
 .section-content-usermain{ display: none; }
-
+.section-content-adv{
+    width: 100%;
+    height: 23.4vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 1vw;
+}
+.section-content-adv .section-content-adv-item{
+    width: 50%;
+    height: 23.4vw;
+    margin:0 1vw;
+    overflow: hidden;
+    border-radius: 2vw;
+}
+.section-content-adv .section-content-adv-item img,
+.section-content-adv .section-content-adv-item a{
+    display: block;
+    width: 100%;
+    height: 100%;
+}
 /* 快捷运营 */
 .quickOperation {
 }
@@ -159,6 +180,7 @@
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
+    background-color: #FFFFFF !important;
 }
 .section-page-item .section-page-top .section-page-title h1{
     font-weight: bold;
@@ -185,6 +207,7 @@
     font-size: 3.4vw;
     line-height: 10vw;
     margin: 0 2vw;
+    color: #333333;
 }
 .section-page-title .page-bottom-tabs .page-bottom-tabs-right{
     height: 10vw;
@@ -207,21 +230,21 @@
 /*    background-color: #fe7e00;*/
 /*}*/
 .section-page-item .section-page-top .el-carousel__container{
-    height: 35vw !important;
+    height: 32vw !important;
 }
 .section-page-item .section-page-top .section-page-banner{
     width: 100%;
     /* height: auto; */
     box-sizing: border-box;
-    padding: 0 3vw;
-    margin-bottom: 3vw;
+    padding: 0 2vw;
 }
 .section-page-item .section-page-banner .page-banner-item img,
 .section-page-item .section-page-banner .page-banner-item{
     width: 100%;
-    height: 35vw;
+    height: 32vw;
     display: block;
-    border-radius: 3vw;
+    overflow: hidden;
+    border-radius: 2vw;
     overflow: hidden;
 }
 .section-page-item .section-page-bottom {
@@ -232,6 +255,7 @@
     align-items: center;
     box-sizing: border-box;
     padding:0 2vw 0 2vw;
+    margin-top: 2vw;
 }
 .section-page-item .section-page-bottom .page-bottom-tabs{
     width: 100%;

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

@@ -17,7 +17,7 @@ li{list-style:none;}
     border-radius: 8px;
     margin-top: 20px;
     box-sizing: border-box;
-    padding: 14px;
+    padding: 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -144,8 +144,8 @@ li{list-style:none;}
     position: absolute;
     left: 182px;
     top: -34px;
-    min-width: 758px;
-    min-height: 512px;
+    min-width: 516px;
+    min-height: 520px;
     padding: 20px;
     border-radius: 8px;
     box-sizing: border-box;
@@ -184,7 +184,7 @@ li{list-style:none;}
 .right-panel .sub-item {
     font-size: 14px;
     color: #333333;
-    margin: 0 8px;
+    margin: 0 5px;
     display: flex;
     justify-content: flex-start;
     transition: all 0.2s;
@@ -193,7 +193,7 @@ li{list-style:none;}
     width: 24px;
     height: 24px;
     display: block;
-    margin-right: 10px;
+    margin-right: 5px;
 }
 .right-panel .sub-item span{
     line-height: 24px;
@@ -216,12 +216,12 @@ li{list-style:none;}
 }
 
 .section-content-mains{
-    width: 972px;
+    width: 982px;
     height: 100%;
 }
 .section-content-mains-top{
     width: 100%;
-    height: 34px;
+    height: 40px;
     margin-bottom: 10px;
     border-radius: 6px;
     background-color: #f7f8fc;
@@ -230,7 +230,7 @@ li{list-style:none;}
     display: block;
     padding: 0 28px;
     text-align: center;
-    line-height: 34px;
+    line-height: 40px;
     font-size: 17px;
     font-weight: bold;
     float: left;
@@ -243,22 +243,31 @@ li{list-style:none;}
     align-items: center;
 }
 .section-content-mains-bottom .section-content-advert{
-    width: 736px;
+    width: 472px;
     height: 469px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
-
-.section-content-mains-bottom .section-content-advert .section-content-banner{
+.section-content-mains-bottom .section-content-advert .section-content-advert-top{
     width: 100%;
     height: 343px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.section-content-mains-bottom .section-content-banner{
+    width: 500px;
+    height: 469px;
     border-radius: 8px;
     overflow: hidden;
 }
 /* 轮播 */
-#swiper-container{width:100%;height:343px;min-width:736px;overflow:hidden;position:relative;float: left;}
+#swiper-container{width:100%;height:469px;min-width:500px;overflow:hidden;position:relative;float: left;}
 #swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
 #swiper-container .tempWrap{margin:0 auto;}
 #swiper-container .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;background-color: #f7f8fc;}
-#swiper-container .swiper-wrapper img{width:auto;height:343px;max-width:none;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
+#swiper-container .swiper-wrapper img{width:auto;height:469px;max-width:none;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
 #swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{position:absolute;top:50%;margin-top:-34px;display:block;width:44px;height:68px;line-height:68px;background:rgba(255,230,220,.2);color:#FFF;font-size:40px;text-align:center;border-radius:2px}
 #swiper-container .swiper-button-prev{left:5px;right:auto}
 #swiper-container .swiper-button-next{left:auto;right:5px}
@@ -270,6 +279,57 @@ li{list-style:none;}
 #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;}
+
+.section-content-advert .section-content-oper{
+    width: 231px;
+    height: 343px;
+    box-sizing: border-box;
+    background-color: #f7f8fc;
+    padding: 10px;
+    border-radius: 8px;
+}
+.section-content-advert .section-content-oper .my-swipe .van-swipe-item {
+    height: auto;
+}
+.section-content-advert .section-content-oper .carousel-list {
+    padding:0;
+}
+.section-content-advert .section-content-oper .list {
+    width: 33.33%;
+    height: auto;
+    margin: 10px 0;
+    float: left;
+    cursor: pointer;
+}
+.section-content-advert .section-content-oper .list .list-content {
+    height: auto;
+}
+.section-content-advert .section-content-oper .list .list-content .list-icon {
+    width: 44px;
+    height: 44px;
+    margin: 0 auto;
+    border-radius: 50%;
+    overflow: hidden;
+}
+.section-content-advert .section-content-oper .list .list-content .list-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+}
+.section-content-advert .section-content-oper .list:hover .list-title{
+    color: #FF5B00;
+}
+.section-content-advert .section-content-oper .el-carousel__arrow--left{
+    left: -8px !important;
+    width: 24px !important;
+    height: 24px !important;
+}
+.section-content-advert .section-content-oper .el-carousel__arrow--right{
+    right: -8px !important;
+    width: 24px !important;
+    height: 24px !important;
+}
 /*广告*/
 .section-content-mains-bottom .section-content-advert .section-content-adv{
     width: 100%;
@@ -297,7 +357,7 @@ li{list-style:none;}
     margin-right: 0;
 }
 .section-content-mains-bottom .section-content-usermain{
-    width: 224px;
+    width: 231px;
     height: 100%;
     border-radius: 8px;
     display: flex;
@@ -310,7 +370,6 @@ li{list-style:none;}
     box-sizing: border-box;
     padding: 10px;
     background-color: #f7f8fc;
-    margin-bottom: 8px;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
@@ -380,14 +439,14 @@ li{list-style:none;}
     font-size: 14px;
     line-height: 26px;
     text-align: left;
-    color: #333333;
+    color: #666666;
     font-weight: normal;
 }
 .section-content-usertop .user-column-b p{
     font-size: 14px;
     line-height: 26px;
     text-align: left;
-    color: #666666;
+    color: #999999;
 }
 .section-content-usertop .user-column-b a{
     width: 100%;
@@ -555,83 +614,46 @@ li{list-style:none;}
 .section-content-userbottom .userbottom-column-b .column-item.coupon{
     background-color: #ff9c54;
 }
-.section-content-mains-bottom .section-content-usermain .section-content-oper{
-    width: 100%;
-    height: 117px;
-    box-sizing: border-box;
-    background-color: #f7f8fc;
-    padding: 10px;
-    border-radius: 8px;
-}
-.section-content-oper .my-swipe .van-swipe-item {
-    height: auto;
-}
-.section-content-oper .carousel-list {
-    padding:0;
-}
-.section-content-oper .list {
-    width: 25%;
-    height: auto;
-    margin-bottom: 10px;
-    float: left;
-    cursor: pointer;
-}
-.section-content-oper .list .list-content {
-    height: auto;
-}
-.section-content-oper .list .list-content .list-icon {
-    width: 24px;
-    height: 24px;
-    margin: 0 auto;
-    border-radius: 50%;
-    overflow: hidden;
-}
-.section-content-oper .list .list-content .list-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 10px;
-}
-.section-content-oper .el-carousel__arrow--left{
-    left: -8px !important;
-    width: 24px !important;
-    height: 24px !important;
-}
-.section-content-oper .el-carousel__arrow--right{
-    right: -8px !important;
-    width: 24px !important;
-    height: 24px !important;
-}
+
 /* 内容区 */
 .main-content {
-    margin-top: 15px;
+    margin-top: 10px;
 }
 .section_page.hot{
     width:100%;
-    height:442px;
+    height:396px;
     background: url("/img/hot/icon-hot-bg.png");
     background-size: cover;
-    border-radius: 8px;
+    border-radius:8px;
 }
 .section_page.hot .section_page_main.type_08{
-    height: 350px;
+    height: 315px;
     padding: 0 0 12px 0;
 }
 .section_page.hot #recommendBox{
-    height: 378px;
+    height: 320px;
+}
+.swiper-container-floor.hotList{
+    padding: 12px;
 }
 .section_page.hot #recommendBox .swiper-pagination{
     bottom: 1px;
 }
+#recommendBox .swiper-pagination.hot span:before{
+    background: #9fe4e0;
+}
+#recommendBox .swiper-pagination.hot span.swiper-pagination-bullet-active:before{
+    background: #ffffff;
+}
 .section_page.hot  .page_main_image{
-    width: 224px;
-    height: 224px;
+    width: 186px;
+    height: 186px;
 }
 .section_page.hot .section_page_title{
     width:100%;
-    height:64px;
+    height:54px;
     box-sizing:border-box;
-    padding:10px 16px;
+    padding:10px 16px 0 16px;
     position: relative;
     display: flex;
     justify-content: flex-start;
@@ -640,14 +662,14 @@ li{list-style:none;}
     font-size:24px;
     line-height:44px;
     text-align:left;
-    color:#FFFFFF;
+    color:#333333;
 }
 .section_page.hot .section_page_title span{
     font-size:14px;
     line-height:44px;
     text-align:left;
-    color:#FFFFFF;
-    margin-left:20px;
+    color:#666666;
+    margin-left:10px;
 }
 .section_page.hot .section_page_btn{
     display: block;
@@ -661,7 +683,7 @@ li{list-style:none;}
 }
 .section_page  .page_main_item.hot{
     width:164px;
-    height:340px;
+    height:300px;
     float:left;
     margin-right:10px;
     margin-bottom:16px;
@@ -681,11 +703,16 @@ li{list-style:none;}
 }
 .section-page-item{
     width: 592px;
-    height: 544px;
+    height: 484px;
     margin: 0 15px 15px 0;
     background-color: #FFFFFF;
     border-radius: 8px;
     overflow: hidden;
+    box-sizing: border-box;
+    border: 1px solid #FFFFFF;
+}
+.section-page-item:hover{
+    border-color: #FF5B00;
 }
 .section-page-item:nth-child(2n){
     margin-right: 0;
@@ -699,7 +726,7 @@ li{list-style:none;}
 }
 .section-page-item .section-page-top{
     width: 100%;
-    height: 240px;
+    height: 180px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -707,24 +734,24 @@ li{list-style:none;}
 .section-page-item .section-page-top .section-page-title{
     width: 64px;
     height: 100%;
-    padding: 37px 16px;
+    padding: 16px;
     font-weight: bold;
     font-size: 14px;
     color: #FFFFFF;
     box-sizing: border-box;
 }
-.section-page-item:nth-child(1) .section-page-title{
-    background-color: #1b64de;
-}
-.section-page-item:nth-child(2) .section-page-title{
-    background-color: #1bc0de;
-}
-.section-page-item:nth-child(3) .section-page-title{
-    background-color: #de1b64;
-}
-.section-page-item:nth-child(4) .section-page-title{
-    background-color: #fe7e00;
-}
+/*.section-page-item:nth-child(1) .section-page-title{*/
+/*    background-color: #1b64de;*/
+/*}*/
+/*.section-page-item:nth-child(2) .section-page-title{*/
+/*    background-color: #1bc0de;*/
+/*}*/
+/*.section-page-item:nth-child(3) .section-page-title{*/
+/*    background-color: #de1b64;*/
+/*}*/
+/*.section-page-item:nth-child(4) .section-page-title{*/
+/*    background-color: #fe7e00;*/
+/*}*/
 .section-page-item .section-page-top .section-page-banner{
     width: 528px;
     height: 100%;
@@ -732,16 +759,9 @@ li{list-style:none;}
 .section-page-item .section-page-banner .page-banner-item img,
 .section-page-item .section-page-banner .page-banner-item{
     width: 527px;
-    height: 240px;
+    height: 180px;
     display: block;
 }
-.section-page-item .el-carousel__item:nth-child(2n) {
-    background-color: #87b4ff;
-}
-
-.section-page-item .el-carousel__item:nth-child(2n+1) {
-    background-color: #f88ab4;
-}
 .section-page-item .section-page-bottom {
     width: 100%;
     height: 307px;
@@ -958,7 +978,7 @@ li{list-style:none;}
     line-height:56px;
     text-align:left;
     color:#999999;
-    margin-left:20px;
+    margin-left:10px;
     font-weight: normal;
 }
 .section-shop-content .section-shop-main{
@@ -983,7 +1003,12 @@ li{list-style:none;}
     margin: 0 15px 0 0;
     box-sizing: border-box;
     padding: 20px 0;
-    background-color: #F7F7F7;
+    background-color: #FFFFFF;
+    border:2px solid #e1e1e1;
+    transition: all 0.2s;
+}
+.section-shop-content .section-shop-main .supplier-list-item:hover{
+    border-color: #FF5B00;
 }
 .section-shop-content .section-shop-main .supplier-list-item:last-child{
     margin-right: 0;
@@ -1003,7 +1028,7 @@ li{list-style:none;}
     width: 146px;
     height: 64px;
     margin-right: 10px;
-    border-radius: 4px;
+    border-radius: 8px;
     overflow: hidden;
 }
 .section-shop-content .section-shop-main .supplier-top-logo img{
@@ -1032,13 +1057,18 @@ li{list-style:none;}
     width: 80px;
     height: 80px;
     background-color: #e1e1e1;
-    border-radius: 8px;
+    border-radius: 4px;
     margin-right: 5px;
+    box-sizing: border-box;
+    border: 1px solid #FFFFFF;
+}
+.section-shop-content .section-shop-main .list-mid-item:hover{
+    border-color: #e2e4e6;
 }
 .section-shop-content .section-shop-main .list-mid-item a,
 .section-shop-content .section-shop-main .list-mid-item img{
-    width: 80px;
-    height: 80px;
+    width: 78px;
+    height: 78px;
     border-radius: 8px;
     display: block;
 }
@@ -1054,20 +1084,30 @@ li{list-style:none;}
     margin-top: 10px;
 }
 .section-shop-content .section-shop-main .supplier-list-bot a{
-    width: 80px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     height: 32px;
-    border: 1px solid #FF5B00;
+    padding: 0 16px;
+    border: 1px solid #e2e4e6;
     text-align: center;
     line-height: 32px;
     box-sizing: border-box;
-    border-radius: 4px;
-    color: #FF5B00;
-    display: block;
+    border-radius: 6px;
+    color: #11192d;
     transition: all 0.2s;
 }
-.section-shop-content .section-shop-main .supplier-list-bot a:hover{
-    background-color: #FF5B00;
-    color: #FFFFFF;
+.section-shop-content .section-shop-main .supplier-list-bot a .icon.shop{
+    vertical-align: middle;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    line-height: 25px;
+}
+.section-shop-content .section-shop-main .supplier-list-bot a .icon.shop:before{
+    width: 20px;
+    height: 20px;
+    background-position: -182px -746px;
 }
 /*为你推荐*/
 .section-floor-content{
@@ -1097,30 +1137,32 @@ li{list-style:none;}
     line-height:56px;
     text-align:left;
     color:#999999;
-    margin-left:20px;
+    margin-left:10px;
     font-weight: normal;
 }
 .section-floor-content .section-floor-main{
     width:100%;
-    height:56px;
+    height:auto;
     box-sizing:border-box;
     padding: 20px 0;
+    display: flex;
+    flex-wrap: wrap;
 }
 .section-floor-content .floor-main-item{
     width: 182px;
     height: 300px;
-    float: left;
-    margin-right: 14px;
-    margin-bottom: 16px;
+    margin:7px;
     transition: all 0.4s;
     display: block;
     position: relative;
     overflow: hidden;
     border-radius: 8px;
-    border: 1px solid #F1F1F1;
+    border: 2px solid #F1F1F1;
+    box-sizing: border-box;
 }
 .section-floor-content .floor-main-item:hover{
     transform:translateY(-5px);
+    border-color: #FF5B00;
     box-shadow:0 8px 8px rgba(102,102,102,0.05),0 10px 10px rgba(102,102,102,0.05),0 12px 12px rgba(102,102,102,0.05);
 }
 .section-floor-content .floor-main-item:nth-child(6n){

src/main/resources/static/css/product/product-floor.css

@@ -29,7 +29,7 @@ li{list-style:none}
         text-decoration: underline;
     }
     .product-banner-bot{width: 100%;height: auto;}
-    #productHotBanner{width:100%;height:400px;background-color:#FFFFFF;position:relative;box-sizing: border-box;border-radius: 8px;overflow: hidden;}
+    #productHotBanner{width:100%;height:400px;margin-top: 15px; background-color:#FFFFFF;position:relative;box-sizing: border-box;border-radius: 8px;overflow: hidden;}
     .product-banner-bot .page-banner-item img,
     .product-banner-bot .page-banner-item{
         width: 100%;
@@ -43,6 +43,7 @@ li{list-style:none}
         text-align: left;
         margin: 10px 0;
         color: #666666;
+        display: none;
     }
 
     #productHotBanner .swiper-wrapper{position:relative;height:100%;z-index:0}

src/main/resources/static/css/product/product-hot.css

@@ -4,9 +4,9 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
-    .product-banner{width: 100%;height: 660px;position: relative;}
+    .product-banner{width: 100%;height: 620px;position: relative;}
     .product-banner .product-banner-top{width: 100%;height: 510px;background: url("/img/hot/icon-hottop-bg.png");background-size: cover;}
-    .product-banner .product-banner-top .title{width: 100%;height: 140px;line-height: 140px;font-size: 56px;font-weight: bold;text-align: center;color: #FFFFFF;}
+    .product-banner .product-banner-top .title{width: 100%;height: 140px;line-height: 140px;font-size: 56px;font-weight: bold;text-align: center;color: #333333;}
     .product-banner-bot{width: 100%;height: auto;position: absolute;top: 140px;left: 0;}
     .product-banner-bot .inner{width: 1184px;height: auto;margin: 0 auto;}
     #productHotBanner{width:100%;height:480px;background: url("/img/hot/icon-hotpor-bg.png");position:relative;box-sizing: border-box;padding: 16px;border-radius: 8px;}
@@ -115,9 +115,9 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
-    .product-banner{width: 100%;height: 72vw;position: relative;background: #FFFFFF;margin-top: 27.5vw;}
+    .product-banner{width: 100%;height: 58vw;position: relative;background: #FFFFFF;margin-top: 27.5vw;margin-bottom: 10vw;}
     .product-banner .product-banner-top{width: 100%;height: 57.3vw;background: url("/img/hot/icon-hottop-bg@h5.png");background-size: cover;}
-    .product-banner .product-banner-top .title{width: 100%;height: 17.7vw;line-height: 17.7vw;font-size:6.5vw;font-weight: bold;text-align: center;color: #FFFFFF;}
+    .product-banner .product-banner-top .title{width: 100%;height: 17.7vw;line-height: 17.7vw;font-size:6.5vw;font-weight: bold;text-align: center;color: #333333;}
     .product-banner-bot{width: 100%;height: auto;position: absolute;top: 17.7vw;left: 0;}
     .product-banner-bot .inner{width: 100%;height: auto;box-sizing: border-box;padding: 0 6.4vw;}
     #productHotBanner{width:100%;height:50vw;background: url("/img/hot/icon-hotpor-bg@h5.png");position:relative;box-sizing: border-box;padding: 2.4vw;border-radius: 2vw;}
@@ -201,6 +201,6 @@ li{list-style:none}
     .product-brand-scroll .brand-list.checked a:hover{color: #E15621;}
     .product-screen-btn{width: 100%;height: 10vw;float: left;margin-top: 4vw;}
     .product-screen-btn .sub-button{width: 50vw;height: 10vw;margin: 0 auto;line-height: 10vw;background-color: #E15621;text-align: center;font-size: 3.4vw;color: #FFFFFF;border-radius: 5vw;}
-
+    footer{ display: none; }
 
 }

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

@@ -120,7 +120,7 @@ var homeData = new Vue({
         footList(arr) {
             if (!Array.isArray(arr)) return []
             let newArr = [],a = []
-            let indexNum = isPC ? 8 : 10
+            let indexNum = isPC ? 12 : 10
             arr.map((item, index) => {
                 if (index !== 0 && index % indexNum === 0) {
                     newArr.push(a)
@@ -287,8 +287,6 @@ var homeData = new Vue({
                     _self.hotListPageFloor =  data.pageFloorList;
                     _self.recommendList = data.recommendProducts
                     _self.supplierList =  _self.checkedSupplierList(data.supplierImage);
-                    console.log('supplierList',_self.supplierList)
-                    console.log('recommendList',_self.recommendList)
                     setTimeout(function(){
                         // 图片懒加载
                         $("img[data-original]").lazyload();
@@ -330,7 +328,7 @@ var homeData = new Vue({
             $('.recommendBox-wrapper').each(function(index, el){
                 var cell = $(el).parents('.swiper-container-floor').find('.swiper-pagination')
                 // var cell = $(".swiper-pagination-floor");
-                var size = Math.ceil(cell.attr("data-id")/5);
+                var size = Math.ceil(cell.attr("data-id")/6);
                 var span = '';
                 for (var i = 0; i < size; i++) {
                     span += '<span></span>';
@@ -363,12 +361,12 @@ var homeData = new Vue({
                     // cell.html(span);
 
                     var swiper = new Swiper(".mySwiper", {
-                        slidesPerView: 5,
+                        slidesPerView: 6,
                         spaceBetween: 13,
                         slidesPerGroup: 5,
                         loop: false,
                         autoplay: {
-                            delay: 4000,
+                            delay: 8000,
                             stopOnLastSlide: false,
                             disableOnInteraction: true,
                         },

src/main/resources/static/js/mixins/cmsMixins.js

@@ -9,8 +9,8 @@ var cmsMixins = function () {
         },
         methods: {
             handleBannerStatistics:function($event){// 首页轮播
-                const $eventHref  = $event[0].attributes[2].value
-                const $eventId  = $event[0].attributes[3].value
+                const $eventHref  = $event[0].attributes[3].value
+                const $eventId  = $event[0].attributes[4].value
                 console.log(`<-------统计数据成功------>,${$eventId}`)
                 this.cmsSysStatistics(1,$eventId)
                 window.open($eventHref)

src/main/resources/static/js/product/product-floor.js

@@ -137,7 +137,7 @@ var productList = new Vue({
                     setTimeout(function () {
                         _self.listLoading = false;
                         _self.requestFlag = true;
-                        document.title = `采美365网-${zone.floorTitle}-${zone.floorDetail}-美业一站式正品采购平台`
+                        document.title = `采美365网-${_self.zone.floorTitle}-${_self.zone.floorDetail}-美业一站式正品采购平台`
                     },1000)
                 }else {
                     _self.listLoading = false;

src/main/resources/templates/index.html

@@ -104,183 +104,213 @@
                         </a>
                     </div>
                     <div class="section-content-mains-bottom">
-                        <div class="section-content-advert">
-                            <div class="section-content-banner">
-                                <div id="swiper-container" class="swiper-container">
-                                    <ul class="swiper-wrapper swiper-wrapper-banner">
-                                        <li class="swiper-slide mfc" th:each="img: ${bannerList}">
-                                            <a href="javascript:void(0)" target="_blank"
-                                               th:attr="data-href=${img.link},data-id=${img.id}"
-                                               onclick="handleBannerStatistics($(this))">
-                                                <img th:src="${img.image}" th:alt="${img.title}">
-                                            </a>
-                                        </li>
-                                    </ul>
-                                    <div class="swiper-pagination swiper-pagination-banner mfc">
-                                        <span v-if="isPC" th:each="img: ${bannerList}"></span>
-                                    </div>
-                                    <a class="swiper-button-prev" href="javascript:void(0)"></a>
-                                    <a class="swiper-button-next" href="javascript:void(0)"></a>
-                                </div>
-                            </div>
-                            <div class="section-content-adv">
-                                <div class="section-content-adv-item" th:each="adver,stat: ${advertisement}" th:if="${stat.index} < 4">
-                                    <a th:href="${adver.link}" target="_blank">
-                                        <img th:src="${adver.image}" alt="">
-                                    </a>
+                        <div class="section-content-banner">
+                            <div id="swiper-container" class="swiper-container">
+                                <ul class="swiper-wrapper swiper-wrapper-banner">
+                                    <li class="swiper-slide mfc" th:each="img: ${bannerList}">
+                                        <a href="javascript:void(0)" target="_blank"
+                                           th:attr="data-href=${img.link},data-id=${img.id}"
+                                           onclick="handleBannerStatistics($(this))">
+                                            <img th:src="${img.image}" th:alt="${img.title}">
+                                        </a>
+                                    </li>
+                                </ul>
+                                <div class="swiper-pagination swiper-pagination-banner mfc">
+                                    <span v-if="isPC" th:each="img: ${bannerList}"></span>
                                 </div>
+                                <a class="swiper-button-prev" href="javascript:void(0)"></a>
+                                <a class="swiper-button-next" href="javascript:void(0)"></a>
                             </div>
                         </div>
-                        <div class="section-content-usermain">
-                            <div class="section-content-userbox">
-                                <div class="section-content-usertop">
-                                    <template v-if="userId > 0">
-                                        <!-- 登录后 -->
-                                        <div class="user-column-a">
-                                            <div class="user-column-logo">
-                                                <img :src="userInfo.image ? userInfo.image : '/img/base/logo-index@2x.png'"
-                                                     alt="">
-                                            </div>
-                                            <div class="user-column-text">
-                                                <h1 v-text="userInfo.name"></h1>
+                        <div class="section-content-advert">
+                            <!-- 快捷运营 h5   -->
+                            <div class="quickOperation" v-if="quickoperaList.length > 0 && !isPC" v-cloak>
+                                <van-swipe class="my-swipe" :autoplay="false">
+                                    <van-swipe-item v-for="(item, index) in quickoperaList" :key="item">
+                                        <div class="carousel-list clear">
+                                            <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(i)">
+                                                <div class="list-content">
+                                                    <div class="list-icon">
+                                                        <van-image style="width: 100%; height: 100%;" :src="i.icon"/>
+                                                    </div>
+                                                    <div class="list-title">
+                                                        <template v-if="isPC">
+                                                            <div class="title-1">
+                                                                <div class="title-1-item"></div>
+                                                                <div class="title-2-item">GO></div>
+                                                            </div>
+                                                            <div class="title-2">{{i.remark || ''}}</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <p>{{i.name}}</p>
+                                                        </template>
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
-                                        <div class="user-column-c">
-                                            <div class="column-c-item">
-                                                <h1 v-text="paymentCount"></h1>
-                                                <p>待付款</p>
-                                            </div>
-                                            <div class="column-c-item">
-                                                <h1 v-text="waitShipmentsCount"></h1>
-                                                <p>待发货</p>
-                                            </div>
-                                            <div class="column-c-item">
-                                                <h1 v-text="shipmentsCount"></h1>
-                                                <p>已发货</p>
-                                            </div>
-                                            <div class="column-c-item">
-                                                <h1 v-text="salesReturnCount"></h1>
-                                                <p>退货/款</p>
+                                    </van-swipe-item>
+                                </van-swipe>
+                            </div>
+                            <!-- 快捷运营 PC   -->
+                            <div class="section-content-advert-top">
+                                <div class="section-content-oper" v-if="isPC">
+                                    <el-carousel :autoplay="false" height="323px" indicator-position="none">
+                                        <el-carousel-item v-for="(item, index) in quickoperaList" :key="item">
+                                            <div class="carousel-list">
+                                                <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(i)">
+                                                    <div class="list-content">
+                                                        <div class="list-icon">
+                                                            <el-image style="width: 100%; height: 100%;"
+                                                                      :src="i.icon"></el-image>
+                                                        </div>
+                                                        <div class="list-title"><p>{{i.name}}</p></div>
+                                                    </div>
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div class="user-column-d">
-                                            <template v-if="orders">
-                                                <a :href="`/user/order/detail.html?shopOrderId=${orders.shopOrderId}`"
-                                                   target="_blank">
-                                                    <div class="column-d-image">
-                                                        <img :src="orders.image" alt="">
+                                        </el-carousel-item>
+                                    </el-carousel>
+                                </div>
+                                <div class="section-content-usermain">
+                                    <div class="section-content-userbox">
+                                        <div class="section-content-usertop">
+                                            <template v-if="userId > 0">
+                                                <!-- 登录后 -->
+                                                <div class="user-column-a">
+                                                    <div class="user-column-logo">
+                                                        <img :src="userInfo.image ? userInfo.image : '/img/base/logo-index@2x.png'"
+                                                             alt="">
                                                     </div>
-                                                    <div class="column-d-text">
-                                                        <h1 v-text="orders.name"></h1>
+                                                    <div class="user-column-text">
+                                                        <h1 v-text="userInfo.name"></h1>
                                                     </div>
-                                                </a>
+                                                </div>
+                                                <div class="user-column-c">
+                                                    <div class="column-c-item">
+                                                        <h1 v-text="paymentCount"></h1>
+                                                        <p>待付款</p>
+                                                    </div>
+                                                    <div class="column-c-item">
+                                                        <h1 v-text="waitShipmentsCount"></h1>
+                                                        <p>待发货</p>
+                                                    </div>
+                                                    <div class="column-c-item">
+                                                        <h1 v-text="shipmentsCount"></h1>
+                                                        <p>已发货</p>
+                                                    </div>
+                                                    <div class="column-c-item">
+                                                        <h1 v-text="salesReturnCount"></h1>
+                                                        <p>退货/款</p>
+                                                    </div>
+                                                </div>
+                                                <div class="user-column-d">
+                                                    <template v-if="orders">
+                                                        <a :href="`/user/order/detail.html?shopOrderId=${orders.shopOrderId}`"
+                                                           target="_blank">
+                                                            <div class="column-d-image">
+                                                                <img :src="orders.image" alt="">
+                                                            </div>
+                                                            <div class="column-d-text">
+                                                                <h1 v-text="orders.name"></h1>
+                                                            </div>
+                                                        </a>
+                                                    </template>
+                                                    <template v-else>
+                                                        <a href="javascript:void(0);">
+                                                            <div class="column-d-image"></div>
+                                                            <div class="column-d-text">
+                                                                <p>暂无订单信息</p>
+                                                                <p>下单后查看更多订单信息</p>
+                                                            </div>
+                                                        </a>
+                                                    </template>
+                                                </div>
                                             </template>
                                             <template v-else>
-                                                <a href="javascript:void(0);">
-                                                    <div class="column-d-image"></div>
-                                                    <div class="column-d-text">
-                                                        <p>暂无订单信息</p>
-                                                        <p>下单后查看更多订单信息</p>
+                                                <!-- 登录前 -->
+                                                <div class="user-column-a">
+                                                    <div class="user-column-logo"><img src="/img/base/logo-index@2x.png" alt="">
+                                                    </div>
+                                                    <div class="user-column-text">
+                                                        <h1 v-text="greeting"></h1>
+                                                        <p><a href="/club/register.html" target="_blank">注册</a></p>
                                                     </div>
-                                                </a>
+                                                </div>
+                                                <div class="user-column-b">
+                                                    <h1>登录采美网后更多精彩</h1>
+                                                    <p>登录可享，专属优惠，贴心推荐</p>
+                                                    <a href="/login.html">立即登录</a>
+                                                </div>
                                             </template>
                                         </div>
-                                    </template>
-                                    <template v-else>
-                                        <!-- 登录前 -->
-                                        <div class="user-column-a">
-                                            <div class="user-column-logo"><img src="/img/base/logo-index@2x.png" alt="">
-                                            </div>
-                                            <div class="user-column-text">
-                                                <h1 v-text="greeting"></h1>
-                                                <p><a href="/club/register.html" target="_blank">注册</a></p>
-                                            </div>
-                                        </div>
-                                        <div class="user-column-b">
-                                            <h1>登录采美网后更多精彩</h1>
-                                            <p>登录可享，专属优惠，贴心推荐</p>
-                                            <a href="/login.html">立即登录</a>
-                                        </div>
-                                    </template>
-                                </div>
-                                <div class="section-content-userbottom">
-                                    <template v-if="userId > 0">
-                                        <!-- 登录后 -->
-                                        <div class="userbottom-column-a">
-                                            <a class="column-item" href="/shopping/cart.html" target="_blank">
-                                                <img src="/img/base/icon-column-1@2x.png" alt="">
-                                                <p>购物车</p>
-                                            </a>
-                                            <a class="column-item" href="/user/collection.html" target="_blank">
-                                                <img src="/img/base/icon-column-2@2x.png" alt="">
-                                                <p>收藏夹</p>
-                                            </a>
-                                            <a class="column-item" href="/user/message/list.html" target="_blank">
-                                                <img src="/img/base/icon-column-3@2x.png" alt="">
-                                                <p>我的消息</p>
-                                            </a>
-                                        </div>
-                                        <div class="userbottom-column-b">
-                                            <a class="column-item plus" href="/user/member.html" target="_blank">
-                                                <h1>PLUS会员</h1>
-                                                <p>权益升级</p>
-                                                <span>立即开通></span>
-                                            </a>
-                                            <a class="column-item coupon" href="/user/coupon.html" target="_blank">
-                                                <h1>优惠券</h1>
-                                                <p>会员专享</p>
-                                                <span>立即领取></span>
-                                            </a>
-                                        </div>
-                                    </template>
-                                    <template v-else>
-                                        <!-- 登录前 -->
-                                        <div class="userbottom-column-a">
-                                            <a class="column-item" href="/login.html">
-                                                <img src="/img/base/icon-column-1@2x.png" alt="">
-                                                <p>购物车</p>
-                                            </a>
-                                            <a class="column-item" href="/login.html">
-                                                <img src="/img/base/icon-column-2@2x.png" alt="">
-                                                <p>收藏夹</p>
-                                            </a>
-                                            <a class="column-item" href="/login.html">
-                                                <img src="/img/base/icon-column-3@2x.png" alt="">
-                                                <p>我的消息</p>
-                                            </a>
-                                        </div>
-                                        <div class="userbottom-column-b">
-                                            <a class="column-item plus" href="/login.html">
-                                                <h1>PLUS会员</h1>
-                                                <p>权益升级</p>
-                                                <span>立即开通></span>
-                                            </a>
-                                            <a class="column-item coupon" href="/login.html">
-                                                <h1>优惠券</h1>
-                                                <p>会员专享</p>
-                                                <span>立即领取></span>
-                                            </a>
+                                        <div class="section-content-userbottom">
+                                            <template v-if="userId > 0">
+                                                <!-- 登录后 -->
+                                                <div class="userbottom-column-a">
+                                                    <a class="column-item" href="/shopping/cart.html" target="_blank">
+                                                        <img src="/img/base/icon-column-1@2x.png" alt="">
+                                                        <p>购物车</p>
+                                                    </a>
+                                                    <a class="column-item" href="/user/collection.html" target="_blank">
+                                                        <img src="/img/base/icon-column-2@2x.png" alt="">
+                                                        <p>收藏夹</p>
+                                                    </a>
+                                                    <a class="column-item" href="/user/message/list.html" target="_blank">
+                                                        <img src="/img/base/icon-column-3@2x.png" alt="">
+                                                        <p>我的消息</p>
+                                                    </a>
+                                                </div>
+                                                <div class="userbottom-column-b">
+                                                    <a class="column-item plus" href="/user/member.html" target="_blank">
+                                                        <h1>PLUS会员</h1>
+                                                        <p>权益升级</p>
+                                                        <span>立即开通></span>
+                                                    </a>
+                                                    <a class="column-item coupon" href="/user/coupon.html" target="_blank">
+                                                        <h1>优惠券</h1>
+                                                        <p>会员专享</p>
+                                                        <span>立即领取></span>
+                                                    </a>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <!-- 登录前 -->
+                                                <div class="userbottom-column-a">
+                                                    <a class="column-item" href="/login.html">
+                                                        <img src="/img/base/icon-column-1@2x.png" alt="">
+                                                        <p>购物车</p>
+                                                    </a>
+                                                    <a class="column-item" href="/login.html">
+                                                        <img src="/img/base/icon-column-2@2x.png" alt="">
+                                                        <p>收藏夹</p>
+                                                    </a>
+                                                    <a class="column-item" href="/login.html">
+                                                        <img src="/img/base/icon-column-3@2x.png" alt="">
+                                                        <p>我的消息</p>
+                                                    </a>
+                                                </div>
+                                                <div class="userbottom-column-b">
+                                                    <a class="column-item plus" href="/login.html">
+                                                        <h1>PLUS会员</h1>
+                                                        <p>权益升级</p>
+                                                        <span>立即开通></span>
+                                                    </a>
+                                                    <a class="column-item coupon" href="/login.html">
+                                                        <h1>优惠券</h1>
+                                                        <p>会员专享</p>
+                                                        <span>立即领取></span>
+                                                    </a>
+                                                </div>
+                                            </template>
                                         </div>
-                                    </template>
+                                    </div>
                                 </div>
                             </div>
-                            <!-- 快捷运营 PC   -->
-                            <div class="section-content-oper">
-                                <el-carousel :autoplay="false" height="97px" indicator-position="none">
-                                    <el-carousel-item v-for="(item, index) in quickoperaList" :key="item">
-                                        <div class="carousel-list">
-                                            <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(i)">
-                                                <div class="list-content">
-                                                    <div class="list-icon">
-                                                        <el-image style="width: 100%; height: 100%;"
-                                                                  :src="i.icon"></el-image>
-                                                    </div>
-                                                    <div class="list-title"><p>{{i.name}}</p></div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </el-carousel-item>
-                                </el-carousel>
+                            <div class="section-content-adv">
+                                <div class="section-content-adv-item" th:each="adver,stat: ${advertisement}" th:if="${stat.index} < 2">
+                                    <a th:href="${adver.link}" target="_blank">
+                                        <img th:src="${adver.image}" alt="">
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -310,36 +340,8 @@
         </div>
         <div class="mNavBox-dropdown-more" v-if="dropScreenShow" @click="hideDropScreen"></div>
     </template>
-    <!-- 快捷运营 h5   -->
-    <div class="quickOperation" v-if="quickoperaList.length > 0 && !isPC" v-cloak>
-        <van-swipe class="my-swipe" :autoplay="false">
-            <van-swipe-item v-for="(item, index) in quickoperaList" :key="item">
-                <div class="carousel-list clear">
-                    <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(i)">
-                        <div class="list-content">
-                            <div class="list-icon">
-                                <van-image style="width: 100%; height: 100%;" :src="i.icon"/>
-                            </div>
-                            <div class="list-title">
-                                <template v-if="isPC">
-                                    <div class="title-1">
-                                        <div class="title-1-item"></div>
-                                        <div class="title-2-item">GO></div>
-                                    </div>
-                                    <div class="title-2">{{i.remark || ''}}</div>
-                                </template>
-                                <template v-else>
-                                    <p>{{i.name}}</p>
-                                </template>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </van-swipe-item>
-        </van-swipe>
-    </div>
     <!--首页新品橱窗楼层-->
-    <div class="section_container main-content clear">
+    <div class="section_container main-content hot clear">
         <div class="inner">
             <template v-if="userId > 0">
                 <!--固定楼层-->
@@ -540,7 +542,7 @@
                 <div class="section-page-content">
                     <div class="section-page-item" v-for="(floor,flIndex) in homePageFloor">
                         <div class="section-page-top">
-                            <div class="section-page-title">
+                            <div class="section-page-title" :style="{backgroundColor:floor.backColor}">
                                 <h1 v-text="floor.floorTitle"></h1>
                                 <div class="page-bottom-tabs" v-if="!isPC">
                                     <div class="page-bottom-tabs-left">
@@ -554,9 +556,9 @@
                                 </div>
                             </div>
                             <div class="section-page-banner">
-                                <el-carousel :interval="(flIndex+1)*3000" arrow="never" height="240px">
+                                <el-carousel :interval="(flIndex+1)*3000" arrow="never" height="180px180px">
                                     <el-carousel-item v-for="item in floor.imageList" :key="item">
-                                        <a class="page-banner-item" :href="item.link">
+                                        <a class="page-banner-item" :href="item.link" target="_blank">
                                             <img :src="item.image" alt="">
                                         </a>
                                     </el-carousel-item>
@@ -687,7 +689,7 @@
                 <div class="section-page-content">
                     <div class="section-page-item" th:each="floor,stat : ${floorJson.get('zones')}">
                             <div class="section-page-top">
-                                <div class="section-page-title">
+                                <div class="section-page-title" th:style="'background-color:'+ ${floor.get('backColor')}+';'">
                                     <h1 th:text="${floor.get('floorTitle')}" th:attr="data-id=${stat.index+1}"></h1>
                                     <div class="page-bottom-tabs" v-if="!isPC">
                                         <div class="page-bottom-tabs-left">
@@ -701,9 +703,9 @@
                                     </div>
                                 </div>
                                 <div class="section-page-banner">
-                                    <el-carousel trigger="click" :autoplay="false" arrow="never" height="240px">
+                                    <el-carousel trigger="click" :autoplay="false" arrow="never" height="180px">
                                         <el-carousel-item th:each="images : ${floor.get('imageList')}" th:object="${images}">
-                                            <a class="page-banner-item" th:href="*{link}" >
+                                            <a class="page-banner-item" th:href="*{link}" target="_blank">
                                                 <img class="page_main_image" th:src="*{image}"/>
                                             </a>
                                         </el-carousel-item>
@@ -711,7 +713,7 @@
                                 </div>
                             </div>
                             <div class="section-page-bottom">
-                                <div class="page-bottom-tabs">
+                                <div class="page-bottom-tabs" v-if="isPC">
                                     <div class="page-bottom-tabs-left">
                                         <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}+'&typeSort=1'" class="bot-tabs-item" target="_blank">产品</a>
                                         <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}+'&typeSort=2'" class="bot-tabs-item" target="_blank">仪器</a>
@@ -806,7 +808,10 @@
                                         </div>
                                     </div>
                                     <div class="supplier-list-bot">
-                                        <a :href="sup.link" target="_blank">进店 ></a>
+                                        <a :href="sup.link" target="_blank">
+                                            <i class="icon shop"></i>
+                                            <span>进入店铺</span>
+                                        </a>
                                     </div>
                                 </div>
                             </div>