证书界面

src/assets/styles/myTable.scss

@@ -0,0 +1,15 @@
+@import "./element-variables.scss";
+::v-deep .search-container {
+  .el-form-item__content {
+    width: 550px;
+  }
+  .el-input-group__append {
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+    background: $--color-primary !important;
+    border-color: $--color-primary !important;
+    .search-btn {
+      color: #fff !important;
+    }
+  }
+}

src/components/Pagination/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
+  <div :class="{ hidden: hidden }" class="pagination-container">
     <el-pagination
       :background="background"
       :current-page.sync="currentPage"
@@ -16,91 +16,90 @@
 </template>
 
 <script>
-import { scrollTo } from '@/utils/scroll-to'
+import { scrollTo } from "@/utils/scroll-to";
 
 export default {
-  name: 'Pagination',
+  name: "Pagination",
   props: {
     total: {
       required: true,
-      type: Number
+      type: Number,
     },
     page: {
       type: Number,
-      default: 1
+      default: 1,
     },
     limit: {
       type: Number,
-      default: 20
+      default: 20,
     },
     pageSizes: {
       type: Array,
       default() {
-        return [10, 20, 30, 50]
+        return [10, 20, 30, 50];
-      }
+      },
     },
     // 移动端页码按钮的数量端默认值5
     pagerCount: {
       type: Number,
-      default: document.body.clientWidth < 992 ? 5 : 7
+      default: document.body.clientWidth < 992 ? 5 : 7,
     },
     layout: {
       type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
+      default: "total, sizes, prev, pager, next, jumper",
     },
     background: {
       type: Boolean,
-      default: true
+      default: true,
     },
     autoScroll: {
       type: Boolean,
-      default: true
+      default: true,
     },
     hidden: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
   },
   data() {
-    return {
+    return {};
-    };
   },
   computed: {
     currentPage: {
       get() {
-        return this.page
+        return this.page;
       },
       set(val) {
-        this.$emit('update:page', val)
+        this.$emit("update:page", val);
-      }
+      },
     },
     pageSize: {
       get() {
-        return this.limit
+        return this.limit;
       },
       set(val) {
-        this.$emit('update:limit', val)
+        this.$emit("update:limit", val);
-      }
+      },
-    }
+    },
   },
   methods: {
     handleSizeChange(val) {
       if (this.currentPage * val > this.total) {
-        this.currentPage = 1
+        this.currentPage = 1;
       }
-      this.$emit('pagination', { page: this.currentPage, limit: val })
+      this.$emit("pagination", { page: this.currentPage, limit: val });
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        scrollTo(0, 800);
       }
     },
     handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
+      this.$emit("pagination", { page: val, limit: this.pageSize });
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        scrollTo(0, 800);
       }
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>

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

@@ -1,9 +1,144 @@
 <template>
-  <div class="app-container">个性化证书管理</div>
+  <div class="app-container" ref="main">
+    <div ref="search">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        class="search-container"
+      >
+        <el-form-item prop="name">
+          <el-input
+            v-model="queryParams.input"
+            placeholder="请输入关键字"
+            clearable
+          >
+            <div class="search-btn" slot="append">
+              <i class="el-icon-search"></i>
+            </div>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="book-main" :style="{ height: tableHeigth + 'px' }">
+      <div v-for="(item, index) in 10" :key="index">
+        <el-image
+          style="width: 100%; height: 87%"
+          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+          fit="cover"
+        ></el-image>
+        <div class="operate">
+          <div>高级</div>
+          <div class="right-operate">
+            <div class="operate-item">
+              <el-button type="text" size="mini" style="color: #909399"
+                >查看</el-button
+              >
+            </div>
+            <div class="operate-item">
+              <el-button
+                type="text"
+                size="mini"
+                style="color: #e6a23c; margin: 0 10px"
+                >修改</el-button
+              >
+            </div>
+            <div class="operate-item">
+              <el-button type="text" size="mini" style="color: #f56c6c"
+                >删除</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      tableHeigth: 0,
+      queryParams: {},
+      loading: false,
+      tableData: [],
+      total: 1,
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.tableHeigth =
+        this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 100;
+      console.log(this.$refs.search.offsetHeight, "高度");
+    });
+  },
+  methods: {
+    getList() {},
+  },
+};
 </script>
