diff --git a/project.private.config.json b/project.private.config.json
index 76bc936..3bd48ec 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -24,11 +24,18 @@
         "miniprogram": {
             "list": [
                 {
-                    "name": "pages/index/index",
-                    "pathName": "pages/index/index",
+                    "name": "pages/courseIndex/index",
+                    "pathName": "pages/courseIndex/index",
                     "query": "",
                     "scene": null,
                     "launchMode": "default"
+                },
+                {
+                    "name": "pages/index/index",
+                    "pathName": "pages/index/index",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
                 }
             ]
         }
diff --git a/src/app.config.js b/src/app.config.js
index c4021d2..c30474d 100644
--- a/src/app.config.js
+++ b/src/app.config.js
@@ -1,7 +1,9 @@
 // eslint-disable-next-line
 export default defineAppConfig({
   pages: [
-    'pages/index/index'
+    'pages/courseIndex/index',
+    'pages/courseDetail/index',
+    'pages/index/index',
   ],
   window: {
     backgroundTextStyle: 'light',
diff --git a/src/app.js b/src/app.js
index b526b8c..a1b19e7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,13 +1,11 @@
 import { useLaunch } from '@tarojs/taro';
-import { View } from '@tarojs/components';
 
 import './app.less'
 function App({ children }) {
   useLaunch(async () => {
   });
   // children 是将要会渲染的页面
-  return <View>{children}
-  </View>
+  return children
 }
 
 
diff --git a/src/images/common/index1.png b/src/images/common/index1.png
new file mode 100644
index 0000000..fbf3db4
Binary files /dev/null and b/src/images/common/index1.png differ
diff --git a/src/images/index2.png b/src/images/index2.png
new file mode 100644
index 0000000..9f3364c
Binary files /dev/null and b/src/images/index2.png differ
diff --git a/src/images/index3.png b/src/images/index3.png
new file mode 100644
index 0000000..fbf3db4
Binary files /dev/null and b/src/images/index3.png differ
diff --git a/src/pages/courseDetail/index.config.js b/src/pages/courseDetail/index.config.js
new file mode 100644
index 0000000..4b41ed4
--- /dev/null
+++ b/src/pages/courseDetail/index.config.js
@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-undef
+export default definePageConfig({
+  navigationBarTitleText: '无终街'
+})
diff --git a/src/pages/courseDetail/index.jsx b/src/pages/courseDetail/index.jsx
new file mode 100644
index 0000000..349a6fc
--- /dev/null
+++ b/src/pages/courseDetail/index.jsx
@@ -0,0 +1,130 @@
+import { useState, useEffect} from 'react'
+import { View } from '@tarojs/components'
+import Taro, { useRouter } from '@tarojs/taro';
+import './index.less'
+
+export default function Index () {
+  const pageRouter = useRouter()
+  const [currentDetail, setCurrentDetail] = useState(null);
+  const DetailList = [
+      {
+          "id": "1",
+          "content": "价值挖掘：精选楼市核心资讯，快速获取实用信息\n实战教学：学会优质房源筛选方法，构建个人“房产投资舰队”\n思维提升：持续指导，借助专家视角洞察房地产市场",
+          "title": "购房必备技巧指南（上篇）",
+          "summary": "打好基础，解读房产背后的隐藏逻辑",
+          "chapterList": [
+              {
+                  "sectionId": "1",
+                  "sectionName": "第1章：市场分析,深度解读楼市趋势，把握最佳入市时机"
+              },
+              {
+                  "sectionId": "2",
+                  "sectionName": "第2章：选房策略,掌握价值洼地识别技巧，打造高收益"
+              },
+              {
+                  "sectionId": "3",
+                  "sectionName": "第3章：风险管控,学会规避购房陷阱，保障资产安全增值"
+              }
+          ]
+      },
+      {
+          "id": "2",
+          "content": "市场分析：深度解读楼市趋势，把握最佳入市时机\n选房策略：掌握价值洼地识别技巧，打造高收益房产组合\n风险管控：学会规避购房陷阱，保障资产安全增值",
+          "title": "购房必备技巧指南（下篇）",
+          "summary": "进阶技巧，实现房产投资效益最大化",
+          "chapterList": [
+              {
+                  "sectionId": "1",
+                  "sectionName": "第4章：融资与贷款,精通购房金融工具，优化资金使用效率"
+              },
+              {
+                  "sectionId": "2",
+                  "sectionName": "第5章：谈判与交易,掌握高效谈判策略，完成最优价格签约"
+              },
+              {
+                  "sectionId": "3",
+                  "sectionName": "第6章：资产管理与优化,学习长期资产维护与增值策略，构建财富基石"
+              }
+          ]
+      },
+      {
+          "id": "3",
+          "content": "香港大学推荐50本必读书籍，学会用无伤害方式解决人际冲突",
+          "title": "非暴力沟通｜化解矛盾与情绪管理的秘诀",
+          "summary": "非暴力沟通｜化解矛盾与情绪管理的秘诀",
+          "chapterList": [
+              {
+                  "sectionId": "1",
+                  "sectionName": "第1章：认识非暴力沟通,理解核心四要素，转变沟通思维方式"
+              },
+              {
+                  "sectionId": "2",
+                  "sectionName": "第2章：倾听与表达,学会深度倾听与诚实表达，建立真诚连接"
+              },
+              {
+                  "sectionId": "3",
+                  "sectionName": "第3章：化解冲突与愤怒,运用NVC模型管理情绪，创造性解决矛盾"
+              }
+          ]
+      },
+      {
+          "id": "4",
+          "content": "每日10分钟，快速学会沟通表达技巧，轻松扩大社交圈",
+          "title": "心理学实践｜克服社交焦虑，培养自信社交能力",
+          "summary": "心理学实践｜克服社交焦虑，培养自信社交能力",
+          "chapterList": [
+              {
+                  "sectionId": "1",
+                  "sectionName": "第1章：认识社交焦虑,剖析焦虑根源，建立积极自我认知"
+              },
+              {
+                  "sectionId": "2",
+                  "sectionName": "第2章：核心社交技巧,学习破冰、提问与共情，有效开启深度交流"
+              },
+              {
+                  "sectionId": "3",
+                  "sectionName": "第3章：构建自信与圈子,实践场景模拟，逐步建立稳定社交网络"
+              }
+          ]
+      }
+  ]
+  useEffect(()=>{
+      getDetailClass()
+  },[])
+
+    const getDetailClass=()=>{
+        const {params:{ id}} = pageRouter
+          const current = DetailList.find(item=>{
+              return item.id == id
+          })
+        setCurrentDetail(current)
+    }
+    return (
+        currentDetail?
+        <View className="learn-detail">
+            <View className="images">
+                <image className="img" src={require(`../../images/index${currentDetail.id}.png`)}/>
+                <View className="title">{currentDetail.title}</View>
+                <View className="context">{currentDetail.summary}</View>
+                <View className="big_mark"></View>
+            </View>
+            <view className="class_title">课程目录 <view className="class_left class_mu"></view>
+                <View className="class_right class_mu"></View>
+            </view>
+            {
+                currentDetail.chapterList.map(item=>{
+                    return (
+                        <View className="class_list">
+                            <View className="zhang_title">
+                                <View className="zhang">
+                                    <text>{item.sectionName}</text>
+                                </View>
+                            </View>
+                        </View>
+                    )
+                })
+            }
+
+        </View>:null
+    )
+}
diff --git a/src/pages/courseDetail/index.less b/src/pages/courseDetail/index.less
new file mode 100644
index 0000000..3c96a97
--- /dev/null
+++ b/src/pages/courseDetail/index.less
@@ -0,0 +1,124 @@
+.learn-detail{
+  width: 100%;
+  height: 100%;
+}
+.images{
+  width: 100%;
+  position: relative;
+}
+.big_mark{
+  width: 100%;
+  height: 98%;
+  background-color:rgba(0,0,0,.2);
+  position: absolute;
+  top:0;left: 0;
+}
+.img{
+  width: 100%;
+}
+.context{
+  position: absolute;
+  bottom: 40rpx;
+  left: 30rpx;
+  color:#fff;
+  font-size: 26.5rpx;
+  z-index: 10;
+}
+.img_right{
+  width: 50rpx;
+  margin-right: 40rpx;
+  height: 26rpx;
+}
+.img_top{
+  width: 65rpx;
+  margin-right: 30rpx;
+  height: 15rpx;
+}
+.title{
+  font-size: 40rpx;
+  font-weight: 500;
+  position: absolute;
+  left: 30rpx;
+  bottom: 85rpx;
+  color:#fff;
+  z-index: 10;
+}
+.class_title{
+  width: 100%;
+  text-align: center;
+  line-height: 100rpx;
+  font-size: 35rpx;
+  margin-bottom: 10rpx;
+  font-weight: 500;
+  position: relative;
+}
+.class_mu{
+  position: absolute;
+  width: 34rpx;
+  border-radius: 6rpx;
+  height: 6rpx;
+  background:linear-gradient(270deg, #FD5B2A 0%, #FF1504 100%);
+  top:48rpx;
+}
+.class_left{
+  left: 32.5%;
+}
+.class_right{
+  right: 32.5%;
+}
+.class_list{
+  width: 100%;
+}
+.zhang_title{
+  width: 100%;
+}
+.zhang{
+  display: flex;
+  width: 100%;
+  line-height: 105rpx;
+  border-bottom: 1px solid #eee;
+  font-size: 26rpx;
+  height: 105rpx;
+  justify-content: space-between;
+  align-items: center;
+}
+.zhang :first-child{
+  padding-left: 30rpx;
+  color:#303030;
+  flex: 1;
+  margin-right:20rpx ;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-family: PingFangSC-Regular;
+  font-size: 30rpx;
+}
+
+.zhang_detail{
+  width: 90%;
+  margin-left: 5%;
+  height: auto;
+  border-bottom: 0.5rpx solid #E8E8E8;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.zhang_main{
+  width: 100%;
+  height: auto;
+  background-color: #F7F7F7;
+}
+.text{
+  width: 600rpx;
+  height: 100rpx;
+  line-height: 100rpx;
+  font-size: 28rpx;
+  padding-left: 33rpx;
+  color: #303030;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  /* display: flex; */
+}
\ No newline at end of file
diff --git a/src/pages/courseIndex/index.config.js b/src/pages/courseIndex/index.config.js
new file mode 100644
index 0000000..4b41ed4
--- /dev/null
+++ b/src/pages/courseIndex/index.config.js
@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-undef
+export default definePageConfig({
+  navigationBarTitleText: '无终街'
+})
diff --git a/src/pages/courseIndex/index.jsx b/src/pages/courseIndex/index.jsx
new file mode 100644
index 0000000..6d7d04d
--- /dev/null
+++ b/src/pages/courseIndex/index.jsx
@@ -0,0 +1,126 @@
+import { useState, useEffect} from 'react'
+import { View, Button,Text } from '@tarojs/components'
+import Taro, { useRouter } from '@tarojs/taro';
+import {requestWeixinPay} from '../../utils/util'
+import {getPrepayParams} from "../../api/home";
+import './index.less'
+
+export default function Index () {
+  const pageRouter = useRouter() // { path: '', params: { ... } }
+  const [paySuccess, setPaySuccess] = useState(false);
+  const courseList = [
+      {
+          "id": "1",
+          "content": "价值挖掘：精选楼市核心资讯，快速获取实用信息\n实战教学：学会优质房源筛选方法，构建个人“房产投资舰队”\n思维提升：持续指导，借助专家视角洞察房地产市场",
+          "title": "购房必备技巧指南（上篇）",
+      },
+      {
+          "id": "2",
+          "content": "市场分析：深度解读楼市趋势，把握最佳入市时机\n选房策略：掌握价值洼地识别技巧，打造高收益房产组合\n风险管控：学会规避购房陷阱，保障资产安全增值",
+          "title": "购房必备技巧指南（下篇）",
+      },
+      {
+          "id": "3",
+          "content": "香港大学推荐50本必读书籍，学会用无伤害方式解决人际冲突",
+          "title": "非暴力沟通｜化解矛盾与情绪管理的秘诀",
+      },
+      {
+          "id": "4",
+          "content": "每日10分钟，快速学会沟通表达技巧，轻松扩大社交圈",
+          "title": "心理学实践｜克服社交焦虑，培养自信社交能力",
+      }
+  ]
+  useEffect(()=>{
+      setPaySuccess(false)
+      const {params:{ id}} = pageRouter
+      if(id){ // url有订单ID才去拉起支付
+          initLogin()
+      }
+  },[])
+
+    // 开始获取code去拉起支付
+    const initLogin = () => {
+        Taro.login({
+            force: true,
+            success: async (res) => {
+                if(res.errMsg == 'login:ok'){
+                    getPayParams(res.code)
+                } else {
+                    Taro.showToast({
+                        icon: 'error',
+                        title: '获取code登录失败',
+                    })
+                }
+            },
+            fail: (err)=>{
+                Taro.showToast({
+                    icon: 'error',
+                    title: '获取code登录失败',
+                })
+            }
+        })
+    }
+    const getPayParams =(code)=>{
+        const {params:{ id}} = pageRouter
+        const params = {
+            orderId: id,
+            payType: "WE_CHAT_MINI_APP",
+            wxLoginCode: code,
+        }
+        getPrepayParams(params).then(res => {
+            const {wxPrePayParamInfo} = res.data || {}
+            if(wxPrePayParamInfo){
+                requestWeixinPay(wxPrePayParamInfo).then(()=>{
+                    setPaySuccess(true)
+                }).catch((err)=>{
+                    Taro.showToast({
+                        icon: 'error',
+                        title: `${err}` || '支付失败',
+                    })
+                })
+            }
+        }).catch(() => {
+
+        })
+    }
+
+    const navToDetailPage =(id)=>{ // 跳转到详情页
+        Taro.navigateTo({
+            url: `/pages/courseDetail/index?id=${id}`
+        })
+    }
+    const renderIndexCourseList = ()=>{
+        return courseList.map((item,index)=>{
+            return(
+                <View className="product-card" onClick={()=>{
+                    navToDetailPage(item.id)
+                }} key={item.id}>
+                    <View className="images">
+                        <image mode="aspectFit" src={require(`../../images/index${item.id}.png`)}/>
+                    </View>
+                    <View className="context">
+                        <View className="title_top">{item.title}</View>
+                        <View className="con_center">{item.content}</View>
+                        <Text className="price">免费</Text>
+                    </View>
+                </View>
+            )
+        })
+    }
+    return (
+        <View class="main">
+            {
+                renderIndexCourseList()
+            }
+            <view className="coming">更多课程敬请期待~</view>
+            {paySuccess ?
+                <View class="success-container">
+                <View class="success-info">恭喜您支付成功!</View>
+                    <Button class="btn" type="primary" openType='launchApp' appParameter="paysuccess">返回APP</Button>
+                </View>
+             :null
+          }
+      </View>
+
+  )
+}
diff --git a/src/pages/courseIndex/index.less b/src/pages/courseIndex/index.less
new file mode 100644
index 0000000..868a7ce
--- /dev/null
+++ b/src/pages/courseIndex/index.less
@@ -0,0 +1,76 @@
+.main {
+  width: 94%;
+  margin-left: 3%;
+  margin-top: 30rpx;
+  height: auto;
+  background: #FFFFFF;
+  box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.09);
+  border-radius: 15rpx;
+
+  .product-card {
+    width: 100%;
+    height: 220rpx;
+    display: flex;
+    padding-top: 30rpx;
+    padding-bottom: 35rpx;
+
+    .images {
+      width: 225rpx;
+      height: 100%;
+      margin-left: 25rpx;
+
+      image {
+        width: 100%;
+        height: 100%;
+
+      }
+    }
+
+    .context {
+      margin-left: 45rpx;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      position: relative;
+
+      .title_top {
+        font-family: PingFangSC-Medium;
+        font-size: 34rpx;
+        color: #303030;
+        font-weight: bold;
+        line-height: 66rpx;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 360rpx;
+        margin-right: 50rpx;
+      }
+
+      .con_center {
+        font-family: PingFangSC-Regular;
+        font-size: 27.5rpx;
+        color: #606060;
+        line-height: 45rpx;
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        width: 360;
+        margin-right: 50rpx;
+        margin-bottom: 11.5rpx;
+      }
+
+      .price {
+        font-size: 36rpx;
+        color: rgb(240, 30, 30);
+        font-weight: bold;
+        position: absolute;
+        left: 0;
+        bottom: 14rpx;
+      }
+    }
+  }
+  .coming{
+    text-align: center;
+  }
+}
\ No newline at end of file