diff --git a/src/assets/images/baoming1.png b/src/assets/images/baoming1.png
new file mode 100644
index 0000000..7cb26b5
Binary files /dev/null and b/src/assets/images/baoming1.png differ
diff --git a/src/assets/images/hdxx.png b/src/assets/images/hdxx.png
new file mode 100644
index 0000000..132f6ef
Binary files /dev/null and b/src/assets/images/hdxx.png differ
diff --git a/src/assets/images/rypp.png b/src/assets/images/rypp.png
new file mode 100644
index 0000000..7371511
Binary files /dev/null and b/src/assets/images/rypp.png differ
diff --git a/src/assets/styles/font.css b/src/assets/styles/font.css
index 5d24f1c..74baf27 100644
--- a/src/assets/styles/font.css
+++ b/src/assets/styles/font.css
@@ -5,4 +5,13 @@
 @font-face {
   font-family: "Alibaba-PuHuiTi-Regular";
   src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
+}
+/* 标题类 */
+@font-face {
+  font-family: "Alibaba-PuHuiTi-Medium.otf";
+  src: url("http://www.jichuanglanhai.com/demo/font-file/Alibaba-PuHuiTi-Medium.otf");
+}
+@font-face {
+  font-family: "youshebiaotihei";
+  src: url("./font/YouSheBiaoTiHei-2.ttf");
 }
