654 lines
19 KiB
Vue
654 lines
19 KiB
Vue
|
<template>
|
|||
|
|
<div class="join-us-page">
|
|||
|
|
<div class="page-container">
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h1 class="page-title">加入我们</h1>
|
|||
|
|
<p class="page-desc">成为Skill开发者，开启自由职业新篇章</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="hero-section">
|
|||
|
|
<div class="hero-content">
|
|||
|
|
<h2>招募Skill开发者</h2>
|
|||
|
|
<p>移动办公 · 时间自由 · 收入可观</p>
|
|||
|
|
<div class="hero-tags">
|
|||
|
|
<el-tag effect="dark" size="large">远程办公</el-tag>
|
|||
|
|
<el-tag effect="dark" size="large" type="success">时间自由</el-tag>
|
|||
|
|
<el-tag effect="dark" size="large" type="warning">收入可观</el-tag>
|
|||
|
|
<el-tag effect="dark" size="large" type="danger">技术成长</el-tag>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="benefits-section">
|
|||
|
|
<h2 class="section-title">开发者权益</h2>
|
|||
|
|
<div class="benefits-grid">
|
|||
|
|
<div class="benefit-card">
|
|||
|
|
<div class="benefit-icon">
|
|||
|
|
<el-icon :size="36" color="#409eff"><Wallet /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<h3>丰厚收益</h3>
|
|||
|
|
<p>每次下载获得收益分成<br/>优秀开发者月入过万</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="benefit-card">
|
|||
|
|
<div class="benefit-icon">
|
|||
|
|
<el-icon :size="36" color="#67c23a"><Location /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<h3>移动办公</h3>
|
|||
|
|
<p>无需坐班，随时随地<br/>在家也能轻松赚钱</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="benefit-card">
|
|||
|
|
<div class="benefit-icon">
|
|||
|
|
<el-icon :size="36" color="#e6a23c"><Clock /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<h3>时间自由</h3>
|
|||
|
|
<p>自己安排开发时间<br/>工作生活完美平衡</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="benefit-card">
|
|||
|
|
<div class="benefit-icon">
|
|||
|
|
<el-icon :size="36" color="#f56c6c"><TrendCharts /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<h3>技术成长</h3>
|
|||
|
|
<p>实战项目经验积累<br/>提升技术能力</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="benefit-card">
|
|||
|
|
<div class="benefit-icon">
|
|||
|
|
<el-icon :size="36" color="#909399"><Medal /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<h3>官方认证</h3>
|
|||
|
|
<p>获得平台官方认证<br/>提升个人品牌影响力</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="benefit-card">
|
|||
|
|
<div class="benefit-icon">
|
|||
|
|
<el-icon :size="36" color="#9b59b6"><Connection /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<h3>社区资源</h3>
|
|||
|
|
<p>加入开发者社区<br/>与同行交流学习</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="requirements-section">
|
|||
|
|
<h2 class="section-title">申请要求</h2>
|
|||
|
|
<div class="requirements-list">
|
|||
|
|
<div class="requirement-item">
|
|||
|
|
<el-icon :size="24" color="#67c23a"><Check /></el-icon>
|
|||
|
|
<div class="requirement-content">
|
|||
|
|
<h4>技术能力</h4>
|
|||
|
|
<p>熟练掌握至少一门编程语言，有实际项目开发经验</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="requirement-item">
|
|||
|
|
<el-icon :size="24" color="#67c23a"><Check /></el-icon>
|
|||
|
|
<div class="requirement-content">
|
|||
|
|
<h4>作品展示</h4>
|
|||
|
|
<p>需提供至少一个可演示的Skill作品或相关项目经验</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="requirement-item">
|
|||
|
|
<el-icon :size="24" color="#67c23a"><Check /></el-icon>
|
|||
|
|
<div class="requirement-content">
|
|||
|
|
<h4>责任心</h4>
|
|||
|
|
<p>对产品质量负责，能够及时响应和修复问题</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="requirement-item">
|
|||
|
|
<el-icon :size="24" color="#67c23a"><Check /></el-icon>
|
|||
|
|
<div class="requirement-content">
|
|||
|
|
<h4>持续维护</h4>
|
|||
|
|
<p>愿意持续维护和更新已发布的Skill产品</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-section">
|
|||
|
|
<h2 class="section-title">申请成为开发者</h2>
|
|||
|
|
<el-form
|
|||
|
|
ref="formRef"
|
|||
|
|
:model="form"
|
|||
|
|
:rules="rules"
|
|||
|
|
label-width="120px"
|
|||
|
|
class="apply-form"
|
|||
|
|
>
|
|||
|
|
<el-divider content-position="left">基本信息</el-divider>
|
|||
|
|
|
|||
|
|
<el-form-item label="真实姓名" prop="realName">
|
|||
|
|
<el-input v-model="form.realName" placeholder="请输入真实姓名" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="手机号码" prop="phone">
|
|||
|
|
<el-input v-model="form.phone" placeholder="请输入手机号码" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="电子邮箱" prop="email">
|
|||
|
|
<el-input v-model="form.email" placeholder="请输入电子邮箱" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="所在城市" prop="city">
|
|||
|
|
<el-input v-model="form.city" placeholder="请输入所在城市" />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-divider content-position="left">专业信息</el-divider>
|
|||
|
|
|
|||
|
|
<el-form-item label="技术栈" prop="techStack">
|
|||
|
|
<el-checkbox-group v-model="form.techStack">
|
|||
|
|
<el-checkbox label="Python">Python</el-checkbox>
|
|||
|
|
<el-checkbox label="JavaScript">JavaScript</el-checkbox>
|
|||
|
|
<el-checkbox label="Java">Java</el-checkbox>
|
|||
|
|
<el-checkbox label="Go">Go</el-checkbox>
|
|||
|
|
<el-checkbox label="C/C++">C/C++</el-checkbox>
|
|||
|
|
<el-checkbox label="Rust">Rust</el-checkbox>
|
|||
|
|
<el-checkbox label="TypeScript">TypeScript</el-checkbox>
|
|||
|
|
<el-checkbox label="其他">其他</el-checkbox>
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="工作年限" prop="experience">
|
|||
|
|
<el-select v-model="form.experience" placeholder="请选择工作年限" style="width: 100%">
|
|||
|
|
<el-option label="1年以下" value="0-1" />
|
|||
|
|
<el-option label="1-3年" value="1-3" />
|
|||
|
|
<el-option label="3-5年" value="3-5" />
|
|||
|
|
<el-option label="5-10年" value="5-10" />
|
|||
|
|
<el-option label="10年以上" value="10+" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="擅长领域" prop="expertise">
|
|||
|
|
<el-select v-model="form.expertise" multiple placeholder="请选择擅长领域" style="width: 100%">
|
|||
|
|
<el-option label="办公自动化" value="office" />
|
|||
|
|
<el-option label="数据处理" value="data" />
|
|||
|
|
<el-option label="AI/机器学习" value="ai" />
|
|||
|
|
<el-option label="Web开发" value="web" />
|
|||
|
|
<el-option label="移动端开发" value="mobile" />
|
|||
|
|
<el-option label="爬虫/采集" value="crawler" />
|
|||
|
|
<el-option label="自动化测试" value="testing" />
|
|||
|
|
<el-option label="其他" value="other" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-divider content-position="left">简历与作品</el-divider>
|
|||
|
|
|
|||
|
|
<el-form-item label="个人简介" prop="bio">
|
|||
|
|
<el-input
|
|||
|
|
v-model="form.bio"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="4"
|
|||
|
|
placeholder="请简单介绍一下自己，包括教育背景、工作经历等"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="简历上传" prop="resumeUrl">
|
|||
|
|
<el-input v-model="form.resumeUrl" placeholder="请输入简历网盘链接（支持百度网盘、腾讯微云等）">
|
|||
|
|
<template #prepend>
|
|||
|
|
<el-icon><Link /></el-icon>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
<div class="form-tip">请将简历上传至网盘后粘贴分享链接</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="Skill演示视频" prop="demoVideoUrl">
|
|||
|
|
<el-input v-model="form.demoVideoUrl" placeholder="请输入Skill演示视频网盘链接">
|
|||
|
|
<template #prepend>
|
|||
|
|
<el-icon><VideoCamera /></el-icon>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
<div class="form-tip">请录制Skill演示视频并上传至网盘，展示您的作品功能</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="作品链接" prop="portfolioUrl">
|
|||
|
|
<el-input v-model="form.portfolioUrl" placeholder="请输入个人作品集或GitHub链接（选填）">
|
|||
|
|
<template #prepend>
|
|||
|
|
<el-icon><Monitor /></el-icon>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="期望收益" prop="expectedIncome">
|
|||
|
|
<el-radio-group v-model="form.expectedIncome">
|
|||
|
|
<el-radio label="1000-3000">1,000-3,000元/月</el-radio>
|
|||
|
|
<el-radio label="3000-5000">3,000-5,000元/月</el-radio>
|
|||
|
|
<el-radio label="5000-10000">5,000-10,000元/月</el-radio>
|
|||
|
|
<el-radio label="10000+">10,000元以上/月</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-checkbox v-model="form.agreement">
|
|||
|
|
我已阅读并同意
|
|||
|
|
<el-button type="primary" text>《开发者协议》</el-button>
|
|||
|
|
</el-checkbox>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" size="large" :loading="submitting" @click="handleSubmit">
|
|||
|
|
提交申请
|
|||
|
|
</el-button>
|
|||
|
|
<el-button size="large" @click="resetForm">重置</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="process-section">
|
|||
|
|
<h2 class="section-title">申请流程</h2>
|
|||
|
|
<div class="process-steps">
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">1</div>
|
|||
|
|
<div class="step-content">
|
|||
|
|
<h4>提交申请</h4>
|
|||
|
|
<p>填写申请表单<br/>上传简历和作品</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-arrow">
|
|||
|
|
<el-icon :size="24"><ArrowRight /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">2</div>
|
|||
|
|
<div class="step-content">
|
|||
|
|
<h4>资质审核</h4>
|
|||
|
|
<p>平台审核团队<br/>评估技术能力</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-arrow">
|
|||
|
|
<el-icon :size="24"><ArrowRight /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">3</div>
|
|||
|
|
<div class="step-content">
|
|||
|
|
<h4>技能测试</h4>
|
|||
|
|
<p>完成测试任务<br/>展示开发能力</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-arrow">
|
|||
|
|
<el-icon :size="24"><ArrowRight /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">4</div>
|
|||
|
|
<div class="step-content">
|
|||
|
|
<h4>正式入驻</h4>
|
|||
|
|
<p>签署合作协议<br/>开始发布Skill</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="successDialogVisible"
|
|||
|
|
title="申请提交成功"
|
|||
|
|
width="500px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<div class="success-content">
|
|||
|
|
<div class="success-icon">
|
|||
|
|
<el-icon :size="64" color="#67c23a"><CircleCheckFilled /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<h3>您的申请已提交成功！</h3>
|
|||
|
|
<p class="success-desc">我们将在3-5个工作日内完成审核，审核结果将通过邮件通知您</p>
|
|||
|
|
<div class="contact-info">
|
|||
|
|
<p>如有疑问，请联系：</p>
|
|||
|
|
<p>邮箱：developer@openclaw.com</p>
|
|||
|
|
<p>微信：OpenClawDev</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button type="primary" @click="successDialogVisible = false">我知道了</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive } from 'vue'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
|
|||
|
|
const formRef = ref(null)
|
|||
|
|
const submitting = ref(false)
|
|||
|
|
const successDialogVisible = ref(false)
|
|||
|
|
|
|||
|
|
const form = reactive({
|
|||
|
|
realName: '',
|
|||
|
|
phone: '',
|
|||
|
|
email: '',
|
|||
|
|
city: '',
|
|||
|
|
techStack: [],
|
|||
|
|
experience: '',
|
|||
|
|
expertise: [],
|
|||
|
|
bio: '',
|
|||
|
|
resumeUrl: '',
|
|||
|
|
demoVideoUrl: '',
|
|||
|
|
portfolioUrl: '',
|
|||
|
|
expectedIncome: '',
|
|||
|
|
agreement: false
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const rules = {
|
|||
|
|
realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
|
|||
|
|
phone: [
|
|||
|
|
{ required: true, message: '请输入手机号码', trigger: 'blur' },
|
|||
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
email: [
|
|||
|
|
{ required: true, message: '请输入电子邮箱', trigger: 'blur' },
|
|||
|
|
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
city: [{ required: true, message: '请输入所在城市', trigger: 'blur' }],
|
|||
|
|
techStack: [{ required: true, message: '请选择技术栈', trigger: 'change' }],
|
|||
|
|
experience: [{ required: true, message: '请选择工作年限', trigger: 'change' }],
|
|||
|
|
expertise: [{ required: true, message: '请选择擅长领域', trigger: 'change' }],
|
|||
|
|
bio: [
|
|||
|
|
{ required: true, message: '请输入个人简介', trigger: 'blur' },
|
|||
|
|
{ min: 50, message: '个人简介至少50个字符', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
resumeUrl: [{ required: true, message: '请输入简历网盘链接', trigger: 'blur' }],
|
|||
|
|
demoVideoUrl: [{ required: true, message: '请输入Skill演示视频链接', trigger: 'blur' }],
|
|||
|
|
expectedIncome: [{ required: true, message: '请选择期望收益', trigger: 'change' }]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSubmit = async () => {
|
|||
|
|
if (!formRef.value) return
|
|||
|
|
|
|||
|
|
await formRef.value.validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
if (!form.agreement) {
|
|||
|
|
ElMessage.warning('请阅读并同意开发者协议')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
submitting.value = true
|
|||
|
|
setTimeout(() => {
|
|||
|
|
submitting.value = false
|
|||
|
|
successDialogVisible.value = true
|
|||
|
|
ElMessage.success('申请提交成功')
|
|||
|
|
}, 1500)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const resetForm = () => {
|
|||
|
|
formRef.value?.resetFields()
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.join-us-page {
|
|||
|
|
padding: 20px 0 60px;
|
|||
|
|
|
|||
|
|
.page-header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
|
|||
|
|
.page-title {
|
|||
|
|
font-size: 32px;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-desc {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-section {
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 50px 40px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
font-size: 28px;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 18px;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-tags {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #303133;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefits-section {
|
|||
|
|
margin-bottom: 50px;
|
|||
|
|
|
|||
|
|
.benefits-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 20px;
|
|||
|
|
|
|||
|
|
.benefit-card {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 30px 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-icon {
|
|||
|
|
width: 64px;
|
|||
|
|
height: 64px;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin: 0 auto 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #909399;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.requirements-section {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 40px;
|
|||
|
|
margin-bottom: 50px;
|
|||
|
|
|
|||
|
|
.requirements-list {
|
|||
|
|
max-width: 700px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
|
|||
|
|
.requirement-item {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
border-bottom: 1px solid #ebeef5;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.requirement-content {
|
|||
|
|
h4 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
color: #909399;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-section {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 40px;
|
|||
|
|
margin-bottom: 50px;
|
|||
|
|
|
|||
|
|
.apply-form {
|
|||
|
|
max-width: 700px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
|
|||
|
|
:deep(.el-checkbox-group) {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-radio-group) {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-tip {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #909399;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.process-section {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 40px;
|
|||
|
|
|
|||
|
|
.process-steps {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
|
|||
|
|
.process-step {
|
|||
|
|
text-align: center;
|
|||
|
|
flex: 1;
|
|||
|
|
max-width: 180px;
|
|||
|
|
|
|||
|
|
.step-number {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
background: linear-gradient(135deg, #409eff, #67c23a);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin: 0 auto 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-content {
|
|||
|
|
h4 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #909399;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-arrow {
|
|||
|
|
padding-top: 12px;
|
|||
|
|
color: #c0c4cc;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.success-content {
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.success-icon {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.success-desc {
|
|||
|
|
color: #909399;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-info {
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 16px;
|
|||
|
|
text-align: left;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
color: #606266;
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 992px) {
|
|||
|
|
.join-us-page {
|
|||
|
|
.benefits-grid {
|
|||
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.process-steps {
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.step-arrow {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.process-step {
|
|||
|
|
flex-basis: calc(50% - 12px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 576px) {
|
|||
|
|
.join-us-page {
|
|||
|
|
.benefits-grid {
|
|||
|
|
grid-template-columns: 1fr !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.process-steps {
|
|||
|
|
.process-step {
|
|||
|
|
flex-basis: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-section,
|
|||
|
|
.requirements-section,
|
|||
|
|
.process-section {
|
|||
|
|
padding: 24px 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|