aida_front/src/views/AwardPage/apply.vue

<template>
	<div class="apply-container">
		<div class="banner">
			<div class="slogan">
				BLOOM YOUR CREATIVITY • AiDA GLOBAL FASHION AWARD 2026
			</div>
			<div class="title poppins-medium">Application Form</div>
			<div class="form-header">
				<div class="form-title poppins-bold">Email Verification</div>
				<div class="desc">AiDA Users Only</div>
			</div>
		</div>
		<div class="form-container">
			<div class="form-content">
				<a-form
					name="form"
					ref="formRef"
					layout="vertical"
					:model="form"
					:rules="rulesRef"
					autocomplete="off"
				>
					<div class="email-box full-row">
						<a-form-item
							name="email"
							required
							label="Email Address"
						>
							<div class="email-wrapper flex align-center">
								<a-input v-model:value="form.email" />
								<div
									class="code-btn"
									:class="{ disabled: isCountingDown }"
									@click="handleSendCode"
								>
									{{
										isCountingDown
											? formatCountdown(countdown)
											: 'Send Code'
									}}
								</div>
								<img
									v-if="hasValidEmail"
									src="@/assets/images/award/checked.png"
									alt=""
									class="checked-icon"
								/>
							</div>
							<div class="tips">
								Please use the email address you registered with AiDA.
							</div>
						</a-form-item>
					</div>
					<div class="form-row full-row">
						<div class="form-title poppins-bold">Personal Information</div>
						<div class="desc">Tell us about yourself</div>
					</div>
					<div class="user-info flex">
						<template
							v-for="item in formKeys"
							:key="item.key"
						>
							<a-form-item
								v-if="item.key !== 'email'"
								:required="item.required"
								:label="item.label"
								:name="item.key"
							>
								<a-input v-model:value="form[item.key]" />
							</a-form-item>
						</template>
					</div>
					<div class="form-row full-row">
						<div class="form-title poppins-bold">Design Information</div>
						<div class="desc">Share your creative vision</div>
					</div>
					<a-form-item
						class="full-row design-title"
						name="designTitle"
						label="Design Title"
						required
					>
						<a-input v-model:value="form.designTitle" />
					</a-form-item>
					<a-form-item
						class="full-row design-desc"
						name="description"
						label="Design description"
						required
					>
						<a-textarea
							class="textarea"
							v-model:value="form.description"
							placeholder="Briefly describe your design concept, inspiration, and creative direction..."
						/>
					</a-form-item>
					<div class="form-row full-row">
						<div class="form-title poppins-bold">Submission Files</div>
						<div class="desc">Upload your design materials</div>
					</div>
					<div class="information full-row">
						<div class="information-title flex align-center">
							<div class="point"></div>
							<div class="text poppins-bold">Submission Requirements</div>
						</div>
						<ul class="information-list flex space-between">
							<li class="information-item">
								{{
									` Single PDF file\n Title, mood board, elaboration\n+ 4 outfit design with materials (max 15 pages)`
								}}
							</li>
							<div class="right">
								<li class="information-item">
									Format: Single PDF file, 15pages, maximum 20MB
								</li>
								<li class="information-item">
									{{
										` Video: Design process, 1080×1920 pixels (9:16 ratio),\nmaximum 60 seconds`
									}}
								</li>
							</div>
						</ul>
					</div>
					<div class="upload-container full-row">
						<a-form-item
							class="full-row"
							name="pdfPath"
							required
							label="How will you use AiDA in your design process?"
						>
							<div
								v-if="
									pdfUploadStatus === 'idle' ||
									pdfUploadStatus === 'error'
								"
							>
								<a-upload-dragger
									v-model:fileList="pdfList"
									:showUploadList="false"
									@change="info => handleFileChange(info, 'pdf')"
									:customRequest="handleUploadPdf"
									:beforeUpload="beforeUploadPdf"
									accept=".pdf"
								>
									<img
										src="@/assets/images/award/upload.png"
										alt=""
										class="upload-icon"
									/>
									<p class="desc">Click to upload or drag and drop</p>
									<p class="limit">PDF file, max 20MB</p>
								</a-upload-dragger>
							</div>
							<div
								v-else
								class="uploading-container"
							>
								<UploadStatus
									:status="pdfUploadStatus"
									type="pdf"
								/>
							</div>
							<div
								class="progress-bar-container"
								v-if="pdfUploadStatus === 'uploading'"
							>
								<div
									class="progress-bar"
									:style="{ width: `${uploadProgressPdf}%` }"
								></div>
							</div>
						</a-form-item>
					</div>
					<div class="upload-container full-row">
						<a-form-item
							class="full-row"
							name="videoPath"
							required
							label="How will you use AiDA in your design process?"
						>
							<div
								v-if="
									videoUploadStatus === 'idle' ||
									videoUploadStatus === 'error'
								"
							>
								<a-upload-dragger
									v-model:fileList="videoList"
									:showUploadList="false"
									@change="info => handleFileChange(info, 'video')"
									:customRequest="handleUploadVideo"
									:beforeUpload="beforeUploadVideo"
									accept=".mp4,.mov"
								>
									<img
										src="@/assets/images/award/upload.png"
										alt=""
										class="upload-icon"
									/>
									<p class="desc">Click to upload or drag and drop</p>
									<p class="limit">
										Video file (MP4, MOV), 1080p, max 100MB
									</p>
								</a-upload-dragger>
							</div>
							<div
								v-else
								class="uploading-container"
							>
								<UploadStatus
									:status="videoUploadStatus"
									type="video"
								/>
							</div>
							<div
								class="progress-bar-container"
								v-if="videoUploadStatus === 'uploading'"
							>
								<div
									class="progress-bar"
									:style="{ width: `${uploadProgressVideo}%` }"
								></div>
							</div>
						</a-form-item>
					</div>
				</a-form>
				<div class="conditions">
					<div class="confitions-title poppins-bold">Terms & Conditions</div>
					<div class="condition-list flex flex-col">
						<div
							class="condition-item flex align-center"
							v-for="item in conditionsList"
							:key="item.id"
						>
							<a-checkbox v-model:checked="item.check" />
							<span>
								{{ item.text }}
								<span
									class="required"
									v-if="item.required"
								>
									*
								</span>
							</span>
						</div>
					</div>
				</div>
				<div class="submit-container">
					<div
						class="submit-btn poppins-bold"
						@click="handleSubmitForm"
					>
						Submit your Design
					</div>
					<div class="desc">
						The link in the AiDA in-platform message will save your unfinished
						form.
					</div>
				</div>
			</div>
		</div>
		<a-modal
			v-model:visible="showModal"
			:footer="null"
			:maskClosable="false"
			:closable="false"
			wrapClassName="code-modal"
			forceRender
			:keyboard="false"
			:style="{ top: '29.3rem' }"
		>
			<div class="verify-container flex flex-col align-center">
				<img
					src="@/assets/images/award/close.svg"
					class="close-icon"
					@click="handleCloseModal"
				/>
				<div class="title poppins-bold">Check your email</div>
				<div class="desc">Enter the 6-digital code sent to</div>
				<div class="email">{{ form.email }}</div>
				<div class="code-box">
					<VerifycationCodeInput
						:ct="emailCode"
						@sendCaptcha="setVerifyCode"
					/>
				</div>
				<div
					class="verify-btn"
					@click="handleVerifyCode"
				>
					Verify
				</div>
				<div
					class="cutdown"
					:class="{ disabled: isCountingDown }"
					@click="handleSendCode"
				>
					{{
						isCountingDown
							? `Resend Code in ${formatCountdown(countdown)}`
							: 'Resend'
					}}
				</div>
			</div>
		</a-modal>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive, onUnmounted } from 'vue'
	import { debounce } from 'lodash-es'
	import type { Rule } from 'ant-design-vue/es/form'
	import { message } from 'ant-design-vue'
	import type { UploadChangeParam } from 'ant-design-vue'
	import VerifycationCodeInput from './components/VerificationCodeInput.vue'
	import { Https } from '@/tool/https'
	import UploadStatus from './components/UploadStatus.vue'

	const hasValidEmail = ref(true)
	const formRef = ref(null)
	const form = ref({
		email: '',
		firstName: '',
		lastName: '',
		gender: '',
		occupation: '',
		age: '',
		counterOrRegion: '',
		phone: '',
		portfoilo: '',
		// code: '',
		designTitle: '',
		description: '',
		pdfPath: null,
		videoPath: null
	})

	// 验证码输入组件引用
	const codeInputRef = ref()
	const emailCode = ref(['', '', '', '', '', ''])

	const isValidEmail = email => {
		const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
		return emailRegex.test(email)
	}
	const validEmail = (rule: Rule, value: string) => {
		if (!value) {
			return Promise.reject('Please input the email address')
		}
		if (!isValidEmail(value)) {
			return Promise.reject('Please input a valid email address')
		}
		return Promise.resolve()
	}
	const validateNumber = async (_rule: Rule, value: string) => {
		if (value === '') {
			return Promise.reject('Please fill in this section.')
		}
		if (!Number.isInteger(value)) {
			return Promise.reject('Please input digits')
		}
		return Promise.resolve()
	}

	const validatePhone = async (_rule: Rule, value: string) => {
		if (value === '') {
			return Promise.reject('Please enter your phone number.')
		}
		const phoneRegex = /^[\+]?[1-9][\d]{0,15}$/
		if (!phoneRegex.test(value)) {
			return Promise.reject('Please enter a valid phone number.')
		}
		return Promise.resolve()
	}

	const validateVerificationCode = async (_rule: Rule, value: string) => {
		if (value === '') {
			return Promise.reject('Please enter the verification code.')
		}
		const codeRegex = /^\d{6}$/
		if (!codeRegex.test(value)) {
			return Promise.reject('Please enter a 6-digit verification code.')
		}
		return Promise.resolve()
	}
	const rulesRef = {
		email: [{ required: true, validator: validEmail }],
		firstName: [
			{ required: true, message: 'Please input your first name', trigger: 'blur' }
		],
		lastName: [
			{ required: true, message: 'Please input your last name', trigger: 'blur' }
		]
	}

	const formKeys = ref([
		{
			label: 'First Name',
			required: true,
			type: 'input',
			key: 'firstName'
		},
		{
			label: 'Last Name',
			required: true,
			type: 'input',
			key: 'lastName'
		},
		{
			label: 'Gender',
			required: true,
			type: 'select',
			key: 'gender'
		},
		{
			label: 'Occupation',
			required: true,
			type: 'input',
			key: 'occupation'
		},
		{
			label: 'Age',
			required: true,
			type: 'input',
			key: 'age'
		},
		{
			label: 'Country/Region and City',
			required: true,
			type: 'input',
			key: 'counterOrRegion'
		},
		{
			label: 'Phone Number',
			required: true,
			type: 'input',
			key: 'phone'
		},

		{
			label: 'Portfoilo Website/Instagram(Optional)',
			required: false,
			type: 'input',
			key: 'portfoilo'
		}
	])

	const showModal = ref(false)
	// 倒计时相关状态
	const countdown = ref(0)
	const countdownTimer = ref<NodeJS.Timeout | null>(null)
	const isCountingDown = ref(false)
	const formatCountdown = (seconds: number) => {
		const minutes = Math.floor(seconds / 60)
		const remainingSeconds = seconds % 60
		return `${minutes.toString().padStart(2, '0')}:${remainingSeconds
			.toString()
			.padStart(2, '0')}`
	}

	const startCountdown = () => {
		countdown.value = 60
		isCountingDown.value = true

		countdownTimer.value = setInterval(() => {
			countdown.value--
			if (countdown.value <= 0) {
				clearCountdown()
			}
		}, 1000)
	}

	const clearCountdown = () => {
		if (countdownTimer.value) {
			clearInterval(countdownTimer.value)
			countdownTimer.value = null
		}
		countdown.value = 0
		isCountingDown.value = false
	}

	const handleSendCode = debounce(async () => {
		// 如果正在倒计时，不允许再次发送
		if (isCountingDown.value) {
			return
		}

		try {
			await formRef.value.validateFields(['email'])
			// TODO: 发送验证码的逻辑
			message.success('Verification code sent successfully!')

			// 开始倒计时
			startCountdown()

			showModal.value = true
		} catch (error) {}
	}, 300)

	const verifyCode = ref(null)

	const setVerifyCode = value => {
		verifyCode.value = value
	}

	const handleCloseModal = () => {
		showModal.value = false
	}

	const handleSubmitForm = () => {
		const validCondition = conditionsList.value.filter(
			item => item.required && !item.check
		)
		if (validCondition.length > 0) {
			message.error('Please check the terms and conditions')
			return
		}
		formRef.value.validate().then(res => {
			console.log(res)
		}).catch(err => {
			console.log(err)
			message.error('Please fill in all the required fields')
		})
	}

	const handleVerifyCode = () => {
		if (verifyCode.value.length !== 6) {
			message.error('Please enter the complete 6-digit verification code')
			return
		}

		message.success('Verification successful!')

		// 关闭模态框
		showModal.value = false
	}

	const pdfList = ref([])
	const videoList = ref([])
	const isUploadingPdf = ref(false)
	const uploadProgressPdf = ref(0)
	const isUploadingVideo = ref(false)
	const uploadProgressVideo = ref(0)
	const pdfUploadStatus = ref<'idle' | 'uploading' | 'success' | 'error'>('idle')
	const videoUploadStatus = ref<'idle' | 'uploading' | 'success' | 'error'>('idle')

	// 统一的文件上传前验证
	const beforeUploadFile = (type: FileType, file: File) => {
		if (!hasValidEmail.value) {
			message.error('Please verify your email first')
			return false
		}
		let maxSize: number
		let allowedExtensions: string[]
		let allowedMimeTypes: string[]
		let errorMessage: string

		if (type === 'pdf') {
			maxSize = 20 * 1024 * 1024 // 20MB
			allowedExtensions = ['pdf']
			allowedMimeTypes = ['application/pdf']
			errorMessage = 'Please upload a PDF file only.'
		} else if (type === 'video') {
			maxSize = 100 * 1024 * 1024 // 100MB
			allowedExtensions = ['mp4', 'mov']
			allowedMimeTypes = ['video/mp4', 'video/quicktime']
			errorMessage = 'Please upload a MP4 or MOV file only.'
		} else {
			return false
		}

		// 验证文件类型
		const fileExtension = file.name.split('.').pop()?.toLowerCase()
		const isValidType =
			allowedExtensions.includes(fileExtension || '') ||
			allowedMimeTypes.includes(file.type)

		if (!isValidType) {
			message.error(errorMessage)
			// 从文件列表中移除
			if (type === 'pdf') {
				const index = pdfList.value.findIndex(item => item.uid === file.uid)
				if (index > -1) {
					pdfList.value.splice(index, 1)
				}
			} else {
				const index = videoList.value.findIndex(item => item.uid === file.uid)
				if (index > -1) {
					videoList.value.splice(index, 1)
				}
			}
			return false // 阻止上传
		}

		// 验证文件大小
		if (file.size > maxSize) {
			const sizeLimit = type === 'pdf' ? '20MB' : '100MB'
			message.error(
				`File size exceeds ${sizeLimit} limit. Please upload a smaller file.`
			)
			// 从文件列表中移除
			if (type === 'pdf') {
				const index = pdfList.value.findIndex(item => item.uid === file.uid)
				if (index > -1) {
					pdfList.value.splice(index, 1)
				}
			} else {
				const index = videoList.value.findIndex(item => item.uid === file.uid)
				if (index > -1) {
					videoList.value.splice(index, 1)
				}
			}
			return false // 阻止上传
		}

		return true // 允许上传
	}

	// PDF文件上传前验证
	const beforeUploadPdf = (file: File) => {
		return beforeUploadFile('pdf', file)
	}

	// Video文件上传前验证
	const beforeUploadVideo = (file: File) => {
		return beforeUploadFile('video', file)
	}

	type FileType = 'pdf' | 'video'
	const handleFileChange = (info: UploadChangeParam, type: FileType) => {
		const status = info.file.status

		if (status === 'done') {
			message.success(`${info.file.name} file uploaded successfully.`)
			if (type === 'pdf') {
				isUploadingPdf.value = false
				uploadProgressPdf.value = 0
				pdfUploadStatus.value = 'success'
			} else if (type === 'video') {
				isUploadingVideo.value = false
				uploadProgressVideo.value = 0
				videoUploadStatus.value = 'success'
			}
		} else if (status === 'error') {
			message.error(`${info.file.name} file upload failed.`)
			if (type === 'pdf') {
				isUploadingPdf.value = false
				uploadProgressPdf.value = 0
				pdfUploadStatus.value = 'error'
			} else if (type === 'video') {
				isUploadingVideo.value = false
				uploadProgressVideo.value = 0
				videoUploadStatus.value = 'error'
			}
		}
	}

	// 统一的上传处理函数
	const handleUploadFile = (option: any, type: FileType) => {
		console.log(option, type)

		const file = option.file

		// 根据类型设置上传状态和进度
		if (type === 'pdf') {
			isUploadingPdf.value = true
			uploadProgressPdf.value = 0
			pdfUploadStatus.value = 'uploading'
		} else if (type === 'video') {
			isUploadingVideo.value = true
			uploadProgressVideo.value = 0
			videoUploadStatus.value = 'uploading'
		}

		const params = new FormData()
		params.append('file', file)
		params.append('email', form.value.email)

		// 根据类型选择不同的上传接口
		const uploadUrl = Https.httpUrls.uploadAvatar
		// const uploadUrl =
		// 	type === 'pdf' ? Https.httpUrls.uploadPDF : Https.httpUrls.uploadVideo

		Https.axiosPost(uploadUrl, params, {
			headers: { 'Content-Type': 'multipart/form-data' },
			onUploadProgress: progressEvent => {
				if (progressEvent.total) {
					const percentCompleted = Math.round(
						(progressEvent.loaded * 100) / progressEvent.total
					)
					if (type === 'pdf') {
						uploadProgressPdf.value = percentCompleted
					} else if (type === 'video') {
						uploadProgressVideo.value = percentCompleted
					}
				}
			}
		})
			.then(res => {
				console.log(res)
				if (type === 'pdf') pdfUploadStatus.value = 'success'
				if (type === 'video') videoUploadStatus.value = 'success'
				option.onSuccess(res, option.file)
			})
			.catch(error => {
				console.error('Upload error:', error)
				option.onError(error)
				if (type === 'pdf') {
					isUploadingPdf.value = false
					uploadProgressPdf.value = 0
					pdfUploadStatus.value = 'error'
				} else if (type === 'video') {
					isUploadingVideo.value = false
					uploadProgressVideo.value = 0
					videoUploadStatus.value = 'error'
				}
			})
	}

	// PDF上传处理
	const handleUploadPdf = (option: any) => {
		return handleUploadFile(option, 'pdf')
	}

	// Video上传处理
	const handleUploadVideo = (option: any) => {
		return handleUploadFile(option, 'video')
	}

	const conditionsList = ref([
		{
			check: false,
			required: true,
			text: 'I confirm that all submitted work is original and created by me.',
			id: 'first'
		},
		{
			check: false,
			required: true,
			text: 'I understand that Code-Create has marketing and promotional rights to all submitted designs and videos.',
			id: 'second'
		},
		{
			check: false,
			required: true,
			text: 'I agree to participate in finalist activities if selected, including AiDA training and award ceremony.',
			id: 'third'
		},
		{
			check: false,
			text: 'I would like to receive updates about AiDA products and future competitions. (Optional)',
			id: 'forth'
		}
	])

	// 组件卸载时清理定时器
	onUnmounted(() => {
		clearCountdown()
	})
