diff --git a/src/views/home/README-动态配置.md b/src/views/home/README-动态配置.md
new file mode 100644
index 0000000..25f29cb
--- /dev/null
+++ b/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中进行调整。
diff --git a/src/views/home/example-config.json b/src/views/home/example-config.json
new file mode 100644
index 0000000..36fcfe9
--- /dev/null
+++ b/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日"
+  }
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 5165dd8..80304b4 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,14 +1,1030 @@
 <template>
-  <div class="home-container bg-red-500">
-    <div class="home-header">111</div>
+  <div class="qianchixuetang-homepage">
+    <!-- 头部区域 -->
+    <header class="header">
+      <div class="header-content">
+        <div class="logo-placeholder" :style="{ backgroundColor: config.header.logo.backgroundColor, width: '150px', height: '50px', borderRadius: '8px' }" :alt="config.header.logo.alt"></div>
+        <nav class="nav">
+          <div v-for="item in config.header.navigation" :key="item" class="nav-item">{{ item }}</div>
+        </nav>
+        <div class="user-actions">
+          <div class="login-btn">{{ config.header.userActions.login }}</div>
+          <div class="register-btn">{{ config.header.userActions.register }}</div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Banner区域 -->
+    <section class="banner-section">
+      <div class="banner-container">
+        <div class="banner-item active">
+          <div class="banner-bg" :style="{ background: config.banner.background.gradient }">
+            <div class="banner-content">
+              <h1>{{ config.banner.title }}</h1>
+              <p class="subtitle">{{ config.banner.subtitle }}</p>
+              <div class="banner-desc">
+                <p>{{ config.banner.description }}</p>
+              </div>
+              <div class="banner-buttons">
+                <button class="btn-primary-large">{{ config.banner.buttons.primary }}</button>
+                <button class="btn-secondary-large">{{ config.banner.buttons.secondary }}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 热门课程区域 -->
+    <section class="courses-section">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">{{ config.courses.sectionTitle }}</h2>
+          <p class="section-subtitle">{{ config.courses.sectionSubtitle }}</p>
+        </div>
+        <div class="courses-grid">
+          <div v-for="course in config.courses.items" :key="course.id" class="course-card">
+            <div class="course-image" :style="{ background: course.imageGradient }">
+              <div class="course-icon">{{ course.icon }}</div>
+            </div>
+            <div class="course-content">
+              <h3>{{ course.title }}</h3>
+              <p>{{ course.description }}</p>
+              <div class="course-meta">
+                <span class="course-tag">{{ course.tag }}</span>
+                <span class="course-price">{{ course.price }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="section-actions">
+          <button class="btn-primary">{{ config.courses.buttons.primary }}</button>
+          <button class="btn-outline">{{ config.courses.buttons.secondary }}</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- 平台优势区域 -->
+    <section class="features-section">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">{{ config.features.sectionTitle }}</h2>
+          <p class="section-subtitle">{{ config.features.sectionSubtitle }}</p>
+        </div>
+        <div class="features-grid">
+          <div v-for="feature in config.features.items" :key="feature.id" class="feature-card">
+            <div class="feature-icon" :style="{ background: feature.gradient }">
+              <span>{{ feature.icon }}</span>
+            </div>
+            <h4>{{ feature.title }}</h4>
+            <p>{{ feature.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 学员故事区域 -->
+    <section class="testimonials-section">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">{{ config.testimonials.sectionTitle }}</h2>
+          <p class="section-subtitle">{{ config.testimonials.sectionSubtitle }}</p>
+        </div>
+        <div class="testimonials-grid">
+          <div v-for="testimonial in config.testimonials.items" :key="testimonial.id" class="testimonial-card">
+            <div class="testimonial-avatar" :style="{ background: testimonial.gradient }">
+              <span>{{ testimonial.avatar }}</span>
+            </div>
+            <div class="testimonial-content">
+              <blockquote>
+                "{{ testimonial.content }}"
+              </blockquote>
+              <cite>{{ testimonial.author }}</cite>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 荣誉资质区域 -->
+    <section class="certifications-section">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">{{ config.certifications.sectionTitle }}</h2>
+          <p class="section-subtitle">{{ config.certifications.sectionSubtitle }}</p>
+        </div>
+        <div class="certifications-grid">
+          <div v-for="certification in config.certifications.items" :key="certification.id" class="certification-item">
+            <div class="certification-icon" :style="{ background: certification.gradient }">
+              <span>{{ certification.icon }}</span>
+            </div>
+            <h4>{{ certification.title }}</h4>
+            <p>{{ certification.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 最新资讯区域 -->
+    <section class="news-section">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">{{ config.news.sectionTitle }}</h2>
+          <p class="section-subtitle">{{ config.news.sectionSubtitle }}</p>
+        </div>
+        <div class="news-grid">
+          <div v-for="newsItem in config.news.items" :key="newsItem.id" class="news-card" :class="{ featured: newsItem.featured }">
+            <div class="news-image" :style="{ background: newsItem.gradient }">
+              <div class="news-date">{{ newsItem.date }}</div>
+            </div>
+            <div class="news-content">
+              <h3>{{ newsItem.title }}</h3>
+              <p>{{ newsItem.content }}</p>
+              <div class="news-meta">
+                <span class="news-category">{{ newsItem.category }}</span>
+                <span class="news-readmore">{{ newsItem.readMore }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 公告区域 -->
+    <section class="announcement-section">
+      <article class="announcement">
+        <h3>{{ config.announcement.title }}</h3>
+        <p>{{ config.announcement.greeting }}</p>
+        <p v-for="paragraph in config.announcement.content" :key="paragraph">{{ paragraph }}</p>
+        <p class="signature">{{ config.announcement.signature }}</p>
+      </article>
+    </section>
+
+    <!-- 底部区域 -->
+    <footer class="footer">
+      <div class="footer-links">
+        <a v-for="link in config.footer.links" :key="link.text" :href="link.url" class="footer-link">{{ link.text }}</a>
+      </div>
+    </footer>
   </div>
 </template>
-<script setup>
-import { ref } from 'vue'
+
+<script setup lang="ts">
+// 导入配置
+import configData from './qianchixuetang-config.json'
+import { ref, onMounted } from 'vue'
+
+// 响应式配置数据
+const config = ref(configData)
+
+// 轮播图逻辑
+const activeSlide = ref(0)
+const slides = ref([
+  { title: '千尺游学·养生四季调桩营北京站圆满结营', content: '专业养生课程，调桩调身调心' },
+  { title: '千尺学堂：游学结合，开启银发一族文化探索之旅', content: '文化传承与现代养生完美结合' }
+])
+
+const nextSlide = () => {
+  activeSlide.value = (activeSlide.value + 1) % slides.value.length
+}
+
+const prevSlide = () => {
+  activeSlide.value = activeSlide.value === 0 ? slides.value.length - 1 : activeSlide.value - 1
+}
+
+// 自动轮播
+onMounted(() => {
+  setInterval(nextSlide, 5000)
+})
 </script>
+
 <style scoped>
-.home-container {
+.qianchixuetang-homepage {
+  font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+  line-height: 1.6;
+  color: #333;
+  margin: 0;
+  padding: 0;
+}
+
+/* 通用样式 */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #2c3e50;
+  margin-bottom: 15px;
+  position: relative;
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  border-radius: 2px;
+}
+
+.section-subtitle {
+  font-size: 18px;
+  color: #7f8c8d;
+  margin: 0;
+}
+
+/* 头部样式 */
+.header {
+  background: #fff;
+  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+}
+
+.nav {
+  display: flex;
+  gap: 30px;
+}
+
+.nav-item {
+  color: #2c3e50;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 8px 0;
+  transition: color 0.3s;
+  position: relative;
+}
+
+.nav-item:hover {
+  color: #667eea;
+}
+
+.nav-item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: #667eea;
+  transition: width 0.3s;
+}
+
+.nav-item:hover::after {
   width: 100%;
+}
+
+.user-actions {
+  display: flex;
+  gap: 15px;
+}
+
+.login-btn, .register-btn {
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.login-btn {
+  color: #667eea;
+  border: 1px solid #667eea;
+  background: transparent;
+}
+
+.login-btn:hover {
+  background: #667eea;
+  color: white;
+}
+
+.register-btn {
+  background: #667eea;
+  color: white;
+  border: 1px solid #667eea;
+}
+
+.register-btn:hover {
+  background: #5a67d8;
+  border-color: #5a67d8;
+}
+
+/* Banner样式 */
+.banner-section {
+  height: 500px;
+  position: relative;
+  overflow: hidden;
+}
+
+.banner-container {
   height: 100%;
 }
+
+.banner-item {
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.8s ease;
+}
+
+.banner-item.active {
+  opacity: 1;
+}
+
+.banner-bg {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.banner-bg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.3);
+}
+
+.banner-content {
+  position: relative;
+  z-index: 2;
+  color: white;
+  max-width: 800px;
+  padding: 0 20px;
+}
+
+.banner-content h1 {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.subtitle {
+  font-size: 24px;
+  margin-bottom: 30px;
+  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+}
+
+.banner-desc {
+  font-size: 18px;
+  margin-bottom: 40px;
+  opacity: 0.9;
+}
+
+.banner-buttons {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn-primary-large {
+  background: #fff;
+  color: #667eea;
+  border: 2px solid #fff;
+  padding: 15px 40px;
+  border-radius: 30px;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-primary-large:hover {
+  background: transparent;
+  color: white;
+}
+
+.btn-secondary-large {
+  background: transparent;
+  color: white;
+  border: 2px solid white;
+  padding: 15px 40px;
+  border-radius: 30px;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-secondary-large:hover {
+  background: white;
+  color: #667eea;
+}
+
+/* 课程区域样式 */
+.courses-section {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.courses-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 40px;
+  margin-bottom: 60px;
+}
+
+.course-card {
+  background: white;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.course-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+.course-image {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.course-icon {
+  font-size: 48px;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.course-content {
+  padding: 30px;
+}
+
+.course-content h3 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+}
+
+.course-content p {
+  color: #7f8c8d;
+  font-size: 16px;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.course-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.course-tag {
+  background: #e8f4f8;
+  color: #667eea;
+  padding: 5px 12px;
+  border-radius: 15px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.course-price {
+  color: #e74c3c;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.section-actions {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn-primary {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  padding: 15px 40px;
+  border-radius: 30px;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+
+.btn-outline {
+  background: transparent;
+  color: #667eea;
+  border: 2px solid #667eea;
+  padding: 15px 40px;
+  border-radius: 30px;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-outline:hover {
+  background: #667eea;
+  color: white;
+  transform: translateY(-2px);
+}
+
+/* 优势区域样式 */
+.features-section {
+  padding: 80px 0;
+  background: white;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 40px;
+}
+
+.feature-card {
+  text-align: center;
+  padding: 40px 30px;
+  background: #f8f9fa;
+  border-radius: 15px;
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.feature-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  font-size: 32px;
+}
+
+.feature-card h4 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+}
+
+.feature-card p {
+  color: #7f8c8d;
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* 学员故事区域样式 */
+.testimonials-section {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.testimonials-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 40px;
+}
+
+.testimonial-card {
+  background: white;
+  border-radius: 15px;
+  padding: 40px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  transition: all 0.3s ease;
+}
+
+.testimonial-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+.testimonial-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  flex-shrink: 0;
+}
+
+.testimonial-content {
+  flex: 1;
+}
+
+.testimonial-content blockquote {
+  font-size: 18px;
+  line-height: 1.6;
+  color: #2c3e50;
+  margin: 0 0 20px 0;
+  font-style: italic;
+  position: relative;
+  padding-left: 30px;
+}
+
+.testimonial-content blockquote::before {
+  content: '"';
+  position: absolute;
+  left: 0;
+  top: -10px;
+  font-size: 60px;
+  color: #667eea;
+  font-family: Georgia, serif;
+}
+
+.testimonial-content cite {
+  font-size: 16px;
+  color: #7f8c8d;
+  font-weight: 500;
+  display: block;
+}
+
+/* 荣誉资质区域样式 */
+.certifications-section {
+  padding: 80px 0;
+  background: white;
+}
+
+.certifications-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 40px;
+}
+
+.certification-item {
+  text-align: center;
+  padding: 30px 20px;
+  background: #f8f9fa;
+  border-radius: 15px;
+  transition: all 0.3s ease;
+}
+
+.certification-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.certification-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  font-size: 24px;
+}
+
+.certification-item h4 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 10px;
+}
+
+.certification-item p {
+  color: #7f8c8d;
+  font-size: 14px;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* 新闻资讯区域样式 */
+.news-section {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.news-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: 40px;
+}
+
+.news-card {
+  background: white;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.news-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+.news-card.featured {
+  grid-row: span 2;
+}
+
+.news-image {
+  height: 200px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: 20px;
+  position: relative;
+}
+
+.news-date {
+  background: rgba(255,255,255,0.9);
+  color: #2c3e50;
+  padding: 5px 15px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.news-content {
+  padding: 30px;
+}
+
+.news-content h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+  line-height: 1.4;
+}
+
+.news-content p {
+  color: #7f8c8d;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.news-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.news-category {
+  background: #e8f4f8;
+  color: #667eea;
+  padding: 5px 12px;
+  border-radius: 15px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.news-readmore {
+  color: #667eea;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.3s;
+}
+
+.news-readmore:hover {
+  color: #5a67d8;
+}
+
+/* 公告区域样式 */
+.announcement-section {
+  padding: 80px 0;
+  background: white;
+}
+
+.announcement {
+  max-width: 900px;
+  margin: 0 auto;
+  background: linear-gradient(135deg, #fff8e1 0%, #fef3c7 100%);
+  padding: 40px;
+  border-radius: 15px;
+  border-left: 6px solid #f59e0b;
+  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.1);
+}
+
+.announcement h3 {
+  color: #d97706;
+  margin-bottom: 25px;
+  font-size: 28px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.announcement p {
+  margin-bottom: 20px;
+  line-height: 1.8;
+  color: #374151;
+  font-size: 16px;
+}
+
+.announcement .signature {
+  text-align: right;
+  font-style: italic;
+  color: #6b7280;
+  margin-top: 30px;
+  font-size: 14px;
+  border-top: 1px solid #d97706;
+  padding-top: 20px;
+}
+
+/* 底部样式 */
+.footer {
+  background: #1f2937;
+  color: white;
+  padding: 40px 0 20px;
+  text-align: center;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.footer-link {
+  color: #9ca3af;
+  text-decoration: none;
+  font-size: 14px;
+  transition: color 0.3s;
+  font-weight: 500;
+}
+
+.footer-link:hover {
+  color: #667eea;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .container {
+    padding: 0 15px;
+  }
+
+  .header-content {
+    flex-direction: column;
+    gap: 15px;
+    padding: 15px;
+  }
+
+  .nav {
+    gap: 20px;
+    flex-wrap: wrap;
+  }
+
+  .user-actions {
+    gap: 10px;
+  }
+
+  .banner-content h1 {
+    font-size: 32px;
+  }
+
+  .subtitle {
+    font-size: 18px;
+  }
+
+  .banner-desc {
+    font-size: 16px;
+  }
+
+  .banner-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .btn-primary-large,
+  .btn-secondary-large {
+    padding: 12px 30px;
+    font-size: 16px;
+  }
+
+  .section-title {
+    font-size: 28px;
+  }
+
+  .courses-grid,
+  .features-grid,
+  .certifications-grid {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+
+  .testimonial-card {
+    flex-direction: column;
+    text-align: center;
+    gap: 20px;
+  }
+
+  .testimonial-content blockquote {
+    padding-left: 0;
+    font-size: 16px;
+  }
+
+  .testimonial-content blockquote::before {
+    display: none;
+  }
+
+  .news-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .news-card.featured {
+    grid-row: span 1;
+  }
+
+  .news-content {
+    padding: 20px;
+  }
+
+  .news-content h3 {
+    font-size: 18px;
+  }
+
+  .section-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .btn-primary,
+  .btn-outline {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .announcement {
+    padding: 30px 20px;
+  }
+
+  .announcement h3 {
+    font-size: 24px;
+  }
+
+  .footer-links {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .banner-content h1 {
+    font-size: 28px;
+  }
+
+  .section-title {
+    font-size: 24px;
+  }
+
+  .testimonial-card {
+    padding: 30px 20px;
+  }
+
+  .feature-card,
+  .certification-item {
+    padding: 30px 20px;
+  }
+
+  .course-content {
+    padding: 20px;
+  }
+}
 </style>
diff --git a/src/views/home/qianchixuetang-config.json b/src/views/home/qianchixuetang-config.json
new file mode 100644
index 0000000..bd412c5
--- /dev/null
+++ b/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": "#"
+      }
+    ]
+  }
+}