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

2026-01-16 15:16:36 +08:00
parent 618b9bab1f 226e183f52
commit 0add8bc412
50 changed files with 1705 additions and 146 deletions
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@
   
  <link rel="stylesheet" href="/css/sloganFamily.css">
  <link rel="stylesheet" href="/css/pingfang.css">
+  <link rel="stylesheet" href="/css/fonts/fontFamily.css">
 </head>

 <body>
--- a/src/assets/fonts/ARIAL.ttf
+++ b/src/assets/fonts/ARIAL.ttf
--- a/src/assets/fonts/ARIALBD.ttf
+++ b/src/assets/fonts/ARIALBD.ttf
--- a/src/assets/fonts/ArialMdm.ttf
+++ b/src/assets/fonts/ArialMdm.ttf
--- a/src/assets/fonts/Poppins-Medium.ttf
+++ b/src/assets/fonts/Poppins-Medium.ttf
--- a/src/assets/fonts/Poppins-Regular.ttf
+++ b/src/assets/fonts/Poppins-Regular.ttf
--- a/src/assets/fonts/Poppins-SemiBold.ttf
+++ b/src/assets/fonts/Poppins-SemiBold.ttf
--- a/src/assets/fonts/fontFamily.css
+++ b/src/assets/fonts/fontFamily.css
@@ -0,0 +1,31 @@
+/* 字体定义 */
+@font-face {
+  font-family: 'Arial';
+  src: url('./fonts/ARIAL.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'ArialBold';
+  src: url('./fonts/ARIALBD.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'ArialMedium';
+  src: url('./fonts/ArialMdm.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('./fonts/Poppins-Regular.ttf') format('ttf');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'PoppinsMedium';
+  src: url('./fonts/Poppins-Medium.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'PoppinsBold';
+  src: url('./fonts/Poppins-SemiBold.ttf') format('ttf');
+}
--- a/src/assets/images/award/apply_bg.png
+++ b/src/assets/images/award/apply_bg.png
--- a/src/assets/images/award/arrow_right.png
+++ b/src/assets/images/award/arrow_right.png
--- a/src/assets/images/award/banner.png
+++ b/src/assets/images/award/banner.png
--- a/src/assets/images/award/certification_bg.png
+++ b/src/assets/images/award/certification_bg.png
--- a/src/assets/images/award/close.svg
+++ b/src/assets/images/award/close.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6144 18.7388L5.16736 4.29184C4.95412 4.0786 4.60838 4.0786 4.39514 4.29184C4.18189 4.50509 4.18189 4.85082 4.39514 5.06407L18.8421 19.5111C19.0554 19.7243 19.4011 19.7243 19.6144 19.5111C19.8276 19.2978 19.8276 18.9521 19.6144 18.7388Z" fill="#232323"/>
+<path d="M5.15908 19.5378L19.6061 5.09079C19.8193 4.87755 19.8193 4.53181 19.6061 4.31857C19.3928 4.10533 19.0471 4.10533 18.8339 4.31857L4.38685 18.7656C4.17361 18.9788 4.17361 19.3246 4.38685 19.5378C4.6001 19.751 4.94583 19.751 5.15908 19.5378Z" fill="#232323"/>
+</svg>
--- a/src/assets/images/award/code_create_logo.png
+++ b/src/assets/images/award/code_create_logo.png
--- a/src/assets/images/award/criteria_1.png
+++ b/src/assets/images/award/criteria_1.png
--- a/src/assets/images/award/criteria_2.png
+++ b/src/assets/images/award/criteria_2.png
--- a/src/assets/images/award/criteria_3.png
+++ b/src/assets/images/award/criteria_3.png
--- a/src/assets/images/award/criteria_4.png
+++ b/src/assets/images/award/criteria_4.png
--- a/src/assets/images/award/criteria_bg.png
+++ b/src/assets/images/award/criteria_bg.png
--- a/src/assets/images/award/desmond.png
+++ b/src/assets/images/award/desmond.png
--- a/src/assets/images/award/diego.png
+++ b/src/assets/images/award/diego.png
--- a/src/assets/images/award/facebook.svg
+++ b/src/assets/images/award/facebook.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="20" height="20" rx="2.79453" fill="url(#pattern0_226_198)"/>
+<defs>
+<pattern id="pattern0_226_198" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_226_198" transform="scale(0.0104167)"/>
+</pattern>
+<image id="image0_226_198" width="96" height="96" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
--- a/src/assets/images/award/first_bg.png
+++ b/src/assets/images/award/first_bg.png
--- a/src/assets/images/award/grand_bg.png
+++ b/src/assets/images/award/grand_bg.png
--- a/src/assets/images/award/gregory.png
+++ b/src/assets/images/award/gregory.png
--- a/src/assets/images/award/jae.png
+++ b/src/assets/images/award/jae.png
--- a/src/assets/images/award/judges_bg.png
+++ b/src/assets/images/award/judges_bg.png
--- a/src/assets/images/award/linkdin.svg
+++ b/src/assets/images/award/linkdin.svg
@@ -0,0 +1,10 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_226_195)">
+<path d="M-0.00195312 1.4335C-0.00195312 0.641696 0.656004 0 1.46782 0H18.5422C19.354 0 20.0119 0.641696 20.0119 1.4335V18.5804C20.0119 19.3722 19.354 20.0139 18.5422 20.0139H1.46782C0.656004 20.0139 -0.00195312 19.3722 -0.00195312 18.5804V1.4335ZM6.18109 16.7541V7.71661H3.17776V16.7541H6.18109ZM4.68005 6.482C5.72703 6.482 6.37873 5.78902 6.37873 4.92092C6.35996 4.03405 5.72828 3.35983 4.70006 3.35983C3.67185 3.35983 3.00013 4.0353 3.00013 4.92092C3.00013 5.78902 3.65183 6.482 4.66003 6.482H4.68005ZM10.8193 16.7541V11.7069C10.8193 11.4367 10.8393 11.1665 10.9194 10.9739C11.1358 10.4347 11.6299 9.87561 12.4605 9.87561C13.5475 9.87561 13.9815 10.7037 13.9815 11.9195V16.7541H16.9848V11.5705C16.9848 8.79361 15.5038 7.50271 13.5274 7.50271C11.9338 7.50271 11.2196 8.37832 10.8193 8.995V9.02627H10.7993L10.8193 8.995V7.71661H7.81723C7.85475 8.5647 7.81723 16.7541 7.81723 16.7541H10.8193Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_226_195">
+<rect width="20.0139" height="20.0139" rx="1.55252" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/images/award/point.png
+++ b/src/assets/images/award/point.png
--- a/src/assets/images/award/prizes_bg.png
+++ b/src/assets/images/award/prizes_bg.png
--- a/src/assets/images/award/second_bg.png
+++ b/src/assets/images/award/second_bg.png
--- a/src/assets/images/award/selection_bg.png
+++ b/src/assets/images/award/selection_bg.png
--- a/src/assets/images/award/tiktok.svg
+++ b/src/assets/images/award/tiktok.svg
--- a/src/assets/images/award/tim.png
+++ b/src/assets/images/award/tim.png
--- a/src/assets/images/award/timeline_line.png
+++ b/src/assets/images/award/timeline_line.png
--- a/src/assets/images/award/vincenzo.png
+++ b/src/assets/images/award/vincenzo.png
--- a/src/assets/images/award/weichat.svg
+++ b/src/assets/images/award/weichat.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_226_203)">
+<path d="M20 17C20 18.6569 18.6569 20 17 20H3C1.34307 20 0 18.6569 0 17V3C0 1.34313 1.34313 0 3 0H17C18.6569 0 20 1.34313 20 3V17Z" fill="white"/>
+<path d="M13.3881 7.45803C11.7739 7.54236 10.3702 8.03169 9.2306 9.13723C8.0792 10.2542 7.55366 11.6228 7.69726 13.3195C7.06633 13.2414 6.49166 13.1554 5.91373 13.1067C5.71413 13.0899 5.47726 13.1138 5.3082 13.2092C4.747 13.5258 4.20906 13.8834 3.57133 14.282C3.68833 13.7528 3.76406 13.2894 3.89813 12.8437C3.99673 12.5161 3.95106 12.3338 3.64926 12.1204C1.71153 10.7523 0.894728 8.70496 1.50599 6.59703C2.07153 4.64703 3.46033 3.46443 5.3474 2.84796C7.92313 2.00663 10.8177 2.86483 12.3839 4.90976C12.9495 5.64843 13.2964 6.47749 13.3881 7.45803ZM5.95893 6.80123C5.9738 6.41569 5.63973 6.06836 5.24293 6.05676C4.83666 6.04483 4.50253 6.35529 4.49066 6.75563C4.47866 7.16136 4.789 7.48649 5.1982 7.49689C5.60386 7.50716 5.94393 7.19629 5.95893 6.80123ZM9.835 6.05649C9.43673 6.06383 9.1002 6.40303 9.10726 6.79009C9.11453 7.19129 9.44466 7.50516 9.8542 7.50023C10.2648 7.49529 10.5762 7.17809 10.5723 6.76843C10.5689 6.36629 10.2403 6.04909 9.835 6.05649Z" fill="#232323"/>
+<path d="M17.0146 17.5216C16.5035 17.294 16.0346 16.9525 15.5354 16.9004C15.0381 16.8484 14.5154 17.1353 13.9951 17.1885C12.4104 17.3506 10.9907 16.909 9.82001 15.8264C7.59355 13.767 7.91168 10.6094 10.4876 8.92184C12.777 7.42197 16.1345 7.92197 17.7487 10.0031C19.1573 11.8191 18.9917 14.2298 17.2721 15.7554C16.7745 16.1969 16.5955 16.5602 16.9148 17.1423C16.9737 17.2498 16.9804 17.3858 17.0146 17.5216ZM11.1963 11.8883C11.5217 11.8886 11.7897 11.634 11.802 11.3126C11.815 10.9723 11.5413 10.6869 11.2006 10.6855C10.8632 10.684 10.5806 10.9734 10.5924 11.3086C10.6035 11.6288 10.8733 11.8879 11.1963 11.8883ZM14.9471 10.6868C14.6314 10.6846 14.3631 10.9431 14.3502 11.2621C14.3365 11.6032 14.6017 11.8834 14.9393 11.8842C15.2658 11.8854 15.5239 11.6384 15.5357 11.3134C15.5483 10.9715 15.2831 10.6892 14.9471 10.6868Z" fill="#232323"/>
+</g>
+<defs>
+<clipPath id="clip0_226_203">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/images/award/xiaohongshu.svg
+++ b/src/assets/images/award/xiaohongshu.svg
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -2488,3 +2488,22 @@ textarea:focus {
  background: #ffffff;
  color: #000;
 }
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
+.align-center {
+  align-items: center;
+}
+.space-between {
+  justify-content: space-between;
+}
+.justify-center {
+  justify-content: center;
+}
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -2406,3 +2406,22 @@ textarea:focus{
 		color: #000;
 	}
 }
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
+.align-center {
+  align-items: center;
+}
+.space-between {
+  justify-content: space-between;
+}
+.justify-center {
+  justify-content: center;
+}
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -85,7 +85,7 @@
 						" alt="">
 					</div>
 					<div class="contentRight" v-else-if="currentDetailType && !isEditPattern.value">
-						<detailRight ref="detailRight"></detailRight>
+						<detailRight ref="detailRight" :sketchSize="sketchSize"></detailRight>
 						<div class="btn" 
 							v-show="
 								currentDetailType !== 'color' &&
@@ -101,7 +101,7 @@
 						</div>
 					</div>
 					<div class="contentRight canvas" v-if="selectDetail && selectDetail.id && currentDetailType" :class="{'active': isEditPattern.value}">
-						<canvasBox ref="canvasBox" :key="canvasKey" @setSloganData="setSloganData" :isEditPattern="isEditPattern.value" :updateOtherLayers="updateOtherLayers"></canvasBox>
+						<canvasBox ref="canvasBox" :key="canvasKey" :sketchSize="sketchSize" @setSloganData="setSloganData" :isEditPattern="isEditPattern.value" :updateOtherLayers="updateOtherLayers"></canvasBox>
 					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -170,13 +170,29 @@ export default defineComponent({
 			},
 			positionKey:0,
 			detailLeftColorKey:0,
+			sketchSize:{
+				width:0,
+				height:0,
+			}
 		})
