出版

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

@@ -0,0 +1,231 @@
+# 千尺学堂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中进行调整。

src/views/home/example-config.json

@@ -0,0 +1,32 @@
+{
+  "courses": {
+    "items": [
+      {
+        "id": 1,
+        "title": "太极拳入门",
+        "description": "学习传统太极拳基本功法，强身健体，修心养性",
+        "icon": "🥋",
+        "tag": "养生课程",
+        "price": "免费体验",
+        "imageGradient": "linear-gradient(45deg, #ff6b35, #f7931e)"
+      },
+      {
+        "id": 2,
+        "title": "古筝演奏",
+        "description": "学习中国传统乐器古筝，提升艺术修养",
+        "icon": "🪕",
+        "tag": "音乐课程",
+        "price": "免费体验",
+        "imageGradient": "linear-gradient(45deg, #667eea, #764ba2)"
+      }
+    ]
+  },
+  "announcement": {
+    "content": [
+      "春季养生特训营正在火热报名中！为感谢各位学员的支持，我们特别推出春季养生特训营，为期两个月的系统学习课程。",
+      "活动时间：2024年3月1日-4月30日。参与活动的学员可享受8折优惠，名额有限，欲报从速。",
+      "咨询电话：400-888-8888 或通过千尺APP在线咨询。"
+    ],
+    "signature": "千尺学堂教学团队 2024年2月20日"
+  }
+}

src/views/home/qianchixuetang-config.json

