feat: 竞赛主页中文

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'
 		}
 	])