aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 竞赛主页中文

Browse Source
This commit is contained in:
zhangyahui
2026-02-04 10:57:25 +08:00
parent 287825b4bf
commit ca782d0aff
13 changed files with 4016 additions and 3682 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3581
src/lang/cn.ts
View File

File diff suppressed because it is too large Load Diff

3700
src/lang/en.ts
View File

File diff suppressed because it is too large Load Diff

107
src/views/AwardPage/components/ApplySection.vue
View File

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

52
src/views/AwardPage/components/Bloom.vue
View File

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

23
src/views/AwardPage/components/JudgesSection.vue
View File

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

52
src/views/AwardPage/components/PrizesSection.vue
View File

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

27
src/views/AwardPage/components/SelectionSection.vue
View File

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

25
src/views/AwardPage/components/Slogan.vue
View File

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

11
src/views/AwardPage/components/Success.vue
View File

@@ -21,8 +21,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import successIcon from '@/assets/images/award/successful.png' import successIcon from '@/assets/images/award/successful.png'
import expiredIcon from '@/assets/images/award/expired.png' import expiredIcon from '@/assets/images/award/expired.png'
const { t } = useI18n()
const props = defineProps({ const props = defineProps({
isExpired: { isExpired: {
type: Boolean, type: Boolean,
@@ -34,14 +37,14 @@
if (props.isExpired) { if (props.isExpired) {
return { return {
icon: expiredIcon, icon: expiredIcon,
title: 'Application Deadline Passed', title: t('AwardsPage.deadlinePassed'),
desc: 'The submission deadline for AiDA Global Fashion Award 2026 has ended.\nWe are no longer accepting new applications. ' desc: t('AwardsPage.deadlinePassedDesc')
} }
} else { } else {
return { return {
icon: successIcon, icon: successIcon,
title: 'Submission Successful', title: t('AwardsPage.submissionSuccessful'),
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.' desc: t('AwardsPage.submissionSuccessfulDesc')
} }
} }
}) })

57
src/views/AwardPage/components/TimeLine.vue
View File

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

13
src/views/AwardPage/components/UploadStatus.vue
View File

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

22
src/views/AwardPage/container.vue
View File

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

28
src/views/AwardPage/index.vue
View File

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