yuanlin/OnboardXFront
2
0
Fork 0
Code Pull Requests Actions Releases Activity

11

Browse Source
This commit is contained in:
fuenmao
2026-08-26 11:00:10 +08:00
parent eab359d9fa
commit f1a910c25a
3 changed files with 1078 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/onboarding/fill/index.vue
+382 -110
View File
@@ -5,10 +5,10 @@
<div class="brand-content">
<div class="brand-badge">
<el-icon><Promotion /></el-icon>
<span>OnboardX 智能入职系统</span>
<span>OnboardX 智能入职服务</span>
</div>
<h1 class="brand-title">欢迎加入我们</h1>
<p class="brand-subtitle">请按照指引完成入职登记表填写、证件材料上传与合同查阅确认</p>
<h1 class="brand-title">欢迎加入新团队</h1>
<p class="brand-subtitle">请按照 4 步指引完成入职登记表、证件上传与合同查阅确认</p>
</div>
</header>
@@ -38,15 +38,15 @@
<div class="wizard-card">
<div v-if="!canEdit" class="readonly-banner">
<el-alert
title="当前为只读查阅模式（资料已提交审核）"
title="当前为查阅模式（入职资料已提交审核）"
type="info"
show-icon
:closable="false"
/>
</div>
<!-- 步骤导航条 -->
<div class="steps-wrapper">
<!-- 步骤导航条：PC端展示完整步骤，移动端展示紧凑自适应导航 -->
<div class="steps-wrapper desktop-only">
<el-steps :active="currentStep" finish-status="success" align-center>
<el-step title="入职登记表" icon="User" />
<el-step title="合同补充项" icon="Document" />
@@ -55,18 +55,40 @@
</el-steps>
</div>
<div class="mobile-steps-wrapper mobile-only">
<div class="mobile-steps-track">
<div
v-for="(stepName, index) in ['1. 登记表', '2. 补充项', '3. 证件材料', '4. 合同确认']"
:key="index"
class="mobile-step-item"
:class="{
'is-active': currentStep === index,
'is-finished': currentStep > index,
'is-pending': currentStep < index
}"
>
<div class="step-indicator-bar" />
<span class="step-label">{{ stepName }}</span>
</div>
</div>
<div class="mobile-current-indicator">
当前进行：<span class="highlight-step">第 {{ currentStep + 1 }}/4 步 · {{ ['入职登记表填写', '合同专有补充项', '证件材料上传', '合同查阅与确认'][currentStep] }}</span>
</div>
</div>
<!-- 步骤 1: 入职登记表 -->
<div v-show="currentStep === 0" class="step-content">
<div class="registration-header">
<h2 class="reg-title">入 职 登 记 表</h2>
<p class="reg-subtitle">请准确填写您的真实个人档案、学习经历与家庭信息</p>
<p class="reg-subtitle">请准确填写您的真实个人档案、学习经历与家庭信息（带 * 为必填项）</p>
</div>
<el-form ref="regFormRef" :model="form" :rules="regRules" label-position="top" class="reg-form">
<!-- 1. 基本信息板块 -->
<div class="card-section">
<div class="card-section-title">
<el-icon><UserFilled /></el-icon> 基本个人信息
<div class="title-icon-box"><el-icon><UserFilled /></el-icon></div>
<span>基本个人信息</span>
</div>
<el-row :gutter="16">
<el-col :xs="24" :sm="8">
@@ -99,12 +121,12 @@
</el-form-item>
</el-col>
<el-col :xs="12" :sm="4">
<el-form-item label="身高(cm)" prop="height">
<el-form-item label="身高 (cm)" prop="height">
<el-input v-model="form.height" placeholder="如 175" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="4">
<el-form-item label="体重(kg)" prop="weight">
<el-form-item label="体重 (kg)" prop="weight">
<el-input v-model="form.weight" placeholder="如 65" :disabled="!canEdit" />
</el-form-item>
</el-col>
@@ -135,7 +157,8 @@
<!-- 2. 学历与资质 -->
<div class="card-section">
<div class="card-section-title">
<el-icon><School /></el-icon> 学历与职业资格
<div class="title-icon-box"><el-icon><School /></el-icon></div>
<span>学历与职业资格</span>
</div>
<el-row :gutter="16">
<el-col :xs="12" :sm="8">
@@ -151,7 +174,7 @@
</el-col>
<el-col :xs="12" :sm="8">
<el-form-item label="所学专业" prop="major">
<el-input v-model="form.major" placeholder="请输入专业" :disabled="!canEdit" clearable />
<el-input v-model="form.major" placeholder="请输入专业全称" :disabled="!canEdit" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="8">
@@ -160,49 +183,50 @@
</el-form-item>
</el-col>
<el-col :xs="12" :sm="8">
<el-form-item label="职业资格" prop="vocationalQualification">
<el-input v-model="form.vocationalQualification" placeholder="如 软考高级 / 注册会计师" :disabled="!canEdit" />
<el-col :xs="24" :sm="8">
<el-form-item label="职业资格/职称" prop="vocationalQualification">
<el-input v-model="form.vocationalQualification" placeholder="如 注册会计师/无" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="8">
<el-form-item label="资格等级" prop="qualificationLevel">
<el-input v-model="form.qualificationLevel" placeholder="如 高级 / 中级" :disabled="!canEdit" />
<el-input v-model="form.qualificationLevel" placeholder="如 高级/中级/无" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="8">
<el-form-item label="有何技术特长" prop="technicalSpecialty">
<el-input v-model="form.technicalSpecialty" placeholder="专业特长说明" :disabled="!canEdit" />
<el-col :xs="12" :sm="8">
<el-form-item label="特长技能" prop="technicalSpecialty">
<el-input v-model="form.technicalSpecialty" placeholder="如 驾驶/英语六级" :disabled="!canEdit" />
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 3. 联系方式与薪酬账户 -->
<!-- 3. 联系方式与银行卡 -->
<div class="card-section">
<div class="card-section-title">
<el-icon><Phone /></el-icon> 通讯地址与薪酬账户
<div class="title-icon-box"><el-icon><Phone /></el-icon></div>
<span>联系方式与工资银行卡</span>
</div>
<el-row :gutter="16">
<el-col :xs="24" :sm="8">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="11位手机号码" :disabled="!canEdit" maxlength="11" clearable />
<el-input v-model="form.phone" placeholder="手机号码" :disabled="!canEdit" maxlength="11" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="8">
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="form.email" placeholder="个人常用电子邮箱" :disabled="!canEdit" clearable />
<el-input v-model="form.email" placeholder="常用电子邮箱" :disabled="!canEdit" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="8">
<el-form-item label="暂住 / 现居住地址" prop="currentAddress">
<el-input v-model="form.currentAddress" placeholder="现详细居住地址" :disabled="!canEdit" clearable />
<el-form-item label="现居住地址" prop="currentAddress">
<el-input v-model="form.currentAddress" placeholder="目前常住的详细地址" :disabled="!canEdit" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="8">
<el-form-item label="房东联系方式" prop="landlordContact">
<el-input v-model="form.landlordContact" placeholder="租房房东姓名及电话(选填)" :disabled="!canEdit" />
<el-input v-model="form.landlordContact" placeholder="租房房东姓名及电话 (选填)" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="8">
@@ -221,7 +245,8 @@
<!-- 4. 紧急联系人 -->
<div class="card-section">
<div class="card-section-title">
<el-icon><FirstAidKit /></el-icon> 紧急联系人
<div class="title-icon-box"><el-icon><FirstAidKit /></el-icon></div>
<span>紧急联系人</span>
</div>
<el-row :gutter="16">
<el-col :xs="24" :sm="8">
@@ -245,26 +270,40 @@
<!-- 5. 教育学习经历动态列表 -->
<div class="card-section">
<div class="card-section-header">
<div class="card-section-title"><el-icon><Reading /></el-icon> 教育学习经历</div>
<el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addEducation">添加经历</el-button>
<div class="card-section-title">
<div class="title-icon-box"><el-icon><Reading /></el-icon></div>
<span>教育学习经历</span>
</div>
<el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addEducation">
添加经历
</el-button>
</div>
<div v-if="!educationHistory.length" class="empty-hint">暂未添加学习经历</div>
<div v-if="!educationHistory.length" class="empty-hint">暂未添加学习经历，可点击右上角添加</div>
<div v-for="(item, idx) in educationHistory" :key="idx" class="dynamic-row-box">
<div class="row-badge-header">
<span class="row-badge">学习经历 #{{ idx + 1 }}</span>
<el-button v-if="canEdit" link type="danger" icon="Delete" @click="educationHistory.splice(idx, 1)">删除本条</el-button>
</div>
<el-row :gutter="12">
<el-col :xs="24" :sm="6">
<el-input v-model="item.timeRange" placeholder="时间 (如 2018.09-2022.06)" :disabled="!canEdit" />
<el-form-item label="时间范围">
<el-input v-model="item.timeRange" placeholder="如 2018.09-2022.06" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="6">
<el-input v-model="item.location" placeholder="学校 / 地点" :disabled="!canEdit" />
<el-form-item label="学校/机构">
<el-input v-model="item.location" placeholder="毕业学校全称" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="6">
<el-input v-model="item.content" placeholder="学习专业 / 内容" :disabled="!canEdit" />
<el-form-item label="专业/学习内容">
<el-input v-model="item.content" placeholder="所学专业" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="20" :sm="5">
<el-input v-model="item.result" placeholder="学习结果 (如 毕业/获学士学位)" :disabled="!canEdit" />
</el-col>
<el-col :xs="4" :sm="1" class="delete-btn-col">
<el-button v-if="canEdit" link type="danger" icon="Delete" @click="educationHistory.splice(idx, 1)" />
<el-col :xs="24" :sm="6">
<el-form-item label="结果/学位">
<el-input v-model="item.result" placeholder="如 毕业/获学士学位" :disabled="!canEdit" />
</el-form-item>
</el-col>
</el-row>
</div>
@@ -273,29 +312,45 @@
<!-- 6. 工作经历动态列表 -->
<div class="card-section">
<div class="card-section-header">
<div class="card-section-title"><el-icon><Briefcase /></el-icon> 主要工作经历</div>
<el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addWork">添加经历</el-button>
<div class="card-section-title">
<div class="title-icon-box"><el-icon><Briefcase /></el-icon></div>
<span>主要工作经历</span>
</div>
<el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addWork">
添加经历
</el-button>
</div>
<div v-if="!workHistory.length" class="empty-hint">暂未添加工作经历（应届生可留空）</div>
<div v-for="(item, idx) in workHistory" :key="idx" class="dynamic-row-box">
<div class="row-badge-header">
<span class="row-badge">工作经历 #{{ idx + 1 }}</span>
<el-button v-if="canEdit" link type="danger" icon="Delete" @click="workHistory.splice(idx, 1)">删除本条</el-button>
</div>
<el-row :gutter="12">
<el-col :xs="24" :sm="5">
<el-input v-model="item.timeRange" placeholder="时间 (如 2022.07-2024.05)" :disabled="!canEdit" />
<el-form-item label="起止时间">
<el-input v-model="item.timeRange" placeholder="如 2022.07-2024.05" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="6">
<el-input v-model="item.companyName" placeholder="工作单位名称" :disabled="!canEdit" />
<el-form-item label="工作单位名称">
<el-input v-model="item.companyName" placeholder="公司全称" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="4">
<el-input v-model="item.salary" placeholder="工资待遇" :disabled="!canEdit" />
<el-form-item label="担任职务">
<el-input v-model="item.position" placeholder="职位名称" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="4">
<el-input v-model="item.position" placeholder="担任职务" :disabled="!canEdit" />
<el-form-item label="薪资待遇">
<el-input v-model="item.salary" placeholder="薪资 (选填)" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="20" :sm="4">
<el-input v-model="item.leaveReason" placeholder="离职原因" :disabled="!canEdit" />
</el-col>
<el-col :xs="4" :sm="1" class="delete-btn-col">
<el-button v-if="canEdit" link type="danger" icon="Delete" @click="workHistory.splice(idx, 1)" />
<el-col :xs="24" :sm="5">
<el-form-item label="离职原因">
<el-input v-model="item.leaveReason" placeholder="简述离职原因" :disabled="!canEdit" />
</el-form-item>
</el-col>
</el-row>
</div>
@@ -304,29 +359,45 @@
<!-- 7. 家庭成员动态列表 -->
<div class="card-section">
<div class="card-section-header">
<div class="card-section-title"><el-icon><HomeFilled /></el-icon> 家庭成员</div>
<el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addFamily">添加成员</el-button>
<div class="card-section-title">
<div class="title-icon-box"><el-icon><HomeFilled /></el-icon></div>
<span>家庭成员</span>
</div>
<el-button v-if="canEdit" size="small" type="primary" plain icon="Plus" @click="addFamily">
添加成员
</el-button>
</div>
<div v-if="!familyMembers.length" class="empty-hint">暂未添加家庭成员信息</div>
<div v-for="(item, idx) in familyMembers" :key="idx" class="dynamic-row-box">
<div class="row-badge-header">
<span class="row-badge">家庭成员 #{{ idx + 1 }}</span>
<el-button v-if="canEdit" link type="danger" icon="Delete" @click="familyMembers.splice(idx, 1)">删除本条</el-button>
</div>
<el-row :gutter="12">
<el-col :xs="12" :sm="4">
<el-input v-model="item.name" placeholder="姓名" :disabled="!canEdit" />
<el-form-item label="姓名">
<el-input v-model="item.name" placeholder="成员姓名" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="4">
<el-input v-model="item.relationship" placeholder="与本人关系" :disabled="!canEdit" />
<el-form-item label="关系">
<el-input v-model="item.relationship" placeholder="如 父母/配偶" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="12" :sm="3">
<el-input v-model="item.age" placeholder="年龄" :disabled="!canEdit" />
<el-form-item label="年龄">
<el-input v-model="item.age" placeholder="年龄" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="7">
<el-input v-model="item.company" placeholder="工作单位" :disabled="!canEdit" />
<el-col :xs="24" :sm="8">
<el-form-item label="工作单位">
<el-input v-model="item.company" placeholder="工作单位及职务" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :xs="20" :sm="5">
<el-input v-model="item.phone" placeholder="联系电话" :disabled="!canEdit" />
</el-col>
<el-col :xs="4" :sm="1" class="delete-btn-col">
<el-button v-if="canEdit" link type="danger" icon="Delete" @click="familyMembers.splice(idx, 1)" />
<el-col :xs="24" :sm="5">
<el-form-item label="联系电话">
<el-input v-model="item.phone" placeholder="手机号" :disabled="!canEdit" />
</el-form-item>
</el-col>
</el-row>
</div>
@@ -392,7 +463,7 @@
<el-tag v-if="mat.required" size="small" type="danger" effect="plain">必传</el-tag>
<el-tag v-else size="small" type="info" effect="plain">选传</el-tag>
</div>
<span class="mat-limit">最多 {{ mat.maxFileCount }} 份，格式：{{ mat.allowedExtensions }}</span>
<span class="mat-limit">最多 {{ mat.maxFileCount }} 份 · 格式：{{ mat.allowedExtensions }}</span>
</div>
<div class="uploaded-files-list">
@@ -401,7 +472,7 @@
:key="f.id"
class="file-badge"
>
<el-icon><Document /></el-icon>
<el-icon color="#2563eb"><Document /></el-icon>
<span class="file-name">{{ f.fileName || f.materialName }}</span>
<el-button
v-if="canEdit"
@@ -446,13 +517,14 @@
>
<div class="contract-card-top">
<div class="contract-meta">
<el-icon color="#2563eb" size="20"><Tickets /></el-icon>
<span class="contract-title font-bold">{{ c.contractName }}</span>
<el-tag size="small" :type="c.contractStatus === 'confirmed' ? 'success' : 'warning'">
{{ c.contractStatus === 'confirmed' ? '已阅并同意' : '待查阅确认' }}
</el-tag>
</div>
<div class="contract-desc">
请点击下方按钮下载/查阅带您专属信息的合同全文。
请点击下方按钮下载/查阅带您专属信息的合同全文，仔细核对您的基本信息与薪资条款。
</div>
</div>
@@ -469,6 +541,7 @@
<el-checkbox
v-if="canEdit"
v-model="c.isAgreed"
class="agree-checkbox"
:label="`我已完整阅读并同意《${c.contractName}》全部条款`"
/>
<span v-else class="confirmed-text">✓ 候选人已确认同意</span>
@@ -479,10 +552,11 @@
<!-- 底部向导操作栏 -->
<div class="wizard-footer">
<el-button v-if="currentStep > 0" @click="currentStep--">上一步</el-button>
<el-button v-if="currentStep > 0" size="large" @click="currentStep--">上一步</el-button>
<el-button
v-if="currentStep < 3"
type="primary"
size="large"
@click="nextStep"
>
下一步
@@ -490,6 +564,7 @@
<el-button
v-if="currentStep === 3 && canEdit"
type="success"
size="large"
icon="Check"
:loading="submitting"
@click="submitAll"
@@ -724,6 +799,7 @@ async function nextStep() {
}
}
currentStep.value++;
window.scrollTo({ top: 0, behavior: "smooth" });
}
function getMaterialUploadUrl(materialTypeId: number) {
@@ -800,186 +876,248 @@ onMounted(load);
<style scoped>
.fill-page {
min-height: 100vh;
background: #f8fafc;
padding-bottom: 40px;
background: #f1f5f9;
padding-bottom: 50px;
}
.brand-header {
background: linear-gradient(135deg, #1e40af, #3b82f6);
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #38bdf8 100%);
color: #fff;
padding: 36px 20px;
padding: 40px 20px 48px;
text-align: center;
}
.brand-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.2);
padding: 4px 12px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
padding: 5px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
margin-bottom: 12px;
}
.brand-title {
margin: 0 0 8px 0;
font-size: 26px;
font-weight: 700;
font-weight: 800;
letter-spacing: 1px;
}
.brand-subtitle {
margin: 0;
font-size: 14px;
opacity: 0.9;
opacity: 0.92;
}
.main-container {
max-width: 1000px;
margin: -24px auto 0;
max-width: 980px;
margin: -28px auto 0;
padding: 0 16px;
}
.status-banner {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 12px 18px;
border-radius: 8px;
padding: 14px 20px;
border-radius: 10px;
margin-bottom: 16px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.task-no {
font-weight: bold;
margin-right: 10px;
font-weight: 700;
color: #1e293b;
margin-right: 12px;
}
.expire-time {
font-size: 13px;
color: #64748b;
}
.wizard-card {
background: #fff;
border-radius: 10px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
border-radius: 12px;
padding: 26px 24px;
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}
.steps-wrapper {
margin-bottom: 30px;
padding: 0 20px;
padding: 0 10px;
}
.registration-header {
text-align: center;
border-bottom: 2px solid #e2e8f0;
border-bottom: 2px solid #f1f5f9;
padding-bottom: 16px;
margin-bottom: 24px;
}
.reg-title {
letter-spacing: 4px;
font-size: 22px;
color: #1e293b;
font-weight: 800;
color: #0f172a;
margin: 0 0 6px 0;
}
.reg-subtitle {
font-size: 13px;
color: #64748b;
margin: 0;
}
/* 卡片分区样式 */
.card-section {
background: #f8fafc;
background: #ffffff;
border: 1px solid #e2e8f0;
border-left: 3px solid #3b82f6;
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 18px;
padding: 18px 20px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.card-section-title {
font-weight: 700;
font-size: 15px;
color: #0f172a;
margin-bottom: 14px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 6px;
gap: 8px;
}
.title-icon-box {
width: 24px;
height: 24px;
background: #eff6ff;
color: #2563eb;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.dynamic-row-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 12px;
}
.dynamic-row-box {
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 10px 12px;
.row-badge-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.delete-btn-col {
display: flex;
align-items: center;
justify-content: center;
.row-badge {
font-size: 12px;
font-weight: 700;
color: #2563eb;
background: #eff6ff;
padding: 2px 8px;
border-radius: 4px;
}
.empty-hint {
font-size: 13px;
color: #94a3b8;
padding: 8px 0;
padding: 10px 0;
text-align: center;
}
.full-width {
width: 100%;
}
.section-header {
margin-bottom: 20px;
margin-bottom: 22px;
}
.section-title {
margin: 0 0 6px 0;
font-size: 18px;
font-weight: 700;
color: #0f172a;
}
.section-desc {
margin: 0;
font-size: 13px;
color: #64748b;
}
.all-covered-card {
padding: 40px 0;
}
.materials-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.material-item-card {
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 16px;
background: #f8fafc;
}
.mat-card-header {
margin-bottom: 12px;
}
.mat-title-box {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.mat-name {
font-weight: 700;
color: #1e293b;
}
.mat-limit {
font-size: 12px;
color: #64748b;
}
.file-badge {
display: flex;
align-items: center;
gap: 6px;
gap: 8px;
background: #fff;
border: 1px solid #cbd5e1;
padding: 6px 10px;
border-radius: 4px;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
margin-bottom: 8px;
}
.file-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contract-sign-card {
border: 1px solid #e2e8f0;
border-radius: 8px;
@@ -987,20 +1125,25 @@ onMounted(load);
background: #f8fafc;
margin-bottom: 16px;
}
.contract-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.contract-title {
font-size: 16px;
color: #0f172a;
}
.contract-desc {
font-size: 13px;
color: #64748b;
margin-bottom: 14px;
}
.contract-card-bottom {
display: flex;
align-items: center;
@@ -1008,14 +1151,143 @@ onMounted(load);
flex-wrap: wrap;
gap: 12px;
border-top: 1px dashed #cbd5e1;
padding-top: 12px;
padding-top: 14px;
}
.agree-checkbox {
font-weight: 600;
}
.confirmed-text {
color: #16a34a;
font-weight: 600;
font-size: 14px;
}
/* 底部操作栏吸底优化 */
.wizard-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
gap: 14px;
margin-top: 30px;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
position: sticky;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
padding-bottom: max(10px, env(safe-area-inset-bottom));
z-index: 10;
}
.readonly-banner {
margin-bottom: 24px;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.mobile-steps-wrapper {
margin-bottom: 24px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px 14px;
}
.mobile-steps-track {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.mobile-step-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.step-indicator-bar {
width: 100%;
height: 4px;
border-radius: 2px;
background: #e2e8f0;
transition: all 0.3s;
}
.mobile-step-item.is-active .step-indicator-bar {
background: #2563eb;
height: 5px;
}
.mobile-step-item.is-finished .step-indicator-bar {
background: #16a34a;
}
.step-label {
font-size: 11px;
color: #64748b;
white-space: nowrap;
}
.mobile-step-item.is-active .step-label {
color: #2563eb;
font-weight: 700;
}
.mobile-step-item.is-finished .step-label {
color: #16a34a;
font-weight: 600;
}
.mobile-current-indicator {
font-size: 12px;
color: #475569;
text-align: center;
border-top: 1px dashed #e2e8f0;
padding-top: 8px;
}
.highlight-step {
color: #2563eb;
font-weight: 700;
}
@media (max-width: 640px) {
.desktop-only {
display: none !important;
}
.mobile-only {
display: block !important;
}
.brand-header {
padding: 28px 16px 36px;
}
.brand-title {
font-size: 22px;
}
.main-container {
padding: 0 10px;
}
.wizard-card {
padding: 18px 14px;
}
.status-banner {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.contract-card-bottom {
flex-direction: column;
align-items: stretch;
}
}
</style>