officialweb/src/views/home/README-动态配置.md

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

📋 概述

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

📁 文件结构

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

🔧 配置结构

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 数组中添加新的课程对象：

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

3. 更新新闻资讯

在 news.items 数组中添加新的新闻项：

{
  "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中进行调整。