@@ -0,0 +1,223 @@
+{
+  "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)"
+      },
+      {
+        "id": 2,
+        "title": "书法艺术",
+        "description": "传承传统文化，修身养性，陶冶情操",
+        "icon": "书",
+        "tag": "艺术课程",
+        "price": "免费体验",
+        "imageGradient": "linear-gradient(45deg, #4ecdc4, #44a08d)"
+      },
+      {
+        "id": 3,
+        "title": "钢琴演奏",
+        "description": "音乐启迪智慧，提升艺术修养",
+        "icon": "琴",
+        "tag": "音乐课程",
+        "price": "免费体验",
+        "imageGradient": "linear-gradient(45deg, #a8e6cf, #52b788)"
+      }
+    ],
+    "buttons": {
+      "primary": "免费领取体验课程",
+      "secondary": "更多课程"
+    }
+  },
+  "features": {
+    "sectionTitle": "为什么选择千尺学堂",
+    "sectionSubtitle": "专业的银发教育服务平台，为您提供优质的学习体验",
+    "items": [
+      {
+        "id": 1,
+        "title": "专业师资团队",
+        "description": "拥有丰富的教育经验和专业知识，为学员提供高质量的教学服务",
+        "icon": "👨‍🏫",
+        "gradient": "linear-gradient(45deg, #667eea, #764ba2)"
+      },
+      {
+        "id": 2,
+        "title": "个性化教学",
+        "description": "根据学员的实际情况和需求，提供针对性的学习方案",
+        "icon": "🎯",
+        "gradient": "linear-gradient(45deg, #f093fb, #f5576c)"
+      },
+      {
+        "id": 3,
+        "title": "线上线下结合",
+        "description": "灵活的学习方式，线上课程与线下活动相结合",
+        "icon": "💻",
+        "gradient": "linear-gradient(45deg, #4facfe, #00f2fe)"
+      },
+      {
+        "id": 4,
+        "title": "学习社区",
+        "description": "建立学习交流平台，促进学员之间的互动和分享",
+        "icon": "👥",
+        "gradient": "linear-gradient(45deg, #43e97b, #38f9d7)"
+      }
+    ]
+  },
+  "testimonials": {
+    "sectionTitle": "学员故事",
+    "sectionSubtitle": "听听学员们的心声与收获",
+    "items": [
+      {
+        "id": 1,
+        "content": "通过千尺学堂的站桩养生课程，我不仅身体更健康了，心态也更加平和。课程内容丰富，老师讲解耐心，强烈推荐给所有中老年人！",
+        "author": "小雅同学 · 68岁 · 北京",
+        "avatar": "👩‍🦳",
+        "gradient": "linear-gradient(45deg, #ff9a9e, #fecfef)"
+      },
+      {
+        "id": 2,
+        "content": "书法学习让我找到了内心的平静。千尺学堂的教学方法非常适合老年人，节奏不紧不慢，让我能够真正享受学习的乐趣。",
+        "author": "方圆同学 · 72岁 · 上海",
+        "avatar": "👨‍🦳",
+        "gradient": "linear-gradient(45deg, #a8edea, #fed6e3)"
+      }
+    ]
+  },
+  "certifications": {
+    "sectionTitle": "荣誉资质",
+    "sectionSubtitle": "权威认证，值得信赖",
+    "items": [
+      {
+        "id": 1,
+        "title": "质量认证",
+        "description": "通过ISO9001质量管理体系认证",
+        "icon": "🏆",
+        "gradient": "linear-gradient(45deg, #ffd89b, #19547b)"
+      },
+      {
+        "id": 2,
+        "title": "教育资质",
+        "description": "具备完整的办学资质和师资认证",
+        "icon": "📜",
+        "gradient": "linear-gradient(45deg, #a8edea, #fed6e3)"
+      },
+      {
+        "id": 3,
+        "title": "安全保障",
+        "description": "数据安全和隐私保护双重保障",
+        "icon": "🛡️",
+        "gradient": "linear-gradient(45deg, #ffecd2, #fcb69f)"
+      },
+      {
+        "id": 4,
+        "title": "用户好评",
+        "description": "累计服务学员超过10万人",
+        "icon": "⭐",
+        "gradient": "linear-gradient(45deg, #d4fc79, #96e6a1)"
+      },
+      {
+        "id": 5,
+        "title": "教学成果",
+        "description": "学员满意度高达98%",
+        "icon": "🎓",
+        "gradient": "linear-gradient(45deg, #84fab0, #8fd3f4)"
+      }
+    ]
+  },
+  "news": {
+    "sectionTitle": "最新资讯",
+    "sectionSubtitle": "关注千尺学堂最新动态",
+    "items": [
+      {
+        "id": 1,
+        "title": "千尺游学·养生四季调桩营北京站圆满结营",
+        "content": "为期一个月的养生四季调桩营圆满落下帷幕。来自全国各地的学员们在专业导师的指导下，不仅掌握了传统的养生功法，更结识了许多志同道合的朋友。",
+        "date": "2024.01.08",
+        "category": "活动报道",
+        "readMore": "阅读更多 →",
+        "gradient": "linear-gradient(45deg, #ff9a9e, #fecfef)",
+        "featured": true
+      },
+      {
+        "id": 2,
+        "title": "千尺学堂：游学结合，开启银发一族文化探索之旅",
+        "content": "千尺学堂创新推出\"游学结合\"教育模式，将传统文化学习与实地考察相结合，为银发一族提供全新的学习体验。",
+        "date": "2024.01.05",
+        "category": "产品动态",
+        "readMore": "阅读更多 →",
+        "gradient": "linear-gradient(45deg, #a8edea, #fed6e3)",
+        "featured": false
+      },
+      {
+        "id": 3,
+        "title": "千尺学堂从多维度入手，打破银发教育的传统边界",
+        "content": "千尺学堂通过技术创新、内容升级、服务优化等多维度改革，致力于打破传统银发教育的边界限制。",
+        "date": "2024.01.03",
+        "category": "行业资讯",
+        "readMore": "阅读更多 →",
+        "gradient": "linear-gradient(45deg, #ffecd2, #fcb69f)",
+        "featured": false
+      }
+    ]
+  },
+  "announcement": {
+    "title": "公告",
+    "greeting": "尊敬的千尺学员，您好！",
+    "content": [
+      "君子曰：学不可以已。购课并不等同于学习，学习犹如蜜蜂采蜜，采过许多花，才能酿出蜜来。为了更好的为学员提供学习服务，最大化保障大家的学习效果和质量，我们将启动\"千尺学习冲刺项目\"，为购买训练营课程后长时间未选择营期的学员，解锁训练营课程，希望通过我们诚心的专业服务，帮助大家学有所得。",
+      "如果您有任何问题，请于七个工作日内，通过千尺APP联系讲真官方客服。联系方式：点击【我的】-【联系客服】输入人工客服即可。"
+    ],
+    "signature": "北京世纪万合信息咨询有限公司 2024年4月23日"
+  },
+  "footer": {
+    "links": [
+      {
+        "text": "京ICP备19048049号-8",
+        "url": "#"
+      },
+      {
+        "text": "用户隐私协议",
+        "url": "#"
+      },
+      {
+        "text": "用户服务协议",
+        "url": "#"
+      }
+    ]
+  }
+}