# 千尺学堂Vue页面动态配置系统

## 📋 概述

本项目实现了千尺学堂首页的动态配置系统，通过JSON配置文件来管理页面中的所有文字内容和图片样式，无需修改Vue组件代码即可更新页面内容。

## 📁 文件结构

```
├── qianchixuetang-homepage.vue    # 主Vue组件
├── qianchixuetang-config.json     # 配置文件
└── README-动态配置.md             # 使用说明
```

## 🔧 配置结构

### JSON配置文件的完整结构

```json
{
  "header": {
    "logo": {
      "alt": "千尺学堂Logo",
      "backgroundColor": "#2c3e50"
    },
    "navigation": ["首页", "课程中心", "关于我们", "联系方式"],
    "userActions": {
      "login": "登录",
      "register": "注册"
    }
  },
  "banner": {
    "title": "千尺学堂",
    "subtitle": "专为银发一族打造的文化传承与养生教育平台",
    "description": "传统文化与现代养生完美融合，让学习成为生活的一部分",
    "buttons": {
      "primary": "立即体验",
      "secondary": "了解更多"
    },
    "background": {
      "gradient": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    }
  },
  "courses": {
    "sectionTitle": "热门课程",
    "sectionSubtitle": "精选优质课程，满足不同学习需求",
    "items": [
      {
        "id": 1,
        "title": "站桩养生",
        "description": "传统养生功法，强身健体，调理身心",
        "icon": "桩",
        "tag": "养生课程",
        "price": "免费体验",
        "imageGradient": "linear-gradient(45deg, #ff6b6b, #ffa500)"
      }
    ],
    "buttons": {
      "primary": "免费领取体验课程",
      "secondary": "更多课程"
    }
  },
  "features": {
    "sectionTitle": "为什么选择千尺学堂",
    "sectionSubtitle": "专业的银发教育服务平台，为您提供优质的学习体验",
    "items": [
      {
        "id": 1,
        "title": "专业师资团队",
        "description": "拥有丰富的教育经验和专业知识，为学员提供高质量的教学服务",
        "icon": "👨‍🏫",
        "gradient": "linear-gradient(45deg, #667eea, #764ba2)"
      }
    ]
  },
  "testimonials": {
    "sectionTitle": "学员故事",
    "sectionSubtitle": "听听学员们的心声与收获",
    "items": [
      {
        "id": 1,
        "content": "通过千尺学堂的站桩养生课程...",
        "author": "小雅同学 · 68岁 · 北京",
        "avatar": "👩‍🦳",
        "gradient": "linear-gradient(45deg, #ff9a9e, #fecfef)"
      }
    ]
  },
  "certifications": {
    "sectionTitle": "荣誉资质",
    "sectionSubtitle": "权威认证，值得信赖",
    "items": [
      {
        "id": 1,
        "title": "质量认证",
        "description": "通过ISO9001质量管理体系认证",
        "icon": "🏆",
        "gradient": "linear-gradient(45deg, #ffd89b, #19547b)"
      }
    ]
  },
  "news": {
    "sectionTitle": "最新资讯",
    "sectionSubtitle": "关注千尺学堂最新动态",
    "items": [
      {
        "id": 1,
        "title": "千尺游学·养生四季调桩营北京站圆满结营",
        "content": "为期一个月的养生四季调桩营圆满落下帷幕...",
        "date": "2024.01.08",
        "category": "活动报道",
        "readMore": "阅读更多 →",
        "gradient": "linear-gradient(45deg, #ff9a9e, #fecfef)",
        "featured": true
      }
    ]
  },
  "announcement": {
    "title": "公告",
    "greeting": "尊敬的千尺学员，您好！",
    "content": [
      "君子曰：学不可以已...",
      "如果您有任何问题..."
    ],
    "signature": "北京世纪万合信息咨询有限公司 2024年4月23日"
  },
  "footer": {
    "links": [
      {
        "text": "京ICP备19048049号-8",
        "url": "#"
      }
    ]
  }
}
```

## 🎯 配置项说明

### 1. 头部配置 (header)
- `logo`: Logo样式配置
- `navigation`: 导航菜单项数组
- `userActions`: 用户操作按钮文字

### 2. Banner配置 (banner)
- `title`: 主标题
- `subtitle`: 副标题
- `description`: 描述文字
- `buttons`: 按钮文字
- `background`: 背景渐变样式

### 3. 课程配置 (courses)
- `sectionTitle`: 区域标题
- `sectionSubtitle`: 区域副标题
- `items[]`: 课程列表，每个课程包含：
  - `title`: 课程名称
  - `description`: 课程描述
  - `icon`: 图标文字
  - `tag`: 标签
  - `price`: 价格
  - `imageGradient`: 图片背景渐变

### 4. 优势配置 (features)
- 结构与课程配置类似，每个优势包含图标和描述

### 5. 学员故事配置 (testimonials)
- 包含学员评价内容和头像

### 6. 荣誉资质配置 (certifications)
- 资质认证信息列表

### 7. 新闻资讯配置 (news)
- 新闻列表，包含日期、分类等信息

### 8. 公告配置 (announcement)
- 公告标题、正文和签名

### 9. 底部配置 (footer)
- 底部链接列表

## 🚀 使用方法

### 1. 修改配置
直接编辑 `qianchixuetang-config.json` 文件中的相应字段即可更新页面内容。

### 2. 添加新课程
在 `courses.items` 数组中添加新的课程对象：

```json
{
  "id": 4,
  "title": "新课程名称",
  "description": "课程详细描述",
  "icon": "🎨",
  "tag": "新标签",
  "price": "价格信息",
  "imageGradient": "linear-gradient(45deg, #新颜色1, #新颜色2)"
}
```

### 3. 更新新闻资讯
在 `news.items` 数组中添加新的新闻项：

```json
{
  "id": 4,
  "title": "新闻标题",
  "content": "新闻内容摘要",
  "date": "2024.01.10",
  "category": "新闻分类",
  "readMore": "阅读更多 →",
  "gradient": "linear-gradient(45deg, #颜色1, #颜色2)",
  "featured": false
}
```

## 📝 注意事项

1. **ID唯一性**: 每个列表项的 `id` 必须唯一
2. **渐变样式**: 所有渐变都使用CSS `linear-gradient` 语法
3. **图标**: 支持emoji表情符号和文字图标
4. **响应式**: 配置会自动适应不同屏幕尺寸
5. **数据验证**: 修改JSON时请确保语法正确

## 🔄 动态更新

页面会在组件加载时自动读取JSON配置，无需重启开发服务器。修改配置文件后，页面会立即反映更改。

## 🎨 样式定制

如果需要调整样式，可以通过修改JSON中的渐变色、字体大小等属性来实现简单的样式定制。对于复杂的样式修改，仍需要在Vue组件的CSS中进行调整。