feat: 表单过期

src/views/AwardPage/apply.vue

@@ -7,16 +7,16 @@
 			<div class="title poppins-medium">Application Form</div>
 			<div
 				class="form-header"
-				v-if="!isCompleted"
+				v-if="!isCompleted && !isExpired"
 			>
 				<div class="form-title poppins-bold">Email Verification</div>
 				<div class="desc">AiDA Users Only</div>
 			</div>
 		</div>
-		<Success v-if="isCompleted" />
+		<Success :isExpired="isExpired" v-if="isCompleted || isExpired" />
 		<div
 			class="form-container"
-			v-if="!isCompleted"
+			v-if="!isCompleted && !isExpired"
 		>
 			<div class="form-content">
 				<a-form
@@ -154,6 +154,7 @@
 							class="full-row"
 							name="pdfPath"
 							required
+							:validate-trigger="[]"
 							label="How will you use AiDA in your design process?"
 						>
 							<div
@@ -205,6 +206,7 @@
 							class="full-row"
 							name="videoPath"
 							required
+							:validate-trigger="[]"
 							label="How will you use AiDA in your design process?"
 						>
 							<div
@@ -348,6 +350,13 @@
 	import UploadStatus from './components/UploadStatus.vue'
 	import Success from './components/Success.vue'
 
+	// 是否晚于2026年7月22日
+	const isExpired = computed(() => {
+		const now = new Date()
+		const targetDate = new Date('2026-03-15')
+		return now > targetDate
+	})
+
 	const route = useRoute()
 	const isCompleted = ref(false)
 	const hasValidEmail = ref(false)
@@ -432,6 +441,36 @@
 		],
 		lastName: [
 			{ required: true, message: 'Please input your last name', trigger: 'blur' }
+		],
+		gender: [
+			{ required: true, message: 'Please select your gender', trigger: 'blur' }
+		],
+		occupation: [
+			{ required: true, message: 'Please input your occupation', trigger: 'blur' }
+		],
+		age: [{ required: true, message: 'Please input your age', trigger: 'blur' }],
+		countryRegionCity: [
+			{
+				required: true,
+				message: 'Please input your country/region and city',
+				trigger: 'blur'
+			}
+		],
+		phoneNumber: [{ required: true, validator: validatePhone, trigger: 'blur' }],
+
+		designTitle: [
+			{ required: true, message: 'Please input your design title', trigger: 'blur' }
+		],
+		designDescription: [
+			{
+				required: true,
+				message: 'Please input your design description',
+				trigger: 'blur'
+			}
+		],
+		pdfPath: [{ required: true, message: 'Please upload your PDF', trigger: 'null' }],
+		videoPath: [
+			{ required: true, message: 'Please upload your video', trigger: 'null' }
 		]
 	}
 
@@ -962,8 +1001,9 @@
 		height: 1rem;
 	}
 	.apply-container {
-		min-height: calc(100% -18rem);
+		min-height: calc(100% - 18rem);
 		background-color: #f5f5f5;
+		box-sizing: border-box;
 	}
 
 	.banner {

src/views/AwardPage/components/Success.vue

@@ -1,24 +1,51 @@
 <template>
 	<div class="success-container flex flex-col align-center">
 		<img
-			src="@/assets/images/award/successful.png"
+			:src="info.icon"
 			alt=""
 			class="icon-img"
 		/>
-		<div class="title">Submission Successful</div>
+		<div class="title">{{ info.title }}</div>
 		<div class="desc">
-			<div>
+			{{ info.desc }}
+			<!-- <div>
 				Please review your submitted information in the AiDA in-platform message.
 			</div>
 			<div>
 				You may edit it if needed. Competition updates and results will be sent
 				via email.
-			</div>
+			</div> -->
 		</div>
 	</div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import successIcon from '@/assets/images/award/successful.png'
+	import expiredIcon from '@/assets/images/award/expired.png'
+	const props = defineProps({
+		isExpired: {
+			type: Boolean,
+			default: false
+		}
+	})
+
+	const info = computed(() => {
+		if (props.isExpired) {
+			return {
+				icon: expiredIcon,
+				title: 'Application Deadline Passed',
+				desc: 'The submission deadline for AIDA Global Fashion Award 2026 has ended.\nWe are no longer accepting new applications. '
+			}
+		} else {
+			return {
+				icon: successIcon,
+				title: 'Submission Successful',
+				desc: 'Please review your submitted information in the AiDA in-platform message.\nYou may edit it if needed. Competition updates and results will be sent via email.'
+			}
+		}
+	})
+</script>
 <style lang="less" scoped>
 	.success-container {
 		margin: 0 21.5rem;

src/views/AwardPage/container.vue

@@ -141,6 +141,7 @@
 		overflow: auto;
 		height: 100vh;
 		// 隐藏滚动条箭头，只显示滚动条本体
+		box-sizing: border-box;
 		&::-webkit-scrollbar {
 			display: none;
 			width: 0;
@@ -154,6 +155,7 @@
 		background-color: #232323;
 		padding-left: 21.5rem;
 		padding-right: 8.6rem;
+		box-sizing: border-box;
 		.header-left {
 			.logo {
 				width: 13rem;
@@ -176,6 +178,7 @@
 	.footer {
 		height: 10rem;
 		padding-left: 21.5rem;
+		box-sizing: border-box;
 		padding-right: 22rem;
 		background-color: #232323;
 		.social-list {

src/views/AwardPage/index.vue

@@ -55,7 +55,7 @@
 	.banner {
 		height: 108rem;
 		background: url('@/assets/images/award/banner.png') no-repeat;
-		background-size: 100% 100%;
+		background-size: cover;
 		position: relative;
 		.submit-btn {
 			width: 41rem;
@@ -63,6 +63,7 @@
 			line-height: 6.394rem;
 			text-align: center;
 			border-radius: 3.2rem;
+			background-color: rgba(35, 35, 35, 0.7);
 			box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
 				inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
 				inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
@@ -72,8 +73,8 @@
 			font-size: 2.4rem;
 			column-gap: 3.2rem;
 			position: absolute;
-			top: 23.88rem;
+			left: 42.1rem;
-			left: 51rem;
+			bottom: 15.7rem;
 			backdrop-filter: blur(5px);
 			cursor: pointer;
 			.arrow {
@@ -90,6 +91,7 @@
 				font-weight: 400;
 				font-size: 2rem;
 				line-height: 2.2rem;
+				color: #232323E5;
 			}
 		}
 	}