From e4d100242b763b442142f6c3732f4d8d7033294c Mon Sep 17 00:00:00 2001
From: xiebing <xiebing@zkr.com>
Date: Thu, 20 Nov 2025 13:50:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor=20:=20=E9=87=8D=E6=9E=84=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=9A=84=E7=AE=80=E5=8E=86=E5=8C=B9=E9=85=8D=E8=81=8C?=
 =?UTF-8?q?=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |    5 +
 pages/index/components/AIMatch.vue            |  345 +++++
 .../components/index-refactor copy 2.vue      | 1351 +++++++++++++++++
 pages/index/components/index-refactor.vue     |  342 ++---
 4 files changed, 1854 insertions(+), 189 deletions(-)
 create mode 100644 package.json
 create mode 100644 pages/index/components/AIMatch.vue
 create mode 100644 pages/index/components/index-refactor copy 2.vue

diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0093139
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "pixi.js": "^7.4.3"
+  }
+}
diff --git a/pages/index/components/AIMatch.vue b/pages/index/components/AIMatch.vue
new file mode 100644
index 0000000..473f5a8
--- /dev/null
+++ b/pages/index/components/AIMatch.vue
@@ -0,0 +1,345 @@
+<template>
+  <view class="container">
+    <!-- 用于承载 PIXI 的 Canvas -->
+    <!-- #ifdef H5 -->
+    <view id="matchCanvas" class="match-canvas"></view>
+    <!-- #endif -->
+    <!-- #ifndef H5 -->
+    <canvas type="webgl" id="matchCanvas" canvas-id="matchCanvas" class="match-canvas" />
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import * as PIXI from "pixi.js";
+
+const appRef = ref(null); // 存储 PIXI 应用实例
+
+// 标签数据：包含名称、颜色、大小、位置（角度、半径）
+const mockTags = [
+  {
+    name: "医生",
+    bgColor: 0x0069fe,
+    fontColor: 0xffffff,
+    size: 17,
+    opacity: 1.0,
+    angle: 0,
+    radius: 0,
+  },
+  {
+    name: "工程师",
+    bgColor: 0x87e2ec,
+    fontColor: 0xffffff,
+    size: 14,
+    opacity: 1,
+    angle: -Math.PI / 2, // 12点方向
+    radius: 60,
+    tailRotation: Math.PI / 2, // 拖尾向下
+  },
+  {
+    name: "建筑师",
+    bgColor: 0xffebeb,
+    fontColor: 0xf86e6e,
+    size: 11.5,
+    opacity: 1,
+    angle: -Math.PI / 4, // 1点方向
+    radius: 115,
+    tailRotation: (3 * Math.PI) / 4, // 拖尾向左下
+  },
+  {
+    name: "律师",
+    bgColor: 0x21ea85,
+    fontColor: 0xffffff,
+    size: 15,
+    opacity: 1,
+    angle: -Math.PI / 10, // 2点方向
+    radius: 130,
+    tailRotation: (3 * Math.PI) / 4, // 拖尾向左下
+  },
+  {
+    name: "记者",
+    bgColor: 0xebf3ff,
+    fontColor: 0x1d71ef,
+    size: 12,
+    opacity: 1,
+    angle: Math.PI / 120, // 3点方向
+    radius: 130,
+    tailRotation: Math.PI, // 拖尾向左
+  },
+  {
+    name: "程序员",
+    bgColor: 0xff9d57,
+    fontColor: 0xffffff,
+    size: 14.5,
+    opacity: 0.6,
+    angle: Math.PI / 9, // 4点方向
+    radius: 120,
+    tailRotation: (5 * Math.PI) / 4, // 拖尾向左上
+  },
+  {
+    name: "摄影师",
+    bgColor: 0xd8e5fe,
+    fontColor: 0x1d71ef,
+    size: 11,
+    opacity: 1,
+    angle: Math.PI / 3.2, // 5点方向
+    radius: 75,
+    tailRotation: (3 * Math.PI) / 2, // 拖尾向上
+  },
+  {
+    name: "设计师",
+    bgColor: 0xff9400,
+    fontColor: 0xffffff,
+    size: 14,
+    opacity: 1,
+    angle: (2 * Math.PI) / 3, // 7点方向
+    radius: 92,
+    tailRotation: (7 * Math.PI) / 4, // 拖尾向右上
+  },
+  {
+    name: "心理咨询师",
+    bgColor: 0xebf3ff,
+    fontColor: 0x1d71ef,
+    size: 10.5,
+    opacity: 1,
+    angle: (5.4 * Math.PI) / 6, // 8点方向
+    radius: 110,
+    tailRotation: 0, // 拖尾向右
+  },
+  {
+    name: "护士",
+    bgColor: 0xff6969,
+    fontColor: 0xffffff,
+    size: 15,
+    opacity: 1,
+    angle: (6.3 * Math.PI) / 6, // 10点方向
+    radius: 110,
+    tailRotation: Math.PI / 4, // 拖尾向右下
+  },
+  {
+    name: "会计",
+    bgColor: 0xfce9c9,
+    fontColor: 0xfbc55f,
+    size: 13,
+    opacity: 1,
+    angle: (7.2 * Math.PI) / 6, // 11点方向
+    radius: 115,
+    tailRotation: Math.PI / 4, // 拖尾向右下
+  },
+];
+
+onMounted(async () => {
+  if (appRef.value) return;
+  // 初始化 PIXI 应用
+  const canvas = document.getElementById("matchCanvas");
+  const sw = canvas.clientWidth;
+  const sh = canvas.clientHeight;
+
+  const app = new PIXI.Application({
+    backgroundAlpha: 0,
+    antialias: true,
+    autoDensity: true,
+    width: sw,
+    height: sh,
+    backgroundColor: 0xf5f7fa,
+  });
+  appRef.value = app;
+
+  canvas.appendChild(app.view);
+
+  // 标签容器（管理所有标签）
+  const tagsContainer = new PIXI.Container();
+  app.stage.addChild(tagsContainer);
+
+  // 存储已放置标签的信息（位置、尺寸、浮动动画参数）
+  const placedTags = [];
+
+  for (let i = 0; i < mockTags.length; i++) {
+    const { angle, radius, tailRotation, ...tagData } = mockTags[i];
+    const x = sw / 2 + radius * Math.cos(angle);
+    const y = sh / 2 + radius * Math.sin(angle);
+    const tag = createTag(tagData, x, y, placedTags, app, i);
+
+    // 上下浮动动画
+    const originalY = tag.y;
+    let floatOffset = Math.random() * Math.PI * 2;
+    let floatSpeed = 0.01 + Math.random() * 0.02;
+    let floatRange = 2 + Math.random() * 2;
+
+    // 为标签添加彗星拖尾效果
+    if (radius > 0) {
+      // 中心标签不需要拖尾
+      const tail = createCometTail(tagData.bgColor, tailRotation, tag);
+
+      // 修正：使用 addChildAt 将拖尾添加到最底层
+      tag.addChildAt(tail, 0);
+
+      // 为拖尾添加单独的动画
+      app.ticker.add(() => {
+        if (tail.updateTail) {
+          tail.updateTail();
+        }
+      });
+    }
+
+    // 使用PIXI ticker进行动画
+    app.ticker.add(() => {
+      floatOffset += floatSpeed;
+      tag.y = originalY + Math.sin(floatOffset) * floatRange;
+    });
+
+    tagsContainer.addChild(tag);
+    placedTags.push({ ...tagData, bounds: tag.getBounds() });
+  }
+});
+
+// 销毁时清理资源
+onUnmounted(() => {
+  if (appRef.value) {
+    appRef.value.destroy(true, true);
+    appRef.value = null;
+  }
+});
+
+// 创建彗星拖尾效果
+function createCometTail(bgColor, tailRotation, tag) {
+  const tailGroup = new PIXI.Container();
+
+  // 拖尾直接放在标签中心位置
+  tailGroup.x = 0;
+  tailGroup.y = 0;
+
+  const tail = new PIXI.Graphics();
+  tailGroup.addChild(tail);
+
+  // 拖尾参数
+  const baseLength = 45; // 基础长度
+  const startWidth = tag.width * 0.9; // 起始宽度（长边）
+  const endWidth = 35; // 末端宽度（短边）
+
+  // 拖尾动画参数
+  let breathPhase = Math.random() * Math.PI * 2;
+  const breathSpeed = 0.04;
+
+  // 更新拖尾的呼吸动画
+  tailGroup.updateTail = () => {
+    breathPhase += breathSpeed;
+    const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
+    tail.clear();
+
+    // 绘制梯形拖尾
+    const currentLength = baseLength * breathScale;
+
+    // 计算拖尾的四个顶点
+    // 长边在标签中心，水平方向（与标签长边平行）
+    const startLeft = { x: -startWidth / 2, y: 0 };
+    const startRight = { x: startWidth / 2, y: 0 };
+
+    // 短边在拖尾方向，保持水平
+    const endCenter = {
+      x: Math.cos(tailRotation) * currentLength,
+      y: Math.sin(tailRotation) * currentLength,
+    };
+
+    const endLeft = {
+      x: endCenter.x - endWidth / 2,
+      y: endCenter.y,
+    };
+
+    const endRight = {
+      x: endCenter.x + endWidth / 2,
+      y: endCenter.y,
+    };
+
+    // 使用分段绘制实现渐变
+    const segments = 6;
+    for (let i = 0; i < segments; i++) {
+      const progress = i / segments;
+      const nextProgress = (i + 1) / segments;
+
+      // 计算分段的位置 - 保持长边水平
+      const segmentStartLeft = {
+        x: startLeft.x * (1 - progress) + endLeft.x * progress,
+        y: startLeft.y * (1 - progress) + endLeft.y * progress,
+      };
+      const segmentStartRight = {
+        x: startRight.x * (1 - progress) + endRight.x * progress,
+        y: startRight.y * (1 - progress) + endRight.y * progress,
+      };
+      const segmentEndLeft = {
+        x: startLeft.x * (1 - nextProgress) + endLeft.x * nextProgress,
+        y: startLeft.y * (1 - nextProgress) + endLeft.y * nextProgress,
+      };
+      const segmentEndRight = {
+        x: startRight.x * (1 - nextProgress) + endRight.x * nextProgress,
+        y: startRight.y * (1 - nextProgress) + endRight.y * nextProgress,
+      };
+
+      // 透明度从0.4渐变到0
+      const segmentAlpha = 0.4 * (1 - progress);
+
+      tail.beginFill(bgColor, segmentAlpha);
+      tail.moveTo(segmentStartLeft.x, segmentStartLeft.y);
+      tail.lineTo(segmentEndLeft.x, segmentEndLeft.y);
+      tail.lineTo(segmentEndRight.x, segmentEndRight.y);
+      tail.lineTo(segmentStartRight.x, segmentStartRight.y);
+      tail.lineTo(segmentStartLeft.x, segmentStartLeft.y);
+      tail.endFill();
+    }
+  };
+
+  // 初始绘制
+  tailGroup.updateTail();
+
+  return tailGroup;
+}
+
+// 创建单个标签（背景+文本）
+function createTag(tagData, x, y, placedTags, app, index) {
+  const tagGroup = new PIXI.Container();
+  tagGroup.x = x;
+  tagGroup.y = y;
+
+  // 先创建文本以测量宽度
+  const text = new PIXI.Text(tagData.name, {
+    fontFamily: "Arial",
+    fontSize: tagData.size,
+    fill: tagData.fontColor,
+  });
+  text.anchor.set(0.5);
+
+  // 根据文字个数动态计算宽度
+  const padding = 10;
+  const charWidth = tagData.size * 1.5;
+  const charHeight = tagData.size * 1.3;
+  const textWidth = tagData.name.length * charWidth;
+
+  let width = textWidth + padding * 2;
+  if (index == 0) width = tagData.size * 4.5 + 10;
+
+  const height = charHeight + padding;
+
+  // 背景（圆角矩形）
+  const bg = new PIXI.Graphics();
+  bg.beginFill(tagData.bgColor, tagData.opacity ?? 1);
+  bg.drawRoundedRect(-width / 2, -height / 2, width, height, 20);
+  bg.endFill();
+  tagGroup.addChild(bg);
+
+  // 添加文本
+  tagGroup.addChild(text);
+
+  return tagGroup;
+}
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+}
+.match-canvas {
+  width: 100%;
+  height: 350rpx; /* 可根据需求调整高度 */
+}
+</style>
diff --git a/pages/index/components/index-refactor copy 2.vue b/pages/index/components/index-refactor copy 2.vue
new file mode 100644
index 0000000..21744fb
--- /dev/null
+++ b/pages/index/components/index-refactor copy 2.vue	
@@ -0,0 +1,1351 @@
+<template>
+  <scroll-view :scroll-y="true" class="app-container" :scroll-top="scrollTop" @scroll="checkStickyStatus" @scrolltolower="scrollBottom">
+    <view class="nav-hidden">
+      <view class="container-search">
+        <image class="bg-text" mode="widthFix" src="@/static/icon/index-text-bg.png"></image>
+        <view class="search-inner">
+          <view class="inner-left">
+            <image class="bg-text2" mode="widthFix" src="@/static/icon/index-text-bg2.png"></image>
+            <view class="search-input button-click" @click="navTo('/pages/search/search')">
+              <image class="icon" src="@/static/icon/index-search.png"></image>
+              <text class="inpute">请告诉我想找什么工作</text>
+            </view>
+          </view>
+          <image class="bg-robot button-click" mode="widthFix" src="@/static/icon/index-robot.png"></image>
+        </view>
+      </view>
+      <view class="ai-card-out">
+        <view class="ai-card">
+          <image class="ai-card-bg" src="@/static/icon/ai-card-bg.png" />
+          <view class="ai-card-inner">
+            <view class="title">人工智能专区</view>
+            <view class="item-box">
+              <view class="box-l">
+                <view class="item1 button-click">
+                  <view class="title">AI素质测评</view>
+                  <view class="des">提高个人素质</view>
+                  <image class="bg-text" mode="widthFix" src="@/static/icon/item-bg-text.png"></image>
+                  <image class="bg-img" src="@/static/icon/item-bg-img1.png"></image>
+                </view>
+              </view>
+              <view class="box-r">
+                <view class="item2 button-click">
+                  <view class="title">就业指导</view>
+                  <view class="des">根据个人建议</view>
+                  <image class="bg" src="@/static/icon/top-card-bg.png" />
+                  <image class="bg-img" src="@/static/icon/item-bg-img2.png"></image>
+                </view>
+                <view class="item3 button-click">
+                  <view class="title">AI模拟面试</view>
+                  <view class="des">提高面试成功率</view>
+                  <image class="bg" src="@/static/icon/bottom-card-bg.png" />
+                  <image class="bg-img" src="@/static/icon/item-bg-img3.png"></image>
+                </view>
+              </view>
+            </view>
+            <view class="tip">
+              <image class="icon" src="@/static/icon/leart-gold.png" />
+              <view class="text">使用人工智能需要先完成素质测评、完善简历 ></view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="match-card-out">
+        <view class="match-card">
+          <image class="match-card-bg" src="@/static/icon/match-card-bg.png" />
+          <view class="title">简历匹配职位</view>
+          <view class="match-item-container">
+            <view v-for="(item, index) in matchItems" :key="index" class="match-item-row">
+              <view
+                v-for="(subItem, subIndex) in item"
+                :key="subIndex"
+                class="match-item"
+                :style="{
+                  fontSize: subItem.fontSize + 'rpx',
+                  backgroundColor: subItem.bgColor,
+                  color: subItem.textColor,
+                  marginRight: subItem.marginRight + 'rpx',
+                  marginLeft: subItem.marginLeft + 'rpx',
+                  marginTop: subItem.marginTop + 'rpx',
+                  opacity: subItem.opacity,
+                  '--trail-color': subItem.bgColor,
+                }"
+                :class="subItem.trailClass"
+              >
+                <text class="text">{{ subItem.text }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="cards">
+        <view class="card card1 press-button" @click="navTo('/pages/nearby/nearby')">
+          <view class="card-title">附近工作</view>
+          <view class="card-text">好岗职等你来</view>
+          <image class="img1" src="@/static/icon/work-img1.png" />
+        </view>
+        <view class="card card2 press-button" @click="navTo('/packageA/pages/choiceness/choiceness')">
+          <view class="card-title">精选企业</view>
+          <view class="card-text">优选职得信赖</view>
+          <image class="img2" src="@/static/icon/work-img2.png" />
+        </view>
+      </view>
+    </view>
+    <view class="list-card">
+      <image v-if="showVideoTip" @click="showVideoTip = false" class="video-mask" src="@/static/icon/video-mask.png" />
+      <view class="nav-filter" :class="{ stuck: isSticky }">
+        <view class="filter-top" @touchmove.stop.prevent>
+          <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
+            <view class="jobs-left">
+              <view class="job button-click" :class="{ active: state.tabIndex === 'all' }" @click="choosePosition('all')"> 全部 </view>
+              <view class="job button-click" :class="{ active: state.tabIndex === index }" v-for="(item, index) in userInfo.jobTitle" :key="index" @click="choosePosition(index)">
+                {{ item }}
+              </view>
+            </view>
+          </scroll-view>
+          <image @click="navTo('/packageA/pages/addPosition/addPosition')" class="add-icon button-click" src="@/static/icon/add-circle.png"></image>
+        </view>
+        <view class="filter-bottom">
+          <view class="btm-left">
+            <view class="button-click filterbtm" :class="{ active: pageState.search.order === item.value }" v-for="item in rangeOptions" @click="handelHostestSearch(item)" :key="item.value">
+              {{ item.text }}
+            </view>
+          </view>
+          <view class="btm-right button-click" @click="openFilter">
+            筛选
+            <image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/polygon-down.png"></image>
+          </view>
+        </view>
+      </view>
+      <view class="table-list">
+        <view :scroll-y="true" class="falls-scroll">
+          <view class="falls" v-if="list.length">
+            <custom-waterfalls-flow
+              :column="columnCount"
+              :columnSpace="columnSpace"
+              ref="waterfallsFlowRef"
+              :value="list"
+              :listStyle="{
+                background: '#FFFFFF99',
+                'box-shadow': '0 16rpx 20rpx #e6e6e6b3',
+                'background-image': 'radial-gradient(circle 150rpx, #d3e5ff 25%, transparent 100%)',
+                'background-repeat': 'no-repeat',
+                'background-position': 'center bottom 30rpx',
+                'border-radius': '20rpx',
+              }"
+            >
+              <template v-slot:default="job">
+                <view class="item btn-feel" :class="{ 'm-height': !job.education }">
+                  <view class="falls-card" @click="nextDetail(job)">
+                    <view v-if="job.isHot">
+                      <view class="falls-card-pay">
+                        <view class="pay-text">
+                          <Salary-Expectation :max-salary="job.maxSalary" :min-salary="job.minSalary"></Salary-Expectation>
+                        </view>
+                        <image class="flame" src="/static/icon/flame3.png"></image>
+                      </view>
+                      <view class="falls-card-title">{{ job.jobTitle }}</view>
+                    </view>
+                    <view v-else>
+                      <view class="falls-card-title">{{ job.jobTitle }}</view>
+                      <view class="falls-card-pay" style="margin-top: 10rpx">
+                        <view class="pay-text">
+                          <Salary-Expectation :max-salary="job.maxSalary" :min-salary="job.minSalary"></Salary-Expectation>
+                        </view>
+                      </view>
+                    </view>
+
+                    <view class="fl_box fl_warp">
+                      <view class="falls-card-education mar_ri10">
+                        <dict-Label dictType="education" :value="job.education"></dict-Label>
+                      </view>
+                      <view class="falls-card-experience" v-if="job.experience">
+                        <dict-Label dictType="experience" :value="job.experience"></dict-Label>
+                      </view>
+                    </view>
+                    <!-- <view class="falls-card-company">
+                      青岛
+                      <dict-Label dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
+                    </view> -->
+                    <view class="falls-card-pepleNumber">
+                      <view>
+                        <image class="point2" src="/static/icon/pintDate2.png"></image>
+                        <view class="fl_1">
+                          {{ job.postingDate || "发布日期" }}
+                        </view>
+                      </view>
+                      <view>
+                        <image class="point3" src="/static/icon/pointpeople.png"></image>
+                        <view class="fl_1">
+                          {{ vacanciesTo(job.vacancies) }}
+                        </view>
+                      </view>
+                    </view>
+                    <view class="falls-card-company2">
+                      <image class="point3" src="/static/icon/position-icon.png"></image>
+                      <view class="fl_1">
+                        {{ job.companyName }}
+                      </view>
+                    </view>
+                    <!--  <view class="falls-card-matchingrate">
+                                        <view class=""><matchingDegree :job="job"></matchingDegree></view>
+                                        <uni-icons type="star" size="30"></uni-icons>
+                                    </view> -->
+                  </view>
+                  <view v-if="!job.education" class="recommend-card" :class="{ isBut: job.isBut }">
+                    <view class="card-content">
+                      <view class="recommend-card-title">在找岗位：{{ job.jobCategory }}的工作吗？</view>
+                      <!-- <view class="recommend-card-tip">{{ job.tip }}</view> -->
+                      <view class="recommend-card-tip">确认您的兴趣，为您推荐更多合适的岗位</view>
+                      <!-- <view class="recommend-card-line"></view> -->
+                      <view class="recommend-card-controll">
+                        <view class="controll-no" @click="clearfindJob(job)">不是</view>
+                        <view class="controll-yes" @click="findJob(job)">是的</view>
+                      </view>
+                    </view>
+                    <view class="card-bottom"></view>
+                  </view>
+                </view>
+              </template>
+            </custom-waterfalls-flow>
+            <loadmore ref="loadmoreRef"></loadmore>
+            <view v-if="showScrollBottom" style="height: 200px"></view>
+          </view>
+          <empty v-else pdTop="200"></empty>
+        </view>
+      </view>
+    </view>
+
+    <!-- 筛选 -->
+    <select-filter ref="selectFilterModel"></select-filter>
+    <!-- <view class="maskFristEntry" v-if="maskFristEntry">
+            <view class="entry-content">
+                <text class="text1">左滑查看视频</text>
+                <text class="text2">左滑查看视频</text>
+                <view class="goExperience">去体验</view>
+                <view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
+            </view>
+        </view> -->
+  </scroll-view>
+</template>
+
+<script setup>
+import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick, getCurrentInstance } from "vue";
+import img from "@/static/icon/filter.png";
+import dictLabel from "@/components/dict-Label/dict-Label.vue";
+const { $api, navTo, vacanciesTo, formatTotal, throttle } = inject("globalFunction");
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { storeToRefs } from "pinia";
+import useUserStore from "@/stores/useUserStore";
+const { userInfo } = storeToRefs(useUserStore());
+import useDictStore from "@/stores/useDictStore";
+const { getTransformChildren, oneDictData } = useDictStore();
+import useLocationStore from "@/stores/useLocationStore";
+import selectFilter from "@/components/selectFilter/selectFilter.vue";
+import { useRecommedIndexedDBStore, jobRecommender } from "@/stores/useRecommedIndexedDBStore.js";
+import { useScrollDirection } from "@/hook/useScrollDirection";
+import { useColumnCount } from "@/hook/useColumnCount";
+const { isScrollingDown, handleScroll } = useScrollDirection();
+const recommedIndexDb = useRecommedIndexedDBStore();
+
+const { proxy } = getCurrentInstance();
+
+const showVideoTip = ref(true);
+const isSticky = ref(false);
+const showScrollBottom = ref(false);
+const scrollTop = ref(0);
+
+const emits = defineEmits(["onShowTabbar"]);
+
+const waterfallsFlowRef = ref(null);
+const loadmoreRef = ref(null);
+const conditionSearch = ref({});
+const waterfallcolumn = ref(2);
+const maskFristEntry = ref(true);
+const state = reactive({
+  tabIndex: "all",
+});
+const list = ref([]);
+const pageState = reactive({
+  page: 0,
+  total: 0,
+  maxPage: 2,
+  pageSize: 10,
+  search: {
+    order: 0,
+  },
+});
+const inputText = ref("");
+const showFilter = ref(false);
+const selectFilterModel = ref(null);
+const showModel = ref(false);
+const rangeOptions = ref([
+  { value: 0, text: "推荐" },
+  { value: 1, text: "最热" },
+  { value: 2, text: "最新发布" },
+]);
+const isLoaded = ref(false);
+
+const matchItems = ref([]);
+
+const occupations = ["律师", "工程师", "医生", "教师", "设计师", "程序员", "会计师", "建筑师", "护士", "销售", "经理", "顾问", "分析师", "研究员", "编辑", "记者", "摄影师", "厨师", "司机", "保安", "客服", "行政", "人事", "市场", "运营", "产品", "测试", "运维", "前端", "后端", "全栈", "数据", "策划", "导演", "演员", "歌手", "作家", "画家", "翻译", "导游"];
+
+const colors = ["#0069FE", "#FF9400", "#FF6969", "#21EA85", "#87E2EC"];
+
+const generateMatchItems = () => {
+  const rows = 4; // 4行
+  const itemsPerRow = 4; // 每行4个item
+  const newItems = [];
+
+  for (let row = 0; row < rows; row++) {
+    const rowItems = [];
+
+    for (let col = 0; col < itemsPerRow; col++) {
+      // 生成随机职业
+      const randomIndex = Math.floor(Math.random() * occupations.length);
+      const occupation = occupations[randomIndex];
+
+      // 生成随机字体大小
+      const fontSize = Math.floor(Math.random() * 15) + 18;
+
+      // 生成随机背景色和透明度
+      const colorIndex = Math.floor(Math.random() * colors.length);
+      const opacity = (Math.random() * 1 + 0.4).toFixed(2);
+      const bgColor = hexToRgba(colors[colorIndex], opacity);
+
+      // 根据背景色亮度决定文字颜色
+      const textColor = getTextColor(colors[colorIndex]);
+
+      // 生成随机偏移量
+      const marginRight = Math.floor(Math.random() * 70) + 20;
+      const marginLeft = Math.floor(Math.random() * 40) + 20;
+      const marginTop = Math.floor(Math.random() * 60) - 60;
+
+      // 根据列位置决定拖尾效果
+      let trailClass;
+      if (col === 0) {
+        trailClass = "trail-right";
+      } else if (col === itemsPerRow - 1) {
+        trailClass = "trail-left";
+      } else {
+        trailClass = "trail-center";
+      }
+
+      rowItems.push({
+        text: occupation,
+        fontSize: fontSize,
+        bgColor: bgColor,
+        textColor: textColor,
+        marginRight: marginRight,
+        marginLeft: col == 0 ? marginLeft : 0,
+        marginTop: marginTop,
+        opacity: opacity,
+        trailClass: trailClass,
+      });
+    }
+
+    newItems.push(rowItems);
+  }
+
+  matchItems.value = newItems;
+};
+
+const checkStickyStatus = (e) => {
+  scrollTop.value = e.detail.scrollTop;
+  nextTick(() => {
+    const query = uni.createSelectorQuery().in(proxy);
+    query
+      .select(".nav-filter")
+      .boundingClientRect()
+      .exec((res) => {
+        if (res[0]) {
+          const rect = res[0];
+          const shouldBeSticky = rect.top <= 0;
+          if (isSticky.value !== shouldBeSticky) {
+            isSticky.value = shouldBeSticky;
+          }
+        }
+      });
+  });
+};
+
+const hexToRgba = (hex, opacity) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
+const getTextColor = (hexColor) => {
+  const r = parseInt(hexColor.slice(1, 3), 16);
+  const g = parseInt(hexColor.slice(3, 5), 16);
+  const b = parseInt(hexColor.slice(5, 7), 16);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness > 180 ? "#1D71EF" : "#FFFFFF";
+};
+
+const { columnCount, columnSpace } = useColumnCount(() => {
+  pageState.pageSize = 10 * (columnCount.value - 1);
+  getJobRecommend("refresh");
+  nextTick(() => {
+    waterfallsFlowRef.value?.refresh?.();
+    useLocationStore().getLocation();
+  });
+});
+
+async function loadData() {
+  generateMatchItems(); // ******生成简历匹配职位虚拟数据
+  try {
+    if (isLoaded.value) return;
+    isLoaded.value = true;
+  } catch (err) {
+    isLoaded.value = false; // 重置状态允许重试
+    throw err;
+  }
+}
+
+const scrollBottom = () => {
+  if (loadmoreRef?.value?.status == "loading" || loadmoreRef?.value?.status == "noMore") return;
+  loadmoreRef.value.change("loading");
+  stopScroll();
+  if (state.tabIndex === "all") {
+    getJobRecommend();
+  } else {
+    getJobList();
+  }
+};
+
+function stopScroll() {
+  scrollTop.value -= 100;
+  showScrollBottom.value = true;
+  setTimeout(() => {
+    showScrollBottom.value = false;
+  }, 400);
+}
+
+function findJob(job) {
+  if (job.isBut) {
+    $api.msg("已确认");
+  } else {
+    list.value = list.value.map((item) => {
+      if (item.recommend && item.jobCategory === job.jobCategory) {
+        return {
+          ...item,
+          isBut: true,
+        };
+      }
+      return item;
+    });
+    const jobstr = job.jobCategory;
+    const jobsObj = {
+      地区: "area",
+      岗位: "jobTitle",
+      经验: "experience",
+    };
+    const [name, value] = jobstr.split(":");
+    const nameAttr = jobsObj[name];
+    if (name === "岗位") {
+      conditionSearch.value[nameAttr] = value;
+    } else {
+      const valueAttr = oneDictData(nameAttr).filter((item) => item.label === value);
+      if (valueAttr.length) {
+        const val = valueAttr[0].value;
+        conditionSearch.value[nameAttr] = val;
+      }
+    }
+  }
+}
+
+function clearfindJob(job) {
+  if (job.isBut) {
+    $api.msg("已确认");
+  } else {
+    list.value = list.value.map((item) => {
+      if (item.recommend && item.jobCategory === job.jobCategory) {
+        return {
+          ...item,
+          isBut: true,
+        };
+      }
+      return item;
+    });
+    recommedIndexDb.deleteRecords(job);
+  }
+}
+
+function nextDetail(job) {
+  // 记录岗位类型，用作数据分析
+  if (job.jobCategory) {
+    const recordData = recommedIndexDb.JobParameter(job);
+    recommedIndexDb.addRecord(recordData);
+  }
+  navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
+}
+
+function openFilter() {
+  showFilter.value = true;
+  emits("onShowTabbar", false);
+  selectFilterModel.value?.open({
+    title: "筛选",
+    maskClick: true,
+    success: (values) => {
+      pageState.search = {
+        ...pageState.search,
+      };
+      for (const [key, value] of Object.entries(values)) {
+        pageState.search[key] = value.join(",");
+      }
+      showFilter.value = false;
+      getJobList("refresh");
+    },
+    cancel: () => {
+      showFilter.value = false;
+      emits("onShowTabbar", true);
+    },
+  });
+}
+
+function handleFilterConfirm(e) {
+  console.log(e);
+}
+
+function choosePosition(index) {
+  state.tabIndex = index;
+  list.value = [];
+  if (index === "all") {
+    pageState.search = {
+      order: pageState.search.order,
+    };
+    inputText.value = "";
+    getJobRecommend("refresh");
+  } else {
+    // const id = useUserStore().userInfo.jobTitleId.split(',')[index];
+    pageState.search.jobTitle = userInfo.value.jobTitle[index];
+    inputText.value = "";
+    getJobList("refresh");
+  }
+}
+
+function handelHostestSearch(val) {
+  pageState.search.order = val.value;
+  if (state.tabIndex === "all") {
+    getJobRecommend("refresh");
+  } else {
+    getJobList("refresh");
+  }
+}
+
+function getJobRecommend(type = "add") {
+  if (type === "refresh") {
+    list.value = [];
+    if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
+  }
+  let params = {
+    pageSize: pageState.pageSize,
+    sessionId: useUserStore().seesionId,
+    ...pageState.search,
+    ...conditionSearch.value,
+  };
+  let comd = {
+    recommend: true,
+    jobCategory: "",
+    tip: "确认你的兴趣，为您推荐更多合适的岗位",
+  };
+  $api.createRequest("/app/job/recommend", params).then((resData) => {
+    const { data, total } = resData;
+    pageState.total = 0;
+    if (type === "add") {
+      // 记录系统
+      recommedIndexDb.getRecord().then((res) => {
+        if (res.length) {
+          // 数据分析系统
+          const resultData = recommedIndexDb.analyzer(res);
+          const { sort, result } = resultData;
+          // 岗位询问系统
+          const conditionCounts = Object.fromEntries(
+            sort.filter((item) => item[1] > 1) // 过滤掉次数为 1 的项
+          );
+          jobRecommender.updateConditions(conditionCounts);
+
+          const question = jobRecommender.getNextQuestion();
+
+          if (question) {
+            comd.jobCategory = question;
+            data.unshift(comd);
+          }
+        }
+        const reslist = dataToImg(data);
+        list.value.push(...reslist);
+      });
+    } else {
+      list.value = dataToImg(data);
+    }
+    // 切换状态
+    if (loadmoreRef.value && typeof loadmoreRef.value.change === "function") {
+      if (data.length < pageState.pageSize) {
+        loadmoreRef.value.change("noMore");
+      } else {
+        loadmoreRef.value.change("more");
+      }
+    }
+    // 当没有岗位，刷新sessionId重新啦
+    if (!data.length) {
+      useUserStore().initSeesionId();
+    }
+  });
+}
+
+function getJobList(type = "add") {
+  if (type === "add" && pageState.page < pageState.maxPage) {
+    pageState.page += 1;
+  }
+  if (type === "refresh") {
+    list.value = [];
+    pageState.page = 1;
+    pageState.maxPage = 2;
+    // waterfallsFlowRef.value.refresh();
+    if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
+  }
+  let params = {
+    current: pageState.page,
+    pageSize: pageState.pageSize,
+    ...pageState.search,
+    // ...conditionSearch.value,
+  };
+
+  $api.createRequest("/app/job/list", params).then((resData) => {
+    const { rows, total } = resData;
+    if (type === "add") {
+      const str = pageState.pageSize * (pageState.page - 1);
+      const end = list.value.length;
+      const reslist = dataToImg(rows);
+      list.value.splice(str, end, ...reslist);
+    } else {
+      list.value = dataToImg(rows);
+    }
+    pageState.total = resData.total;
+    pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
+    // 切换状态
+    if (loadmoreRef.value && typeof loadmoreRef.value.change === "function") {
+      if (rows.length < pageState.pageSize) {
+        loadmoreRef.value?.change("noMore");
+      } else {
+        loadmoreRef.value?.change("more");
+      }
+    }
+  });
+}
+
+function dataToImg(data) {
+  return data.map((item) => ({
+    ...item,
+    image: img,
+    hide: true,
+  }));
+}
+
+defineExpose({ loadData });
+</script>
+
+<style lang="stylus" scoped>
+// .maskFristEntry
+//     position: fixed;
+//     // right: 20rpx;
+//     // bottom: calc(50% - 200rpx);
+//     height: 100vh
+//     width: 100vw
+//     background: rgba(0,0,0,0.3)
+//     .entry-content
+//         display: flex;
+//         align-items: center
+//         position: absolute
+//         left: 50%
+//         top: 40%
+//         transform: translate(-50%, -50%)
+//         flex-direction: column
+//         background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
+//         background-size: 100% 100%;
+//         width: 480rpx
+//         height: 584rpx
+//         // padding-left: 80rpx
+//         .text1
+//             margin-top: 370rpx
+//             font-size: 36rpx
+//             background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
+//             -webkit-background-clip: text;
+//             -webkit-text-fill-color: transparent;
+//             background-clip: text; /* 有些浏览器兼容用 */
+//             text-fill-color: transparent;
+//             padding-left: 28rpx
+//         .text2
+//             padding-left: 28rpx
+//             margin-top: 8rpx
+//             font-size: 20rpx;
+//             color: #666666;
+//             text-align: center;
+//         .indicateArrow
+//             height: 76rpx
+//             width: 68rpx
+//         .indicatefristEntry
+//             width: 244rpx
+//             height: 244rpx
+//         .goExperience
+//             margin-left: 28rpx
+//             margin-top: 28rpx
+//             width: 160rpx;
+//             height: 60rpx;
+//             background: linear-gradient( 180deg, #9974FD 0%, #286BFA 100%);
+//             border-radius: 12rpx 12rpx 12rpx 12rpx;
+//             font-size: 28rpx;
+//             color: #FFFFFF;
+//             text-align: center;
+//             line-height: 60rpx
+//         .maskFristEntry-Close
+//             position: absolute;
+//             left: calc(50% - 10rpx);
+//             bottom: -130rpx
+//             width: 42rpx
+//             height: 42rpx
+//             background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
+//             border-radius: 50%;
+//         .maskFristEntry-Close::before
+//             position: absolute;
+//             left: calc( 50% - 2rpx)
+//             top: calc( 50% - 10rpx)
+//             transform: rotate(45deg);
+//             content: ''
+//             background: #FFFFFF
+//             width: 4rpx
+//             height: 20rpx
+//         .maskFristEntry-Close::after
+//             position: absolute;
+//             left: calc( 50% - 2rpx)
+//             top: calc( 50% - 10rpx)
+//             transform: rotate(-45deg);
+//             content: ''
+//             background: #FFFFFF
+//             width: 4rpx
+//             height: 20rpx
+
+.app-container
+    width: 100%;
+    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: url('@/static/icon/background2.png') 0 0 no-repeat;
+    background-size: 100% 728rpx;
+    background-color: #E5F4FB;
+    display: flex;
+    flex-direction: column
+.container-search
+    width:100%;
+    padding:60rpx 0 0rpx;
+    position: relative
+    .bg-text
+        position :absolute
+        width:100%;
+        top:10%;
+        left:0
+    .search-inner
+        position relative;
+        z-index:1
+        width:100%;
+        box-sizing: border-box;
+        padding:10% 22rpx 0;
+        display:flex;
+        .inner-left
+          flex:1
+          overflow:hidden
+          display:flex
+          flex-direction: column;
+
+        .bg-robot
+            flex:1
+            margin-left: - 70rpx
+            margin-right:-20rpx
+            margin-bottom:-13%
+        .bg-text2
+            width:100%;
+    .search-input
+        flex:1
+        margin-top:8%;
+        margin-bottom:18%;
+        display: flex
+        align-items: center;
+        width: 100%;
+        height: 75rpx;
+        background: #FFFFFF;
+        border-radius: 49rpx;
+        box-sizing: border-box;
+        padding:0 24rpx;
+        .icon
+            width:40rpx;
+            height:40rpx;
+            margin-right:10rpx;
+        .iconsearch
+            padding-left: 36rpx
+        .inpute
+            font-family: ABeeZee;
+            font-weight: 400;
+            font-style: Regular;
+            font-size: 24rpx;
+            color:#545454
+    .chart
+        font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+        width: 170rpx;
+        background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%);
+        box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
+        border-radius: 80rpx 80rpx 80rpx 80rpx;
+        border: 2rpx solid #FFFFFF;
+        text-align: center
+        font-weight: 500;
+        font-size: 28rpx;
+        height: 36rpx;
+        color: #000000;
+        padding: 20rpx 30rpx
+.ai-card-out
+    width:100%;
+    box-sizing:border-box
+    padding: 0 28rpx
+    margin-top:-35rpx
+    position relative;
+    z-index:1
+.ai-card
+  position relative;
+  .ai-card-bg
+    width:100%;
+    height:100%;
+    position: absolute;
+    left:0;
+    top:0;
+  .ai-card-inner
+      width:100%;
+      height:100%;
+      position:relative;
+      z-index: 1
+      box-sizing:border-box;
+      padding:28rpx 36rpx 40rpx;
+      .title
+        font-family: Alibaba PuHuiTi;
+        font-weight:700;
+        font-size: 32rpx;
+        color:#333333
+      .item-box
+          width:100%;
+          margin-top:30rpx;
+          display:flex;
+          justify-content: space-between;
+          .box-l
+              flex:1
+              margin-right:10rpx
+          .box-r
+              flex:1
+              margin-left:10rpx
+          .title
+              font-family: Alibaba PuHuiTi;
+              font-weight: 700;
+              font-style: Bold;
+              font-size: 28rpx;
+              color: #2E75FF;
+              position relative;
+              z-index:1
+          .des
+              font-family: Alibaba PuHuiTi;
+              font-weight: 400;
+              font-style: Regular;
+              font-size: 24rpx;
+              margin-top:4rpx;
+              position relative;
+              z-index:1
+              color: #00000070;
+          .bg
+              position:absolute;
+              top:0;
+              left:0;
+              width:100%;
+              height:100%
+          .item1
+              height:272rpx;
+              width:100%;
+              border-radius: 20rpx;
+              background: linear-gradient(127.66deg, #CDE4FF 6.44%, #EAFEFF 93.56%);
+              box-sizing:border-box;
+              padding:34rpx 32rpx;
+              position:relative
+              .bg-text
+                  position:absolute;
+                  bottom:40rpx;
+                  left:0;
+                  width:100%;
+                  opacity 0.5
+              .bg-img
+                  position:absolute;
+                  width:168rpx;
+                  height:166rpx;
+                  right:16rpx;
+                  bottom:12rpx;
+          .item2
+              height:126rpx;
+              width:100%;
+              border-radius: 20rpx;
+              box-sizing:border-box;
+              padding:26rpx 28rpx;
+              position :relative
+              background: linear-gradient(100.72deg, #C3E2FF 1.79%, #FFEFDD 98.21%);
+              .bg-img
+                  position:absolute;
+                  width:212rpx;
+                  height:148rpx;
+                  right:-50rpx;
+                  bottom:8rpx;
+          .item3
+              height:126rpx;
+              width:100%;
+              border-radius: 20rpx;
+              box-sizing:border-box;
+              padding:26rpx 28rpx;
+              margin-top:20rpx;
+              position :relative
+              background: linear-gradient(100.72deg, #FFDBDB 1.79%, #FFF8F0 98.21%);
+              .bg-img
+                  position:absolute;
+                  width:102rpx;
+                  height:92rpx;
+                  right:0rpx;
+                  bottom:44rpx;
+      .tip
+          width:100%;
+          height:60rpx;
+          display:flex;
+          align-items:center;
+          box-sizing:border-box;
+          padding:0 26rpx;
+          border-radius: 20rpx;
+          background:#FFF9E1
+          margin-top:20rpx;
+          .icon
+              width:32rpx;
+              height:32rpx;
+              margin-right:14rpx;
+          .text
+              font-family: ABeeZee;
+              font-weight: 400;
+              font-style: Regular;
+              font-size: 24rpx;
+              color:#E1A374
+.match-card-out
+    width:100%;
+    box-sizing:border-box
+    padding: 0 28rpx
+    position relative;
+    z-index:1
+    margin-top:20rpx;
+.match-card
+  width 100%;
+  box-sizing:border-box;
+  position relative;
+  background: #ffffffE6;
+  border-radius: 24rpx;
+  padding:32rpx 36rpx;
+  .title
+      font-family: Alibaba PuHuiTi;
+      font-weight:700;
+      font-size: 32rpx;
+      color:#333333
+  .match-card-bg
+    width:100%;
+    height:100%;
+    position: absolute;
+    left:0;
+    top:0;
+  .match-item-container
+    width:100%;
+    margin-top:30rpx;
+    .match-item-row
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding:30rpx 0;
+    .match-item
+      padding: 8rpx 20rpx;
+      border-radius: 30rpx;
+      white-space: nowrap;
+      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s;
+      position: relative;
+      .text{
+        position: relative;
+        z-index:2
+        white-space: nowrap
+      }
+    .trail-center::after
+        content: '';
+        position: absolute;
+        bottom: -15rpx;
+        left: 10%;
+        width: 80%;
+        height: 30rpx;
+        background: linear-gradient(to bottom, var(--trail-color), transparent);
+        border-radius: 30% 30% 100% 100%;
+        filter: blur(4rpx);
+    .trail-left::after
+        content: '';
+        position: absolute;
+        bottom: -15rpx;
+        left: -20%;
+        width: 90%;
+        height: 40rpx;
+        background: linear-gradient(to bottom, var(--trail-color), transparent);
+        border-radius: 50%;
+        filter: blur(4rpx);
+        transform: skewX(-8deg);
+    .trail-right::after
+        content: '';
+        position: absolute;
+        bottom: -20rpx;
+        right: -20%;
+        width: 90%;
+        height: 40rpx;
+        background: linear-gradient(to bottom, var(--trail-color), transparent);
+        border-radius: 50%;
+        filter: blur(4rpx);
+        transform: skewX(8deg);
+
+.cards
+    width :100%;
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding:30rpx 28rpx;
+    gap:20rpx;
+    .card1
+        background:linear-gradient(140deg, #FF6D5E,#FF999A);
+    .card2
+        background:linear-gradient(140deg,#8788DA,#C6F4FE);
+    .card
+        flex:1;
+        position :relative;
+        height:158rpx;
+        box-sizing: border-box;
+        padding:36rpx 34rpx;
+        border-radius: 20rpx
+        .img1
+            width:180rpx;
+            height:122rpx;
+            position: absolute;
+            right:-20rpx;
+            bottom:4rpx
+        .img2
+            width:148rpx;
+            height:148rpx;
+            position: absolute;
+            right:-20rpx;
+            bottom:-10rpx;
+        .card-title
+            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+            font-weight: 600;
+            font-size: 32rpx;
+            color: #FFFFFF;
+        .card-text
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #FFFFFF90;
+            margin-top: 8rpx
+.list-card{
+    display:flex;
+    flex-direction: column;
+    background: linear-gradient(to bottom, #fff 0%, #E5F3FA 100%);
+    border-radius: 40rpx 40rpx 0 0
+    position:relative;
+    z-index:3
+    transition: .5s
+    .video-mask{
+      position:fixed;
+      right:10rpx;
+      bottom:100rpx;
+      width:264rpx;
+      height:298rpx;
+      z-index:6
+    }
+}
+.no-radius
+    border-radius: 0
+.nav-filter.stuck
+    background: linear-gradient( to bottom, #fff 85%,  #ffffff1A 100%);
+    padding-bottom:20rpx
+.nav-filter
+    position:sticky;
+    z-index:5;
+    top:calc(var(--window-top) + var(--status-bar-height));
+    padding: 32rpx 28rpx 0 28rpx
+    font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+    .filter-top
+        display: flex
+        justify-content: space-between;
+        align-items: center;
+        .tab-scroll
+            flex: 1;
+            overflow: hidden;
+            margin-right: 20rpx
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: clip;
+            .jobs-left
+                display: flex
+                flex-wrap: nowrap
+                align-items: center
+                .job
+                    font-weight: 400;
+                    font-size: 26rpx;
+                    color: #999;
+                    margin-right: 32rpx;
+                    white-space: nowrap
+                .active
+                    font-weight: 700;
+                    font-size: 32rpx;
+                    color: #1677FF;
+
+        .add-icon{
+                width:48rpx;
+                height:48rpx;
+        }
+    .filter-bottom
+        display: flex
+        justify-content: space-between
+        padding: 20rpx 0;
+        align-items: center
+        .btm-left
+            display: flex
+            font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            .filterbtm
+                font-weight: 400;
+                font-size: 24rpx;
+                color: #999999;
+                margin-right: 20rpx
+                padding: 6rpx 20rpx
+                display:flex
+                align-items: center
+                justify-content: center
+                background: #F5F8FA
+                border-radius: 40rpx
+            .active
+                font-weight: 500;
+                color: #fff;
+                background: #1677FF
+        .btm-right
+            display: flex
+            align-items: center
+            padding:6rpx 30rpx
+            border:2rpx solid #F2F2F2
+            border-radius: 35rpx
+            font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #999999;
+            background: #eeeeee33
+            .right-sx
+                width: 14rpx;
+                height: 14rpx;
+                margin-left: 20rpx
+                transition: .3s
+            .active
+                transform: rotate(-180deg)
+.table-list
+    position:sticky;
+    z-index:4;
+    top:calc(var(--window-top) + var(--status-bar-height));
+    .load-trigger
+        height:200rpx
+    .falls-scroll
+        width: 100%
+        height: 100%
+        .falls
+            padding: 28rpx 28rpx;
+            .item,.m-height{
+                min-height: 370rpx
+            }
+            .item
+                position: relative;
+                // background: linear-gradient( 180deg, rgba(19, 197, 124, 0.4) 0%, rgba(255, 255, 255, 0) 30%), rgba(255, 255, 255, 0);
+                .falls-card
+                    padding: 30rpx 20rpx 32rpx 30rpx ;
+                    .falls-card-title
+                        font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+                        color: #606060;
+                        text-align: left;
+                        word-break:break-all
+                        font-weight: 500;
+                        font-size: 28rpx;
+                        color: #333;
+                        margin-top: 10rpx;
+                    .falls-card-pay
+                        // height: 50rpx;
+                        word-break:break-all
+                        color: #002979;
+                        text-align: left;
+                        display: flex;
+                        align-items: end;
+                        position: relative
+                        .pay-text
+                            font-family: DIN-Medium;
+                            color: #4C6EFB;
+                        .flame
+                            width:40rpx;
+                            height:40rpx;
+                            margin-left: 12rpx;
+                    .falls-card-education,.falls-card-experience
+                        white-space: nowrap;
+                        padding:7rpx 12rpx;
+                        font-size: 24rpx;
+                        color:#999999;
+                        background:#FFFFFF
+                        border-radius: 10rpx;
+                        margin-top:20rpx;
+
+                    .falls-card-company,.falls-card-pepleNumber
+                        margin-top: 22rpx;
+                        font-size: 24rpx;
+                        color: #999999;
+                        line-height: 25rpx;
+                        text-align: left;
+                    .falls-card-pepleNumber
+                        display: flex;
+                        justify-content: space-between;
+                        flex-wrap: wrap
+                        margin-top: 20rpx;
+                        font-weight: 400;
+                        font-size: 24rpx;
+                        color: #999999;
+                        line-height: 46rpx
+                        view
+                            display:flex
+                            align-items: center
+                            white-space: nowrap;
+                            .point2
+                                width:40rpx;
+                                height:40rpx;
+                                margin-right:4rpx
+                            .point3
+                                margin: 0rpx 4rpx 0 0
+                                height: 40rpx
+                                width: 40rpx
+                    .falls-card-matchingrate
+                        margin-top: 10rpx;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        font-size: 21rpx;
+                        color: #4778EC;
+                        text-align: left;
+                    .falls-card-company2
+                        margin-top: 16rpx;
+                        font-size: 24rpx;
+                        color: #999999;
+                        text-align: left;
+                        display: flex
+                        .point3
+                            margin: 4rpx 4rpx 0 0
+                            height: 40rpx
+                            width: 40rpx
+// 推荐卡片
+.recommend-card
+    position:absolute
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    box-sizing: border-box
+    backdrop-filter: blur(20rpx);
+    display: flex;
+    flex-direction: column;
+    .card-bottom{
+        width:100%;
+        flex:1;
+        overflow: hidden;
+        background: #1677FF;
+        border-radius:  0 0 20rpx 20rpx
+    }
+    .card-content
+        position: relative;
+        z-index: 2;
+        background: linear-gradient(to bottom, #FFFFFF40 30%, #ffffff 50%, #DFECFF 100%);
+        padding :48rpx 24rpx 35rpx
+        .recommend-card-title
+            font-weight: 500;
+            font-size: 32rpx;
+            color: #000;
+        .recommend-card-tip
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #999999;
+            margin-top: 12rpx
+        .recommend-card-line
+            width: calc(100%);
+            height: 0rpx;
+            border-radius: 0rpx 0rpx 0rpx 0rpx;
+            border: 2rpx dashed rgba(0,0,0,0.14);
+            margin-top: 50rpx
+            position: relative
+        // .recommend-card-line::before
+        //     position: absolute
+        //     content: ''
+        //     left: 0
+        //     top: 0
+        //     transform: translate(-50% - 90rpx, -50%)
+        //     width: 28rpx;
+        //     height: 28rpx;
+        //     background: #F4F4F4;
+        //     border-radius: 50%;
+        // .recommend-card-line::after
+        //     position: absolute
+        //     content: ''
+        //     right: 0
+        //     top: 0
+        //     transform: translate(50% + 90rpx, -50%)
+        //     width: 28rpx;
+        //     height: 28rpx;
+        //     background: #F4F4F4;
+        //     border-radius: 50%;
+        .recommend-card-controll
+            display: flex
+            align-items: center
+            justify-content: space-between
+            margin-top: 40rpx
+            padding: 0 6rpx;
+            .controll-yes
+                width: 130rpx;
+                height: 56rpx;
+                background: #1677FF;
+                border-radius: 35rpx;
+                text-align: center;
+                line-height: 56rpx
+                color: #fff
+                fontweight:500
+                font-size: 24rpx;
+            .controll-no
+                width: 130rpx;
+                height: 56rpx;
+                border-radius: 35rpx;
+                text-align: center;
+                line-height: 56rpx
+                color: #74AEFF
+                fontweight:500
+                font-size: 24rpx;
+                border: 2rpx solid #74AEFF
+                box-sizing: border-box
+            .controll-yes:active, .controll-no:active
+                width: 120rpx;
+                height: 66rpx;
+                line-height: 66rpx
+                background: #e8e8e8
+                border: 2rpx solid #e8e8e8
+
+.isBut{
+    filter: grayscale(100%);
+}
+</style>
diff --git a/pages/index/components/index-refactor.vue b/pages/index/components/index-refactor.vue
index 170c6e3..bf1942d 100644
--- a/pages/index/components/index-refactor.vue
+++ b/pages/index/components/index-refactor.vue
@@ -1,77 +1,65 @@
 <template>
-  <view class="app-container">
-    <view class="nav-hidden hidden-animation" :class="{ 'hidden-height': scrollDeep, 'hidden-all': hiddenNav && scrollDeep }">
+  <scroll-view :scroll-y="true" class="app-container" :scroll-top="scrollTop" @scroll="checkStickyStatus" @scrolltolower="scrollBottom">
+    <view class="nav-hidden">
       <view class="container-search">
         <image class="bg-text" mode="widthFix" src="@/static/icon/index-text-bg.png"></image>
-        <image class="bg-robot button-click" mode="widthFix" src="@/static/icon/index-robot.png"></image>
         <view class="search-inner">
-          <image class="bg-text2" mode="widthFix" src="@/static/icon/index-text-bg2.png"></image>
-          <view class="search-input button-click" @click="navTo('/pages/search/search')">
-            <image class="icon" src="@/static/icon/index-search.png"></image>
-            <text class="inpute">请告诉我想找什么工作</text>
-          </view>
-        </view>
-      </view>
-      <view class="ai-card">
-        <image class="ai-card-bg" src="@/static/icon/ai-card-bg.png" />
-        <view class="ai-card-inner">
-          <view class="title">人工智能专区</view>
-          <view class="item-box">
-            <view class="box-l">
-              <view class="item1 button-click">
-                <view class="title">AI素质测评</view>
-                <view class="des">提高个人素质</view>
-                <image class="bg-text" mode="widthFix" src="@/static/icon/item-bg-text.png"></image>
-                <image class="bg-img" src="@/static/icon/item-bg-img1.png"></image>
-              </view>
-            </view>
-            <view class="box-r">
-              <view class="item2 button-click">
-                <view class="title">就业指导</view>
-                <view class="des">根据个人建议</view>
-                <image class="bg" src="@/static/icon/top-card-bg.png" />
-                <image class="bg-img" src="@/static/icon/item-bg-img2.png"></image>
-              </view>
-              <view class="item3 button-click">
-                <view class="title">AI模拟面试</view>
-                <view class="des">提高面试成功率</view>
-                <image class="bg" src="@/static/icon/bottom-card-bg.png" />
-                <image class="bg-img" src="@/static/icon/item-bg-img3.png"></image>
-              </view>
+          <view class="inner-left">
+            <image class="bg-text2" mode="widthFix" src="@/static/icon/index-text-bg2.png"></image>
+            <view class="search-input button-click" @click="navTo('/pages/search/search')">
+              <image class="icon" src="@/static/icon/index-search.png"></image>
+              <text class="inpute">请告诉我想找什么工作</text>
             </view>
           </view>
-          <view class="tip">
-            <image class="icon" src="@/static/icon/leart-gold.png" />
-            <view class="text">使用人工智能需要先完成素质测评、完善简历 ></view>
-          </view>
+          <image class="bg-robot button-click" mode="widthFix" src="@/static/icon/index-robot.png"></image>
         </view>
       </view>
-      <view class="match-card">
-        <image class="match-card-bg" src="@/static/icon/match-card-bg.png" />
-        <view class="title">简历匹配职位</view>
-        <view class="match-item-container">
-          <view v-for="(item, index) in matchItems" :key="index" class="match-item-row">
-            <view
-              v-for="(subItem, subIndex) in item"
-              :key="subIndex"
-              class="match-item"
-              :style="{
-                fontSize: subItem.fontSize + 'rpx',
-                backgroundColor: subItem.bgColor,
-                color: subItem.textColor,
-                marginRight: subItem.marginRight + 'rpx',
-                marginLeft: subItem.marginLeft + 'rpx',
-                marginTop: subItem.marginTop + 'rpx',
-                opacity: subItem.opacity,
-                '--trail-color': subItem.bgColor,
-              }"
-              :class="subItem.trailClass"
-            >
-              <text class="text">{{ subItem.text }}</text>
+      <view class="ai-card-out">
+        <view class="ai-card">
+          <image class="ai-card-bg" src="@/static/icon/ai-card-bg.png" />
+          <view class="ai-card-inner">
+            <view class="title">人工智能专区</view>
+            <view class="item-box">
+              <view class="box-l">
+                <view class="item1 button-click">
+                  <view class="title">AI素质测评</view>
+                  <view class="des">提高个人素质</view>
+                  <image class="bg-text" mode="widthFix" src="@/static/icon/item-bg-text.png"></image>
+                  <image class="bg-img" src="@/static/icon/item-bg-img1.png"></image>
+                </view>
+              </view>
+              <view class="box-r">
+                <view class="item2 button-click">
+                  <view class="title">就业指导</view>
+                  <view class="des">根据个人建议</view>
+                  <image class="bg" src="@/static/icon/top-card-bg.png" />
+                  <image class="bg-img" src="@/static/icon/item-bg-img2.png"></image>
+                </view>
+                <view class="item3 button-click">
+                  <view class="title">AI模拟面试</view>
+                  <view class="des">提高面试成功率</view>
+                  <image class="bg" src="@/static/icon/bottom-card-bg.png" />
+                  <image class="bg-img" src="@/static/icon/item-bg-img3.png"></image>
+                </view>
+              </view>
+            </view>
+            <view class="tip">
+              <image class="icon" src="@/static/icon/leart-gold.png" />
+              <view class="text">使用人工智能需要先完成素质测评、完善简历 ></view>
             </view>
           </view>
         </view>
       </view>
+      <view class="match-card-out">
+        <view class="match-card">
+          <image class="match-card-bg" src="@/static/icon/match-card-bg.png" />
+          <view class="title">简历匹配职位</view>
+          <view class="match-item-container">
+            <AIMatch ></AIMatch>
+          </view>
+        </view>
+      </view>
+
       <view class="cards">
         <view class="card card1 press-button" @click="navTo('/pages/nearby/nearby')">
           <view class="card-title">附近工作</view>
@@ -85,9 +73,9 @@
         </view>
       </view>
     </view>
-    <view class="list-card" :class="{ 'no-radius': scrollDeep }">
+    <view class="list-card">
       <image v-if="showVideoTip" @click="showVideoTip = false" class="video-mask" src="@/static/icon/video-mask.png" />
-      <view class="nav-filter">
+      <view class="nav-filter" :class="{ stuck: isSticky }">
         <view class="filter-top" @touchmove.stop.prevent>
           <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
             <view class="jobs-left">
@@ -112,7 +100,7 @@
         </view>
       </view>
       <view class="table-list">
-        <scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleMyScroll" @scrolltolower="scrollBottom">
+        <view :scroll-y="true" class="falls-scroll">
           <view class="falls" v-if="list.length">
             <custom-waterfalls-flow
               :column="columnCount"
@@ -203,9 +191,10 @@
               </template>
             </custom-waterfalls-flow>
             <loadmore ref="loadmoreRef"></loadmore>
+            <view v-if="showScrollBottom" style="height: 200px"></view>
           </view>
           <empty v-else pdTop="200"></empty>
-        </scroll-view>
+        </view>
       </view>
     </view>
 
@@ -219,14 +208,14 @@
                 <view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
             </view>
         </view> -->
-  </view>
+  </scroll-view>
 </template>
 
 <script setup>
-import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from "vue";
+import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick, getCurrentInstance } from "vue";
 import img from "@/static/icon/filter.png";
 import dictLabel from "@/components/dict-Label/dict-Label.vue";
-const { $api, navTo, vacanciesTo, formatTotal } = inject("globalFunction");
+const { $api, navTo, vacanciesTo, formatTotal, throttle } = inject("globalFunction");
 import { onLoad, onShow } from "@dcloudio/uni-app";
 import { storeToRefs } from "pinia";
 import useUserStore from "@/stores/useUserStore";
@@ -240,26 +229,14 @@ import { useScrollDirection } from "@/hook/useScrollDirection";
 import { useColumnCount } from "@/hook/useColumnCount";
 const { isScrollingDown, handleScroll } = useScrollDirection();
 const recommedIndexDb = useRecommedIndexedDBStore();
+import AIMatch from "./AIMatch.vue"
+
+const { proxy } = getCurrentInstance();
 
 const showVideoTip = ref(true);
-const clickSearch = ref(false);
-const scrollDeep = ref(false);
-const hiddenNav = ref(false);
-const handleMyScroll = (e) => {
-  const scrollTop = e.detail.scrollTop;
-  if (clickSearch.value) return;
-  if (scrollTop > 200) {
-    scrollDeep.value = true;
-    setTimeout(() => {
-      hiddenNav.value = true;
-    }, 800);
-  } else if (scrollTop == 0) {
-    hiddenNav.value = false;
-    setTimeout(() => {
-      scrollDeep.value = false;
-    }, 50);
-  }
-};
+const isSticky = ref(false);
+const showScrollBottom = ref(false);
+const scrollTop = ref(0);
 
 const emits = defineEmits(["onShowTabbar"]);
 
@@ -292,68 +269,31 @@ const rangeOptions = ref([
 ]);
 const isLoaded = ref(false);
 
-const matchItems = ref([]);
+
 
 const occupations = ["律师", "工程师", "医生", "教师", "设计师", "程序员", "会计师", "建筑师", "护士", "销售", "经理", "顾问", "分析师", "研究员", "编辑", "记者", "摄影师", "厨师", "司机", "保安", "客服", "行政", "人事", "市场", "运营", "产品", "测试", "运维", "前端", "后端", "全栈", "数据", "策划", "导演", "演员", "歌手", "作家", "画家", "翻译", "导游"];
 
 const colors = ["#0069FE", "#FF9400", "#FF6969", "#21EA85", "#87E2EC"];
 
-const generateMatchItems = () => {
-  const rows = 4; // 4行
-  const itemsPerRow = 4; // 每行4个item
-  const newItems = [];
 
-  for (let row = 0; row < rows; row++) {
-    const rowItems = [];
 
-    for (let col = 0; col < itemsPerRow; col++) {
-      // 生成随机职业
-      const randomIndex = Math.floor(Math.random() * occupations.length);
-      const occupation = occupations[randomIndex];
-
-      // 生成随机字体大小
-      const fontSize = Math.floor(Math.random() * 15) + 18;
-
-      // 生成随机背景色和透明度
-      const colorIndex = Math.floor(Math.random() * colors.length);
-      const opacity = (Math.random() * 1 + 0.4).toFixed(2);
-      const bgColor = hexToRgba(colors[colorIndex], opacity);
-
-      // 根据背景色亮度决定文字颜色
-      const textColor = getTextColor(colors[colorIndex]);
-
-      // 生成随机偏移量
-      const marginRight = Math.floor(Math.random() * 70) + 20;
-      const marginLeft = Math.floor(Math.random() * 40) + 20;
-      const marginTop = Math.floor(Math.random() * 60) - 60;
-
-      // 根据列位置决定拖尾效果
-      let trailClass;
-      if (col === 0) {
-        trailClass = "trail-right";
-      } else if (col === itemsPerRow - 1) {
-        trailClass = "trail-left";
-      } else {
-        trailClass = "trail-center";
-      }
-
-      rowItems.push({
-        text: occupation,
-        fontSize: fontSize,
-        bgColor: bgColor,
-        textColor: textColor,
-        marginRight: marginRight,
-        marginLeft: col == 0 ? marginLeft : 0,
-        marginTop: marginTop,
-        opacity: opacity,
-        trailClass: trailClass,
+const checkStickyStatus = (e) => {
+  scrollTop.value = e.detail.scrollTop;
+  nextTick(() => {
+    const query = uni.createSelectorQuery().in(proxy);
+    query
+      .select(".nav-filter")
+      .boundingClientRect()
+      .exec((res) => {
+        if (res[0]) {
+          const rect = res[0];
+          const shouldBeSticky = rect.top <= 0;
+          if (isSticky.value !== shouldBeSticky) {
+            isSticky.value = shouldBeSticky;
+          }
+        }
       });
-    }
-
-    newItems.push(rowItems);
-  }
-
-  matchItems.value = newItems;
+  });
 };
 
 const hexToRgba = (hex, opacity) => {
@@ -381,7 +321,6 @@ const { columnCount, columnSpace } = useColumnCount(() => {
 });
 
 async function loadData() {
-  generateMatchItems(); // ******生成简历匹配职位虚拟数据
   try {
     if (isLoaded.value) return;
     isLoaded.value = true;
@@ -391,13 +330,23 @@ async function loadData() {
   }
 }
 
-function scrollBottom() {
+const scrollBottom = () => {
+  if (loadmoreRef?.value?.status == "loading" || loadmoreRef?.value?.status == "noMore") return;
   loadmoreRef.value.change("loading");
+  stopScroll();
   if (state.tabIndex === "all") {
     getJobRecommend();
   } else {
     getJobList();
   }
+};
+
+function stopScroll() {
+  scrollTop.value -= 100;
+  showScrollBottom.value = true;
+  setTimeout(() => {
+    showScrollBottom.value = false;
+  }, 400);
 }
 
 function findJob(job) {
@@ -487,10 +436,6 @@ function handleFilterConfirm(e) {
 }
 
 function choosePosition(index) {
-  clickSearch.value = true;
-  setTimeout(() => {
-    clickSearch.value = false;
-  }, 300);
   state.tabIndex = index;
   list.value = [];
   if (index === "all") {
@@ -508,10 +453,6 @@ function choosePosition(index) {
 }
 
 function handelHostestSearch(val) {
-  clickSearch.value = true;
-  setTimeout(() => {
-    clickSearch.value = false;
-  }, 300);
   pageState.search.order = val.value;
   if (state.tabIndex === "all") {
     getJobRecommend("refresh");
@@ -722,46 +663,45 @@ defineExpose({ loadData });
     background-color: #E5F4FB;
     display: flex;
     flex-direction: column
-    .hidden-animation
-        max-height: 2000rpx;
-        transition:  1s ease;
-    .hidden-height
-        max-height: 0 !important;
-        padding-top: 0;
-        padding-bottom: 0;
-    .hidden-all
-        overflow:hidden
 .container-search
     width:100%;
-    padding:60rpx 0 40rpx;
+    padding:60rpx 0 0rpx;
     position: relative
     .bg-text
         position :absolute
         width:100%;
-        top:60rpx;
+        top:10%;
         left:0
-    .bg-robot
-        position :absolute
-        width:428rpx;
-        top:80rpx;
-        right:-5rpx;
     .search-inner
         position relative;
         z-index:1
         width:100%;
         box-sizing: border-box;
-        padding:60rpx 22rpx 0;
+        padding:10% 22rpx 0;
+        display:flex;
+        .inner-left
+          flex:1
+          overflow:hidden
+          display:flex
+          flex-direction: column;
+
+        .bg-robot
+            flex:1
+            margin-left: - 70rpx
+            margin-right:-20rpx
+            margin-bottom:-13%
         .bg-text2
-            width:355rpx;
+            width:100%;
     .search-input
+        flex:1
+        margin-top:8%;
+        margin-bottom:18%;
         display: flex
         align-items: center;
-        width: 392rpx;
-        height: 70rpx;
-        line-height: 80rpx
+        width: 100%;
+        height: 75rpx;
         background: #FFFFFF;
         border-radius: 49rpx;
-        margin-top:24rpx;
         box-sizing: border-box;
         padding:0 24rpx;
         .icon
@@ -789,10 +729,14 @@ defineExpose({ loadData });
         height: 36rpx;
         color: #000000;
         padding: 20rpx 30rpx
+.ai-card-out
+    width:100%;
+    box-sizing:border-box
+    padding: 0 28rpx
+    margin-top:-35rpx
+    position relative;
+    z-index:1
 .ai-card
-  width 694rpx;
-  margin 0 auto;
-  box-sizing:border-box;
   position relative;
   .ai-card-bg
     width:100%;
@@ -817,6 +761,12 @@ defineExpose({ loadData });
           margin-top:30rpx;
           display:flex;
           justify-content: space-between;
+          .box-l
+              flex:1
+              margin-right:10rpx
+          .box-r
+              flex:1
+              margin-left:10rpx
           .title
               font-family: Alibaba PuHuiTi;
               font-weight: 700;
@@ -842,7 +792,7 @@ defineExpose({ loadData });
               height:100%
           .item1
               height:272rpx;
-              width:298rpx;
+              width:100%;
               border-radius: 20rpx;
               background: linear-gradient(127.66deg, #CDE4FF 6.44%, #EAFEFF 93.56%);
               box-sizing:border-box;
@@ -862,11 +812,12 @@ defineExpose({ loadData });
                   bottom:12rpx;
           .item2
               height:126rpx;
-              width:298rpx;
+              width:100%;
               border-radius: 20rpx;
               box-sizing:border-box;
               padding:26rpx 28rpx;
               position :relative
+              background: linear-gradient(100.72deg, #C3E2FF 1.79%, #FFEFDD 98.21%);
               .bg-img
                   position:absolute;
                   width:212rpx;
@@ -875,12 +826,13 @@ defineExpose({ loadData });
                   bottom:8rpx;
           .item3
               height:126rpx;
-              width:298rpx;
+              width:100%;
               border-radius: 20rpx;
               box-sizing:border-box;
               padding:26rpx 28rpx;
               margin-top:20rpx;
               position :relative
+              background: linear-gradient(100.72deg, #FFDBDB 1.79%, #FFF8F0 98.21%);
               .bg-img
                   position:absolute;
                   width:102rpx;
@@ -907,14 +859,19 @@ defineExpose({ loadData });
               font-style: Regular;
               font-size: 24rpx;
               color:#E1A374
+.match-card-out
+    width:100%;
+    box-sizing:border-box
+    padding: 0 28rpx
+    position relative;
+    z-index:1
+    margin-top:20rpx;
 .match-card
-  width 694rpx;
-  margin 0 auto;
+  width 100%;
   box-sizing:border-box;
   position relative;
   background: #ffffffE6;
   border-radius: 24rpx;
-  margin-top:20rpx;
   padding:32rpx 36rpx;
   .title
       font-family: Alibaba PuHuiTi;
@@ -1025,7 +982,6 @@ defineExpose({ loadData });
             color: #FFFFFF90;
             margin-top: 8rpx
 .list-card{
-    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom) - 90rpx);
     display:flex;
     flex-direction: column;
     background: linear-gradient(to bottom, #fff 0%, #E5F3FA 100%);
@@ -1034,17 +990,23 @@ defineExpose({ loadData });
     z-index:3
     transition: .5s
     .video-mask{
-      position:absolute;
+      position:fixed;
       right:10rpx;
-      bottom:20rpx;
+      bottom:100rpx;
       width:264rpx;
       height:298rpx;
-      z-index:4
+      z-index:6
     }
 }
 .no-radius
     border-radius: 0
+.nav-filter.stuck
+    background: linear-gradient( to bottom, #fff 85%,  #ffffff1A 100%);
+    padding-bottom:20rpx
 .nav-filter
+    position:sticky;
+    z-index:5;
+    top:calc(var(--window-top) + var(--status-bar-height));
     padding: 32rpx 28rpx 0 28rpx
     font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
     .filter-top
@@ -1119,9 +1081,11 @@ defineExpose({ loadData });
             .active
                 transform: rotate(-180deg)
 .table-list
-    flex: 1
-    overflow: hidden
-    mask-image: linear-gradient(to top, #000 95% , transparent);
+    position:sticky;
+    z-index:4;
+    top:calc(var(--window-top) + var(--status-bar-height));
+    .load-trigger
+        height:200rpx
     .falls-scroll
         width: 100%
         height: 100%