diff --git a/api/modules/course.ts b/api/modules/course.ts
index c7b3cfd..eb411f1 100644
--- a/api/modules/course.ts
+++ b/api/modules/course.ts
@@ -114,7 +114,7 @@ export const courseApi = {
   },
 
   /**
-   * 开始学习免费课程
+   * 领取免费课程
    * @param catalogueId 目录ID
    */
   startStudyForMF(catalogueId: number) {
diff --git a/components/course/CatalogueList.vue b/components/course/CatalogueList.vue
deleted file mode 100644
index da9ddef..0000000
--- a/components/course/CatalogueList.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <view 
-    v-if="catalogues.length > 1" 
-    :class="['catalogue-list', userVip ? 'vip-style' : '']"
-  >
-    <view
-      v-for="(catalogue, index) in catalogues"
-      :key="catalogue.id"
-      :class="['catalogue-item', currentIndex === index ? 'active' : '']"
-      @click="handleSelect(index)"
-    >
-      <text class="catalogue-title">{{ catalogue.title }}</text>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import type { ICatalogue, IVipInfo } from '@/types/course'
-
-interface Props {
-  catalogues: ICatalogue[]
-  currentIndex: number
-  userVip: IVipInfo | null
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  change: [index: number]
-}>()
-
-/**
- * 选择目录
- */
-const handleSelect = (index: number) => {
-  if (index === props.currentIndex) return
-  emit('change', index)
-}
-</script>
-
-<style lang="scss" scoped>
-.catalogue-list {
-  display: flex;
-  align-items: flex-end;
-  padding: 20rpx;
-  padding-bottom: 0;
-  border-radius: 20rpx 20rpx 0 0;
-  margin-top: 20rpx;
-  
-  &.vip-style {
-    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
-    
-    .catalogue-item {
-      background-color: rgba(0, 0, 0, 0.4);
-      color: #fff;
-      border-color: #fff;
-      
-      &.active {
-        background-color: #258feb;
-        color: #fff;
-      }
-    }
-  }
-  
-  .catalogue-item {
-    flex: 1;
-    text-align: center;
-    padding: 16rpx 0;
-    margin-right: 10rpx;
-    border-radius: 20rpx 20rpx 0 0;
-    border: 1px solid #fff;
-    border-bottom: none;
-    background-color: rgba(0, 0, 0, 0.4);
-    color: #fff;
-    transition: all 0.3s;
-    
-    &:last-child {
-      margin-right: 0;
-    }
-    
-    &.active {
-      background-color: #258feb;
-      padding: 20rpx 0;
-      
-      .catalogue-title {
-        font-size: 36rpx;
-        font-weight: bold;
-      }
-    }
-    
-    .catalogue-title {
-      font-size: 30rpx;
-    }
-  }
-}
-</style>
diff --git a/components/course/ChapterList.vue b/components/course/ChapterList.vue
deleted file mode 100644
index d6eeaf9..0000000
--- a/components/course/ChapterList.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<template>
-  <view class="chapter-list">
-    <!-- 目录状态信息 -->
-    <view v-if="catalogue" class="catalogue-status">
-      <view v-if="catalogue.isBuy === 1 || userVip" class="purchased-info">
-        <view class="info-row">
-          <text v-if="userVip">
-            VIP畅学权益有效期截止到：{{ userVip.endTime }}
-          </text>
-          <template v-else>
-            <text v-if="!catalogue.startTime">
-              当前目录还未开始学习
-            </text>
-            <text v-else>
-              课程有效期截止到：{{ catalogue.endTime }}
-            </text>
-            <!-- <wd-button 
-              v-if="catalogue.startTime"
-              size="small"
-              @click="handleRenew"
-            >
-              续费
-            </wd-button> -->
-          </template>
-        </view>
-      </view>
-      
-      <!-- 未购买状态 -->
-      <view v-else-if="catalogue.type === 0" class="free-course">
-        <wd-button type="success" @click="handleGetFreeCourse">
-          {{ $t('courseDetails.free') }}
-        </wd-button>
-      </view>
-      
-      <view v-else class="unpurchased-info">
-        <text class="tip-text">
-          {{ $t('courseDetails.unpurchasedTip') }}
-        </text>
-        <view class="action-btns">
-          <wd-button size="small" type="warning" @click="handlePurchase">
-            {{ $t('courseDetails.purchase') }}
-          </wd-button>
-          <wd-button 
-            v-if="showRenewBtn"
-            size="small"
-            type="success"
-            @click="handleRenew"
-          >
-            {{ $t('courseDetails.relearn') }}
-          </wd-button>
-          <wd-button size="small" type="primary" @click="goToVip">
-            {{ $t('courseDetails.openVip') }}
-          </wd-button>
-        </view>
-      </view>
-    </view>
-
-    <view v-if="chapters.length > 0" class="chapter-content">
-      <!-- VIP标识 -->
-      <view v-if="userVip" class="vip-badge">
-        <text>VIP畅学权益生效中</text>
-      </view>
-      
-      <!-- 章节列表 -->
-      <view
-        v-for="(chapter, index) in chapters"
-        :key="chapter.id"
-        class="chapter-item"
-        @click="handleChapterClick(chapter)"
-      >
-        <view class="chapter-content-wrapper">
-          <view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
-            <text class="chapter-title">{{ chapter.title }}</text>
-            
-            <!-- 试听标签 -->
-            <wd-tag
-              v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
-              type="success"
-              plain
-              size="small"
-              custom-class="chapter-tag"
-            >
-              试听
-            </wd-tag>
-            
-            <!-- 学习状态标签 -->
-            <template v-if="isPurchased || userVip">
-              <wd-tag
-                v-if="chapter.isLearned === 0"
-                type="primary"
-                plain
-                size="small"
-                custom-class="chapter-tag"
-              >
-                未学
-              </wd-tag>
-              <wd-tag
-                v-else
-                type="success"
-                plain
-                size="small"
-                custom-class="chapter-tag"
-              >
-                已学
-              </wd-tag>
-            </template>
-          </view>
-          
-          <!-- 锁定图标 -->
-          <view v-if="!canAccess(chapter)" class="lock-icon">
-            <wd-icon name="lock-on" size="24px" color="#258feb" />
-          </view>
-        </view>
-      </view>
-    </view>
-    
-    <!-- 暂无章节 -->
-    <view v-else class="no-chapters">
-      <text>暂无章节内容</text>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import type { IChapter, ICatalogue, IVipInfo } from '@/types/course'
-
-interface Props {
-  chapters: IChapter[]
-  catalogue: ICatalogue
-  userVip: IVipInfo | null
-  showRenewBtn?: boolean
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  click: [chapter: IChapter],
-  purchase: [catalogue: ICatalogue],
-  renew: [catalogue: ICatalogue],
-  toVip: [catalogue: ICatalogue],
-}>()
-
-/**
- * 判断目录是否已购买
- */
-const isPurchased = computed(() => {
-  return props.catalogue.isBuy === 1
-})
-// 购买
-const handlePurchase = () => {
-  emit('purchase', props.catalogue)
-}
-// 去开通vip
-const goToVip = () => {
-  emit('toVip', props.catalogue)
-}
-
-// 续费/复读
-const handleRenew = () => {
-  emit('renew', props.catalogue)
-}
-
-// 领取免费课程
-const handleGetFreeCourse = () => {
-  emit('purchase', props.catalogue)
-}
-
-/**
- * 判断章节是否可以访问
- */
-const canAccess = (chapter: IChapter): boolean => {
-  // VIP用户可以访问所有章节
-  if (props.userVip) return true
-  
-  // 已购买目录可以访问所有章节
-  if (isPurchased.value) return true
-  
-  // 试听章节可以访问
-  if (chapter.isAudition === 1) return true
-  
-  // 免费课程可以访问
-  if (props.catalogue.type === 0) return true
-  
-  return false
-}
-
-/**
- * 点击章节
- */
-const handleChapterClick = (chapter: IChapter) => {
-  if (!canAccess(chapter)) {
-    if (props.catalogue.type === 0) {
-      uni.showToast({
-        title: '请先领取课程',
-        icon: 'none'
-      })
-    } else {
-      uni.showToast({
-        title: '请先购买课程',
-        icon: 'none'
-      })
-    }
-    return
-  }
-  
-  emit('click', chapter)
-}
-</script>
-
-<style lang="scss" scoped>
-.chapter-list {
-  padding: 20rpx;
-}
-
-.catalogue-status {
-  padding: 20rpx;
-  margin-bottom: 20rpx;
-  background-color: #fff;
-  
-  .purchased-info {
-    .info-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 26rpx;
-      line-height: 50rpx;
-    }
-  }
-  
-  .free-course {
-    text-align: center;
-  }
-  
-  .unpurchased-info {
-    .tip-text {
-      display: block;
-      font-size: 26rpx;
-      color: #666;
-      margin-bottom: 20rpx;
-      line-height: 1.6;
-    }
-    
-    .action-btns {
-      display: flex;
-      gap: 20rpx;
-      justify-content: center;
-    }
-  }
-}
-
-.chapter-content {
-  position: relative;
-  padding: 20rpx;
-  border: 4rpx solid #fffffc;
-  background: linear-gradient(52deg, #e8f6ff 0%, #e3f2fe 50%);
-  box-shadow: 0px 0px 10px 0px #89c8e9;
-  border-top-right-radius: 40rpx;
-  border-bottom-left-radius: 40rpx;
-  
-  .vip-badge {
-    display: inline-block;
-    font-size: 24rpx;
-    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
-    color: #fff;
-    padding: 10rpx 20rpx;
-    border-radius: 0 50rpx 50rpx 0;
-    z-index: 1;
-  }
-  
-  .chapter-item {
-    padding: 20rpx 0;
-    border-bottom: 1px solid #fff;
-    
-    &:last-child {
-      border-bottom: none;
-    }
-    
-    .chapter-content-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      
-      .chapter-info {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        gap: 10rpx;
-        
-        &.locked {
-          opacity: 0.6;
-        }
-        
-        .chapter-title {
-          flex: 1;
-          font-size: 28rpx;
-          color: #1e2f3e;
-          line-height: 1.5;
-        }
-        
-        .chapter-tag {
-          flex-shrink: 0;
-        }
-      }
-      
-      .lock-icon {
-        margin-left: 20rpx;
-        flex-shrink: 0;
-      }
-    }
-  }
-}
-
-.no-chapters {
-  text-align: center;
-  padding: 80rpx 0;
-  color: #999;
-  font-size: 28rpx;
-}
-</style>
diff --git a/components/order/Confirm.vue b/components/order/Confirm.vue
index 344b448..285b648 100644
--- a/components/order/Confirm.vue
+++ b/components/order/Confirm.vue
@@ -290,7 +290,11 @@ const handlePointsInput = (value: any) => {
   }
   
   // 重新计算实付款
