修改 css 样式以及资源码

@@ -29,7 +29,7 @@
                             <div class="swiper-slide" data-product-skn="{{productSkn}}"
                             data-activity-id="{{activityId}}">
                                 <div class="product-image-bg">
-                                    <img src="{{image2 defaultImages w=188 h=250 q=60 mode=3}}"></img>
+                                    <img src="{{image2 defaultImages w=210 h=280 q=60 mode=3}}"></img>
                                 </div>
                                 <div class="product-name">{{productName}}</div>
                                 {{#if formatCollagePrice}}

@@ -2,10 +2,17 @@
     <div class="wapper">
         <div class="guess-scroll">
             {{#each data}}
-                <div class="guess-tab" data-query="{{queryString}}">
-                    <img class="guess-img" src="{{image2 src w=160 h=80 q=60 mode=3}}" />
-                    <div></div>
-                </div>
+                {{#ifcond @index '==' 0}}
+                    <div class="guess-tab first" data-query="{{queryString}}">
+                        <img class="guess-img" src="{{image2 src w=200 h=160 q=60 mode=3}}" />
+                        <div class=""></div>
+                    </div>
+                {{^}}
+                    <div class="guess-tab" data-query="{{queryString}}">
+                        <img class="guess-img" src="{{image2 src w=200 h=160 q=60 mode=3}}" />
+                        <div></div>
+                    </div>
+                {{/ifcond}}
             {{/each}}
         </div>
     </div>

@@ -53,6 +53,20 @@ class Group extends Page {
                 end: false
             }
         };
+        this.newNavInfo = {
+            first: {
+                page: 1,
+                end: false,
+                reload: false,
+                isScrollLoad: false,
+            },
+            other: {
+                reload: true,
+                page: 1,
+                end: false,
+                isScrollLoad: false,
+            },
+        };
         this.beforeScroll = document.body.scrollTop; // 滚动前位置记录
         this.selectedChannel = ($('#fixedTab').data('group') || '1') === '1' ? 'newGroup' : 'normalGroup';
 
@@ -70,6 +84,9 @@ class Group extends Page {
             }
         };
 
+        // guess-tab-active
+        this.newFilterTab = this.selector.guessLike.find('.guess-tab-active');
+
         // 筛选页条件存储
         this.filterPage = {
             newGroup: {},
@@ -136,13 +153,25 @@ class Group extends Page {
         let floorsContentHeight = this.selector.floorsContentHeight + 5;
         let goodsContainerHeight = this.selector.groupListContent.height();
         let navType = this.judgeType(this.filterTab[this.selectedChannel].$pre);
+        let newNavType = this.judgeNavType(this.newFilterTab);
         let nav = this.navInfo[navType];
+        let newNav = this.newNavInfo[newNavType];
 
         if (($(window).scrollTop() - floorsContentHeight) > goodsContainerHeight * 0.6) {
-            nav.reload = false;
-            nav.isScrollLoad = true;
-            if (!nav.end) {
-                this.search();
+            if (nav) {
+                nav.reload = false;
+                nav.isScrollLoad = true;
+                if (!nav.end) {
+                    this.search();
+                }
+            }
+
+            if (newNav) {
+                newNav.reload = false;
+                newNav.isScrollLoad = true;
+                if (!newNav.end) {
+                    this.loadMoreData();
+                }
             }
         }
     }
@@ -197,10 +226,14 @@ class Group extends Page {
         let $this = $(e.currentTarget);
         let query = $this.data('query');
         let queryObject = {};
+        let newNavType = this.judgeNavType(this.newFilterTab);
+        let newNav = this.newNavInfo[newNavType];
 
         query.forEach(item => {
             queryObject = Object.assign(queryObject, item);
         });
+
+        newNav.query = queryObject;
         $.ajax({
             type: 'GET',
             url: '/activity/group/goods-tab',
@@ -216,6 +249,38 @@ class Group extends Page {
         });
     }
 
+    loadMoreData() {
+        let newNavType = this.judgeNavType(this.newFilterTab);
+        let newNav = this.newNavInfo[newNavType];
+
+        console.log(newNav);
+        newNav.page++;
+
+        let newQueryObject = {
+            ...newNav.query,
+            page: newNav.page
+        };
+
+        console.log(newNav.page);
+
+        newNav.end = true;
+
+        $.ajax({
+            type: 'GET',
+            url: '/activity/group/goods-tab',
+            data: newQueryObject,
+            success: (data) => {
+                // $('.filter-mask').remove();
+                // $('.group').append(data);
+                // $('.guess-scroll').find('')
+                // $('.guess-tab').children('div').removeClass('guess-tab-active');
+                // $this.children('div').addClass('guess-tab-active');
+                this.renderMoreData(data.filterList || [], true);
+                newNav.end = false;
+            }
+        });
+    }
+
     // 筛选tab切换
     filterTabChange(e) {
         let $this = $(e.currentTarget);
@@ -336,7 +401,7 @@ class Group extends Page {
         if (list.data('prd-list-length') > 0) {
             new Swiper('.swiper-container', {
                 slidesPerView: 3,
-                spaceBetween: 20,
+                spaceBetween: 10,
                 slidesPerGroup: 3,
                 autoplay: speed,
                 autoplayDisableOnInteraction: false,
@@ -362,6 +427,18 @@ class Group extends Page {
         }
     }
 
+    judgeNavType(dom) {
+        let navType;
+
+        if (dom.hasClass('first')) {
+            navType = 'first';
+        } else {
+            navType = 'other';
+        }
+
+        return navType;
+    }
+
     // 判断导航类型
     judgeType(dom) {
         let navType;
@@ -494,13 +571,17 @@ class Group extends Page {
         }
     }
 
-    renderMoreData(list) {
+    renderMoreData(list, isLoad) {
         let appendHtml = '';
 
         list.forEach(item => {
             appendHtml += groupListItem(item);
         });
-        $('.new-goods-list').html(appendHtml);
+        if (isLoad) {
+            $('.new-goods-list').append(appendHtml);
+        } else {
+            $('.new-goods-list').html(appendHtml);
+        }
     }
 
     // 筛选初始化

@@ -11,13 +11,13 @@
         font-size: 32px;
         color: #444;
         padding-top: 20px;
-        padding-left: 40px;
+        padding-left: 20px;
         padding-bottom: 20px;
     }
 
     .swiper-container {
-        margin-left: 40px;
-        margin-right: 40px;
+        margin-left: 20px;
+        margin-right: 20px;
         padding-bottom: 60px;
     }
 
@@ -30,21 +30,19 @@
         font-size: 18px;
 
         .product-image-bg {
-            height: 250px;
+            height: 280px;
             overflow: hidden;
         }
 
         .product-name {
-            margin-bottom: 20px;
             font-family: PingFang-SC-Regular, sans-serif;
             color: #222;
             text-align: left;
-            font-size: 22px;
-            padding-bottom: 20px;
+            font-size: 26px;
             padding-top: 20px;
             overflow: hidden;
             text-overflow: ellipsis;
-            height: 80px;
+            height: 88px;
         }
 
         .product-price-wrap {

 .guess-like {
     overflow: hidden;
     height: 80px;
+    box-sizing: initial;
 
     .wapper {
         overflow-x: scroll;
@@ -15,8 +16,7 @@
             min-width: 100%;
 
             .guess-tab {
-                min-width: 140px;
-                height: 78px;
+                min-width: 160px;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
@@ -24,15 +24,16 @@
         }
     }
 
+    .guess-img {
+        height: 78px;
+    }
+
     .guess-tab-inactive {
-        height: 2px;
-        width: 80%;
-        background-color: #222;
         display: none;
     }
 
     .guess-tab-active {
-        height: 2px;
+        height: 4px;
         width: 70%;
         background-color: #222;
     }

@@ -19,10 +19,14 @@
     margin-bottom: 10px;
     margin-top: 10px;
 
+    .group-product-header {
+        flex-shrink: 0;
+    }
+
     .new-group-product-image {
         margin: 20px;
         width: 162px;
-        height: 200px;
+        height: 220px;
     }
 
     .new-group-product-info-bg {
@@ -36,12 +40,12 @@
     .new-group-product-name {
         margin-top: 20px;
         margin-right: 20px;
+        margin-bottom: 20px;
         font-family: PingFang-SC-Regular, sans-serif;
         color: #222;
         letter-spacing: 0;
-        line-height: 36px;
-        height: 56px;
-        font-size: 24px;
+        line-height: 30px;
+        font-size: 26px;
         display: -webkit-box;
         overflow: hidden;
         text-overflow: ellipsis;