diff --git a/src/views/weChatMiniProgram/module/activityDetail.vue b/src/views/weChatMiniProgram/module/activityDetail.vue
new file mode 100644
index 0000000..5675ab9
--- /dev/null
+++ b/src/views/weChatMiniProgram/module/activityDetail.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-dialog
+    title="活动详情"
+    :visible.sync="visible"
+    width="375px"
+    class="activity-detail-dialog"
+    top="20px"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <div class="mini-program-container">
+      <div class="content">
+        <img v-if="activity.coverImage" class="activity-img" :src="`${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${activity.coverImage}`">
+        <div v-else class="activity-img-placeholder" />
+
+        <div class="activity-base">
+          <span class="title">{{ activity.title }}</span>
+          <div class="time">
+            <i class="el-icon-time" />
+            <span>{{ activity.startTime }} - {{ activity.endTime }}</span>
+          </div>
+          <div class="location">
+            <i class="iconfont icon-weizhi-copy" />
+            <span>{{ activity.activityLocation }}</span>
+          </div>
+        </div>
+
+        <div class="rich-content">
+          <span class="content-title">活动介绍/回顾</span>
+          <div class="content-html" v-html="activity.activityContent" />
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'ActivityDetail',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    activity: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    ...mapGetters(['baseApi'])
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:activity', {})
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "~@/assets/styles/quillEditor.css";
+.activity-detail-dialog {
+  ::v-deep .el-dialog{
+    padding: 0 !important;
+    .el-dialog__header {
+      padding: 17px !important;
+    }
+    .el-dialog__body {
+      padding: 0;
+      overflow: hidden;
+    }
+    .el-dialog__footer {
+      display: none;
+    }
+  }
+}
+
+.mini-program-container {
+  width: 100%;
+  height: 667px;
+  background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  ::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #afb6c4;
+  }
+}
+
+// .header {
+//   height: 44px;
+//   background-color: #ffffff;
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   padding: 0 16px;
+//   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+// }
+
+// .header-left {
+//   width: 44px;
+//   height: 44px;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   cursor: pointer;
+//   font-size: 20px;
+//   color: #333;
+// }
+
+// .header-title {
+//   font-size: 17px;
+//   font-weight: 600;
+//   color: #333;
+// }
+
+// .header-right {
+//   width: 60px;
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   font-size: 20px;
+//   color: #333;
+// }
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.activity-img {
+  display: block;
+  width: 100%;
+  // height: 180px;
+  object-fit: cover;
+}
+
+.activity-img-placeholder {
+  width: 100%;
+  height: 180px;
+  background-color: #eee;
+}
+
+.activity-base {
+  background: #fff;
+  padding: 15px;
+  margin-bottom: 10px;
+  .title {
+    font-size: 16px;
+    font-weight: bold;
+    padding-bottom: 10px;
+    color: #333;
+  }
+  .time,
+  .location {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #999;
+    padding-top: 10px;
+    i {
+      padding-right: 4px;
+      font-size: 14px;
+    }
+  }
+  .location {
+    i {
+      padding-right: 2px;
+    }
+  }
+}
+
+.rich-content {
+  background: #fff;
+  .content-title {
+    position: relative;
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    padding: 12px 0 10px 12px;
+    display: block;
+    &::before {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -9px;
+      content: "";
+      width: 4px;
+      height: 18px;
+      background-color: #01a4fe;
+    }
+  }
+}
+
+.content-html {
+  padding: 10px;
+  ::v-deep img {
+    width: 100%;
+    display: block;
+  }
+}
+
+// .detail-bottom {
+//   position: absolute;
+//   bottom: 0;
+//   left: 0;
+//   right: 0;
+//   height: 50px;
+//   background: #fff;
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   padding: 0 15px;
+//   box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
+// }
+
+// .detail-left {
+//   display: flex;
+//   gap: 10px;
+// }
+
+// .handle-btn {
+//   display: flex;
+//   align-items: center;
+//   gap: 4px;
+//   background: #f5f5f5;
+//   border-radius: 30px;
+//   padding: 0 12px;
+//   height: 36px;
+//   font-size: 14px;
+//   color: #666;
+//   border: none;
+//   cursor: pointer;
+//   i {
+//     font-size: 16px;
+//   }
+// }
+
+// .join-btn {
+//   background: #01a4fe;
+//   color: #fff;
+//   border-radius: 30px;
+//   padding: 0 20px;
+//   height: 36px;
+//   font-size: 14px;
+//   border: none;
+//   cursor: pointer;
+// }
+
+// .disabled-btn {
+//   background: #ccc !important;
+//   cursor: not-allowed;
+// }
+</style>