Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

2026-01-26 16:16:42 +08:00
parent 9cecbdcf9b a6b0a60eb6
commit 44674b5396
9 changed files with 396 additions and 160 deletions
--- a/src/assets/images/award/expired.png
+++ b/src/assets/images/award/expired.png
--- a/src/component/Detail/model/modelPosition
+++ b/src/component/Detail/model/modelPosition
@@ -28,7 +28,7 @@
 			<div class="detail_modal_item_front">
 				<img
 				style="object-fit: cover;"
-				:style="observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{'object-fit': 'contain'}"
+				:style="observerWH.width > 0?{width:observerWH.width+'px',height:observerWH.height+'px'}:{width:'100%',height:'auto','object-fit': 'contain'}"
 				 :src="designDetail.designItemUrl" alt="">
 			</div>
 		</div>
--- a/src/component/Detail/model/modelPosition.vue
+++ b/src/component/Detail/model/modelPosition.vue
@@ -219,19 +219,14 @@ export default defineComponent({
 				detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
 			});
 			const updateElementTransform = (element, rotateDeg = null) => {
-				
 				const currentTransform = element.style?.transform || '';
-				// 1. 提取当前的所有rotate
 				const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
-				// 2. 获取除镜像和rotate外的其他所有变换
 				let otherTransforms = currentTransform
-					.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
-					.replace(/rotate[XYZ]?\([^)]+\)/g, '')    // 移除rotate
+					.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '')
+					.replace(/rotate[XYZ]?\([^)]+\)/g, '')
 					.replace(/\s+/g, ' ')
 					.trim();
-				// 3. 构建新transform
 				const transforms = [];
-				// 镜像部分
 				if (element.mirror.x) transforms.push('scaleX(-1)');
 				if (element.mirror.y) transforms.push('scaleY(-1)');
 				if (otherTransforms) transforms.push(otherTransforms);
