feat: 竞赛主页中文

src/views/AwardPage/components/ApplySection.vue

@@ -8,13 +8,13 @@
 			class="title animation-element"
 			ref="applyTitleRef"
 		>
-			How to Apply
+			{{ $t('AwardsPage.howToApply') }}
 		</div>
 		<div
 			class="sub-title animation-element"
 			ref="applySubTitleRef"
 		>
-			Step by step
+			{{ $t('AwardsPage.stepByStep') }}
 		</div>
 		<div
 			class="requirments-list flex flex-col"
@@ -29,26 +29,26 @@
 					:style="{ background: item.background || '#fff' }"
 				>
 					<div class="item-header flex flex-center">
-						<div class="item-title">{{ item.type }}</div>
+						<div class="item-title">{{ $t(item.type) }}</div>
 					</div>
 					<div class="context-container flex flex-center">
 						<div
 							class="context"
 							v-for="el in item.desc"
 						>
-							{{ el }}
+							{{ $t(el) }}
 						</div>
 						<div
 							class="list"
 							v-if="item.listTitle"
 						>
-							<div class="list-title">{{ item.listTitle }}</div>
+							<div class="list-title">{{ $t(item.listTitle) }}</div>
 							<ul class="list-items">
 								<li
 									class="list-item"
 									v-for="el in item.list"
 								>
-									{{ el }}
+									{{ $t(el) }}
 								</li>
 							</ul>
 						</div>
@@ -57,43 +57,36 @@
 			</div>
 			<div class="bottom flex">
 				<div class="step-3 flex flex-col animation-element" ref="step3Ref">
-					<div class="header">Step 3. Prepare Your Submission</div>
+					<div class="header">{{ $t('AwardsPage.step3Title') }}</div>
 					<div class="content flex">
 						<div class="content-left flex flex-col space-between">
 							<div class="content-item">
 								<div class="item-header flex align-center">
 									<div class="point"></div>
-									<div>Process Video</div>
+									<div>{{ $t('AwardsPage.processVideo') }}</div>
 								</div>
 								<div class="desc-wrapper flex flex-col space-between">
 									<div class="item-desc">
-										Include a screen‑recorded video
-										<br />
-										your creative process
-										<br />
-										using AiDA.​
-										<br />
+										{{ $t('AwardsPage.processVideoDesc') }}
 									</div>
 									<ul class="desc-lists">
 										<div class="desc-lists-title">
-											Video requirements:
+											{{ $t('AwardsPage.videoRequirements') }}
 										</div>
-										<li>Format: MP4</li>
-										<li>Resolution: 1080×1920 px</li>
-										<li>Duration: Maximum 1 minute</li>
-										<li>File size: Maximum 20MB</li>
+										<li>{{ $t('AwardsPage.videoFormat') }}</li>
+										<li>{{ $t('AwardsPage.videoResolution') }}</li>
+										<li>{{ $t('AwardsPage.videoDuration') }}</li>
+										<li>{{ $t('AwardsPage.videoSize') }}</li>
 									</ul>
 								</div>
 							</div>
 							<div class="content-item">
 								<div class="item-header flex align-center">
 									<div class="point"></div>
-									<div>File Name</div>
+									<div>{{ $t('AwardsPage.fileName') }}</div>
 								</div>
 								<div class="item-desc indent">
-									AiDAGlobalDesignAward
-									<br />
-									2026_[Your Full Name]​
+									{{ $t('AwardsPage.fileNameDesc') }}
 								</div>
 							</div>
 						</div>
@@ -101,7 +94,7 @@
 							<div class="content-item flex flex-col">
 								<div class="item-header flex align-center">
 									<div class="point"></div>
-									<div>Design Portfolio(PDF)</div>
+									<div>{{ $t('AwardsPage.designPortfolio') }}</div>
 								</div>
 								<div
 									class="desc-wrapper flex-1 flex flex-col space-between"
@@ -109,25 +102,23 @@
 									<ul class="desc-lists">
 										<div class="desc-lists-title">
 											<p>
