offerpai/offerpai_web
6
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
.kiro/steering/project-guidelines.md
+2 -1
View File
@@ -22,6 +22,7 @@ inclusion: always
## 注意事项
- 页面结构和ts的常量变量和方法都要加中文注释
- 页面结构和ts的常量变量和方法都要加中文注释，kiro编程工具沟通要回复中文
- 新建 SCSS 文件如果使用了 variables.scss 中的变量（如 `$bg-white`、`$accent` 等），必须在文件顶部加 `@use '../variables' as *;`，否则通过 `@use` 方式引入 index.scss 时变量作用域不会穿透，会报 `Undefined variable` 错误
- 因为项目用了 rem（1rem=100px）适配方案，所有 Vue 页面和组件文件的最外层盒子都要加 `font-size: 0.14rem`，避免页面样式中受浏览器默认 rem 行高影响导致文字和布局异常
- 需要占满视口高度的元素（页面主容器、侧边栏、聊天面板等）禁止直接写 `height: 100vh`，必须使用 `height: var(--app-height, 100vh)`。原因：项目在小屏下使用 `transform: scale` 缩放，`100vh` 是缩放后的视口高度而非设计稿高度，会导致底部留白。`--app-height` 由 `src/plugins/remAdapt.ts` 动态注入，值为 `视口高度 / scale`（PC 端等于 `100vh`）
index.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Offer派 - 大学生AI求职平台 | 智能岗位匹配·一键自动网申·AI简历优化</title>
<meta name="description" content="Offer派是专为大学生打造的AI求职平台，提供智能岗位匹配、一键自动网申、岗位定制简历、内推人脉直通等功能，让校招求职效率提升80%。" />
public/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

src/assets/images/home/alex-avatar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

src/assets/images/home/avatar-temporary.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 109 KiB

src/assets/images/home/blue-file-icon-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 911 B

src/assets/images/home/blue-flash-icon-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 839 B

src/assets/images/home/blue-horn-icon-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 998 B

src/assets/images/home/blue-icon-768.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/assets/images/home/blue-message-icon-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 480 B

src/assets/images/home/blue-shield-icon-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 794 B

src/assets/images/home/load-icon-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

src/assets/images/home/right-icon-01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

src/assets/images/home/student-avatar-0.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

src/assets/images/home/student-avatar-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

src/assets/images/home/student-avatar-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

