Skip to content

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

fix: 重制样式风格

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