\ No newline at end of file
diff --git a/src/assets/styles/font/YouSheBiaoTiHei-2.ttf b/src/assets/styles/font/YouSheBiaoTiHei-2.ttf
new file mode 100644
index 0000000..3729151
Binary files /dev/null and b/src/assets/styles/font/YouSheBiaoTiHei-2.ttf differ
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 56f5a6b..18896ba 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -23,7 +23,8 @@ export default {
   props: {
     total: {
       required: true,
-      type: Number
+      type: Number,
+      default:1
     },
     page: {
       type: Number,
@@ -106,7 +107,8 @@ export default {
 <style scoped>
 .pagination-container {
   background: #fff;
-  padding: 32px 16px;
+  padding: 0;
+  margin: 0;
 }
 .pagination-container.hidden {
   display: none;
diff --git a/src/views/volunteer/zyzsjgl/bqhgl/index.vue b/src/views/volunteer/zyzsjgl/bqhgl/index.vue
index c42ba92..5565146 100644
--- a/src/views/volunteer/zyzsjgl/bqhgl/index.vue
+++ b/src/views/volunteer/zyzsjgl/bqhgl/index.vue
@@ -1,9 +1,141 @@
 <template>
-  <div class="app-container">用户标签化管理</div>
+  <div class="app-container">
+    <div class="titleInput">
+      <el-input
+        placeholder="请输入关键字"
+        v-model="input3"
+        class="input-with-select"
+      >
+        <el-button slot="append" icon="el-icon-search"></el-button>
+      </el-input>
+    </div>
+    <div class="peopleContent">
+      <div class="subMan" v-for="item in 10" :key="item">
+        <div class="leftSub">
+          <div
+            class="leftAvatar"
+            :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
+          ></div>
+          <div class="leftName">
+            <div>周爱</div>
+            <div class="mainTag">
+              <div>10~20岁</div>
+              <div>男女不限</div>
+              <div>本科以上</div>
+            </div>
+          </div>
+        </div>
+        <div class="rightSub">
+          <div class="lookDetail">查看</div>
+        </div>
+      </div>
+    </div>
+    <myPagination></myPagination>
+  </div>
 </template>
 
 <script>
-export default {};
+import myPagination from "@/views/components/myPagination/index.vue";
+
+export default {
+  data() {
+    return {
+      input3: "",
+      total:0
+    };
+  },
+  components: {
+    myPagination,
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+::v-deep .titleInput .el-input__inner {
+  border-right: none;
+}
+::v-deep .titleInput .el-input-group__append {
+  background: #f8414d;
+  border: none;
+  color: #fff;
+}
+.titleInput {
+  width: 30%;
+  margin-bottom: 20px;
+}
+.mainTag {
+  display: flex;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  & > div {
+    margin-right: 5px;
+    background-color: rgba(248, 65, 77, 0.06);
+    padding: 3px 5px;
+    color: #e16a70;
+    border-radius: 4px;
+  }
+}
+.peopleContent {
+  height: 490px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  overflow-y: auto;
+
+  .subMan {
+    width: 49.2%;
+    height: 16.4%;
+    background: #fafafa;
+    border: 1px solid #f5edeb;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    margin-bottom: 17px;
+    padding: 15px;
+    .leftSub {
+      width: 80%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .leftAvatar {
+        height: 55px;
+        width: 55px;
+        background-size: 100% 100%;
+        border-radius: 10px;
+      }
+      .leftName {
+        margin-left: 15px;
+        & > div:nth-of-type(1) {
+          font-family: "Alibaba-PuHuiTi-Medium.otf";
+          color: #4c4949;
+          font-size: 18px;
+          margin-bottom: 12px;
+        }
+      }
+    }
+    .rightSub {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .lookDetail {
+        width: 50px;
+        height: 50px;
+        background: #ffffff;
+        box-shadow: 0px 0px 15px 0px rgba(77, 161, 254, 0.17);
+        border-radius: 50%;
+        font-family: "Alibaba-PuHuiTi-Medium.otf";
+        font-weight: 400;
+        color: #188ffe;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/volunteer/zyzsjgl/hdgl/index.vue b/src/views/volunteer/zyzsjgl/hdgl/index.vue
index e1ef63c..69ebcdb 100644
--- a/src/views/volunteer/zyzsjgl/hdgl/index.vue
+++ b/src/views/volunteer/zyzsjgl/hdgl/index.vue
@@ -1,9 +1,918 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-09-18 10:08:30
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-09-18 15:34:55
+-->
 <template>
-  <div class="app-container">活动管理</div>
+  <div class="plan-management">
+    <div class="titleInput">
+      <el-input
+        placeholder="请输入关键字"
+        v-model="input3"
+        class="input-with-select"
+      >
+        <el-button slot="append" icon="el-icon-search"></el-button>
+      </el-input>
+    </div>
+    <div>
+      <el-button type="primary" plain @click="addActivity">新增活动</el-button>
+    </div>
+    <div class="plan-bottomBox">
+      <div class="tables">
+        <el-table
+          :data="tableData"
+          :border="false"
+          :height="470"
+          v-loading="loading"
+          tooltip-effect="light"
+          :row-class-name="tableRowClassName"
+          :cell-style="cellStyle"
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            header-align="center"
+            width="70"
+          >
+          </el-table-column>
+          <el-table-column prop="content" label="活动名称" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.content.split(" ")[0] }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="person"
+            label="地点"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column prop="duration" label="活动状态" align="center">
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <div class="tabs-btns">
+                <div class="look" @click="look(scope.row)">
+                  <!-- <img src="@/assets/images/look.png" alt="" /> -->
+                  <span>查看</span>
+                </div>
+                <div class="look" @click="update(scope.row)">
+                  <!-- <img src="@/assets/images/look.png" alt="" /> -->
+                  <span>修改</span>
+                </div>
+                <div class="look" @click="deleteA(scope.row)">
+                  <!-- <img src="@/assets/images/look.png" alt="" /> -->
+                  <span>删除</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination">
+        <my-pagination
+          :total="total"
+          @pagesChange="pagesChange"
+        ></my-pagination>
+      </div>
+    </div>
+    <!-- 查看详情 -->
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="50%"
+      @close="closeDetail"
+    >
+      <div slot="title">
+        <div class="titleText">查看详情</div>
+      </div>
+      <div class="center-content">
+        <header>
+          <div class="icons"></div>
+          <span>活动信息</span>
+        </header>
+        <div class="mainsEvents">
+          <div class="itemE">
+            <div>活动名称:</div>
+            <div>交通指挥</div>
+          </div>
+          <div class="itemE">
+            <div>活动时间:</div>
+            <div>2023-08-08</div>
+          </div>
+        </div>
+        <div class="mainsEvents">
+          <div class="itemE">
+            <div>活动内容:</div>
+            <div>交通指挥</div>
+          </div>
+          <div class="itemE">
+            <div>活动地址:</div>
+            <div>交通局xxxxxxx路口</div>
+          </div>
+        </div>
+        <div class="mainsEvents">
+          <div class="itemE">
+            <div>活动举办方:</div>
+            <div>交通局</div>
+          </div>
+          <div class="itemE">
+            <div>活动标签:</div>
+            <div class="mainTag">
+              <div>10~20岁</div>
+              <div>男女不限</div>
+              <div>本科以上</div>
+            </div>
+          </div>
+        </div>
+        <!-- 人员匹配度 -->
+        <header>
+          <div class="icons icons1"></div>
+          <span>人员匹配度</span>
+        </header>
+        <div class="mainPeople">
+          <div class="subMan">
+            <div class="leftSub">
+              <div
+                class="leftAvatar"
+                :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
+              ></div>
+              <div class="leftName">
+                <div>周爱</div>
+                <div class="mainTag">
+                  <div>10~20岁</div>
+                  <div>男女不限</div>
+                  <div>本科以上</div>
+                </div>
+              </div>
+            </div>
+            <div class="rightSub">
+              <div class="numPercen">
+                <span>匹配度:</span>
+                <span>99%</span>
+              </div>
+              <div class="itemBtn">
+                <div class="look">查看</div>
+                <div class="looks">邀请</div>
+              </div>
+            </div>
+          </div>
+          <div class="subMan">
+            <div class="leftSub">
+              <div
+                class="leftAvatar"
+                :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
+              ></div>
+              <div class="leftName">
+                <div>周爱</div>
+                <div class="mainTag">
+                  <div>10~20岁</div>
+                  <div>男女不限</div>
+                  <div>本科以上</div>
+                </div>
+              </div>
+            </div>
+            <div class="rightSub">
+              <div class="numPercen">
+                <span>匹配度:</span>
+                <span>99%</span>
+              </div>
+              <div class="itemBtn">
+                <div class="look">查看</div>
+                <div class="looks">邀请</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 参与报名 -->
+        <header>
+          <div class="icons icons2"></div>
+          <span>参与报名</span>
+        </header>
+        <div class="mainPeople">
+          <div class="subMan">
+            <div class="leftSub">
+              <div
+                class="leftAvatar"
+                :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
+              ></div>
+              <div class="leftName">
+                <div>周爱</div>
+                <div class="mainTag">
+                  <div>10~20岁</div>
+                  <div>男女不限</div>
+                  <div>本科以上</div>
+                </div>
+              </div>
+            </div>
+            <div class="rightSub">
+              <div class="numPercen">
+                <span>匹配度:</span>
+                <span>99%</span>
+              </div>
+              <div class="itemBtn" style="justify-content: center">
+                <div class="look">查看</div>
+              </div>
+            </div>
+          </div>
+          <div class="subMan">
+            <div class="leftSub">
+              <div
+                class="leftAvatar"
+                :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
+              ></div>
+              <div class="leftName">
+                <div>周爱</div>
+                <div class="mainTag">
+                  <div>10~20岁</div>
+                  <div>男女不限</div>
+                  <div>本科以上</div>
+                </div>
+              </div>
+            </div>
+            <div class="rightSub">
+              <div class="numPercen">
+                <span>匹配度:</span>
+                <span>99%</span>
+              </div>
+              <div class="itemBtn" style="justify-content: center">
+                <div class="look">查看</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 新增修改 -->
+    <el-dialog
+      title="提示"
+      :visible.sync="addShow"
+      width="50%"
+      @close="closeAdd"
+    >
+      <div slot="title">
+        <div class="titleText">编辑详情</div>
+      </div>
+      <div class="center-content">
+        <!-- 活动信息 -->
+        <header>
+          <div class="icons"></div>
+          <span>活动信息</span>
+        </header>
+        <el-form
+          :model="ruleForm1"
+          :rules="rules1"
+          ref="ruleForm"
+          label-width="90px"
+          class="demo-ruleForm"
+        >
+          <div class="inputBox">
+            <el-form-item label="活动名称:" prop="name">
+              <el-input
+                v-model="ruleForm1.a1"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="活动时间:" prop="name">
+              <el-input
+                v-model="ruleForm1.a2"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+          </div>
+          <div class="inputBox">
+            <el-form-item label="活动内容:" prop="name">
+              <el-input
+                v-model="ruleForm1.a3"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="活动地址:" prop="name">
+              <el-input
+                v-model="ruleForm1.a4"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+          </div>
+          <el-form-item label="活动举办方:" prop="name">
+            <el-input v-model="ruleForm1.a5" placeholder="请输入内容"></el-input>
+          </el-form-item>
+        </el-form>
+        <!-- 人员要求信息 -->
+        <header>
+          <div class="icons icons1"></div>
+          <span>人员要求信息</span>
+        </header>
+        <el-form
+          :model="ruleForm2"
+          :rules="rules2"
+          ref="ruleForm"
+          label-width="85px"
+          class="demo-ruleForm"
+        >
+          <div class="inputBox">
+            <el-form-item label="小区选择:" prop="name">
+              <el-select v-model="ruleForm2.a1" placeholder="请选择小区">
+                <el-option
+                  v-for="item in options1"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="文化程度:" prop="name">
+              <el-select v-model="ruleForm2.a2" placeholder="请选择文化程度">
+                <el-option
+                  v-for="item in options2"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="inputBox">
+            <el-form-item label="兴趣爱好:" prop="name">
+              <el-select v-model="ruleForm2.a3" placeholder="请选择兴趣爱好">
+                <el-option
+                  v-for="item in options3"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="政治面貌:" prop="name">
+              <el-select v-model="ruleForm2.a4" placeholder="请选择政治面貌">
+                <el-option
+                  v-for="item in options4"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="inputBox">
+            <el-form-item label="性别:" prop="name">
+              <el-select v-model="ruleForm2.a5" placeholder="请选择性别">
+                <el-option
+                  v-for="item in options5"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="国籍:" prop="name">
+              <el-select v-model="ruleForm2.a6" placeholder="请选择国籍">
+                <el-option
+                  v-for="item in options6"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="inputBox">
+            <el-form-item label="院校:" prop="name">
+              <el-input
+                v-model="ruleForm2.a7"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+          </div>
+        </el-form>
+        <div class="footBtn">
+          <el-button>提交</el-button>
+          <el-button>取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
-
 <script>
-export default {};
+import myPagination from "@/views/components/myPagination/index.vue";
+export default {
+  components: { myPagination },
+  data() {
+    return {
+      input3: "",
+      tableData: [
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+      ],
+      input: "",
+      pages: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      total: 0,
+      loading: false,
+      //打开查看详情
+      dialogVisible: false,
+      //打开戏赠
+      addShow: false,
+      //======
+      options1: [
+        {
+          value: "选项1",
+          label: "明日之星",
+        },
+      ],
+      options2: [
+        {
+          value: "选项1",
+          label: "专科",
+        },
+      ],
+      options3: [
+        {
+          value: "选项1",
+          label: "东方明珠",
+        },
+      ],
+      options4: [
+        {
+          value: "选项1",
+          label: "群众",
+        },
+      ],
+      options5: [
+        {
+          value: "选项1",
+          label: "男",
+        },
+      ],
+      options5: [
+        {
+          value: "选项1",
+          label: "中国",
+        },
+      ],
+      ruleForm1: {
+        a1: "",
+        a2: "",
+        a3: "",
+        a4: "",
+        a5: "",
+      },
+      ruleForm2: {
+        a1: "",
+        a2: "",
+        a3: "",
+        a4: "",
+        a5: "",
+        a6: "",
+        a7: "",
+      },
+      rules1: {
+        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+      },
+      rules2: {
+        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+      },
+    };
+  },
+
+  methods: {
+    //打开新增
+    addActivity() {
+      this.addShow = true;
+    },
+    //关闭新增
+    closeAdd() {
+      this.addShow = false;
+    },
+    //查看详情
+    look() {
+      this.dialogVisible = true;
+    },
+    //关闭详情
+    closeDetail() {
+      this.dialogVisible = false
+    },
+    //修改
+    update() {
+      this.addShow = true;
+    },
+    //删除
+    deleteA() {},
+
+    // 页码，当前页切换事件
+    pagesChange(pages) {
+      // console.log(pages)
+      this.getList(pages);
+    },
+    // 输入框的值
+    changeInput(value) {
+      this.input = value;
+    },
+    // tabs不同行给不同class
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 !== 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    // 单元格的 style 的回调方法
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        return `text-align:center`;
+      } else {
+        return "";
+      }
+    },
+  },
+  async created() {},
+};
 </script>
+<style lang="scss" scoped>
+::v-deep .titleInput .el-input__inner {
+  border-right: none;
+}
+::v-deep .titleInput .el-input-group__append {
+  background: #f8414d;
+  border: none;
+  color: #fff;
+}
+.titleInput {
+  width: 30%;
+  margin-bottom: 10px;
+}
+.plan-management {
+  padding: 20px;
+  background-color: #fff;
+  height: 100%;
+  width: 100%;
+  border-radius: 10px 10px 0 0;
+  box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
+  .plan-topBox {
+    padding: 20px 0 0 0;
+  }
+  .plan-bottomBox {
+    margin-top: 10px;
+    .tables {
+      ::v-deep .el-table {
+        .success-row {
+          background-color: rgba(250, 247, 247, 0.5);
+        }
+        .activity {
+          div {
+            text-align: left;
+            &:nth-child(1) {
+              font-size: 14px;
+              font-family: "Alibaba-PuHuiTi-Regular";
+
+              font-weight: 400;
+              color: #4d4949;
+            }
+            &:nth-child(2) {
+              width: 180px;
+              font-size: 14px;
+              font-family: "Alibaba-PuHuiTi-Regular";
+
+              font-weight: 400;
+              color: #999191;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        td {
+          // height: 42px;
+          box-sizing: border-box;
+          // text-align: center;
+          font-size: 14px;
+          font-family: "Alibaba-PuHuiTi-Regular";
+          font-weight: 400;
+          color: #525966;
+          // padding: 2px 0;
+        }
+        th {
+          // height: 45px;
+          background-color: #f7f5f5;
+          font-size: 15px;
+          font-family: "Alibaba-PuHuiTi-Regular";
 
-<style></style>
+          font-weight: bold;
+          color: #4d4949;
+          .el-checkbox {
+            display: none;
+          }
+        }
+      }
+      ::v-deep .el-table::before {
+        height: 0;
+      }
+      .tabs-btns {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .look {
+          display: flex;
+          align-items: center;
+          padding: 0 10px;
+          // margin-right: 30px;
+          cursor: pointer;
+          // img {
+          //   width: 20px;
+          //   margin-right: 5px;
+          // }
+          span {
+            font-size: 15px;
+            font-family: "Alibaba-PuHuiTi-Regular";
+            font-weight: 400;
+            color: #045ffd;
+          }
+        }
+      }
+    }
+    .pagination {
+      margin-top: 10px;
+    }
+  }
+}
+.mainTag {
+  display: flex;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  & > div {
+    margin-right: 5px;
+    background-color: rgba(248, 65, 77, 0.06);
+    padding: 3px 5px;
+    color: #e16a70;
+    border-radius: 4px;
+  }
+}
+::v-deep .el-dialog {
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+::v-deep .el-dialog__header {
+  padding: 10px;
+  padding-left: 15px;
+  background: #f7f5f5;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+::v-deep .el-dialog__footer {
+  padding: 0;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 12px;
+}
+.titleText {
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: bold;
+  color: #4c4949;
+  padding-left: 15px;
+  font-size: 16px;
+  position: relative;
+  &::before {
+    position: absolute;
+    top: 3.8px;
+    left: 0;
+    content: "";
+    width: 5px;
+    height: 15px;
+    background: #f8414d;
+  }
+}
+.center-content {
+  padding: 20px 30px;
+  header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+    .icons {
+      height: 14px;
+      width: 14px;
+      background-image: url("../../../../assets/images/hdxx.png");
+      background-size: 100% 100%;
+    }
+    .icons1 {
+      background-image: url("../../../../assets/images/rypp.png");
+    }
+    .icons2 {
+      background-image: url("../../../../assets/images/baoming1.png");
+    }
+    span {
+      margin-left: 10px;
+      color: #4c4949;
+      font-weight: bold;
+      font-family: "Alibaba-PuHuiTi-Regular";
+    }
+  }
+  .mainsEvents {
+    // height: 35px;
+    display: flex;
+    align-items: center;
+    font-family: "Alibaba-PuHuiTi-Regular";
+    margin-bottom: 12px;
+    .itemE {
+      width: 50%;
+      display: flex;
+      & > div:nth-of-type(1) {
+        display: flex;
+        align-items: center;
+        color: #4c4949;
+        width: 24%;
+      }
+      & > div:nth-last-of-type(2) {
+        color: #807a7a;
+      }
+    }
+  }
+  .mainPeople {
+    overflow: auto;
+    height: 200px;
+    box-sizing: border-box;
+    margin-bottom: 12px;
+    .subMan {
+      width: 100%;
+      height: 95px;
+      background: #fafafa;
+      border: 1px solid #f5edeb;
+      border-radius: 10px;
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 15px;
+      margin-bottom: 10px;
+      .leftSub {
+        width: 84%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        .leftAvatar {
+          height: 65px;
+          width: 65px;
+          background-size: 100% 100%;
+          border-radius: 10px;
+        }
+        .leftName {
+          margin-left: 15px;
+          & > div:nth-of-type(1) {
+            font-family: "Alibaba-PuHuiTi-Medium.otf";
+            color: #4c4949;
+            font-size: 18px;
+            margin-bottom: 18px;
+          }
+        }
+      }
+      .rightSub {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .numPercen {
+          display: flex;
+          //   align-items: flex-end;
+          align-items: center;
+          & > span:nth-of-type(1) {
+            font-family: "Alibaba-PuHuiTi-Regular";
+            font-weight: 400;
+            color: #8a8585;
+            margin-right: 10px;
+          }
+          & > span:nth-of-type(2) {
+            font-family: "youshebiaotihei";
+            color: #49b28f;
+            font-size: 20px;
+          }
+        }
+        .itemBtn {
+          display: flex;
+          justify-content: space-between;
+          .look {
+            background: #fff;
+            border-radius: 4px;
+            color: #188ffe;
+            font-family: "Alibaba-PuHuiTi-Regular";
+            padding: 5px 10px;
+            cursor: pointer;
+            user-select: none;
+          }
+          .looks {
+            background: #fff;
+            border-radius: 4px;
+            color: #49b28f;
+            font-family: "Alibaba-PuHuiTi-Regular";
+            padding: 5px 10px;
+            cursor: pointer;
+            user-select: none;
+          }
+        }
+      }
+    }
+  }
+}
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-thumb {
+  background: #e5d3d4;
+}
+::-webkit-scrollbar-track {
+  background: #f4f1f1;
+}
+.inputBox {
+  display: flex;
+  justify-content: space-between;
+  & > div {
+    width: 47%;
+  }
+}
+::v-deep .el-select {
+  width: 100%;
+}
+::v-deep .el-form-item__label {
+  font-size: 14px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: 400;
+  color: #4c4949;
+  text-align: left;
+  padding-right: 0;
+}
+.footBtn {
+  display: flex;
+  flex-direction: row-reverse;
+}
+::v-deep .footBtn .el-button {
+  margin-left: 10px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+}
+</style>
diff --git a/src/views/volunteer/zyzsjgl/zdgl/index.vue b/src/views/volunteer/zyzsjgl/zdgl/index.vue
index 2518173..9de40aa 100644
--- a/src/views/volunteer/zyzsjgl/zdgl/index.vue
+++ b/src/views/volunteer/zyzsjgl/zdgl/index.vue
@@ -1,9 +1,409 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-09-18 10:08:30
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-09-18 15:34:55
+-->
 <template>
-  <div class="app-container">标签字典管理</div>
+  <div class="plan-management">
+    <div class="titleInput">
+      <el-input
+        placeholder="请输入关键字"
+        v-model="input3"
+        class="input-with-select"
+      >
+        <el-button slot="append" icon="el-icon-search"></el-button>
+      </el-input>
+    </div>
+    <div>
+      <el-button type="primary" plain @click="addDist">新增标签字典</el-button>
+    </div>
+    <div class="plan-bottomBox">
+      <div class="tables">
+        <el-table
+          :data="tableData"
+          :border="false"
+          :height="440"
+          v-loading="loading"
+          tooltip-effect="light"
+          :row-class-name="tableRowClassName"
+          :cell-style="cellStyle"
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            header-align="center"
+            width="70"
+          >
+          </el-table-column>
+          <el-table-column prop="content" label="字典名称" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.content.split(" ")[0] }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="duration" label="字典类型" align="center">
+          </el-table-column>
+          <el-table-column prop="duration" label="状态" align="center">
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <div class="tabs-btns">
+                <!-- <div class="look" @click="look(scope.row)">
+                  <img src="@/assets/images/look.png" alt="" />
+                  <span>查看</span>
+                </div> -->
+                <div class="look" @click="update(scope.row)">
+                  <!-- <img src="@/assets/images/look.png" alt="" /> -->
+                  <span>修改</span>
+                </div>
+                <div class="look" @click="deleteA(scope.row)">
+                  <!-- <img src="@/assets/images/look.png" alt="" /> -->
+                  <span>删除</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination">
+        <my-pagination
+          :total="total"
+          @pagesChange="pagesChange"
+        ></my-pagination>
+      </div>
+    </div>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="40%"
+      @close="closeD"
+    >
+      <div slot="title">
+        <div class="titleText">查看详情</div>
+      </div>
+      <div class="center-content">
+        <el-form
+          :model="ruleForm"
+          :rules="rules1"
+          ref="ruleForm"
+          label-width="90px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="字典名称:" prop="name">
+            <el-input v-model="ruleForm.a5" placeholder="请输入内容"></el-input>
+          </el-form-item>
+          <el-form-item label="字典类型:" prop="name">
+            <el-input v-model="ruleForm.a5" placeholder="请输入内容"></el-input>
+          </el-form-item>
+          <el-form-item label="状态:" prop="name">
+            <el-radio-group v-model="ruleForm.a1">
+              <el-radio label="正常"></el-radio>
+              <el-radio label="停用"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+        <div class="footBtn">
+          <el-button>提交</el-button>
+          <el-button>取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
-
 <script>
-export default {};
+import myPagination from "@/views/components/myPagination/index.vue";
+export default {
+  components: { myPagination, },
+  data() {
+    return {
+      input3: "",
+      tableData: [
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+      ],
+      ruleForm: {
+        a5: "",
+        a1: "",
+      },
+      input: "",
+      pages: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      total: 0,
+      loading: false,
+      rules1: {
+        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+      },
+      dialogVisible: false,
+    };
+  },
+
+  methods: {
+    closeD() {
+      this.dialogVisible = false;
+    },
+    addDist() {
+      this.dialogVisible = true;
+    },
+    //修改
+    update() {
+      this.upShow = true;
+    },
+    //删除
+    deleteA() {},
+    //查看
+    look() {
+      this.dialogVisible = true;
+    },
+    // 页码，当前页切换事件
+    pagesChange(pages) {
+      // console.log(pages)
+      this.getList(pages);
+    },
+    // 输入框的值
+    changeInput(value) {
+      this.input = value;
+    },
+    // tabs不同行给不同class
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 !== 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    // 单元格的 style 的回调方法
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        return `text-align:center`;
+      } else {
+        return "";
+      }
+    },
+  },
+  async created() {},
+};
 </script>
+<style lang="scss" scoped>
+::v-deep .titleInput .el-input__inner {
+  border-right: none;
+}
+::v-deep .titleInput .el-input-group__append {
+  background: #f8414d;
+  border: none;
+  color: #fff;
+}
+.titleInput {
+  width: 30%;
+  margin-bottom: 10px;
+}
+.plan-management {
+  padding: 20px;
+  background-color: #fff;
+  height: 100%;
+  width: 100%;
+  border-radius: 10px 10px 0 0;
+  box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
+  .plan-topBox {
+    padding: 20px 0 0 0;
+  }
+  .plan-bottomBox {
+    margin-top: 10px;
+    .tables {
+      ::v-deep .el-table {
+        .success-row {
+          background-color: rgba(250, 247, 247, 0.5);
+        }
+        .activity {
+          div {
+            text-align: left;
+            &:nth-child(1) {
+              font-size: 14px;
+              font-family: "Alibaba-PuHuiTi-Regular";
+
+              font-weight: 400;
+              color: #4d4949;
+            }
+            &:nth-child(2) {
+              width: 180px;
+              font-size: 14px;
+              font-family: "Alibaba-PuHuiTi-Regular";
+
+              font-weight: 400;
+              color: #999191;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        td {
+          // height: 42px;
+          box-sizing: border-box;
+          // text-align: center;
+          font-size: 14px;
+          font-family: "Alibaba-PuHuiTi-Regular";
+          font-weight: 400;
+          color: #525966;
+          // padding: 2px 0;
+        }
+        th {
+          // height: 45px;
+          background-color: #f7f5f5;
+          font-size: 15px;
+          font-family: "Alibaba-PuHuiTi-Regular";
 
-<style></style>
+          font-weight: bold;
+          color: #4d4949;
+          .el-checkbox {
+            display: none;
+          }
+        }
+      }
+      ::v-deep .el-table::before {
+        height: 0;
+      }
+      .tabs-btns {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .look {
+          display: flex;
+          align-items: center;
+          padding: 0 10px;
+          // margin-right: 30px;
+          cursor: pointer;
+          // img {
+          //   width: 20px;
+          //   margin-right: 5px;
+          // }
+          span {
+            font-size: 15px;
+            font-family: "Alibaba-PuHuiTi-Regular";
+            font-weight: 400;
+            color: #045ffd;
+          }
+        }
+      }
+    }
+    .pagination {
+      margin-top: 10px;
+    }
+  }
+}
+::v-deep .el-dialog {
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+::v-deep .el-dialog__header {
+  padding: 10px;
+  padding-left: 15px;
+  background: #f7f5f5;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+::v-deep .el-dialog__footer {
+  padding: 0;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 12px;
+}
+.titleText {
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: bold;
+  color: #4c4949;
+  padding-left: 15px;
+  font-size: 16px;
+  position: relative;
+  &::before {
+    position: absolute;
+    top: 3.8px;
+    left: 0;
+    content: "";
+    width: 5px;
+    height: 15px;
+    background: #f8414d;
+  }
+}
+.footBtn {
+  display: flex;
+  flex-direction: row-reverse;
+}
+::v-deep .footBtn .el-button {
+  margin-left: 10px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+}
+.center-content {
+  padding: 20px;
+}
+::v-deep .center-content .el-form-item__label {
+  font-size: 14px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: 400;
+  color: #4c4949;
+  text-align: right;
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index 82dedc7..26562b1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -58,9 +58,9 @@ module.exports = {
         sassOptions: { outputStyle: "expanded" },
       },
       // px to rem
-      postcss: {
-        plugins: [postcss],
-      },
+      // postcss: {
+      //   plugins: [postcss],
+      // },
     },
   },
   configureWebpack: {