1638 lines
34 KiB
SCSS
1638 lines
34 KiB
SCSS
@use '../variables' as *;
|
||
|
||
// ========================================
|
||
// Home 首页样式
|
||
// 注意：项目 html { font-size: 100px }，即 1rem = 100px
|
||
// 所有文字元素必须显式设置 line-height，否则浏览器默认 normal（约 1.2em）
|
||
// 在 rem 体系下会导致行高异常
|
||
// ========================================
|
||
.home-page {
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
background: #fff;
|
||
color: #111;
|
||
font-family: system-ui, -apple-system, sans-serif;
|
||
// 全局基础行高重置，防止 1rem=100px 导致子元素继承异常行高
|
||
line-height: 1.5;
|
||
font-size: 0.14rem;
|
||
|
||
// ==================== 顶部导航栏 ====================
|
||
.home-nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
|
||
// 导航内容容器 — 居中 12rem 宽
|
||
&__inner {
|
||
width: 12.40rem;
|
||
margin: 0 auto;
|
||
height: 0.72rem;
|
||
padding: 0.2rem;
|
||
box-sizing: border-box;
|
||
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 区域
|
||
&__logo {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
// Logo 文字
|
||
&__logo-text {
|
||
font-size: 0.22rem;
|
||
font-weight: 700;
|
||
line-height: 0.34rem;
|
||
color: $accent;
|
||
letter-spacing: -0.01rem;
|
||
}
|
||
|
||
// Logo 图片
|
||
&__logo-img {
|
||
width: 1.32rem;
|
||
height: 0.34rem;
|
||
display: block;
|
||
}
|
||
|
||
// 导航右侧 CTA 按钮
|
||
&__btn {
|
||
padding: 0.1rem 0.32rem;
|
||
border-radius: 0.16rem;
|
||
background: #111;
|
||
color: #fff;
|
||
font-size: 0.14rem;
|
||
line-height: 0.2rem;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
&:hover { }
|
||
}
|
||
}
|
||
|
||
// ==================== Hero 主视觉区 ====================
|
||
.home-hero {
|
||
background: #fff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
font-size: 0.14rem;
|
||
background: radial-gradient(34.95% 29.57% at 60.26041666666667% 0%, rgba(206, 240, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||
// 背景色块 — 顶部
|
||
&__orb {
|
||
position: absolute;
|
||
border-radius: 3.5rem;
|
||
filter: blur(1.2rem);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
background: rgba(82, 202, 209, 0.3);
|
||
|
||
&--top {
|
||
left: 40%;
|
||
transform: translateX(-30%) rotate(3deg);
|
||
top: -4.9rem;
|
||
width: 13.6rem;
|
||
height: 6rem;
|
||
border-radius: 50%;
|
||
filter: blur(0.5rem);
|
||
background: rgba(82, 202, 209, 0.24);
|
||
opacity: 0;
|
||
}
|
||
|
||
// 背景色块 — 底部
|
||
&--bottom {
|
||
left: 40%;
|
||
transform: translateX(-50%);
|
||
bottom: -1.6rem;
|
||
width: 4rem;
|
||
height: 2rem;
|
||
}
|
||
}
|
||
|
||
// Hero 内容容器 — 左右两栏布局
|
||
&__inner {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 12rem;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 1.2rem 0 1.2rem;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
// 左侧文字区
|
||
&__left {
|
||
flex-shrink: 0;
|
||
//width: 5.8rem;
|
||
}
|
||
|
||
// 主标题
|
||
&__title {
|
||
font-size: 0.48rem;
|
||
font-weight: 600;
|
||
line-height: 0.61rem;
|
||
letter-spacing: 0.03rem;
|
||
color: #111;
|
||
margin: 0;
|
||
>span{
|
||
width: 1.51rem;
|
||
}
|
||
}
|
||
|
||
// 副标题描述
|
||
&__desc {
|
||
font-size: 0.16rem;
|
||
line-height: 0.2rem;
|
||
color: #9ca3af;
|
||
margin-top: 0.1rem;
|
||
}
|
||
|
||
// 免费体验按钮
|
||
&__cta {
|
||
margin-top: 0.69rem;
|
||
width: 1.84rem;
|
||
height: 0.52rem;
|
||
border-radius: 0.16rem;
|
||
background: $accent;
|
||
color: #fff;
|
||
font-size: 0.15rem;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: 0 25px 50px -12px rgba(82, 202, 209, 0.2);
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
// 右侧卡片区
|
||
&__right {
|
||
flex-shrink: 0;
|
||
//box-shadow: 0px 0px 15.45px rgba(82, 202, 209, 0.1);
|
||
border-radius: 0.16rem;
|
||
background: #FCFEFE;
|
||
}
|
||
|
||
&__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: 5.16rem;
|
||
height: 2.90rem;
|
||
//aspect-ratio: 16 / 9;
|
||
border-radius: 0.16rem;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
// 模拟匹配卡片容器
|
||
&__card {
|
||
width: 6.5rem;
|
||
border-radius: 0.4rem;
|
||
background: #f8fffe;
|
||
box-shadow: 0 0 20px rgba(82, 202, 209, 0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 窗口装饰圆点
|
||
&__card-dots {
|
||
display: flex;
|
||
gap: 0.08rem;
|
||
padding: 0.27rem 0.4rem;
|
||
.dot {
|
||
width: 0.1rem;
|
||
height: 0.1rem;
|
||
border-radius: 50%;
|
||
&--red { background: #f87171; }
|
||
&--yellow { background: #fbbf24; }
|
||
&--green { background: #34d399; }
|
||
}
|
||
}
|
||
|
||
// 卡片内容区
|
||
&__card-body {
|
||
padding: 0.3rem 0.4rem 0.4rem;
|
||
background: linear-gradient(135deg, rgba(82, 202, 209, 0.03), rgba(82, 202, 209, 0.08));
|
||
}
|
||
|
||
// 用户信息行
|
||
&__card-user {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.16rem;
|
||
margin-bottom: 0.24rem;
|
||
}
|
||
|
||
// 用户头像
|
||
&__card-avatar {
|
||
width: 0.64rem;
|
||
height: 0.64rem;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, $accent, #a7f3d0);
|
||
}
|
||
|
||
// 用户名称
|
||
&__card-info {
|
||
h4 {
|
||
font-size: 0.2rem;
|
||
line-height: 0.28rem;
|
||
font-weight: 400;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
// 技能标签
|
||
&__card-tags {
|
||
display: flex;
|
||
gap: 0.08rem;
|
||
margin-top: 0.04rem;
|
||
.tag {
|
||
font-size: 0.1rem;
|
||
line-height: 0.15rem;
|
||
background: rgba(82, 202, 209, 0.15);
|
||
color: $accent;
|
||
padding: 0.02rem 0.08rem;
|
||
border-radius: 0.04rem;
|
||
}
|
||
}
|
||
|
||
// 匹配度徽章
|
||
&__card-match {
|
||
margin-left: auto;
|
||
background: $accent;
|
||
color: #fff;
|
||
padding: 0.12rem 0.16rem;
|
||
border-radius: 9999px;
|
||
font-size: 0.14rem;
|
||
line-height: 0.2rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
// 骨架线条 — 纵向排列用 block 即可，无需 flex-direction: column
|
||
&__card-lines {
|
||
.line-full {
|
||
height: 0.08rem;
|
||
background: #e5e7eb;
|
||
border-radius: 9999px;
|
||
}
|
||
.line-3q {
|
||
height: 0.08rem;
|
||
width: 75%;
|
||
background: #e5e7eb;
|
||
border-radius: 9999px;
|
||
margin-top: 0.12rem;
|
||
}
|
||
}
|
||
|
||
// 匹配结果提示条
|
||
&__card-result {
|
||
margin-top: 0.32rem;
|
||
background: $accent;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding: 0.16rem;
|
||
border-radius: 0.16rem;
|
||
font-size: 0.16rem;
|
||
line-height: 0.24rem;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
// ==================== 数据统计区 ====================
|
||
.home-stats {
|
||
padding: 1rem 0;
|
||
background: #fff;
|
||
|
||
// 统计区内容容器
|
||
&__inner {
|
||
width: 12rem;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
// 标题区
|
||
&__header {
|
||
h2 {
|
||
font-size: 0.48rem;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015rem;
|
||
line-height: 0.63rem;
|
||
}
|
||
}
|
||
|
||
// 标题下方装饰线
|
||
&__divider {
|
||
width: 0.8rem;
|
||
height: 0.06rem;
|
||
border-radius: 9999px;
|
||
background: #52CAD1;
|
||
margin-top: 0.53rem;
|
||
}
|
||
|
||
// 三个统计卡片横向排列
|
||
&__cards {
|
||
display: flex;
|
||
gap: 0.24rem;
|
||
}
|
||
}
|
||
|
||
// 单个统计卡片
|
||
.stat-card {
|
||
background: #fff;
|
||
border-radius: 0.16rem;
|
||
width: 1.9rem;
|
||
height: 1.9rem;
|
||
text-align: center;
|
||
padding-top:0.38rem;
|
||
box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.05);
|
||
|
||
// 大数字
|
||
&__num {
|
||
font-size: 0.38rem;
|
||
font-weight: 900;
|
||
color: #2A8186;
|
||
line-height: 0.63rem;
|
||
}
|
||
|
||
// 描述文字
|
||
&__label {
|
||
font-size: 0.13rem;
|
||
line-height: 0.22rem;
|
||
color: #8D9399;
|
||
margin-top: 0.12rem;
|
||
letter-spacing: 0.0035rem;
|
||
}
|
||
}
|
||
|
||
// ==================== 岗位展示区 ====================
|
||
.home-jobs-showcase {
|
||
padding: 0.85rem 0 0.7rem 0;
|
||
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;
|
||
|
||
h2 {
|
||
font-size: 0.48rem;
|
||
font-weight: 600;
|
||
line-height: 0.576rem;
|
||
}
|
||
}
|
||
|
||
// 副标题
|
||
&__sub {
|
||
font-size: 0.15rem;
|
||
line-height: 0.28rem;
|
||
color: #999;
|
||
margin-top: 0.19rem;
|
||
}
|
||
|
||
// 玻璃态展示盒子
|
||
&__box {
|
||
margin-top: 0.87rem;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
box-shadow: 0 10px 40px rgba(82, 202, 209, 0.12);
|
||
backdrop-filter: blur(100px);
|
||
border-radius: 0.1rem;
|
||
padding: 0.64rem 0;
|
||
}
|
||
|
||
// 岗位数量统计 — 横向排列
|
||
&__stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
// 岗位滚动卡片容器 — 无缝轮播
|
||
&__scroll {
|
||
overflow: hidden;
|
||
|
||
.ticker-track {
|
||
display: flex;
|
||
gap: 0.30rem;
|
||
width: max-content;
|
||
animation: ticker-scroll 20s linear infinite;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 岗位数量统计项
|
||
.showcase-stat {
|
||
text-align: center;
|
||
&__num {
|
||
font-size: 0.40rem;
|
||
line-height: 0.6rem;
|
||
font-weight: 900;
|
||
color: #2A8186;
|
||
.accent { color: #2A8186; }
|
||
}
|
||
&__label {
|
||
font-size: 0.14rem;
|
||
line-height: 0.28rem;
|
||
color: #8D9399;
|
||
margin-top: 0.08rem;
|
||
}
|
||
}
|
||
|
||
// 单个岗位滚动卡片
|
||
.job-ticker {
|
||
flex-shrink: 0;
|
||
background: #12383A;
|
||
backdrop-filter: blur(36px);
|
||
border-radius: 0.12rem;
|
||
padding: 0.2rem 0.24rem;
|
||
min-width: 2.6rem;
|
||
text-align: left;
|
||
|
||
// 公司名 + 时间
|
||
&__company {
|
||
display: block;
|
||
font-size: 0.16rem;
|
||
line-height: 0.2rem;
|
||
font-weight: 600;
|
||
color: $accent;
|
||
}
|
||
|
||
// 岗位名称
|
||
&__title {
|
||
display: block;
|
||
font-size: 0.16rem;
|
||
line-height: 0.24rem;
|
||
color: #fff;
|
||
margin-top: 0.04rem;
|
||
}
|
||
}
|
||
|
||
// ==================== 功能介绍区（通用样式） ====================
|
||
.home-feature {
|
||
padding: 1rem 0;
|
||
|
||
// 内容容器 — 左右两栏
|
||
&__inner {
|
||
width: 12rem;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.8rem;
|
||
}
|
||
|
||
// 文字描述区
|
||
&__text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
h2 {
|
||
font-size: 0.34rem;
|
||
font-weight: 600;
|
||
line-height: 0.43rem;
|
||
letter-spacing: 0.02rem;
|
||
color: #111;
|
||
margin: 0;
|
||
}
|
||
|
||
p {
|
||
font-size: 0.14rem;
|
||
line-height: 0.2rem;
|
||
color: #999;
|
||
margin-top: 0.16rem;
|
||
}
|
||
}
|
||
|
||
// 深色圆角按钮（带图标）
|
||
&__btn {
|
||
margin-top: 0.73rem;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.12rem;
|
||
padding: 0 0.22rem;
|
||
border-radius: 0.12rem;
|
||
background: $accent;
|
||
color: #fff;
|
||
font-size: 0.12rem;
|
||
height: 0.42rem;
|
||
line-height: 0.42rem;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
&:hover {
|
||
//background: $btn-dark-hover;
|
||
//background: $btn-dark;
|
||
}
|
||
svg {
|
||
flex-shrink: 0;
|
||
color: #fff;
|
||
font-size: 0.12rem;
|
||
}
|
||
}
|
||
|
||
// 视觉展示区（右侧/左侧）
|
||
&__visual {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(136.66deg, #E8F8F9 0%, #FBFDF7 100%);
|
||
border-radius: 0.16rem;
|
||
padding: 0.48rem;
|
||
min-height: 3.87rem;
|
||
}
|
||
|
||
// 反向布局 — 图在左文在右
|
||
&--reverse {
|
||
.home-feature__inner {
|
||
flex-direction: row-reverse;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 无缝轮播关键帧 — 滚动半程（第一组内容宽度）
|
||
@keyframes ticker-scroll {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
|
||
// ---- 功能1：匹配卡片 ----
|
||
.feature-match-card {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
|
||
backdrop-filter: blur(60px);
|
||
border-radius: 0.32rem;
|
||
padding: 0.4rem;
|
||
width: 100%;
|
||
max-width: 5rem;
|
||
|
||
// 用户信息行
|
||
&__header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.16rem;
|
||
margin-bottom: 0.24rem;
|
||
}
|
||
|
||
// 头像
|
||
&__avatar {
|
||
width: 0.64rem;
|
||
height: 0.64rem;
|
||
border-radius: 50%;
|
||
//background: linear-gradient(135deg, $accent, #a7f3d0);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 用户名
|
||
&__info {
|
||
h4 {
|
||
font-size: 0.2rem;
|
||
line-height: 0.28rem;
|
||
font-weight: 400;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
// 技能标签
|
||
&__tags {
|
||
display: flex;
|
||
gap: 0.08rem;
|
||
margin-top: 0.04rem;
|
||
span {
|
||
font-size: 0.1rem;
|
||
line-height: 0.15rem;
|
||
background: rgba(82, 202, 209, 0.2);
|
||
color: $accent;
|
||
padding: 0.02rem 0.08rem;
|
||
border-radius: 0.04rem;
|
||
}
|
||
}
|
||
|
||
// 匹配度分数
|
||
&__score {
|
||
margin-left: auto;
|
||
background: $accent;
|
||
color: #fff;
|
||
padding: 0.12rem 0.11rem;
|
||
border-radius: 9999px;
|
||
font-size: 0.14rem;
|
||
line-height: 0.2rem;
|
||
}
|
||
|
||
// 骨架进度条 — block 自然纵排，无需 flex-direction: column
|
||
&__bars {
|
||
.bar {
|
||
height: 0.08rem;
|
||
border-radius: 9999px;
|
||
background: #F3F4F6;
|
||
&--full { width: 100%; }
|
||
&--3q { width: 75%; margin-top: 0.1rem; }
|
||
}
|
||
}
|
||
|
||
// 匹配结果
|
||
&__result {
|
||
margin-top: 0.32rem;
|
||
background: $accent;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding: 0.15rem;
|
||
border-radius: 0.16rem;
|
||
font-size: 0.16rem;
|
||
line-height: 0.24rem;
|
||
}
|
||
}
|
||
|
||
// ---- 功能2：自动投递卡片 ----
|
||
.feature-apply-card {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
|
||
backdrop-filter: blur(60px);
|
||
border-radius: 0.32rem;
|
||
padding: 0.32rem;
|
||
width: 100%;
|
||
max-width: 5.6rem;
|
||
//transform: rotate(-2deg);
|
||
|
||
// 顶部状态栏
|
||
&__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #f3f4f6;
|
||
padding-bottom: 0.16rem;
|
||
margin-bottom: 0.24rem;
|
||
}
|
||
|
||
// 状态文字
|
||
&__status {
|
||
font-size: 0.14rem;
|
||
line-height: 0.2rem;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
// 窗口装饰圆点
|
||
&__dots {
|
||
display: flex;
|
||
gap: 0.04rem;
|
||
.dot {
|
||
width: 0.08rem;
|
||
height: 0.08rem;
|
||
border-radius: 50%;
|
||
&--red { background: #f87171; }
|
||
&--yellow { background: #fbbf24; }
|
||
&--green { background: #34d399; }
|
||
}
|
||
}
|
||
|
||
// 投递列表 — 子项是 block 级，自然纵排
|
||
&__list {
|
||
.apply-item + .apply-item {
|
||
margin-top: 0.16rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 单个投递项
|
||
.apply-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.16rem;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
padding: 0.16rem;
|
||
border-radius: 0.16rem;
|
||
border: 1px solid rgba(255, 255, 255, 1);
|
||
|
||
// 图标
|
||
&__icon {
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
background: $accent;
|
||
border-radius: 0.12rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 0.18rem;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
|
||
// 脉冲动画
|
||
&--pulse {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
}
|
||
|
||
// 投递标题
|
||
&__title {
|
||
font-size: 0.14rem;
|
||
line-height: 0.2rem;
|
||
color: #111;
|
||
margin: 0;
|
||
}
|
||
|
||
// 投递副标题
|
||
&__sub {
|
||
font-size: 0.12rem;
|
||
line-height: 0.16rem;
|
||
color: #9ca3af;
|
||
margin: 0.02rem 0 0;
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.6; }
|
||
}
|
||
|
||
// ---- 功能3：简历文档模拟卡片 ----
|
||
.feature-resume-card {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
// 简历文档
|
||
&__doc--border {
|
||
background: #F9FDFD;
|
||
padding: 0.2rem;
|
||
border-radius: 0.25rem;
|
||
border: 0.62px solid #FFFFFF;
|
||
box-shadow: 0 0.15rem 0.31rem -0.074rem rgba(0, 0, 0, 0.3);
|
||
}
|
||
&__doc {
|
||
width: 2rem;
|
||
aspect-ratio: 3/4;
|
||
background: #fff;
|
||
border: 1.2px dashed #e5e7eb;
|
||
border-radius: 0.16rem;
|
||
padding: 0.16rem;
|
||
|
||
}
|
||
|
||
// ATS 优化徽章
|
||
&__badge {
|
||
position: absolute;
|
||
bottom: -0.1rem;
|
||
left: -0.12rem;
|
||
background: #111111;
|
||
color: #fff;
|
||
padding: 0.16rem 0.2rem;
|
||
border-radius: 0.15rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.08rem;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
|
||
span {
|
||
font-size: 0.09rem;
|
||
line-height: 0.09rem;
|
||
letter-spacing: 0.01rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 简历文档头部
|
||
.doc-header {
|
||
display: flex;
|
||
gap: 0.12rem;
|
||
align-items: center;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
// 简历头像占位
|
||
.doc-avatar {
|
||
width: 0.25rem;
|
||
height: 0.25rem;
|
||
border-radius: 0.05rem;
|
||
background: #f3f4f6;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 简历文字行占位 — block 自然纵排
|
||
.doc-lines {
|
||
flex: 1;
|
||
}
|
||
|
||
.doc-line {
|
||
height: 0.05rem;
|
||
background: #e5e7eb;
|
||
border-radius: 0.02rem;
|
||
&--half { width: 50%; }
|
||
&--third { width: 33%; margin-top: 0.05rem;background: #F3F4F6 }
|
||
}
|
||
|
||
// 简历内容条占位 — block 自然纵排
|
||
.doc-bar {
|
||
height: 0.075rem;
|
||
border-radius: 0.025rem;
|
||
&--1 { width: 100%; background: rgba(82, 202, 209, 0.3); }
|
||
&--2 { width: 100%; background: rgba(82, 202, 209, 0.2); margin-top: 0.1rem; }
|
||
&--3 { width: 83%; background: rgba(82, 202, 209, 0.1); margin-top: 0.1rem; }
|
||
}
|
||
|
||
// ---- 功能4：内推人脉网格 ----
|
||
.referral-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0.16rem;
|
||
width: 100%;
|
||
max-width: 3.5rem;
|
||
}
|
||
|
||
// 单个内推卡片
|
||
.referral-card {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: 0.8px solid rgba(255, 255, 255, 0.5);
|
||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
|
||
backdrop-filter: blur(56px);
|
||
border-radius: 0.32rem;
|
||
padding: 0.2rem;
|
||
font-size: 0.14rem;
|
||
|
||
// 奇数列偏移效果
|
||
&--offset {
|
||
transform: translateY(0.25rem);
|
||
}
|
||
|
||
// 公司首字母图标
|
||
&__icon {
|
||
width: 0.32rem;
|
||
height: 0.32rem;
|
||
border-radius: 0.12rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 0.13rem;
|
||
line-height: 1;
|
||
font-weight: 900;
|
||
margin-bottom: 0.12rem;
|
||
}
|
||
|
||
// 公司名
|
||
&__company {
|
||
font-size: 0.1rem;
|
||
line-height: 0.125rem;
|
||
color: #9ca3af;
|
||
margin: 0;
|
||
}
|
||
|
||
// 岗位名
|
||
&__role {
|
||
font-size: 0.11rem;
|
||
line-height: 0.156rem;
|
||
font-weight: 500;
|
||
color: #111;
|
||
margin: 0.03rem 0 0;
|
||
}
|
||
|
||
// 内推码标签
|
||
&__code {
|
||
display: inline-block;
|
||
margin-top: 0.12rem;
|
||
font-size: 0.08rem;
|
||
line-height: 0.117rem;
|
||
background: rgba(82, 202, 209, 0.1);
|
||
color: $accent;
|
||
padding: 0.015rem 0.06rem;
|
||
border-radius: 9999px;
|
||
}
|
||
}
|
||
|
||
// ---- 功能5：AI 对话模拟 ----
|
||
.feature-ai-chat {
|
||
width: 100%;
|
||
max-width: 5rem;
|
||
// 气泡纵向排列 — 子元素是 block 级 div，自然纵排
|
||
.ai-bubble + .ai-bubble {
|
||
margin-top: 0.22rem;
|
||
}
|
||
}
|
||
|
||
// 对话气泡
|
||
.ai-bubble {
|
||
padding: 0.22rem;
|
||
font-size: 0.13rem;
|
||
line-height: 0.21rem;
|
||
max-width: 80%;
|
||
|
||
// 机器人气泡
|
||
&--bot {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
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.16rem;
|
||
border-top-left-radius: 0;
|
||
color: #111;
|
||
}
|
||
|
||
// 用户气泡
|
||
&--user {
|
||
background: $accent;
|
||
color: #fff;
|
||
border-radius: 0.16rem;
|
||
border-top-right-radius: 0;
|
||
margin-left: auto;
|
||
box-shadow: 0 4px 14px rgba(82, 202, 209, 0.2);
|
||
}
|
||
|
||
// 气泡内标题
|
||
&__title {
|
||
font-weight: 600;
|
||
margin: 0 0 0.12rem;
|
||
line-height: 0.18rem;
|
||
}
|
||
|
||
// 面试标签网格
|
||
&__tags {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0.1rem;
|
||
|
||
span {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border: 0.9px solid rgba(255, 255, 255, 0.4);
|
||
border-radius: 0.16rem;
|
||
padding: 0.1rem 0.12rem;
|
||
font-size: 0.11rem;
|
||
line-height: 0.147rem;
|
||
color: #111;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ==================== 用户评价区 ====================
|
||
.home-testimonials {
|
||
position: relative;
|
||
|
||
// 底层背景色块 — 左上角
|
||
&__orb {
|
||
position: absolute;
|
||
border-radius: 3.5rem;
|
||
filter: blur(1.2rem);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
|
||
&--left {
|
||
left: -0.11rem;
|
||
top: 0.6rem;
|
||
width: 5.95rem;
|
||
height: 5.95rem;
|
||
background: #52CAD1;
|
||
}
|
||
|
||
// 底层背景色块 — 右下角
|
||
&--right {
|
||
right: -0.5rem;
|
||
bottom: 0.5rem;
|
||
width: 6rem;
|
||
height: 6rem;
|
||
background: #6DE5B6;
|
||
}
|
||
}
|
||
|
||
// 内容层白色容器 — 半透明白底透出色块
|
||
&__container {
|
||
position: relative;
|
||
z-index: 1;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border-radius: 1rem;
|
||
backdrop-filter: blur(100px);
|
||
padding: 1.0rem 0.05rem;
|
||
box-shadow: inset 0 0 0.9rem rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
// 标题区
|
||
&__header {
|
||
text-align: center;
|
||
margin-bottom: 0.8rem;
|
||
|
||
h2 {
|
||
font-size: 0.38rem;
|
||
line-height: 0.48rem;
|
||
font-weight: 600;
|
||
letter-spacing: -0.012rem;
|
||
color: #111;
|
||
}
|
||
|
||
p {
|
||
font-size: 0.15rem;
|
||
line-height: 0.24rem;
|
||
color: #9ca3af;
|
||
letter-spacing: 0.0rem;
|
||
text-transform: uppercase;
|
||
margin-top: 0.14rem;
|
||
}
|
||
}
|
||
|
||
// 评价卡片横向排列
|
||
&__cards {
|
||
display: flex;
|
||
gap: 0.24rem;
|
||
width: 12rem;
|
||
margin: 0 auto;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.48rem;
|
||
}
|
||
|
||
// 创始人引言深色卡片
|
||
&__founder {
|
||
width: 12rem;
|
||
background: #111;
|
||
border-radius: 0.16rem;
|
||
padding: 0.36rem 0.40rem;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
// 创始人装饰圆环 SVG
|
||
&__founder-decor {
|
||
position: absolute;
|
||
right: -0.6rem;
|
||
bottom: -4.6rem;
|
||
transform: translateY(-50%);
|
||
width: 4.55rem;
|
||
height: 4.55rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
// 创始人内容区
|
||
&__founder-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.48rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
// 创始人头像
|
||
&__founder-img {
|
||
width: 1.28rem;
|
||
height: 1.28rem;
|
||
border-radius: 0.24rem;
|
||
object-fit: cover;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 创始人文字区
|
||
&__founder-text {
|
||
flex: 1;
|
||
|
||
blockquote {
|
||
font-size: 0.20rem;
|
||
line-height: 0.34rem;
|
||
color: #fff;
|
||
margin: 0;
|
||
}
|
||
|
||
cite {
|
||
display: block;
|
||
margin-top: 0.24rem;
|
||
font-style: normal;
|
||
line-height: 0.28rem;
|
||
|
||
.cite-name {
|
||
font-size: 0.2rem;
|
||
color: $accent;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cite-role {
|
||
font-size: 0.14rem;
|
||
color: #999;
|
||
margin-left: 0.16rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 分页小圆点
|
||
&__dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0.1rem;
|
||
margin-top: 0.4rem;
|
||
}
|
||
|
||
&__dot {
|
||
width: 0.12rem;
|
||
height: 0.12rem;
|
||
border-radius: 50%;
|
||
background: #111;
|
||
opacity: 0.3;
|
||
cursor: pointer;
|
||
transition: opacity 0.3s;
|
||
|
||
&--active {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 单个评价卡片
|
||
.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.16rem;
|
||
padding: 0.3rem;
|
||
position: relative;
|
||
|
||
// 引号装饰
|
||
&__quote {
|
||
position: absolute;
|
||
right: 0.3rem;
|
||
bottom: 0.3rem;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
// 评价文字
|
||
&__text {
|
||
font-size: 0.16rem;
|
||
line-height: 0.26rem;
|
||
color: #4b5563;
|
||
margin: 0;
|
||
}
|
||
|
||
// 作者信息行
|
||
&__author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.16rem;
|
||
margin-top: 0.16rem;
|
||
}
|
||
|
||
// 作者头像
|
||
&__avatar {
|
||
width: 0.48rem;
|
||
height: 0.48rem;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 作者信息容器
|
||
&__info {
|
||
min-width: 0;
|
||
}
|
||
|
||
// 作者姓名
|
||
&__name {
|
||
font-size: 0.16rem;
|
||
line-height: 0.24rem;
|
||
font-weight: 600;
|
||
color: #111;
|
||
margin: 0;
|
||
}
|
||
|
||
// 学校
|
||
&__school {
|
||
font-size: 0.12rem;
|
||
line-height: 0.16rem;
|
||
color: #9ca3af;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
// ==================== 岗位搜索入口 ====================
|
||
.home-job-search {
|
||
padding-bottom: 0.8rem;
|
||
|
||
// 内容容器
|
||
&__inner {
|
||
width: 12rem;
|
||
margin: 0 auto;
|
||
|
||
h3 {
|
||
font-size: 0.3rem;
|
||
line-height: 0.36rem;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
}
|
||
|
||
// 筛选条件横向排列
|
||
&__filters {
|
||
display: flex;
|
||
gap: 0.60rem;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
// 筛选下拉框
|
||
.filter-select {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 2.35rem;
|
||
height: 0.48rem;
|
||
border-radius: 0.24rem;
|
||
border: 1px solid #e5e7eb;
|
||
padding: 0 0.2rem;
|
||
cursor: pointer;
|
||
|
||
span {
|
||
font-size: 0.16rem;
|
||
line-height: 0.24rem;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
svg { color: #9ca3af; }
|
||
}
|
||
|
||
// 搜索按钮
|
||
.filter-btn {
|
||
width: 1.84rem;
|
||
height: 0.56rem;
|
||
padding: 0 0.4rem;
|
||
border-radius: 0.16rem;
|
||
background: #111;
|
||
color: #fff;
|
||
font-size: 0.16rem;
|
||
line-height: 0.26rem;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
&:hover { }
|
||
}
|
||
|
||
// ==================== 常见问题（FAQ） ====================
|
||
.home-faq {
|
||
padding: 1rem 0;
|
||
|
||
// 内容容器
|
||
&__inner {
|
||
width: 12rem;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
// 标题区
|
||
&__header {
|
||
text-align: center;
|
||
margin-bottom: 0.6rem;
|
||
|
||
h2 {
|
||
font-size: 0.48rem;
|
||
line-height: 0.48rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
p {
|
||
font-size: 0.16rem;
|
||
line-height: 0.24rem;
|
||
color: #9ca3af;
|
||
margin-top: 0.1rem;
|
||
}
|
||
}
|
||
|
||
// FAQ 列表 — 子项是 block 级 div，自然纵排，用 margin 间距
|
||
&__list {
|
||
max-width: 8.96rem;
|
||
margin: 0 auto;
|
||
|
||
.faq-item + .faq-item {
|
||
margin-top: 0.16rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 单个 FAQ 项
|
||
.faq-item {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
|
||
border-radius: 0.24rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
overflow: hidden;
|
||
|
||
// 问题行
|
||
&__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0.3rem 0.24rem;
|
||
}
|
||
|
||
// 问题文字
|
||
&__question {
|
||
font-size: 0.2rem;
|
||
line-height: 0.3rem;
|
||
font-weight: 500;
|
||
color: #111;
|
||
}
|
||
|
||
// 展开/收起图标按钮
|
||
&__icon {
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
background: #f3f4f6;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
color: #111;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
// 答案内容
|
||
&__answer {
|
||
padding: 0 0.24rem 0.3rem;
|
||
|
||
p {
|
||
font-size: 0.16rem;
|
||
line-height: 0.3rem;
|
||
color: #4b5563;
|
||
}
|
||
}
|
||
|
||
// "还有其他问题"展开后的反馈表单
|
||
&__feedback {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.24rem;
|
||
}
|
||
|
||
// 文本输入框
|
||
&__textarea {
|
||
width: 100%;
|
||
min-height: 1.2rem;
|
||
padding: 0.2rem;
|
||
border-radius: 0.16rem;
|
||
border: none;
|
||
background: #f5f5f5;
|
||
font-size: 0.14rem;
|
||
line-height: 0.22rem;
|
||
color: #111;
|
||
resize: none;
|
||
outline: none;
|
||
font-family: inherit;
|
||
|
||
&::placeholder {
|
||
color: #bbb;
|
||
}
|
||
}
|
||
|
||
// 提交按钮
|
||
&__submit {
|
||
padding: 0.14rem 0.6rem;
|
||
border-radius: 9999px;
|
||
background: #111;
|
||
color: #fff;
|
||
font-size: 0.16rem;
|
||
line-height: 0.22rem;
|
||
font-weight: 500;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
// 悬停态
|
||
&:hover {
|
||
.faq-item__icon {
|
||
background: #f3f4f6;
|
||
color: #1f2937;
|
||
}
|
||
}
|
||
|
||
// 展开态
|
||
&--open {
|
||
.faq-item__icon {
|
||
background: #f3f4f6;
|
||
color: #1f2937;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ==================== 底部 CTA 行动号召 ====================
|
||
.home-cta {
|
||
padding: 0 0 1.0rem;
|
||
width: 100%;
|
||
|
||
// CTA 内容区
|
||
&__inner {
|
||
background: linear-gradient(223.56deg, #52CAD1 0%, #53D9C8 100%);
|
||
border-radius: 0;
|
||
padding: 1.0rem 0;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
line-height: 1;
|
||
|
||
h2 {
|
||
font-size: 0.52rem;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
line-height: 0.65rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
// CTA 按钮
|
||
&__btn {
|
||
margin-top: 0.4rem;
|
||
padding: 0.18rem 0.64rem;
|
||
border-radius: 0.16rem;
|
||
background: #111;
|
||
color: #fff;
|
||
font-size: 0.2rem;
|
||
line-height: 0.28rem;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
position: relative;
|
||
z-index: 1;
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||
transition: background 0.2s;
|
||
&:hover { background: #111; }
|
||
}
|
||
}
|
||
|
||
// ==================== 页脚 ====================
|
||
.home-footer {
|
||
background: #111;
|
||
border-top: 1px solid #f3f4f6;
|
||
padding: 0.8rem 0 0.4rem;
|
||
line-height: 1;
|
||
|
||
// 页脚内容 — 四列横向排列
|
||
&__inner {
|
||
width: 12rem;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
gap: 1.2rem;
|
||
}
|
||
|
||
// 单列
|
||
&__col {
|
||
&:first-child {
|
||
min-width: 2.6rem;
|
||
}
|
||
|
||
// 列标题
|
||
h5 {
|
||
font-size: 0.16rem;
|
||
line-height: 0.24rem;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
margin: 0 0 0.32rem;
|
||
}
|
||
|
||
a{
|
||
text-decoration: none;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
// 链接列表 — ul > li 自然纵排，无需 flex-direction: column
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
li {
|
||
font-size: 0.16rem;
|
||
line-height: 0.24rem;
|
||
color: #999;
|
||
cursor: pointer;
|
||
&:hover { color: $accent; }
|
||
}
|
||
|
||
li + li {
|
||
margin-top: 0.16rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Logo
|
||
&__logo {
|
||
margin-bottom: 0.16rem;
|
||
font-size: 0.14rem;
|
||
}
|
||
|
||
// Logo 图片
|
||
&__logo-img {
|
||
width: 1.43rem;
|
||
height: 0.355rem;
|
||
display: block;
|
||
}
|
||
|
||
// Logo 文字（保留备用）
|
||
&__logo-text {
|
||
font-size: 0.22rem;
|
||
line-height: 0.34rem;
|
||
font-weight: 700;
|
||
color: $accent;
|
||
}
|
||
|
||
// 品牌标语
|
||
&__slogan {
|
||
font-size: 0.16rem;
|
||
line-height: 0.24rem;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
// 版权信息
|
||
&__bottom {
|
||
width: 12rem;
|
||
margin: 0.6rem auto 0;
|
||
text-align: center;
|
||
padding-top: 0.4rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0.2rem;
|
||
|
||
|
||
p {
|
||
font-size: 0.12rem;
|
||
color: #9ca3af;
|
||
}
|
||
a{
|
||
font-size: 0.12rem;
|
||
text-decoration: none;
|
||
color: #9ca3af;
|
||
}
|
||
}
|
||
}
|
||
} // end .home-page
|