-		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
+		const getSketchSize:any = async ()=>{
+			let img = new Image();
+			img.src = detailData.selectDetail.path;	
+			await new Promise((resolve, reject) => {
+				img.onload = () => {
+					detailData.sketchSize.width = img.width
+					detailData.sketchSize.height = img.height
+					resolve([img.width, img.height]);
+				}
+				img.onerror = reject;
+			});
+		}
+		watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
+			if(newValue)await getSketchSize()
 			detailData.canvasKey += 1
 			// privewDetail(oldValue)
 		},{immediate: true})
-
 		provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
 		provide('singleOveral',detailData.singleOveral)
 		provide('isEditPattern',detailData.isEditPattern)
@@ -342,25 +358,6 @@ export default defineComponent({
 					detailData.selectDetail.maskUrl = ''
 					detailData.selectDetail.maskMinioUrl = ''
 				}
-				function isNetworkPath(str) {
-					if (typeof str !== 'string' || str.trim() === '') {
-					return false;
-					}
-					const urlPatterns = [
-					/^https?:\/\//i,           // http:// 或 https://
-					/^ftp:\/\//i,              // ftp://
-					/^ws:\/\//i,               // ws://
-					/^wss:\/\//i,              // wss://
-					/^\/\//,                   // 协议相对路径 //example.com
-					/^data:/i,                 // data:image/png;base64,...（这是Base64，不是网络路径）
-					];
-					// 排除data:URL（这实际上是Base64）
-					if (str.startsWith('data:')) {
-						return false;
-					}
-
-					return urlPatterns.some(pattern => pattern.test(str));
-				}
 				const printObjectToJSON = (list:any)=>{
 					if(list?.length > 0){
 						list.forEach((item:any)=>{
@@ -398,8 +395,11 @@ export default defineComponent({
 					trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
 					accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
 				}
-				data.printObject.prints = printObjectToJSON(data.printObject.prints)
-				data.trims.prints = printObjectToJSON(data.trims.prints)
+				if(!data.partialDesign.partialDesignMinioPath){
+					data.partialDesign.partialDesignMinioPath = data.path
+				}
+				printObjectToJSON(data.printObject.prints)
+				printObjectToJSON(data.trims.prints)
 				if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
 					gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
 					gradient.colorImg = await setGradual(gradient,320,700)
@@ -428,7 +428,7 @@ export default defineComponent({
 				sketchString:'',
 				modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
 				modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
-				designType:detailData.selectDetail.id?'merage':'default',
+				designType:detailData.selectDetail.id?'merge':'default',
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				processId:userDetail.value.userId,
 				probjectId:store.state.Workspace.probjects.id,
@@ -463,7 +463,7 @@ export default defineComponent({
 				sketchString:'',
 				modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
 				modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
-				designType:detailData.selectDetail.id?'merage':'default',
+				designType:detailData.selectDetail.id?'merge':'default',
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				processId:userDetail.value.userId,
 				probjectId:store.state.Workspace.probjects.id,
@@ -596,7 +596,7 @@ export default defineComponent({
 			if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
 			if(str == 'all'){
 				otherData = {
-					color: detailData.selectDetail.newDetail?.color.r?detailData.selectDetail.newDetail?.color:detailData.selectDetail.color,
+					color: detailData.selectDetail.newDetail?.color?.r?detailData.selectDetail.newDetail?.color:detailData.selectDetail.color,
 					printObject: detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null,
 					trims: detailData.selectDetail.newDetail?.element?.length>0?detailData.selectDetail.newDetail?.element:detailData.selectDetail.trims || null,
 				}	
@@ -619,7 +619,7 @@ export default defineComponent({
 					}
 				}
 				if(detailData.currentDetailType == 'print'){
-					otherData.printObject = {prints:detailData.selectDetail.newDetail?.print}
+					otherData.printObject = detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null
 				}
 				if(detailData.currentDetailType == 'element'){
 					otherData.trims = detailData.selectDetail.newDetail?.element
--- a/src/component/Detail/canvas/index.vue
+++ b/src/component/Detail/canvas/index.vue
@@ -13,8 +13,6 @@
 							:clothingImageUrl="selectDetail.path"
 							:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
 							showFixedLayer
-							:width="sketchWidth"
-							:height="sketchHeight"
 							:canvasJSON="canvasJSON"
 							@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
 							:clothing-image-opts="{
@@ -81,7 +79,11 @@ export default defineComponent({
 		updateOtherLayers:{
 			type:Function,
 			default:()=>{}
-		}
+		},
+		sketchSize:{
+			type:Object,
+			default:()=>{}
+		},
 	},
    setup(props,{emit}) {
        const store = useStore();
@@ -121,8 +123,6 @@ export default defineComponent({
 				printObject: store.state.DesignDetail.selectDetail.printObject,
 				trims: store.state.DesignDetail.selectDetail.trims,
 			})),
-			sketchWidth:0,
-			sketchHeight:0,
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -177,7 +177,11 @@ export default defineComponent({
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
 			// if(!detailDom.editCanvas)return
 			return new Promise(async (res,reject)=>{
-				await detailDom.editCanvas.exportImage({isContainFixed:true}).then((rv)=>{
+				await detailDom.editCanvas.exportImage({
+					isContainFixed:true,
+					width:props.sketchSize.width,
+					height:props.sketchSize.height,
+				}).then((rv)=>{
 					if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
 				})
 				//包含平铺图层 single+overall模式的图
@@ -188,6 +192,7 @@ export default defineComponent({
 				// await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
 				// 	oldSelectDetail.undividedLayer = rv
 				// })
+				await setUndivideLayer()
 				res('')
 			})
 		}
@@ -203,11 +208,14 @@ export default defineComponent({
 				let img = new Image()
 				img.onload = ()=>{
 					let wH = [1,1]
-					let domHeight = detailDom.canvasContent.offsetHeight - 200
+					let domHeight = detailDom.canvasContent?.offsetHeight - 200
 					let imgHeight = img.height
 					wH = [1,domHeight/imgHeight]
-					detailData.canvasConfig.width = img.width * wH[1]
-					detailData.canvasConfig.height = domHeight
+					// detailData.canvasConfig.width = img.width * wH[1]
+					// detailData.canvasConfig.height = domHeight
+					console.log(detailData.canvasConfig,'===============')
+					detailData.canvasConfig.width = img.width
+					detailData.canvasConfig.height = img.height

 					res('')
 				}
@@ -335,34 +343,45 @@ export default defineComponent({
 		// }
 		const canvasLoadJsonSuccess = async ()=>{
 			let otherData = await props.updateOtherLayers()
-			updateOtherLayers(otherData)
-			if(!detailData.selectDetail.undividedLayerColor){
-				await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsRepeat:false,isPrintTrimsNoRepeat:false,isContainNormalLayer:false}).then((rv)=>{
-					detailData.selectDetail.undividedLayerColor = rv
-				})
-			}
-			if(!detailData.selectDetail.undividedLayer){
-				await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
-					detailData.selectDetail.undividedLayer = rv
-				})
-			}
+
+			await updateOtherLayers(otherData)
+			await setUndivideLayer()
+		}
+		const setUndivideLayer = async ()=>{
+			await new Promise<void>(async (resolve, reject) => {
+				// if(!detailData.selectDetail.undividedLayerColor){
+					await detailDom.editCanvas.exportImage({
+						isContainFixed:true,
+						isPrintTrimsRepeat:false,
+						isPrintTrimsNoRepeat:false,
+						isContainNormalLayer:false,
+						width:props.sketchSize.width,
+						height:props.sketchSize.height}).then((rv)=>{
+						detailData.selectDetail.undividedLayerColor = rv
+					})
+				// }
+				// if(!detailData.selectDetail.undividedLayer){
+					await detailDom.editCanvas.exportImage({
+						isContainFixed:true,
+						isPrintTrimsNoRepeat:false,
+						isPrintTrimsRepeat:true,
+						isContainNormalLayer:false,
+						width:props.sketchSize.width,
+						height:props.sketchSize.height,
+					}).then((rv)=>{
+						console.log(rv,'======')
+						detailData.selectDetail.undividedLayer = rv
+					})
+				// }
+				resolve()
+			})
+			
 		}

 		const submitBase64Data = ()=>{
 			return detailDom.generalMiniCanvas.submitBase64Data()
 		}
-		const sketchSize:any = async ()=>{
-			let img = new Image();
-			img.src = detailData.selectDetail.path;	
-			await new Promise((resolve, reject) => {
-				img.onload = () => {
-					detailData.sketchWidth = img.width
-					detailData.sketchHeight = img.height
-					resolve([img.width, img.height]);
-				}
-				img.onerror = reject;
-			});
-		}
+	
 		onBeforeUnmount(()=>{
 			let front = detailData.frontBack.front[detailData.imgDomIndex]
 			let back = detailData.frontBack.back[detailData.imgDomIndex]
@@ -403,7 +422,6 @@ export default defineComponent({
 						});
 					})
 				}
-				await sketchSize()
 				setCanvas(detailData.selectDetail.path).then(()=>{
 					detailData.canvasLoad = true
 				})
--- a/src/component/Detail/detailRight/editPrintElement.vue
+++ b/src/component/Detail/detailRight/editPrintElement.vue
@@ -110,7 +110,7 @@
 						</ul> -->
 					</div>
 					<div class="designOpenrtion_pingpu" v-else>
-						<pingpu :list="printStyleList[type].overall" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
+						<pingpu :list="printStyleList[type].overall" :width="sketchSize.width" :height="sketchSize.height" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
 					</div>
 				</div>
 			</div>
@@ -141,7 +141,11 @@ export default defineComponent({
 		type: {
 		    type: String,
 			default: 'print',
-		}
+		},
+		sketchSize:{
+			type:Object,
+			default:()=>{}
+		},
 	},
    setup(props,{emit}) {
 		const { t } = useI18n()
@@ -273,7 +277,7 @@ export default defineComponent({
 					let x = Number(style.left.replace(/px/g,''))
 					let y = Number(style.top.replace(/px/g,''))
 					location = [(x*sketchWH[0]) ,(y*sketchWH[1])]
-					scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
+					scale = item.scale
 					// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
 					// location = [item.pattern.style.left,item.pattern.style.top]
 				}
@@ -352,18 +356,9 @@ export default defineComponent({
 			}
 			editPrintElementData.printZIndex++
 			item.pattern = pattern
-			function isJSONString(str) {
-				try {
-					JSON.parse(str);
-					return true;  // 解析成功，是有效的JSON字符串
-				} catch (e) {
-					return false; // 解析失败，不是有效的JSON字符串
-				}
-			}
+			
 			if(item.object){
-				if(isJSONString(item.object)){
-					item.object = JSON.parse(item.object)
-				}
+				
 			}else{
 				item.object = {
 					top: 0,
@@ -916,6 +911,7 @@ export default defineComponent({
 		}
 		const inputFillScale = (scale:any)=>{
 			let arr = editPrintElementData.printStyleList[props.type].overall
+			console.log(arr,scale,editPrintElementData.imgDomIndex)
 			arr[editPrintElementData.imgDomIndex].scale = [scale,scale]
 			editPrintElementDom.pingpuRef.updataList([
 				{
@@ -1104,7 +1100,10 @@ export default defineComponent({
 		.habit_System_Designer {
 			align-items: center;
 			display: flex;
-			justify-content: center;
+			justify-content: flex-end;
+			margin-top: 1.8rem;
+			margin-right: .8rem;
+
 			.ant-slider-track,
 			.ant-slider-rail {
 				background-color: #e1e1e1;
--- a/src/component/Detail/detailRight/index.vue
+++ b/src/component/Detail/detailRight/index.vue
@@ -6,8 +6,8 @@
 		</div> -->
 		<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
 		<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
-		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
-		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
+		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print" :sketchSize="sketchSize"></editPrintElement>
+		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element" :sketchSize="sketchSize"></editPrintElement>
 		<modelsType ref="modelsType" v-if="currentDetailType === 'models'"></modelsType>
    </div>
    
@@ -24,6 +24,12 @@ export default defineComponent({
    components:{
 		sketchType,printType,editPrintElement,modelsType
    },
+	props:{
+		sketchSize:{
+			type:Object,
+			default:()=>{}
+		},
+	},
    setup(props,{emit}) {
        const store = useStore();
 		const detailData = reactive({
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -424,7 +424,19 @@ const routes: Array<RouteRecordRaw> = [
    meta: {
      enter: "all",
    },
-    component: () => import("@/views/AwardPage/index.vue"),
+    component: () => import("@/views/AwardPage/container.vue"),
+    children:[
+      {
+        path:'index',
+        name:'AwardIndex',
+        component:()=>import('@/views/AwardPage/index.vue')
+      },
+      {
+        path:'apply',
+        name:'Apply',
+        component:()=>import('@/views/AwardPage/apply.vue')
+      }
+    ]
  },
  {
    path: "/:catchAll(.*)",
--- a/src/store/Detail/designDetail.ts
+++ b/src/store/Detail/designDetail.ts
@@ -54,6 +54,25 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 			data.clothes.forEach((v:any,index:any)=>{
 				// if(!v?.partialDesignDTO){
 				// }
+				function isJSONString(str) {
+					try {
+						JSON.parse(str);
+						return true;  // 解析成功，是有效的JSON字符串
+					} catch (e) {
+						return false; // 解析失败，不是有效的JSON字符串
+					}
+				}
+				v?.printObject?.prints?.forEach((item:any) => {
+					console.log(item.object)
+					if(isJSONString(item.object)){
+						item.object = JSON.parse(item.object)
+					}
+				});
+				v?.trims?.prints?.forEach((item:any) => {
+					if(isJSONString(item.object)){
+						item.object = JSON.parse(item.object)
+					}
+				});
 				for (let i = v.layersObject.length-1; i >= 0; i--) {
 					v.layersObject[i].style = {
 						top:v.layersObject[i].position?.[0],
--- a/src/views/AwardPage/apply.vue
+++ b/src/views/AwardPage/apply.vue
@@ -0,0 +1,437 @@
+<template>
+  <div class="apply-container">
+    <div class="banner">
+      <div class="slogan">BLOOM YOUR CREATIVITY • AiDA GLOBAL FASHION AWARD 2026</div>
+      <div class="title">Application Form</div>
+      <div class="form-header">
+        <div class="form-title">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" @click="handleSendCode">Send Code</div>
+              </div>
+              <div class="tips">
+                Please use the email address you registered with AiDA.
+              </div>
+            </a-form-item>
+          </div>
+
+          <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>
+        </a-form>
+      </div>
+    </div>
+    <a-modal
+      v-model:visible="posi"
+      :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">Check your email</div>
+        <div class="desc">Enter the 6-digital code sent to</div>
+        <div class="email">{{ form.email }}</div>
+        <VerificationCodeInput
+          ref="codeInputRef"
+          @complete="onCodeComplete"
+          @change="onCodeChange"
+        />
+        <div class="verify-btn" @click="handleVerifyCode">Verify</div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { debounce } from 'lodash-es'
+import type { Rule } from 'ant-design-vue/es/form'
+import { message } from 'ant-design-vue'
+import VerificationCodeInput from './components/VerificationCodeInput.vue'
+
+const formRef = ref(null)
+const form = ref({
+  email: '123@qq.com',
+  firstName: '',
+  lastName: '',
+  gender: '',
+  occupation: '',
+  age: '',
+  counterOrRegion: '',
+  phone: '',
+  portfoilo: '',
+  // code: '',
+  title: '',
+  description: '',
+  pdfFile: null,
+  videoFile: null
+})
+
+// 验证码输入组件引用
+const codeInputRef = 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, value) => {
+  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: 'Email Address',
+    required: true,
+    type: 'button',
+    key: 'email',
+    tips: 'Please use the same email address you registered with AiDA.'
+  },
+  {
+    label: 'Portfoilo Website/Instagram(Optional)',
+    required: false,
+    type: 'input',
+    key: 'portfoilo'
+  },
+  {
+    label: 'Email Verification Code',
+    required: true,
+    type: 'input',
+    key: 'code',
+    tips: 'Please enter a 6-digit numerical code.'
+  }
+])
+
+const posi = ref(true)
+const handleSendCode = debounce(async () => {
+  try {
+    await formRef.value.validateFields(['email'])
+    // TODO: 发送验证码的逻辑
+    message.success('Verification code sent successfully!')
+    posi.value = true
+  } catch (error) {
+    // 校验失败时，错误消息会自动显示在表单项下方
+    // console.log('Validation failed:', error)
+  }
+}, 300)
+
+// 验证码输入事件处理
+const onCodeComplete = (code: string) => {
+  console.log('Verification code completed:', code)
+  // 可以在这里处理验证码完成逻辑
+}
+
+const onCodeChange = (code: string) => {
+  console.log('Verification code changed:', code)
+  // 可以在这里处理验证码变化逻辑
+}
+
+const handleCloseModal = () => {
+  posi.value = false
+  codeInputRef.value?.reset()
+}
+
+const handleVerifyCode = () => {
+  const code = codeInputRef.value?.getCode() || ''
+  if (code.length !== 6) {
+    message.error('Please enter the complete 6-digit verification code')
+    return
+  }
+
+  // TODO: 验证验证码的逻辑
+  console.log('Verification code:', code)
+  message.success('Verification successful!')
+
+  // 关闭模态框
+  posi.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.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-family: 'PoppinsMedium';
+    font-weight: 500;
+    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-family: 'PoppinsBold';
+      font-weight: 600;
+      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;
+    .ant-form {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 4rem;
+      .ant-form-item {
+        width: 66.5rem;
+
+        :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;
+        }
+      }
+    }
+    .email-box {
+      :deep(.ant-input) {
+        border: none !important;
+        &:focus {
+          box-shadow: none;
+        }
+      }
+      .email-wrapper {
+        border-radius: 0.8rem;
+        border: 0.2rem solid #d5d5d5;
+      }
+      .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;
+      }
+    }
+    .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;
+}
+.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-family: 'PoppinsBold';
+    font-weight: 600;
+    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;
+  }
+  .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;
+  }
+}
+</style>
+<style lang="less">
+.code-modal {
+  .ant-modal-content .ant-modal-body {
+    padding: 0;
+    // width: 60rem;
+  }
+}
+</style>
--- a/src/views/AwardPage/components/VerificationCodeInput.vue
+++ b/src/views/AwardPage/components/VerificationCodeInput.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="verification-code-input">
+          <input
+            v-for="(code, index) in verificationCode"
+            :key="index"
+            type="text"
+            :value="verificationCode[index]"
+            ref="inputRefs"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            :disabled="loading"
+            @input="(e) => onCodeInput(e, index)"
+            @paste="(e) => onCodePaste(e, index)"
+            @keydown="(e) => onCodeKeydown(e, index)"
+            @keypress="(e) => onCodeKeypress(e)"
+            @focus="onCodeFocus"
+            class="code-input"
+          />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+
+interface Props {
+  loading?: boolean
+}
+
+interface Emits {
+  (e: 'complete', code: string): void
+  (e: 'change', code: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+})
+
+const emit = defineEmits<Emits>()
+
+// 验证码输入相关
+const verificationCode = ref(['', '', '', '', '', ''])
+const inputRefs = ref<HTMLInputElement[]>([])
+
+// 验证码输入相关方法
+const onCodeInput = (e: Event, index: number) => {
+  const input = e.target as HTMLInputElement
+  const val = input.value
+  const cleanVal = String(val).replace(/\D/g, '')
+
+  // 检查是否已经输入了5位数字（不包括当前正在输入的第6位）
+  const filledCount = verificationCode.value.filter(v => v !== '').length
+  const isAlmostComplete = filledCount >= 5
+
+  // 如果已经输入了5位数字，检查当前输入是否会导致超过6位
+  if (isAlmostComplete && cleanVal.length === 1 && verificationCode.value[index] === '') {
+    // 如果当前输入框是空的，说明这是第6位输入，允许
+    // 如果当前输入框有值，说明是替换，不允许
+    // 这里我们允许输入，但会在设置后检查
+  }
+
+  // 只处理单个字符输入，粘贴由 paste 事件处理
+  if (cleanVal.length === 1) {
+    verificationCode.value[index] = cleanVal
+
+    // 自动跳转到下一个输入框（只有在还没到第6个时）
+    if (index < 5) {
+      nextTick(() => {
+        inputRefs.value[index + 1]?.focus()
+      })
+    }
+
+    // 发出变化事件
+    const finalCode = verificationCode.value.join('')
+    emit('change', finalCode)
+
+    // 如果完成了6位，发出完成事件
+    if (finalCode.length === 6) {
+      emit('complete', finalCode)
+    }
+  } else if (cleanVal.length === 0) {
+    // 处理删除
+    verificationCode.value[index] = ''
+    emit('change', verificationCode.value.join(''))
+  }
+  // 如果是多个字符，可能是粘贴，由 paste 事件处理，这里不做处理
+}
+
+const onCodePaste = (e: ClipboardEvent, index: number) => {
+  e.preventDefault()
+
+  // 检查是否已经输入了6位数字
+  const currentCode = verificationCode.value.join('')
+  if (currentCode.length === 6) {
+    return // 如果已经完成，不允许粘贴
+  }
+
+  const pasteData = (e.clipboardData || (window as any).clipboardData).getData('text')
+  const cleanData = pasteData.replace(/\D/g, '') // 只保留数字
+
+  if (cleanData.length === 0) return
+
+  console.log('Paste detected:', cleanData)
+
+  // 从当前输入框开始填充
+  for (let i = 0; i < Math.min(cleanData.length, 6 - index); i++) {
+    verificationCode.value[index + i] = cleanData[i]
+  }
+
+  // 移动焦点到下一个空白输入框
+  const nextEmptyIndex = verificationCode.value.findIndex((val, i) => i >= index && val === '')
+  if (nextEmptyIndex !== -1) {
+    nextTick(() => {
+      inputRefs.value[nextEmptyIndex]?.focus()
+    })
+  } else {
+    nextTick(() => {
+      inputRefs.value[5]?.focus()
+    })
+  }
+
+  // 发出完成事件
+  emit('complete', verificationCode.value.join(''))
+  emit('change', verificationCode.value.join(''))
+}
+
+const onCodeKeydown = (e: KeyboardEvent, index: number) => {
+  // 处理删除键
+  if (e.key === 'Backspace') {
+    const input = e.target as HTMLInputElement
+    const val = input.value
+
+    if (val === '') {
+      // 当前输入框为空，删除上一个输入框的值
+      if (index > 0) {
+        verificationCode.value[index - 1] = ''
+        nextTick(() => {
+          inputRefs.value[index - 1]?.focus()
+        })
+        emit('change', verificationCode.value.join(''))
+      }
+    } else {
+      // 当前输入框有值，清空当前输入框
+      verificationCode.value[index] = ''
+      emit('change', verificationCode.value.join(''))
+    }
+  }
+
+  // 阻止其他非数字字符（除了允许的控制键）
+  else if (
+    e.key &&
+    !/[0-9]/.test(e.key) &&
+    ![
+      'Backspace',
+      'Delete',
+      'Tab',
+      'Enter',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'ArrowDown'
+    ].includes(e.key)
+  ) {
+    e.preventDefault()
+  }
+}
+
+const onCodeKeypress = (e: KeyboardEvent) => {
+  // 检查是否已经输入了6位数字
+  const currentCode = verificationCode.value.join('')
+  if (currentCode.length === 6) {
+    e.preventDefault() // 如果已经完成，阻止任何按键输入
+    return
+  }
+
+  // 只允许输入数字0-9
+  const char = String.fromCharCode(e.which || (e as any).keyCode)
+  if (!/[0-9]/.test(char)) {
+    e.preventDefault()
+  }
+}
+
+const onCodeFocus = () => {
+  // 聚焦到第一个空白输入框
+  const index = verificationCode.value.findIndex(item => item === '')
+  const focusIndex = index === -1 ? 5 : index
+  nextTick(() => {
+    inputRefs.value[focusIndex]?.focus()
+  })
+}
+
+// 暴露给父组件的方法
+const reset = () => {
+  verificationCode.value = ['', '', '', '', '', '']
+  nextTick(() => {
+    inputRefs.value[0]?.focus()
+  })
+}
+
+const getCode = () => {
+  return verificationCode.value.join('')
+}
+
+defineExpose({
+  reset,
+  getCode,
+  verificationCode
+})
+</script>
+
+<style scoped lang="less">
+.verification-code-input {
+  display: flex;
+  column-gap: 1.2rem;
+
+  .code-input {
+    width: 5rem;
+    height: 5rem;
+    border: 0.15rem solid #d5d5d5;
+    border-radius: 0.8rem;
+    text-align: center;
+    font-size: 2rem;
+    line-height: 5rem;
+    outline: none;
+    transition: border-color 0.2s;
+
+    &:focus {
+      border-color: #232323;
+    }
+
+    &:disabled {
+      background-color: #f5f5f5;
+      color: #999;
+    }
+  }
+}
+</style>
--- a/src/views/AwardPage/container.vue
+++ b/src/views/AwardPage/container.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="award-container">
+    <div class="header flex align-center space-between">
+      <div class="header-left">
+        <img src="@/assets/images/award/code_create_logo.png" class="logo" />
+      </div>
+      <div class="header-right flex align-center">
+        <div class="text">Submit your Application</div>
+        <img src="@/assets/images/award/arrow.png" alt="" class="arrow" />
+      </div>
+    </div>
+    <RouterView />
+    <div class="footer flex space-between align-center">
+      <div class="social-list flex">
+        <a href="https://xhslink.com/m/5Ony2FapizV" target="_blank">
+          <img src="@/assets/images/award/xiaohongshu.svg" alt="" />
+        </a>
+        <a href="https://www.linkedin.com/company/code-create-limited" target="_blank">
+          <img src="@/assets/images/award/linkdin.svg" alt="" />
+        </a>
+        <a href="https://www.facebook.com/CodeCreateAI" target="_blank">
+          <img src="@/assets/images/award/facebook.svg" alt="" />
+        </a>
+        <a href="https://www.tiktok.com/@aida_codecreate" target="_blank">
+          <img src="@/assets/images/award/tiktok.svg" alt="" />
+        </a>
+        <a href="https://www.tiktok.com/@aida_codecreate" target="_blank">
+          <img src="@/assets/images/award/weichat.svg" alt="" />
+        </a>
+      </div>
+      <div class="copyright">© Code-Create 2026</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped>
+.award-container {
+  overflow: auto;
+  height: 100vh;
+  // 隐藏滚动条箭头，只显示滚动条本体
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.header {
+  height: 8rem;
+  background-color: #232323;
+  padding-left: 21.5rem;
+  padding-right: 8.6rem;
+  .header-left {
+    .logo {
+      width: 13rem;
+      height: 5rem;
+    }
+  }
+  .header-right {
+    column-gap: 1rem;
+    .text {
+      font-size: 1.6rem;
+      color: #fff;
+    }
+    .arrow {
+      width: 2.4rem;
+      height: 2.4rem;
+    }
+  }
+}
+.footer {
+  height: 10rem;
+  padding-left: 21.5rem;
+  padding-right: 22rem;
+  background-color: #232323;
+  .social-list {
+    column-gap: 2rem;
+    img {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+  .copyright {
+    color: #fff;
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 1.2rem;
+  }
+}
+</style>
--- a/src/views/AwardPage/index.vue
+++ b/src/views/AwardPage/index.vue
@@ -1,15 +1,12 @@
 <template>
  <div class="award-page">
-    <div class="header flex align-center space-between">
-      <div class="header-left">
-        <img src="@/assets/images/award/code_create_logo.png" class="logo" />
-      </div>
-      <div class="header-right flex align-center">
-        <div class="text">Submit your Application</div>
-        <img src="@/assets/images/award/arrow.png" alt="" class="arrow" />
+    <div class="banner">
+      <div class="submit-btn flex flex-center" @click="handleSubmitApplication">
+        <div>Submit your Application</div>
+        <img src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
+        <div class="ddl">Application Deadline:15th March 2026</div>
      </div>
    </div>
-    <div class="banner"></div>
    <div class="blocks-list flex">
      <div
        class="block-item flex flex-col flex-center"
@@ -27,7 +24,7 @@
        <div class="label">Possibilites</div>
      </div>
    </div>
-    <div class="bloom flex flex-col align-center">
+    <div class="bloom container flex flex-col align-center">
      <div class="title">Bloom Your Creativity</div>
      <img src="@/assets/images/award/bloom_logo.png" class="logo" />
      <div class="season">Theme of 2026</div>
@@ -38,7 +35,7 @@
        artistry with artificial intelligence.
      </div>
    </div>
-    <div class="design-container">
+    <div class="design-container container">
      <div class="design-title limit">Design Without Borders</div>
      <div class="limit">
        <img src="@/assets/images/award/bloom_logo.png" class="logo" />
@@ -50,17 +47,154 @@
        reimagine the future of design.
      </div>
    </div>
-    <div class="timeline-container flex flex-col align-center">
-      <!-- <img src="@/assets/images/award/timeline_line.png" class="timeline" /> -->
+    <div class="timeline-container container flex flex-col align-center">
      <div class="timeline-title">Competition Timeline</div>
      <img src="@/assets/images/award/bloom_logo.png" alt="" class="logo" />
      <div class="desc">Shaping the Future</div>
+      <div class="timeline-point">
+        <img src="@/assets/images/award/timeline_line.png" class="line-bg" />
+        <div class="labels-row flex align-center">
+          <div
+            class="item-label flex flex-col"
+            v-for="item in points"
+            :key="'label-' + item.time"
+          >
+            <div class="main-label">{{ item.label }}</div>
+            <div class="sub-label" v-if="item.subLabel">{{ item.subLabel }}</div>
+          </div>
+        </div>
+        <!-- Icons row -->
+        <div class="icons-row flex align-center">
+          <div class="timeline-line"></div>
+          <img
+            src="@/assets/images/award/point.png"
+            class="point-icon"
+            v-for="item in points"
+            :key="'icon-' + item.time"
+          />
+        </div>
+
+        <!-- Times row -->
+        <div class="times-row flex align-center">
+          <div class="item-time" v-for="item in points" :key="'time-' + item.time">
+            {{ item.time }}
+          </div>
+        </div>
+        <!-- Descriptions row -->
+        <div class="descs-row flex align-center">
+          <div
+            class="item-desc flex justify-center"
+            v-for="item in points"
+            :key="'desc-' + item.time"
+          >
+            <div class="txt">
+              {{ item.desc }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="prizes-container container flex align-center">
+      <div class="left flex flex-col flex-center">
+        <div class="title">Award & Prizes</div>
+        <img src="@/assets/images/award/bloom_logo.png" class="logo" />
+        <div class="desc">Recongnition</div>
+      </div>
+      <div class="right">
+        <div
+          class="prize-item flex flex-col flex-center"
+          v-for="item in prizes"
+          :key="item.name"
+        >
+          <div class="prize-money">{{ item.money }}</div>
+          <div class="prize-name">{{ item.name }}</div>
+          <div class="prize-desc flex flex-col flex-center">
+            <div class="desc-item" v-for="el in item.desc">{{ el }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="apply-container container flex flex-col">
+      <div class="title">How to Apply</div>
+      <div class="sub-title">Requirments</div>
+      <div class="requirments-list flex">
+        <div class="left flex flex-col space-between">
+          <div class="item-box" v-for="item in leftRequirment" :key="item.type">
+            <div class="item-header flex align-center">
+              <img src="@/assets/images/award/bloom_logo.png" class="logo" />
+              <div class="item-title">{{ item.type }}</div>
+            </div>
+            <div class="context" v-for="el in item.desc">{{ el }}</div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="item-box">
+            <div class="item-box">
+              <div class="item-header flex align-center">
+                <img src="@/assets/images/award/bloom_logo.png" class="logo" />
+                <div class="item-title">{{ rightRequirment.type }}</div>
+              </div>
+              <div class="context" v-for="el in rightRequirment.desc">{{ el }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="selection-container container flex flex-col align-center">
+      <div class="title">Selection Criteria</div>
+      <img src="@/assets/images/award/bloom_logo.png" class="logo" />
+      <div class="sub-title">Evaluation</div>
+      <div class="criteria-list flex">
+        <div
+          class="item flex flex-col align-center"
+          v-for="item in criteriaList"
+          :key="item.name"
+        >
+          <img :src="item.icon" class="icon" :style="item.style" />
+          <div class="name">{{ item.name }}</div>
+          <div class="desc">{{ item.desc }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="judges-container flex flex-col align-center">
+      <div class="title">Panel of Judges</div>
+      <img src="@/assets/images/award/bloom_logo.png" class="logo" />
+      <div class="sub-title">Expertise</div>
+      <div class="judgement-list">
+        <div
+          class="judgement-item flex flex-col align-center"
+          v-for="item in judgements"
+          :key="item.name"
+        >
+          <img :src="item.picture" class="picture" />
+          <div class="name">{{ item.name }}</div>
+          <div class="desc">{{ item.desc }}</div>
+        </div>
+      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import criteria1 from '@/assets/images/award/criteria_1.png'
+import criteria2 from '@/assets/images/award/criteria_2.png'
+import criteria3 from '@/assets/images/award/criteria_3.png'
+import criteria4 from '@/assets/images/award/criteria_4.png'
+
+import jae from '@/assets/images/award/jae.png'
+import diego from '@/assets/images/award/diego.png'
+import gregory from '@/assets/images/award/gregory.png'
+import vincenzo from '@/assets/images/award/vincenzo.png'
+import tim from '@/assets/images/award/tim.png'
+import desmond from '@/assets/images/award/desmond.png'
+
+const router = useRouter()
+
+const handleSubmitApplication = () => {
+  router.push('/award/apply')
+}

 const blocksList = ref([
  {
@@ -76,62 +210,211 @@ const blocksList = ref([
    label: 'Winners'
  }
 ])
+
+const points = ref([
+  {
+    label: 'Select Top 20',
+    time: 'May',
+    desc: 'Submit your design concept, mood board, and initial sketch.'
+  },
+  {
+    label: `Top 20`,
+    subLabel: 'Collections  Finalize',
+    time: 'June',
+    desc: 'Complete collections, physical garments, and AiDA process videos due.'
+  },
+  {
+    label: `Top 3`,
+    subLabel: 'Finalists Select',
+    time: 'August',
+    desc: 'Complete collections, physical garments, and AiDA process videos due.'
+  },
+  {
+    label: 'Award  Ceremony',
+    time: 'November',
+    desc: 'Winners revealed with media coverage and live showcase.'
+  }
+])
+
+const prizes = ref([
+  {
+    money: '$3000',
+    name: 'First Runner-Up',
+    desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+  },
+  {
+    money: '$2000',
+    name: 'Second Runner-Up',
+    desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+  },
+  {
+    money: '$5000',
+    name: 'Grand Prize',
+    desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+  },
+  {
+    money: 'Certification',
+    name: 'Finalists',
+    desc: ['Award Ceritificate', 'Global Media Exposure']
+  }
+])
+
+const leftRequirment = ref([
+  {
+    type: 'Video',
+    desc: ['The process of doing design']
+  },
+  {
+    type: 'Design',
+    desc: [
+      'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
+      'Design sketch: Maximum 4 outfit design with proposed materials'
+    ]
+  }
+])
+const rightRequirment = ref({
+  type: 'Submission Format',
+  desc: [
+    'Naming as “AiDA global award 2026_applicantname”',
+    'Mp4\n(1080x1920pixels/20mb within 1min)',
+    'Single PDF file\n(within 15 pages, maximum 20mb)',
+    'English or native language\nwith English translation'
+  ]
+})
+
+const criteriaList = ref([
+  {
+    icon: criteria1,
+    name: 'Originality',
+    desc: 'Unique perspective and innovative approach to fashion design',
+    style: { width: '13rem', height: '17rem' }
+  },
+  {
+    icon: criteria2,
+    name: 'Creativity',
+    desc: 'Artistic vision and exceptional design excellence',
+    style: { width: '16rem', height: '18rem' }
+  },
+  {
+    icon: criteria3,
+    name: 'AiDA Integration',
+    desc: 'Effective application of AI design tools and functions',
+    style: { width: '16rem', height: '18rem' }
+  },
+  {
+    icon: criteria4,
+    name: 'Execution',
+    desc: 'Quality of presentation and technical craftsmanship',
+    style: { width: '18.8rem', height: '18rem' }
+  }
+])
+
+const judgements = [
+  {
+    picture: jae,
+    name: 'Jae Hyuk Lim',
+    desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
+  },
+  {
+    picture: diego,
+    name: 'Diego Dultzin Lacoste',
+    desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
+  },
+  {
+    picture: gregory,
+    name: 'Gregory de la Hogue Moran',
+    desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
+  },
+  {
+    picture: vincenzo,
+    name: 'Vincenzo La Torre',
+    desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
+  },
+  {
+    picture: tim,
+    name: 'Tim Lim',
+    desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
+  },
+  {
+    picture: desmond,
+    name: 'Desmond Lim',
+    desc: 'Cheif Editor of Vogue\n(Singapore)'
+  }
+]
 </script>

 <style lang="less" scoped>
-.award-page {
-  overflow: auto;
-  height: 100vh;
-}
-.flex {
-  display: flex;
-}
-.flex-col {
-  flex-direction: column;
-}
-.flex-center {
-  justify-content: center;
-  align-items: center;
-}
-.align-center {
-  align-items: center;
-}
-.space-between {
-  justify-content: space-between;
-}
-.justify-center {
-  justify-content: center;
-}
-.header {
-  height: 8rem;
-  background-color: #232323;
-  padding-left: 21.5rem;
-  padding-right: 8.6rem;
-  .header-left {
-    .logo {
-      width: 13rem;
-      height: 5rem;
-    }
-  }
-  .header-right {
-    column-gap: 1rem;
-    .text {
-      font-size: 1.6rem;
-      color: #fff;
-    }
-    .arrow {
-      width: 2.4rem;
-      height: 2.4rem;
-    }
-  }
+
+.container {
+  height: 97rem;
 }
+// .header {
+//   height: 8rem;
+//   background-color: #232323;
+//   padding-left: 21.5rem;
+//   padding-right: 8.6rem;
+//   .header-left {
+//     .logo {
+//       width: 13rem;
+//       height: 5rem;
+//     }
+//   }
+//   .header-right {
+//     column-gap: 1rem;
+//     .text {
+//       font-size: 1.6rem;
+//       color: #fff;
+//     }
+//     .arrow {
+//       width: 2.4rem;
+//       height: 2.4rem;
+//     }
+//   }
+// }
 .logo {
  width: 2.4rem;
  height: 2.4rem;
 }
 .banner {
-  height: 100rem;
-  background-color: violet;
+  height: 108rem;
+  background: url('@/assets/images/award/banner.png') no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  .submit-btn {
+    width: 41rem;
+    height: 6.394rem;
+    line-height: 6.394rem;
+    text-align: center;
+    border-radius: 3.2rem;
+    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);
+    color: #fff;
+    font-family: 'PoppinsBold';
+    font-weight: 600;
+    font-size: 2.4rem;
+    column-gap: 3.2rem;
+    position: absolute;
+    top: 23.88rem;
+    left: 51rem;
+    backdrop-filter: blur(5px);
+    cursor: pointer;
+    .arrow {
+      width: 3.83rem;
+      height: 3.83rem;
+    }
+    .ddl {
+      position: absolute;
+      bottom: -4rem;
+      left: 0;
+      text-align: center;
+      width: 41rem;
+      font-family: 'Arial';
+      font-weight: 400;
+      font-size: 2rem;
+      line-height: 2.2rem;
+    }
+  }
 }
 .blocks-list {
  height: 31.4rem;
@@ -163,7 +446,6 @@ const blocksList = ref([
  }
 }
 .bloom {
-  height: 97rem;
  padding-top: 12.8rem;
  font-family: 'Poppins';
  background: url('@/assets/images/award/bloom_bg.png') no-repeat;
@@ -192,7 +474,6 @@ const blocksList = ref([
  }
 }
 .design-container {
-  height: 97rem;
  background: url('@/assets/images/award/design_bg.png') no-repeat;
  background-size: 100% 100%;
  padding-left: 21.5rem;
@@ -229,15 +510,26 @@ const blocksList = ref([
  }
 }
 .timeline-container {
-  height: 97rem;
  background: url('@/assets/images/award/timeline_bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding-top: 12.8rem;
-  // .timeline {
-  //   width: 148.7rem;
-  //   height: 27.58rem;
-  // }
+  width: 100%;
+  .line-bg {
+    position: absolute;
+    width: 148.7rem;
+    height: 27.58rem;
+    left: 24rem;
+    bottom: 22.8rem;
+    z-index: 0;
+  }
+  .timeline-title {
+    font-family: 'PoppinsBold';
+    font-weight: 600;
+    font-size: 4rem;
+    text-align: center;
+    vertical-align: middle;
+  }
  .logo {
    margin: 2.4rem 0 2.2rem 0;
  }
@@ -247,5 +539,334 @@ const blocksList = ref([
    font-weight: 400;
    color: #b10000;
  }
+  .timeline-point {
+    flex: 1;
+    width: 100%;
+    margin-top: 12rem;
+    padding: 0 21.2rem 0 22rem;
+    position: relative;
+    z-index: 2;
+
+    .labels-row {
+      position: relative;
+      z-index: 2;
+      margin-bottom: 8rem;
+      .item-label {
+        flex: 1;
+        color: #232323;
+        font-family: 'PoppinsBold';
+        font-weight: 600;
+        font-size: 2.8rem;
+        text-align: center;
+        white-space: pre-line;
+        height: 6rem;
+        justify-content: center;
+      }
+    }
+
+    .icons-row {
+      margin-bottom: 1.6rem;
+      position: relative;
+      z-index: 2;
+      .point-icon {
+        width: 6.4rem;
+        height: 6.4rem;
+        display: block;
+        margin: 0 auto;
+        z-index: 2;
+      }
+      .timeline-line {
+        width: calc(100% + 22rem + 21.2rem);
+        left: -22rem;
+        height: 0.15rem;
+        background: linear-gradient(
+          90deg,
+          rgba(199, 52, 44, 0) 0%,
+          rgba(199, 52, 44, 0.719626) 25.96%,
+          #c7342c 51.44%,
+          rgba(199, 52, 44, 0.762376) 75.96%,
+          rgba(199, 52, 44, 0) 100%
+        );
+        position: absolute;
+        bottom: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+      }
+    }
+
+    .times-row {
+      margin-bottom: 6rem;
+      z-index: 2;
+      position: relative;
+      .item-time {
+        flex: 1;
+        color: #b10000;
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 2.8rem;
+        line-height: 4.5rem;
+        text-align: center;
+      }
+    }
+
+    .descs-row {
+      .item-desc {
+        flex: 1;
+        .txt {
+          font-family: 'Arial';
+          font-weight: 400;
+          font-size: 2rem;
+          text-align: center;
+          color: #585858;
+          width: 31.2rem;
+          height: 10.2rem;
+        }
+      }
+    }
+  }
+}
+.prizes-container {
+  background: url('@/assets/images/award/prizes_bg.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 0 21.4rem 0 33.4rem;
+
+  .left {
+    width: 36.2rem;
+    row-gap: 2.3rem;
+    margin-right: 27rem;
+    .title {
+      font-family: 'PoppinsBold';
+      font-weight: 600;
+      font-size: 4rem;
+      text-align: center;
+      color: #fff;
+    }
+    .desc {
+      font-family: 'Poppins';
+      font-weight: 400;
+      font-size: 3rem;
+      text-align: center;
+      color: #f95750;
+    }
+  }
+  .right {
+    display: grid;
+    grid-template-columns: repeat(2, 35.5rem);
+    grid-template-rows: repeat(2, 32.8rem);
+    gap: 4.2rem;
+    .prize-item {
+      width: 35.5rem;
+      height: 32.8rem;
+      color: #fff;
+      padding: 4.5rem 0 4.8rem 0;
+      justify-content: space-between;
+      background: url('@/assets/images/award/first_bg.png') no-repeat;
+      background-size: 100% 100%;
+      &:nth-of-type(2) {
+        background: url('@/assets/images/award/second_bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      &:nth-of-type(3) {
+        background: url('@/assets/images/award/grand_bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      &:nth-of-type(4) {
+        background: url('@/assets/images/award/certification_bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      .prize-money {
+        font-family: 'PoppinsBold';
+        font-weight: bold;
+        font-size: 4rem;
+      }
+      .prize-name {
+        font-family: 'PoppinsMedium';
+        font-weight: 500;
+        font-size: 2.8rem;
+      }
+      .prize-desc {
+        color: #e0e0e0;
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 2rem;
+        line-height: 3rem;
+        height: 8.9rem;
+      }
+    }
+  }
+}
+.apply-container {
+  flex: 1;
+  background: url('@/assets/images/award/timeline_bg.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 12.7rem 0 16.9rem;
+  .title {
+    text-align: center;
+    color: #232323;
+    font-family: 'PoppinsBold';
+    font-weight: 600;
+    font-size: 4rem;
+    margin-bottom: 3rem;
+  }
+  .sub-title {
+    text-align: center;
+    color: #b10000;
+    font-size: 3rem;
+    font-family: 'Arial';
+    font-weight: 400;
+  }
+  .requirments-list {
+    flex: 1;
+    padding-left: 41.4rem;
+    column-gap: 17.7rem;
+    margin-top: 12rem;
+    .left {
+      color: #232323;
+      height: 100%;
+    }
+    .item-box {
+      .item-header {
+        column-gap: 3.2rem;
+        .item-title {
+          color: #232323;
+          font-family: 'PoppinsBold';
+          font-weight: 600;
+          font-size: 2.8rem;
+        }
+      }
+      .context {
+        margin-top: 4rem;
+        width: 46.8rem;
+        color: #585858;
+        font-family: 'Arial';
+        font-weight: 400;
+        line-height: 3rem;
+        font-size: 2.4rem;
+        padding-left: 5.6rem;
+        white-space: pre-line;
+      }
+    }
+  }
+}
+.selection-container {
+  background: url('@/assets/images/award/selection_bg.png') no-repeat;
+  background-size: 100% 100%;
+  padding-top: 9.3rem;
+  .title {
+    color: #fff;
+    font-family: 'PoppinsBold';
+    font-weight: 600;
+    font-size: 4rem;
+  }
+  .logo {
+    margin: 2.3rem 0 2.3rem;
+  }
+  .sub-title {
+    color: #f95750;
+    font-family: 'Popins';
+    font-weight: 400;
+    font-size: 3rem;
+    margin-bottom: 11.8rem;
+  }
+  .criteria-list {
+    column-gap: 6rem;
+    .item {
+      height: 44rem;
+      width: 32.2rem;
+      box-sizing: border-box;
+      &:nth-of-type(3) {
+        background: url('@/assets/images/award/criteria_bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      .icon {
+        width: 18.8rem;
+        height: 18rem;
+      }
+      .name {
+        font-family: 'PoppinsMedium';
+        font-weight: 500;
+        font-size: 2.8rem;
+        color: #fff;
+        margin: 2rem 0 5rem;
+      }
+      .desc {
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 2.4rem;
+        color: #e0e0e0;
+        text-align: center;
+      }
+    }
+  }
+}
+.judges-container {
+  height: 147.4rem;
+  background: url('@/assets/images/award/judges_bg.png') no-repeat;
+  background-size: 100% 100%;
+  padding-top: 12.8rem;
+  .title {
+    color: #232323;
+    font-family: 'PoppinsBold';
+    font-weight: 600;
+    font-size: 4rem;
+  }
+  .logo {
+    margin: 2.4rem 0 2.2rem;
+  }
+  .sub-title {
+    color: #b10000;
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 3rem;
+    margin-bottom: 12rem;
+  }
+  .judgement-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 23.22rem;
+    row-gap: 8rem;
+    padding: 0 25rem 0 26.6rem;
+    .judgement-item {
+      .picture {
+        width: 20.2rem;
+        height: 26rem;
+        border-radius: 0.8rem;
+      }
+      .name {
+        margin: 3rem 0 2.4rem;
+        color: #232323;
+        font-family: 'PoppinsBold';
+        font-weight: 600;
+        font-size: 2.4rem;
+      }
+      .desc {
+        color: #585858;
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 2rem;
+        white-space: pre-line;
+        text-align: center;
+      }
+    }
+  }
+}
+.footer {
+  height: 10rem;
+  padding-left: 21.5rem;
+  padding-right: 22rem;
+  background-color: #232323;
+  .social-list {
+    column-gap: 2rem;
+    img {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+  .copyright {
+    color: #fff;
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 1.2rem;
+  }
 }
 </style>