-												Submit one single PDF file that includes:
+												{{ $t('AwardsPage.submitPdf') }}
 											</p>
-											<p>Required structure:</p>
+											<p>{{ $t('AwardsPage.requiredStructure') }}</p>
 										</div>
-										<li>Design title</li>
-										<li>Moodboard</li>
-										<li>Concept explanation</li>
-										<div>(How to used AiDA to develop design)</div>
+										<li>{{ $t('AwardsPage.pdfDesignTitle') }}</li>
+										<li>{{ $t('AwardsPage.pdfMoodboard') }}</li>
+										<li>{{ $t('AwardsPage.pdfConcept') }}</li>
+										<div>{{ $t('AwardsPage.pdfConceptDesc') }}</div>
 									</ul>
 									<ul class="desc-lists">
 										<div class="desc-lists-title">
-											<p>PDF requirements:</p>
+											<p>{{ $t('AwardsPage.pdfRequirements') }}</p>
 										</div>
-										<li>Maximum 15 pages</li>
-										<li>Maximum file size: 20MB</li>
+										<li>{{ $t('AwardsPage.pdfMaxPages') }}</li>
+										<li>{{ $t('AwardsPage.pdfMaxSize') }}</li>
 										<li>
-											Language: English or native language
-											<br />
-											with English translation
+											{{ $t('AwardsPage.pdfLanguage') }}
 										</li>
 									</ul>
 								</div>
@@ -137,31 +128,22 @@
 				</div>
 				<div class="step-4 animation-element" ref="step4Ref">
 					<div class="header flex flex-col flex-center">
-						<p>Step 4. Finalist Requirement</p>
-						<p class="sub-title">(for top 20 Designers)</p>
+						<p>{{ $t('AwardsPage.step4Title') }}</p>
+						<p class="sub-title">{{ $t('AwardsPage.step4Subtitle') }}</p>
 					</div>
 					<div class="content">
 						<div class="content-item">
 							<div class="desc-wrapper flex-1 flex flex-col space-between">
 								<ul class="desc-lists">
 									<div class="desc-lists-title">
-										The 20 finalists will be required to
-										<br />
-										submit physical garments for final
-										<br />
-										evaluation
+										{{ $t('AwardsPage.step4Desc') }}
 									</div>
-									<li>Number of pieces: 1</li>
+									<li>{{ $t('AwardsPage.finalistPieces') }}</li>
 									<li>
-										Garments must be produced
-										<br />
-										based on the submitted
-										<br />
-										AiDA-generated designs
+										{{ $t('AwardsPage.finalistBasedOn') }}
 									</li>
 									<li>
-										Shipping instructions will be provided by
-										Code-create
+										{{ $t('AwardsPage.finalistShipping') }}
 									</li>
 								</ul>
 							</div>
@@ -175,25 +157,24 @@
 
 <script setup lang="ts">
 	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import { gsap } from 'gsap'
 
