# ActivityCard 活动卡片组件

## 组件描述

ActivityCard 是一个用于展示寺庙活动信息的卡片组件，支持多种活动状态和类型，每个卡片都可以显示独立的标题。

## 功能特性

- 🎨 美观的卡片设计，支持背景图片
- 📊 多种活动状态显示（报名中、进行中、已结束）
- 🏷️ 支持不同活动类型（祈福、法会、禅修、捐赠、义工）
- 📱 响应式设计，适配移动端
- 🎯 支持点击事件和报名功能
- 📝 支持卡片标题显示

## 使用方法

### 基础用法

```vue
<template>
  <activity-card
    :activity="activityData"
    :show-title="true"
    :show-register-button="true"
    @card-click="handleCardClick"
    @register="handleRegister"
  />
</template>

<script>
import ActivityCard from '@/components/activity-card/activity-card.vue'

export default {
  components: {
    ActivityCard
  },
  data() {
    return {
      activityData: {
        id: '1',
        name: '初一祈福',
        theme: '活动主题: 初一祈福,诸事圆满,心生欢喜',
        type: 'prayer',
        status: 'registering',
        time: '2025年10月03日 周四 10:00~11:00',
        location: '福建省泉州市惠安县西北街北门小坪顶',
        backgroundImage: '/static/image/a1.png'
      }
    }
  },
  methods: {
    handleCardClick(activity) {
      console.log('点击活动卡片:', activity)
    },
    handleRegister(activity) {
      console.log('报名活动:', activity)
    }
  }
}
</script>
```

### 不显示报名按钮

```vue
<template>
  <activity-card
    :activity="activityData"
    :show-title="true"
    :show-register-button="false"
    @card-click="handleCardClick"
  />
</template>
```

## Props

| 参数 | 类型 | 必填 | 默认值 | 说明 |
|------|------|------|--------|------|
| activity | Object | 是 | - | 活动数据对象 |
| showTitle | Boolean | 否 | true | 是否显示卡片标题 |
| showRegisterButton | 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 的间距