src/assets/styles/components/ai-chat.scss
+7 -5
View File
@@ -2,8 +2,10 @@
@use '../variables' as *;
.ai-chat {
width: 4.0rem;
height: 100vh;
width: var(--chat-width, 4.0rem);
max-width: 4.0rem;
min-width: 1.5rem;
height: var(--app-height, 100vh);
background: #f3f4f6;
display: flex;
flex-direction: column;
@@ -19,12 +21,12 @@
justify-content: space-between;
background: #0F172B;
color: #fff;
padding: 0.12rem 0.18rem;
font-size: 0.15rem;
padding: 0.12rem 0.14rem;
font-size: 0.14rem;
font-weight: 600;
cursor: pointer;
border-radius: 0.2rem;
margin: 0.15rem;
margin: 0.15rem;
height: 0.41rem;
}
src/assets/styles/components/job-resume-custom-dialog.scss
+5 -5
View File
@@ -5,8 +5,8 @@
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
width: 100%;
height: var(--app-height, 100vh);
z-index: 2000;
display: flex;
align-items: center;
@@ -691,7 +691,7 @@
position: relative;
background: $bg-white;
width: 10.4rem;
height: 100vh;
height: var(--app-height, 100vh);
box-sizing: border-box;
display: flex;
flex-direction: column;
@@ -1021,8 +1021,8 @@
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
width: 100%;
height: var(--app-height, 100vh);
background: $overlay-bg;
z-index: 3000;
display: flex;
src/assets/styles/components/profile-edit-drawer.scss
+1 -1
View File
@@ -21,7 +21,7 @@
top: 0;
right: 0;
width: 6.2rem;
height: 100vh;
height: var(--app-height, 100vh);
background: $bg-white;
z-index: 2001;
box-shadow: -0.04rem 0 0.2rem rgba(0, 0, 0, 0.1);
src/assets/styles/components/resume-analysis-report-drawer.scss
+1 -1
View File
@@ -26,7 +26,7 @@
top: 0;
right: 0;
width: 8rem;
height: 100vh;
height: var(--app-height, 100vh);
background: $bg-main;
z-index: 2001;
display: flex;
src/assets/styles/components/resume-issue-fix-drawer.scss
+1 -1
View File
@@ -26,7 +26,7 @@
top: 0;
right: 0;
width: 8rem;
height: 100vh;
height: var(--app-height, 100vh);
background: $bg-main;
z-index: 2001;
display: flex;
src/assets/styles/components/side-nav.scss
+3 -3
View File
@@ -4,7 +4,7 @@
display: flex;
flex-direction: column;
width: 2rem;
height: 100vh;
height: var(--app-height, 100vh);
background: #1a1a2e;
color: #fff;
padding: 0.2rem 0.12rem;
@@ -107,8 +107,8 @@
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
width: 100%;
height: var(--app-height, 100vh);
background: $overlay-bg;
display: flex;
align-items: center;
src/assets/styles/pages/agent.scss
+5 -5
View File
@@ -3,7 +3,7 @@
// ==================== 求职助手页面样式 ====================
.agent-page {
min-height: 100vh;
min-height: var(--app-height, 100vh);
background: $bg-main;
font-size: 0.14rem;
// 主内容区域（左侧导航栏右边的部分）
@@ -12,7 +12,7 @@
flex: 1;
padding: 0.3rem 0.4rem;
overflow-y: auto;
height: 100vh;
height: var(--app-height, 100vh);
box-sizing: border-box;
}
@@ -216,7 +216,7 @@
border-radius: 0.12rem;
border: 1px solid $border-color;
padding: 0.24rem;
max-height: calc(100vh - 1.4rem);
max-height: calc(var(--app-height, 100vh) - 1.4rem);
overflow-y: auto;
// 自定义滚动条
@@ -855,7 +855,7 @@
// 左侧主区域
&__left {
flex: 1;
height: calc(100vh - 0.6rem);
height: calc(var(--app-height, 100vh) - 0.6rem);
display: flex;
flex-direction: column;
max-width: 8rem;
@@ -864,7 +864,7 @@
// 右侧匹配岗位面板
&__right {
flex: 1;
height: calc(100vh - 0.6rem);
height: calc(var(--app-height, 100vh) - 0.6rem);
margin-left: 0.2rem;
max-width: 8rem;
overflow-y: auto;
src/assets/styles/pages/home.scss
+149 -86
View File
@@ -14,6 +14,7 @@
font-family: system-ui, -apple-system, sans-serif;
// 全局基础行高重置，防止 1rem=100px 导致子元素继承异常行高
line-height: 1.5;
font-size: 0.14rem;
// ==================== 顶部导航栏 ====================
.home-nav {
@@ -25,15 +26,23 @@
&__inner {
width: 12rem;
margin: 0 auto;
height: 0.68rem;
height: 0.72rem;
padding: 0.2rem;
box-sizing: border-box;
border-radius: 40px;
background: #FFFFFF;
border: 0.01rem solid #FFFFFF;
border-radius: 0.24rem;
display: flex;
align-items: center;
justify-content: space-between;
&--scorlled {
position: fixed;
top: 0.2rem;
left: 50%;
transform: translateX(-50%);
z-index: 100;
background: #FFFFFF;
box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 0 32px 0 rgba(10, 20, 21, .06);
}
}
// Logo 区域
@@ -61,7 +70,7 @@
// 导航右侧 CTA 按钮
&__btn {
padding: 0.1rem 0.32rem;
border-radius: 9999px;
border-radius: 0.16rem;
background: #111;
color: #fff;
font-size: 0.14rem;
@@ -126,14 +135,14 @@
// 左侧文字区
&__left {
flex-shrink: 0;
max-width: 5.5rem;
//width: 5.8rem;
}
// 主标题
&__title {
font-size: 0.72rem;
font-size: 0.54rem;
font-weight: 600;
line-height: 0.9rem;
line-height: 0.71rem;
letter-spacing: -0.03rem;
color: #111;
margin: 0;
@@ -144,37 +153,55 @@
font-size: 0.2rem;
line-height: 0.325rem;
color: #9ca3af;
margin-top: 0.2rem;
max-width: 4.74rem;
margin-top: 0.1rem;
}
// 免费体验按钮
&__cta {
margin-top: 0.4rem;
padding: 0.2rem 0.56rem;
border-radius: 9999px;
background: $accent;
margin-top: 0.69rem;
width: 1.84rem;
height: 0.56rem;
//line-height: 0.24rem;
border-radius: 0.16rem;
background: linear-gradient(90deg, rgba(82, 202, 209, 1) 0%, rgba(83, 217, 200, 1) 100%);
color: #fff;
font-size: 0.18rem;
line-height: 0.28rem;
font-weight: 600;
border: none;
cursor: pointer;
box-shadow: 0 25px 50px -12px rgba(82, 202, 209, 0.2);
transition: background 0.2s;
&:hover { background: $accent-hover; }
}
// 右侧卡片区
&__right {
flex-shrink: 0;
box-shadow: 0px 0px 15.45px rgba(82, 202, 209, 0.1);
border-radius: 0.16rem;
}
&__right-top{
height: 0.5rem;
background: #fff;
border-radius: 0.16rem;
display: flex;
align-items: center;
gap: 0.06rem;
padding-left: 0.3rem;
>div{
height: 0.08rem;
width: 0.08rem;
border-radius: 50%;
background: #52CAD1;
}
}
// 视频播放器 — 16:9 比例，圆角，无控件
&__video {
width: 6.5rem;
aspect-ratio: 16 / 9;
border-radius: 0.24rem;
width: 5.16rem;
height: 2.90rem;
//aspect-ratio: 16 / 9;
border-radius: 0.16rem;
object-fit: cover;
display: block;
}
@@ -313,7 +340,7 @@
font-size: 0.48rem;
font-weight: 600;
letter-spacing: -0.015rem;
line-height: 0.7rem;
line-height: 0.63rem;
}
}
@@ -322,8 +349,8 @@
width: 0.8rem;
height: 0.06rem;
border-radius: 9999px;
background: rgba(82, 202, 209, 0.3);
margin-top: 0.2rem;
background: #52CAD1;
margin-top: 0.53rem;
}
// 三个统计卡片横向排列
@@ -336,23 +363,25 @@
// 单个统计卡片
.stat-card {
background: #fff;
border-radius: 0.48rem;
padding: 0.5rem;
border-radius: 0.16rem;
width: 2.03rem;
height: 1.87rem;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
padding-top:0.38rem;
box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.05);
// 大数字
&__num {
font-size: 0.64rem;
font-size: 0.48rem;
font-weight: 900;
color: $accent;
line-height: 0.85rem;
color: #52CAD1;
line-height: 0.63rem;
}
// 描述文字
&__label {
font-size: 0.14rem;
line-height: 0.2rem;
font-size: 0.16rem;
line-height: 0.22rem;
color: #9ca3af;
margin-top: 0.12rem;
letter-spacing: 0.0035rem;
@@ -362,11 +391,42 @@
// ==================== 岗位展示区 ====================
.home-jobs-showcase {
padding: 1rem 0;
background: rgba(82, 202, 209, 0.05);
background: linear-gradient(to top, rgba(82, 202, 209, 0.05), rgba(82, 202, 209, 0.0001));
position: relative;
overflow: hidden;
background: #fff;
// 背景色块 — 定位实现
&__orb {
position: absolute;
pointer-events: none;
z-index: 0;
// 顶部小块 — 类似 hero 底部色块
&--top {
left: 50%;
transform: translateX(-50%);
top: -3rem;
width: 5rem;
height: 2.5rem;
border-radius: 3.5rem;
background: rgba(82, 202, 209, 0.3);
filter: blur(1.2rem);
}
// 底部全宽 — 从底部向上渐变透明
&--bottom {
left: 0;
bottom: 0;
width: 100%;
height: 7rem;
background: linear-gradient(to top, rgba(82, 202, 209, 0.08), transparent);
}
}
// 内容容器
&__inner {
position: relative;
z-index: 1;
width: 12rem;
margin: 0 auto;
text-align: center;
@@ -407,11 +467,16 @@
// 岗位滚动卡片容器
&__scroll {
display: flex;
gap: 0.16rem;
overflow-x: auto;
padding-bottom: 0.1rem;
&::-webkit-scrollbar { display: none; }
overflow: hidden;
>div{
display: flex;
gap: 0.16rem;
overflow-x: auto;
padding-bottom: 0.1rem;
&::-webkit-scrollbar { display: none; }
margin-left: -1.2rem;
}
}
}
@@ -440,7 +505,7 @@
backdrop-filter: blur(36px);
border-radius: 0.12rem;
padding: 0.2rem 0.24rem;
min-width: 2.8rem;
min-width: 2.6rem;
text-align: left;
// 公司名 + 时间
@@ -481,9 +546,9 @@
min-width: 0;
h2 {
font-size: 0.52rem;
font-size: 0.48rem;
font-weight: 600;
line-height: 0.65rem;
line-height: 0.63rem;
color: #111;
margin: 0;
}
@@ -492,22 +557,21 @@
font-size: 0.2rem;
line-height: 0.325rem;
color: #999;
margin-top: 0.24rem;
max-width: 4.5rem;
margin-top: 0.16rem;
}
}
// 深色圆角按钮（带图标）
&__btn {
margin-top: 0.4rem;
margin-top: 0.73rem;
display: inline-flex;
align-items: center;
gap: 0.12rem;
padding: 0.2rem 0.4rem;
border-radius: 9999px;
padding: 0.15rem 0.4rem;
border-radius: 0.16rem;
background: #111111;
color: #fff;
font-size: 0.18rem;
font-size: 0.16rem;
line-height: 0.28rem;
font-weight: 600;
border: none;
@@ -530,8 +594,8 @@
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(157.19deg, #E8F8F9 0%, #FBFDF7 100%);
border-radius: 0.48rem;
background: linear-gradient(136.66deg, #E8F8F9 0%, #FBFDF7 100%);
border-radius: 0.16rem;
padding: 0.48rem;
min-height: 3.87rem;
}
@@ -568,7 +632,7 @@
width: 0.64rem;
height: 0.64rem;
border-radius: 50%;
background: linear-gradient(135deg, $accent, #a7f3d0);
//background: linear-gradient(135deg, $accent, #a7f3d0);
flex-shrink: 0;
}
@@ -590,7 +654,7 @@
span {
font-size: 0.1rem;
line-height: 0.15rem;
background: rgba(82, 202, 209, 0.15);
background: rgba(82, 202, 209, 0.2);
color: $accent;
padding: 0.02rem 0.08rem;
border-radius: 0.04rem;
@@ -602,11 +666,10 @@
margin-left: auto;
background: $accent;
color: #fff;
padding: 0.12rem 0.16rem;
padding: 0.12rem 0.11rem;
border-radius: 9999px;
font-size: 0.14rem;
line-height: 0.2rem;
font-weight: 600;
}
// 骨架进度条 — block 自然纵排，无需 flex-direction: column
@@ -614,7 +677,7 @@
.bar {
height: 0.08rem;
border-radius: 9999px;
background: #e5e7eb;
background: #F3F4F6;
&--full { width: 100%; }
&--3q { width: 75%; margin-top: 0.1rem; }
}
@@ -626,11 +689,10 @@
background: $accent;
color: #fff;
text-align: center;
padding: 0.16rem;
padding: 0.15rem;
border-radius: 0.16rem;
font-size: 0.16rem;
line-height: 0.24rem;
font-weight: 600;
}
}
@@ -719,7 +781,6 @@
&__title {
font-size: 0.14rem;
line-height: 0.2rem;
//font-weight: 600;
color: #111;
margin: 0;
}
@@ -735,7 +796,7 @@
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
50% { opacity: 0.6; }
}
// ---- 功能3：简历文档模拟卡片 ----
@@ -812,7 +873,7 @@
background: #e5e7eb;
border-radius: 0.02rem;
&--half { width: 50%; }
&--third { width: 33%; margin-top: 0.05rem; }
&--third { width: 33%; margin-top: 0.05rem;background: #F3F4F6 }
}
// 简历内容条占位 — block 自然纵排
@@ -875,7 +936,7 @@
&__role {
font-size: 0.11rem;
line-height: 0.156rem;
font-weight: 900;
font-weight: 500;
color: #111;
margin: 0.03rem 0 0;
}
@@ -916,7 +977,7 @@
border: 0.9px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.03);
backdrop-filter: blur(66px);
border-radius: 0.32rem;
border-radius: 0.16rem;
border-top-left-radius: 0;
color: #111;
}
@@ -925,7 +986,7 @@
&--user {
background: $accent;
color: #fff;
border-radius: 0.32rem;
border-radius: 0.16rem;
border-top-right-radius: 0;
margin-left: auto;
box-shadow: 0 4px 14px rgba(82, 202, 209, 0.2);
@@ -1024,15 +1085,17 @@
&__cards {
display: flex;
gap: 0.24rem;
justify-content: center;
width: 12rem;
margin: 0 auto;
justify-content: space-between;
margin-bottom: 0.48rem;
}
// 创始人引言深色卡片
&__founder {
width: 12rem;
background: #1a1a2e;
border-radius: 0.48rem;
background: #111;
border-radius: 0.16rem;
padding: 0.48rem 0.6rem;
display: flex;
align-items: center;
@@ -1044,8 +1107,8 @@
// 创始人装饰圆环 SVG
&__founder-decor {
position: absolute;
right: 0;
top: 50%;
right: -0.6rem;
bottom: -4.6rem;
transform: translateY(-50%);
width: 4.55rem;
height: 4.55rem;
@@ -1128,11 +1191,14 @@
// 单个评价卡片
.testimonial-card {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
max-width: 3.71rem;
background: #fff;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
border-radius: 0.4rem;
border-radius: 0.16rem;
padding: 0.3rem;
position: relative;
@@ -1157,7 +1223,7 @@
display: flex;
align-items: center;
gap: 0.16rem;
margin-top: 0.3rem;
margin-top: 0.16rem;
}
// 作者头像
@@ -1166,8 +1232,6 @@
height: 0.48rem;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
@@ -1246,8 +1310,8 @@
.filter-btn {
height: 0.48rem;
padding: 0 0.4rem;
border-radius: 0.24rem;
background: $accent;
border-radius: 0.16rem;
background: #111;
color: #fff;
font-size: 0.16rem;
line-height: 0.26rem;
@@ -1255,7 +1319,7 @@
border: none;
cursor: pointer;
transition: background 0.2s;
&:hover { background: $accent-hover; }
&:hover { }
}
// ==================== 常见问题（FAQ） ====================
@@ -1348,33 +1412,32 @@
}
}
// 悬停态 — 图标变品牌色
// 悬停态
&:hover {
.faq-item__icon {
background: $accent;
color: #fff;
background: #f3f4f6;
color: #1f2937;
}
}
// 展开态 — 图标变品牌色
// 展开态
&--open {
.faq-item__icon {
background: $accent;
color: #fff;
background: #f3f4f6;
color: #1f2937;
}
}
}
// ==================== 底部 CTA 行动号召 ====================
.home-cta {
padding: 0 1.2rem 1.2rem;
width: 12rem;
margin: 0 auto;
padding: 0 0 1.2rem;
width: 100%;
// CTA 内容区
&__inner {
background: linear-gradient(223.56deg, #52CAD1 0%, #53D9C8 100%);
border-radius: 0.6rem;
border-radius: 0;
padding: 1.0rem 0;
text-align: center;
position: relative;
@@ -1393,9 +1456,9 @@
// CTA 按钮
&__btn {
margin-top: 0.2rem;
padding: 0.24rem 0.64rem;
border-radius: 9999px;
margin-top: 0.4rem;
padding: 0.18rem 0.64rem;
border-radius: 0.16rem;
background: #111;
color: #fff;
font-size: 0.2rem;
src/assets/styles/pages/job-detail.scss
+2 -2
View File
@@ -4,10 +4,10 @@
.job-detail {
&__content {
margin-left: 2rem;
margin-right: 3.6rem;
margin-right: var(--chat-width, 4.0rem);
flex: 1;
padding: 0.12rem 0.56rem 0.12rem 0.18rem;
height: 100vh;
height: var(--app-height, 100vh);
box-sizing: border-box;
overflow: hidden;
background: $bg-main;
src/assets/styles/pages/jobs.scss
+2 -2
View File
@@ -5,10 +5,10 @@
.jobs-page {
&__content {
margin-left: 2rem;
margin-right: 4.0rem;
margin-right: var(--chat-width, 4.0rem);
flex: 1;
padding: 0.12rem 0.18rem;
height: 100vh;
height: var(--app-height, 100vh);
box-sizing: border-box;
overflow: hidden;
background: $bg-main;
src/assets/styles/pages/profile.scss
+1 -1
View File
@@ -6,7 +6,7 @@
margin-left: 2rem;
flex: 1;
padding: 0.12rem 0.36rem;
height: 100vh;
height: var(--app-height, 100vh);
box-sizing: border-box;
overflow-y: auto;
background: $bg-main;
src/assets/styles/pages/resume-detail.scss
+1 -1
View File
@@ -6,7 +6,7 @@
margin-left: 2rem;
flex: 1;
padding: 0.12rem 0.36rem;
height: 100vh;
height: var(--app-height, 100vh);
box-sizing: border-box;
overflow-y: auto;
background: $bg-main;
src/assets/styles/pages/resume.scss
+1 -1
View File
@@ -6,7 +6,7 @@
margin-left: 2rem;
flex: 1;
padding: 0.12rem 0.36rem;
height: 100vh;
height: var(--app-height, 100vh);
box-sizing: border-box;
overflow: hidden;
background: $bg-main;
src/assets/styles/variables.scss
+4 -3
View File
@@ -27,7 +27,8 @@ $text-light: #BFBFBF;
$text-middle: #777777;
// 强调色 / 品牌色
$accent: #4FC2C9;
//$accent: #4FC2C9;
$accent: #52CAD1;
// 强调色悬停态
$accent-hover: #42A8B3;
@@ -42,7 +43,7 @@ $border-color: #E8E8E8;
$overlay-bg: rgba(0, 0, 0, 0.5);
// 主按钮颜色背景（确认提交等）
$btn-dark: #4FC2C9;
$btn-dark: #52CAD1;
// 主按钮颜色悬停态
$btn-dark-hover: #42A8B3;
@@ -54,4 +55,4 @@ $btn-dark-hover: #42A8B3;
//$btn-dark-hover: #2E3142;
// 渐变色背景
$gradient-bg: linear-gradient(to right, #4FC2C9, #42A8B3);
$gradient-bg: linear-gradient(to right, #52CAD1, #42A8B3);
src/components/AiChat.vue
+2
View File
@@ -269,6 +269,8 @@ async function sendMessage() {
}
}
// ==================== 动态宽度：小屏缩放时逐渐缩小 ====================
// ==================== 生命周期 ====================
onMounted(() => {
src/components/LoginDialog.vue
+1 -1
View File
@@ -86,7 +86,7 @@ async function sendCode() {
const res = await sendSmsCode(phone.value)
if (res.code === '0' && res.data === true) {
ElMessage.success('验证码已发送')
countdown.value = 300
countdown.value = 60
timer = setInterval(() => {
countdown.value--
if (countdown.value <= 0 && timer) {
src/plugins/remAdapt.ts
+39 -16
View File
@@ -1,7 +1,7 @@
/**
* REM 适配插件
* 以 1920px 设计稿为基准，1rem = 100px
* 移动端使用 transform scale 缩放，避免浏览器最小字体限制
* 小屏使用 transform scale 缩放，同时设置 CSS 变量 --vh 供页面使用真实视口高度
*/
import type { Plugin } from 'vue'
@@ -10,10 +10,10 @@ const remAdaptPlugin: Plugin = {
const docEl = document.documentElement
const designWidth = 1920
// 检测是否为移动端
// 检测是否为移动端/小屏
const isMobile = (): boolean => {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|| window.innerWidth < 1050
|| window.innerWidth < 1200
}
// 重新计算缩放
@@ -33,16 +33,48 @@ const remAdaptPlugin: Plugin = {
body.style.width = designWidth + 'px'
body.style.transform = `scale(${scale})`
body.style.transformOrigin = 'top left'
// 设置 html 高度，让滚动正常工作
docEl.style.height = (body.scrollHeight * scale) + 'px'
docEl.style.overflow = 'auto'
// 屏幕越小 scale 越小，适当增大 rem 基准让字体视觉上更大
// 首页和其他页面使用不同的缩放系数
const isHomePage = window.location.pathname === '/' || window.location.pathname === '/index.html'
const homeMultiplier = 0.6 // 首页字体放大系数，可单独调整
const otherMultiplier = 2.0 // 其他页面字体放大系数
const multiplier = isHomePage ? homeMultiplier : otherMultiplier
const homeMaxFontSize = 180 // 首页最大 fontSize 上限
const otherMaxFontSize = 630 // 其他页面最大 fontSize 上限
const maxFontSize = isHomePage ? homeMaxFontSize : otherMaxFontSize
const fontScale = 1 + (1 - scale) * multiplier
const fontSize = Math.min(100 * fontScale, maxFontSize)
docEl.style.fontSize = fontSize + 'px'
// 动态计算聊天面板宽度：屏幕越窄，宽度从 4rem 缩到 1.0rem
// 用 scale 直接驱动（scale=0.625 时满宽4rem，scale 越小宽度越小）
const chatWidth = 1.0 + (4.0 - 1.0) * scale // scale=1→4rem, scale=0.5→2.5rem, scale=0.3→1.9rem
docEl.style.setProperty('--chat-width', Math.max(chatWidth, 1.0).toFixed(2) + 'rem')
// body 高度 = 视口高度 / scale，使其缩放后刚好等于视口高度
// overflow-y: auto 让内容在 body 内部滚动
const realViewHeight = window.innerHeight / scale
body.style.height = realViewHeight + 'px'
body.style.overflowY = 'auto'
body.style.minHeight = ''
// 设置 CSS 变量让页面组件可以使用真实视口高度（设计稿尺度下）
docEl.style.setProperty('--app-height', realViewHeight + 'px')
// html 固定视口高度 + overflow hidden，裁剪 body 缩放后的布局占位
docEl.style.height = '100vh'
docEl.style.overflow = 'hidden'
} else {
// PC 端：移除缩放
// PC 端：移除缩放相关样式
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', '4rem')
}
}
@@ -56,15 +88,6 @@ const remAdaptPlugin: Plugin = {
} else {
window.addEventListener('load', recalc)
}
// 监听 DOM 变化，更新高度
const observer = new MutationObserver(() => {
if (isMobile()) {
const scale = docEl.clientWidth / designWidth
docEl.style.height = (document.body.scrollHeight * scale) + 'px'
}
})
observer.observe(document.body, { childList: true, subtree: true })
}
}
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')