fix: list

src/assets/css/app.less

@@ -31,7 +31,3 @@ body {
         .ml(@openedWidth);
     }
 }
-
-.m-archive-more {
-    .mb(10px) !important;
-}

src/assets/css/body/list.less

@@ -1,12 +1,23 @@
 .m-body-list {
     .m-list {
+        .flex;
+        flex-direction: column;
+        gap: 20px;
         .u-title {
             .fz(28px,1.5);
             .bold;
-            margin: 20px 0;
+            .mt(20px);
         }
     }
-    .m-archive-null{
-        .mt(20px); 
+    .m-all {
+        .flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        .m-body-item {
+            .mr(0);
+        }
+    }
+    .m-archive-null {
+        .mt(20px);
     }
 }

src/assets/css/face/list.less

@@ -122,7 +122,7 @@
     .mt(20px);
 }
 .m-archive-more {
-    .mb(10px);
+    .mb(20px);
     .w(100%);
     background-color: #6b52ff;
     &:hover {

src/views/body/List.vue

@@ -11,11 +11,41 @@
             <template v-if="list.length">
                 <div class="m-list" v-for="(_list, key) in groupList" :key="key">
                     <h2 class="u-title">{{ nameMap[key] }}</h2>
-                    <list-cross v-if="_list.length" :list="_list" :gap="10" :radius="0">
+                    <!-- 显示一行 -->
+                    <list-cross v-if="!tabsData.body_type" :list="_list" :gap="0" :radius="0">
                         <template v-slot="data">
                             <bodyItem class="m-pvx-item" :item="data.item"></bodyItem>
                         </template>
                     </list-cross>
+                    <!-- 显示多行 -->
+                    <template v-else>
+                        <div class="m-all">
+                            <bodyItem
+                                v-for="item in _list"
+                                :key="item.id"
+                                :item="item"
+                                :reporter="{ aggregate: listId(list) }"
+                            />
+                        </div>
+                        <el-button
+                            class="m-archive-more"
+                            v-show="hasNextPage"
+                            type="primary"
+                            @click="appendPage"
+                            :loading="loading"
+                            icon="el-icon-arrow-down"
+                            >加载更多</el-button
+                        >
+                        <el-pagination
+                            class="m-archive-pages"
+                            background
+                            layout="total, prev, pager, next, jumper"
+                            :hide-on-single-page="true"
+                            :page-size="pageSize"
+                            :total="total"
+                            :current-page.sync="page"
+                        ></el-pagination>
+                    </template>
                 </div>
             </template>
             <el-alert v-else class="m-archive-null" title="没有找到相关的体型" type="info" show-icon center></el-alert>
@@ -44,10 +74,11 @@ export default {
             loading: false,
             list: [],
             page: 1,
-            pageSize: 10,
+            pageSize: 14,
             pageTotal: 1,
             total: 0,
             showAllList: false,
+            appendMode: false,
 
             nameMap: {
                 1: "成男体型",
@@ -77,6 +108,9 @@ export default {
                 return acc;
             }, {});
         },
+        hasNextPage() {
+            return this.page < this.pageTotal;
+        },
     },
     watch: {
         params: {
@@ -87,21 +121,35 @@ export default {
         },
     },
     methods: {
-        handleTabChange(data) {
-            this.page = 1;
-            this.tabsData = data;
+        getData() {
+            this.loading = true;
+            const params = clone(this.params);
+            getBodyList(params)
+                .then((res) => {
+                    const list = res.data.data.list || [];
+                    this.total = res.data.data.page.total;
+                    this.list = this.appendMode ? this.list.concat(list) : list;
+                    if (this.params.body_type) this.pageTotal = res.data.data.page.pageTotal;
+                })
+                .finally(() => {
+                    this.loading = false;
+                    this.appendMode = false;
+                });
         },
         setActive(val) {
             this.active = val;
             document.documentElement.scrollTop = 0;
         },
-        getData() {
-            this.loading = true;
-            const params = clone(this.params);
-            getBodyList(params).then((res) => {
-                this.list = res.data.data.list || [];
-                this.total = res.data.data.page.total;
-            });
+        handleTabChange(data) {
+            this.page = 1;
+            this.tabsData = data;
+        },
+        appendPage() {
+            this.appendMode = true;
+            this.page = this.page + 1;
+        },
+        listId(list) {
+            return list.map((e) => e.id);
         },
     },
 };