sdz/qingdao-employment-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor : 重构首页的简历匹配职位

Browse Source
This commit is contained in:
xiebing
2025-11-20 13:50:09 +08:00
parent 3eca164bde
commit e4d100242b
4 changed files with 1854 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
pages/index/components/AIMatch.vue Normal file
View File

@@ -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>

1351
pages/index/components/index-refactor copy 2.vue Normal file
View File

File diff suppressed because it is too large Load Diff

342
pages/index/components/index-refactor.vue
View File

@@ -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%