diff --git a/.kiro/steering/project-guidelines.md b/.kiro/steering/project-guidelines.md index 381d612..c3321bf 100644 --- a/.kiro/steering/project-guidelines.md +++ b/.kiro/steering/project-guidelines.md @@ -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`） diff --git a/index.html b/index.html index 1d491e5..efdf799 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Offer派 - 大学生AI求职平台 | 智能岗位匹配·一键自动网申·AI简历优化 diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..9099ffa Binary files /dev/null and b/public/logo.png differ diff --git a/src/assets/images/home/alex-avatar.png b/src/assets/images/home/alex-avatar.png new file mode 100644 index 0000000..3c4143f Binary files /dev/null and b/src/assets/images/home/alex-avatar.png differ diff --git a/src/assets/images/home/avatar-temporary.png b/src/assets/images/home/avatar-temporary.png index c6e4b19..4928f83 100644 Binary files a/src/assets/images/home/avatar-temporary.png and b/src/assets/images/home/avatar-temporary.png differ diff --git a/src/assets/images/home/blue-file-icon-01.png b/src/assets/images/home/blue-file-icon-01.png new file mode 100644 index 0000000..c81db8d Binary files /dev/null and b/src/assets/images/home/blue-file-icon-01.png differ diff --git a/src/assets/images/home/blue-flash-icon-01.png b/src/assets/images/home/blue-flash-icon-01.png new file mode 100644 index 0000000..c110f32 Binary files /dev/null and b/src/assets/images/home/blue-flash-icon-01.png differ diff --git a/src/assets/images/home/blue-horn-icon-01.png b/src/assets/images/home/blue-horn-icon-01.png new file mode 100644 index 0000000..9931638 Binary files /dev/null and b/src/assets/images/home/blue-horn-icon-01.png differ diff --git a/src/assets/images/home/blue-icon-768.png b/src/assets/images/home/blue-icon-768.png new file mode 100644 index 0000000..2942f8c Binary files /dev/null and b/src/assets/images/home/blue-icon-768.png differ diff --git a/src/assets/images/home/blue-message-icon-01.png b/src/assets/images/home/blue-message-icon-01.png new file mode 100644 index 0000000..9802642 Binary files /dev/null and b/src/assets/images/home/blue-message-icon-01.png differ diff --git a/src/assets/images/home/blue-shield-icon-01.png b/src/assets/images/home/blue-shield-icon-01.png new file mode 100644 index 0000000..179aad1 Binary files /dev/null and b/src/assets/images/home/blue-shield-icon-01.png differ diff --git a/src/assets/images/home/load-icon-01.png b/src/assets/images/home/load-icon-01.png new file mode 100644 index 0000000..8be70c3 Binary files /dev/null and b/src/assets/images/home/load-icon-01.png differ diff --git a/src/assets/images/home/right-icon-01.png b/src/assets/images/home/right-icon-01.png new file mode 100644 index 0000000..a1780ea Binary files /dev/null and b/src/assets/images/home/right-icon-01.png differ diff --git a/src/assets/images/home/student-avatar-0.png b/src/assets/images/home/student-avatar-0.png new file mode 100644 index 0000000..63dacee Binary files /dev/null and b/src/assets/images/home/student-avatar-0.png differ diff --git a/src/assets/images/home/student-avatar-1.png b/src/assets/images/home/student-avatar-1.png new file mode 100644 index 0000000..94a4408 Binary files /dev/null and b/src/assets/images/home/student-avatar-1.png differ diff --git a/src/assets/images/home/student-avatar-2.png b/src/assets/images/home/student-avatar-2.png new file mode 100644 index 0000000..a4459d9 Binary files /dev/null and b/src/assets/images/home/student-avatar-2.png differ diff --git a/src/assets/styles/components/ai-chat.scss b/src/assets/styles/components/ai-chat.scss index 6a6f93b..139379f 100644 --- a/src/assets/styles/components/ai-chat.scss +++ b/src/assets/styles/components/ai-chat.scss @@ -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; } diff --git a/src/assets/styles/components/job-resume-custom-dialog.scss b/src/assets/styles/components/job-resume-custom-dialog.scss index 4d779cc..67ce360 100644 --- a/src/assets/styles/components/job-resume-custom-dialog.scss +++ b/src/assets/styles/components/job-resume-custom-dialog.scss @@ -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; diff --git a/src/assets/styles/components/profile-edit-drawer.scss b/src/assets/styles/components/profile-edit-drawer.scss index 55b7937..25711e9 100644 --- a/src/assets/styles/components/profile-edit-drawer.scss +++ b/src/assets/styles/components/profile-edit-drawer.scss @@ -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); diff --git a/src/assets/styles/components/resume-analysis-report-drawer.scss b/src/assets/styles/components/resume-analysis-report-drawer.scss index b818cd9..d945670 100644 --- a/src/assets/styles/components/resume-analysis-report-drawer.scss +++ b/src/assets/styles/components/resume-analysis-report-drawer.scss @@ -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; diff --git a/src/assets/styles/components/resume-issue-fix-drawer.scss b/src/assets/styles/components/resume-issue-fix-drawer.scss index 78433f8..da6011f 100644 --- a/src/assets/styles/components/resume-issue-fix-drawer.scss +++ b/src/assets/styles/components/resume-issue-fix-drawer.scss @@ -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; diff --git a/src/assets/styles/components/side-nav.scss b/src/assets/styles/components/side-nav.scss index 71d9569..1fc901c 100644 --- a/src/assets/styles/components/side-nav.scss +++ b/src/assets/styles/components/side-nav.scss @@ -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; diff --git a/src/assets/styles/pages/agent.scss b/src/assets/styles/pages/agent.scss index 2f3dbfe..ceccbe8 100644 --- a/src/assets/styles/pages/agent.scss +++ b/src/assets/styles/pages/agent.scss @@ -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; diff --git a/src/assets/styles/pages/home.scss b/src/assets/styles/pages/home.scss index 9ac0e59..97913bf 100644 --- a/src/assets/styles/pages/home.scss +++ b/src/assets/styles/pages/home.scss @@ -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; diff --git a/src/assets/styles/pages/job-detail.scss b/src/assets/styles/pages/job-detail.scss index 57e178a..a2651cc 100644 --- a/src/assets/styles/pages/job-detail.scss +++ b/src/assets/styles/pages/job-detail.scss @@ -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; diff --git a/src/assets/styles/pages/jobs.scss b/src/assets/styles/pages/jobs.scss index b941f11..bf3718b 100644 --- a/src/assets/styles/pages/jobs.scss +++ b/src/assets/styles/pages/jobs.scss @@ -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; diff --git a/src/assets/styles/pages/profile.scss b/src/assets/styles/pages/profile.scss index 37926d1..f3798ca 100644 --- a/src/assets/styles/pages/profile.scss +++ b/src/assets/styles/pages/profile.scss @@ -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; diff --git a/src/assets/styles/pages/resume-detail.scss b/src/assets/styles/pages/resume-detail.scss index 1472144..36a7037 100644 --- a/src/assets/styles/pages/resume-detail.scss +++ b/src/assets/styles/pages/resume-detail.scss @@ -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; diff --git a/src/assets/styles/pages/resume.scss b/src/assets/styles/pages/resume.scss index b21961b..133fcd7 100644 --- a/src/assets/styles/pages/resume.scss +++ b/src/assets/styles/pages/resume.scss @@ -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; diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 58ed21a..9ae5f4c 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -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); diff --git a/src/components/AiChat.vue b/src/components/AiChat.vue index 6538b3c..c43eafb 100644 --- a/src/components/AiChat.vue +++ b/src/components/AiChat.vue @@ -269,6 +269,8 @@ async function sendMessage() { } } +// ==================== 动态宽度：小屏缩放时逐渐缩小 ==================== + // ==================== 生命周期 ==================== onMounted(() => { diff --git a/src/components/LoginDialog.vue b/src/components/LoginDialog.vue index 772d3e3..78c3c44 100644 --- a/src/components/LoginDialog.vue +++ b/src/components/LoginDialog.vue @@ -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) { diff --git a/src/plugins/remAdapt.ts b/src/plugins/remAdapt.ts index 3e7c371..5bcc4e7 100644 --- a/src/plugins/remAdapt.ts +++ b/src/plugins/remAdapt.ts @@ -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 }) } } diff --git a/src/views/Home.vue b/src/views/Home.vue index bf9b034..41e478b 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -7,7 +7,7 @@
-
+
-

Offer派
收offer就是快!

-

智能匹配职位、自动填写申请、量身定制简历、推荐内部人脉——不到1分钟，统统搞定！

+

智能匹配职位、自动填写申请、量身定制简历、推荐内部人脉——
不到1分钟，统统搞定！

+
+
+
+
+
@@ -68,24 +72,30 @@
+ +
+ +

海量优质校招岗位，尽在Offer派！

实时汇集海量超10000+名校校招职位

-
40万+
+
40万+
岗位总数
-
3120个岗位
+
{{ dailyJobCount }}个岗位
今日更新
-
- {{ job.company }}·{{ job.time }} - {{ job.title }} +
+
+ {{ job.company }}·{{ job.time }} + {{ job.title }} +
@@ -96,8 +106,8 @@
-

个性化
岗位匹配

-

第一时间发现真正适合你的岗位，精准匹配你的真实技能，杜绝虚假信息。

+

个性化智能
岗位匹配

+

第一时间发现真正适合你的岗位，精准匹配你的真
实技能，杜绝虚假信息。

@@ -148,14 +158,14 @@
-
✉
+

腾讯科技 - 校招投递成功

耗时 0.8s · 自动识别填写完毕

-
📋
+

京东校招 - 自动填写中...

进度 65%

@@ -173,9 +183,9 @@

岗位定制简历

-

10秒内生成针对特定岗位优化的专业简历，通过ATS系统，突出你的核心优势。。

+

10秒内生成针对特定岗位优化的专业简历，通过
ATS系统，突出你的核心优势。

@@ -199,7 +209,7 @@
- + ATS OPTIMIZED
@@ -212,9 +222,9 @@

名企内推
人脉直通

-

实时获取名企最新内推信息，自动填写网申内推码，简历更快到达HR。

+

实实时获取名企最新内推信息，自动填写网申内推
码，简历更快到达HR。

@@ -239,7 +249,7 @@

24h全天候
AI求职助手

随时提供求职指导，从岗位筛选到面试技巧，你的专属职业规划顾问。

@@ -269,23 +279,23 @@

万千毕业生的信赖之选

-

REAL VOICES FROM THE COMMUNITY

+

真实求职反馈，见证每一次从迷茫到上岸

- - - - -

"{{ t.text }}"

-
- 用户头像 -
-

{{ t.name }}

-

{{ t.school }}

+ +

{{ t.text }}

+
+
+ 用户头像 +
+

{{ t.name }}

+

{{ t.school }}

+
+
@@ -294,7 +304,7 @@ - +
创始人头像 @@ -325,7 +335,7 @@

常见问题

-

FREQUENTLY ASKED QUESTIONS

+

关于平台使用、隐私安全与岗位来源

{{ faq.q }}
- - + +
@@ -355,7 +371,7 @@
-

让Offer不再遥不可及
大学生一站式AI求职

+

让Offer派带你找到
人生第一份好工作

@@ -394,7 +410,7 @@ :displayStyle="filterDisplayStyle" @update:categoryIds="onHomeCategoryChange" /> - +
@@ -412,10 +428,11 @@
核心功能
    -
  • 智能岗位匹配
    • -
  • AI简历优化
    • -
  • AI求职助手
    • -
  • 一键投递
    • +
  • 智能岗位匹配
    • +
  • AI简历优化
    • +
  • AI求职助手
    • +
  • 一键投递
    • +
  • 名企导师
@@ -425,7 +442,7 @@
  • 名企实习
  • 名企导师1V1
  • Offer直通车
    • -
  • 名企导师
    • +
    @@ -447,10 +464,13 @@