</script>

<style lang="less" scoped>
	.poppins-bold {
		font-family: 'PoppinsBold';
		font-weight: 600;
	}

	.poppins-medium {
		font-family: 'PoppinsMedium';
		font-weight: 500;
	}

	.full-row {
		width: 100%;
	}

	.banner {
		height: 54.8rem;
		background: url('@/assets/images/award/apply_bg.png') no-repeat;
		background-size: 100% 100%;
		text-align: center;
		padding: 12rem 21.4rem 0;
		position: relative;

		.slogan {
			color: #585858;
			font-family: 'ArialBold';
			font-weight: 700;
			font-size: 2.8rem;
			margin-bottom: 4rem;
		}

		.title {
			color: #c7342c;
			font-size: 8rem;
		}

		.form-header {
			height: 16.8rem;
			width: calc(100% - 42.8rem);
			left: 21.4rem;
			bottom: 0;
			position: absolute;
			background-color: #fff;
			border-top-left-radius: 0.8rem;
			border-top-right-radius: 0.8rem;
			text-align: left;
			padding: 6rem 6rem 0;

			.form-title {
				color: #232323;
				font-size: 3rem;
				margin-bottom: 1rem;
			}

			.desc {
				color: #b10000;
				// font-family: 'Instrument';
				font-family: revert-layer;
				font-weight: 500;
				font-size: 2.4rem;
			}
		}
	}

	.form-row {
		margin-top: 12rem;
		margin-bottom: 6rem;

		.form-title {
			color: #232323;
			font-size: 3rem;
			margin-bottom: 1rem;
		}

		.desc {
			color: #b10000;
			// font-family: 'Instrument';
			font-family: revert-layer;
			font-weight: 500;
			font-size: 2.4rem;
		}
	}

	.form-container {
		padding: 0 21.4rem 12rem;
		background-color: #f5f5f5;

		.form-content {
			padding: 4rem 6rem 6rem;
			background-color: #fff;
			border-bottom-left-radius: 0.8rem;
			border-bottom-right-radius: 0.8rem;

			.ant-form {
				display: flex;
				flex-wrap: wrap;
				column-gap: 4rem;

				.user-info {
					flex-wrap: wrap;
					row-gap: 6rem;
					justify-content: space-between;
				}

				.ant-form-item {
					width: 66.5rem;
					margin-bottom: 0;

					&.full-row {
						width: 100%;
					}

					&.design-title {
						margin-bottom: 9rem;
					}

					:deep(label) {
						// display: none;
						flex-direction: row-reverse;
						color: #232323;

						&,
						&::before {
							font-family: 'Arial';
							font-weight: 400;
							font-size: 2rem;
						}
					}

					:deep(.ant-input) {
						border: 0.2rem solid #d5d5d5;
						height: 6rem;
						border-radius: 0.8rem;
						font-family: 'Arial';
						font-weight: 400;
						font-size: 1.8rem;

						&.textarea {
							height: 20rem;
						}
					}
				}
			}

			.email-box {
				:deep(.ant-input) {
					border: none !important;

					&:focus {
						box-shadow: none;
					}
				}

				.email-wrapper {
					border-radius: 0.8rem;
					border: 0.2rem solid #d5d5d5;
					position: relative;
					.checked-icon {
						position: absolute;
						right: -6rem;
						width: 4rem;
						height: 4rem;
					}
				}

				.code-btn {
					width: 13rem;
					height: 4rem;
					color: #585858;
					font-family: 'Arial';
					font-weight: 400;
					font-size: 1.8rem;
					line-height: 4rem;
					text-align: center;
					cursor: pointer;
					border-left: 0.1rem solid #d5d5d5;

					&.disabled {
						cursor: not-allowed;
						opacity: 0.6;
					}
				}
			}

			.tips {
				font-family: 'Arial';
				font-weight: 400;
				font-size: 1.6rem;
				color: #585858;
				margin-top: 1rem;
			}
		}
	}

	:deep(.ant-form-item-label) {
		padding: 0 0 1rem;
	}

	.information {
		padding-left: 2.4rem;

		.information-title {
			font-size: 2.8rem;
			color: #232323;
			column-gap: 2.4rem;
			margin-bottom: 5rem;

			.point {
				width: 1.2rem;
				height: 1.2rem;
				border-radius: 50%;
				background-color: #c7342c;
			}
		}

		.information-list {
			padding-left: 2.4rem;
			column-gap: 4.8rem;

			.information-item {
				font-family: 'Arial';
				font-weight: 400;
				font-size: 2.4rem;
				color: #585858;
				position: relative;
				list-style: disc;
				// line-height: 3rem;
				white-space: pre-line;
			}
		}
	}

	.upload-container {
		margin-top: 6rem;

		:deep(.ant-upload-drag) {
			height: 32rem;

			.ant-upload-btn {
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 5.89rem;

				.upload-icon {
					width: 12rem;
					height: 12rem;
				}

				.desc {
					color: #585858;
					font-family: 'Arial';
					font-weight: 400;
					font-size: 2.4rem;
					margin: 1rem 0 2rem;
				}

				.limit {
					color: #aaa;
					font-family: 'Arial';
					font-weight: 400;
					font-size: 1.8rem;
				}
			}
		}

		.uploading-container {
			height: 32rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 0.2rem solid #d5d5d5;
			border-radius: 0.8rem;
			background-color: #fafafa;

			.uploading-text {
				color: #585858;
				font-family: 'Arial';
				font-weight: 400;
				font-size: 2.4rem;
			}
		}

		.progress-bar-container {
			width: 100%;
			height: 1rem;
			background-color: #f0f0f0;
			border-radius: 0.8rem;
			margin-top: 2rem;
			overflow: hidden;
			position: absolute;
			bottom: 0;

			.progress-bar {
				height: 100%;
				background-color: #c7342c;
				border-radius: 0.8rem;
				transition: width 0.3s ease;
			}
		}
	}

	.conditions {
		margin-top: 12rem;

		&-title {
			color: #232323;
			font-size: 3rem;
		}

		.condition-list {
			margin-top: 6rem;
			row-gap: 3rem;

			.condition-item {
				border: 0.2rem solid #d5d5d5;
				height: 6rem;
				line-height: 6rem;
				border-radius: 0.8rem;
				color: #585858;
				font-family: 'Arial';
				font-weight: 400;
				font-size: 1.8rem;
				padding-left: 1.5rem;
				column-gap: 2.5rem;
				.required {
					color: #c7342c;
				}
			}

			:deep(.ant-checkbox-wrapper) {
				.ant-checkbox-inner {
					//修改边框的颜色
					width: 2rem;
					height: 2rem;
					border: 0.2rem solid #585858 !important;
					border-radius: 0.4rem;
				}

				.ant-checkbox-checked .ant-checkbox-inner {
					//修改选中框的背景颜色
					background-color: #fff !important;
					/* 将背景颜色修改为白色 */
					//修改边框颜色
					border-color: #585858 !important;
					/* 将边框颜色修改为黑色 */
				}

				.ant-checkbox-checked .ant-checkbox-inner::after {
					//antd的checkbox组件的选中框里面的透明的钩子，是通过设置底部边框和右边框的颜色再旋转得到的钩子，
					// 所以设置底部边框和右边框的样式就可以修改钩子的样式
					border-bottom: 0.2rem solid #585858;
					border-right: 0.2rem solid #585858;
					width: 0.65rem;
					height: 1rem;
					left: 21.895%;
				}
			}
		}
	}

	.submit-container {
		margin-top: 12rem;

		.submit-btn {
			height: 5rem;
			background-color: #454545;
			border-radius: 0.8rem;
			color: #fff;
			line-height: 5rem;
			text-align: center;
			font-size: 1.6rem;
			cursor: pointer;
		}

		.desc {
			// font-family: 'instrument';
			font-family: revert-layer;
			font-weight: 400;
			font-size: 1.6rem;
			color: #6d6d6d;
			text-align: center;
			margin-top: 2rem;
		}
	}

	.verify-container {
		width: 60rem;
		height: 49.4rem;
		padding: 6rem 8.6rem;
		background-color: #fff;
		position: relative;

		.close-icon {
			position: absolute;
			width: 2.4rem;
			height: 2.4rem;
			top: 2rem;
			right: 2rem;
			cursor: pointer;
		}

		.title {
			color: #232323;

			font-size: 3rem;
			line-height: 5rem;
		}

		.desc {
			color: #585858;
			font-family: 'Arial';
			font-weight: 400;
			font-size: 1.6rem;
			line-height: 3.4rem;
			margin-top: 1.4rem;
		}

		.email {
			font-family: 'ArialBold';
			font-weight: 700;
			font-size: 1.6rem;
			line-height: 3rem;
			color: #232323;
		}

		.code-box {
			width: 100%;
			margin: 5rem 0;
		}

		.verify-btn {
			background-color: #232323;
			height: 4.2rem;
			border-radius: 8px;
			line-height: 4.2rem;
			width: 100%;
			color: #fff;
			text-align: center;
			font-family: 'ArialBold';
			font-weight: 700;
			font-size: 1.6rem;
		}

		.cutdown {
			font-family: 'Arial';
			font-weight: 400;
			font-size: 1.4rem;
			color: #585858;
			margin-top: 2rem;
			text-decoration: underline solid #585858;

			&:not(.disabled) {
				cursor: pointer;
			}

			&.disabled {
				cursor: not-allowed;
			}
		}
	}
</style>
<style lang="less">
	.code-modal {
		.ant-modal-content .ant-modal-body {
			padding: 0;
			// width: 60rem;
		}
	}
</style>