+	const { t } = useI18n()
+
 	const leftRequirment = ref([
 		{
-			type: 'Step 1. Become an\nAiDA Subscriber​',
-			desc: [
-				'All applicants must be active\nAiDA subscribers at the time of\nsubmission.​ You may subscribe\nunder either a monthly or yearly plan.​'
-			]
+			type: 'AwardsPage.step1Title',
+			desc: ['AwardsPage.step1Desc']
 		},
 		{
-			type: 'Step 2. Create Your Design Using AiDA',
-			desc: [
-				'Applicants must create their\ndesigns exclusively using the\nAiDA platform.​ '
-			],
-			listTitle: 'Your work shold clearly demonstrate:',
+			type: 'AwardsPage.step2Title',
+			desc: ['AwardsPage.step2Desc'],
+			listTitle: 'AwardsPage.step2ListTitle',
 			list: [
-				'· How AiDA is used as a creative tool',
-				'· Your design concept and creative direction',
-				'· The intergration of AI and human creativity'
+				'AwardsPage.step2List[0]',
+				'AwardsPage.step2List[1]',
+				'AwardsPage.step2List[2]'
 			],
 			background: '#F9F9F9'
 		}

src/views/AwardPage/components/Bloom.vue

@@ -4,46 +4,44 @@
 			class="title"
 			ref="titleRef"
 		>
-			Bloom Your Creativity
+			{{ $t('AwardsPage.bloomYourCreativity') }}
 		</div>
 
 		<div
 			class="season"
 			ref="subtitleRef"
 		>
-			Theme of 2026
+			{{ $t('AwardsPage.themeOf2026') }}
 		</div>
 		<div
 			class="desc"
 			ref="textRef"
 		>
 			<p class="section-1">
-				The
-				<span class="arial-bold">AiDA Global Design Award 2026</span>
-				is an
-				<span class="arial-bold">international design competition</span>
-				hosted by
-				<span class="arial-bold">Code‑Create</span>
-				, a globally leading
-				<br />
-				<span class="arial-bold">AI fashion solutions provider,</span>
-				celebrating the future of creativity powered by artificial intelligence.
-				<br />
-				Bringing together designers from around the world, AiDA empowers AI as a
-				creative partner—pushing fashion beyond
-				<br />
-				traditional boundaries and unlocking new possibilities where technology
-				amplifies human imagination.​
+				{{ $t('AwardsPage.bloomText.desc1.regular1') }}
+				<span class="arial-bold">
+					{{ $t('AwardsPage.bloomText.desc1.bold1') }}
+				</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular2') }}
+				<span class="arial-bold">
+					{{ $t('AwardsPage.bloomText.desc1.bold2') }}
+				</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular3') }}
+				<span class="arial-bold">
+					{{ $t('AwardsPage.bloomText.desc1.bold3') }}
+				</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular4') }}
+				<span class="arial-bold">
+					{{ $t('AwardsPage.bloomText.desc1.bold4') }}
+				</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular5') }}
 			</p>
 			<p class="section-2">
-				Under the theme “
+				{{ $t('AwardsPage.bloomText.desc2.regular1') }}
 				<span class="arial-bold">
-					Where Imagination Meets Innovation, Creativity Blooms,
+					{{ $t('AwardsPage.bloomText.desc2.bold1') }}
 				</span>
-				” participants are invited to transform bold ideas
-				<br />
-				into extraordinary designs, seamlessly merging human artistry with
-				artificial intelligence to shape the next era of fashion.
+				{{ $t('AwardsPage.bloomText.desc2.regular2') }}
 			</p>
 		</div>
 	</div>
@@ -51,8 +49,11 @@
 
 <script setup lang="ts">
 	import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import { gsap } from 'gsap'
 
+	const { t } = useI18n()
+
 	const titleRef = ref<HTMLElement | null>(null)
 	const subtitleRef = ref<HTMLElement | null>(null)
 	const textRef = ref<HTMLElement | null>(null)
@@ -192,7 +193,8 @@
 			padding: 0 21.5rem;
 			line-height: 4.5rem;
 			margin-bottom: 12.3rem;
-			.section-2{
+			white-space: pre-line;
+			.section-2 {
 				margin-top: 4rem;
 			}
 		}

src/views/AwardPage/components/JudgesSection.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="judges-container flex flex-col align-center">
-		<div class="title" ref="judgesTitleRef">Panel of Judges</div>
+		<div class="title" ref="judgesTitleRef">{{ $t('AwardsPage.panelOfJudges') }}</div>
 		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
-		<div class="sub-title" ref="judgesSubTitleRef">Expertise</div>
+		<div class="sub-title" ref="judgesSubTitleRef">{{ $t('AwardsPage.expertise') }}</div>
 		<div class="judgement-list" ref="judgementListRef">
 			<div
 				class="judgement-item flex flex-col align-center"
@@ -10,8 +10,8 @@
 				:key="item.name"
 			>
 				<img :src="item.picture" class="picture" />
-				<div class="name">{{ item.name }}</div>
-				<div class="desc">{{ item.desc }}</div>
+				<div class="name">{{ $t(item.name) }}</div>
+				<div class="desc">{{ $t(item.desc) }}</div>
 			</div>
 		</div>
 	</div>
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 import jae from '@/assets/images/award/jae.png'
 import diego from '@/assets/images/award/diego.png'
@@ -27,36 +28,38 @@ 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 { t } = useI18n()
+
 const judgements = [
 	{
 		picture: jae,
 		name: 'Jae Hyuk Lim',
-		desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
+		desc: 'AwardsPage.judgesHat.jae'
 	},
 	{
 		picture: diego,
 		name: 'Diego Dultzin Lacoste',
-		desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
+		desc: 'AwardsPage.judgesHat.diego'
 	},
 	{
 		picture: gregory,
 		name: 'Gregory de la Hogue Moran',
-		desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
+		desc: 'AwardsPage.judgesHat.gregory'
 	},
 	{
 		picture: vincenzo,
 		name: 'Vincenzo La Torre',
-		desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
+		desc: 'AwardsPage.judgesHat.vincenzo'
 	},
 	{
 		picture: tim,
 		name: 'Tim Lim',
-		desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
+		desc: 'AwardsPage.judgesHat.tim'
 	},
 	{
 		picture: desmond,
 		name: 'Desmond Lim',
-		desc: 'Cheif Editor of Vogue\n(Singapore)'
+		desc: 'AwardsPage.judgesHat.desmond'
 	}
 ]
 

src/views/AwardPage/components/PrizesSection.vue

@@ -8,14 +8,14 @@
 				class="title"
 				ref="prizesTitleRef"
 			>
-				Award & Prizes
+				{{ $t('AwardsPage.awardPrizes') }}
 			</div>
 			<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
 			<div
 				class="desc"
 				ref="prizesSubTitleRef"
 			>
-				Recongnition
+				{{ $t('AwardsPage.recognition') }}
 			</div>
 		</div>
 		<div
@@ -29,15 +29,15 @@
 				:key="item.name"
 			>
 				<div class="prize-money">
-					{{ item.money }}
+					{{ $t(item.money) }}
 				</div>
-				<div class="prize-name">{{ item.name }}</div>
+				<div class="prize-name">{{ $t(item.name) }}</div>
 				<div class="prize-desc flex flex-col flex-center">
 					<div
 						class="desc-item"
 						v-for="el in item.desc"
 					>
-						{{ el }}
+						{{ $t(el) }}
 					</div>
 				</div>
 			</div>
@@ -47,28 +47,46 @@
 
 <script setup lang="ts">
 	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import { gsap } from 'gsap'
 
+	const { t } = useI18n()
+
 	const prizes = [
 		{
-			money: 'US$5000',
-			name: 'Grand Awards',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+			money: 'AwardsPage.grandMoney',
+			name: 'AwardsPage.grandAwards',
+			desc: [
+				'AwardsPage.cashAward',
+				'AwardsPage.awardCertificate',
+				'AwardsPage.globalMediaExposure'
+			]
 		},
 		{
-			money: 'US$3000',
-			name: 'Gold Awards',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+			money: 'AwardsPage.goldMoney',
+			name: 'AwardsPage.goldAwards',
+			desc: [
+				'AwardsPage.cashAward',
+				'AwardsPage.awardCertificate',
+				'AwardsPage.globalMediaExposure'
+			]
 		},
 		{
-			money: 'US$2000',
-			name: 'Silver Awards',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+			money: 'AwardsPage.silverMoney',
+			name: 'AwardsPage.silverAwards',
+			desc: [
+				'AwardsPage.cashAward',
+				'AwardsPage.awardCertificate',
+				'AwardsPage.globalMediaExposure'
+			]
 		},
 		{
-			money: 'Award\nCertification',
-			name: 'Finalists',
-			desc: ['Award Ceritificate', 'Global Media Exposure'],
+			money: 'AwardsPage.awardCertification',
+			name: 'AwardsPage.finalists',
+			desc: [
+				'AwardsPage.TravelAllowance',
+				'AwardsPage.globalMediaExposure'
+			],
 			smaller: true
 		}
 	]

src/views/AwardPage/components/SelectionSection.vue

@@ -3,9 +3,9 @@
 		class="selection-container container flex flex-col align-center"
 		ref="selectionRef"
 	>
-		<div class="title">Selection Criteria</div>
+		<div class="title">{{ $t('AwardsPage.selectionCriteria') }}</div>
 		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
-		<div class="sub-title">Evaluation</div>
+		<div class="sub-title">{{ $t('AwardsPage.evaluation') }}</div>
 		<div class="criteria-list flex" ref="criteriaListRef">
 			<div
 				class="item flex flex-col align-center"
@@ -13,8 +13,8 @@
 				: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 class="name">{{ $t(item.name) }}</div>
+				<div class="desc">{{ $t(item.desc) }}</div>
 			</div>
 		</div>
 	</div>
@@ -22,35 +22,38 @@
 
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 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'
 
+const { t } = useI18n()
+
 const criteriaList = ref([
 	{
 		icon: criteria1,
-		name: 'Originality',
-		desc: 'Unique perspective and\ninnovative approach to\nfashion design',
+		name: 'AwardsPage.originality',
+		desc: 'AwardsPage.originalityDesc',
 		style: { width: '13rem', height: '17rem' }
 	},
 	{
 		icon: criteria2,
-		name: 'Creativity',
-		desc: 'Artistic vision and exceptional\ndesign excellence',
+		name: 'AwardsPage.creativity',
+		desc: 'AwardsPage.creativityDesc',
 		style: { width: '16rem', height: '18rem' }
 	},
 	{
 		icon: criteria3,
-		name: 'AiDA Integration',
-		desc: 'Effective application of\nAiDA functions',
+		name: 'AwardsPage.aidaIntegration',
+		desc: 'AwardsPage.aidaIntegrationDesc',
 		style: { width: '16rem', height: '18rem' }
 	},
 	{
 		icon: criteria4,
-		name: 'Execution',
-		desc: 'Quality of presentation and\ntechnical craftsmanship',
+		name: 'AwardsPage.execution',
+		desc: 'AwardsPage.executionDesc',
 		style: { width: '18.8rem', height: '18rem' }
 	}
 ])

src/views/AwardPage/components/Slogan.vue

@@ -10,32 +10,35 @@
 			:key="item.number"
 			:style="{ '--delay': `${idx * 0.18}s` }"
 		>
-			<div class="number">{{ item.number }}</div>
-			<div class="label">{{ item.label }}</div>
+			<div class="number">{{ $t(item.number) }}</div>
+			<div class="label">{{ $t(item.label) }}</div>
 			<div class="line"></div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted, onUnmounted } from 'vue'
+	import { computed, ref, onMounted, onUnmounted } from 'vue'
+	import { useI18n } from 'vue-i18n'
+
+	const { t } = useI18n()
 
 	const blocksList = ref([
 		{
-			number: 'UP TO\nUS$9000',
-			label: 'In total cash prizes'
+			number: 'AwardsPage.totalCashPrizes',
+			label: 'AwardsPage.totalCashPrizesLabel'
 		},
 		{
-			number: 'GLOBAL MEDIA EXPOSE',
-			label: 'Showcased by top\ninternational media platforms​'
+			number: 'AwardsPage.globalMediaExpose',
+			label: 'AwardsPage.globalMediaExposeLabel'
 		},
 		{
-			number: 'NETWORKING\n OPPORTUNITIES',
-			label: 'Build connections with\ndesigners and industry leaders​'
+			number: 'AwardsPage.networkingOpportunities',
+			label: 'AwardsPage.networkingOpportunitiesLabel'
 		},
 		{
-			number: 'AWARD CEREMONY\nIN HONG KONG​',
-			label: 'Travel allowance\nprovided for finalists​'
+			number: 'AwardsPage.awardCeremonyHongKong',
+			label: 'AwardsPage.awardCeremonyLabel'
 		}
 	])
 	const root = ref<HTMLElement | null>(null)

src/views/AwardPage/components/Success.vue

@@ -21,8 +21,11 @@
 
 <script setup lang="ts">
 	import { computed } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import successIcon from '@/assets/images/award/successful.png'
 	import expiredIcon from '@/assets/images/award/expired.png'
+
+	const { t } = useI18n()
 	const props = defineProps({
 		isExpired: {
 			type: Boolean,
@@ -34,14 +37,14 @@
 		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. '
+				title: t('AwardsPage.deadlinePassed'),
+				desc: t('AwardsPage.deadlinePassedDesc')
 			}
 		} 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.'
+				title: t('AwardsPage.submissionSuccessful'),
+				desc: t('AwardsPage.submissionSuccessfulDesc')
 			}
 		}
 	})

