diff --git a/pages.json b/pages.json
index cca5aea..e228fa3 100644
--- a/pages.json
+++ b/pages.json
@@ -988,6 +988,18 @@
 				"navigationBarTitleText": "我的收藏",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/jingxuan/selected-skills",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/jingxuan/selected-brands",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
 
 
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 4a21518..a7cb1dd 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -87,11 +87,11 @@
       </view>
     </view>
 
-    <view class="settlement-guide card-box" v-if="isLogin && !isSettled">
-      <view class="guide-header">
+    <view class="settlement-guide card-box" v-if="isLogin && !isCertified">
+      <view class="guide-header" :style="{ backgroundImage: 'url(' + (isSettled ? 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c3a6cdd8-0447-4b50-a8cc-7bab1eedb502.png' : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/138ccbc3-486d-4287-b67f-f809de99e408.png') + ')' }">
           <view class="guide-body">
-            <text class="guide-text">认证店铺信息，接单必经之路</text>
-            <view class="guide-btn" @tap="goToSettle">去入驻</view>
+            <text class="guide-text">{{ isSettled ? '完成认证，开启您的接单之路' : '入驻美融融，生意更轻松' }}</text>
+            <view class="guide-btn" @tap="goToSettle">{{ isSettled ? '去认证' : '去入驻' }}</view>
           </view>
       </view>
     </view>
@@ -109,7 +109,7 @@
     <view class="brands-section card-box">
       <view class="card-header">
         <view class="header-left"><text class="title" style="margin-left: 10rpx;">精选品牌</text></view>
-        <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 class="header-right" @tap="goToBrandList">更多品牌 <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="brand-grid">
@@ -126,7 +126,7 @@
     <view class="skills-section card-box">
       <view class="card-header">
         <view class="header-left"><text class="title">技能集市</text></view>
-        <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 class="header-right" @tap="goToSkillList">更多技能 <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">
         <skill-card 
@@ -162,14 +162,13 @@ export default {
   },
   data() {
     return {
-      isLogin: false, // 是否登录，onShow生命周期中会通过token判定
-      userInfo: {},   // 用户信息数据源
+      isLogin: false, 
+      userInfo: {},   
       syrId: null,
 
       displayScore: 0, 
       animationTimer: null,
 
-      // 通知公告数据
       noticeList: [
         { id: 0, title: '暂无最新公告', url: '' }
       ],
@@ -254,11 +253,20 @@ export default {
     }
   },
   methods: {
+    goToBrandList() {
+      uni.navigateTo({
+        url: '/pages/jingxuan/selected-brands'
+      });
+    },
+    goToSkillList() {
+      uni.navigateTo({
+        url: '/pages/jingxuan/selected-skills'
+      });
+    },
     // 处理金刚区点击事件 (包含扫码验券核心逻辑)
     handleQuickAction(item) {
       if (item.name === '扫码验券') {
         console.log('准备跳转到自定义扫码页...');
-
       uni.navigateTo({
         url: '/pages/shop/verify/verify-order',
         fail: (err) => {
@@ -293,7 +301,6 @@ export default {
           this.userInfo = result.data;
           uni.setStorageSync("syrId", result.data.id);
           this.syrId = result.data.id;
-
           // 获取完用户信息后，初始化营业开关的状态
           this.initStoreStatus();
 
@@ -314,7 +321,7 @@ export default {
             updateTime: this.formatTime(res.data.now_date),
             waitStart: res.data.dfw || 0,
             waitFinish: res.data.dwc || 0,
-            finished: res.data.yqx || 0 // 备注：接口返回只有dfw, dwc, yqx(已取消)。暂时将第三个坑位放为yqx，或你后期让后端加字段
+            finished: res.data.yqx || 0 // 备注：接口返回只有dfw, dwc, yqx(已取消)。暂时将第三个坑位放为yqx，或后期让后端加字段
           };
         }
       });
@@ -385,13 +392,14 @@ export default {
               type: item.link_name || '平台课程',
               views: item.browse_num || 0,
               time: item.create_time ? item.create_time.split(' ')[0] : '', // 只取日期
-              coverSrc: item.cover_img || 'https://dummyimage.com/200x150/ccc/fff.png&text=Video'
+              coverSrc: item.cover_img || 'https://dummyimage.com/200x150/ccc/fff.png&text=Video',
+              typeIcon: item.link_logo || ''
             };
           });
         }
       });
     },
