Skip to content

H
hr-mobile-view
Commit 2f75ddd2 authored by 刘斌's avatar 刘斌
Browse files
Options

fix: 重制样式风格

parent a5d92e5f
Show whitespace changes
Inline Side-by-side
Showing with 395 additions and 272 deletions
src/App.vue
View file @ 2f75ddd2
<template>
<div class="page">
<van-form @submit="onSubmit" required="auto">
<van-cell-group inset title="基本信息">
<div class="section-card">
<div class="section-title">基本信息</div>
<div class="form-row-2col">
<div class="form-col">
<div class="form-item">
<div class="item-label">姓名 <span style="color: #ee0a24">*</span></div>
<van-field
v-model="form.name"
name="name"
label="姓名"
class="custom-field"
placeholder="请输入姓名"
:rules="[{ required: true, message: '请填写姓名' }]"
:border="false"
/>
</div>
</div>
<div class="form-col">
<div class="form-item">
<div class="item-label">性别 <span style="color: #ee0a24">*</span></div>
<div class="custom-input dropdown-input" style="padding: 0 12px; height: 44px;">
<van-radio-group v-model="form.gender" direction="horizontal" style="width: 100%; height: 100%;">
<van-radio name="0">男</van-radio>
<van-radio name="1">女</van-radio>
</van-radio-group>
</div>
</div>
</div>
</div>
<div class="form-item">
<div class="item-label">手机号码 <span style="color: #ee0a24">*</span></div>
<van-field
v-model="form.phoneNumber"
name="phoneNumber"
type="tel"
label="手机号码"
class="custom-field"
placeholder="请输入手机号码"
:rules="phoneRules"
:border="false"
/>
<van-field
v-model="form.gender"
name="gender"
label="性别"
:rules="[{ required: true, message: '请选择性别' }]"
>
<template #input>
<van-radio-group v-model="form.gender" direction="horizontal">
<van-radio name="0">男</van-radio>
<van-radio name="1">女</van-radio>
</van-radio-group>
</template>
</van-field>
</div>
<div class="form-row-2col">
<div class="form-col">
<div class="form-item">
<div class="item-label">出生日期 <span style="color: #ee0a24">*</span></div>
<van-field
v-model="form.birthDate"
name="birthDate"
label="出生日期"
placeholder="请选择出生日期"
readonly
is-link
clickable
name="birthDate"
class="custom-field"
placeholder="请选择"
:rules="[{ required: true, message: '请选择出生日期' }]"
:border="false"
@click="showBirthPicker = true"
/>
>
<template #right-icon>
<van-icon name="calendar-o" color="#969799" />
</template>
</van-field>
</div>
</div>
<div class="form-col">
<div class="form-item">
<div class="item-label">年龄</div>
<van-field
v-model="form.age"
name="age"
type="digit"
label="年龄"
class="custom-field"
placeholder="请输入年龄"
:rules="ageRules"
:border="false"
/>
</div>
</div>
</div>
<div class="form-row-2col">
<div class="form-col">
<div class="form-item">
<div class="item-label">民族 <span style="color: #ee0a24">*</span></div>
<van-field
v-model="form.ethnicity"
name="ethnicity"
label="民族"
class="custom-field"
placeholder="请输入民族"
:rules="[{ required: true, message: '请输入民族' }]"
:border="false"
/>
</div>
</div>
<div class="form-col">
<div class="form-item">
<div class="item-label">籍贯 <span style="color: #ee0a24">*</span></div>
<van-field
v-model="form.nativePlace"
name="nativePlace"
label="籍贯"
class="custom-field"
placeholder="请输入籍贯"
:rules="[{ required: true, message: '请输入籍贯' }]"
>
<template #extra>
<div class="extra">如：**省**市</div>
</template>
</van-field>
<van-field
v-model="form.maritalStatus"
name="maritalStatus"
label="婚姻状况"
:rules="[{ required: true, message: '请选择婚姻状况' }]"
>
<template #input>
:border="false"
/>
<div class="help-text">如：**省**市</div>
</div>
</div>
</div>
<div class="form-item-horizontal">
<div class="item-label">婚姻状况 <span style="color: #ee0a24">*</span></div>
<div class="custom-input" style="padding: 10px 12px; flex: 1;">
<van-radio-group v-model="form.maritalStatus" direction="horizontal">
<van-radio name="2">未婚</van-radio>
<van-radio name="1">已婚</van-radio>
<van-radio name="2" style="margin-right: 12px;">未婚</van-radio>
<van-radio name="1" style="margin-right: 12px;">已婚</van-radio>
<van-radio name="3">离异</van-radio>
</van-radio-group>
</template>
</van-field>
</div>
</div>
<div class="form-item-horizontal">
<div class="item-label">政治面貌 <span style="color: #ee0a24">*</span></div>
<van-field
v-model="form.politicalText"
name="politicalStatus"
label="政治面貌"
placeholder="请选择政治面貌"
readonly
is-link
clickable
name="politicalStatus"
class="custom-field"
placeholder="请选择"
:rules="[{ required: true, message: '请选择政治面貌' }]"
:border="false"
style="flex: 1;"
@click="showPoliticalPicker = true"
/>
<van-field name="photo" label="照片" :rules="[{ required: true, message: '请上传照片' }]">
>
<template #right-icon>
<van-icon name="arrow-down" color="#969799" size="12" />
</template>
</van-field>
</div>
<div class="form-item-horizontal">
<div class="item-label">照片 <span style="color: #ee0a24">*</span></div>
<van-field
name="photo"
:rules="[{ required: true, message: '请上传照片', validator: (val) => val && val.length > 0 }]"
:border="false"
style="flex: 1; padding: 0; background: transparent;"
>
<template #input>
<van-uploader
v-model="form.photoList"
......@@ -101,169 +160,205 @@
/>
</template>
</van-field>
</div>
<div class="form-item-horizontal">
<div class="item-label">身份证号码 <span style="color: #ee0a24">*</span></div>
<van-field
v-model="form.idCardNumber"
name="idCardNumber"
label="身份证号码"
class="custom-field"
placeholder="请输入身份证号码"
:rules="idRules"
:border="false"
style="flex: 1;"
/>
</van-cell-group>
<!-- <van-cell-group inset title="联系信息"> -->
<!-- <van-field
v-model="form.emergencyContact"
name="emergencyContact"
label="紧急联系人"
placeholder="请输入紧急联系人"
:rules="[{ required: true, message: '请输入紧急联系人' }]"
>
<template #extra>
<div class="extra">填写姓名</div>
</template>
</van-field>
<van-field
v-model="form.emergencyContactPhone"
name="emergencyContactPhone"
type="tel"
label="紧急联系人电话"
placeholder="请输入紧急联系人电话"
:rules="phoneRules"
/> -->
<!-- </van-cell-group> -->
</div>
</div>
<van-cell-group inset title="地址信息">
<div class="section-card">
<div class="section-title">地址信息</div>
<div class="form-item">
<div class="item-label">家庭地址 <span style="color: #ee0a24">*</span></div>
<van-field
v-model="form.homeAddress"
name="homeAddress"
label="家庭地址"
type="textarea"
rows="2"
autosize
class="custom-field"
placeholder="请输入家庭地址"
:rules="[{ required: true, message: '请输入家庭地址' }]"
>
<template #extra>
<div class="extra">例如：**市**区**街道**小区*号楼*单元*0*（具体到门牌号，写现居住地址)</div>
</template>
</van-field>
:border="false"
/>
<div class="help-text">例如：**市**区**街道**小区*号楼*单元*0*（具体到门牌号，写现居住地址)</div>
</div>
<div class="form-item">
<div class="item-label">户口所在地 <span style="color: #ee0a24">*</span></div>
<van-field
v-model="form.householdRegistrationAddress"
name="householdRegistrationAddress"
label="户口所在地"
type="textarea"
rows="2"
autosize
class="custom-field"
placeholder="请输入户口所在地"
:rules="[{ required: true, message: '请输入户口所在地' }]"
>
<template #extra>
<div class="extra">填写户口所在地派出所</div>
</template>
</van-field>
</van-cell-group>
<van-cell-group inset title="工作与资质">
<van-field
v-model="form.workStartDisplay"
name="workStartDate"
label="参加工作时间"
placeholder="请选择"
readonly
is-link
@click="showWorkStartPicker = true"
:border="false"
/>
<div class="help-text">填写户口所在地派出所</div>
</div>
</div>
<div class="section-card">
<div class="section-title">工作与资质</div>
<div class="form-item">
<div class="item-label">参加工作时间</div>
<div class="date-input-box" @click="showWorkStartPicker = true">
<span>{{ form.workStartDisplay || '请选择' }}</span>
<van-icon name="calendar-o" color="#969799" />
</div>
</div>
<div class="form-item">
<div class="item-label">职称情况</div>
<van-field
v-model="form.professionalTitle"
name="professionalTitle"
label="职称情况"
class="custom-field"
placeholder="请输入职称情况"
:border="false"
/>
</div>
<div class="form-item">
<div class="item-label">证书情况</div>
<van-field
v-model="form.certificateStatus"
name="certificateStatus"
label="证书情况"
class="custom-field"
placeholder="请输入证书情况"
:border="false"
/>
</van-cell-group>
</div>
</div>
<van-cell-group inset title="教育经历（全日制）">
<div class="section-card">
<div class="section-title">教育经历（全日制）</div>
<div class="form-row-2col">
<div class="form-col">
<div class="form-item">
<div class="item-label">学历</div>
<van-field
v-model="form.fulltimeEducation"
name="fulltimeEducation"
label="学历"
class="custom-field"
placeholder="请输入学历"
:border="false"
/>
</div>
</div>
<div class="form-col">
<div class="form-item">
<div class="item-label">学位</div>
<van-field
v-model="form.fulltimeDegree"
name="fulltimeDegree"
class="custom-field"
placeholder="请输入学位"
:border="false"
/>
</div>
</div>
</div>
<div class="form-item">
<div class="item-label">毕业院校</div>
<van-field
v-model="form.fulltimeSchool"
name="fulltimeSchool"
label="毕业院校"
class="custom-field"
placeholder="请输入毕业院校"
:border="false"
/>
</div>
<div class="form-item">
<div class="item-label">专业</div>
<van-field
v-model="form.fulltimeMajor"
name="fulltimeMajor"
label="专业"
class="custom-field"
placeholder="请输入专业"
:border="false"
/>
<van-field
v-model="form.fulltimeGraduationDate"
name="fulltimeGraduationDate"
label="毕业时间"
placeholder="请选择毕业时间"
readonly
is-link
@click="showFullGraduatePicker = true"
/>
<van-field
v-model="form.fulltimeDegree"
name="fulltimeDegree"
label="学位"
placeholder="请输入学位"
/>
</van-cell-group>
</div>
<div class="form-item">
<div class="item-label">毕业时间</div>
<div class="date-input-box" @click="showFullGraduatePicker = true">
<span>{{ form.fulltimeGraduationDate || '请选择' }}</span>
<van-icon name="calendar-o" color="#969799" />
</div>
</div>
</div>
<van-cell-group inset title="教育经历（非全日制）">
<div class="section-card">
<div class="section-title">教育经历（非全日制）</div>
<div class="form-row-2col">
<div class="form-col">
<div class="form-item">
<div class="item-label">学历</div>
<van-field
v-model="form.nonFulltimeEducation"
name="nonFulltimeEducation"
label="学历"
class="custom-field"
placeholder="请输入学历"
:border="false"
/>
</div>
</div>
<div class="form-col">
<div class="form-item">
<div class="item-label">学位</div>
<van-field
v-model="form.nonFulltimeDegree"
name="nonFulltimeDegree"
class="custom-field"
placeholder="请输入学位"
:border="false"
/>
</div>
</div>
</div>
<div class="form-item">
<div class="item-label">毕业院校</div>
<van-field
v-model="form.nonFulltimeSchool"
name="nonFulltimeSchool"
label="毕业院校"
class="custom-field"
placeholder="请输入毕业院校"
:border="false"
/>
</div>
<div class="form-item">
<div class="item-label">专业</div>
<van-field
v-model="form.nonFulltimeMajor"
name="nonFulltimeMajor"
label="专业"
class="custom-field"
placeholder="请输入专业"
:border="false"
/>
<van-field
v-model="form.nonFulltimeGraduationDate"
name="nonFulltimeGraduationDate"
label="毕业时间"
placeholder="请选择毕业时间"
readonly
is-link
@click="showPartGraduatePicker = true"
/>
<van-field
v-model="form.nonFulltimeDegree"
name="nonFulltimeDegree"
label="学位"
placeholder="请输入学位"
/>
</van-cell-group>
</div>
<div class="form-item">
<div class="item-label">毕业时间</div>
<div class="date-input-box" @click="showPartGraduatePicker = true">
<span>{{ form.nonFulltimeGraduationDate || '请选择' }}</span>
<van-icon name="calendar-o" color="#969799" />
</div>
</div>
</div>
<van-cell-group inset style="background: transparent; padding: 0;">
<template #title>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span>外部个人履历</span>
<span style="font-size: 16px; font-weight: 600; color: #323233;">外部个人履历</span>
</div>
</template>
<div class="resume-list">
......@@ -322,7 +417,7 @@
</div>
</div>
</div>
<div class="resume-actions" style="margin-top: 12px;">
<div class="resume-actions" style="margin-top: 6px;margin-bottom: 3px;">
<van-button block type="primary" plain icon="newspaper-o" @click="addResumeItem">新增履历</van-button>
</div>
</van-cell-group>
......@@ -330,8 +425,8 @@
<van-cell-group inset style="background: transparent; padding: 0;">
<template #title>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<!-- <span style="font-size: 16px; font-weight: 600; color: #323233;">家庭主要成员</span> -->
<span>家庭主要成员</span>
<span style="font-size: 16px; font-weight: 600; color: #323233;">家庭主要成员</span>
<!-- <span>家庭主要成员</span> -->
</div>
</template>
......@@ -404,7 +499,7 @@
</div>
</div>
<div class="family-actions" style="margin-top: 16px;">
<div class="family-actions" style="margin-top: 6px;margin-bottom: 3px">
<van-button block type="success" plain icon="friends-o" @click="addFamilyMember">新增家庭成员</van-button>
</div>
</van-cell-group>
......@@ -921,7 +1016,7 @@ async function onSubmit() {
submitSuccess.value = true;
showSuccessToast({ message: '提交成功', duration: 5000 });
} else {
showFailToast('提交失败');
showFailToast(responseData.errMessage || '提交失败');
}
} else {
showFailToast('提交失败');
......@@ -945,6 +1040,19 @@ void [phoneRules, idRules];
background: #f5f5f5;
}
.form-item-horizontal {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.form-item-horizontal .item-label {
margin-bottom: 0;
margin-right: 12px;
min-width: 70px;
flex-shrink: 0;
}
.actions {
position: fixed;
bottom: 0;
......@@ -956,24 +1064,39 @@ void [phoneRules, idRules];
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}
.extra {
clear: both;
color: rgba(0, 0, 0, 0.45);
margin-left: var(--van-field-label-width);
font-size: 14px;
line-height: 1.57;
width: 100%;
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--van-border-color);
.section-card {
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
border: 1px solid #ebedf0;
margin-bottom: 16px;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #323233;
margin-bottom: 16px;
display: flex;
align-items: center;
}
:deep(.van-field__body) { flex-wrap: wrap; }
.help-text {
font-size: 12px;
color: #969799;
margin-top: 4px;
line-height: 1.5;
}
:deep(.van-cell-group__title) {
font-size: 14px;
color: var(--van-text-color-2);
padding-left: 4px;
/* Override van-field styles when inside custom-input or similar wrappers */
.van-cell.custom-field {
background-color: #f7f8fa;
border-radius: 8px;
padding: 10px 12px;
}
.van-cell.custom-field::after {
display: none;
}
.family-list {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment