更新：课程详情的初步代码

components/course/CatalogueList.vue

@@ -0,0 +1,96 @@
+<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>