src/views/AwardPage/components/TimeLine.vue

@@ -3,8 +3,8 @@
 		ref="containerRef"
 		class="timeline-container container flex flex-col align-center"
 	>
-		<div class="timeline-title">Competition Timeline</div>
-		<div class="desc">Shaping the Future</div>
+		<div class="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div>
+		<div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</div>
 		<div
 			class="timeline-point"
 			ref="timelineRef"
@@ -16,12 +16,12 @@
 					v-for="item in points"
 					:key="'label-' + item.time"
 				>
-					<div class="main-label">{{ item.label }}</div>
+					<div class="main-label">{{ $t(item.label) }}</div>
 					<div
 						class="sub-label"
 						v-if="item.subLabel"
 					>
-						{{ item.subLabel }}
+						{{ $t(item.subLabel) }}
 					</div>
 				</div>
 			</div>
@@ -46,7 +46,7 @@
 					v-for="item in points"
 					:key="'time-' + item.time"
 				>
-					{{ item.time }}
+					{{ $t(item.time) }}
 				</div>
 			</div>
 
@@ -58,7 +58,7 @@
 					:key="'desc-' + item.time"
 				>
 					<div class="txt">
-						{{ item.desc }}
+						{{ $t(item.desc) }}
 					</div>
 				</div>
 			</div>
