修复宫格布局没页10条以上数据情况下问题

src/assets/styles/myTable.scss

@@ -71,7 +71,7 @@
   width: 100%;
   li {
     width: 19%;
-    height: 49%;
+    height: 48.5%;
     margin-right: calc(1% + (2% / 8));
     margin-bottom: 1%;
     list-style: none;
@@ -84,7 +84,7 @@
       position: absolute;
       top: 6%;
       right: 10%;
-      font-size: 20px;
+      font-size: 18px;
       font-weight: bold;
       color: #2aa984;
       z-index: 10;
@@ -122,9 +122,10 @@
   li:nth-of-type(5n) {
     margin-right: 0;
   }
-  li:nth-of-type(n + 2) {
-    margin-bottom: 0;
-  }
+
+  // li:nth-of-type(n + 2) {
+  //   margin-bottom: 0;
+  // }
 }
 ::v-deep .pagination-container {
   height: 0 !important;

src/views/volunteer/gxhzs/gxhzsgl/index.vue

@@ -11,9 +11,13 @@
       >
     </div>
 
-    <ul class="book-main" :style="{ height: tableHeigth + 'px' }">
-      <li v-for="item in certificatesList" :key="item.id">
-        <div class="integral-num">50</div>
+    <ul class="book-main" :style="listStyle">
+      <li
+        v-for="(item, index) in certificatesList"
+        :key="item.id"
+        :style="{ marginBottom: isLastRow(index) ? '0px' : '' }"
+      >
+        <div class="integral-num">积分：50</div>
         <el-image
           style="width: 100%; height: 87%"
           :src="baseUrl + item.cover"
@@ -54,7 +58,6 @@
       </li>
     </ul>
     <pagination
-      layout="total, prev, pager, next, jumper"
       v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
@@ -122,9 +125,12 @@ import {
 export default {
   data() {
     return {
+      listStyle: {
+        height: 0,
+        overflowY: "auto",
+      },
       baseUrl: process.env.VUE_APP_BASE_API,
       certificatesList: [],
-      tableHeigth: 0,
       loading: false,
       tableData: [],
       total: 0,
@@ -143,12 +149,21 @@ export default {
   created() {
     // //给表格一个固定值
     this.$nextTick(() => {
-      this.tableHeigth =
-        this.$refs.main.offsetHeight - 40 - this.$refs.search.offsetHeight - 42;
+      this.listStyle.height =
+        this.$refs.main.offsetHeight -
+        40 -
+        this.$refs.search.offsetHeight -
+        42 +
+        "px";
       this.getList();
     });
   },
   methods: {
+    isLastRow(index) {
+      const rowCount = Math.ceil(this.certificatesList.length / 5);
+      const row = Math.floor(index / 5);
+      return row === rowCount - 1;
+    },
     /**搜索 */
     handleSearch(keyWord) {
       this.queryParams = {

src/views/volunteer/integralConversion/index.vue

@@ -4,9 +4,13 @@
       <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
     </div>
 
-    <ul class="book-main" :style="{ height: tableHeigth + 'px' }">
-      <li v-for="item in certificatesList" :key="item.id">
-        <div class="integral-num">50</div>
+    <ul class="book-main" :style="listStyle">
+      <li
+        v-for="(item, index) in certificatesList"
+        :key="item.id"
+        :style="{ marginBottom: isLastRow(index) ? '0px' : '' }"
+      >
+        <div class="integral-num">积分：50</div>
         <el-image
           style="width: 100%; height: 87%"
           :src="baseUrl + item.cover"
@@ -25,7 +29,6 @@
       </li>
     </ul>
     <pagination
-      layout="total, prev, pager, next, jumper"
       v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
@@ -40,9 +43,12 @@ import { listCertificates } from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
 export default {
   data() {
     return {
+      listStyle: {
+        height: 0,
+        overflowY: "auto",
+      },
       baseUrl: process.env.VUE_APP_BASE_API,
       certificatesList: [],
-      tableHeigth: 0,
       loading: false,
       tableData: [],
       total: 0,
@@ -58,12 +64,21 @@ export default {
   created() {
     // //给表格一个固定值
     this.$nextTick(() => {
-      this.tableHeigth =
-        this.$refs.main.offsetHeight - 40 - this.$refs.search.offsetHeight - 42;
+      this.listStyle.height =
+        this.$refs.main.offsetHeight -
+        40 -
+        this.$refs.search.offsetHeight -
+        42 +
+        "px";
       this.getList();
     });
   },
   methods: {
+    isLastRow(index) {
+      const rowCount = Math.ceil(this.certificatesList.length / 5);
+      const row = Math.floor(index / 5);
+      return row === rowCount - 1;
+    },
     /**兑换 */
     conversion(item) {
       console.log(item);

vue.config.js

@@ -57,9 +57,9 @@ module.exports = {
         sassOptions: { outputStyle: "expanded" },
       },
       // px to rem
-      // postcss: {
-      //   plugins: [postcss],
-      // },
+      postcss: {
+        plugins: [postcss],
+      },
     },
   },
   configureWebpack: {