-
+<style lang="scss" scoped>
-<style></style>
+// @import "@/assets/styles/myTable.scss";
+// @import "@/assets/styles/element-variables.scss";
+::v-deep .search-container {
+  .el-form-item__content {
+    width: 550px;
+  }
+  .el-input-group__append {
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+    background: #f8414d !important;
+    border-color: #f8414d !important;
+    .search-btn {
+      color: #fff !important;
+    }
+  }
+}
+.book-main {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  & > div {
+    flex-basis: calc(20% - 20px);
+    margin: 10px; /* 设置元素之间的间距 */
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 3px 15px 0px rgba(184, 184, 184, 0.22);
+    border-radius: 10px;
+    overflow: hidden;
+    .operate {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
+      .right-operate {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .operate-item {
+        text-align: center;
+        font-size: 14px;
+        color: #8a8585;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,9 +1,125 @@
 <template>
-  <div class="app-container">一次性活动证书发放</div>
+  <div class="app-container" ref="main">
+    <div ref="search">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        class="search-container"
+      >
+        <el-form-item prop="name">
+          <el-input
+            v-model="queryParams.input"
+            placeholder="请输入关键字"
+            clearable
+          >
+            <div class="search-btn" slot="append">
+              <i class="el-icon-search"></i>
+            </div>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      :height="tableHeigth + 'px'"
+    >
+      <el-table-column label="序号" align="center" prop="id" width="55" />
+      <el-table-column label="参与活动" align="center" prop="name" />
+      <el-table-column label="参与人员" align="center" prop="type" />
+      <el-table-column label="服务活动时长" align="center" prop="cover" />
+      <el-table-column label="状态" align="center" prop="content" />
+      <el-table-column
+        label="发证时间"
+        align="center"
+        prop="datetime"
+        width="180"
+      >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.datetime, "{y}-{m}-{d}") }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:certificates:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:certificates:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      tableHeigth: 0,
+      queryParams: {},
+      loading: false,
+      tableData: [],
+      total: 1,
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.tableHeigth =
+        this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 100;
+      console.log(this.$refs.search.offsetHeight, "高度");
+    });
+  },
+  methods: {
+    getList() {},
+  },
+};
 </script>
-
+<style lang="scss" scoped>
-<style></style>
+// @import "@/assets/styles/myTable.scss";
+// @import "@/assets/styles/element-variables.scss";
+::v-deep .search-container {
+  .el-form-item__content {
+    width: 550px;
+  }
+  .el-input-group__append {
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+    background: #f8414d !important;
+    border-color: #f8414d !important;
+    .search-btn {
+      color: #fff !important;
+    }
+  }
+}
+</style>

vue.config.js

@@ -1,15 +1,15 @@
-'use strict'
+"use strict";
-const path = require('path')
+const path = require("path");
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+  return path.join(__dirname, dir);
 }
 
-const CompressionPlugin = require('compression-webpack-plugin')
+const CompressionPlugin = require("compression-webpack-plugin");
 
-const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || "若依管理系统"; // 网页标题
 
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
+const port = process.env.port || process.env.npm_config_port || 80; // 端口
 
 const px2rem = require("postcss-px2rem"); //将项目中的px转成rem,以达到屏幕适配
 // 配置基本大小
@@ -18,7 +18,6 @@ const postcss = px2rem({
   remUnit: 16,
 });
 
-
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 // 这里只列一部分，具体配置参考文档
@@ -58,9 +57,9 @@ module.exports = {
         sassOptions: { outputStyle: "expanded" },
       },
       // px to rem
-      postcss: {
+      // postcss: {
-        plugins: [postcss],
+      //   plugins: [postcss],
-      },
+      // },
     },
   },
   configureWebpack: {