@@ -246,104 +241,85 @@ export default defineComponent({
 			moveableInstance.value.on('scale', ({ target, delta, direction }) => {
 				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
 				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
-				
-				const width = parseFloat(frontStyle.style.width);
-				const height = parseFloat(frontStyle.style.height);
+
+				let width = parseFloat(frontStyle.style.width);
+				let height = parseFloat(frontStyle.style.height);
 				let left = parseFloat(frontStyle.style.left) || 0;
 				let top = parseFloat(frontStyle.style.top) || 0;
 				let rotation = 0;
-				// 获取原始比例
+
 				const originalRatio = width / height;
 				if (frontStyle.style.transform) {
-					const transform = frontStyle.style.transform;
-					const match = transform.match(/rotate\(([-\d.]+)deg\)/);
-					if (match) {
-						rotation = parseFloat(match[1]);
-					}
+					const match = frontStyle.style.transform.match(/rotate\(([-\d.]+)deg\)/);
+					if (match) rotation = parseFloat(match[1]);
 				}
-				// 根据旋转角度重新计算控制点的方向
-				function getAdjustedCorner(originalCorner, rotationAngle) {
-					const angleRad = rotationAngle * (Math.PI / 180);
-					const cosA = Math.cos(angleRad);
-					const sinA = Math.sin(angleRad);
-					const newX = originalCorner.x * cosA - originalCorner.y * sinA;
-					const newY = originalCorner.x * sinA + originalCorner.y * cosA;
+
+				const getAdjustedCorner = (corner, rot) => {
+					const rad = rot * (Math.PI / 180);
+					const x = corner.x * Math.cos(rad) - corner.y * Math.sin(rad);
+					const y = corner.x * Math.sin(rad) + corner.y * Math.cos(rad);
 					const threshold = 0.5;
-					return {
-						x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
-						y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
-					};
-				}
-				
+					return { x: Math.abs(x) > threshold ? (x > 0 ? 1 : -1) : 0, y: Math.abs(y) > threshold ? (y > 0 ? 1 : -1) : 0 };
+				};
 				if (rotation !== 0) {
-					direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation);
+					direction = getAdjustedCorner({ x: direction[0], y: direction[1] }, rotation);
 					direction = [direction.x, direction.y];
 				}
-				
-				// 判断是否是对角线方向（需要等比缩放）
+
 				const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
-				
-				// 处理轴缩放，包含镜像翻转逻辑
-				const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
-					let newVal = val * deltaVal;
+
+				const processAxis = (axis, val, deltaVal, dir, pos, keepRatio = false, otherAxisResult = null) => {
 					const mirrorKey = axis === 'width' ? 'x' : 'y';
 					const isWidth = axis === 'width';
-					
-					// 检查是否需要镜像翻转（当值小于等于0时）
+
+					let newVal = val * deltaVal;
+
+					// 翻转处理
 					if (newVal <= 0) {
 						frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
 						newVal = Math.abs(newVal);
-						
 						updateElementTransform(frontStyle);
-						
-						// 镜像翻转后，位置需要根据原始锚点调整
-						if (dir === -1) {
-							// 从左上/右上缩放时，位置保持不变
-							return { 
-								newVal, 
-								adjustPos: originalPosition,
-								shouldFlip: true 
-							};
-						} else {
-							// 从左下/右下缩放时，位置需要调整
-							const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1);
-							return { 
-								newVal, 
-								adjustPos: newPosition,
-								shouldFlip: true 
-							};
-						}
 					}
-					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || 
-									(frontStyle.mirror[mirrorKey] && dir === 1);
+
+					// 位置调整
+					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1);
+
 					if (keepRatio && otherAxisResult) {
-						newVal = isWidth ? 
-							otherAxisResult.newVal * originalRatio : 
-							otherAxisResult.newVal / originalRatio;
+						newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio;
 					}
-					let adjustPos;
-					if (shouldMove) {
-						adjustPos = originalPosition - (newVal - originalSize);
-					} else {
-						adjustPos = originalPosition;
-					}
-					return { 
-						newVal, 
-						adjustPos,
-						shouldFlip: false
-					};
+
+					const adjustPos = shouldMove ? pos - (newVal - val) : pos;
+
+					return { newVal, adjustPos, shouldFlip: newVal !== val && newVal <= 0 };
 				};

-					// 自由缩放
-					const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
-					const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
-					
+				if (isDiagonal) {
+					const mainAxis = Math.abs(delta[0] - 1) > Math.abs(delta[1] - 1) ? 'width' : 'height';
+					const crossAxis = mainAxis === 'width' ? 'height' : 'width';
+
+					const mainDir = mainAxis === 'width' ? direction[0] : direction[1];
+					const crossDir = crossAxis === 'width' ? direction[0] : direction[1];
+
+					const mainDelta = mainAxis === 'width' ? delta[0] : delta[1];
+
+					const mainResult = processAxis(mainAxis, mainAxis === 'width' ? width : height, mainDelta, mainDir, mainAxis === 'width' ? left : top);
+					const crossResult = processAxis(crossAxis, crossAxis === 'width' ? width : height, 1, crossDir, crossAxis === 'width' ? left : top, true, mainResult);
+
+					frontStyle.style.width = mainAxis === 'width' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
+					frontStyle.style.height = mainAxis === 'height' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
+					frontStyle.style.left = mainAxis === 'width' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
+					frontStyle.style.top = mainAxis === 'height' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
+				} else {
+					const widthResult = processAxis('width', width, delta[0], direction[0], left);
+					const heightResult = processAxis('height', height, delta[1], direction[1], top);
+
 					frontStyle.style.left = widthResult.adjustPos + 'px';
 					frontStyle.style.top = heightResult.adjustPos + 'px';
 					frontStyle.style.width = widthResult.newVal + 'px';
 					frontStyle.style.height = heightResult.newVal + 'px';
-				// }
+				}
 			});
+
 			
 			// 旋转
 			moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
