diff --git a/src/assets/images/home1.jpg b/src/assets/images/home1.jpg
new file mode 100644
index 0000000..82e5762
Binary files /dev/null and b/src/assets/images/home1.jpg differ
diff --git a/src/assets/images/home2.jpg b/src/assets/images/home2.jpg
new file mode 100644
index 0000000..d0d3f55
Binary files /dev/null and b/src/assets/images/home2.jpg differ
diff --git a/src/views/home-chu.vue b/src/views/home-chu.vue
new file mode 100644
index 0000000..754df5f
--- /dev/null
+++ b/src/views/home-chu.vue
@@ -0,0 +1,479 @@
+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-editor-container">
+      <panel-group :top-object-num="topObjectNum" />
+      <el-row :gutter="20" style="margin-bottom:20px;height: calc(50vh - 174px);">
+        <el-col :xs="24" :sm="24" :lg="12">
+          <div class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="home-item-title">
+              盘点日志
+              <router-link :to="{ path: '/check/check/checkLog'}">
+                <div style="position: absolute; right: 20px; top: 20px; color: #999;" class="el-icon-more" />
+              </router-link>
+            </h3>
+            <div class="home-flowable" style="height: calc(100% - 54px); overflow-x: hidden;">
+              <div class="home-tab">
+                <span :class="{'home-tab-active': flowableTabIndex == 0}">未完成({{ stockLogIncompleteData.length !==0? stockLogIncompleteData.length: 0 }})</span>
+                <span :class="{'home-tab-active': flowableTabIndex == 1}">已结束({{ stockLogCompletedData.length !==0? stockLogCompletedData.length: 0 }})</span>
+                <!-- <span :class="{'home-tab-active': flowableTabIndex == 2}">已完成({{ flowableData.length !==0? flowableData.length: 0 }})</span>
+                <span :class="{'home-tab-active': flowableTabIndex == 3}" @click="toMoreProcess">更多任务</span> -->
+              </div>
+              <div class="home-flowable-list" style="height: calc(100% - 45px); overflow-y: auto; overflow-x: hidden;">
+                <el-table v-if="stockLogIncompleteData.length !== 0" height="calc(100%)" :data="stockLogIncompleteData" class="archives-table" stripe style="width: 100%">
+                  <el-table-column prop="stockBill" label="盘点单号" />
+                  <el-table-column prop="stockRegion" label="目标位置" min-width="180" />
+                  <el-table-column prop="stockGridNum" label="目标数量" align="right">
+                    <template slot-scope="scope">
+                      <div>{{ scope.row.stockGridNum + ' / '+ (scope.row.totalGridNum?scope.row.totalGridNum:'0') +' 层位' }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="state" label="盘点状态" align="center">
+                    <template slot-scope="scope">
+                      <span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span>
+                      <span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span>
+                      <span v-if="scope.row.state === 2" class="row-state row-binding state-active">盘点中</span>
+                      <span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span>
+                    </template>
+                  </el-table-column>
+                  <!-- <el-table-column prop="createTime" label="申请时间" width="180"> -->
+                  <!-- <template slot-scope="scope"> -->
+                  <!-- <div>{{ scope.row.createTime | parseTime }}</div> -->
+                  <!-- </template> -->
+                  <!-- </el-table-column> -->
+                </el-table>
+                <div v-else class="empty-main" style="height: 100%;">
+                  <svg-icon icon-class="empty" class-name="empty-img" />
+                  <p>暂无数据</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="12">
+          <div class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="home-item-title">
+              服务器监控
+              <div style="position: absolute; right: 20px; top: 20px;  color: #999; cursor: pointer;" class="el-icon-refresh" @click="refreshSystemData" />
+            </h3>
+            <!-- <div class="chart-wrapper"> -->
+            <!-- <serverProgress :system-data="systemData" /> -->
+            <!-- </div> -->
+            <swiper
+              ref="swiperServer"
+              class="swiper-server"
+              :options="swiperOptionServer"
+              :auto-update="true"
+              :auto-destroy="true"
+              :delete-instance-on-destroy="true"
+              :cleanup-styles-on-destroy="true"
+            >
+              <swiper-slide class="swiper-slide-server">
+                <serverProgress :system-data="systemData" />
+              </swiper-slide>
+              <swiper-slide class="swiper-slide-server cpu-echarts">
+                <serverGpuUse :utilization="utilization" />
+                <div class="cpu-right">
+                  <serverGpu :temperature="temperature" />
+                  <serverGpuOther :memory-total="memoryTotal" :memory-free="memoryFree" />
+                </div>
+                <div style="position: absolute; bottom: 136px; right: 70px; font-weight: bold;">{{ GPUName }}</div>
+              </swiper-slide>
+              <swiper-slide class="swiper-slide-server">
+                <serveTerminal ref="serveTerminalRefs" />
+              </swiper-slide>
+              <div slot="pagination" class="swiper-pagination" />
+            </swiper>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="height:calc(50vh - 174px);">
+        <el-col :xs="24" :sm="24" :lg="8">
+          <!-- 档案借阅 -->
+          <div class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="home-item-title">
+              盘点概况
+            </h3>
+            <div v-if="taskStockLogData.length !== 0" class="chart-wrapper">
+              <taskStockLogEcharts :task-stock-log-data="taskStockLogData" />
+            </div>
+            <div v-else class="empty-main">
+              <svg-icon icon-class="empty" class-name="empty-img" />
+              <p>暂无数据</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <!-- 档案门类 -->
+          <div class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="home-item-title">
+              盘点统计
+            </h3>
+            <div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
+              <checkSwiper ref="checkSwiperRefs" />
+            </div>
+            <!-- <div v-else class="empty-main">
+              <svg-icon icon-class="empty" class-name="empty-img" />
+              <p>暂无数据</p>
+            </div> -->
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <!-- 档案类型 -->
+          <div class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="home-item-title">
+              流通统计
+            </h3>
+            <!-- <div class="refresh-date">2024-11-28 09:46</div> -->
+            <div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
+              <bookSwiper ref="bookSwiperRefs" />
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import PanelGroup from './dashboard/PanelGroup'
+import taskStockLogEcharts from '@/views/components/echarts/taskStockLog.vue'
+// import lendAcross from '@/views/components/echarts/lendAcross.vue'
+// import catePie from '@/views/components/echarts/catePie.vue'
+// import typePie from '@/views/components/echarts/typePie.vue'
+import bookSwiper from '@/views/components/bookSwiper.vue'
+import checkSwiper from '@/views/components/checkSwiper.vue'
+import serverProgress from '@/views/components/echarts/serverProgress.vue'
+import serverGpu from '@/views/components/echarts/serverGpu.vue'
+import serverGpuUse from '@/views/components/echarts/serverGpuUse.vue'
+import serverGpuOther from '@/views/components/echarts/serverGpuOther.vue'
+import serveTerminal from '@/views/components/serveTerminal.vue'
+import { FetchInitHomeInfo, FetchInitStockInfo } from '@/api/stockTask/index'
+import { FetchInitStockLogList } from '@/api/stockTaskLog/index'
+import { FetchSystemInfo } from '@/api/home/cpu/index'
+import { mapGetters } from 'vuex'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    PanelGroup,
+    // lendAcross,
+    taskStockLogEcharts,
+    // catePie,
+    bookSwiper,
+    checkSwiper,
+    // typePie,
+    serverProgress,
+    serverGpu,
+    serverGpuUse,
+    serverGpuOther,
+    serveTerminal,
+    swiper,
+    swiperSlide
+  },
+  data() {
+    return {
+      topObjectNum: {
+        regionCount: 0,
+        shelfCount: 0,
+        gridCount: 0,
+        deviceCount: 0,
+        noStockGridCount: 0,
+        deviceErrorCount: 0
+      },
+      taskStockLogData: [],
+      echartsTimer: null,
+      refreshtime: 10000,
+      systemTimer: null,
+      systemData: {
+        cpuPercentage: 0,
+        memPercentage: 0,
+        sysFilesPercentage: 0
+      },
+      stockLogCompletedData: [],
+      stockLogIncompleteData: [],
+
+      archivesTotalNum: 0,
+      flowableData: [],
+      flowableTabIndex: 0,
+      lendData: {
+        archivesTotalNum: null,
+        otherData: []
+      },
+      cateData: [],
+      typeData: [],
+      addArcivesData: {
+        addArcivesMaxCount: null,
+        addArcivesMonth: [],
+        addArcivesNum: [],
+        addArcivesNumFile: []
+      },
+      swiperActiveIndex: 0,
+      swiperOptionServer: {
+        autoplay: {
+          delay: 8000,
+          disableOnInteraction: false
+        },
+        slidesPerView: 'auto',
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true
+        }
+      },
+      memoryFree: 0,
+      memoryTotal: 0,
+      GPUName: '',
+      temperature: 0,
+      utilization: 0
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'user'
+    ]),
+    swiperServer() {
+      return this.$refs.swiperServer.$el.swiper
+    }
+  },
+  created() {
+    this.handleMainData()
+    this.getSystemInfo()
+    this.getStockLog()
+    this.handleInitStockInfo()
+    this.$nextTick(() => {
+      this.$refs.bookSwiperRefs.swiperParams = {}
+      this.$refs.bookSwiperRefs.swiperShelfParams = {}
+      if (this.$refs.bookSwiperRefs.swiperActiveIndex === 0) {
+        this.$refs.bookSwiperRefs.getInitHotBookList()
+      } else {
+        this.$refs.bookSwiperRefs.getInitHotShelfList()
+      }
+
+      this.$refs.serveTerminalRefs.initData()
+    })
+  },
+  mounted() {
+    // const _this = this
+    // // 每隔一分钟刷新档案借阅和档案类型的数据
+    // this.echartsTimer = setInterval(() => {
+    //   _this.lendData = {
+    //     archivesTotalNum: null,
+    //     otherData: []
+    //   }
+    //   _this.cateData = []
+    //   _this.typeData = []
+    //   _this.addArcivesData = {
+    //     addArcivesMaxCount: null,
+    //     addArcivesMonth: [],
+    //     addArcivesNum: [],
+    //     addArcivesNumFile: []
+    //   }
+    //   _this.handleMainData()
+    // }, this.refreshtime)
+
+    // 服务器监控定时更新
+    // this.systemTimer = setInterval(() => {
+    //   _this.systemData = {
+    //     cpuPercentage: 0,
+    //     memPercentage: 0,
+    //     sysFilesPercentage: 0
+    //   }
+    //   this.getSystemInfo()
+    // }, 3000)
+  },
+  methods: {
+    getSystemInfo() {
+      FetchSystemInfo().then(res => {
+        // cpu 占有率 （总的cpuTotal-空闲的cpuFree）/总的cpuTotal
+        this.systemData.cpuPercentage = Math.round((res.cpuTotal - res.cpuFree) / res.cpuTotal * 100)
+
+        // 内存占比  使用的memUsed/总的memTotal
+        this.systemData.memPercentage = Math.round(res.memUsed / res.memTotal * 100)
+
+        this.memoryFree = res.memoryFree
+        this.memoryTotal = res.memoryTotal
+        this.GPUName = res.GPUName
+        this.temperature = res.temperature
+        this.utilization = res.utilization
+
+        // 磁盘占比  多个磁盘  使用总和sysFiles[i].used的和/总的总和sysFiles[i].total的和
+        let sysFilesTotalUsed = 0
+        let sysFilesTotal = 0
+        res.sysFiles.forEach(item => {
+          sysFilesTotalUsed += parseFloat(item.used)
+          sysFilesTotal += parseFloat(item.total)
+        })
+        this.systemData.sysFilesPercentage = Math.round((sysFilesTotalUsed / sysFilesTotal) * 100)
+      })
+    },
+    refreshSystemData() {
+      this.systemData = {
+        cpuPercentage: 0,
+        memPercentage: 0,
+        sysFilesPercentage: 0
+      }
+      this.memoryFree = 0
+      this.memoryTotal = 0
+      this.GPUName = ''
+      this.temperature = 0
+      this.utilization = 0
+
+      this.getSystemInfo()
+      this.$refs.serveTerminalRefs.initData()
+    },
+    getStockLog() {
+      FetchInitStockLogList().then(res => {
+        this.stockLogCompletedData = res.content.filter(item => [0, 3].includes(item.state))
+        this.stockLogIncompleteData = res.content.filter(item => [1, 2].includes(item.state))
+      })
+    },
+    handleMainData() {
+      FetchInitHomeInfo().then(data => {
+        this.topObjectNum = {
+          regionCount: data.regionCount,
+          shelfCount: data.shelfCount,
+          gridCount: data.gridCount,
+          deviceCount: data.deviceCount,
+          noStockGridCount: data.noStockGridCount,
+          deviceErrorCount: data.deviceErrorCount
+        }
+      })
+    },
+    handleInitStockInfo(params) {
+      FetchInitStockInfo(params).then(res => {
+        this.taskStockLogData = [
+          { value: res.onShelfNum - res.errorShelfNum - res.errorOrderNum, name: '正常在架' },
+          { value: res.errorShelfNum, name: '错架' },
+          { value: res.errorOrderNum, name: '错序' }
+        ]
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 20px;
+  position: relative;
+
+  .chart-wrapper {
+    height: calc(100% - 120px);
+  }
+}
+@media (max-width: 1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+.el-col {
+  height: 100%;
+}
+.container-left,
+.container-right,
+.container-wrap,
+.el-card,
+.header-container-wrap {
+  min-height: 100%;
+}
+.container-wrap {
+  min-height: auto;
+  height: 100%;
+}
+.home-item-title{
+  position: relative;
+  padding: 18px 0 18px 15px;
+  font-size: 16px;
+  color: #0C0E1E;
+  &::before{
+    position: absolute;
+    left: 0;
+    top: 50%;
+    content: "";
+    width: 3px;
+    height: 16px;
+    background-color: #0348F3;
+    transform: translateY(-50%);
+  }
+}
+.home-flowable{
+  padding: 0 20px;
+}
+.home-tab{
+  display: flex;
+  justify-content: flex-start;
+  span{
+    display: block;
+    margin-right: 30px;
+    padding-bottom: 3px;
+    border-bottom: 3px solid #fff;
+    &.home-tab-active{
+      color: #0348F3;
+      // border-bottom: 3px solid #0348F3;
+    }
+  }
+}
+::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar {
+  width: 5px !important;
+  height: 5px !important;
+  background-color: #DDE8FB !important;
+}
+
+::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: #4578F6 !important;
+}
+
+::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: #4578F6 !important;
+}
+
+::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-corner {
+  background-color: #DDE8FB !important;
+}
+.refresh-date{
+  position: absolute;
+  right: 14px;
+  top: 10px;
+  font-size: 12px;
+  line-height: 30px;
+}
+.swiper-server{
+  position: relative;
+  height: 300px;
+  ::v-deep .swiper-wrapper{
+    height: 344px;
+  }
+  .swiper-pagination{
+    bottom: 80px;
+  }
+}
+
+.cpu-echarts{
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  // background-color: #000;
+  .cpu-right{
+    flex: 1;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    // flex-direction: column;
+    // flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/src/views/home.vue b/src/views/home.vue
index 754df5f..45d59ab 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,365 +1,34 @@
 <template>
-  <div class="dashboard-container">
-    <div class="dashboard-editor-container">
-      <panel-group :top-object-num="topObjectNum" />
-      <el-row :gutter="20" style="margin-bottom:20px;height: calc(50vh - 174px);">
-        <el-col :xs="24" :sm="24" :lg="12">
-          <div class="container-wrap">
-            <span class="right-top-line" />
-            <span class="left-bottom-line" />
-            <h3 class="home-item-title">
-              盘点日志
-              <router-link :to="{ path: '/check/check/checkLog'}">
-                <div style="position: absolute; right: 20px; top: 20px; color: #999;" class="el-icon-more" />
-              </router-link>
-            </h3>
-            <div class="home-flowable" style="height: calc(100% - 54px); overflow-x: hidden;">
-              <div class="home-tab">
-                <span :class="{'home-tab-active': flowableTabIndex == 0}">未完成({{ stockLogIncompleteData.length !==0? stockLogIncompleteData.length: 0 }})</span>
-                <span :class="{'home-tab-active': flowableTabIndex == 1}">已结束({{ stockLogCompletedData.length !==0? stockLogCompletedData.length: 0 }})</span>
-                <!-- <span :class="{'home-tab-active': flowableTabIndex == 2}">已完成({{ flowableData.length !==0? flowableData.length: 0 }})</span>
-                <span :class="{'home-tab-active': flowableTabIndex == 3}" @click="toMoreProcess">更多任务</span> -->
-              </div>
-              <div class="home-flowable-list" style="height: calc(100% - 45px); overflow-y: auto; overflow-x: hidden;">
-                <el-table v-if="stockLogIncompleteData.length !== 0" height="calc(100%)" :data="stockLogIncompleteData" class="archives-table" stripe style="width: 100%">
-                  <el-table-column prop="stockBill" label="盘点单号" />
-                  <el-table-column prop="stockRegion" label="目标位置" min-width="180" />
-                  <el-table-column prop="stockGridNum" label="目标数量" align="right">
-                    <template slot-scope="scope">
-                      <div>{{ scope.row.stockGridNum + ' / '+ (scope.row.totalGridNum?scope.row.totalGridNum:'0') +' 层位' }}</div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="state" label="盘点状态" align="center">
-                    <template slot-scope="scope">
-                      <span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span>
-                      <span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span>
-                      <span v-if="scope.row.state === 2" class="row-state row-binding state-active">盘点中</span>
-                      <span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span>
-                    </template>
-                  </el-table-column>
-                  <!-- <el-table-column prop="createTime" label="申请时间" width="180"> -->
-                  <!-- <template slot-scope="scope"> -->
-                  <!-- <div>{{ scope.row.createTime | parseTime }}</div> -->
-                  <!-- </template> -->
-                  <!-- </el-table-column> -->
-                </el-table>
-                <div v-else class="empty-main" style="height: 100%;">
-                  <svg-icon icon-class="empty" class-name="empty-img" />
-                  <p>暂无数据</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="12">
-          <div class="container-wrap">
-            <span class="right-top-line" />
-            <span class="left-bottom-line" />
-            <h3 class="home-item-title">
-              服务器监控
-              <div style="position: absolute; right: 20px; top: 20px;  color: #999; cursor: pointer;" class="el-icon-refresh" @click="refreshSystemData" />
-            </h3>
-            <!-- <div class="chart-wrapper"> -->
-            <!-- <serverProgress :system-data="systemData" /> -->
-            <!-- </div> -->
-            <swiper
-              ref="swiperServer"
-              class="swiper-server"
-              :options="swiperOptionServer"
-              :auto-update="true"
-              :auto-destroy="true"
-              :delete-instance-on-destroy="true"
-              :cleanup-styles-on-destroy="true"
-            >
-              <swiper-slide class="swiper-slide-server">
-                <serverProgress :system-data="systemData" />
-              </swiper-slide>
-              <swiper-slide class="swiper-slide-server cpu-echarts">
-                <serverGpuUse :utilization="utilization" />
-                <div class="cpu-right">
-                  <serverGpu :temperature="temperature" />
-                  <serverGpuOther :memory-total="memoryTotal" :memory-free="memoryFree" />
-                </div>
-                <div style="position: absolute; bottom: 136px; right: 70px; font-weight: bold;">{{ GPUName }}</div>
-              </swiper-slide>
-              <swiper-slide class="swiper-slide-server">
-                <serveTerminal ref="serveTerminalRefs" />
-              </swiper-slide>
-              <div slot="pagination" class="swiper-pagination" />
-            </swiper>
-          </div>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20" style="height:calc(50vh - 174px);">
-        <el-col :xs="24" :sm="24" :lg="8">
-          <!-- 档案借阅 -->
-          <div class="container-wrap">
-            <span class="right-top-line" />
-            <span class="left-bottom-line" />
-            <h3 class="home-item-title">
-              盘点概况
-            </h3>
-            <div v-if="taskStockLogData.length !== 0" class="chart-wrapper">
-              <taskStockLogEcharts :task-stock-log-data="taskStockLogData" />
-            </div>
-            <div v-else class="empty-main">
-              <svg-icon icon-class="empty" class-name="empty-img" />
-              <p>暂无数据</p>
-            </div>
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <!-- 档案门类 -->
-          <div class="container-wrap">
-            <span class="right-top-line" />
-            <span class="left-bottom-line" />
-            <h3 class="home-item-title">
-              盘点统计
-            </h3>
-            <div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
-              <checkSwiper ref="checkSwiperRefs" />
-            </div>
-            <!-- <div v-else class="empty-main">
-              <svg-icon icon-class="empty" class-name="empty-img" />
-              <p>暂无数据</p>
-            </div> -->
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="24" :lg="8">
-          <!-- 档案类型 -->
-          <div class="container-wrap">
-            <span class="right-top-line" />
-            <span class="left-bottom-line" />
-            <h3 class="home-item-title">
-              流通统计
-            </h3>
-            <!-- <div class="refresh-date">2024-11-28 09:46</div> -->
-            <div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
-              <bookSwiper ref="bookSwiperRefs" />
-            </div>
-          </div>
-        </el-col>
-      </el-row>
+  <div class="dashboard-container" style="position: relative; height:calc(100vh - 119px); background-color: #fff; overflow: hidden;">
+    <div style="position: absolute; top: 35%; left: 16%;  color: #000; font-size: 40px; font-weight: bold; z-index: 999;">
+      <span style="display: block; margin-bottom: 20px; font-size: 60px;">Hello!</span>
+      <p>欢迎来到图书馆综合管理系统</p>
     </div>
+    <img src="@/assets/images/home2.jpg" alt="" style="display: block; width: 100%; height: 100%; object-fit: cover; ">
   </div>
 </template>
 
 <script>
-import PanelGroup from './dashboard/PanelGroup'
-import taskStockLogEcharts from '@/views/components/echarts/taskStockLog.vue'
-// import lendAcross from '@/views/components/echarts/lendAcross.vue'
-// import catePie from '@/views/components/echarts/catePie.vue'
-// import typePie from '@/views/components/echarts/typePie.vue'
-import bookSwiper from '@/views/components/bookSwiper.vue'
-import checkSwiper from '@/views/components/checkSwiper.vue'
-import serverProgress from '@/views/components/echarts/serverProgress.vue'
-import serverGpu from '@/views/components/echarts/serverGpu.vue'
-import serverGpuUse from '@/views/components/echarts/serverGpuUse.vue'
-import serverGpuOther from '@/views/components/echarts/serverGpuOther.vue'
-import serveTerminal from '@/views/components/serveTerminal.vue'
-import { FetchInitHomeInfo, FetchInitStockInfo } from '@/api/stockTask/index'
-import { FetchInitStockLogList } from '@/api/stockTaskLog/index'
-import { FetchSystemInfo } from '@/api/home/cpu/index'
-import { mapGetters } from 'vuex'
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
-import 'swiper/dist/css/swiper.css'
 
 export default {
   name: 'Dashboard',
   components: {
-    PanelGroup,
-    // lendAcross,
-    taskStockLogEcharts,
-    // catePie,
-    bookSwiper,
-    checkSwiper,
-    // typePie,
-    serverProgress,
-    serverGpu,
-    serverGpuUse,
-    serverGpuOther,
-    serveTerminal,
-    swiper,
-    swiperSlide
   },
   data() {
     return {
-      topObjectNum: {
-        regionCount: 0,
-        shelfCount: 0,
-        gridCount: 0,
-        deviceCount: 0,
-        noStockGridCount: 0,
-        deviceErrorCount: 0
-      },
-      taskStockLogData: [],
-      echartsTimer: null,
-      refreshtime: 10000,
-      systemTimer: null,
-      systemData: {
-        cpuPercentage: 0,
-        memPercentage: 0,
-        sysFilesPercentage: 0
-      },
-      stockLogCompletedData: [],
-      stockLogIncompleteData: [],
 
-      archivesTotalNum: 0,
-      flowableData: [],
-      flowableTabIndex: 0,
-      lendData: {
-        archivesTotalNum: null,
-        otherData: []
-      },
-      cateData: [],
-      typeData: [],
-      addArcivesData: {
-        addArcivesMaxCount: null,
-        addArcivesMonth: [],
-        addArcivesNum: [],
-        addArcivesNumFile: []
-      },
-      swiperActiveIndex: 0,
-      swiperOptionServer: {
-        autoplay: {
-          delay: 8000,
-          disableOnInteraction: false
-        },
-        slidesPerView: 'auto',
-        pagination: {
-          el: '.swiper-pagination',
-          clickable: true
-        }
-      },
-      memoryFree: 0,
-      memoryTotal: 0,
-      GPUName: '',
-      temperature: 0,
-      utilization: 0
     }
   },
   computed: {
-    ...mapGetters([
-      'user'
-    ]),
-    swiperServer() {
-      return this.$refs.swiperServer.$el.swiper
-    }
   },
   created() {
-    this.handleMainData()
-    this.getSystemInfo()
-    this.getStockLog()
-    this.handleInitStockInfo()
-    this.$nextTick(() => {
-      this.$refs.bookSwiperRefs.swiperParams = {}
-      this.$refs.bookSwiperRefs.swiperShelfParams = {}
-      if (this.$refs.bookSwiperRefs.swiperActiveIndex === 0) {
-        this.$refs.bookSwiperRefs.getInitHotBookList()
-      } else {
-        this.$refs.bookSwiperRefs.getInitHotShelfList()
-      }
 
-      this.$refs.serveTerminalRefs.initData()
-    })
   },
   mounted() {
-    // const _this = this
-    // // 每隔一分钟刷新档案借阅和档案类型的数据
-    // this.echartsTimer = setInterval(() => {
-    //   _this.lendData = {
-    //     archivesTotalNum: null,
-    //     otherData: []
-    //   }
-    //   _this.cateData = []
-    //   _this.typeData = []
-    //   _this.addArcivesData = {
-    //     addArcivesMaxCount: null,
-    //     addArcivesMonth: [],
-    //     addArcivesNum: [],
-    //     addArcivesNumFile: []
-    //   }
-    //   _this.handleMainData()
-    // }, this.refreshtime)
 
-    // 服务器监控定时更新
-    // this.systemTimer = setInterval(() => {
-    //   _this.systemData = {
-    //     cpuPercentage: 0,
-    //     memPercentage: 0,
-    //     sysFilesPercentage: 0
-    //   }
-    //   this.getSystemInfo()
-    // }, 3000)
   },
   methods: {
-    getSystemInfo() {
-      FetchSystemInfo().then(res => {
-        // cpu 占有率 （总的cpuTotal-空闲的cpuFree）/总的cpuTotal
-        this.systemData.cpuPercentage = Math.round((res.cpuTotal - res.cpuFree) / res.cpuTotal * 100)
-
-        // 内存占比  使用的memUsed/总的memTotal
-        this.systemData.memPercentage = Math.round(res.memUsed / res.memTotal * 100)
-
-        this.memoryFree = res.memoryFree
-        this.memoryTotal = res.memoryTotal
-        this.GPUName = res.GPUName
-        this.temperature = res.temperature
-        this.utilization = res.utilization
-
-        // 磁盘占比  多个磁盘  使用总和sysFiles[i].used的和/总的总和sysFiles[i].total的和
-        let sysFilesTotalUsed = 0
-        let sysFilesTotal = 0
-        res.sysFiles.forEach(item => {
-          sysFilesTotalUsed += parseFloat(item.used)
-          sysFilesTotal += parseFloat(item.total)
-        })
-        this.systemData.sysFilesPercentage = Math.round((sysFilesTotalUsed / sysFilesTotal) * 100)
-      })
-    },
-    refreshSystemData() {
-      this.systemData = {
-        cpuPercentage: 0,
-        memPercentage: 0,
-        sysFilesPercentage: 0
-      }
-      this.memoryFree = 0
-      this.memoryTotal = 0
-      this.GPUName = ''
-      this.temperature = 0
-      this.utilization = 0
 
-      this.getSystemInfo()
-      this.$refs.serveTerminalRefs.initData()
-    },
-    getStockLog() {
-      FetchInitStockLogList().then(res => {
-        this.stockLogCompletedData = res.content.filter(item => [0, 3].includes(item.state))
-        this.stockLogIncompleteData = res.content.filter(item => [1, 2].includes(item.state))
-      })
-    },
-    handleMainData() {
-      FetchInitHomeInfo().then(data => {
-        this.topObjectNum = {
-          regionCount: data.regionCount,
-          shelfCount: data.shelfCount,
-          gridCount: data.gridCount,
-          deviceCount: data.deviceCount,
-          noStockGridCount: data.noStockGridCount,
-          deviceErrorCount: data.deviceErrorCount
-        }
-      })
-    },
-    handleInitStockInfo(params) {
-      FetchInitStockInfo(params).then(res => {
-        this.taskStockLogData = [
-          { value: res.onShelfNum - res.errorShelfNum - res.errorOrderNum, name: '正常在架' },
-          { value: res.errorShelfNum, name: '错架' },
-          { value: res.errorOrderNum, name: '错序' }
-        ]
-      }).catch(() => {
-      })
-    }
   }
 }
 </script>
@@ -378,102 +47,5 @@ export default {
     padding: 8px;
   }
 }
-.el-col {
-  height: 100%;
-}
-.container-left,
-.container-right,
-.container-wrap,
-.el-card,
-.header-container-wrap {
-  min-height: 100%;
-}
-.container-wrap {
-  min-height: auto;
-  height: 100%;
-}
-.home-item-title{
-  position: relative;
-  padding: 18px 0 18px 15px;
-  font-size: 16px;
-  color: #0C0E1E;
-  &::before{
-    position: absolute;
-    left: 0;
-    top: 50%;
-    content: "";
-    width: 3px;
-    height: 16px;
-    background-color: #0348F3;
-    transform: translateY(-50%);
-  }
-}
-.home-flowable{
-  padding: 0 20px;
-}
-.home-tab{
-  display: flex;
-  justify-content: flex-start;
-  span{
-    display: block;
-    margin-right: 30px;
-    padding-bottom: 3px;
-    border-bottom: 3px solid #fff;
-    &.home-tab-active{
-      color: #0348F3;
-      // border-bottom: 3px solid #0348F3;
-    }
-  }
-}
-::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar {
-  width: 5px !important;
-  height: 5px !important;
-  background-color: #DDE8FB !important;
-}
-
-::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background-color: #4578F6 !important;
-}
-
-::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
-  background-color: #4578F6 !important;
-}
 
-::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-corner {
-  background-color: #DDE8FB !important;
-}
-.refresh-date{
-  position: absolute;
-  right: 14px;
-  top: 10px;
-  font-size: 12px;
-  line-height: 30px;
-}
-.swiper-server{
-  position: relative;
-  height: 300px;
-  ::v-deep .swiper-wrapper{
-    height: 344px;
-  }
-  .swiper-pagination{
-    bottom: 80px;
-  }
-}
-
-.cpu-echarts{
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  // background-color: #000;
-  .cpu-right{
-    flex: 1;
-    height: 100%;
-    display: flex;
-    justify-content: flex-start;
-    // flex-direction: column;
-    // flex-wrap: wrap;
-  }
-}
 </style>
diff --git a/src/views/weChatMiniProgram/activity copy.vue b/src/views/weChatMiniProgram/activity copy.vue
new file mode 100644
index 0000000..10f936d
--- /dev/null
+++ b/src/views/weChatMiniProgram/activity copy.vue	
@@ -0,0 +1,625 @@
+<template>
+  <div class="app-container row-container" style="height: calc(100vh - 140px);">
+    <!--工具栏-->
+    <div class="head-container">
+      <crudOperation :permission="permission">
+        <template v-slot:middle>
+          <el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
+            <i class="iconfont icon-shanchu" />
+            删除
+          </el-button>
+          <el-button slot="reference" size="mini" icon="el-icon-download" @click="handleDownload">
+            下载
+          </el-button>
+        </template>
+      </crudOperation>
+    </div>
+    <!--表单渲染-->
+    <el-dialog class="activity-form" append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+      <!--  label-position="top" -->
+      <div class="setting-dialog">
+        <el-form ref="form" label-position="top" :inline="true" :model="form" :rules="rules" size="small" label-width="90px">
+          <div style="display: flex; justify-content: space-around; ">
+            <div style="width: 600px; margin: 0 10px; ">
+              <el-row>
+                <el-form-item label="活动标题" prop="title">
+                  <el-input v-model="form.title" placeholder="请输入" style="width: 500px;" />
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="开始时间" prop="startTime">
+                  <el-date-picker
+                    v-model="form.startTime"
+                    type="datetime"
+                    placeholder="选择日期时间"
+                    format="yyyy-MM-dd HH:mm:ss"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    :picker-options="{
+                      disabledDate: (time) =>{
+                        return time.getTime() < Date.now() - 8.64e7
+                      }
+                    }"
+                  />
+                </el-form-item>
+                <el-form-item label="结束时间" prop="endTime">
+                  <el-date-picker
+                    v-model="form.endTime"
+                    type="datetime"
+                    placeholder="选择日期时间"
+                    :picker-options="endPickerOptions"
+                    format="yyyy-MM-dd HH:mm:ss"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    default-time="['23:59:59']"
+                  />
+                </el-form-item>
+              </el-row>
+              <el-form-item class="activity-number" label="活动人数" prop="numberLimit">
+                <el-radio-group v-model="form.numberLimit" v-removeAriaHidden @change="handleNumberLimitChange">
+                  <el-radio :label="1">不限制</el-radio>
+                  <el-radio :label="2">限制</el-radio>
+                </el-radio-group>
+                <el-input v-if="form.numberLimit === 2" v-model="form.number" type="number" placeholder="请输入" @blur="validateNumber" />
+              </el-form-item>
+              <el-row>
+                <el-form-item label="活动地点" prop="address">
+                  <el-input v-model="form.address" placeholder="请输入" style="width: 500px;" />
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="活动封面" prop="imgPath">
+                  <div class="activity-upload">
+                    <img v-if="form.imgPath" :src="`${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${form.imgPath}`" class="upload-preview">
+                    <div v-else class="upload-preview-placeholder">
+                      <img :src="require('@/assets/images/system/default-img.jpg')" class="placeholder-img">
+                    </div>
+                    <el-upload
+                      class="upload-btn-box"
+                      :action="baseApi + '/api/fileRelevant/uploadBookImg'"
+                      :show-file-list="false"
+                      :on-success="handleImgUploadSuccess"
+                      :before-upload="beforeImgUpload"
+                      :headers="uploadHeaders"
+                    >
+                      <div class="upload-btn-inner">
+                        <i class="el-icon-plus" />
+                      </div>
+                    </el-upload>
+                  </div>
+                </el-form-item>
+              </el-row>
+            </div>
+            <quill-editor
+              v-model="editorContent"
+              style="width: 800px;"
+              :editor-content="editorContent"
+              :editor-ref="editorRef"
+              @contentData="contentData"
+            />
+          </div>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog
+      title="取消活动"
+      :visible.sync="cancelDialogVisible"
+      width="500px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form :inline="true" :model="cancelForm">
+        <el-form-item label="活动名称">
+          <span>{{ cancelForm.title }}</span>
+        </el-form-item>
+        <el-form-item label="取消原因" prop="reason">
+          <el-input
+            v-model="cancelForm.reason"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入取消活动的原因"
+            style="width: 380px;"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer" style="margin-top: 20px;">
+        <el-button @click="cancelDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmCancel">确认取消</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <div class="container-wrap">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <el-table
+        ref="table"
+        v-loading="crud.loading"
+        class="archives-table"
+        height="calc(100vh - 330px)"
+        :data="crud.data"
+        @selection-change="crud.selectionChangeHandler"
+        @row-click="clickRowHandler"
+      >
+        <el-table-column type="selection" align="center" width="55" />
+        <el-table-column prop="icon" label="封面" align="center">
+          <template slot-scope="scope">
+            <img
+              style="height:100px;display:block;margin:0 auto;"
+              :src="scope.row.imgPath ? `${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${scope.row.imgPath}` : require('@/assets/images/cover-bg.png')"
+              alt="封面"
+            >
+          </template>
+        </el-table-column>
+        <!-- width="260" :show-overflow-tooltip="true" -->
+        <el-table-column label="标题" prop="title" />
+        <el-table-column prop="startTime" label="开始时间" />
+        <el-table-column prop="endTime" label="结束时间" />
+        <el-table-column prop="number" label="活动人数">
+          <template slot-scope="scope">
+            {{ scope.row.number || '不限制' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="gridName" label="实约人数">
+          <template slot-scope="scope">
+            {{ scope.row.gridName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template slot-scope="scope">
+            <!-- <span :class="getStatusClass(scope.row.status)">{{ getStatusText(scope.row.status) }}</span> -->
+            <!-- 未开始 -->
+            <span v-if="scope.row.status === 0" class="row-state row-physical state-active">{{ getStatusText(scope.row.status) }}</span>
+            <!-- 进行中 -->
+            <span v-if="scope.row.status === 1" class="row-state row-binding state-active">{{ getStatusText(scope.row.status) }}</span>
+            <!-- 已结束 -->
+            <span v-if="scope.row.status === 2" class="row-state">{{ getStatusText(scope.row.status) }}</span>
+            <!-- 手动取消 -->
+            <span v-if="scope.row.status === 3" class="row-state row-lending state-active">{{ getStatusText(scope.row.status) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100" align="center">
+          <template slot-scope="scope">
+            <el-button
+              v-if="scope.row.status === 0 || scope.row.status === 1"
+              style="padding: 7px !important;"
+              icon="el-icon-circle-close"
+              @click="showCancelDialog(scope.row)"
+            >取消</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="create_time" label="创建日期" width="160">
+          <template slot-scope="scope">
+            <div>{{ scope.row.create_time | parseTime }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <pagination v-if="crud.data.length!==0" />
+    </div>
+  </div>
+</template>
+
+<script>
+import crudWeChat from '@/api/digitalScreen/index'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import { mapGetters } from 'vuex'
+import QuillEditor from '@/components/quillEditor/index.vue'
+import { getToken } from '@/utils/auth'
+
+const defaultForm = { id: null, title: null, startTime: null, endTime: null, number: null, numberLimit: 1, address: null, imgPath: null }
+export default {
+  name: 'Activity',
+  components: { crudOperation, pagination, QuillEditor },
+  cruds() {
+    return CRUD({ title: '活动', url: 'api/screenSetting/initScreenBookRecommend2', crudMethod: { ...crudWeChat },
+      optShow: {
+        add: true,
+        edit: true,
+        del: false,
+        download: false,
+        group: false,
+        reset: false
+      }
+    })
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      permission: { add: [], edit: [], del: [] },
+      imageUrl: require('@/assets/images/system/default-img.jpg'),
+      editorRef: 'test',
+      editorContent: '',
+      cancelDialogVisible: false,
+      cancelForm: {
+        title: '',
+        reason: '',
+        row: null
+      },
+      rules: {
+        title: [
+          { required: true, message: '请输入活动标题', trigger: 'blur' }
+        ],
+        startTime: [
+          { required: true, message: '请选择开始时间', trigger: 'change' }
+        ],
+        endTime: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!value) {
+                callback(new Error('请选择结束时间'))
+              } else if (this.form.startTime > value) {
+                callback(new Error('开始时间不得大于结束时间'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'change'
+          }
+        ],
+        numberLimit: [
+          {
+            validator: (rule, value, callback) => {
+              if (value === 2 && (!this.form.number || this.form.number.toString().trim() === '')) {
+                callback(new Error('请输入活动人数'))
+              } else {
+                callback()
+              }
+            },
+            trigger: ['blur', 'change']
+          }
+        ],
+        address: [
+          { required: true, message: '请输入活动地点', trigger: 'blur' }
+        ],
+        imgPath: [
+          { required: true, message: '请上传活动封面', trigger: 'change' }
+        ]
+      },
+      endPickerOptions: {
+        disabledDate: (time) => {
+          const startTime = new Date(this.form.startTime).getTime()
+          if (startTime) {
+            return (time.getTime()) <= startTime - 8.64e7
+          } else {
+            return time.getTime() < Date.now() - 8.64e7
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi',
+      'user'
+    ]),
+    uploadHeaders() {
+      return { Authorization: getToken() }
+    }
+  },
+  methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.params.libcode = this.user.fonds.fondsNo
+      const mockData = [
+        {
+          id: 1,
+          imgPath: null,
+          title: '读书分享会',
+          startTime: '2026-01-15 14:00',
+          endTime: '2026-01-15 16:00',
+          number: null,
+          gridName: 45,
+          status: 1,
+          create_time: '2026-01-10 10:00:00'
+        },
+        {
+          id: 2,
+          imgPath: null,
+          title: '新书发布会',
+          startTime: '2026-01-20 10:00',
+          endTime: '2026-01-20 12:00',
+          number: 100,
+          gridName: 88,
+          status: 0,
+          create_time: '2026-01-12 14:30:00'
+        },
+        {
+          id: 3,
+          imgPath: null,
+          title: '作家见面会',
+          startTime: '2026-01-05 10:00',
+          endTime: '2026-01-05 12:00',
+          number: 80,
+          gridName: 75,
+          status: 2,
+          create_time: '2026-01-01 09:00:00'
+        },
+        {
+          id: 4,
+          imgPath: null,
+          title: '亲子阅读活动',
+          startTime: '2026-01-18 14:00',
+          endTime: '2026-01-18 16:00',
+          number: 60,
+          gridName: 30,
+          status: 3,
+          create_time: '2026-01-14 11:00:00'
+        }
+      ]
+      this.crud.data = mockData
+      this.crud.loading = false
+      return false
+    },
+    // 新增与编辑前做的操作
+    [CRUD.HOOK.afterToCU](crud, form) {
+    },
+    // 新增前
+    [CRUD.HOOK.beforeToAdd]() {
+    },
+    // 初始化编辑时候
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      console.log('crud', crud.form)
+      form.numberLimit = form.number === null ? 1 : 2
+    },
+    // 提交前做的操作
+    [CRUD.HOOK.afterValidateCU](crud) {
+      console.log(crud.form)
+      if (crud.form.numberLimit === 1) {
+        crud.form.number = null
+      }
+      delete crud.form.numberLimit
+      return false
+    },
+    validateNumber() {
+      this.$refs.form.validateField('numberLimit')
+    },
+    handleNumberLimitChange(val) {
+      if (val === 1) {
+        this.$refs.form.clearValidate('numberLimit')
+      }
+    },
+    handleImgUploadSuccess(res) {
+      if (res.code === 200) {
+        this.form.imgPath = res.data
+        this.$message({ message: '上传成功', type: 'success', offset: 8 })
+      } else {
+        this.$message({ message: res.message || '上传失败', type: 'error', offset: 8 })
+      }
+    },
+    beforeImgUpload(file) {
+      const isImage = file.type.startsWith('image/')
+      if (!isImage) {
+        this.$message({ message: '只可上传图片', type: 'error', offset: 8 })
+      }
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message({ message: '图片大小不能超过2MB', type: 'error', offset: 8 })
+      }
+      return isImage && isLt2M
+    },
+    contentData(val) {
+      console.log('contentData', val)
+      this.editorContent = val
+    },
+    showCancelDialog(row) {
+      this.cancelForm.title = row.title
+      this.cancelForm.reason = ''
+      this.cancelForm.row = row
+      this.cancelDialogVisible = true
+    },
+    confirmCancel() {
+      if (!this.cancelForm.reason.trim()) {
+        this.$message({ message: '请输入取消原因', type: 'error', offset: 8 })
+        return
+      }
+      this.cancelForm.row.status = 3
+      this.cancelDialogVisible = false
+      this.$message({ message: '活动已取消', type: 'success', offset: 8 })
+    },
+    toDelete(datas) {
+      this.$confirm('此操作将删除当前所选活动<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        const ids = []
+        datas.forEach(val => {
+          ids.push(val.id)
+        })
+        // crudCollBook.del(ids).then(() => {
+        //   this.$message({ message: '删除成功', type: 'success', offset: 8 })
+        //   this.crud.delAllLoading = false
+        //   this.crud.refresh()
+        // }).catch(err => {
+        //   this.crud.delAllLoading = false
+        //   console.log(err)
+        // })
+      }).catch(() => {
+      })
+    },
+    getStatusText(status) {
+      const statusMap = {
+        0: '未开始',
+        1: '进行中',
+        2: '已结束',
+        3: '手动取消'
+      }
+      return statusMap[status] || '未知'
+    },
+    getStatusClass(status) {
+      const classMap = {
+        0: 'status-pending',
+        1: 'status-active',
+        2: 'status-ended',
+        3: 'status-canceled'
+      }
+      return classMap[status] || 'status-default'
+    },
+    handleStatusToggle(row, val) {
+      row.status = val ? 1 : 3
+      const message = val ? '活动已开启' : '活动已取消'
+      this.$message({ message, type: 'success', offset: 8 })
+    },
+    changeStatus(data, val) {
+      this.$confirm('此操作将禁用 / 启用当前活动 “' + data.title + '”' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        // crudColumn.FetchQueryTopicStatus(data).then(res => {
+        //   this.$message({ message: '修改成功', type: 'success', offset: 8 })
+        // }).catch(() => {
+        //   data.status = !data.status
+        // })
+      }).catch(() => {
+        this.$message({ message: '已取消修改', offset: 8 })
+        data.status = data.status ? 0 : 1
+      })
+    },
+    clickRowHandler(row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+    },
+    handleDownload() {
+      // const url = 'https://qiniu.aiyxlib.com/1606123326451'
+      // const url = 'https://pics0.baidu.com/feed/7e3e6709c93d70cf0a85c39e612e4810bba12b2c.jpeg?token=c5bae0b80bd93b6d3db762d65f0ea89d'
+      // const url = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
+      // const url = 'http://192.168.99.63:15000/api/version/download/file'
+      const url = 'http://192.168.99.63:14000/api/fileRelevant/getImg?imgType=2&imgId=062a010c-deb4-47d1-990c-2d4b2e2543e4'
+      this.$message({ message: '正在下载...', type: 'info', offset: 8 })
+      fetch(url)
+        .then(response => response.blob())
+        .then(blob => {
+          const link = document.createElement('a')
+          link.href = window.URL.createObjectURL(blob)
+          link.download = 'download'
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+          window.URL.revokeObjectURL(link.href)
+          this.$message({ message: '下载成功', type: 'success', offset: 8 })
+        })
+        .catch(() => {
+          window.open(url, '_blank')
+          this.$message({ message: '下载失败，已在新窗口打开', type: 'warning', offset: 8 })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.activity-form{
+  ::v-deep .el-dialog{
+    width: 1300px;
+    .activity-number{
+      width: 380px;
+      margin-right: 0 !important;
+      .el-form-item__content{
+        display: flex;
+        justify-content: flex-start;
+        .el-radio-group{
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          margin-right: 20px;
+        }
+        .el-input__inner{
+          width: 140px;
+        }
+      }
+    }
+    .ql-container{
+      height: 480px !important;
+    }
+    .dialog-footer{
+      margin-top: 10px;
+    }
+  }
+}
+
+.activity-upload{
+  display: flex;
+  align-items: center;
+  width: 500px;
+  gap: 16px;
+  .upload-preview{
+    width: 300px;
+    height: 150px;
+    display: block;
+    object-fit: cover;
+    // border: 1px solid #e6e8ed;
+    border-radius: 4px;
+  }
+  .upload-preview-placeholder{
+    width: 300px;
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    // background-color: #fafafa;
+    overflow: hidden;
+    .placeholder-img{
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: contain;
+    }
+  }
+  .upload-btn-box{
+    width: 100px;
+    height: 100px;
+    border: 2px dashed #d9d9d9;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: border-color 0.3s;
+    &:hover{
+      border-color: #409EFF;
+    }
+    ::v-deep .el-upload{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .upload-btn-inner{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      i{
+        font-size: 28px;
+        color: #8c939d;
+      }
+    }
+  }
+}
+.status-pending{
+  color: #E6A23C;
+}
+.status-active{
+  color: #67C23A;
+}
+.status-ended{
+  color: #909399;
+}
+.status-canceled{
+  color: #F56C6C;
+}
+</style>
diff --git a/src/views/weChatMiniProgram/activity3.vue b/src/views/weChatMiniProgram/activity3.vue
new file mode 100644
index 0000000..d670695
--- /dev/null
+++ b/src/views/weChatMiniProgram/activity3.vue
@@ -0,0 +1,579 @@
+<template>
+  <div class="app-container row-container" style="height: calc(100vh - 140px);">
+    <!--工具栏-->
+    <div class="head-container">
+      <crudOperation :permission="permission">
+        <template v-slot:middle>
+          <el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
+            <i class="iconfont icon-shanchu" />
+            删除
+          </el-button>
+        </template>
+      </crudOperation>
+    </div>
+    <!--表单渲染-->
+    <el-dialog class="activity-form" append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+      <!--  label-position="top" -->
+      <div class="setting-dialog">
+        <el-form ref="form" label-position="top" :inline="true" :model="form" :rules="rules" size="small" label-width="90px">
+          <div style="display: flex; justify-content: space-around; ">
+            <div style="width: 600px; margin: 0 10px; ">
+              <el-row>
+                <el-form-item label="活动标题" prop="title">
+                  <el-input v-model="form.title" placeholder="请输入" style="width: 500px;" />
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="开始时间" prop="startTime">
+                  <el-date-picker
+                    v-model="form.startTime"
+                    type="datetime"
+                    placeholder="选择日期时间"
+                    format="yyyy-MM-dd HH:mm:ss"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    :picker-options="{
+                      disabledDate: (time) =>{
+                        return time.getTime() < Date.now() - 8.64e7
+                      }
+                    }"
+                  />
+                </el-form-item>
+                <el-form-item label="结束时间" prop="endTime">
+                  <el-date-picker
+                    v-model="form.endTime"
+                    type="datetime"
+                    placeholder="选择日期时间"
+                    :picker-options="endPickerOptions"
+                    format="yyyy-MM-dd HH:mm:ss"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    default-time="['23:59:59']"
+                  />
+                </el-form-item>
+              </el-row>
+              <el-form-item class="activity-number" label="活动人数" prop="activityPeople">
+                <el-radio-group v-model="form.numberLimit" v-removeAriaHidden @change="handleNumberLimitChange">
+                  <el-radio :label="1">不限制</el-radio>
+                  <el-radio :label="2">限制</el-radio>
+                </el-radio-group>
+                <el-input v-if="form.numberLimit === 2" v-model.number="form.activityPeople" type="number" placeholder="请输入" min="1" @blur="validateNumber" />
+              </el-form-item>
+              <el-row>
+                <el-form-item label="活动地点" prop="activityLocation">
+                  <el-input v-model="form.activityLocation" placeholder="请输入" style="width: 500px;" />
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="活动封面" prop="coverImage">
+                  <div class="activity-upload">
+                    <img v-if="form.coverImage" :src="`${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${form.coverImage}`" class="upload-preview">
+                    <div v-else class="upload-preview-placeholder">
+                      <img :src="require('@/assets/images/system/default-img.jpg')" class="placeholder-img">
+                    </div>
+                    <el-upload
+                      class="upload-btn-box"
+                      :action="baseApi + '/api/fileRelevant/uploadBookImg'"
+                      :show-file-list="false"
+                      :on-success="handleImgUploadSuccess"
+                      :before-upload="beforeImgUpload"
+                      :headers="uploadHeaders"
+                    >
+                      <div class="upload-btn-inner">
+                        <i class="el-icon-plus" />
+                      </div>
+                    </el-upload>
+                  </div>
+                </el-form-item>
+              </el-row>
+            </div>
+            <quill-editor
+              v-model="editorContent"
+              style="width: 800px;"
+              :editor-content="editorContent"
+              :editor-ref="editorRef"
+              @contentData="contentData"
+            />
+          </div>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog
+      title="取消活动"
+      :visible.sync="cancelDialogVisible"
+      width="600px"
+      class="closed-dialog"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form ref="cancelForm" :inline="true" :rules="cancelRules" :model="cancelForm">
+        <el-form-item label="活动名称">
+          <span>{{ cancelForm.title }}</span>
+        </el-form-item>
+        <el-form-item label="取消原因" prop="reason">
+          <el-input
+            v-model="cancelForm.reason"
+            type="textarea"
+            :rows="5"
+            placeholder="请输入取消活动的原因"
+            style="width: 480px;"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer" style="margin-top: 20px;">
+        <el-button @click="cancelDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmCancel">确认</el-button>
+      </div>
+    </el-dialog>
+    <ActivityDetail :visible.sync="detailVisible" :activity.sync="detailActivity" />
+    <!--表格渲染-->
+    <div class="container-wrap">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <el-table
+        ref="table"
+        v-loading="crud.loading"
+        class="archives-table"
+        height="calc(100vh - 330px)"
+        :data="crud.data"
+        @selection-change="crud.selectionChangeHandler"
+        @row-click="clickRowHandler"
+        @row-dblclick="dblclickRowHandler"
+      >
+        <el-table-column type="selection" align="center" width="55" />
+        <el-table-column prop="coverImage" label="封面" align="center">
+          <template slot-scope="scope">
+            <img
+              style="height:80px;display:block;margin:0 auto;"
+              :src="scope.row.coverImage ? `${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${scope.row.coverImage}` : require('@/assets/images/system/default-img.jpg')"
+              alt="封面"
+            >
+          </template>
+        </el-table-column>
+        <!-- width="260" :show-overflow-tooltip="true" -->
+        <el-table-column prop="title" label="活动名称" />
+        <el-table-column prop="startTime" label="开始时间" />
+        <el-table-column prop="endTime" label="结束时间" />
+        <el-table-column prop="activityPeople" label="活动人数">
+          <template slot-scope="scope">
+            {{ scope.row.activityPeople || '不限制' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="gridName" label="实约人数">
+          <template slot-scope="scope">
+            {{ scope.row.gridName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template slot-scope="scope">
+            <span :class="getStatusClass(scope.row.status)">{{ scope.row.status }}</span>
+
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" align="center">
+          <template slot-scope="scope">
+            <!-- <el-button
+              type="text"
+              icon="el-icon-edit"
+              @click="handleEdit(scope.row)"
+            >编辑</el-button> -->
+            <el-button
+              v-if="scope.row.status === '未开始' || scope.row.status === '进行中'"
+              type="text"
+              icon="el-icon-circle-close"
+              @click="showCancelDialog(scope.row)"
+            >取消</el-button>
+            <el-button
+              v-else-if="scope.row.status === '已取消' && canRestore(scope.row)"
+              type="text"
+              icon="el-icon-refresh"
+              @click="restoreActivity(scope.row)"
+            >恢复</el-button>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="create_time" label="创建日期" width="160">
+          <template slot-scope="scope">
+            <div>{{ scope.row.create_time | parseTime }}</div>
+          </template>
+        </el-table-column> -->
+      </el-table>
+      <!--分页组件-->
+      <pagination v-if="crud.data.length!==0" />
+    </div>
+  </div>
+</template>
+
+<script>
+import crudWeChat from '@/api/weixin/index'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import { mapGetters } from 'vuex'
+import QuillEditor from '@/components/quillEditor/index.vue'
+import { getToken } from '@/utils/auth'
+import ActivityDetail from './module/activityDetail.vue'
+
+const defaultForm = { id: null, title: null, startTime: null, endTime: null, activityPeople: null, numberLimit: 1, activityLocation: null, coverImage: null }
+export default {
+  name: 'Activity',
+  components: { crudOperation, pagination, QuillEditor, ActivityDetail },
+  cruds() {
+    return CRUD({ title: '活动', url: 'api/weixin/initActivityInfo', crudMethod: { ...crudWeChat },
+      optShow: {
+        add: true,
+        edit: true,
+        del: false,
+        download: false,
+        group: false,
+        reset: false
+      }
+    })
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      permission: { add: [], edit: [], del: [] },
+      imageUrl: require('@/assets/images/system/default-img.jpg'),
+      editorRef: 'test',
+      editorContent: '',
+      cancelDialogVisible: false,
+      cancelForm: {
+        title: '',
+        reason: '',
+        row: null
+      },
+      detailVisible: false,
+      detailActivity: {},
+      rules: {
+        title: [
+          { required: true, message: '请输入活动标题', trigger: 'blur' }
+        ],
+        startTime: [
+          { required: true, message: '请选择开始时间', trigger: 'change' }
+        ],
+        endTime: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (!value) {
+                callback(new Error('请选择结束时间'))
+              } else if (this.form.startTime > value) {
+                callback(new Error('开始时间不得大于结束时间'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'change'
+          }
+        ],
+        activityPeople: [
+          {
+            validator: (rule, value, callback) => {
+              if (this.form.numberLimit === 2 && (!value || value < 1)) {
+                callback(new Error('限制人数最少为1'))
+              } else {
+                callback()
+              }
+            },
+            trigger: ['blur', 'change']
+          }
+        ],
+        activityLocation: [
+          { required: true, message: '请输入活动地点', trigger: 'blur' }
+        ],
+        coverImage: [
+          { required: true, message: '请上传活动封面', trigger: 'change' }
+        ]
+      },
+      cancelRules: {
+        reason: [
+          { required: true, message: '请输入取消原因', trigger: 'blur' }
+        ]
+      },
+      endPickerOptions: {
+        disabledDate: (time) => {
+          const startTime = new Date(this.form.startTime).getTime()
+          if (startTime) {
+            return (time.getTime()) <= startTime - 8.64e7
+          } else {
+            return time.getTime() < Date.now() - 8.64e7
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi',
+      'user'
+    ]),
+    uploadHeaders() {
+      return { Authorization: getToken() }
+    }
+  },
+  methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.params.libcode = this.user.fonds.fondsNo
+    },
+    // 新增与编辑前做的操作
+    [CRUD.HOOK.afterToCU](crud, form) {
+    },
+    // 新增前
+    [CRUD.HOOK.beforeToAdd]() {
+    },
+    // 初始化编辑时候
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      form.numberLimit = form.activityPeople === 0 ? 1 : 2
+      this.editorContent = form.activityContent
+    },
+    // 提交前做的操作
+    [CRUD.HOOK.afterValidateCU](crud) {
+      if (!this.editorContent.trim()) {
+        this.$message({ message: '请输入活动内容', type: 'error', offset: 8 })
+        return false
+      }
+      crud.form.activityContent = this.editorContent
+      if (crud.form.numberLimit === 1) {
+        crud.form.activityPeople = 0
+      }
+      delete crud.form.numberLimit
+      console.log('crud.form', crud.form)
+      return true
+    },
+    validateNumber() {
+      this.$refs.form.validateField('activityPeople')
+    },
+    handleNumberLimitChange(val) {
+      if (val === 1) {
+        this.$refs.form.clearValidate('activityPeople')
+      }
+    },
+    handleImgUploadSuccess(res) {
+      if (res.code === 200) {
+        this.form.coverImage = res.data
+        this.$message({ message: '上传成功', type: 'success', offset: 8 })
+      } else {
+        this.$message({ message: res.message || '上传失败', type: 'error', offset: 8 })
+      }
+    },
+    beforeImgUpload(file) {
+      const isImage = file.type.startsWith('image/')
+      if (!isImage) {
+        this.$message({ message: '只可上传图片', type: 'error', offset: 8 })
+      }
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message({ message: '图片大小不能超过2MB', type: 'error', offset: 8 })
+      }
+      return isImage && isLt2M
+    },
+    contentData(val) {
+      console.log('contentData', val)
+      this.editorContent = val
+    },
+    getStatusText(status) {
+      const statusMap = {
+        0: '未开始',
+        1: '进行中',
+        2: '已结束',
+        3: '已取消'
+      }
+      return statusMap[status] || '未知'
+    },
+    getStatusClass(status) {
+      const classMap = {
+        '未开始': 'row-state row-physical state-active',
+        '进行中': 'row-state row-binding state-active',
+        '已结束': 'row-state',
+        '已取消': 'row-state row-lending state-active'
+      }
+      return classMap[status] || ''
+    },
+    canRestore(row) {
+      const now = new Date().getTime()
+      const startTime = new Date(row.startTime).getTime()
+      const endTime = new Date(row.endTime).getTime()
+      const threeDays = 3 * 24 * 60 * 60 * 1000
+      return (now < startTime) || (now >= startTime && now <= endTime && endTime - now >= threeDays)
+    },
+    restoreActivity(row) {
+      this.$confirm('确定要恢复该活动吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await crudWeChat.FetchCancelResumeActivity({ id: row.id })
+        console.log('restoreActivity', res)
+        if (res.code !== 500) {
+          this.$message({ message: res, type: 'success', offset: 8 })
+          this.crud.refresh()
+        } else {
+          this.$message({ message: res.message || '操作失败', type: 'error', offset: 8 })
+        }
+      }).catch(() => {})
+    },
+    showCancelDialog(row) {
+      this.cancelForm.title = row.title
+      this.cancelForm.reason = ''
+      this.cancelForm.row = row
+      this.cancelDialogVisible = true
+    },
+    confirmCancel() {
+      this.$refs.cancelForm.validate(async(valid) => {
+        if (valid) {
+          const res = await crudWeChat.FetchCancelResumeActivity({ id: this.cancelForm.row.id })
+          console.log('res', res)
+          if (res.code !== 500) {
+            this.$message({ message: res, type: 'success', offset: 8 })
+            this.crud.refresh()
+          } else {
+            this.$message({ message: res.message || '操作失败', type: 'error', offset: 8 })
+          }
+          this.cancelDialogVisible = false
+        } else {
+          console.log('校验失败')
+        }
+      })
+    },
+    toDelete(datas) {
+      this.$confirm('此操作将删除当前所选活动<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        const ids = []
+        datas.forEach(val => {
+          ids.push(val.id)
+        })
+        // crudCollBook.del(ids).then(() => {
+        //   this.$message({ message: '删除成功', type: 'success', offset: 8 })
+        //   this.crud.delAllLoading = false
+        //   this.crud.refresh()
+        // }).catch(err => {
+        //   this.crud.delAllLoading = false
+        //   console.log(err)
+        // })
+      }).catch(() => {
+      })
+    },
+    clickRowHandler(row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+    },
+    handleEdit(row) {
+      this.crud.toEdit(row)
+    },
+    dblclickRowHandler(row) {
+      this.detailActivity = row
+      this.detailVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.activity-form{
+  ::v-deep .el-dialog{
+    width: 1300px;
+    .activity-number{
+      width: 380px;
+      margin-right: 0 !important;
+      .el-form-item__content{
+        display: flex;
+        justify-content: flex-start;
+        .el-radio-group{
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          margin-right: 20px;
+        }
+        .el-input__inner{
+          width: 140px;
+        }
+      }
+    }
+    .ql-container{
+      height: 480px !important;
+    }
+    .dialog-footer{
+      margin-top: 10px;
+    }
+  }
+}
+
+.activity-upload{
+  display: flex;
+  align-items: center;
+  width: 500px;
+  gap: 16px;
+  .upload-preview{
+    width: 300px;
+    height: 150px;
+    display: block;
+    object-fit: cover;
+    // border: 1px solid #e6e8ed;
+    border-radius: 4px;
+  }
+  .upload-preview-placeholder{
+    width: 300px;
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    // background-color: #fafafa;
+    overflow: hidden;
+    .placeholder-img{
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: contain;
+    }
+  }
+  .upload-btn-box{
+    width: 100px;
+    height: 100px;
+    border: 2px dashed #d9d9d9;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: border-color 0.3s;
+    &:hover{
+      border-color: #409EFF;
+    }
+    ::v-deep .el-upload{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .upload-btn-inner{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      i{
+        font-size: 28px;
+        color: #8c939d;
+      }
+    }
+  }
+}
+
+.closed-dialog{
+  ::v-deep .el-dialog__footer{
+    padding: 0 0 20px 0;
+  }
+}
+</style>