1021 lines
25 KiB
Vue
1021 lines
25 KiB
Vue
<template>
|
||
<div class="recruit-page">
|
||
<!-- 全宽 Hero 横幅区 -->
|
||
<div class="hero-section">
|
||
<div class="hero-overlay"></div>
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">加入友福 共创未来</h1>
|
||
<p class="hero-subtitle">AI 健康赛道销售精英招募中，许昌 / 襄城同步开放！</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容容器（居中对齐，限制最大宽度） -->
|
||
<div class="main-recruit-container">
|
||
<!-- 公司简介 & 赛道优势 -->
|
||
<div class="about-card animate-item">
|
||
<div class="about-text">
|
||
<h2 class="card-subtitle">为什么说 AI 健康是你不能错过的黄金赛道？</h2>
|
||
<p class="desc">
|
||
当下的大健康产业，早已告别传统模式，在国家政策与市场需求的双重驱动下，迎来历史性的变革，而 AI 健康，正是这场变革中最具确定性的核心赛道。
|
||
</p>
|
||
<ul class="list check-list">
|
||
<li><strong>国家战略重磅加持：</strong>健康中国 2030 战略明确将智慧健康、数字医疗列为核心发展方向，多部门联合推动 AI 技术与健康管理、慢病干预、基层医疗深度融合，AI 健康产业已上升为国家级重点布局领域，政策红利持续释放，行业发展前景清晰可见。</li>
|
||
<li><strong>市场需求爆发式增长：</strong>全民健康理念从“治已病”向“治未病”全面转变，个性化健康管理、智能调养服务成为全民刚需。传统健康模式已无法满足新时代的健康需求，AI 健康凭借高效、精准、普惠的优势，成为行业升级的必然选择，万亿市场蓝海，机会无限。</li>
|
||
<li><strong>长期发展潜力十足：</strong>大健康产业整体规模即将突破 20 万亿，AI + 健康作为其中最具成长性、可持续性的细分赛道，兼具政策红利、市场刚需与低门槛优势，越早入局，越能抢占时代先机，享受行业增长带来的长期回报。</li>
|
||
</ul>
|
||
|
||
<h2 class="card-subtitle mt-6">选择友福同享，不止是一份工作，更是一份长期事业</h2>
|
||
<p class="desc">
|
||
友福同享深耕 AI 健康领域，以“科技赋能健康”为理念，打造了成熟的 AI 健康产品与服务体系，全国多城布局，拥有完善的市场模式与全维度赋能体系。
|
||
</p>
|
||
<ul class="list check-list">
|
||
<li>总部全维度支持，产品、行业知识，让你快速上手</li>
|
||
<li>上不封顶的薪酬回报，你的努力，直接转化为对等的价值</li>
|
||
<li>清晰的职业晋升通道，从基层到管理，每一步成长都有明确路径</li>
|
||
</ul>
|
||
</div>
|
||
<div class="about-image">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=2070"
|
||
alt="AI健康科技"
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 招聘流程 -->
|
||
<div class="process-section animate-item">
|
||
<h2 class="section-title">招聘流程</h2>
|
||
<p class="process-sub">我们将为候选人创造一段精彩的求职经历，从申请到面试的每一个步骤都具备清晰的沟通与同理心。</p>
|
||
<div class="steps">
|
||
<div class="step-item" v-for="(step, idx) in steps" :key="idx">
|
||
<div class="step-num">{{ step.num }}</div>
|
||
<div class="step-title">{{ step.title }}</div>
|
||
<div class="step-desc">{{ step.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 岗位概览表格 -->
|
||
<div class="jobs-table-section animate-item">
|
||
<h2 class="section-title">所有岗位</h2>
|
||
<div class="table-wrapper">
|
||
<el-table :data="jobList" stripe style="width: 100%" class="job-table" row-class-name="table-row">
|
||
<el-table-column prop="position" label="招聘岗位" min-width="200" />
|
||
<el-table-column prop="location" label="地区" min-width="120" />
|
||
<el-table-column prop="count" label="招聘人数" min-width="100" />
|
||
<el-table-column prop="education" label="学历要求" min-width="120" />
|
||
<el-table-column prop="date" label="发布时间" min-width="120" />
|
||
</el-table>
|
||
</div>
|
||
<p class="email-hint">简历投递邮箱：yftxtx@uftx2023.com，备注“官网招聘”</p>
|
||
</div>
|
||
|
||
<!-- 职位详情 -->
|
||
<div class="job-detail-card animate-item">
|
||
<h3 class="detail-title">销售精英（AI健康赛道）</h3>
|
||
<div class="detail-section">
|
||
<p class="label">岗位职责：</p>
|
||
<ul class="list">
|
||
<li>负责公司AI健康产品/服务的市场推广、客户开发与销售，完成个人及团队业绩指标</li>
|
||
<li>挖掘潜在客户需求，讲解产品核心优势，为客户提供专业的健康服务方案</li>
|
||
<li>维护新老客户关系，提升客户复购与转介绍率，建立长期稳定的合作</li>
|
||
<li>跟进销售全流程（客户洽谈、签约、回款、售后对接），及时反馈客户问题与市场动态</li>
|
||
<li>配合公司市场活动，参与线下推广、客户沙龙等活动，拓展客户渠道</li>
|
||
<li>持续学习AI健康行业知识与产品知识，不断提升专业销售能力</li>
|
||
</ul>
|
||
</div>
|
||
<div class="detail-section">
|
||
<p class="label">任职要求：</p>
|
||
<ul class="list">
|
||
<li>大专及以上学历，市场营销、生物医药等相关专业优先</li>
|
||
<li>2年及以上销售工作经验，有健康、医疗、养生保健行业销售经验者优先</li>
|
||
<li>具备较强的沟通表达、商务谈判与客户开拓能力，目标感强，抗压能力优秀</li>
|
||
<li>认同公司AI健康服务理念，热爱健康行业，工作积极主动、责任心强、诚实守信</li>
|
||
<li>熟悉客户开发流程，能熟练使用办公软件，有本地客户资源、社群运营、线下拓客经验者优先</li>
|
||
</ul>
|
||
</div>
|
||
<div class="detail-section">
|
||
<p class="label">薪酬福利：</p>
|
||
<ul class="list">
|
||
<li><strong>薪资待遇：</strong>无责任底薪 + 高额销售提成 + 绩效奖金 + 年终奖金（业绩达标者），综合薪资上不封顶！</li>
|
||
<li><strong>基础福利：</strong>社保、带薪培训（产品知识 + 销售技巧 + 行业知识）、节日福利、团建活动</li>
|
||
<li><strong>晋升通道：</strong>销售专员→销售主管→销售经理→销售总监，清晰的职业路径，成就更好的自己！</li>
|
||
</ul>
|
||
</div>
|
||
<div class="detail-section">
|
||
<p class="label">在这里，你能收获什么？</p>
|
||
<ul class="list">
|
||
<li><strong>行业红利：</strong>站在AI健康黄金赛道，提前布局未来，享受行业增长带来的长期回报</li>
|
||
<li><strong>专业成长：</strong>系统带薪培训，快速掌握AI健康行业知识与销售技巧，打造个人核心竞争力</li>
|
||
<li><strong>无限回报：</strong>上不封顶的提成机制，多劳多得，你的努力，直接转化为收入</li>
|
||
<li><strong>广阔前景：</strong>完善的晋升体系，从基层销售到管理岗位，每一步成长都清晰可见</li>
|
||
<li><strong>同频伙伴：</strong>和一群优秀、有活力的伙伴一起，做有价值的事，实现自我价值</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 薪酬福利 -->
|
||
<div class="benefits-section animate-item">
|
||
<h2 class="section-title">薪酬福利</h2>
|
||
<div class="benefits-grid">
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">💰</div>
|
||
<div class="benefit-text">薪资：无责任底薪+高额提成+绩效奖金+年终奖金，薪资上不封顶</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">🎁</div>
|
||
<div class="benefit-text">福利：缴纳社保、带薪专业培训、节日福利、定期团队团建</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">📈</div>
|
||
<div class="benefit-text">晋升：销售专员→销售主管→销售经理→销售总监，职业晋升通道清晰透明</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工作地点 + 应聘方式（内嵌简历二维码） -->
|
||
<div class="contact-section animate-item">
|
||
<div class="contact-card">
|
||
<div class="contact-left">
|
||
<h3 class="contact-title">工作地点</h3>
|
||
<p>河南省许昌市、河南省许昌市襄城县</p>
|
||
</div>
|
||
<div class="contact-right">
|
||
<h3 class="contact-title">应聘方式</h3>
|
||
<p><strong>应聘流程：</strong>简历投递 → 资格审查 → 面试沟通 → 录用入职</p>
|
||
<p><strong>简历投递邮箱：</strong>yftxtx@uftx2023.com</p>
|
||
<p><strong>联系电话：</strong>181-4852-2763</p>
|
||
|
||
<!-- 简历投递二维码放入应聘方式内 -->
|
||
<div class="qr-inline-wrap">
|
||
<div class="qr-inline-card">
|
||
<img src="https://images.health.ufutx.com/202605/11/813fb094d22ca1b7a3580772d2414bcd.png"
|
||
alt="简历投递二维码" class="qr-inline-img" />
|
||
<div class="qr-inline-desc">
|
||
扫码快速投递简历<br>
|
||
HR 一对一对接，优先筛选
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 商务合作洽谈（左右布局） -->
|
||
<div class="business-cooperate">
|
||
<div class="cooperate-container">
|
||
<div class="cooperate-text">
|
||
<h3 class="cooperate-title">商务合作洽谈</h3>
|
||
<p class="cooperate-desc">
|
||
友福同享面向全国开放渠道加盟、城市代理、项目联营、异业合作等多元合作模式。依托AI健康成熟产品体系、完整运营扶持体系与市场落地经验，可为合作伙伴提供品牌授权、产品供给、技术支持、运营培训、客源导流、落地指导全链路赋能。
|
||
</p>
|
||
<p class="cooperate-desc">
|
||
欢迎有志于大健康、智慧养老、社区服务、线下实体转型的个人、团队及企业洽谈合作，低门槛入局、高空间盈利，总部全程保驾护航，携手共享AI健康万亿赛道红利。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="cooperate-qr">
|
||
<div class="qr-cooperate-card">
|
||
<div class="qr-wrap">
|
||
<img src="https://image.fulllinkai.com/202605/11/be46d19fe584b167783c394dbfad863e.gif"
|
||
alt="商务合作二维码" class="qr-img" />
|
||
</div>
|
||
<p class="qr-desc">
|
||
专属顾问对接，定制合作方案与盈利模式
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const jobList = [
|
||
{
|
||
position: '销售精英（AI健康赛道）',
|
||
location: '河南许昌 / 襄城县',
|
||
count: '若干',
|
||
education: '大专及以上',
|
||
date: '2026-05-11'
|
||
}
|
||
]
|
||
|
||
const steps = [
|
||
{ num: '01', title: '扫码投递', desc: '有意向者请将个人简历发送至公司微信联系，进行审核' },
|
||
{ num: '02', title: '资格审查', desc: '招聘单位对简历进行资格审查，筛选符合要求的应聘者进入面试环节' },
|
||
{ num: '03', title: '面试沟通', desc: '主要考察综合素质、专业能力、应变能力等' },
|
||
{ num: '04', title: '录用通知', desc: '综合面试成绩，确定拟录用人员名单，发放Offer' },
|
||
{ num: '05', title: '正式入职', desc: '按规定时间内办理入职手续，开启新职业旅程' }
|
||
]
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.recruit-page {
|
||
background: #f8fafc;
|
||
font-family: "PingFang SC", "Microsoft YaHei", "Inter", sans-serif;
|
||
color: #1e293b;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ========== 全宽 HERO 高级质感 ========== */
|
||
.hero-section {
|
||
position: relative;
|
||
margin-top: 80px;
|
||
width: 100vw;
|
||
left: 50%;
|
||
right: 50%;
|
||
margin-left: -50vw;
|
||
margin-right: -50vw;
|
||
height: 480px;
|
||
background-image: url('https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?q=80&w=2070');
|
||
background-size: cover;
|
||
background-position: center 25%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 70px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(135deg, rgba(15, 65, 155, 0.92), rgba(25, 118, 210, 0.85));
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
text-align: center;
|
||
color: white;
|
||
animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 54px;
|
||
font-weight: 800;
|
||
letter-spacing: 1px;
|
||
margin-bottom: 20px;
|
||
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
opacity: 0.96;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
@keyframes fadeUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(40px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 主内容容器 */
|
||
.main-recruit-container {
|
||
max-width: 1260px;
|
||
margin: 0 auto;
|
||
padding: 0 24px 90px;
|
||
}
|
||
|
||
/* ========== 入场动画 ========== */
|
||
.animate-item {
|
||
opacity: 0;
|
||
transform: translateY(35px);
|
||
animation: itemFadeInUp 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
||
}
|
||
|
||
@keyframes itemFadeInUp {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.about-card {
|
||
animation-delay: 0.1s;
|
||
}
|
||
.process-section {
|
||
animation-delay: 0.2s;
|
||
}
|
||
.jobs-table-section {
|
||
animation-delay: 0.3s;
|
||
}
|
||
.job-detail-card {
|
||
animation-delay: 0.4s;
|
||
}
|
||
.benefits-section {
|
||
animation-delay: 0.5s;
|
||
}
|
||
.contact-section {
|
||
animation-delay: 0.6s;
|
||
}
|
||
|
||
/* ========== 卡片通用样式 ========== */
|
||
.about-card,
|
||
.process-section,
|
||
.jobs-table-section,
|
||
.job-detail-card,
|
||
.benefits-section,
|
||
.contact-section {
|
||
background: #ffffff;
|
||
border-radius: 28px;
|
||
box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.06);
|
||
transition: all 0.32s cubic-bezier(0.25, 1, 0.5, 1);
|
||
}
|
||
|
||
.about-card:hover,
|
||
.process-section:hover,
|
||
.jobs-table-section:hover,
|
||
.job-detail-card:hover,
|
||
.benefits-section:hover,
|
||
.contact-section:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 公司简介 */
|
||
.about-card {
|
||
display: flex;
|
||
gap: 44px;
|
||
margin-bottom: 70px;
|
||
padding: 44px 48px;
|
||
}
|
||
|
||
.about-text {
|
||
text-align: left;
|
||
flex: 1.2;
|
||
}
|
||
.about-image {
|
||
flex: 0.8;
|
||
}
|
||
.about-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 20px;
|
||
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.12);
|
||
transition: transform 0.35s ease, box-shadow 0.35s ease;
|
||
}
|
||
.about-image img:hover {
|
||
transform: scale(1.02);
|
||
box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.card-subtitle {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #0f4486;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #e2e8f0;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 16px;
|
||
line-height: 1.85;
|
||
color: #334155;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.check-list li::before {
|
||
content: "✓";
|
||
color: #10b981;
|
||
}
|
||
|
||
.mt-6 {
|
||
margin-top: 32px;
|
||
}
|
||
|
||
/* 招聘流程 */
|
||
.process-section {
|
||
padding: 48px 44px;
|
||
margin-bottom: 56px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 34px;
|
||
font-weight: 700;
|
||
color: #0f4486;
|
||
margin-bottom: 16px;
|
||
text-align: center;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.process-sub {
|
||
text-align: center;
|
||
color: #64748b;
|
||
max-width: 720px;
|
||
margin: 0 auto 52px auto;
|
||
font-size: 16px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.steps {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
}
|
||
|
||
.step-item {
|
||
flex: 1;
|
||
min-width: 150px;
|
||
text-align: center;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.step-item:hover {
|
||
transform: translateY(-6px);
|
||
}
|
||
|
||
.step-num {
|
||
width: 58px;
|
||
height: 58px;
|
||
background: linear-gradient(135deg, #1976d2, #0f5ba3);
|
||
color: white;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 18px;
|
||
box-shadow: 0 8px 20px rgba(25, 118, 210, 0.25);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.step-item:hover .step-num {
|
||
transform: scale(1.06);
|
||
box-shadow: 0 12px 24px rgba(25, 118, 210, 0.35);
|
||
}
|
||
|
||
.step-title {
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
margin-bottom: 8px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.step-desc {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 表格区域 */
|
||
.jobs-table-section {
|
||
padding: 40px 36px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.table-wrapper {
|
||
overflow-x: auto;
|
||
border-radius: 16px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.job-table {
|
||
min-width: 600px;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.email-hint {
|
||
margin-top: 22px;
|
||
font-size: 14px;
|
||
color: #1976d2;
|
||
background: #eff6ff;
|
||
display: inline-block;
|
||
padding: 8px 20px;
|
||
border-radius: 50px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.email-hint:hover {
|
||
background: #dbeafe;
|
||
}
|
||
|
||
:deep(.table-row:hover) {
|
||
background-color: #f0f7ff !important;
|
||
}
|
||
|
||
/* 职位详情卡片 */
|
||
.job-detail-card {
|
||
padding: 44px 40px;
|
||
margin-bottom: 56px;
|
||
}
|
||
|
||
.detail-title {
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
color: #0f4486;
|
||
margin-bottom: 28px;
|
||
border-left: 5px solid #1976d2;
|
||
padding-left: 20px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.detail-section {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.label {
|
||
text-align: left;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 0px 0 14px 22px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.list {
|
||
text-align: left;
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
.list li {
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
margin-bottom: 10px;
|
||
padding-left: 26px;
|
||
position: relative;
|
||
color: #334155;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.list li::before {
|
||
content: "•";
|
||
position: absolute;
|
||
left: 6px;
|
||
top: 0;
|
||
color: #1976d2;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
.list li:hover {
|
||
color: #0f4486;
|
||
padding-left: 30px;
|
||
}
|
||
|
||
/* 薪酬福利 */
|
||
.benefits-section {
|
||
padding: 44px 40px;
|
||
margin-bottom: 56px;
|
||
}
|
||
|
||
.benefits-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
|
||
gap: 24px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
background: #f8fafc;
|
||
padding: 24px;
|
||
border-radius: 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.benefit-item:hover {
|
||
transform: translateY(-4px);
|
||
background: #eff6ff;
|
||
box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.benefit-icon {
|
||
font-size: 34px;
|
||
transition: transform 0.25s ease;
|
||
}
|
||
.benefit-item:hover .benefit-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.benefit-text {
|
||
font-size: 16px;
|
||
line-height: 1.65;
|
||
text-align: left;
|
||
color: #334155;
|
||
}
|
||
|
||
/* 工作地点 + 应聘方式 */
|
||
.contact-section {
|
||
padding: 40px;
|
||
}
|
||
|
||
.contact-card {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1.5fr;
|
||
gap: 36px;
|
||
}
|
||
|
||
.contact-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #0f4486;
|
||
text-align: left;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #e2e8f0;
|
||
}
|
||
|
||
.contact-left p,
|
||
.contact-right p {
|
||
margin: 14px 0;
|
||
font-size: 16px;
|
||
line-height: 1.7;
|
||
color: #334155;
|
||
text-align: left;
|
||
}
|
||
|
||
/* 应聘方式内嵌二维码样式 + 悬浮放大 */
|
||
.qr-inline-wrap {
|
||
margin-top: 20px;
|
||
}
|
||
.qr-inline-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
background: #f8fafc;
|
||
padding: 16px;
|
||
border-radius: 16px;
|
||
max-width: 380px;
|
||
}
|
||
.qr-inline-img {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 8px;
|
||
transition: transform 0.3s ease; /* 动画过渡 */
|
||
}
|
||
/* 鼠标悬浮放大 1.1 倍 */
|
||
.qr-inline-img:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
.qr-inline-desc {
|
||
text-align: left;
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
line-height: 2;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 商务合作（左右布局） */
|
||
.business-cooperate {
|
||
margin-top: 50px;
|
||
padding-top: 40px;
|
||
border-top: 1px solid #e2e8f0;
|
||
}
|
||
.cooperate-container {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 40px;
|
||
}
|
||
.cooperate-text {
|
||
flex: 1;
|
||
text-align: left;
|
||
}
|
||
.cooperate-qr {
|
||
flex: 0 0 280px;
|
||
}
|
||
.cooperate-title {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #0f4486;
|
||
margin-bottom: 16px;
|
||
}
|
||
.cooperate-desc {
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
color: #334155;
|
||
margin-bottom: 14px;
|
||
}
|
||
.qr-cooperate-card {
|
||
background: #ffffff;
|
||
//box-shadow: 0 8px 24px -12px rgba(0,0,0,0.1);
|
||
padding: 24px 20px;
|
||
width: 100%;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.qr-wrap:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 16px 32px -12px rgba(0,0,0,0.15);
|
||
}
|
||
.qr-wrap {
|
||
padding: 12px;
|
||
background: #f8fafc;
|
||
border-radius: 16px;
|
||
display: inline-block;
|
||
}
|
||
.qr-img {
|
||
//width: 60vw;
|
||
//height: 160px;
|
||
border-radius: 8px;
|
||
display: block;
|
||
}
|
||
.qr-desc {
|
||
margin-top: 14px;
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ========== 响应式：平板 ========== */
|
||
@media (max-width: 1024px) {
|
||
.hero-title {
|
||
font-size: 46px;
|
||
}
|
||
.about-card {
|
||
flex-direction: column;
|
||
padding: 36px;
|
||
}
|
||
.steps {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.step-item {
|
||
max-width: 280px;
|
||
}
|
||
.contact-card {
|
||
grid-template-columns: 1fr;
|
||
gap: 28px;
|
||
}
|
||
.cooperate-container {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 30px;
|
||
}
|
||
.cooperate-text {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
/* ========== 移动端深度优化 ========== */
|
||
@media (max-width: 768px) {
|
||
.hero-section {
|
||
height: 320px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.hero-title {
|
||
font-size: 32px;
|
||
}
|
||
.hero-subtitle {
|
||
font-size: 16px;
|
||
}
|
||
.main-recruit-container {
|
||
padding: 0 20px 60px;
|
||
}
|
||
|
||
.about-card,
|
||
.process-section,
|
||
.jobs-table-section,
|
||
.job-detail-card,
|
||
.benefits-section,
|
||
.contact-section {
|
||
border-radius: 24px;
|
||
}
|
||
|
||
.about-card {
|
||
padding: 28px 24px;
|
||
gap: 24px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.about-image img {
|
||
border-radius: 18px;
|
||
}
|
||
.desc {
|
||
font-size: 15px;
|
||
line-height: 1.7;
|
||
margin-bottom: 16px;
|
||
}
|
||
.card-subtitle {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.process-section {
|
||
padding: 32px 24px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.section-title {
|
||
font-size: 28px;
|
||
}
|
||
.process-sub {
|
||
font-size: 15px;
|
||
margin-bottom: 36px;
|
||
padding: 0 12px;
|
||
}
|
||
.steps {
|
||
gap: 32px;
|
||
}
|
||
.step-item {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
}
|
||
.step-num {
|
||
width: 48px;
|
||
height: 48px;
|
||
font-size: 20px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.step-title {
|
||
font-size: 17px;
|
||
}
|
||
.step-desc {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.jobs-table-section {
|
||
padding: 28px 20px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.table-wrapper {
|
||
margin-top: 20px;
|
||
}
|
||
.email-hint {
|
||
font-size: 13px;
|
||
padding: 6px 16px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.job-detail-card {
|
||
padding: 28px 24px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.detail-title {
|
||
font-size: 22px;
|
||
margin-bottom: 22px;
|
||
padding-left: 16px;
|
||
}
|
||
.detail-section {
|
||
margin-bottom: 28px;
|
||
}
|
||
.label {
|
||
font-size: 17px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.list li {
|
||
font-size: 15px;
|
||
line-height: 1.65;
|
||
margin-bottom: 8px;
|
||
padding-left: 22px;
|
||
}
|
||
.list li::before {
|
||
font-size: 18px;
|
||
left: 4px;
|
||
}
|
||
|
||
.benefits-section {
|
||
padding: 32px 24px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.benefits-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
margin-top: 20px;
|
||
}
|
||
.benefit-item {
|
||
padding: 20px;
|
||
gap: 14px;
|
||
}
|
||
.benefit-icon {
|
||
font-size: 28px;
|
||
}
|
||
.benefit-text {
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.contact-section {
|
||
padding: 28px 24px;
|
||
}
|
||
.contact-card {
|
||
gap: 24px;
|
||
}
|
||
.contact-title {
|
||
font-size: 20px;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
}
|
||
.contact-left p,
|
||
.contact-right p {
|
||
font-size: 15px;
|
||
margin: 12px 0;
|
||
}
|
||
.cooperate-title {
|
||
font-size: 22px;
|
||
}
|
||
.cooperate-desc {
|
||
font-size: 15px;
|
||
}
|
||
.qr-cooperate-card {
|
||
max-width: 280px;
|
||
}
|
||
}
|
||
|
||
/* 小屏手机（<=480px）进一步优化 */
|
||
@media (max-width: 480px) {
|
||
.hero-section {
|
||
height: 280px;
|
||
margin-bottom: 36px;
|
||
}
|
||
.hero-title {
|
||
font-size: 28px;
|
||
}
|
||
.hero-subtitle {
|
||
font-size: 14px;
|
||
}
|
||
.main-recruit-container {
|
||
max-width: 100vw;
|
||
margin: 0;
|
||
padding: 0 22px;
|
||
}
|
||
.about-card,
|
||
.process-section,
|
||
.jobs-table-section,
|
||
.job-detail-card,
|
||
.benefits-section,
|
||
.contact-section {
|
||
padding: 20px 16px;
|
||
}
|
||
.about-card {
|
||
padding: 20px 16px;
|
||
}
|
||
.section-title {
|
||
font-size: 24px;
|
||
}
|
||
.process-sub {
|
||
font-size: 14px;
|
||
margin-bottom: 28px;
|
||
}
|
||
.detail-title {
|
||
font-size: 20px;
|
||
}
|
||
.label {
|
||
font-size: 16px;
|
||
}
|
||
.list li {
|
||
font-size: 14px;
|
||
}
|
||
.benefit-text {
|
||
font-size: 14px;
|
||
}
|
||
.contact-title {
|
||
font-size: 18px;
|
||
}
|
||
.contact-left p,
|
||
.contact-right p {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.qr-inline-wrap {
|
||
margin-top: 20px;
|
||
}
|
||
.qr-inline-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
background: #f8fafc;
|
||
padding: 16px;
|
||
border-radius: 16px;
|
||
max-width: 380px;
|
||
}
|
||
.qr-inline-img {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 8px;
|
||
transition: transform 0.3s ease; /* 动画过渡 */
|
||
}
|
||
/* 鼠标悬浮放大 1.1 倍 */
|
||
.qr-inline-img:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
.qr-inline-desc {
|
||
text-align: left;
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
line-height: 2;
|
||
font-weight: 600;
|
||
}
|
||
.email-hint {
|
||
font-size: 12px;
|
||
}
|
||
.cooperate-title {
|
||
font-size: 20px;
|
||
}
|
||
.cooperate-desc {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style> |