diff --git a/components/activity-card/README.md b/components/activity-card/README.md
new file mode 100644
index 0000000..1091f39
--- /dev/null
+++ b/components/activity-card/README.md
@@ -0,0 +1,153 @@
+# ActivityCard 活动卡片组件
+
+## 组件描述
+
+ActivityCard 是一个用于展示寺庙活动信息的卡片组件,支持多种活动状态和类型,每个卡片都可以显示独立的标题。
+
+## 功能特性
+
+- 🎨 美观的卡片设计,支持背景图片
+- 📊 多种活动状态显示(报名中、进行中、已结束)
+- 🏷️ 支持不同活动类型(祈福、法会、禅修、捐赠、义工)
+- 📱 响应式设计,适配移动端
+- 🎯 支持点击事件和报名功能
+- 📝 支持卡片标题显示
+
+## 使用方法
+
+### 基础用法
+
+```vue
+
+
+
+
+
+```
+
+## Props
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+|------|------|------|--------|------|
+| activity | Object | 是 | - | 活动数据对象 |
+| showTitle | Boolean | 否 | true | 是否显示卡片标题 |
+
+### activity 对象结构
+
+```javascript
+{
+ id: String, // 活动ID
+ name: String, // 活动名称(同时作为卡片标题)
+ theme: String, // 活动主题(可选)
+ type: String, // 活动类型:prayer/ceremony/meditation/donation/volunteer
+ status: String, // 活动状态:registering/ongoing/finished
+ time: String, // 活动时间(可选)
+ location: String, // 活动地点(可选)
+ backgroundImage: String // 背景图片(可选,会自动使用默认图片)
+}
+```
+
+## Events
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| card-click | activity | 点击卡片时触发 |
+| register | activity | 点击报名按钮时触发 |
+
+## 活动状态
+
+| 状态值 | 显示文本 | 样式 |
+|--------|----------|------|
+| registering | 正在报名中 | 金色背景 |
+| ongoing | 进行中 | 绿色背景 |
+| finished | 已结束 | 灰色背景 |
+
+## 活动类型
+
+| 类型值 | 显示文本 | 默认背景图 |
+|--------|----------|------------|
+| prayer | 祈福活动 | a1.png |
+| ceremony | 法会活动 | a2.png |
+| meditation | 禅修活动 | a3.png |
+| donation | 捐赠活动 | a4.png |
+| volunteer | 义工活动 | a5.png |
+
+## 样式定制
+
+组件使用 SCSS 编写,支持样式定制。主要样式类:
+
+- `.activity-card-container` - 卡片容器(包含标题和卡片)
+- `.card-title` - 卡片标题区域
+- `.title-text` - 标题文本样式
+- `.activity-card` - 卡片主体
+- `.card-background` - 背景图片容器
+- `.card-content` - 内容区域
+- `.activity-theme` - 活动主题
+- `.activity-name` - 活动名称
+- `.activity-status` - 活动状态
+- `.activity-time` - 活动时间
+- `.activity-location` - 活动地点
+- `.register-button` - 报名按钮
+
+## 布局结构
+
+```
+activity-card-container
+├── card-title (可选)
+│ └── title-text
+└── activity-card
+ ├── card-background
+ │ ├── background-image
+ │ └── overlay
+ └── card-content
+ ├── activity-theme
+ ├── activity-name
+ ├── activity-status
+ ├── activity-time
+ ├── activity-location
+ └── register-button
+```
+
+## 注意事项
+
+1. 组件会自动根据活动类型选择默认背景图片
+2. 只有状态为 `registering` 的活动才会显示报名按钮
+3. 时间、地点、主题等字段为可选,不传则不显示对应区域
+4. 卡片标题使用活动名称,可通过 `showTitle` 属性控制显示
+5. 组件高度固定为 370rpx,宽度为 684rpx,可根据需要调整样式
+6. 标题区域与卡片之间有 20rpx 的间距
\ No newline at end of file
diff --git a/components/activity-card/activity-card.vue b/components/activity-card/activity-card.vue
new file mode 100644
index 0000000..85ec765
--- /dev/null
+++ b/components/activity-card/activity-card.vue
@@ -0,0 +1,288 @@
+
+
+
+
+ {{ activity.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ activity.theme }}
+
+
+
+
+ {{ activity.name }}
+
+
+
+
+
+ {{ getStatusText(activity.status) }}
+
+
+
+
+
+ 活动时间:
+ {{ activity.time }}
+
+
+
+
+
+
+
+
+ 立即报名
+
+
+
+
+
+
+ 地点:
+ {{ activity.location }}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/enum/activity.js b/enum/activity.js
new file mode 100644
index 0000000..4c1b412
--- /dev/null
+++ b/enum/activity.js
@@ -0,0 +1,65 @@
+// 活动状态枚举
+export const ACTIVITY_STATUS = {
+ REGISTERING: 'registering', // 正在报名中
+ ONGOING: 'ongoing', // 进行中
+ FINISHED: 'finished' // 已结束
+}
+
+// 活动状态文本映射
+export const ACTIVITY_STATUS_TEXT = {
+ [ACTIVITY_STATUS.REGISTERING]: '正在报名中',
+ [ACTIVITY_STATUS.ONGOING]: '进行中',
+ [ACTIVITY_STATUS.FINISHED]: '已结束'
+}
+
+// 活动状态样式类映射
+export const ACTIVITY_STATUS_CLASS = {
+ [ACTIVITY_STATUS.REGISTERING]: 'status-registering',
+ [ACTIVITY_STATUS.ONGOING]: 'status-ongoing',
+ [ACTIVITY_STATUS.FINISHED]: 'status-finished'
+}
+
+// 活动类型枚举
+export const ACTIVITY_TYPE = {
+ PRAYER: 'prayer', // 祈福活动
+ CEREMONY: 'ceremony', // 法会活动
+ MEDITATION: 'meditation', // 禅修活动
+ DONATION: 'donation', // 捐赠活动
+ VOLUNTEER: 'volunteer' // 义工活动
+}
+
+// 活动类型文本映射
+export const ACTIVITY_TYPE_TEXT = {
+ [ACTIVITY_TYPE.PRAYER]: '祈福活动',
+ [ACTIVITY_TYPE.CEREMONY]: '法会活动',
+ [ACTIVITY_TYPE.MEDITATION]: '禅修活动',
+ [ACTIVITY_TYPE.DONATION]: '捐赠活动',
+ [ACTIVITY_TYPE.VOLUNTEER]: '义工活动'
+}
+
+// 默认活动背景图片
+export const DEFAULT_ACTIVITY_IMAGES = {
+ [ACTIVITY_TYPE.PRAYER]: '/static/image/a1.png',
+ [ACTIVITY_TYPE.CEREMONY]: '/static/image/a2.png',
+ [ACTIVITY_TYPE.MEDITATION]: '/static/image/a3.png',
+ [ACTIVITY_TYPE.DONATION]: '/static/image/a4.png',
+ [ACTIVITY_TYPE.VOLUNTEER]: '/static/image/a5.png'
+}
+
+// 活动卡片配置
+export const ACTIVITY_CARD_CONFIG = {
+ HEIGHT: 600, // 卡片高度(rpx)
+ BORDER_RADIUS: 20, // 圆角(rpx)
+ PADDING: 30, // 内边距(rpx)
+ MARGIN_BOTTOM: 30 // 底部间距(rpx)
+}
+
+export default {
+ ACTIVITY_STATUS,
+ ACTIVITY_STATUS_TEXT,
+ ACTIVITY_STATUS_CLASS,
+ ACTIVITY_TYPE,
+ ACTIVITY_TYPE_TEXT,
+ DEFAULT_ACTIVITY_IMAGES,
+ ACTIVITY_CARD_CONFIG
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 7f61ee2..ffecedd 100644
--- a/pages.json
+++ b/pages.json
@@ -118,6 +118,15 @@
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
+ },
+ {
+ "path" : "pages/activity/activity",
+ "style" :
+ {
+ "navigationBarTitleText": "",
+ "enablePullDownRefresh": false,
+ "navigationStyle": "custom"
+ }
}
],
diff --git a/pages/activity/activity.vue b/pages/activity/activity.vue
new file mode 100644
index 0000000..1e91126
--- /dev/null
+++ b/pages/activity/activity.vue
@@ -0,0 +1,173 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file