offerpai/offerpai_web
6
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

首页UI微调

Browse Source
This commit is contained in:
xuxin
2026-06-03 12:12:59 +08:00
parent e6ae57e5fd
commit 0fcc19f3f8
2 changed files with 34 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/pages/home.scss
+20 -15
View File
@@ -24,7 +24,7 @@
// 导航内容容器 — 居中 12rem 宽
&__inner {
width: 12rem;
width: 12.40rem;
margin: 0 auto;
height: 0.72rem;
padding: 0.2rem;
@@ -454,7 +454,7 @@
box-shadow: 0 10px 40px rgba(82, 202, 209, 0.12);
backdrop-filter: blur(100px);
border-radius: 0.4rem;
padding: 0.64rem;
padding: 0.64rem 0;
}
// 岗位数量统计 — 横向排列
@@ -465,18 +465,16 @@
margin-bottom: 0.6rem;
}
// 岗位滚动卡片容器
// 岗位滚动卡片容器 — 无缝轮播
&__scroll {
overflow: hidden;
>div{
.ticker-track {
display: flex;
gap: 0.16rem;
overflow-x: auto;
padding-bottom: 0.1rem;
&::-webkit-scrollbar { display: none; }
margin-left: -1.2rem;
width: max-content;
animation: ticker-scroll 20s linear infinite;
}
}
}
@@ -484,7 +482,7 @@
.showcase-stat {
text-align: center;
&__num {
font-size: 0.6rem;
font-size: 0.48rem;
line-height: 0.6rem;
font-weight: 900;
color: #1d1d1d;
@@ -608,6 +606,12 @@
}
}
// 无缝轮播关键帧 — 滚动半程（第一组内容宽度）
@keyframes ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
// ---- 功能1：匹配卡片 ----
.feature-match-card {
background: rgba(255, 255, 255, 0.9);
@@ -1260,7 +1264,7 @@
// ==================== 岗位搜索入口 ====================
.home-job-search {
padding: 0.8rem 0;
padding-bottom: 0.8rem;
// 内容容器
&__inner {
@@ -1272,14 +1276,14 @@
line-height: 0.36rem;
font-weight: 600;
text-align: center;
margin-bottom: 0.4rem;
margin-bottom: 0.6rem;
}
}
// 筛选条件横向排列
&__filters {
display: flex;
gap: 0.24rem;
gap: 0.60rem;
justify-content: center;
align-items: center;
}
@@ -1308,7 +1312,8 @@
// 搜索按钮
.filter-btn {
height: 0.48rem;
width: 1.84rem;
height: 0.56rem;
padding: 0 0.4rem;
border-radius: 0.16rem;
background: #111;
@@ -1431,7 +1436,7 @@
// ==================== 底部 CTA 行动号召 ====================
.home-cta {
padding: 0 0 1.2rem;
padding: 0 0 1.0rem;
width: 100%;
// CTA 内容区
src/views/Home.vue
+14 -8
View File
@@ -6,7 +6,7 @@
<div class="home-hero__orb home-hero__orb--top"></div>
<div class="home-hero__orb home-hero__orb--bottom"></div>
<!-- 顶部导航栏 -->
<header class="home-nav mt32">
<header class="home-nav mt0">
<div class="home-nav__inner" :class="{ 'home-nav__inner--scorlled': isScrolled }">
<div class="home-nav__logo">
<!-- 导航栏Logo图片 -->
@@ -82,17 +82,22 @@
<div class="home-jobs-showcase__box">
<div class="home-jobs-showcase__stats">
<div class="showcase-stat">
<div class="showcase-stat__num"><span class="accent">40</span><span class="accent">万</span>+</div>
<div class="showcase-stat__num"><span><span class="accent">40</span><span class="accent">万</span></span><span class="fs32">+</span></div>
<div class="showcase-stat__label">岗位总数</div>
</div>
<div class="showcase-stat">
<div class="showcase-stat__num"><span class="accent">{{ dailyJobCount }}</span>个岗位</div>
<div class="showcase-stat__num"><span class="accent">{{ dailyJobCount }}</span><span class="fs32">个</span></div>
<div class="showcase-stat__label">今日更新</div>
</div>
</div>
<div class="home-jobs-showcase__scroll">
<div>
<div class="job-ticker" v-for="(job, i) in tickerJobs" :key="i">
<!-- 无缝轮播：两组相同内容拼接，动画滚完第一组后无缝衔接 -->
<div class="ticker-track">
<div class="job-ticker" v-for="(job, i) in tickerJobs" :key="'a' + i">
<span class="job-ticker__company">{{ job.company }}·{{ job.time }}</span>
<span class="job-ticker__title">{{ job.title }}</span>
</div>
<div class="job-ticker" v-for="(job, i) in tickerJobs" :key="'b' + i">
<span class="job-ticker__company">{{ job.company }}·{{ job.time }}</span>
<span class="job-ticker__title">{{ job.title }}</span>
</div>
@@ -222,7 +227,7 @@
<div class="home-feature__inner">
<div class="home-feature__text">
<h2>名企内推<br/>人脉直通</h2>
<p>实实时获取名企最新内推信息，自动填写网申内推<br/>码，简历更快到达HR。</p>
<p>实时获取名企最新内推信息，自动填写网申内推<br/>码，简历更快到达HR。</p>
<button class="home-feature__btn" @click="router.push('/jobs')">
<img class="w20 h20" src="@/assets/images/home/blue-horn-icon-01.png" alt="">
<span>立即投递</span>
@@ -556,8 +561,9 @@ const homeCategoryIds = computed<number[]>(() => store.state.jobIntention.catego
/** 选择器触发按钮样式 — 匹配首页 .filter-select 的外观 */
const filterTriggerStyle = {
width: '2.35rem',
height: '0.48rem',
width: '2.80rem',
'max-width': 'none',
height: '0.56rem',
'border-radius': '0.16rem',
border: '1px solid #e5e7eb',
padding: '0 0.2rem',