-    
+
     // 跳转：通知详情页
     goToNotice(msg) {
       if(msg.id) {
@@ -422,7 +430,6 @@ export default {
 
     // 营业中 / 休息中 按钮逻辑判断
     toggleStatus() {
-      // 校验逻辑保留你之前的认证状态检查
       if (!this.isCertified) {
         uni.showModal({ title: '提示', content: '请先完善认证信息', confirmText: '去完善' });
         return;
@@ -431,19 +438,15 @@ export default {
         uni.showToast({ title: '请先配置营业时间', icon: 'none' });
         return;
       }
-
-      // 真正的请求逻辑
       let newStatus = this.userInfo.order_taking == 1 ? 2 : 1;
       request.post("/sj/sjordertaking", {
         order_taking: newStatus,
-        sjid: this.syrId // 使用你在 getUserInfo 存入的 sjId/syrId
+        sjid: this.sjId 
       }).then((res) => {
-        // 成功后重新拉取最新信息以更新 UI
         this.getUserInfo();
         uni.showToast({ title: newStatus == 1 ? '已开启营业' : '已休息', icon: 'none' });
       });
     },
-
     animateScore() {
       const target = parseFloat(this.orderDetail.score) || 0;
       if (this.animationTimer) clearInterval(this.animationTimer);
@@ -496,7 +499,6 @@ export default {
       z-index: 0;
     }
 
-    // 通用卡片样式
     .card-box {
       position: relative;
       z-index: 1;
@@ -512,7 +514,6 @@ export default {
       margin-left: 6rpx;
     }
 
-    // 通用卡片头部
     .card-header {
       display: flex;
       justify-content: space-between;
@@ -556,7 +557,6 @@ export default {
       }
     }
 
-    // 1. 顶部信息
     .header-section {
       position: relative;
       z-index: 1;
@@ -656,16 +656,15 @@ export default {
       }
     }
 
-    // 入驻引导卡片
     .settlement-guide {
-      padding: 0; // 去除内部留白，让背景图贴边
+      padding: 0; 
       overflow: hidden;
       
       .guide-header {
         width: 100%;
         height: 248rpx;
-        background: url('https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/138ccbc3-486d-4287-b67f-f809de99e408.png');
         background-size: cover;
+        /* 背景图由动态 style 接管 */
       }
 
       .guide-body {
@@ -698,7 +697,6 @@ export default {
       }
     }
 
-    // 2. 快捷入口
     .quick-actions {
       display: flex;
       justify-content: space-around;
@@ -725,7 +723,6 @@ export default {
       }
     }
 
-    // 3. 基础订单
     .order-stats-basic {
         background: linear-gradient( 176deg, #F0F4FF 0%, #FFFFFF 100%);
         border-radius: 20rpx;
@@ -753,7 +750,6 @@ export default {
       }
     }
 
-    // 4. 详细订单
     .order-stats-detail {
       .detail-content {
         display: flex;
@@ -885,7 +881,6 @@ export default {
       }
     }
 
-    // 5. 通知横幅 (跑马灯改造)
     .notice-bar {
       display: flex;
       align-items: center;
@@ -901,7 +896,7 @@ export default {
       
       .notice-swiper {
         flex: 1;
-        height: 40rpx; // 限制高度刚好显示一行
+        height: 40rpx; 
         line-height: 40rpx;
 
         .notice-text {
@@ -922,7 +917,6 @@ export default {
       }
     }
 
-    // 6. 精选品牌 (精简后的包裹容器)
     .brands-section {
       padding: 20rpx 20rpx;
       .brand-grid {
@@ -931,13 +925,12 @@ export default {
         justify-content: space-between;
         
         .brand-card-wrap {
-          width: 48.5%; // 240rpx 宽度
+          width: 48.5%; 
           margin-bottom: 14rpx;
         }
       }
     }
 
-    // 7. 技能集市
     .skills-section {
       .skill-list {
         display: flex;
diff --git a/pages/jingxuan/selected-brands.vue b/pages/jingxuan/selected-brands.vue
new file mode 100644
index 0000000..4fee4f3
--- /dev/null
+++ b/pages/jingxuan/selected-brands.vue
@@ -0,0 +1,472 @@
+<template>
+  <view>
+    <custom-navbar 
+      title="精选品牌" 
+      :leftImg="'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/60ae3383-6ff6-4f42-818b-d9b09a9bd0e0.png'" 
+      :showUser="true"
+      backgroundColor="url('https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ce2e62e1-c26a-45c8-a49d-7ed00b2ce02c.png') center 20%/cover no-repeat" 
+      titleColor="#333" 
+      borderBottom="none"
+      :show-headle="true"
+      headleSrc="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/51ebca5d-95c5-4fb8-8aa3-560a79100d25.png"
+      @onHeadleClick="">
+    </custom-navbar>
+
+    <serviecFirstTab 
+      :tabs="tabs" 
+      :activeId="activeId" 
+      activeColor="#FF4767" 
+      @tab-click="tabClick" 
+      bgColor="#fff">
+    </serviecFirstTab>
+
+    <CommonList 
+      ref="brandListRef" 
+      :apiUrl="'/sj/brand/list'" 
+      :initialQuery="{}"
+      :listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 250}rpx)`"
+      @data-loaded="handleDataLoaded">
+      
+      <template #headerScroll>
+        <view class="icon-tabs">
+          <view 
+            v-for="item in iconTabs" 
+            :key="item.id" 
+            class="icon-tab"
+            :class="{active: currentSecondClass == item.id}" 
+            @click="selectSecondClass(item.id)">
+            <image :src="item.photo" class="icon-img" mode="aspectFill"></image>
+            <text class="icon-text">{{ item.title }}</text>
+          </view>
+        </view>
+
+        <view class="sort-bar">
+          <view class="sort-item" @tap="toggleSort('time')">
+            <text class="sort-text" :class="{ active: orderType === 1 || orderType === 2 }">发布时间</text>
+            <view class="arrows">
+              <image class="arrow-icon" :src="orderType === 1 ? iconPinkUp : iconGreyUp"></image>
+              <image class="arrow-icon" :src="orderType === 2 ? iconPinkDown : iconGreyDown"></image>
+            </view>
+          </view>
+          
+          <view class="sort-item" @tap="toggleSort('view')">
+            <text class="sort-text" :class="{ active: orderType === 3 || orderType === 4 }">浏览量</text>
+            <view class="arrows">
+              <image class="arrow-icon" :src="orderType === 3 ? iconPinkUp : iconGreyUp"></image>
+              <image class="arrow-icon" :src="orderType === 4 ? iconPinkDown : iconGreyDown"></image>
+            </view>
+          </view>
+        </view>
+      </template>
+
+      <template #listData="{ list }">
+        <view class="zhanwei">
+        <view class="brand-grid">
+          <brand-card
+            class="brand-card-wrap"
+            v-for="(brand, idx) in enrichedBrandList(list)"
+            :key="brand.id || idx"
+            :item="brand"
+            :tagKeys="brand._tagKeys"
+            @click="handleBrandClick(brand)"
+          />
+        </view>
+        </view>
+      </template>
+
+      <template #empty>
+        <noData></noData>
+      </template>
+    </CommonList>
+  </view>
+</template>
+
+<script>
+import request from "../../utils/request";
+import serviecFirstTab from "@/components/common/service-first-tab.vue";
+import CommonList from "@/components/common/CommonList.vue";
+import brandCard from "@/pages/home/components/brand-card.vue";
+import noData from "@/components/noData/noData.vue";
+
+export default {
+  components: {
+    serviecFirstTab,
+    CommonList,
+    brandCard,
+    noData
+  },
+  data() {
+    return {
+      statusBarHeight: 0,
+      navHeight: 0, 
+      
+      // 当前选中的一级/二级分类ID（页面顶部点击用）
+      activeId: "",            
+      currentSecondClass: "", 
+      tabs: [],               
+      iconTabs: [],           
+      
+      selectedSecondIds: [],  // 抽屉里选中的分类ID
+      
+      // 额外筛选参数
+      orderType: 1,           
+      
+      // 排序图标资源
+      iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
+      iconGreyDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dfffb601-6877-4608-a3eb-88695b05c6c2.png',
+      iconPinkUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5bc84dff-e120-4d4b-a33e-25d68e065654.png',
+      iconPinkDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ff2c2c9d-694a-4adf-b737-66b07f4a63ae.png',
+    };
+  },
+  onLoad(options) {
+    const systemInfo = uni.getSystemInfoSync();
+    this.statusBarHeight = systemInfo.statusBarHeight;
+    this.navHeight = this.statusBarHeight + 44; 
+
+    if (options.id) {
+      this.activeId = options.id;
+    }
+    this.getFirstClass();
+    
+    // 初始化时一并获取抽屉内的级联字典数据
+    this.loadFilterCategories();
+  },
+  methods: {
+    // ============ 排序逻辑 ============
+    toggleSort(type) {
+      if (type === 'time') {
+        this.orderType = this.orderType === 1 ? 2 : 1;
+      } else if (type === 'view') {
+        this.orderType = this.orderType === 3 ? 4 : 3;
+      }
+      this.refreshBrandList();
+    },
+
+    // ============ 页面内分类逻辑 ============
+    getFirstClass() {
+      request.post("/sj/firstclass").then((res) => {
+        this.tabs = res.data || [];
+        if (this.tabs.length && !this.activeId) {
+          this.activeId = this.tabs[0].id;
+        }
+        this.getSecondClassList();
+        this.refreshBrandList();
+      });
+    },
+
+    getSecondClassList() {
+      if (!this.activeId) return;
+      request.post('/sj/secondclass', { id: this.activeId }).then((res) => {
+        this.iconTabs = res.data || [];
+      });
+    },
+
+    selectSecondClass(id) {
+      if(this.currentSecondClass === id){
+        this.currentSecondClass = "";
+      } else {
+        this.currentSecondClass = id;
+      }
+      // 页面上点击了圆形图标，则清空抽屉里的选择
+      this.selectedSecondIds = []; 
+      this.refreshBrandList();
+    },
+
+    tabClick(id) {
+      if (this.activeId === id) return;
+      this.activeId = id;
+      this.currentSecondClass = ""; 
+      this.getSecondClassList();    
+      this.refreshBrandList();
+    },
+
+    // ============ 刷新列表核心 ============
+    refreshBrandList() {
+      // 如果抽屉里选了分类，优先传抽屉的参数；否则传圆形图标选中的分类
+      const targetSecondClass = this.selectedSecondIds.length > 0 
+        ? this.selectedSecondIds.join(',') 
+        : this.currentSecondClass;
+
+      const params = {
+        first_class: this.activeId || undefined,
+        second_class: targetSecondClass || undefined,
+        order_type: this.orderType
+      };
+
+      Object.keys(params).forEach(key => {
+        if (params[key] === undefined) delete params[key];
+      });
+
+      if(this.$refs.brandListRef) {
+        this.$refs.brandListRef.manualRefresh(params);
+      }
+    },
+
+    enrichedBrandList(list) {
+      if (!list || !list.length) return [];
+      return list.map(brand => {
+        const tagKeys = [];
+        if (brand.franchise_state === 1) tagKeys.push('franchise');
+        if (brand.student_state === 1) tagKeys.push('recruit');
+        if (tagKeys.length === 0) tagKeys.push('more');
+        
+        return {
+          ...brand,
+          name: brand.name,
+          bgSrc: brand.cover_img || 'https://dummyimage.com/300x200/ccc/fff.png',
+          avatar: brand.logo_img || 'https://dummyimage.com/100x100/ccc/fff.png',
+          _tagKeys: tagKeys
+        };
+      });
+    },
+
+    handleBrandClick(brand) {
+      uni.navigateTo({
+        url: `/pages/brand/detail?id=${brand.id}`
+      });
+    },
+
+    handleDataLoaded(data) {
+      console.log("品牌列表加载完成", data);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+// 保证右侧搜索图标大小合适
+::v-deep .icon-headle {
+  width: 32rpx !important;
+  height: 32rpx !important;
+}
+
+// 一级类目 Tab 样式微调
+.service-first-tab {
+  border-bottom: none;
+  padding-bottom: 27rpx;
+  position: relative;
+  z-index: 101;
+}
+
+::v-deep .service-first-tab{
+    box-shadow: none !important;
+}
+
+/* ================= 抽屉下拉样式 ================= */
+.filter-panel {
+  position: fixed;
+  left: 0; right: 0; bottom: 0;
+  z-index: 100;
+  pointer-events: none;
+  overflow: hidden;
+
+  &.show {
+    pointer-events: auto;
+    .filter-mask { opacity: 1; }
+    .filter-container { transform: translateY(0); }
+  }
+
+  .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: 140rpx 30rpx 40rpx;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
+    transform: translateY(-100%);
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  }
+}
+
+.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 10rpx; /* 控制行间距和列间距 */
+  }
+}
+
+/* 通用胶囊按钮 (一行四个) */
+.pill-item {
+  width: calc(25% - 8rpx); /* 精确计算一行四个 */
+  height: 58rpx;
+  background: #F5F5F5;
+  font-weight: 400;
+  font-size: 24rpx; /* 字号略小以防溢出 */
+  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; 
+  white-space: nowrap;
+  
+  &.active {
+    background: #FFF0F2;
+    color: #FF4767;
+    border: 1rpx solid #FFB0BD;
+  }
+}
+
+.filter-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 40rpx;
+  .reset-btn, .confirm-btn {
+    width: 47%;
+    text-align: center;
+    padding: 22rpx 0;
+    border-radius: 40rpx;
+    font-size: 28rpx;
+  }
+  .reset-btn { background: #F5F5F5; color: #666; }
+  .confirm-btn { background: #FF4767; color: #fff; }
+}
+
+/* ================= 其他页面样式 ================= */
+// 二级类目图标行
+.icon-tabs {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+  column-gap: 36rpx;
+  row-gap: 30rpx;
+  background: transparent;
+  padding: 0 0 0 30rpx;                      
+  margin-bottom: 30rpx;
+}
+
+.icon-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.icon-img {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  border: 2rpx solid transparent; 
+}
+
+.icon-text {
+  margin-top: 10rpx;
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #333333;
+  line-height: 33rpx;
+  text-align: left;
+}
+
+.icon-tab.active .icon-text {
+  color: #FF4767;
+  line-height: 33rpx;
+}
+
+.icon-tab.active .icon-img {
+  border: 2rpx solid #FF4767;
+}
+
+// 排序栏样式
+.sort-bar {
+  display: flex;
+  align-items: center;
+  padding: 0 30rpx;
+  margin-bottom: 24rpx;
+  gap: 60rpx;
+  
+  .sort-item {
+    display: flex;
+    align-items: center;
+    
+    .sort-text {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: #666666;
+      line-height: 37rpx;
+      margin-right: 6rpx;
+      
+      &.active {
+        color: #FF4767;
+        font-weight: 500;
+      }
+    }
+    
+    .arrows {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      
+      .arrow-icon {
+        width: 14rpx;
+        height: 8rpx;
+        margin: 2rpx 0;
+      }
+    }
+  }
+}
+
+// 品牌卡片网格
+.zhanwei {
+    background-color: #f5f5f5;
+    padding: 20rpx 0 0 0 ;
+    border-radius: 20rpx 20rpx 0rpx 0rpx;
+}
+.brand-grid {
+  background-color: #ffffff;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 20rpx 24rpx;
+  row-gap: 24rpx;
+  border-radius: 20rpx 20rpx 0rpx 0rpx;
+  
+  .brand-card-wrap {
+    width: 48.5%; 
+  }
+}
+
+.common-list {
+  ::v-deep .list-container {
+    padding: 0;
+  }
+  ::v-deep .list-scroll {
+    margin-top: 0rpx;
+  }
+}
+
+.service-list {
+  background-color: #f5f5f5;
+  border-radius: 20rpx 20rpx 0 0;
+}
+</style>
\ No newline at end of file
diff --git a/pages/jingxuan/selected-skills.vue b/pages/jingxuan/selected-skills.vue
new file mode 100644
index 0000000..739e6c4
--- /dev/null
+++ b/pages/jingxuan/selected-skills.vue
@@ -0,0 +1,490 @@
+<template>
+  <view class="skill-market-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="goToSearch">
+    </custom-navbar>
+    
+    <view class="nav-placeholder" :style="{ height: navHeight + 'px' }"></view>
+
+    <view class="official-author-block" v-if="linkType === 1">
+      <image class="author-avatar" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bbe832bf-aae6-4579-b3cc-246d252488c3" mode="aspectFill"></image>
+      <view class="author-info">
+        <text class="author-name">美融融官方</text>
+        <text class="author-desc">发布了658视频</text>
+      </view>
+    </view>
+
+    <view class="sort-bar-wrap" :style="{ top: navHeight + 'px' }">
+      <view class="sort-bar">
+        <view class="left-sorts">
+          <view class="sort-item" @tap="toggleSort('time')">
+            <text class="sort-text" :class="{ active: orderType === 1 || orderType === 2 }">发布时间</text>
+            <view class="arrows">
+              <image class="arrow-icon" :src="orderType === 1 ? iconPinkUp : iconGreyUp"></image>
+              <image class="arrow-icon" :src="orderType === 2 ? iconPinkDown : iconGreyDown"></image>
+            </view>
+          </view>
+          
+          <view class="sort-item" @tap="toggleSort('view')">
+            <text class="sort-text" :class="{ active: orderType === 3 || orderType === 4 }">浏览量</text>
+            <view class="arrows">
+              <image class="arrow-icon" :src="orderType === 3 ? iconPinkUp : iconGreyUp"></image>
+              <image class="arrow-icon" :src="orderType === 4 ? iconPinkDown : iconGreyDown"></image>
+            </view>
+          </view>
+        </view>
+
+        <view class="right-filter" @tap="toggleFilterPanel">
+          <text class="filter-text">筛选</text>
+          <image class="filter-icon" :src="filterIcon" :class="{ 'rotate': filterVisible }"></image>
+        </view>
+      </view>
+
+      <view class="filter-panel" :class="{ 'show': filterVisible }" catchtouchmove="true">
+        <view class="filter-mask" @tap="closeFilterPanel"></view>
+        <view class="filter-container">
+          <text class="group-title">课程类型</text>
+          <view class="course-filter">
+            <view class="course-type-item" :class="{ active: linkType === '' }" @tap="selectAndApply('')">全部</view>
+            <view class="course-type-item" :class="{ active: linkType === 1 }" @tap="selectAndApply(1)">平台课程</view>
+            <view class="course-type-item" :class="{ active: linkType === 2 }" @tap="selectAndApply(2)">品牌课程</view>
+          </view>
+        </view>
+      </view>
+    </view> <view class="list-container">
+      <view v-if="skillList.length > 0">
+        <skill-card 
+          v-for="(item, index) in skillList" 
+          :key="item.id || index" 
+          :item="item"
+          @click="goToDetail(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: 60rpx;"></view>
+  </view>
+</template>
+
+<script>
+import request from "@/utils/request"
+import SkillCard from "@/pages/home/components/skill-card.vue" 
+
+// 数据模式开关：true=调用真实接口，false=使用模拟数据
+const USE_REAL_API = true
+
+export default {
+  components: { SkillCard },
+  data() {
+    return {
+      navHeight: 0,
+      
+      // 排序与筛选参数
+      orderType: 1, // 1:时间降序, 2:时间升序, 3:浏览量降序, 4:浏览量升序 (默认1)
+      linkType: '', // '':全部, 1:平台课程, 2:品牌课程
+      
+      filterVisible: false,
+      
+      // 列表数据与分页
+      skillList: [],
+      page: 1,
+      limit: 10,
+      isFinished: false,
+      
+      // 排序图标资源
+      iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
+      iconGreyDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dfffb601-6877-4608-a3eb-88695b05c6c2.png',
+      iconPinkUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5bc84dff-e120-4d4b-a33e-25d68e065654.png',
+      iconPinkDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ff2c2c9d-694a-4adf-b737-66b07f4a63ae.png',
+      
+      // 模拟的本地全量数据（仅在 USE_REAL_API=false 时使用）
+      mockDatabase: []
+    }
+  },
+  computed: {
+    filterIcon() {
+      // 漏斗图标，默认灰色
+      return 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png'
+    }
+  },
+  onLoad() {
+    // 动态计算导航栏与下拉起点
+    const sysInfo = uni.getSystemInfoSync()
+    const sbh = sysInfo.statusBarHeight || 0
+    this.navHeight = sbh 
+    // Navbar(44px) + SortBar(大概88rpx -> 44px) = 88px 左右
+    this.filterTop = this.navHeight + uni.upx2px(106)
+    
+    this.initMockData()
+    this.fetchData(true)
+  },
+  // 触底加载更多
+  onReachBottom() {
+    if (!this.isFinished) {
+      this.fetchData(false)
+    }
+  },
+  methods: {
+    goToSearch() {
+      uni.showToast({ title: '搜索功能开发中', icon: 'none' })
+    },
+    
+    // 点击排序
+    toggleSort(type) {
+      if (type === 'time') {
+        if (this.orderType === 1) this.orderType = 2
+        else this.orderType = 1
+      } else if (type === 'view') {
+        if (this.orderType === 3) this.orderType = 4
+        else this.orderType = 3
+      }
+      
+      this.fetchData(true)
+    },
+    
+    // 筛选面板控制
+    toggleFilterPanel() {
+      this.filterVisible = !this.filterVisible
+    },
+    closeFilterPanel() {
+      this.filterVisible = false
+    },
+    
+    // 💡 匹配设计图交互：选择选项后立刻应用并收起下拉框
+    selectAndApply(typeVal) {
+      this.linkType = typeVal;
+      this.closeFilterPanel();
+      this.fetchData(true);
+    },
+    
+    // 获取列表数据 (统一入口)
+    async fetchData(isReset = false) {
+      if (isReset) {
+        this.page = 1
+        this.isFinished = false
+        this.skillList = []
+      }
+      
+      if (USE_REAL_API) {
+        uni.showLoading({ title: '加载中...' })
+        try {
+          const params = {
+            page: this.page,
+            limit: this.limit,
+            order_type: this.orderType
+          }
+          if (this.linkType) params.link_type = this.linkType
+          
+          const res = await request.post('/sj/skill/list', params)
+          if ((res.code === 200 || res.state === 1) && res.data && res.data.list) {
+            const list = res.data.list.map(item => this.formatApiData(item))
+            
+            if (list.length < this.limit) this.isFinished = true
+            this.skillList = isReset ? list : this.skillList.concat(list)
+            this.page++
+          } else {
+            this.isFinished = true
+          }
+        } catch (e) {
+          uni.showToast({ title: '加载失败', icon: 'none' })
+        } finally {
+          uni.hideLoading()
+        }
+      } else {
+        // ========== 模拟数据请求环境 ==========
+        uni.showLoading({ title: '模拟加载中...' })
+        setTimeout(() => {
+          let list = [...this.mockDatabase]
+          
+          // 1. 模拟筛选
+          if (this.linkType) {
+            list = list.filter(item => item.link_type === this.linkType)
+          }
+          
+          // 2. 模拟排序
+          list.sort((a, b) => {
+            if (this.orderType === 1) return b.timestamp - a.timestamp // 时间降序
+            if (this.orderType === 2) return a.timestamp - b.timestamp // 时间升序
+            if (this.orderType === 3) return b.views - a.views         // 浏览量降序
+            if (this.orderType === 4) return a.views - b.views         // 浏览量升序
+            return 0
+          })
+          
+          // 3. 模拟分页
+          const start = (this.page - 1) * this.limit
+          const end = start + this.limit
+          const pageData = list.slice(start, end)
+          
+          if (pageData.length < this.limit) this.isFinished = true
+          this.skillList = isReset ? pageData : this.skillList.concat(pageData)
+          this.page++
+          uni.hideLoading()
+        }, 500)
+      }
+    },
+    
+    // 格式化接口数据
+    formatApiData(item) {
+      return {
+        id: item.id,
+        title: item.name,
+        coverSrc: item.cover_img || 'https://dummyimage.com/300x200/ccc/fff.png',
+        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 || ''
+      }
+    },
+
+    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]
+    },
+
+    goToDetail(item) {
+      if (item.id) {
+        uni.navigateTo({ url: `/pages/skill/detail?id=${item.id}` })
+      } else {
+        uni.showToast({ title: '详情页开发中', icon: 'none' })
+      }
+    },
+
+    //  初始化模拟数据
+    initMockData() {
+      this.mockDatabase = [
+        { id: 1, title: '穿戴甲的操作视频扫码验券操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 836000, time: '7小时前', timestamp: Date.now() - 7*3600000 },
+        { id: 2, title: '脸部按摩操作步骤详情', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, views: 8334, time: '1天前', timestamp: Date.now() - 24*3600000 },
+        { id: 3, title: '全身SPA的操作视频操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 2344, time: '3天前', timestamp: Date.now() - 3*24*3600000 },
+        { id: 4, title: '高级面部护理手法详解最新版', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 836, time: '4月26日', timestamp: Date.now() - 30*24*3600000 },
+        { id: 5, title: '光疗美甲进阶全方位解析', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, views: 12000, time: '2小时前', timestamp: Date.now() - 2*3600000 }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.skill-market-page {
+  min-height: 100vh;
+  background: #fff;
+}
+
+/* 官方作者展示块 */
+.official-author-block {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 30rpx;
+  background: #fff;
+  border-bottom: 10rpx solid #F5F5F5;
+
+  .author-avatar {
+    width: 70rpx;
+    height: 70rpx;
+    border-radius: 50%;
+    margin-right: 20rpx;
+    // border: 2rpx solid #F5F5F5;
+  }
+
+  .author-info {
+    display: flex;
+    flex-direction: column;
+
+    .author-name {
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #333333;
+      line-height: 40rpx;
+      margin-bottom: 4rpx;
+    }
+
+    .author-desc {
+      font-weight: 400;
+      font-size: 20rpx;
+      color: #999999;
+      line-height: 28rpx;
+    }
+  }
+}
+
+.sort-bar-wrap {
+  position: sticky;
+  background: #fff;
+  z-index: 101;
+//   border-bottom: 1rpx solid #F5F5F5;
+}
+
+.sort-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 30rpx;
+  
+  .left-sorts {
+    display: flex;
+    align-items: center;
+    gap: 80rpx;
+    
+    .sort-item {
+      display: flex;
+      align-items: center;
+      
+      .sort-text {
+        font-size: 28rpx;
+        color: #333333;
+        margin-right: 6rpx;
+        font-weight: 400;
+        
+        &.active {
+          color: #FF4767;
+          font-weight: 500;
+        }
+      }
+      
+      .arrows {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        
+        .arrow-icon {
+          width: 14rpx;
+          height: 8rpx;
+          margin: 2rpx 0;
+        }
+      }
+    }
+  }
+
+  .right-filter {
+    display: flex;
+    align-items: center;
+    
+    .filter-text {
+      font-size: 26rpx;
+      color: #666666;
+      margin-right: 8rpx;
+    }
+    
+    .filter-icon {
+      width: 18rpx;
+      height: 12rpx;
+      transition: transform 0.3s ease;
+      &.rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+.list-container {
+  padding: 30rpx 24rpx;
+}
+
+/* 抽屉筛选面板：使用 absolute 脱离计算 */
+.filter-panel {
+  position: absolute;
+  top: 100%; /* 从 sort-bar-wrap 底部开始向下延伸 */
+  left: 0; right: 0;
+  height: 100vh;
+  z-index: 100;
+  pointer-events: none;
+  overflow: hidden;
+
+  &.show {
+    pointer-events: auto;
+    .filter-mask { opacity: 1; }
+    .filter-container { transform: translateY(0); }
+  }
+
+  .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 24rpx 24rpx;
+    padding: 30rpx 30rpx 40rpx;
+    display: flex;
+    flex-direction: column;
+    // box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
+    transform: translateY(-100%);
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  }
+}
+
+.group-title {
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #333333;
+  margin-bottom: 24rpx;
+  display: block;
+}
+
+.course-filter {
+  display: flex;
+  gap: 20rpx;
+  
+  .course-type-item {
+    background: #F5F5F5;
+    color: #333333;
+    font-size: 26rpx;
+    padding: 12rpx 36rpx;
+    border-radius: 12rpx;
+    border: 1rpx solid transparent;
+    transition: all 0.2s;
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &.active {
+      background: #FFF0F2;
+      color: #FF4767;
+      border-color: #FFB0BD;
+    }
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120rpx 0;
+  
+  .empty-icon {
+    width: 346rpx;
+    height: 373rpx;
+  }
+}
+::v-deep .icon-headle {
+    width: 32rpx !important;
+    height: 32rpx !important;
+}
+::v-deep .back-icon {
+    width: 28rpx !important;
+    height: 36rpx !important;
+}
+</style>
\ No newline at end of file