@@ -67,43 +67,46 @@
 </template>
 
 <script setup lang="ts">
-	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { nextTick, onBeforeUnmount, onMounted, ref, computed } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import { gsap } from 'gsap'
 
+	const { t } = useI18n()
+
 	const containerRef = ref<HTMLElement | null>(null)
 	const timelineRef = ref<HTMLElement | null>(null)
 	const hasAnimated = ref(false)
 
 	const points = ref([
 		{
-			label: 'Application',
-			subLabel: 'Deadline',
-			time: 'Jul 15',
-			desc: 'Application deadline and\nentry review process\nbegins.'
+			label: 'AwardsPage.timelineApplicationLabel',
+			subLabel: 'AwardsPage.timelineDeadlineLabel',
+			time: 'AwardsPage.timeJul15',
+			desc: 'AwardsPage.applicationDeadlineDesc'
 		},
 		{
-			label: `20 Finallists`,
-			subLabel: 'Announced',
-			time: 'Aug 30',
-			desc: 'Announcement of 20\nfinalists entering final\nevaluation stage.'
+			label: 'AwardsPage.twentyFinalistsAnnounced',
+			subLabel: 'AwardsPage.announcedLabel',
+			time: 'AwardsPage.timeAug30',
+			desc: 'AwardsPage.twentyFinalistsDesc'
 		},
 		{
-			label: `Finallist\nSubmission`,
-			subLabel: 'Deadline',
-			time: 'Sept 30',
-			desc: 'Finalists submit\ncompleted outfits for\nfinal assessment.'
+			label: 'AwardsPage.finalistSubmission',
+			subLabel: 'AwardsPage.submissionLabel',
+			time: 'AwardsPage.timeSept30',
+			desc: 'AwardsPage.finalistSubmissionDesc'
 		},
 		{
-			label: 'Receiving Outfits',
-			subLabel: 'from Finallists',
-			time: 'October',
-			desc: 'AiDA receives physical\noutfits from all 20\nfinalists.'
+			label: 'AwardsPage.receivingOutfits',
+			subLabel: 'AwardsPage.fromFinalistsLabel',
+			time: 'AwardsPage.timeOctober',
+			desc: 'AwardsPage.receivingOutfitsDesc'
 		},
 		{
-			label: 'Award',
-			subLabel: 'Ceremony',
-			time: 'Nov 12',
-			desc: 'Award Ceremony &\nCommunity Gathering\n– Soho House.'
+			label: 'AwardsPage.awardCeremony',
+			subLabel: 'AwardsPage.ceremonyLabel',
+			time: 'AwardsPage.timeNov12',
+			desc: 'AwardsPage.awardCeremonyDesc'
 		}
 	])
 

