253 lines
11 KiB
Vue
253 lines
11 KiB
Vue
<template>
|
||
<!-- 移动端首页 -->
|
||
<div class="home-mobile">
|
||
<!-- 背景装饰色块 -->
|
||
<div class="home-mobile__orb home-mobile__orb--top"></div>
|
||
<div class="home-mobile__orb home-mobile__orb--hero"></div>
|
||
|
||
<!-- 顶部 Logo -->
|
||
<header class="home-mobile__header">
|
||
<img src="@/assets/images/logo.png" alt="Offer派" class="home-mobile__logo" />
|
||
</header>
|
||
|
||
<!-- Hero 区域 -->
|
||
<section class="home-mobile__hero">
|
||
<p class="home-mobile__eyebrow">大学生AI求职平台</p>
|
||
<h1 class="home-mobile__headline">一站式求职辅助</h1>
|
||
<p class="home-mobile__subtitle">
|
||
与"大海捞针"式求职说再见。<br/>
|
||
Offer派用AI技术为你精准匹配岗位、自动投递、量身定制简历，<br/>
|
||
让每一步都更快更准。
|
||
</p>
|
||
</section>
|
||
|
||
<!-- 指令卡片 -->
|
||
<section class="home-mobile__command-card">
|
||
<p class="home-mobile__command-title">Offer 派工作模式</p>
|
||
<p class="home-mobile__command-sub">网投正在进行中...</p>
|
||
<div class="home-mobile__progress">
|
||
<div class="home-mobile__progress-rail">
|
||
<div class="home-mobile__progress-fill"></div>
|
||
</div>
|
||
</div>
|
||
<p class="home-mobile__command-chips">网投成功 32 · 投递中 5 · 已完成 82%</p>
|
||
</section>
|
||
|
||
<!-- 数据统计卡片 -->
|
||
<section class="home-mobile__stats-card">
|
||
<div class="home-mobile__stat">
|
||
<span class="home-mobile__stat-num">40万+</span>
|
||
<span class="home-mobile__stat-label">岗位总数</span>
|
||
</div>
|
||
<div class="home-mobile__stat">
|
||
<span class="home-mobile__stat-num">{{ dailyJobCount }}</span>
|
||
<span class="home-mobile__stat-label">今日更新</span>
|
||
</div>
|
||
<div class="home-mobile__stat">
|
||
<span class="home-mobile__stat-num">82%</span>
|
||
<span class="home-mobile__stat-label">节省时间</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 功能介绍区 -->
|
||
<section class="home-mobile__functions">
|
||
<h2 class="home-mobile__section-title">Offer派能帮你做什么</h2>
|
||
<p class="home-mobile__section-sub">AI驱动的一站式求职解决方案</p>
|
||
|
||
<!-- 功能卡片列表 -->
|
||
<div class="home-mobile__feature-list">
|
||
<div class="home-mobile__feature-card" v-for="(feat, i) in features" :key="i">
|
||
<div class="home-mobile__feature-icon" :style="{ background: feat.iconBg }">
|
||
<span>{{ feat.icon }}</span>
|
||
</div>
|
||
<div class="home-mobile__feature-text">
|
||
<h3>{{ feat.title }}</h3>
|
||
<p>{{ feat.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 每天都有新机会 -->
|
||
<section class="home-mobile__jobs-section">
|
||
<h2 class="home-mobile__section-title">每天都有新机会</h2>
|
||
<p class="home-mobile__section-sub">实时汇集海量优质校招职位</p>
|
||
|
||
<div class="home-mobile__job-chips">
|
||
<div class="home-mobile__job-chip home-mobile__job-chip--dark">
|
||
<span class="home-mobile__job-chip-company">字节跳动 · 15分钟前</span>
|
||
<span class="home-mobile__job-chip-role">高级产品经理</span>
|
||
</div>
|
||
<div class="home-mobile__job-chip-row">
|
||
<div class="home-mobile__job-chip home-mobile__job-chip--light">
|
||
<span class="home-mobile__job-chip-company">腾讯</span>
|
||
<span class="home-mobile__job-chip-role">后端开发工程师</span>
|
||
</div>
|
||
<div class="home-mobile__job-chip home-mobile__job-chip--light">
|
||
<span class="home-mobile__job-chip-company">阿里巴巴</span>
|
||
<span class="home-mobile__job-chip-role">产品经理</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 万千毕业生的信赖之选 -->
|
||
<section class="home-mobile__proof">
|
||
<h2 class="home-mobile__section-title">万千毕业生的信赖之选</h2>
|
||
<div class="home-mobile__quote-card">
|
||
<p class="home-mobile__quote-text">
|
||
"真没想到校招居然可以这么轻松高效！一周就收到了3个面试邀约。"
|
||
</p>
|
||
<div class="home-mobile__quote-author">
|
||
<div class="home-mobile__quote-avatar"><img class="w45 h45 " src="@/assets/images/home/student-avatar-0.png" alt=""></div>
|
||
<div class="home-mobile__quote-info">
|
||
<span class="home-mobile__quote-name">李同学</span>
|
||
<span class="home-mobile__quote-school">西安交通大学</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 常见问题 -->
|
||
<section class="home-mobile__faq">
|
||
<h2 class="home-mobile__section-title">常见问题</h2>
|
||
<div class="home-mobile__faq-list">
|
||
<div
|
||
v-for="(faq, i) in faqs"
|
||
:key="i"
|
||
class="home-mobile__faq-item"
|
||
:class="{ 'home-mobile__faq-item--open': faqOpen === i }"
|
||
>
|
||
<div class="home-mobile__faq-header" @click="faqOpen = faqOpen === i ? -1 : i">
|
||
<span>{{ faq.q }}</span>
|
||
<span class="home-mobile__faq-icon">{{ faqOpen === i ? '×' : '+' }}</span>
|
||
</div>
|
||
<div v-show="faqOpen === i" class="home-mobile__faq-answer">
|
||
<p>{{ faq.a }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 底部 CTA -->
|
||
<section class="home-mobile__bottom-cta">
|
||
<h2>准备开始投递？</h2>
|
||
<p>自动网申、简历生成和岗位投递需要在 PC 官网完成。<br/>手机端可先了解功能，正式操作请用电脑访问官网。</p>
|
||
<span class="home-mobile__bottom-footer">Offer派 · 大学生AI求职首选平台</span>
|
||
</section>
|
||
|
||
<!-- 固定底部按钮 -->
|
||
<div class="home-mobile__fixed-bar">
|
||
<span class="home-mobile__pc-hint">完整产品请前往电脑端</span>
|
||
<button class="home-mobile__cta-btn" @click="showDialog = true">免费使用</button>
|
||
</div>
|
||
|
||
<!-- 弹窗：引导去电脑端 -->
|
||
<div v-if="showDialog" class="home-mobile__overlay" @click.self="showDialog = false">
|
||
<div class="home-mobile__dialog">
|
||
<div class="home-mobile__dialog-handle"></div>
|
||
<button class="home-mobile__dialog-close" @click="showDialog = false">×</button>
|
||
<h3>请在电脑端使用 Offer派</h3>
|
||
<p class="home-mobile__dialog-desc">
|
||
自动网申、简历生成和岗位投递需要在 PC 官网完成。<br/>
|
||
手机端可先了解功能，正式操作请用电脑访问官网。
|
||
</p>
|
||
<div class="home-mobile__dialog-url">
|
||
PC 官网：www.offerpai.com.cn
|
||
</div>
|
||
<p class="home-mobile__dialog-qr-title">保存二维码，扫码加入求职交流群</p>
|
||
<div class="home-mobile__dialog-qr">
|
||
<img src="@/assets/images/home/mobile-qcCode.png" alt="二维码" class="home-mobile__dialog-qr-img" />
|
||
</div>
|
||
<p class="home-mobile__dialog-qr-hint">长按保存二维码获取更多求职资料，公开课</p>
|
||
<button class="home-mobile__dialog-btn" @click="showDialog = false">知道了</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 保存成功提示 -->
|
||
<div v-if="showSaveToast" class="home-mobile__toast">长按图片即可保存到相册</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted } from 'vue'
|
||
import { getDailyJobCount } from '@/utils/dailyJobCount'
|
||
|
||
// ==================== 移动端缩放重置 ====================
|
||
/**
|
||
* 确保 HomeMobile 页面不受全局 transform scale 缩放影响
|
||
* 部分浏览器中 remAdapt 插件的 recalc 在路由切换后未及时重新执行，
|
||
* 导致 body 上仍残留 PC 端 scale 样式，这里在组件挂载时主动重置
|
||
*/
|
||
function resetMobileScale() {
|
||
const docEl = document.documentElement
|
||
const body = document.body
|
||
const clientWidth = docEl.clientWidth || window.innerWidth
|
||
// 移动端首页 1rem = 视口宽度 / 3.90（设计稿 390px）
|
||
const mobileFontSize = clientWidth / 3.90
|
||
docEl.style.fontSize = mobileFontSize + 'px'
|
||
// 清除 scale 缩放相关样式
|
||
body.style.width = ''
|
||
body.style.height = ''
|
||
body.style.minHeight = ''
|
||
body.style.overflowY = ''
|
||
body.style.transform = ''
|
||
body.style.transformOrigin = ''
|
||
docEl.style.height = ''
|
||
docEl.style.overflow = ''
|
||
docEl.style.setProperty('--app-height', '100vh')
|
||
docEl.style.setProperty('--chat-width', '100%')
|
||
}
|
||
|
||
/** 窗口 resize 时重新执行重置 */
|
||
function onResize() {
|
||
resetMobileScale()
|
||
}
|
||
|
||
onMounted(() => {
|
||
resetMobileScale()
|
||
window.addEventListener('resize', onResize)
|
||
window.addEventListener('orientationchange', onResize)
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', onResize)
|
||
window.removeEventListener('orientationchange', onResize)
|
||
})
|
||
|
||
// 声明友盟统计 _czc 对象
|
||
const _czc: any[] = (window as any)._czc || [];
|
||
(window as any)._czc = _czc;
|
||
// 绑定 siteid，请用您的 siteid 替换下方 "XXXXXXXX" 部分
|
||
_czc.push(["_setAccount", "1281490571"]);
|
||
|
||
/** 今日更新岗位数量 */
|
||
const dailyJobCount = getDailyJobCount()
|
||
|
||
/** 弹窗显示状态 */
|
||
const showDialog = ref(false)
|
||
|
||
/** 当前展开的 FAQ 索引 */
|
||
const faqOpen = ref(-1)
|
||
|
||
/** 提示 toast 显示状态 */
|
||
const showSaveToast = ref(false)
|
||
|
||
/** 功能卡片数据 */
|
||
const features = [
|
||
{ icon: '🎯', iconBg: '#4FC2C9', title: '个性化岗位匹配', desc: '基于简历精准推荐最合适的岗位' },
|
||
{ icon: '⚡', iconBg: '#12383A', title: '一键自动网申', desc: '投递一键搞定，覆盖各大网申系统' },
|
||
{ icon: '📄', iconBg: '#42A8B3', title: '岗位定制简历', desc: '根据每个岗位智能优化简历内容' },
|
||
{ icon: '🤝', iconBg: '#80D8C8', title: '名企内推人脉直通', desc: '实时获取名企最新内推信息' },
|
||
{ icon: '🤖', iconBg: '#2A8186', title: '24h AI求职助手', desc: '随时提供求职指导和面试技巧' },
|
||
]
|
||
|
||
/** 常见问题数据 — 与PC端保持一致 */
|
||
const faqs = [
|
||
{ q: '平台免费使用吗？', a: 'Offer派为所有用户免费开放3天会员权益，帮你省心省力找工作。3天后，依然可以免费使用各项功能，但有使用次数限制。如果你需要不受限制地使用所有功能，更快更高效地获得Offer，建议您升级为付费会员，让求职效率翻倍。' },
|
||
{ q: '我的信息会被分享吗？', a: 'Offer派高度重视你的隐私安全。未经你明确同意，我们绝不会将你的个人信息提供给任何第三方。你的所有数据仅用于在平台内为你提供AI智能岗位匹配、简历优化等个性化求职服务。' },
|
||
{ q: '平台的岗位来源是什么？', a: 'Offer派的岗位来自上万家企业的官方招聘网站，同时聚合了各大主流平台的最新职位——你不需要在多个网站之间来回切换，就能一站式搜罗全网高质量的工作机会。' },
|
||
{ q: '平台与其他求职平台有什么不同？', a: '不同于BOSS直聘等传统平台的"手动式"求职，Offer派如同一位经验丰富的职业导师，通过AI能力搭建智能工具，自动处理简历优化、岗位匹配、申请投递等环节，大幅度提升你的求职效率。' },
|
||
]
|
||
</script>
|