@@ -647,7 +623,15 @@ export default defineComponent({
 				opacity: 0;
 			}
 			:deep(.moveable-control){
+				width: 1.4rem;
+				height: 1.4rem;
 				border-radius: 0;
+				background-color: #44aaff;
+				border: 2px solid #44aaff;
+				&.moveable-ne,&.moveable-se,&.moveable-sw,&.moveable-nw{
+					border: 2px solid #44aaff;
+					background-color: #ffff;
+				}
 			}
 			:deep(.moveable-rotation-control){
 				border-radius: 50%;
--- a/src/views/AwardPage/apply.vue
+++ b/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 {
--- a/src/views/AwardPage/components/Bloom.vue
+++ b/src/views/AwardPage/components/Bloom.vue
@@ -26,13 +26,105 @@
 </template>

 <script setup lang="ts">
-		import { ref, onMounted } from 'vue'
-		import gsap from 'gsap'
+	import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+	import { gsap } from 'gsap'

-		const titleRef = ref<HTMLElement | null>(null)
-		const subtitleRef = ref<HTMLElement | null>(null)
-		const textRef = ref<HTMLElement | null>(null)
+	const titleRef = ref<HTMLElement | null>(null)
+	const subtitleRef = ref<HTMLElement | null>(null)
+	const textRef = ref<HTMLElement | null>(null)

+	const hasPlayedBloomAnim = ref(false)
+	let bloomObserver: IntersectionObserver | null = null
+
+	const setupBloomInitialState = () => {
+		const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
+		if (titleEls.length) {
+			gsap.set(titleEls, {
+				opacity: 0,
+				// start larger than final size, then animate down to scale:1
+				scale: 1.6,
+				transformOrigin: '50% 50%'
+			})
+		}
+
+		if (textRef.value) {
+			// start below and hidden
+			gsap.set(textRef.value, {
+				opacity: 0,
+				y: 60
+			})
+		}
+	}
+
+	const playBloomAnimation = () => {
+		if (hasPlayedBloomAnim.value) return
+		const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
+		const textEl = textRef.value
+		if (!titleEls.length || !textEl) return
+
+		const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+
+		tl.to(titleEls, {
+			opacity: 1,
+			scale: 1,
+			duration: 0.9,
+			ease: 'back.out(1.6)',
+			stagger: 0.12
+		})
+
+		tl.to(
+			textEl,
+			{
+				opacity: 1,
+				y: -12,
+				scale: 1.05,
+				duration: 0.3,
+				ease: 'power2.out'
+			},
+			'+=0.12'
+		)
+		tl.to(
+			textEl,
+			{
+				y: 0,
+				scale: 1,
+				duration: 0.18,
+				ease: 'bounce.out'
+			},
+			'+=0.08'
+		)
+
+		hasPlayedBloomAnim.value = true
+		bloomObserver?.disconnect()
+	}
+
+	onMounted(() => {
+		nextTick(() => {
+			setupBloomInitialState()
+			if ('IntersectionObserver' in window) {
+				bloomObserver = new IntersectionObserver(
+					(entries) => {
+						entries.forEach((entry) => {
+							if (entry.isIntersecting) {
+								playBloomAnimation()
+							}
+						})
+					},
+					{ threshold: 0.3 }
+				)
+				if (titleRef.value) {
+					bloomObserver.observe(titleRef.value)
+				}
+			} else {
+				// fallback
+				playBloomAnimation()
+			}
+		})
+	})
+
+	onBeforeUnmount(() => {
+		bloomObserver?.disconnect()
+	})

 </script>

@@ -66,3 +158,4 @@
 		}
 	}
 </style>
+
--- a/src/views/AwardPage/components/Slogan.vue
+++ b/src/views/AwardPage/components/Slogan.vue
@@ -0,0 +1,149 @@
+<template>
+	<div class="blocks-list flex" ref="root" :class="{ 'in-view': inView }">
+		<div
+			class="block-item flex flex-col flex-center"
+			v-for="(item, idx) in blocksList"
+			:key="item.number"
+			:style="{ '--delay': `${idx * 0.18}s` }"
+		>
+			<div class="number">{{ item.number }}</div>
+			<div class="label">{{ item.label }}</div>
+			<div class="line"></div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted, onUnmounted } from 'vue'
+
+	const blocksList = ref([
+		{
+			number: 'NETWORKING\n OPPORTUNITIES',
+			label: 'with international\nmedia and designers'
+		},
+		{
+			number: 'INTERNATIONAL\nMEDIA EXPOSE',
+			label: 'through\nleading outlets'
+		},
+		{
+			number: 'UP TO\nUS$9000',
+			label: 'in total prize\npool awards'
+		},
+		{
+			number: 'TRAVEL\NALLOWANCE',
+			label: 'for finalists to attend\naward ceremony'
+		}
+	])
+	const root = ref<HTMLElement | null>(null)
+	const inView = ref(false)
+	let io: IntersectionObserver | null = null
+
+	onMounted(() => {
+		io = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						// 延迟 0.5s 后触发动画并断开观察
+						setTimeout(() => {
+							inView.value = true
+						}, 500)
+						if (io) {
+							io.disconnect()
+						}
+					}
+				}
+			},
+			{ threshold: 0.05 }
+		)
+		if (root.value) {
+			io.observe(root.value)
+		}
+	})
+
+	onUnmounted(() => {
+		io?.disconnect()
+	})
+</script>
+
+<style lang="less" scoped>
+	.blocks-list {
+		height: 31.4rem;
+		background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);
+
+		.block-item {
+			flex: 1;
+			height: 100%;
+			color: #fff;
+			position: relative;
+			text-align: center;
+			white-space: pre-line;
+			row-gap: 3rem;
+			/* text scale-in animations */
+			.number {
+				font-size: 3.6rem;
+				font-family: 'PoppinsBold';
+				font-weight: 600;
+				transform: scale(0);
+				opacity: 0;
+				will-change: transform, opacity;
+			}
+			.label {
+				font-size: 2.4rem;
+				font-family: 'Arial';
+				font-weight: 400;
+				letter-spacing: 0.05em;
+				transform: scale(0);
+				opacity: 0;
+				will-change: transform, opacity;
+			}
+			/* vertical line grows top -> bottom */
+			.line {
+				position: absolute;
+				right: 0;
+				/* 固定 top 为最终高度的一半位置，这样 height 从 0 -> 27.4rem 时会从上向下增长 */
+				top: calc(50% - 13.7rem);
+				width: 0.1rem;
+				height: 0;
+				background-color: #8d8d8d;
+				will-change: height;
+			}
+		}
+	}
+
+	/* 当组件进入视口并且等待 0.5s 后，.in-view 会加入根节点，下面规则触发动画 */
+	.in-view .block-item .number {
+		animation: scaleIn 0.48s cubic-bezier(.2,.9,.2,1) forwards;
+		animation-delay: var(--delay);
+	}
+
+	.in-view .block-item .label {
+		animation: scaleIn 0.48s cubic-bezier(.2,.9,.2,1) forwards;
+		animation-delay: calc(var(--delay) + 0.12s);
+	}
+
+	.in-view .block-item .line {
+		animation: growLine 0.7s cubic-bezier(.2,.9,.2,1) forwards;
+		animation-delay: calc(var(--delay) + 0.18s);
+	}
+
+	/* keyframes */
+	@keyframes scaleIn {
+		from {
+			transform: scale(0);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	@keyframes growLine {
+		from {
+			height: 0;
+		}
+		to {
+			height: 27.4rem;
+		}
+	}
+</style>
--- a/src/views/AwardPage/components/Success.vue
+++ b/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;
--- a/src/views/AwardPage/container.vue
+++ b/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 {
--- a/src/views/AwardPage/index.vue
+++ b/src/views/AwardPage/index.vue
@@ -14,18 +14,8 @@
 				<div class="ddl">Application Deadline:15th March 2026</div>
 			</div>
 		</div>
-		<div class="blocks-list flex">
-			<div
-				class="block-item flex flex-col flex-center"
-				v-for="item in blocksList"
-				:key="item.number"
-			>
-				<div class="number">{{ item.number }}</div>
-				<div class="label">{{ item.label }}</div>
-				<div class="line"></div>
-			</div>
-		</div>

+		<Slogan />
 		<Bloom />
 		<TimeLine />
 		<JudgesSection />
@@ -44,31 +34,13 @@
 	import PrizesSection from './components/PrizesSection.vue'
 	import TimeLine from './components/TimeLine.vue'
 	import Bloom from './components/Bloom.vue'
+	import Slogan from './components/Slogan.vue'

 	const router = useRouter()

 	const handleSubmitApplication = () => {
 		router.push('/award/contestants')
 	}
-
-	const blocksList = ref([
-		{
-			number: 'NETWORKING\n OPPORTUNITIES',
-			label: 'with international\nmedia and designers'
-		},
-		{
-			number: 'INTERNATIONAL\nMEDIA EXPOSE',
-			label: 'through\nleading outlets'
-		},
-		{
-			number: 'UP TO\nUS$9000',
-			label: 'in total prize\npool awards'
-		},
-		{
-			number: 'TRAVEL\NALLOWANCE',
-			label: 'for finalists to attend\naward ceremony'
-		}
-	])
 </script>

 <style lang="less" scoped>
@@ -83,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;
@@ -91,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);
@@ -100,8 +73,8 @@
 			font-size: 2.4rem;
 			column-gap: 3.2rem;
 			position: absolute;
-			top: 23.88rem;
-			left: 51rem;
+			left: 42.1rem;
+			bottom: 15.7rem;
 			backdrop-filter: blur(5px);
 			cursor: pointer;
 			.arrow {
@@ -118,40 +91,7 @@
 				font-weight: 400;
 				font-size: 2rem;
 				line-height: 2.2rem;
-			}
-		}
-	}
-	.blocks-list {
-		height: 31.4rem;
-		background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);
-
-		.block-item {
-			flex: 1;
-			height: 100%;
-			color: #fff;
-			position: relative;
-			text-align: center;
-			white-space: pre-line;
-			row-gap: 3rem;
-			.number {
-				font-size: 3.6rem;
-				font-family: 'PoppinsBold';
-				font-weight: 600;
-			}
-			.label {
-				font-size: 2.4rem;
-				font-family: 'Arial';
-				font-weight: 400;
-				letter-spacing: 0.05em;
-			}
-			.line {
-				position: absolute;
-				bottom: 50%;
-				right: 0;
-				transform: translate(0, 50%);
-				width: 0.1rem;
-				height: 27.4rem;
-				background-color: #8d8d8d;
+				color: #232323E5;
 			}
 		}
 	}