From 184ca04b364ab41612e774b54d31ba46b1e9e350 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Tue, 26 Sep 2023 14:00:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=AB=E6=A0=BC=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E6=B2=A1=E9=A1=B510=E6=9D=A1=E4=BB=A5=E4=B8=8A?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=83=85=E5=86=B5=E4=B8=8B=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/myTable.scss                | 11 +++----
 src/views/volunteer/gxhzs/gxhzsgl/index.vue   | 29 ++++++++++++++-----
 .../volunteer/integralConversion/index.vue    | 29 ++++++++++++++-----
 vue.config.js                                 |  6 ++--
 4 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/assets/styles/myTable.scss b/src/assets/styles/myTable.scss
index 37fdfe2..0115dc5 100644
--- a/src/assets/styles/myTable.scss
+++ b/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;
diff --git a/src/views/volunteer/gxhzs/gxhzsgl/index.vue b/src/views/volunteer/gxhzs/gxhzsgl/index.vue
index d3e4c51..3b03520 100644
--- a/src/views/volunteer/gxhzs/gxhzsgl/index.vue
+++ b/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 = {
diff --git a/src/views/volunteer/integralConversion/index.vue b/src/views/volunteer/integralConversion/index.vue
index a072aca..5e0930e 100644
--- a/src/views/volunteer/integralConversion/index.vue
+++ b/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);
diff --git a/vue.config.js b/vue.config.js
index 7db7928..b369899 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -57,9 +57,9 @@ module.exports = {
         sassOptions: { outputStyle: "expanded" },
       },
       // px to rem
-      // postcss: {
-      //   plugins: [postcss],
-      // },
+      postcss: {
+        plugins: [postcss],
+      },
     },
   },
   configureWebpack: {