-  calculateFinalPrice()
+  const result = Math.max(
+    0,
+    totalAmount.value - pointsDiscounted.value - promotionDiscounted.value - vipDiscounted.value
+  )
+  finalAmount.value = result
 }
 
 /**
@@ -314,9 +318,11 @@ const calculateFinalPrice = () => {
     props?.userInfo?.jf || 0,
     Math.floor(orderAmountAfterDiscount - couponAmount)
   )
+
+  pointsDiscounted.value = pointsUsableMax.value
   
   // 限制当前积分不超过最大值
-  if (pointsDiscounted.value > pointsUsableMax.value) {
+  if (pointsDiscounted.value >= pointsUsableMax.value) {
     pointsDiscounted.value = pointsUsableMax.value
   }
   
diff --git a/locale/en.json b/locale/en.json
index 0d4b3b0..e8378da 100644
--- a/locale/en.json
+++ b/locale/en.json
@@ -491,5 +491,8 @@
     "openVip": "Open Now",
     "renewal": "Renewal",
     "daily": "Daily"
+  },
+  "news": {
+    "newsDetail": "News Detail"
   }
 }
diff --git a/locale/zh-Hans.json b/locale/zh-Hans.json
index 496bc55..831db6a 100644
--- a/locale/zh-Hans.json
+++ b/locale/zh-Hans.json
@@ -491,5 +491,8 @@
     "openVip": "立即开通",
     "renewal": "续费",
     "daily": "日均"
+  },
+  "news": {
+    "newsDetail": "新闻详情"
   }
 }
diff --git a/pages/book/search.vue b/pages/book/search.vue
index 1bf1b0e..497f7dd 100644
--- a/pages/book/search.vue
+++ b/pages/book/search.vue
@@ -27,12 +27,7 @@
         >
           <image :src="item.images" />
           <text class="book-text">{{ item.name }}</text>
-          <text v-if="formatPrice(item)" class="book-price">{{
-            formatPrice(item)
-          }}</text>
-          <text v-if="formatStats(item)" class="book-flag">{{
-            formatStats(item)
-          }}</text>
+          <BookPrice :data="item" class="book-price-container" />
         </view>
       </view>
       <view v-else-if="isEmpty" class="empty-wrapper">
@@ -47,6 +42,7 @@ import { ref, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import { homeApi } from '@/api/modules/book_home'
+import BookPrice from '@/components/book/BookPrice.vue'
 import type { IBookWithStats, IVipInfo } from '@/types/home'
 
 const { t } = useI18n()
@@ -260,21 +256,9 @@ onMounted(async () => {
       overflow: hidden;
     }
 
-    .book-price {
-      position: absolute;
-      font-size: 28rpx;
-      color: #ff4703;
-      left: 30rpx;
-      bottom: 20rpx;
-    }
-
-    .book-flag {
-      display: block;
-      font-size: 26rpx;
-      color: #999;
-      position: absolute;
-      right: 6%;
-      bottom: 20rpx;
+    .book-price-container {
+      width: 80%;
+      margin: 15rpx auto 0;
     }
   }
 }
diff --git a/pages/course/details/chapter.vue b/pages/course/details/chapter.vue
index 014bdfa..537d86b 100644
--- a/pages/course/details/chapter.vue
+++ b/pages/course/details/chapter.vue
@@ -31,7 +31,7 @@
       <view v-if="videoList.length > 0" class="video-list-section">
         <view class="section-title">{{ $t('courseDetails.videoTeaching') }}</view>
         <wd-radio-group v-model="currentVideoIndex" shape="button" >
-          <wd-radio v-for="(video, index) in videoList" :key="video.id" :value="index">
+          <wd-radio v-for="(video, index) in videoList" :key="video.id" :value="index" class="mb-2!">
             【{{ video.type == "2" ? $t('courseDetails.audio') : $t('courseDetails.video') }}】{{ index + 1 }}
           </wd-radio>
         </wd-radio-group>
diff --git a/pages/course/details/components/CatalogueList.vue b/pages/course/details/components/CatalogueList.vue
new file mode 100644
index 0000000..de9e50d
--- /dev/null
+++ b/pages/course/details/components/CatalogueList.vue
@@ -0,0 +1,450 @@
+<template>
+  <view class="course-content-wrapper">
+    <view 
+      v-if="catalogues.length > 1" 
+      :class="['catalogue-list', userVip ? 'vip-style' : '']"
+    >
+      <view
+        v-for="(catalogue, index) in catalogues"
+        :key="catalogue.id"
+        :class="['catalogue-item', currentCatalogueIndex === index ? 'active' : '']"
+        @click="handleSelect(index)"
+      >
+        <text class="catalogue-title">{{ catalogue.title }}</text>
+      </view>
+    </view>
+
+    <view class="chapter-list">
+      <!-- 目录状态信息 -->
+      <view class="catalogue-status">
+        <view v-if="currentCatalogue?.isBuy === 1 || userVip" class="purchased-info">
+          <view class="info-row">
+            <text v-if="userVip">
+              VIP畅学权益有效期截止到：{{ userVip.endTime }}
+            </text>
+            <template v-else>
+              <text v-if="!currentCatalogue.startTime">
+                当前目录还未开始学习
+              </text>
+              <text v-else>
+                课程有效期截止到：{{ currentCatalogue.endTime }}
+              </text>
+              <!-- <wd-button 
+                v-if="currentCatalogue.startTime"
+                size="small"
+                @click="handleRenew"
+              >
+                续费
+              </wd-button> -->
+            </template>
+          </view>
+        </view>
+        
+        <!-- 未购买状态 -->
+        <view v-else-if="currentCatalogue?.type === 0" class="free-course">
+          <wd-button type="success" @click="handleGetFreeCourse">
+            {{ $t('courseDetails.free') }}
+          </wd-button>
+        </view>
+        
+        <view v-else class="unpurchased-info">
+          <text class="tip-text">
+            {{ $t('courseDetails.unpurchasedTip') }}
+          </text>
+          <view class="action-btns">
+            <wd-button size="small" type="warning" @click="handlePurchase">
+              {{ $t('courseDetails.purchase') }}
+            </wd-button>
+            <wd-button 
+              v-if="showRenewBtn"
+              size="small"
+              type="success"
+              @click="handleRenew"
+            >
+              {{ $t('courseDetails.relearn') }}
+            </wd-button>
+            <wd-button size="small" type="primary" @click="goToVip">
+              {{ $t('courseDetails.openVip') }}
+            </wd-button>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="chapterList.length > 0" class="chapter-content">
+        <!-- VIP标识 -->
+        <view v-if="userVip" class="vip-badge">
+          <text>VIP畅学权益生效中</text>
+        </view>
+        
+        <!-- 章节列表 -->
+        <view
+          v-for="(chapter, index) in chapterList"
+          :key="chapter.id"
+          class="chapter-item"
+          @click="handleChapterClick(chapter)"
+        >
+          <view class="chapter-content-wrapper">
+            <view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
+              <text class="chapter-title">{{ chapter.title }}</text>
+              
+              <!-- 试听标签 -->
+              <wd-tag
+                v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
+                type="success"
+                plain
+                size="small"
+                custom-class="chapter-tag"
+              >
+                试听
+              </wd-tag>
+              
+              <!-- 学习状态标签 -->
+              <template v-if="isPurchased || userVip">
+                <wd-tag
+                  v-if="chapter.isLearned === 0"
+                  type="primary"
+                  plain
+                  size="small"
+                  custom-class="chapter-tag"
+                >
+                  未学
+                </wd-tag>
+                <wd-tag
+                  v-else
+                  type="success"
+                  plain
+                  size="small"
+                  custom-class="chapter-tag"
+                >
+                  已学
+                </wd-tag>
+              </template>
+            </view>
+            
+            <!-- 锁定图标 -->
+            <view v-if="!canAccess(chapter)" class="lock-icon">
+              <wd-icon name="lock-on" size="24px" color="#258feb" />
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 暂无章节 -->
+      <view v-else class="no-chapters">
+        <text>暂无章节内容</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { courseApi } from '@/api/modules/course'
+import type { IChapter, ICatalogue, IVipInfo } from '@/types/course'
+
+interface Props {
+  catalogues: ICatalogue[]
+  userVip: IVipInfo | null
+  showRenewBtn?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  click: [chapter: IChapter],
+  purchase: [catalogue: ICatalogue],
+  renew: [catalogue: ICatalogue],
+  toVip: [catalogue: ICatalogue],
+  change: [index: number]
+}>()
+
+// 当前目录索引
+const currentCatalogueIndex = ref<number>(0)
+// 当前目录
+const currentCatalogue = computed(() => {
+  return props.catalogues[currentCatalogueIndex.value]
+})
+// 当前目录的章节
+const chapterList = ref<IChapter[]>([])
+
+// 显示续费按钮
+const showRenewBtn = ref<boolean>(false)
+
+// 判断目录是否已购买
+const isPurchased = computed(() => {
+  return currentCatalogue.value.isBuy === 1
+})
+
+/**
+ * 选择目录
+ */
+const handleSelect = (index: number) => {
+  if (index === currentCatalogueIndex.value) return
+
+  currentCatalogueIndex.value = index
+
+  getChapters() // 获取章节列表
+  checkRenewPayment() // 检查是否支持复读
+}
+
+/**
+ * 获取当前目录的章节
+ */
+const getChapters = async () => {
+  const res = await courseApi.getCatalogueChapterList(currentCatalogue.value.id)
+  chapterList.value = res.chapterList || []
+}
+
+/**
+ * 检查目录是否支持复读
+ */
+const checkRenewPayment = async () => {
+  if (currentCatalogue.value.isBuy === 0 && !props.userVip) {
+    const renewRes = await courseApi.checkRenewPayment(currentCatalogue.value.id)
+    showRenewBtn.value = renewRes.canRelearn || false
+  } else {
+    showRenewBtn.value = false
+  }
+}
+
+/**
+ * 监听目录变化
+ */
+watch(() => props.catalogues, (newVal: ICatalogue[]) => {
+  if (newVal.length > 0) {
+    currentCatalogueIndex.value = 0
+    getChapters()
+    checkRenewPayment()
+  }
+}, { immediate: true, deep: true })
+
+// 购买
+const handlePurchase = () => {
+  emit('purchase', currentCatalogue.value)
+}
+
+// 去开通vip
+const goToVip = () => {
+  emit('toVip', currentCatalogue.value)
+}
+
+// 续费/复读
+const handleRenew = () => {
+  emit('renew', currentCatalogue.value)
+}
+
+// 领取免费课程
+const handleGetFreeCourse = async () => {
+  emit('getFreeCourse', currentCatalogue.value)
+}
+
+/**
+ * 判断章节是否可以访问
+ */
+const canAccess = (chapter: IChapter): boolean => {
+  // VIP用户可以访问所有章节
+  if (props.userVip) return true
+  
+  // 已购买目录可以访问所有章节
+  if (isPurchased.value) return true
+  
+  // 试听章节可以访问
+  if (chapter.isAudition === 1) return true
+  
+  // 免费课程可以访问
+  if (currentCatalogue.value.type === 0) return true
+  
+  return false
+}
+
+/**
+ * 点击章节
+ */
+const handleChapterClick = (chapter: IChapter, catalogue: ICatalogue) => {
+  if (!isPurchased.value && currentCatalogue.value.type === 0) {
+    uni.showToast({
+      title: '请先领取课程',
+      icon: 'none'
+    })
+    return
+  }
+  if (!canAccess(chapter)) {
+    uni.showToast({
+      title: '请先购买课程',
+      icon: 'none'
+    })
+    return
+  }
+  
+  emit('toDetail', chapter, currentCatalogue.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.course-content-wrapper {
+  background: linear-gradient(108deg, #c3e7ff 0%, #59bafe 100%);
+}
+.catalogue-list {
+  display: flex;
+  align-items: flex-end;
+  padding: 20rpx;
+  padding-bottom: 0;
+  border-radius: 20rpx 20rpx 0 0;
+  margin-top: 20rpx;
+  
+  &.vip-style {
+    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
+    
+    .catalogue-item {
+      background-color: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      border-color: #fff;
+      
+      &.active {
+        background-color: #258feb;
+        color: #fff;
+      }
+    }
+  }
+  
+  .catalogue-item {
+    flex: 1;
+    text-align: center;
+    padding: 16rpx 0;
+    margin-right: 10rpx;
+    border-radius: 20rpx 20rpx 0 0;
+    border: 1px solid #fff;
+    border-bottom: none;
+    background-color: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    transition: all 0.3s;
+    
+    &:last-child {
+      margin-right: 0;
+    }
+    
+    &.active {
+      background-color: #258feb;
+      padding: 20rpx 0;
+      
+      .catalogue-title {
+        font-size: 36rpx;
+        font-weight: bold;
+      }
+    }
+    
+    .catalogue-title {
+      font-size: 30rpx;
+    }
+  }
+}
+
+.chapter-list {
+  padding: 20rpx;
+}
+
+.catalogue-status {
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+  background-color: #fff;
+  
+  .purchased-info {
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 26rpx;
+      line-height: 50rpx;
+    }
+  }
+  
+  .free-course {
+    text-align: center;
+  }
+  
+  .unpurchased-info {
+    .tip-text {
+      display: block;
+      font-size: 26rpx;
+      color: #666;
+      margin-bottom: 20rpx;
+      line-height: 1.6;
+    }
+    
+    .action-btns {
+      display: flex;
+      gap: 20rpx;
+      justify-content: center;
+    }
+  }
+}
+
+.chapter-content {
+  position: relative;
+  padding: 20rpx;
+  border: 4rpx solid #fffffc;
+  background: linear-gradient(52deg, #e8f6ff 0%, #e3f2fe 50%);
+  box-shadow: 0px 0px 10px 0px #89c8e9;
+  border-top-right-radius: 40rpx;
+  border-bottom-left-radius: 40rpx;
+  
+  .vip-badge {
+    display: inline-block;
+    font-size: 24rpx;
+    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
+    color: #fff;
+    padding: 10rpx 20rpx;
+    border-radius: 0 50rpx 50rpx 0;
+    z-index: 1;
+  }
+  
+  .chapter-item {
+    padding: 20rpx 0;
+    border-bottom: 1px solid #fff;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .chapter-content-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      
+      .chapter-info {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 10rpx;
+        
+        &.locked {
+          opacity: 0.6;
+        }
+        
+        .chapter-title {
+          flex: 1;
+          font-size: 28rpx;
+          color: #1e2f3e;
+          line-height: 1.5;
+        }
+        
+        .chapter-tag {
+          flex-shrink: 0;
+        }
+      }
+      
+      .lock-icon {
+        margin-left: 20rpx;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+.no-chapters {
+  text-align: center;
+  padding: 80rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
+</style>
diff --git a/components/course/CourseInfo.vue b/pages/course/details/components/CourseInfo.vue
similarity index 100%
rename from components/course/CourseInfo.vue
rename to pages/course/details/components/CourseInfo.vue
diff --git a/pages/course/details/course.vue b/pages/course/details/course.vue
index c10c816..067cd5d 100644
--- a/pages/course/details/course.vue
+++ b/pages/course/details/course.vue
@@ -16,40 +16,23 @@
     <CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />
 
     <!-- 课程内容包装器 -->
-    <view class="course-content-wrapper">
-      <!-- 目录列表 -->
-      <CatalogueList
-        v-if="catalogueList.length > 0"
-        :catalogues="catalogueList"
-        :currentIndex="currentCatalogueIndex"
-        :userVip="userVip"
-        @change="handleCatalogueChange"
-      />
-
-      <!-- 章节列表 -->
-      <ChapterList
-        v-if="chapterList.length > 0"
-        :chapters="chapterList"
-        :catalogue="currentCatalogue"
-        :userVip="userVip"
-        :showRenewBtn="showRenewBtn"
-        @purchase="handlePurchase"
-        @toVip="goToVip"
-        @renew="handleRenew"
-        @click="handleChapterClick"
-      />
-    </view>
+    <CatalogueList
+      v-if="catalogueList.length > 0"
+      :catalogues="catalogueList"
+      :userVip="userVip"
+      @getFreeCourse="handleGetFreeCourse"
+      @purchase="handlePurchase"
+      @toVip="goToVip"
+      @renew="handleRenew"
+      @toDetail="handleToDetail"
+    />
 
     <!-- 学习进度 -->
     <view class="learning-progress">
       <view class="progress-title">
         <text>{{ $t('courseDetails.progress') }}</text>
       </view>
-      <wd-progress 
-        :percentage="learningProgress" 
-        show-text
-        stroke-width="6"
-      />
+      <wd-progress :percentage="learningProgress" show-text stroke-width="6" />
     </view>
 
     <!-- 相关书籍 -->
@@ -166,30 +149,24 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
-import { useCourseStore } from '@/stores/course'
 import { useUserStore } from '@/stores/user'
 import { courseApi } from '@/api/modules/course'
-import CourseInfo from '@/components/course/CourseInfo.vue'
-import CatalogueList from '@/components/course/CatalogueList.vue'
-import ChapterList from '@/components/course/ChapterList.vue'
+import CourseInfo from './components/CourseInfo.vue'
+import CatalogueList from './components/CatalogueList.vue'
 import GoodsSelector from '@/components/order/GoodsSelector.vue'
 import CommentList from '@/components/comment/CommentList.vue'
 import CommentEditor from '@/components/comment/CommentEditor.vue'
-import NavBar from '@/components/nav-bar/nav-bar.vue'
 import type { ICourseDetail, ICatalogue, IChapter, IVipInfo } from '@/types/course'
 import type { IGoods } from '@/types/order'
 import type { IComment } from '@/types/comment'
 
 // Stores
-const courseStore = useCourseStore()
 const userStore = useUserStore()
 
 // 页面数据
 const courseId = ref<number>(0)
 const courseDetail = ref<ICourseDetail | null>(null)
 const catalogueList = ref<ICatalogue[]>([])
-const currentCatalogueIndex = ref(0)
-const chapterList = ref<IChapter[]>([])
 const userVip = ref<IVipInfo | null>(null)
 const vipModuleList = ref<string[]>([])
 const learningProgress = ref(0)
@@ -202,7 +179,6 @@ const selectedGoods = ref<IGoods | null>(null)
 const showProtocol = ref(false)
 const isFudu = ref(false)
 const fuduCatalogueId = ref<number>(0)
-const showRenewBtn = ref(false)
 
 // 评论相关
 const commentList = ref<IComment[]>([])
@@ -215,14 +191,6 @@ const replyComment = ref<IComment | undefined>(undefined)
 // UI状态
 const scrollTop = ref(0)
 
-/**
- * 当前目录
- */
-const currentCatalogue = computed(() => {
-  if (catalogueList.value.length === 0) return null
-  return catalogueList.value[currentCatalogueIndex.value] || null
-})
-
 /**
  * VIP提示文案
  */
@@ -286,11 +254,6 @@ const loadPageData = async () => {
       const totalProgress = catalogueList.value.reduce((sum, cat) => sum + cat.completion, 0)
       learningProgress.value = Number((totalProgress / catalogueList.value.length).toFixed(2))
     }
-    
-    // 默认选择第一个目录
-    if (catalogueList.value.length > 0) {
-      await switchCatalogue(0)
-    }
   }
   
   // 检查VIP权益
@@ -318,69 +281,50 @@ const checkVipStatus = async () => {
   }
 }
 
-/**
- * 切换目录
- */
-const switchCatalogue = async (index: number) => {
-  currentCatalogueIndex.value = index
-  const catalogue = catalogueList.value[index]
-  
-  // 获取章节列表
-  const res = await courseApi.getCatalogueChapterList(catalogue.id)
-  if (res.code === 0) {
-    chapterList.value = res.chapterList || []
-  }
-  
-  // 检查是否支持复读
-  if (catalogue.isBuy === 0 && !userVip.value) {
-    const renewRes = await courseApi.checkRenewPayment(catalogue.id)
-    showRenewBtn.value = renewRes.canRelearn || false
-  } else {
-    showRenewBtn.value = false
-  }
-}
-
-/**
- * 目录切换事件
- */
-const handleCatalogueChange = (index: number) => {
-  switchCatalogue(index)
-}
-
 /**
  * 点击章节
  */
-const handleChapterClick = (chapter: IChapter) => {
-  const noRecored = chapter.isAudition === 1 && currentCatalogue.value?.isBuy === 0 && !userVip.value
+const handleToDetail = (chapter: IChapter, catalogue: ICatalogue) => {
+  const noRecored = chapter.isAudition === 1 && catalogue.isBuy === 0 && !userVip.value
   
   uni.navigateTo({
     url: `/pages/course/details/chapter?id=${chapter.id}&courseId=${courseId.value}&courseTitle=${courseDetail.value?.title}&title=${chapter.title}&noRecored=${noRecored}`
   })
 }
 
+/**
+ * 去开通vip
+ */
+const goToVip = () => {
+  uni.navigateTo({
+    url: '/pages/vip/course'
+  })
+}
+
 /**
  * 领取免费课程
  */
-const handleGetFreeCourse = async () => {
-  if (!currentCatalogue.value) return
+const handleGetFreeCourse = async (catalogue: ICatalogue) => {
+  if (!catalogue) return
   
-  uni.showLoading({ title: '领取中...' })
-  const res = await courseApi.startStudyForMF(currentCatalogue.value.id)
+  const res = await courseApi.startStudyForMF(catalogue.id)
   if (res.code === 0) {
     uni.showToast({ title: '领取成功', icon: 'success' })
     // 刷新页面数据
-    await loadPageData()
+    loadPageData()
+  } else {
+    uni.showToast({ title: res.msg || '领取失败', icon: 'none' })
   }
 }
 
 /**
  * 购买课程
  */
-const handlePurchase = async () => {
-  if (!currentCatalogue.value) return
+const handlePurchase = async (catalogue: ICatalogue) => {
+  if (!catalogue) return
   
   isFudu.value = false
-  const res = await courseApi.getProductListForCourse(currentCatalogue.value.id)
+  const res = await courseApi.getProductListForCourse(catalogue.id)
   if (res.code === 0 && res.productList.length > 0) {
     goodsList.value = res.productList
     showGoodsSelector.value = true
@@ -393,17 +337,17 @@ const handlePurchase = async () => {
  * 续费/复读
  */
 const handleRenew = async () => {
-  if (!currentCatalogue.value) return
+  // if (!currentCatalogue.value) return
   
-  isFudu.value = true
-  fuduCatalogueId.value = currentCatalogue.value.id
-  const res = await courseApi.getRenewProductList(currentCatalogue.value.id)
-  if (res.code === 0 && res.productList.length > 0) {
-    goodsList.value = res.productList
-    showGoodsSelector.value = true
-  } else {
-    uni.showToast({ title: '暂无复读方案', icon: 'none' })
-  }
+  // isFudu.value = true
+  // fuduCatalogueId.value = currentCatalogue.value.id
+  // const res = await courseApi.getRenewProductList(currentCatalogue.value.id)
+  // if (res.code === 0 && res.productList.length > 0) {
+  //   goodsList.value = res.productList
+  //   showGoodsSelector.value = true
+  // } else {
+  //   uni.showToast({ title: '暂无复读方案', icon: 'none' })
+  // }
 }
 
 /**
@@ -443,15 +387,6 @@ const confirmPurchase = () => {
   })
 }
 
-/**
- * 跳转到VIP页面
- */
-const goToVip = () => {
-  uni.navigateTo({
-    url: '/pages/vip/course'
-  })
-}
-
 /**
  * 跳转到书籍详情
  */
@@ -698,10 +633,6 @@ onReachBottom(() => {
   }
 }
 
-.course-content-wrapper {
-  background: linear-gradient(108deg, #c3e7ff 0%, #59bafe 100%);
-}
-
 .learning-progress {
   padding: 20rpx;
   background-color: #fff;
diff --git a/pages/course/index.vue b/pages/course/index.vue
index 124ff46..5d58734 100644
--- a/pages/course/index.vue
+++ b/pages/course/index.vue
@@ -326,10 +326,6 @@ const getSociologyCateList = async () => {
  * 终极分类点击处理
  */
 const curseClickJump = (item: IMedicalTag) => {
-  // uni.showToast({
-  //   title: '课程分类列表正在开发中，现在还不能跳转',
-  //   icon: 'none'
-  // })
   uni.navigateTo({
     url: `/pages/course/list/category?id=${item.id}&title=${item.title}&pid=${item.pid}&subject=${selectedFirstLevel.value}`
   })
@@ -385,15 +381,9 @@ const getNewsList = async () => {
  * 新闻点击处理
  */
 const newsClick = (item: INews) => {
-  if (item.type === 1 && item.url) {
-    uni.navigateTo({
-      url: `/pages/news/newsForwebview?newsId=${item.id}&url=${item.url}&type=${item.type}`
-    })
-  } else {
-    uni.navigateTo({
-      url: `/pages/news/news?newsId=${item.id}&url=${item.url}&type=${item.type}`
-    })
-  }
+  uni.navigateTo({
+    url: `/pages/news/details?newsId=${item.id}&url=${item.url}&type=${item.type}`
+  })
 }
 
 // 精彩试听
@@ -846,7 +836,7 @@ $border-color: #eeeeee;
 // 观看记录和试听样式
 .learnBox {
   background-color: #fff;
-  margin: 10px 5px 20px;
+  margin: 10px 5px;
   border-radius: 20rpx;
   padding: 10px;
   box-shadow: 0px 0px 10px 0px rgba(167, 187, 228, 0.3);
diff --git a/static/nobg.jpg b/static/nobg.jpg
new file mode 100644
index 0000000..e2580cd
Binary files /dev/null and b/static/nobg.jpg differ
diff --git a/stores/course.ts b/stores/course.ts
deleted file mode 100644
index b38dc26..0000000
--- a/stores/course.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-// stores/course.ts
-import { defineStore } from 'pinia'
-import { courseApi } from '@/api/modules/course'
-import type { ICourseDetail, ICatalogue, IChapter, IVipInfo } from '@/types/course'
-
-interface CourseState {
-  currentCourse: ICourseDetail | null
-  catalogueList: ICatalogue[]
-  currentCatalogueIndex: number
-  chapterList: IChapter[]
-  userVip: IVipInfo | null
-  learningProgress: number
-}
-
-export const useCourseStore = defineStore('course', {
-  state: (): CourseState => ({
-    currentCourse: null,
-    catalogueList: [],
-    currentCatalogueIndex: 0,
-    chapterList: [],
-    userVip: null,
-    learningProgress: 0,
-  }),
-
-  getters: {
-    /**
-     * 获取当前选中的目录
-     */
-    currentCatalogue: (state): ICatalogue | null => {
-      if (state.catalogueList.length === 0) return null
-      return state.catalogueList[state.currentCatalogueIndex] || null
-    },
-
-    /**
-     * 判断当前目录是否已购买
-     */
-    isCurrentCataloguePurchased: (state): boolean => {
-      const catalogue = state.catalogueList[state.currentCatalogueIndex]
-      return catalogue ? catalogue.isBuy === 1 : false
-    },
-
-    /**
-     * 判断用户是否为VIP
-     */
-    isVip: (state): boolean => {
-      return state.userVip !== null
-    },
-  },
-
-  actions: {
-    /**
-     * 获取课程详情
-     * @param courseId 课程ID
-     */
-    async fetchCourseDetail(courseId: number) {
-      try {
-        const res = await courseApi.getCourseDetail(courseId)
-        if (res.code === 0 && res.data) {
-          this.currentCourse = res.data.course
-          this.catalogueList = res.data.catalogues || []
-          
-          // 计算学习进度
-          if (this.catalogueList.length > 0) {
-            const totalProgress = this.catalogueList.reduce((sum, cat) => sum + cat.completion, 0)
-            this.learningProgress = Number((totalProgress / this.catalogueList.length).toFixed(2))
-          } else {
-            this.learningProgress = 0
-          }
-        }
-        return res
-      } catch (error) {
-        console.error('获取课程详情失败:', error)
-        throw error
-      }
-    },
-
-    /**
-     * 切换目录
-     * @param index 目录索引
-     */
-    async switchCatalogue(index: number) {
-      if (index < 0 || index >= this.catalogueList.length) {
-        console.warn('目录索引超出范围')
-        return
-      }
-      
-      this.currentCatalogueIndex = index
-      const catalogue = this.catalogueList[index]
-      
-      // 获取该目录的章节列表
-      await this.fetchChapterList(catalogue.id)
-    },
-
-    /**
-     * 获取章节列表
-     * @param catalogueId 目录ID
-     */
-    async fetchChapterList(catalogueId: number) {
-      try {
-        const res = await courseApi.getCatalogueChapterList(catalogueId)
-        if (res.code === 0) {
-          this.chapterList = res.chapterList || []
-        }
-        return res
-      } catch (error) {
-        console.error('获取章节列表失败:', error)
-        this.chapterList = []
-        throw error
-      }
-    },
-
-    /**
-     * 检查用户VIP权益
-     * @param courseId 课程ID
-     */
-    async checkVipStatus(courseId: number) {
-      try {
-        const res = await courseApi.checkCourseVip(courseId)
-        if (res.code === 0) {
-          this.userVip = res.userVip || null
-        }
-        return res
-      } catch (error) {
-        console.error('检查VIP权益失败:', error)
-        this.userVip = null
-        throw error
-      }
-    },
-
-    /**
-     * 重置课程状态
-     */
-    resetCourseState() {
-      this.currentCourse = null
-      this.catalogueList = []
-      this.currentCatalogueIndex = 0
-      this.chapterList = []
-      this.userVip = null
-      this.learningProgress = 0
-    },
-  },
-})
diff --git a/style/tailwind.css b/style/tailwind.css
index f87c03a..4566267 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -8,7 +8,6 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
-    --color-white: #fff;
     --spacing: 0.25rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -212,18 +211,12 @@
       max-width: 96rem;
     }
   }
-  .mr-1 {
-    margin-right: calc(var(--spacing) * 1);
-  }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
+  .mb-2\! {
+    margin-bottom: calc(var(--spacing) * 2) !important;
   }
   .ml-1\! {
     margin-left: calc(var(--spacing) * 1) !important;
   }
-  .ml-2 {
-    margin-left: calc(var(--spacing) * 2);
-  }
   .ml-2\.5\! {
     margin-left: calc(var(--spacing) * 2.5) !important;
   }
@@ -251,24 +244,6 @@
   .table {
     display: table;
   }
-  .h-20 {
-    height: calc(var(--spacing) * 20);
-  }
-  .h-\[80px\] {
-    height: 80px;
-  }
-  .h-\[80rpx\] {
-    height: 80rpx;
-  }
-  .w-20 {
-    width: calc(var(--spacing) * 20);
-  }
-  .w-\[80px\] {
-    width: 80px;
-  }
-  .w-\[80rpx\] {
-    width: 80rpx;
-  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -278,9 +253,6 @@
   .flex-shrink {
     flex-shrink: 1;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -290,34 +262,10 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
-  .items-center {
-    align-items: center;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .bg-\[blue\] {
-    background-color: blue;
-  }
-  .bg-\[red\] {
-    background-color: red;
-  }
-  .bg-\[transparent\] {
-    background-color: transparent;
-  }
-  .bg-white {
-    background-color: var(--color-white);
-  }
-  .p-0 {
-    padding: calc(var(--spacing) * 0);
-  }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
@@ -327,12 +275,6 @@
   .pt-10 {
     padding-top: calc(var(--spacing) * 10);
   }
-  .pt-\[40px\] {
-    padding-top: 40px;
-  }
-  .pb-0 {
-    padding-bottom: calc(var(--spacing) * 0);
-  }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
@@ -354,32 +296,13 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .font-\[26rpx\] {
-    --tw-font-weight: 26rpx;
-    font-weight: 26rpx;
-  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
-  .text-\[\#000\] {
-    color: #000;
-  }
   .text-\[\#7dc1f0\] {
     color: #7dc1f0;
   }
-  .text-\[\#fff\] {
-    color: #fff;
-  }
-  .text-\[\'10px\'\] {
-    color: '10px';
-  }
-  .text-\[\'12px\'\] {
-    color: '12px';
-  }
-  .text-\[26rpx\] {
-    color: 26rpx;
-  }
   .text-\[cadetblue\] {
     color: cadetblue;
   }
@@ -399,17 +322,6 @@
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .underline {
-    text-decoration-line: underline;
-  }
-  .shadow-\[0_0_10px_rgba\(0\,0\,0\,0\.1\)\] {
-    --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(0,0,0,0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[0_0_10px_rgba\(0\,0\,0\,0\.05\)\] {
-    --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(0,0,0,0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);