diff --git a/pages.json b/pages.json
index eda9f0c..cca5aea 100644
--- a/pages.json
+++ b/pages.json
@@ -985,7 +985,8 @@
 		{
 			"path": "pages/my/myFavorite",
 			"style": {
-				"navigationBarTitleText": "我的收藏"
+				"navigationBarTitleText": "我的收藏",
+				"navigationStyle": "custom"
 			}
 		}
 
diff --git a/pages/home/components/skill-card.vue b/pages/home/components/skill-card.vue
new file mode 100644
index 0000000..0b0ee2c
--- /dev/null
+++ b/pages/home/components/skill-card.vue
@@ -0,0 +1,190 @@
+<template>
+  <view class="skill-item" @click="handleClick">
+    <view class="cover-box">
+      <image class="cover" :src="item.coverSrc" mode="aspectFill"></image>
+      <image 
+        class="play-icon" 
+        src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5c1ddfef-a200-424a-a9dc-03d9395568f6.png"
+      ></image>
+    </view>
+    <view class="skill-info">
+      <view class="skill-title line-2">{{ item.title }}</view>
+      <view class="skill-type" :class="typeClass">
+        <image class="type-icon" :src="item.typeIcon || defaultTypeIcon"></image>
+        <text class="type-text">{{ item.type || '平台课程' }}</text>
+      </view>
+      <view class="skill-stats">
+        <image 
+          class="view-icon" 
+          src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2409b64a-56bb-4d9e-a4cc-5b3444fcf097.png"
+        ></image>
+        {{ formatViews(item.views) }}观看 · {{ item.time }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'SkillItem',
+  props: {
+    item: {
+      type: Object,
+      required: true,
+      default: () => ({
+        id: null,
+        title: '',
+        coverSrc: '',
+        type: '平台课程',
+        views: 0,
+        time: '',
+        typeIcon: ''
+      })
+    }
+  },
+  data() {
+    return {
+      defaultTypeIcon: 'https://dummyimage.com/30x30/ccc/fff.png&text=I'  // 用于占位
+    }
+  },
+  computed: {
+    typeClass() {
+      const typeMap = {
+        '平台课程': 'platform-course',
+        '脸缘品牌': 'brand-course',
+        '品牌课程': 'brand-course'
+      }
+      return typeMap[this.item.type] || 'platform-course'
+    }
+  },
+  methods: {
+    formatViews(views) {
+      if (!views) return '0'
+      if (views >= 10000) {
+        return (views / 10000).toFixed(1) + 'w'
+      }
+      return views.toString()
+    },
+    handleClick() {
+      // 跳转到技能/课程详情页
+      if (this.item.id) {
+        uni.navigateTo({
+          url: `/pages/skill/detail?id=${this.item.id}`
+        })
+      } else {
+        uni.showToast({ title: '详情页开发中', icon: 'none' })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.skill-item {
+  display: flex;
+  margin-bottom: 20rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .cover-box {
+    position: relative;
+    width: 224rpx;
+    height: 126rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+    margin-right: 24rpx;
+    flex-shrink: 0;
+
+    .cover { 
+      width: 100%; 
+      height: 100%; 
+    }
+    
+    .play-icon {
+      position: absolute;
+      top: 50%; 
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 39rpx; 
+      height: 39rpx;
+    }
+  }
+
+  .skill-info {
+    flex: 1;
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .skill-title {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 28rpx;
+      color: #333;
+      font-weight: 400;
+      line-height: 40rpx;
+    }
+    
+    .skill-type {
+      display: flex;
+      align-items: center;
+      font-size: 22rpx;
+      margin-top: 10rpx;
+      
+      .type-icon { 
+        width: 26rpx; 
+        height: 26rpx; 
+        margin-right: 8rpx; 
+        border-radius: 50%;
+      }
+      
+      .type-text {
+        border-radius: 7rpx;
+        font-weight: 400;
+        font-size: 24rpx;
+        line-height: 33rpx;
+        padding: 2rpx 10rpx;
+      }
+      
+      &.platform-course .type-text {
+        background: #f9d3d760;
+        color: #E55463;
+      }
+      
+      &.brand-course .type-text {
+        background: #e6f7ff;
+        color: #1890ff;
+      }
+    }
+    
+    .skill-stats {
+      font-size: 22rpx;
+      color: #999;
+      margin-top: 10rpx;
+      display: flex;
+      align-items: center;
+      
+      .view-icon {
+        width: 26rpx;
+        height: 22rpx;
+        margin-right: 8rpx;
+        margin-top: -2rpx;
+      }
+    }
+  }
+}
+
+.line-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+</style>
\ No newline at end of file
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 28f631d..4a21518 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -129,20 +129,11 @@
         <view class="header-right">更多技能 <image class="more-right-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ee119e24-1cb2-43df-86e6-61af8e9fd0ad.png"></image> </view>
       </view>
       <view class="skill-list">
-        <view class="skill-item" v-for="(item, index) in skills" :key="index">
-          <view class="cover-box">
-            <image class="cover" :src="item.coverSrc"></image>
-            <image class="play-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5c1ddfef-a200-424a-a9dc-03d9395568f6.png"></image>
-          </view>
-          <view class="skill-info">
-            <view class="skill-title line-2">{{ item.title }}</view>
-            <view class="skill-type" :class="item.typeClass">
-              <image class="type-icon" src="https://dummyimage.com/30x30/ccc/fff.png&text=I"></image>
-              <text class="type-text">{{ item.type }}</text>
-            </view>
-            <view class="skill-stats"> <image class="view-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2409b64a-56bb-4d9e-a4cc-5b3444fcf097.png"></image>{{ item.views }}观看 · {{ item.time }}</view>
-          </view>
-        </view>
+        <skill-card 
+          v-for="(item, index) in skills" 
+          :key="index" 
+          :item="item"
+        ></skill-card>
       </view>
     </view>
 
@@ -158,6 +149,7 @@ import request from "@/utils/request";
 import filters from "./components/filters.vue";
 import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
 import BrandCard from "./components/brand-card.vue";
+import SkillCard from "./components/skill-card.vue";
 
 export default {
   components: {
@@ -165,7 +157,8 @@ export default {
     projectTabs,
     CustomNavbar,
     TabBar,
-    BrandCard
+    BrandCard,
+    SkillCard
   },
   data() {
     return {
diff --git a/pages/my/my.vue b/pages/my/my.vue
index 9e3c59a..51468d0 100644
--- a/pages/my/my.vue
+++ b/pages/my/my.vue
@@ -175,7 +175,7 @@ export default {
 				},
 				{
 					title: "店铺装修",
-					url: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4b558456-2e38-4185-8713-d1f0e6645820.png",
+					url: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4b558456-2e38-4185-8713-d1f0e6645820.png",
 					// https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e6e72039-eec4-414c-8a86-aad404602962.png
 					path: "/pages/shop/staff/distribution-service",
 					go_id_type: 1,
diff --git a/pages/my/myFavorite.vue b/pages/my/myFavorite.vue
index 87b6899..af8a226 100644
--- a/pages/my/myFavorite.vue
+++ b/pages/my/myFavorite.vue
@@ -1,22 +1,666 @@
 <template>
-	<view>
-		
-	</view>
+  <view class="collection-page">
+
+    <custom-navbar title="我的收藏" :showBack="true" backgroundColor="#FFFFFF" :show-headle="true" borderBottom="none"
+      headleSrc="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/51ebca5d-95c5-4fb8-8aa3-560a79100d25.png" @onHeadleClick="addAddress">
+    </custom-navbar>
+    
+    <view class="nav-placeholder" :style="{ height: navHeight + 'px' }"></view>
+
+    <view class="tab-bar-wrap" :style="{ top: navHeight + 'px' }">
+      <view class="tab-bar">
+        <view class="tab-items">
+          <view 
+            class="tab-item" 
+            :class="{ active: currentTab === 'brand' }"
+            @tap="switchTab('brand')"
+          >
+            收藏的品牌
+          </view>
+          <view 
+            class="tab-item" 
+            :class="{ active: currentTab === 'course' }"
+            @tap="switchTab('course')"
+          >
+            收藏的课程
+          </view>
+        </view>
+        <view class="filter-area" @tap="toggleFilterPanel">
+          <text class="filter-text">筛选</text>
+          <image class="filter-icon" :src="filterIcon" mode="aspectFit" :class="{ 'rotate': filterVisible }"></image>
+        </view>
+      </view>
+    </view>
+
+    <view class="filter-panel" :class="{ 'show': filterVisible }" :style="{ top: filterTop + 'px' }" catchtouchmove="true">
+      <view class="filter-mask" @tap="closeFilterPanel"></view>
+      <view class="filter-container">
+        
+        <scroll-view scroll-y class="filter-scroll" v-if="currentTab === 'brand'">
+          <view class="filter-group" v-for="group in brandFilterData" :key="group.id">
+            <view class="group-title">{{ group.title }}</view>
+            <view class="pill-list">
+              <view 
+                class="pill-item" 
+                v-for="sub in group.children" 
+                :key="sub.id"
+                :class="{ active: selectedSecondIds.includes(sub.id) }"
+                @tap="toggleSecondSelect(sub.id)"
+              >
+                {{ sub.title }}
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+
+        <view v-else class="course-filter">
+          <view 
+            class="course-type-item"
+            :class="{ active: selectedCourseType === 'platform' }"
+            @tap="selectCourseType('platform')"
+          >
+            平台课程
+          </view>
+          <view 
+            class="course-type-item"
+            :class="{ active: selectedCourseType === 'brand' }"
+            @tap="selectCourseType('brand')"
+          >
+            品牌课程
+          </view>
+        </view>
+
+        <view class="filter-footer">
+          <view class="reset-btn" @tap="resetFilter">重置</view>
+          <view class="confirm-btn" @tap="applyFilterAndClose">确定</view>
+        </view>
+      </view>
+    </view>
+
+    <view class="collection-content" v-if="currentTab === 'brand'">
+      <view class="brand-grid" v-if="filteredBrandList.length > 0">
+        <brand-card 
+          class="brand-card-wrap"
+          v-for="(item, index) in filteredBrandList" 
+          :key="index" 
+          :item="item"
+          :tagKeys="item.tagKeys"
+          @click="goToBrandDetail(item)"
+        ></brand-card>
+      </view>
+      <view class="empty-state" v-else>
+        <image class="empty-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/da814ede-1adc-4f90-8cdf-5357a12fab27.png"></image>
+      </view>
+    </view>
+
+    <view class="collection-content" v-else>
+      <view class="course-list" v-if="filteredCourseList.length > 0">
+        <skill-card 
+          v-for="(item, index) in filteredCourseList" 
+          :key="index" 
+          :item="item"
+        ></skill-card>
+      </view>
+      <view class="empty-state" v-else>
+        <image class="empty-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/da814ede-1adc-4f90-8cdf-5357a12fab27.png"></image>
+      </view>
+    </view>
+
+    <view style="height: 120rpx;"></view>
+    <TabBar :selected="3"></TabBar>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
+import TabBar from "@/components/tabbar/tabbar.vue"
+import BrandCard from "@/pages/home/components/brand-card.vue"
+import SkillCard from "@/pages/home/components/skill-card.vue" 
+import request from "@/utils/request"
+
+// 数据模式开关：true=调用真实接口，false=使用模拟数据
+const USE_REAL_API = true
+
+export default {
+  components: {
+    TabBar,
+    BrandCard,
+    SkillCard
+  },
+  data() {
+    return {
+      navHeight: 0,    // 动态计算的导航栏高度
+      filterTop: 0,    // 动态计算的筛选框顶部起点
+      
+      currentTab: 'brand',
+      // 筛选相关
+      filterVisible: false,
+      
+      // 品牌筛选下拉数据 (合并一级和二级)
+      brandFilterData: [],
+      selectedSecondIds: [],   // 选中的二级ID数组
+      
+      // 课程筛选
+      selectedCourseType: '',  // 'platform' 或 'brand'
+      // 原始数据（收藏的数据）
+      rawBrandList: [],
+      rawCourseList: [],
+      // 展示数据（过滤后）
+      filteredBrandList: [],
+      filteredCourseList: []
+    }
+  },
+  computed: {
+    filterIcon() {
+      // 这里的图标链接可以统一成一个，配合CSS的旋转动画更好看
+      return 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png'
+    }
+  },
+  onLoad() {
+    // 精准计算吸顶高度与下拉框起点，防止蒙版遮挡白色的Tab区
+    const sysInfo = uni.getSystemInfoSync()
+    const sbh = sysInfo.statusBarHeight || 0
+    this.navHeight = sbh 
+    // Tab栏自身的高度大约为 106rpx，转化为 px 叠加上去
+    this.filterTop = this.navHeight + uni.upx2px(106)
+
+    this.loadFilterCategories()
+    this.loadData()
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    addAddress() {
+      // 外部方法占位
+    },
+    switchTab(tab) {
+      if (this.currentTab === tab) return
+      this.currentTab = tab
+      // 重置筛选（不同tab筛选条件独立）
+      if (tab === 'brand') {
+        this.resetBrandFilter()
+      } else {
+        this.resetCourseFilter()
+      }
+      this.loadData()
+      this.closeFilterPanel()
+    },
+    // 筛选面板控制
+    toggleFilterPanel() {
+      this.filterVisible = !this.filterVisible
+    },
+    closeFilterPanel() {
+      this.filterVisible = false
+    },
+    
+    // 加载一级分类并自动组装其对应的二级分类，兼容 state === 1
+    async loadFilterCategories() {
+      try {
+        const syrId = uni.getStorageSync('syrId') || 1; 
+        const res = await request.post('/sj/firstclass', { id: syrId })
+        if ((res.code === 200 || res.state === 1) && res.data) {
+          const firstClasses = res.data;
+          
+          // 并发请求所有的二级分类
+          const promises = firstClasses.map(async (first) => {
+            try {
+              const subRes = await request.post('/sj/secondclass', { id: first.id })
+              return {
+                id: first.id,
+                title: first.title,
+                children: ((subRes.code === 200 || subRes.state === 1) && subRes.data) ? subRes.data : []
+              }
+            } catch(e) {
+              return { id: first.id, title: first.title, children: [] }
+            }
+          });
+          
+          const filterData = await Promise.all(promises);
+          // 过滤掉没有子分类的项，避免面板出现光秃秃的标题
+          this.brandFilterData = filterData.filter(group => group.children.length > 0);
+        } else {
+          this.brandFilterData = []
+        }
+      } catch (error) {
+        console.error('获取分类字典失败', error)
+      }
+    },
+
+    toggleSecondSelect(secId) {
+      const index = this.selectedSecondIds.indexOf(secId)
+      if (index === -1) {
+        this.selectedSecondIds.push(secId)
+      } else {
+        this.selectedSecondIds.splice(index, 1)
+      }
+    },
+    // 课程筛选
+    selectCourseType(type) {
+      // 点击已选中的则取消选中
+      if(this.selectedCourseType === type){
+        this.selectedCourseType = ''
+      }else{
+        this.selectedCourseType = type
+      }
+    },
+    // 重置品牌筛选
+    resetBrandFilter() {
+      this.selectedSecondIds = []
+      this.applyBrandFilter()
+    },
+    resetCourseFilter() {
+      this.selectedCourseType = ''
+      this.applyCourseFilter()
+    },
+    resetFilter() {
+      if (this.currentTab === 'brand') {
+        this.resetBrandFilter()
+      } else {
+        this.resetCourseFilter()
+      }
+    },
+    applyFilterAndClose() {
+      if (this.currentTab === 'brand') {
+        this.applyBrandFilter()
+      } else {
+        this.applyCourseFilter()
+      }
+      this.closeFilterPanel()
+    },
+    // 品牌过滤逻辑（根据二级分类ID相交判断）
+    applyBrandFilter() {
+      if (!this.rawBrandList.length) {
+        this.filteredBrandList = []
+        return
+      }
+      if (this.selectedSecondIds.length === 0) {
+        this.filteredBrandList = [...this.rawBrandList]
+      } else {
+        this.filteredBrandList = this.rawBrandList.filter(brand => {
+          return brand.secondClassIds && brand.secondClassIds.some(id => this.selectedSecondIds.includes(id))
+        })
+      }
+    },
+    // 课程过滤逻辑（根据课程类型）
+    applyCourseFilter() {
+      if (!this.rawCourseList.length) {
+        this.filteredCourseList = []
+        return
+      }
+      if (!this.selectedCourseType) {
+        this.filteredCourseList = [...this.rawCourseList]
+      } else {
+        this.filteredCourseList = this.rawCourseList.filter(course => {
+          if (this.selectedCourseType === 'platform') return course.type === '平台课程'
+          if (this.selectedCourseType === 'brand') return course.type === '品牌课程'
+          return true
+        })
+      }
+    },
+    // 加载原始数据（根据当前Tab）
+    loadData() {
+      if (this.currentTab === 'brand') {
+        this.loadBrandList()
+      } else {
+        this.loadCourseList()
+      }
+    },
+    async loadBrandList() {
+      if (USE_REAL_API) {
+        await this.fetchRealBrandList()
+      } else {
+        this.mockBrandList()
+      }
+      this.applyBrandFilter()
+    },
+    async loadCourseList() {
+      if (USE_REAL_API) {
+        await this.fetchRealCourseList()
+      } else {
+        this.mockCourseList()
+      }
+      this.applyCourseFilter()
+    },
+
+    // ============ 真实接口调用 ============
+    async fetchRealBrandList() {
+      try {
+        const res = await request.post('/sj/brand/list', { page: 1, limit: 100 })
+        if ((res.code === 200 || res.state === 1) && res.data && res.data.list) {
+          const collectedBrands = res.data.list.filter(item => item.collect_state === 1)
+          this.rawBrandList = collectedBrands.map(item => {
+            let tags = []
+            if (item.franchise_state === 1) tags.push('franchise')
+            if (item.student_state === 1) tags.push('recruit')
+            if (tags.length === 0) tags.push('more') 
+            
+            return {
+              id: item.id,
+              name: item.name,
+              bgSrc: item.cover_img || 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/default.jpg',
+              avatar: item.logo_img || 'https://dummyimage.com/100x100/ccc/fff.png&text=Avatar',
+              tagKeys: tags,
+              secondClassIds: item.second_class_ids ? item.second_class_ids.split(',').map(Number) : []
+            }
+          })
+        } else {
+          this.rawBrandList = []
+        }
+      } catch (error) {
+        console.error('获取品牌收藏失败', error)
+      }
+    },
+    async fetchRealCourseList() {
+      try {
+        const res = await request.post('/sj/skill/list', { page: 1, limit: 100 })
+        if ((res.code === 200 || res.state === 1) && res.data && res.data.list) {
+          const collectedCourses = res.data.list.filter(item => item.collect_state === 1)
+          this.rawCourseList = collectedCourses.map(item => {
+            return {
+              id: item.id,
+              title: item.name,
+              coverSrc: item.cover_img,
+              type: item.link_name || (item.link_type === 1 ? '平台课程' : '品牌课程'),
+              link_type: item.link_type,
+              views: item.browse_num || 0,
+              time: item.create_time ? this.formatTimeAgo(item.create_time) : '', 
+              typeIcon: item.link_logo || ''
+            }
+          })
+        } else {
+          this.rawCourseList = []
+        }
+      } catch (error) {
+        console.error('获取课程收藏失败', error)
+      }
+    },
+
+    formatTimeAgo(timeStr) {
+      const now = new Date()
+      const time = new Date(timeStr.replace(/-/g, '/'))
+      const diff = Math.floor((now - time) / 1000)
+      if (diff < 3600) return Math.floor(diff / 60) + '分钟前'
+      if (diff < 86400) return Math.floor(diff / 3600) + '小时前'
+      if (diff < 604800) return Math.floor(diff / 86400) + '天前'
+      return timeStr.split(' ')[0]
+    },
+    goToBrandDetail(item) {
+      if (item.id) {
+        uni.navigateTo({ url: `/pages/brand/detail?id=${item.id}` })
+      }
+    },
+
+    // ============ 模拟数据兜底 ============
+    mockBrandList() {
+      this.rawBrandList = [
+        {
+          id: 1, name: '脸缘品牌', bgSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg',
+          avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg',
+          tagKeys: ['franchise', 'recruit'], secondClassIds: [76, 77]
+        },
+        {
+          id: 2, name: '美肌工坊', bgSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg',
+          avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg',
+          tagKeys: ['franchise'], secondClassIds: [78]
+        },
+        {
+          id: 3, name: '悦容堂', bgSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg',
+          avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg',
+          tagKeys: ['recruit'], secondClassIds: [201, 202]
+        }
+      ]
+    },
+    mockCourseList() {
+      this.rawCourseList = [
+        { id: 1, title: '穿戴甲的操作视频扫码验券操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', views: 836000, time: '7小时前' },
+        { id: 2, title: '全身SPA的操作视频操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', views: 2344, time: '3天前' },
+        { id: 3, title: '高级面部护理手法详解', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', views: 56700, time: '1周前' }
+      ]
+    }
+  }
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.collection-page {
+  min-height: 100vh;
+  background: #fff;
+}
 
+/* 将页面左右 padding 转移到内容区，保证 Tab 背景贯穿全屏 */
+.tab-bar-wrap {
+  position: sticky; /* 吸顶，保证滑动页面时一直显示在最前面 */
+  background: #fff;
+  padding: 10rpx 24rpx;
+  z-index: 101;
+}
+
+.tab-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: transparent;
+  padding: 10rpx 0;
+  
+  .tab-items {
+    display: flex;
+    align-items: center;
+    
+    .tab-item {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: #777777;
+      background: #f5f5f5;
+      border-radius: 27rpx;
+      margin-right: 40rpx;
+      padding: 9rpx 24rpx;
+      transition: all 0.3s ease;
+      
+      &.active {
+        color: #FF4767;
+        background: #FFECEF;
+        border: 1rpx solid #FFB0BD;
+		border-radius: 29rpx;
+      }
+    }
+  }
+  
+  .filter-area {
+    display: flex;
+    align-items: center;
+    padding: 10rpx 0;
+    
+    .filter-text {
+      font-size: 24rpx;
+      color: #666666;
+      margin-right: 6rpx;
+    }
+    
+    .filter-icon {
+      width: 16rpx;
+      height: 10rpx;
+      transition: transform 0.3s ease;
+      /* 展开时图标倒转 */
+      &.rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+/* 核心抽屉动画布局 */
+.filter-panel {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100; /* 低于 Tab区的101，保证隐藏时躲在其后 */
+  pointer-events: none; /* 面板关闭时，穿透点击到底部列表 */
+  overflow: hidden; /* 防止抽屉向上滑出时外溢 */
+
+  &.show {
+    pointer-events: auto; /* 打开时恢复点击拦截 */
+    .filter-mask {
+      opacity: 1;
+    }
+    .filter-container {
+      transform: translateY(50rpx); /* 滑出 */
+    }
+  }
+
+  .filter-mask {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.4);
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+  
+  .filter-container {
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    background: #fff;
+    border-radius: 0 0 30rpx 30rpx;
+    padding: 40rpx 30rpx;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
+    transform: translateY(-100%); /* 默认隐藏在上方（即Tab背后） */
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  }
+}
+
+/* 垂直分组设计的样式（图3） */
+.filter-scroll {
+  max-height: 50vh;
+}
+.filter-group {
+  margin-bottom: 30rpx;
+
+  .group-title {
+    font-weight: 500;
+	font-size: 28rpx;
+	color: #333333;
+	line-height: 40rpx;
+    margin-bottom: 20rpx;
+  }
+
+  .pill-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20rpx; 
+  }
+}
+
+/* 通用胶囊按钮 */
+.pill-item {
+  width: calc(25% - 16rpx); /* 25%是一行四个，减去间距 */
+  height: 58rpx;
+  background: #F5F5F5;
+  font-weight: 400;
+	font-size: 26rpx;
+	color: #333333;
+	line-height: 37rpx;
+  
+  /* 使用 flex 居中 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  border-radius: 12rpx;
+  transition: all 0.3s;
+  box-sizing: border-box; /* 防止 padding 会撑大盒子 */
+  
+  &.active {
+    background: #FFF0F2;
+    color: #FF4767;
+    border: 1rpx solid #FFB0BD;
+  }
+}
+
+.course-filter {
+  display: flex;
+  gap: 20rpx;
+  /* padding: 20rpx 0 40rpx; */
+  
+  .course-type-item {
+    background: #F5F5F5;
+    color: #666666;
+    font-size: 26rpx;
+    padding: 12rpx 40rpx;
+    border-radius: 12rpx;
+    
+    &.active {
+      background: #FFF0F2;
+      color: #FF4767;
+    }
+  }
+}
+
+.filter-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  /* border-top: 1rpx solid #F5F5F5; */
+  
+  .reset-btn, .confirm-btn {
+    width: 47%;
+    text-align: center;
+    padding: 20rpx 0;
+    border-radius: 40rpx;
+    font-size: 28rpx;
+  }
+  
+  .reset-btn {
+    background: #F5F5F5;
+    color: #666;
+  }
+  
+  .confirm-btn {
+    background: #FF4767;
+    color: #fff;
+  }
+}
+
+/* 内容区缩进补充 */
+.collection-content {
+  padding: 0 24rpx;
+  margin-top: 20rpx;
+}
+
+.brand-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  
+  .brand-card-wrap {
+    width: 49.2%;
+    margin-bottom: 20rpx;
+  }
+}
+
+.course-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+  
+  .empty-icon {
+    width: 346rpx;
+    height: 373rpx;
+  }
+}
+
+::v-deep .icon-headle {
+    width: 32rpx !important;
+    height: 32rpx !important;
+}
 </style>
\ No newline at end of file