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

首页和页面缩放调整

Browse Source
This commit is contained in:
xuxin
2026-06-03 11:03:13 +08:00
parent 557a6f30f2
commit e6ae57e5fd
34 changed files with 360 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Home.vue
+132 -54
View File
@@ -7,7 +7,7 @@
<div class="home-hero__orb home-hero__orb--bottom"></div>
<!-- 顶部导航栏 -->
<header class="home-nav mt32">
<div class="home-nav__inner">
<div class="home-nav__inner" :class="{ 'home-nav__inner--scorlled': isScrolled }">
<div class="home-nav__logo">
<!-- 导航栏Logo图片 -->
<img src="@/assets/images/logo.png" alt="Offer派" class="home-nav__logo-img" />
@@ -19,17 +19,21 @@
<!-- 已登录时显示进入平台按钮 -->
<button v-else class="home-nav__btn" @click="router.push('/jobs')">进入平台</button>
</div>
</div>
</header>
<div class="home-hero__inner">
<div class="home-hero__left">
<h1 class="home-hero__title">Offer派<br/>收offer就是快!</h1>
<p class="home-hero__desc">智能匹配职位、自动填写申请、量身定制简历、推荐内部人脉——不到1分钟，统统搞定！</p>
<p class="home-hero__desc">智能匹配职位、自动填写申请、量身定制简历、推荐内部人脉——<br/>不到1分钟，统统搞定！</p>
<button class="home-hero__cta" @click="router.push('/jobs')">免费体验</button>
</div>
<!-- 右侧视频展示区 -->
<div class="home-hero__right">
<div class="home-hero__right-top">
<div></div>
<div></div>
<div></div>
</div>
<video
class="home-hero__video"
src="https://jsxq-image-static.oss-cn-shenzhen.aliyuncs.com/aiJob/find/open-intention-video.mp4"
@@ -52,7 +56,7 @@
<div class="home-stats__cards">
<article class="stat-card">
<div class="stat-card__num">第一</div>
<p class="stat-card__label">80%大学生求职首选</p>
<p class="stat-card__label">84.5%大学生求职首选</p>
</article>
<article class="stat-card">
<div class="stat-card__num">3倍</div>
@@ -60,7 +64,7 @@
</article>
<article class="stat-card">
<div class="stat-card__num">82%</div>
<p class="stat-card__label">用户成功拿到offer</p>
<p class="stat-card__label">节约82%校招求职时间</p>
</article>
</div>
</div>
@@ -68,24 +72,30 @@
<!-- Jobs Showcase Section -->
<section class="home-jobs-showcase">
<!-- 背景色块 — 顶部小块 -->
<div class="home-jobs-showcase__orb home-jobs-showcase__orb--top"></div>
<!-- 背景色块 — 底部全宽渐变 -->
<div class="home-jobs-showcase__orb home-jobs-showcase__orb--bottom"></div>
<div class="home-jobs-showcase__inner">
<h2>海量优质校招岗位，尽在Offer派！</h2>
<p class="home-jobs-showcase__sub">实时汇集海量超10000+名校校招职位</p>
<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 class="accent">40</span><span class="accent">万</span>+</div>
<div class="showcase-stat__label">岗位总数</div>
</div>
<div class="showcase-stat">
<div class="showcase-stat__num"><span class="accent">3120</span>个岗位</div>
<div class="showcase-stat__num"><span class="accent">{{ dailyJobCount }}</span>个岗位</div>
<div class="showcase-stat__label">今日更新</div>
</div>
</div>
<div class="home-jobs-showcase__scroll">
<div class="job-ticker" v-for="(job, i) in tickerJobs" :key="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="i">
<span class="job-ticker__company">{{ job.company }}·{{ job.time }}</span>
<span class="job-ticker__title">{{ job.title }}</span>
</div>
</div>
</div>
</div>
@@ -96,8 +106,8 @@
<section class="home-feature">
<div class="home-feature__inner">
<div class="home-feature__text">
<h2>个性化<br/>岗位匹配</h2>
<p>第一时间发现真正适合你的岗位，精准匹配你的真实技能，杜绝虚假信息。</p>
<h2>个性化智能<br/>岗位匹配</h2>
<p>第一时间发现真正适合你的岗位，精准匹配你的真<br/>实技能，杜绝虚假信息。</p>
<button class="home-feature__btn" @click="router.push('/jobs')">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><circle cx="10" cy="10" r="4" stroke="currentColor" stroke-width="2"/><circle cx="10" cy="10" r="1.5" fill="currentColor"/></svg>
<span>立即匹配</span>
@@ -106,7 +116,7 @@
<div class="home-feature__visual home-feature__visual--match">
<div class="feature-match-card">
<div class="feature-match-card__header">
<div class="feature-match-card__avatar"></div>
<div class="feature-match-card__avatar"><img class="wp100 hp100" src="@/assets/images/home/alex-avatar.png" alt=""></div>
<div class="feature-match-card__info">
<h4>求职者 Alex</h4>
<div class="feature-match-card__tags">
@@ -130,9 +140,9 @@
<div class="home-feature__inner">
<div class="home-feature__text">
<h2>校招一键<br/>自动网申</h2>
<p>每日向数百岗位一键投递，覆盖各大企业网申系统。告别重复填写，节省 80% 的宝贵时间。</p>
<p>每日向数百岗位一键投递，覆盖各大企业网申系<br/>统。告别重复填写，节省 82% 校招求职时间。</p>
<button class="home-feature__btn" @click="router.push('/jobs')">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 10l2-8h10l2 8-7 7-7-7z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
<img class="w20 h20" src="@/assets/images/home/blue-flash-icon-01.png" alt="">
<span>开启自动网申</span>
</button>
</div>
@@ -148,14 +158,14 @@
</div>
<div class="feature-apply-card__list">
<div class="apply-item">
<div class="apply-item__icon">✉</div>
<div class="apply-item__icon"><img class="wp100 hp100" src="@/assets/images/home/right-icon-01.png" alt=""></div>
<div class="apply-item__info">
<p class="apply-item__title">腾讯科技 - 校招投递成功</p>
<p class="apply-item__sub">耗时 0.8s · 自动识别填写完毕</p>
</div>
</div>
<div class="apply-item apply-item--active">
<div class="apply-item__icon apply-item__icon--pulse">📋</div>
<div class="apply-item__icon apply-item__icon--pulse"><img class="wp100 hp100" src="@/assets/images/home/load-icon-01.png" alt=""></div>
<div class="apply-item__info">
<p class="apply-item__title">京东校招 - 自动填写中...</p>
<p class="apply-item__sub">进度 65%</p>
@@ -173,9 +183,9 @@
<div class="home-feature__inner">
<div class="home-feature__text">
<h2>岗位定制简历</h2>
<p>10秒内生成针对特定岗位优化的专业简历，通过ATS系统，突出你的核心优势。。</p>
<p>10秒内生成针对特定岗位优化的专业简历，通过<br/>ATS系统，突出你的核心优势。</p>
<button class="home-feature__btn" @click="router.push('/jobs')">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 2h8l4 4v12H4V2z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M12 2v4h4" stroke="currentColor" stroke-width="2"/><path d="M4 11h8" stroke="currentColor" stroke-width="2"/></svg>
<img class="w20 h20" src="@/assets/images/home/blue-file-icon-01.png" alt="">
<span>优化我的简历</span>
</button>
</div>
@@ -199,7 +209,7 @@
</div>
<div class="feature-resume-card__badge">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M3 2h7l3 3v8H3V2z" stroke="#4FC2C9" stroke-width="1.2"/><path d="M6 7h3" stroke="#4FC2C9" stroke-width="1.2"/></svg>
<img class="w15 h15" src="@/assets/images/home/blue-shield-icon-01.png" alt="">
<span>ATS OPTIMIZED</span>
</div>
</div>
@@ -212,9 +222,9 @@
<div class="home-feature__inner">
<div class="home-feature__text">
<h2>名企内推<br/>人脉直通</h2>
<p>实时获取名企最新内推信息，自动填写网申内推码，简历更快到达HR。</p>
<p>实实时获取名企最新内推信息，自动填写网申内推<br/>码，简历更快到达HR。</p>
<button class="home-feature__btn" @click="router.push('/jobs')">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 3h10l4 4v10H3V3z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M6 12l2 2 4-4" stroke="currentColor" stroke-width="2"/></svg>
<img class="w20 h20" src="@/assets/images/home/blue-horn-icon-01.png" alt="">
<span>立即投递</span>
</button>
</div>
@@ -239,7 +249,7 @@
<h2>24h全天候<br/>AI求职助手</h2>
<p>随时提供求职指导，从岗位筛选到面试技巧，你的专属职业规划顾问。</p>
<button class="home-feature__btn" @click="router.push('/jobs')">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M2 3h12v10H6l-4 4V3z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
<img class="w20 h20" src="@/assets/images/home/blue-message-icon-01.png" alt="">
<span>立即咨询</span>
</button>
</div>
@@ -269,23 +279,23 @@
<!-- 标题区 -->
<div class="home-testimonials__header">
<h2>万千毕业生的信赖之选</h2>
<p>REAL VOICES FROM THE COMMUNITY</p>
<p>真实求职反馈，见证每一次从迷茫到上岸</p>
</div>
<!-- 评价卡片横向排列 -->
<div class="home-testimonials__cards">
<div class="testimonial-card" v-for="(t, i) in testimonials" :key="i">
<!-- 引号装饰 SVG -->
<svg class="testimonial-card__quote" width="48" height="48" viewBox="0 0 48 48" fill="none">
<path d="M6 6h14v36" stroke="rgba(82,202,209,0.2)" stroke-width="2"/>
<path d="M28 6h14v36" stroke="rgba(82,202,209,0.2)" stroke-width="2"/>
</svg>
<p class="testimonial-card__text">"{{ t.text }}"</p>
<div class="testimonial-card__author">
<img class="testimonial-card__avatar" :src="avatarImg" alt="用户头像" />
<div class="testimonial-card__info">
<p class="testimonial-card__name">{{ t.name }}</p>
<p class="testimonial-card__school">{{ t.school }}</p>
<p class="testimonial-card__text">{{ t.text }}</p>
<div class="dflex aliite-e">
<div class="testimonial-card__author">
<img class="testimonial-card__avatar" :src="t.avatar" alt="用户头像" />
<div class="testimonial-card__info">
<p class="testimonial-card__name">{{ t.name }}</p>
<p class="testimonial-card__school">{{ t.school }}</p>
</div>
</div>
<img class="w48 h48" src="@/assets/images/home/blue-icon-768.png" alt="">
</div>
</div>
</div>
@@ -294,7 +304,7 @@
<!-- 装饰圆环 SVG -->
<svg class="home-testimonials__founder-decor" width="455" height="455" viewBox="0 0 455 455" fill="none">
<circle cx="227.5" cy="227.5" r="189.5" stroke="#fff" stroke-width="20" opacity="0.08"/>
<circle cx="227.5" cy="227.5" r="80" stroke="#fff" stroke-width="20" opacity="0.08"/>
<path d="M240 190 L318 224 Q328 227.5 318 231 L240 265 Q227.5 270 215 265 L137 231 Q127 227.5 137 224 L215 190 Q227.5 185 240 190 Z" stroke="#fff" stroke-width="20" fill="none" opacity="0.08" transform="rotate(-45 227.5 227.5)"/>
</svg>
<div class="home-testimonials__founder-content">
<img class="home-testimonials__founder-img" :src="avatarImg" alt="创始人头像" />
@@ -325,7 +335,7 @@
<div class="home-faq__inner">
<div class="home-faq__header">
<h2>常见问题</h2>
<p>FREQUENTLY ASKED QUESTIONS</p>
<p>关于平台使用、隐私安全与岗位来源</p>
</div>
<div class="home-faq__list">
<div
@@ -339,8 +349,14 @@
<span class="faq-item__question">{{ faq.q }}</span>
<div class="faq-item__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
<line v-if="faqOpen !== i" x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
<template v-if="faqOpen === i">
<line x1="7" y1="7" x2="17" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="17" y1="7" x2="7" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</template>
<template v-else>
<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</template>
</svg>
</div>
</div>
@@ -355,7 +371,7 @@
<!-- CTA Section -->
<section class="home-cta">
<div class="home-cta__inner">
<h2>让Offer不再遥不可及<br/>大学生一站式AI求职</h2>
<h2>让Offer派带你找到<br/>人生第一份好工作</h2>
<button class="home-cta__btn" @click="router.push('/jobs')">免费体验</button>
</div>
</section>
@@ -394,7 +410,7 @@
:displayStyle="filterDisplayStyle"
@update:categoryIds="onHomeCategoryChange"
/>
<button class="filter-btn" @click="goSearchJobs">搜索职位</button>
<button class="filter-btn" @click="goSearchJobs">立即匹配</button>
</div>
</div>
</section>
@@ -412,10 +428,11 @@
<div class="home-footer__col">
<h5>核心功能</h5>
<ul>
<li>智能岗位匹配</li>
<li>AI简历优化</li>
<li>AI求职助手</li>
<li>一键投递</li>
<li @click="router.push('/jobs')">智能岗位匹配</li>
<li @click="router.push('/resume')">AI简历优化</li>
<li @click="router.push('/jobs')">AI求职助手</li>
<li @click="router.push('/jobs')">一键投递</li>
<li><a href="https://www.jianshixingqiu.com/mentor" target="_blank">名企导师</a></li>
</ul>
</div>
<div class="home-footer__col">
@@ -425,7 +442,7 @@
<li><a href="https://www.jianshixingqiu.com/internship" target="_blank">名企实习</a></li>
<li><a href="https://www.jianshixingqiu.com/biunique" target="_blank">名企导师1V1</a></li>
<li><a href="https://www.jianshixingqiu.com/directTrain" target="_blank">Offer直通车</a></li>
<li><a href="https://www.jianshixingqiu.com/mentor" target="_blank">名企导师</a></li>
</ul>
</div>
<div class="home-footer__col">
@@ -447,10 +464,13 @@
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import avatarImg from '@/assets/images/home/avatar-temporary.png'
import studentAvatar0 from '@/assets/images/home/student-avatar-0.png'
import studentAvatar1 from '@/assets/images/home/student-avatar-1.png'
import studentAvatar2 from '@/assets/images/home/student-avatar-2.png'
import IndustrySelector from '@/components/tools/IndustrySelector.vue'
import RegionSelector from '@/components/tools/RegionSelector.vue'
import JobCategorySelector from '@/components/tools/JobCategorySelector.vue'
@@ -461,6 +481,23 @@ const router = useRouter()
/** Vuex 状态管理实例 */
const store = useStore()
/** 页面是否已向下滚动超过 20px — 用于导航栏背景切换 */
const isScrolled = ref(false)
/** 根据当前日期生成 3000~4000 之间的确定性岗位数量（同一天所有用户看到的数字一致） */
function getDailyJobCount(): number {
const today = new Date()
const seed = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate()
let hash = seed
hash = ((hash >> 16) ^ hash) * 0x45d9f3b
hash = ((hash >> 16) ^ hash) * 0x45d9f3b
hash = (hash >> 16) ^ hash
return 3000 + (Math.abs(hash) % 1001)
}
/** 今日更新岗位数量 — 每日确定性变化 */
const dailyJobCount = getDailyJobCount()
/** 当前展开的 FAQ 索引，-1 表示全部收起 */
const faqOpen = ref(-1)
@@ -469,13 +506,13 @@ const founderIndex = ref(0)
/** 创始人引言数据 — 支持多条切换 */
const founderQuotes = [
{ text: '很多大学生还在用传统方式找工作，海投、反复改简历，效率很低。Offer派利用AI技术让整个校招流程更丝滑，节省了80%的繁琐过程。', name: 'Stella', role: 'Offer派创始人' },
{ text: '很多大学生还在用传统方式找工作，海投、反复改简历，效率很低。Offer派利用AI技术让整个校招流程更丝滑，节省了80%的繁琐过程。', name: 'Stella', role: '字节跳动' },
{ text: '我们的目标是让每一位大学生都能高效地找到心仪的工作，AI技术正在改变校招的游戏规则。', name: 'Stella', role: 'Offer派创始人' },
]
/** 岗位滚动展示数据 — 模拟最新发布的校招岗位 */
const tickerJobs = [
{ company: '字节跳动', time: '15分钟前', title: '前端开发工程师' },
{ company: '字节跳动', time: '15分钟前', title: '高级前端开发工程师' },
{ company: '腾讯', time: '30分钟前', title: '后端开发工程师' },
{ company: '阿里巴巴', time: '1小时前', title: '产品经理' },
{ company: '华为', time: '2小时前', title: '算法工程师' },
@@ -492,9 +529,9 @@ const referralCards = [
/** 用户评价数据 — 展示真实用户的使用反馈 */
const testimonials = [
{ text: 'Offer派求职体验特别好！岗位信息丰富、质量高，AI岗位匹配也很精准，求职助手给的面试建议很专业，一周就拿到了Offer！', name: '李同学', school: '西安交通大学' },
{ text: '简历优化功能太强了，针对不同岗位自动调整内容，面试邀约率直接翻倍。', name: '王同学', school: '浙江大学' },
{ text: '一键投递省了我大量时间，再也不用一个个填网申表格了，效率提升太明显。', name: '张同学', school: '北京大学' },
{ text: '“Offer派求职体验特别好！岗位信息丰富、质量高，AI岗位匹配也很精准，求职助手给的面试建议很专业，一周就拿到了offer！”', name: '李同学', school: '西安交通大学', avatar: studentAvatar0 },
{ text: '“界面设计简洁友好，用起来很舒适。AI助手帮我理清了方向，让迷茫的我建立了自信，还能帮我优化简历，真的很nice~”', name: '王同学', school: '北京大学', avatar: studentAvatar1 },
{ text: '“满分！特别是网申自动填写，不仅可以一键填写，还能快速定制简历内容，完美匹配岗位要求，毕设求职两不误，真心推荐。”', name: '张同学', school: '中国人民大学', avatar: studentAvatar2 },
]
/** 常见问题列表 — q: 问题, a: 答案，点击可展开/收起 */
@@ -521,17 +558,17 @@ const homeCategoryIds = computed<number[]>(() => store.state.jobIntention.catego
const filterTriggerStyle = {
width: '2.35rem',
height: '0.48rem',
'border-radius': '0.24rem',
'border-radius': '0.16rem',
border: '1px solid #e5e7eb',
padding: '0 0.2rem',
background: '#fff',
background: '#F3F4F5',
'justify-content': 'space-between',
}
/** 选择器显示文字样式 — 匹配首页 .filter-select 内文字 */
const filterDisplayStyle = {
'font-size': '0.16rem',
'line-height': '0.24rem',
'line-height': '0.16rem',
color: 'rgba(0, 0, 0, 0.45)',
'max-width': '1.8rem',
}
@@ -566,6 +603,47 @@ function goSearchJobs() {
}
onMounted(() => {
// 监听页面滚动，超过 20px 时导航栏显示背景
const isScaleMode = () => {
return !!document.body.style.transform && document.body.style.transform.includes('scale')
}
const getScrollTop = () => {
return document.body.scrollTop || window.scrollY || document.documentElement.scrollTop
}
const handleScroll = () => {
const scrollTop = getScrollTop()
isScrolled.value = scrollTop > 20
}
// scale 模式下持续用 rAF 更新吸顶导航的 top 位置
const tickNav = () => {
if (isScaleMode()) {
const el = document.querySelector('.home-nav__inner') as HTMLElement | null
if (el && isScrolled.value) {
// fixed 在 transform 容器内退化为 absolute，手动同步 top
el.style.top = (document.body.scrollTop + 20) + 'px'
} else if (el && !isScrolled.value) {
el.style.top = ''
}
} else {
// 非 scale 模式：清除内联 top，让 CSS 控制
const el = document.querySelector('.home-nav__inner') as HTMLElement | null
if (el && el.style.top) {
el.style.top = ''
}
}
requestAnimationFrame(tickNav)
}
requestAnimationFrame(tickNav)
window.addEventListener('scroll', handleScroll)
document.body.addEventListener('scroll', handleScroll)
handleScroll()
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
document.body.removeEventListener('scroll', handleScroll)
})
// 检测 URL 中的邀请码参数 invite_code，存入全局状态
const urlParams = new URLSearchParams(window.location.search)
const inviteCode = urlParams.get('invite_code')