|
|
@@ -0,0 +1,864 @@
|
|
|
+<template>
|
|
|
+ <main class="registration-page">
|
|
|
+ <van-nav-bar
|
|
|
+ title="医药代表合规培训报名表"
|
|
|
+ left-arrow
|
|
|
+ safe-area-inset-top
|
|
|
+ @click-left="goBack"
|
|
|
+ />
|
|
|
+
|
|
|
+ <header class="registration-hero">
|
|
|
+ <h1>正式报名 · 一次填完</h1>
|
|
|
+ <p>信息仅用于学籍注册与证书制作</p>
|
|
|
+ <ol class="registration-steps" aria-label="报名流程">
|
|
|
+ <li
|
|
|
+ v-for="(step, index) in steps"
|
|
|
+ :key="step"
|
|
|
+ :class="{ 'step-active': index === 0 }"
|
|
|
+ :aria-current="index === 0 ? 'step' : undefined"
|
|
|
+ >
|
|
|
+ <span class="step-number">{{ index + 1 }}</span>
|
|
|
+ <span>{{ step }}</span>
|
|
|
+ </li>
|
|
|
+ </ol>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="registration-content">
|
|
|
+ <aside class="preparation-note">
|
|
|
+ <h2><span aria-hidden="true">📋</span> 填写前请备齐</h2>
|
|
|
+ <p>两寸免冠证件照1～2张（白底或蓝底，用于证书制作）。</p>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <van-form
|
|
|
+ ref="registrationForm"
|
|
|
+ class="registration-form"
|
|
|
+ label-align="top"
|
|
|
+ validate-trigger="onSubmit"
|
|
|
+ scroll-to-error
|
|
|
+ :show-error="false"
|
|
|
+ @submit="onSubmit"
|
|
|
+ >
|
|
|
+ <section aria-labelledby="basic-title">
|
|
|
+ <h2 id="basic-title" class="section-title">一、基本信息</h2>
|
|
|
+ <div class="section-card basic-card">
|
|
|
+ <van-field
|
|
|
+ id="registration-name"
|
|
|
+ v-model="form.name"
|
|
|
+ name="name"
|
|
|
+ label="姓名"
|
|
|
+ placeholder="请输入真实姓名（用于证书印制）"
|
|
|
+ autocomplete="name"
|
|
|
+ maxlength="50"
|
|
|
+ required
|
|
|
+ :border="false"
|
|
|
+ :rules="registrationRules.name"
|
|
|
+ />
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ id="registration-gender"
|
|
|
+ name="gender"
|
|
|
+ label="性别"
|
|
|
+ class="choice-field"
|
|
|
+ required
|
|
|
+ :border="false"
|
|
|
+ :rules="registrationRules.gender"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <van-radio-group v-model="form.gender" direction="horizontal" aria-label="性别">
|
|
|
+ <van-radio
|
|
|
+ name="男"
|
|
|
+ aria-label="男"
|
|
|
+ class="gender-pill"
|
|
|
+ :class="{ selected: form.gender === '男' }"
|
|
|
+ >
|
|
|
+ 男
|
|
|
+ </van-radio>
|
|
|
+ <van-radio
|
|
|
+ name="女"
|
|
|
+ aria-label="女"
|
|
|
+ class="gender-pill"
|
|
|
+ :class="{ selected: form.gender === '女' }"
|
|
|
+ >
|
|
|
+ 女
|
|
|
+ </van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ id="registration-phone"
|
|
|
+ v-model="form.phone"
|
|
|
+ name="phone"
|
|
|
+ label="手机号"
|
|
|
+ type="tel"
|
|
|
+ inputmode="numeric"
|
|
|
+ autocomplete="tel"
|
|
|
+ maxlength="11"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ required
|
|
|
+ :border="false"
|
|
|
+ :formatter="formatPhone"
|
|
|
+ :rules="registrationRules.phone"
|
|
|
+ />
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ id="registration-id-number"
|
|
|
+ v-model="form.idNumber"
|
|
|
+ name="idNumber"
|
|
|
+ label="身份证号"
|
|
|
+ maxlength="18"
|
|
|
+ placeholder="请输入身份证号（用于学籍与证书注册）"
|
|
|
+ required
|
|
|
+ :border="false"
|
|
|
+ :formatter="formatIdNumber"
|
|
|
+ :rules="registrationRules.idNumber"
|
|
|
+ />
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ id="registration-region"
|
|
|
+ :model-value="form.region.text"
|
|
|
+ name="region"
|
|
|
+ label="所在地区（省/市）"
|
|
|
+ class="picker-field"
|
|
|
+ required
|
|
|
+ :border="false"
|
|
|
+ :rules="[{ required: true, message: '请选择所在省/市' }]"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="region-trigger"
|
|
|
+ :class="{ 'is-placeholder': !form.region.text }"
|
|
|
+ aria-label="所在地区（省/市）"
|
|
|
+ aria-haspopup="dialog"
|
|
|
+ :aria-expanded="showRegionPicker"
|
|
|
+ @click="openRegionPicker"
|
|
|
+ >
|
|
|
+ <span>{{ form.region.text || '请选择省 / 市' }}</span>
|
|
|
+ <van-icon name="arrow-down" aria-hidden="true" />
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ id="registration-company"
|
|
|
+ v-model="form.company"
|
|
|
+ name="company"
|
|
|
+ label="所属公司 / 单位 / 机构"
|
|
|
+ placeholder="请输入单位全称"
|
|
|
+ autocomplete="organization"
|
|
|
+ maxlength="100"
|
|
|
+ required
|
|
|
+ :border="false"
|
|
|
+ :rules="registrationRules.company"
|
|
|
+ />
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ id="registration-position"
|
|
|
+ v-model="form.position"
|
|
|
+ name="position"
|
|
|
+ label="职务"
|
|
|
+ placeholder="请输入职务"
|
|
|
+ autocomplete="organization-title"
|
|
|
+ maxlength="50"
|
|
|
+ required
|
|
|
+ :border="false"
|
|
|
+ :rules="registrationRules.position"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section aria-labelledby="education-title">
|
|
|
+ <h2 id="education-title" class="section-title">二、学历报名</h2>
|
|
|
+ <div class="section-card education-card">
|
|
|
+ <van-field
|
|
|
+ id="registration-education"
|
|
|
+ name="education"
|
|
|
+ label="是否需要同步报名学历"
|
|
|
+ class="choice-field education-field"
|
|
|
+ :border="false"
|
|
|
+ :rules="registrationRules.education"
|
|
|
+ >
|
|
|
+ <template #label>
|
|
|
+ <span id="registration-education-label">
|
|
|
+ 是否需要同步报名学历<span class="required-mark">*</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template #input>
|
|
|
+ <div class="education-content">
|
|
|
+ <van-checkbox-group
|
|
|
+ v-model="form.education"
|
|
|
+ class="education-options"
|
|
|
+ aria-labelledby="registration-education-label"
|
|
|
+ >
|
|
|
+ <van-checkbox
|
|
|
+ v-for="option in educationOptions"
|
|
|
+ :key="option"
|
|
|
+ :name="option"
|
|
|
+ class="education-pill"
|
|
|
+ :class="{ selected: form.education.includes(option) }"
|
|
|
+ >
|
|
|
+ {{ option }}
|
|
|
+ </van-checkbox>
|
|
|
+ </van-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section aria-labelledby="photo-title">
|
|
|
+ <h2 id="photo-title" class="section-title">三、照片（证书使用）</h2>
|
|
|
+ <div class="section-card">
|
|
|
+ <van-field
|
|
|
+ id="registration-photo"
|
|
|
+ name="photo"
|
|
|
+ label="照片（证书使用）"
|
|
|
+ class="choice-field photo-field"
|
|
|
+ required
|
|
|
+ :border="false"
|
|
|
+ :rules="registrationRules.photo"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <div class="photo-content">
|
|
|
+ <p class="field-note">白底或蓝底两寸免冠照片</p>
|
|
|
+ <van-uploader
|
|
|
+ v-model="photos"
|
|
|
+ class="certificate-uploader"
|
|
|
+ accept="image/*"
|
|
|
+ multiple
|
|
|
+ result-type="file"
|
|
|
+ image-fit="contain"
|
|
|
+ :preview-options="{ closeable: true }"
|
|
|
+ :max-count="2"
|
|
|
+ :before-read="beforeReadPhoto"
|
|
|
+ aria-label="添加证书照片"
|
|
|
+ >
|
|
|
+ <div class="upload-placeholder">
|
|
|
+ <span class="upload-plus"><van-icon name="plus" /></span>
|
|
|
+ <span class="upload-label">添加图片</span>
|
|
|
+ <span class="field-note">图片要求：最少 1 张，最多 2 张</span>
|
|
|
+ </div>
|
|
|
+ </van-uploader>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section aria-labelledby="mailing-title">
|
|
|
+ <h2 id="mailing-title" class="section-title">四、证书寄送</h2>
|
|
|
+ <div class="section-card mailing-card">
|
|
|
+ <van-field
|
|
|
+ id="registration-mailing"
|
|
|
+ :model-value="form.mailingArea.text"
|
|
|
+ name="mailingArea"
|
|
|
+ label="联系地址"
|
|
|
+ class="picker-field"
|
|
|
+ :border="false"
|
|
|
+ :rules="[{ required: true, message: '请选择证书寄送省/市/区' }]"
|
|
|
+ >
|
|
|
+ <template #label>
|
|
|
+ <span id="registration-mailing-label">
|
|
|
+ 联系地址<span class="required-mark">*</span>
|
|
|
+ <span class="field-hint">用于寄送证书</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template #input>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="region-trigger"
|
|
|
+ :class="{ 'is-placeholder': !form.mailingArea.text }"
|
|
|
+ aria-labelledby="registration-mailing-label"
|
|
|
+ aria-haspopup="dialog"
|
|
|
+ :aria-expanded="showMailingPicker"
|
|
|
+ @click="openMailingPicker"
|
|
|
+ >
|
|
|
+ <span>{{ form.mailingArea.text || '省 / 市 / 区' }}</span>
|
|
|
+ <van-icon name="arrow-down" aria-hidden="true" />
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ id="registration-address"
|
|
|
+ v-model="form.address"
|
|
|
+ name="address"
|
|
|
+ label="详细地址"
|
|
|
+ label-class="address-label"
|
|
|
+ placeholder="请填写详细地址（小区/楼栋/门牌号）"
|
|
|
+ autocomplete="street-address"
|
|
|
+ maxlength="100"
|
|
|
+ :border="false"
|
|
|
+ :rules="registrationRules.address"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <van-button class="submit-button" type="primary" native-type="submit" round block>
|
|
|
+ 提交报名
|
|
|
+ </van-button>
|
|
|
+ <footer class="privacy-note">
|
|
|
+ <p>教务老师将于 1 个工作日内与你确认报名信息并开通课程</p>
|
|
|
+ <p>信息仅用于学籍注册与证书制作，不会用于其他用途</p>
|
|
|
+ </footer>
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-popup v-model:show="showRegionPicker" position="bottom" round safe-area-inset-bottom>
|
|
|
+ <van-cascader
|
|
|
+ v-model="regionDraft"
|
|
|
+ title="请选择所在省 / 市"
|
|
|
+ :options="provinceCityOptions"
|
|
|
+ @close="showRegionPicker = false"
|
|
|
+ @finish="confirmRegion"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <van-popup v-model:show="showMailingPicker" position="bottom" round safe-area-inset-bottom>
|
|
|
+ <van-cascader
|
|
|
+ v-model="mailingDraft"
|
|
|
+ title="请选择省 / 市 / 区"
|
|
|
+ :options="provinceCityCountyOptions"
|
|
|
+ @close="showMailingPicker = false"
|
|
|
+ @finish="confirmMailingArea"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </main>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import { showDialog, showToast } from 'vant'
|
|
|
+import type { CascaderOption, FormInstance, UploaderFileListItem } from 'vant'
|
|
|
+import { useCascaderAreaData } from '@vant/area-data'
|
|
|
+import { registrationRules } from './validation'
|
|
|
+
|
|
|
+interface AreaSelection {
|
|
|
+ value: string
|
|
|
+ text: string
|
|
|
+}
|
|
|
+
|
|
|
+interface CascaderFinishEvent {
|
|
|
+ value: string | number
|
|
|
+ selectedOptions: CascaderOption[]
|
|
|
+}
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const registrationForm = ref<FormInstance>()
|
|
|
+const provinceCityCountyOptions = useCascaderAreaData()
|
|
|
+const provinceCityOptions = provinceCityCountyOptions.map((province) => ({
|
|
|
+ text: province.text,
|
|
|
+ value: province.value,
|
|
|
+ children: province.children?.map((city) => ({ text: city.text, value: city.value })),
|
|
|
+}))
|
|
|
+const steps = ['填写提交', '教务审核', '开通课程', '双证上岗']
|
|
|
+const educationOptions = ['【专科】药学专业、护理学专业', '【专科起点本科】药学专业、护理学专业']
|
|
|
+const form = reactive({
|
|
|
+ name: '',
|
|
|
+ gender: '' as '男' | '女' | '',
|
|
|
+ phone: '',
|
|
|
+ idNumber: '',
|
|
|
+ region: { value: '', text: '' } as AreaSelection,
|
|
|
+ company: '',
|
|
|
+ position: '',
|
|
|
+ education: [] as string[],
|
|
|
+ mailingArea: { value: '', text: '' } as AreaSelection,
|
|
|
+ address: '',
|
|
|
+})
|
|
|
+const photos = ref<UploaderFileListItem[]>([])
|
|
|
+const showRegionPicker = ref(false)
|
|
|
+const showMailingPicker = ref(false)
|
|
|
+const regionDraft = ref('')
|
|
|
+const mailingDraft = ref('')
|
|
|
+
|
|
|
+const formatPhone = (value: string) => value.replace(/\D/g, '').slice(0, 11)
|
|
|
+const formatIdNumber = (value: string) =>
|
|
|
+ value
|
|
|
+ .replace(/[^\dXx]/g, '')
|
|
|
+ .toUpperCase()
|
|
|
+ .slice(0, 18)
|
|
|
+
|
|
|
+const openRegionPicker = () => {
|
|
|
+ regionDraft.value = form.region.value
|
|
|
+ showRegionPicker.value = true
|
|
|
+}
|
|
|
+const openMailingPicker = () => {
|
|
|
+ mailingDraft.value = form.mailingArea.value
|
|
|
+ showMailingPicker.value = true
|
|
|
+}
|
|
|
+const toAreaSelection = ({ value, selectedOptions }: CascaderFinishEvent): AreaSelection => ({
|
|
|
+ value: String(value),
|
|
|
+ text: selectedOptions.map((option) => option.text).join(' / '),
|
|
|
+})
|
|
|
+const confirmRegion = (selection: CascaderFinishEvent) => {
|
|
|
+ form.region = toAreaSelection(selection)
|
|
|
+ showRegionPicker.value = false
|
|
|
+ registrationForm.value?.resetValidation('region')
|
|
|
+}
|
|
|
+const confirmMailingArea = (selection: CascaderFinishEvent) => {
|
|
|
+ form.mailingArea = toAreaSelection(selection)
|
|
|
+ showMailingPicker.value = false
|
|
|
+ registrationForm.value?.resetValidation('mailingArea')
|
|
|
+}
|
|
|
+
|
|
|
+const beforeReadPhoto = (file: File | File[]) => {
|
|
|
+ const files = Array.isArray(file) ? file : [file]
|
|
|
+ if (files.some((item) => !item.type.startsWith('image/'))) {
|
|
|
+ showToast('请选择图片文件')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (photos.value.length + files.length > 2) {
|
|
|
+ showToast('最多上传2张照片')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+}
|
|
|
+
|
|
|
+const onSubmit = () => {
|
|
|
+ // 仅完成 UI 与前端校验。正式接口就绪后在此对接，不发送或持久化个人信息。
|
|
|
+ showDialog({ title: '提示', message: '报名暂未开放，请稍后再试。' })
|
|
|
+}
|
|
|
+
|
|
|
+const goBack = () => {
|
|
|
+ if (window.history.state?.back) router.back()
|
|
|
+ else router.replace({ name: 'CompliancePlan' })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.registration-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f3f4f6;
|
|
|
+ color: #283342;
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
|
+ --van-nav-bar-title-text-color: #283342;
|
|
|
+ --van-nav-bar-icon-color: #283342;
|
|
|
+ --van-field-placeholder-text-color: #a2abb9;
|
|
|
+ --van-field-label-color: #333;
|
|
|
+ --van-field-input-text-color: #394452;
|
|
|
+
|
|
|
+ h1,
|
|
|
+ h2,
|
|
|
+ p,
|
|
|
+ ol {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.registration-hero {
|
|
|
+ padding: 20px 20px 19px;
|
|
|
+ background:
|
|
|
+ radial-gradient(ellipse at 105% 0%, rgba(255, 218, 112, 0.25), transparent 48%),
|
|
|
+ linear-gradient(120deg, #0b47a8 0%, #1260d2 72%, #2879e7 100%);
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: 4px;
|
|
|
+ color: #a9c8f4;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.registration-steps {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 13px !important;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ color: #a8c9f8;
|
|
|
+ font-size: 11px;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ &:not(:last-child)::after {
|
|
|
+ content: '';
|
|
|
+ flex: 1;
|
|
|
+ min-width: 8px;
|
|
|
+ height: 1px;
|
|
|
+ margin: 0 6px 0 1px;
|
|
|
+ background: rgba(183, 212, 255, 0.42);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ flex: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-active {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+
|
|
|
+ .step-number {
|
|
|
+ border-color: #ffdb29;
|
|
|
+ background: #ffdb29;
|
|
|
+ color: #765600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.step-number {
|
|
|
+ display: flex;
|
|
|
+ flex: 0 0 18px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 18px;
|
|
|
+ border: 1px solid #8bb7fa;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(209, 230, 255, 0.18);
|
|
|
+ color: #dceaff;
|
|
|
+ font-size: 11px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.registration-content {
|
|
|
+ padding: 12px 12px 20px;
|
|
|
+ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
|
|
|
+}
|
|
|
+
|
|
|
+.preparation-note {
|
|
|
+ padding: 12px 14px;
|
|
|
+ border: 1px solid #ffce66;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff9ea;
|
|
|
+ color: #906109;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 11.5px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.registration-form section {
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 20px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 3px;
|
|
|
+ height: 13px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #1b7aff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.section-hint {
|
|
|
+ margin-left: 4px;
|
|
|
+ color: #a1aab8;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.section-card {
|
|
|
+ margin-top: 9px;
|
|
|
+ padding: 16px 14px;
|
|
|
+ border-radius: 9px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 2px 4px rgba(31, 45, 61, 0.06);
|
|
|
+
|
|
|
+ :deep(.van-field) {
|
|
|
+ display: block;
|
|
|
+ padding: 0;
|
|
|
+ overflow: visible;
|
|
|
+ background: transparent;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+
|
|
|
+ &:not(:last-child) {
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-field__label) {
|
|
|
+ width: auto;
|
|
|
+ margin: 0 0 6px;
|
|
|
+ font-size: 13.5px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 19px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-field__label--required)::after {
|
|
|
+ content: '*';
|
|
|
+ margin-left: 3px;
|
|
|
+ color: #ff4d4f;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-field__body) {
|
|
|
+ min-height: 44px;
|
|
|
+ padding: 0 12px;
|
|
|
+ border: 1px solid #eceef1;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #f5f6f8;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-field__control) {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-field__error-message) {
|
|
|
+ padding-top: 4px;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.choice-field .van-field__body),
|
|
|
+ :deep(.picker-field .van-field__body) {
|
|
|
+ min-height: 0;
|
|
|
+ padding: 0;
|
|
|
+ border: 0;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-field__value) {
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.gender-pill,
|
|
|
+.education-pill {
|
|
|
+ min-height: 36px;
|
|
|
+ border: 1px solid #eceef1;
|
|
|
+ border-radius: 22px;
|
|
|
+ background: #f5f6f8;
|
|
|
+ box-sizing: border-box;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ border-color: #1980ff;
|
|
|
+ background: #ecf4ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.selected :deep(.van-radio__label),
|
|
|
+ &.selected :deep(.van-checkbox__label) {
|
|
|
+ color: #1878ed;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.gender-pill {
|
|
|
+ margin-right: 8px;
|
|
|
+ padding: 0 15px;
|
|
|
+
|
|
|
+ :deep(.van-radio__icon),
|
|
|
+ :deep(.van-radio__icon .van-icon) {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-radio__icon .van-icon) {
|
|
|
+ border-color: #cfd8e5;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-radio__label) {
|
|
|
+ margin-left: 6px;
|
|
|
+ color: #657181;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.region-trigger {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 10px;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 44px;
|
|
|
+ padding: 10px 12px;
|
|
|
+ border: 1px solid #eceef1;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #f5f6f8;
|
|
|
+ color: #394452;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.is-placeholder {
|
|
|
+ color: #a2abb9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: #a2abb9;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.required-mark {
|
|
|
+ margin-left: 3px;
|
|
|
+ color: #ff4d4f;
|
|
|
+}
|
|
|
+
|
|
|
+.field-hint {
|
|
|
+ margin-left: 5px;
|
|
|
+ color: #a1aab8;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.field-note {
|
|
|
+ color: #a1aab8;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 17px;
|
|
|
+}
|
|
|
+
|
|
|
+.education-content,
|
|
|
+.photo-content {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.education-options {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 28px;
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.education-card {
|
|
|
+ padding-bottom: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+.education-pill {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 44px;
|
|
|
+ padding: 10px 12px;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ :deep(.van-checkbox__icon) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-checkbox__label) {
|
|
|
+ margin: 0;
|
|
|
+ color: #657181;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.certificate-uploader {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 5px;
|
|
|
+
|
|
|
+ :deep(.van-uploader__wrapper),
|
|
|
+ :deep(.van-uploader__input-wrapper) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-uploader__wrapper) {
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-uploader__preview) {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-uploader__preview-image) {
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #f5f6f8;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.upload-placeholder {
|
|
|
+ display: flex;
|
|
|
+ min-height: 95px;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 3px;
|
|
|
+ border: 1px dashed #b4ccec;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #f5f6f8;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-plus {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #e5efff;
|
|
|
+ color: #428cff;
|
|
|
+ font-size: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-label {
|
|
|
+ color: #657181;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.mailing-card {
|
|
|
+ :deep(.van-field:not(:last-child)) {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.address-label) {
|
|
|
+ position: absolute;
|
|
|
+ width: 1px;
|
|
|
+ height: 1px;
|
|
|
+ margin: -1px;
|
|
|
+ overflow: hidden;
|
|
|
+ clip-path: inset(50%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.submit-button {
|
|
|
+ height: 55px;
|
|
|
+ margin-top: 20px;
|
|
|
+ border: 0;
|
|
|
+ background: #1977ff;
|
|
|
+ box-shadow: 0 5px 12px rgba(25, 119, 255, 0.26);
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.privacy-note {
|
|
|
+ margin-top: 12px;
|
|
|
+ color: #a1aab8;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