src/views/AwardPage/components/UploadStatus.vue

@@ -22,6 +22,9 @@
 </template>
 <script setup lang="ts">
 	import { computed, watch } from 'vue'
+	import { useI18n } from 'vue-i18n'
+
+	const { t } = useI18n()
 	const props = defineProps<{
 		status: string
 		type: 'pdf' | 'video'
@@ -29,16 +32,16 @@
 
 	const textMap: Record<string, string> = {
 		idle: '',
-		uploading: 'Upload in progress…',
-		success: 'Uploaded Successfully',
-		error: 'Upload failed'
+		uploading: computed(() => t('AwardsPage.uploadInProgress')).value,
+		success: computed(() => t('AwardsPage.uploadSuccess')).value,
+		error: computed(() => t('AwardsPage.uploadFailed')).value
 	}
 
 	const tips = computed(() => {
 		if (props.type === 'pdf') {
-			return 'PDF file, max 20MB'
+			return t('AwardsPage.pdfFileTip')
 		} else if (props.type === 'video') {
-			return 'Video file (MP4, MOV), 1080p, max 100MB'
+			return t('AwardsPage.videoFileTip')
 		}
 		return ''
 	})

src/views/AwardPage/container.vue

@@ -95,11 +95,27 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, computed, watch } from 'vue'
+	import { ref, computed, watch, onMounted } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'
+	import { useI18n } from 'vue-i18n'
+	import { getCookie } from '@/tool/cookie'
 
 	const route = useRoute()
 	const router = useRouter()
+	const { locale } = useI18n()
+
+	onMounted(() => {
+		// 初始化语言设置
+		const loginLanguage = localStorage.getItem('loginLanguage')
+		if (loginLanguage) {
+			locale.value = loginLanguage
+		} else {
+			const userLanguage = getCookie('language')
+			if (userLanguage) {
+				locale.value = userLanguage
+			}
+		}
+	})
 
 	const showQRcode = ref(false)
 	const handleCloseQRcode = () => {
@@ -110,10 +126,10 @@
 	const btnType = ref<BtnType>('index')
 	const btnText = computed(() => {
 		if (btnType.value === 'index') {
-			return 'Submit your Application'
+			return locale.value === 'CHINESE_SIMPLIFIED' ? '提交申请' : 'Submit your Application'
 		}
 		if (btnType.value === 'form') {
-			return 'Back to Introduction'
+			return locale.value === 'CHINESE_SIMPLIFIED' ? '赛事介绍' : 'Back to Introduction'
 		}
 	})
 

src/views/AwardPage/index.vue

@@ -11,18 +11,18 @@
 				webkit-playsinline
 				x5-playsinline
 			></video>
-			<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
+			class="submit-btn flex flex-center"
+			@click="handleSubmitApplication"
+		>
+			<div>{{ $t('AwardsPage.submitApplication') }}</div>
+			<img
+				src="@/assets/images/award/arrow_right.png"
+				alt=""
+				class="arrow"
+			/>
+			<div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
+		</div>
 		</div>
 
 		<Slogan />
@@ -102,8 +102,8 @@
 				left: 0;
 				text-align: center;
 				width: 41rem;
-				font-family: 'Arial';
-				font-weight: 400;
+				font-family: 'ArialBold';
+				font-weight: 700;
 				font-size: 2rem;
 				line-height: 2.2rem;
 				color: #232323e5;