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

Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create

Browse Source
This commit is contained in:
李志鹏
2026-06-02 15:08:26 +08:00
parent 10d593e23f d98ddd2940
commit bc5444ac48
17 changed files with 675 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/about-us/ecosystem.vue
View File

@@ -16,8 +16,8 @@
<section class="ecosystem">
<div class="content">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/home_ai_logo.png" alt="">
<h2>REVITALISE THE FASHION ECOSYSTEM</h2>
<h4>through Artificial Intelligence (AI)</h4>
<h2>{{ $t('aboutUs.ecosystem.Title') }}</h2>
<h4>{{ $t('aboutUs.ecosystem.Desc') }}</h4>
</div>
</section>
<section class="ecosystem-video">
@@ -38,18 +38,34 @@
display: flex;
flex-direction: column;
align-items: center;
@media (max-width: 1000px) {
padding: 40px 40px 40px 40px;
max-width: 1000px;
}
> img{
width: 300px;
height: 300px;
margin-bottom: 20px;
@media (max-width: 1000px) {
width: 100px;
height: 100px;
}
}
> h2{
margin-bottom: 20px;
font-size: 24px;
@media (max-width: 1000px) {
font-size: 22px;
text-align: center;
}
}
> h4{
color: #333333;
font-size: 18px;
@media (max-width: 1000px) {
font-size: 16px;
text-align: center;
}
}
}
@@ -62,9 +78,16 @@
margin: 0 auto;
padding: 100px 0;
position: relative;
@media (max-width: 1000px) {
padding: 20px 40px;
max-width: 1000px;
}
> img{
width: 100%;
height: 675px;
aspect-ratio: 16/9;
@media (max-width: 1000px) {
height: auto;
}
}
> .icon-bofang{
font-size: 100px;

6
src/pages/about-us/index.vue
View File

@@ -1,14 +1,18 @@
<script setup lang="ts">
import { computed } from 'vue'
import Ecosystem from './ecosystem.vue'
import Title from './title.vue'
import Mission from './mission.vue'
import OurTeam from './our-team.vue'
import StrategicPartners from './strategic-partners.vue'
import { useGlobalStore } from '@/stores/global'
const globalStore = useGlobalStore()
const windowWidth = computed(() => globalStore.state.windowWidth)
defineExpose({})
</script>
<template>
<div class="about-us">
<div class="bg">
<div class="bg" v-show="windowWidth > 1000">
<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
</div>
<Title />

49
src/pages/about-us/mission.vue
View File

@@ -1,7 +1,10 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
import { gsap, TweenMax, TweenLite } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useGlobalStore } from '@/stores/global'
const globalStore = useGlobalStore()
const windowWidth = computed(() => globalStore.state.windowWidth)
//const props = defineProps({
//})
//const emit = defineEmits([
@@ -14,6 +17,9 @@ const imgBox = ref(null)
let data = reactive({
})
onMounted(()=>{
if(windowWidth.value < 1000){
return
}
let dom = document.querySelector('body')
gsap.registerPlugin(ScrollTrigger);
let tl1 = gsap.timeline();
@@ -40,29 +46,29 @@ const {} = toRefs(data);
<template>
<section class="mission">
<div class="content">
<h2>Mission</h2>
<p>To be the world leading innovative leader in offering the state-of-the-art AI based solutions and systems to disrupt the fashion industry</p>
<h2>{{ $t('aboutUs.mission.Title') }}</h2>
<p>{{ $t('aboutUs.mission.Desc') }}</p>
</div>
</section>
<section class="mission-focus-area">
<div class="content">
<h2>Focus Area</h2>
<h2>{{ $t('aboutUs.mission.FocusArea') }}</h2>
<div class="img-box" ref="imgBox">
<div class="img-item" ref="imgItem1">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_01.png" alt="">
<h2>Elevate Operation Efficiency</h2>
<h2>{{ $t('aboutUs.mission.ElevateOperationEfficiency') }}</h2>
</div>
<div class="img-item" ref="imgItem2">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_02-1-600x888.png" alt="">
<h2>Vertical Design Platform</h2>
<h2>{{ $t('aboutUs.mission.VerticalDesignPlatform') }}</h2>
</div>
<div class="img-item" ref="imgItem3">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_03-1-600x887.png" alt="">
<h2>Education</h2>
<h2>{{ $t('aboutUs.mission.Education') }}</h2>
</div>
<div class="img-item" ref="imgItem4">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_04-1-600x888.png" alt="">
<h2>Community</h2>
<h2>{{ $t('aboutUs.mission.Community') }}</h2>
</div>
</div>
</div>
@@ -80,6 +86,10 @@ const {} = toRefs(data);
flex-direction: column;
align-items: center;
text-align: center;
@media (max-width: 1000px) {
max-width: 1000px;
padding: 60px 20px 60px 20px;
}
> h2{
margin-bottom: 30px;
color: #000000;
@@ -87,10 +97,16 @@ const {} = toRefs(data);
font-weight: 600;
letter-spacing: 1px;
font-family: "Poppins", Sans-serif;
@media (max-width: 1000px) {
font-size: 28px;
}
}
> p{
color: #555;
font-size: 16px;
@media (max-width: 1000px) {
font-size: 12px;
}
}
}
@@ -105,6 +121,9 @@ const {} = toRefs(data);
align-items: center;
justify-content: center;
flex-direction: column;
@media (max-width: 1000px) {
max-width: 1000px;
}
> h2{
font-family: "Poppins", Sans-serif;
font-size: 40px;
@@ -112,6 +131,10 @@ const {} = toRefs(data);
letter-spacing: 1px;
color: #000000;
margin: 100px auto;
@media (max-width: 1000px) {
font-size: 28px;
margin: 60px auto;
}
}
> .img-box{
padding: 10px;
@@ -119,12 +142,22 @@ const {} = toRefs(data);
margin-bottom: 20px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
@media (max-width: 1000px) {
flex-wrap: wrap;
max-width: 330px;
}
> .img-item{
margin: 10px;
// width: 1120px;
width: 340px;
height: 503px;
position: relative;
@media (max-width: 1000px) {
width: 100%;
aspect-ratio: 165 / 244;
}
> h2{
font-family: "Poppins", Sans-serif;
font-weight: 600;

63
src/pages/about-us/our-team.vue
View File

@@ -42,20 +42,22 @@ const {} = toRefs(data);
<template>
<section class="our-team">
<div class="content">
<h2>Our Team</h2>
<h2>{{ $t('aboutUs.ourTeam.Title') }}</h2>
</div>
</section>
<section class="our-team-item bg1">
<div class="content">
<div class="text">
<p>
Prof Wong is Cheng Yik Hung Professor in Fashion of School of Fashion and Textiles at The Hong Kong Polytechnic University and currently serving as the Chief Executive Officer and Centre Director of
<a href="https://www.aidlab.hk/">Laboratory for Artificial Intelligence in Design (AiDLab)</a>.
He is one of the inventors of the technologies to be commercialized in the start-up.
{{ $t('aboutUs.ourTeam.ProfWong') }}
<a href="https://www.aidlab.hk/">
{{ $t('aboutUs.ourTeam.ProfWongLink') }}
</a>.
{{ $t('aboutUs.ourTeam.ProfWongDesc') }}
</p>
<div class="bottom-text" ref="bottomText">
<h4 class="name">Prof Calvin WONG</h4>
<h4 class="position">Co-Founder and Technical Advisor</h4>
<h4 class="name">{{ $t('aboutUs.ourTeam.ProfWongName') }}</h4>
<h4 class="position">{{ $t('aboutUs.ourTeam.ProfWongPosition') }}</h4>
</div>
</div>
<div class="img">
@@ -70,11 +72,11 @@ const {} = toRefs(data);
</div>
<div class="text">
<p>
Ms Wong is an accomplished C-level business executive with extensive experience in the fashion and luxury goods industries, building business across China and APAC and leading operations for renowned fashion houses such as DFS USA, Lane Crawford, Burberry Asia, Brunello Cucinelli and Versace Asia Pacific.
{{ $t('aboutUs.ourTeam.MsWong') }}
</p>
<div class="bottom-text" ref="bottomText">
<h4 class="name">Ms Kim WONG</h4>
<h4 class="position">Co-Founder and Chief Executive Officer</h4>
<h4 class="name">{{ $t('aboutUs.ourTeam.MsWongName') }}</h4>
<h4 class="position">{{ $t('aboutUs.ourTeam.MsWongPosition') }}</h4>
</div>
</div>
</div>
@@ -83,11 +85,11 @@ const {} = toRefs(data);
<div class="content">
<div class="text">
<p>
Dr Zou is currently serving as Assistant Professor at School of Fashion and Textiles at The Hong Kong Polytechnic University. She is one of the inventors of the technologies to be commercialized in the start-up.
{{ $t('aboutUs.ourTeam.DrZou') }}
</p>
<div class="bottom-text" ref="bottomText">
<h4 class="name">Dr Aemika ZOU</h4>
<h4 class="position">Technical Advisor</h4>
<h4 class="name">{{ $t('aboutUs.ourTeam.DrZouName') }}</h4>
<h4 class="position">{{ $t('aboutUs.ourTeam.DrZouPosition') }}</h4>
</div>
</div>
<div class="img">
@@ -102,11 +104,11 @@ const {} = toRefs(data);
</div>
<div class="text">
<p>
Giovanni is currently the Chief Executive Officer Asia of Salvatore Ferragamo.
{{ $t('aboutUs.ourTeam.Giovanni') }}
</p>
<div class="bottom-text" ref="bottomText">
<h4 class="name">Mr Giovanni DI SALVO</h4>
<h4 class="position">Advisory Member</h4>
<h4 class="name">{{ $t('aboutUs.ourTeam.GiovanniName') }}</h4>
<h4 class="position">{{ $t('aboutUs.ourTeam.GiovanniPosition') }}</h4>
</div>
</div>
</div>
@@ -120,6 +122,9 @@ const {} = toRefs(data);
margin: 0 auto;
max-width: 730px;
padding: 100px 0px 100px 0px;
@media (max-width: 1000px) {
padding: 60px 0px 60px 0px;
}
> h2{
text-align: center;
margin-bottom: 30px;
@@ -128,11 +133,18 @@ const {} = toRefs(data);
font-weight: 600;
letter-spacing: 1px;
font-family: "Poppins", Sans-serif;
@media (max-width: 1000px) {
font-size: 28px;
margin-bottom: 0;
}
}
}
}
.our-team-item{
width: 100%;
@media (max-width: 1000px) {
padding: 40px 20px;
}
&.bg1{
background-color: #eeeeee;
.img{
@@ -150,13 +162,22 @@ const {} = toRefs(data);
max-width: 960px;
margin: 0 auto;
display: flex;
@media (max-width: 1000px) {
max-width: 330px;
flex-direction: column-reverse;
padding: 0;
}
> div{
width: 50%;
@media (max-width: 1000px) {
width: 100%;
}
}
> .text{
display: flex;
flex-direction: column;
justify-content: center;
> p{
font-family: "Poppins", Sans-serif;
font-size: 16px;
@@ -164,6 +185,9 @@ const {} = toRefs(data);
line-height: 1.6em;
color: #000000;
margin-bottom: 20px;
@media (max-width: 1000px) {
font-size: 12px;
}
> a{
color: inherit;
font-size: inherit;
@@ -180,6 +204,9 @@ const {} = toRefs(data);
color: #000000;
line-height: 1;
margin-bottom: 10px;
@media (max-width: 1000px) {
margin-bottom: 10px;
}
}
> .position{
font-family: "Poppins", Sans-serif;
@@ -197,6 +224,12 @@ const {} = toRefs(data);
height: 492px;
object-fit: cover;
max-width: 330px;
@media (max-width: 1000px) {
margin-bottom: 40px;
width: 100%;
height: auto;
aspect-ratio: 165 / 244;
}
}
}
}

25
src/pages/about-us/strategic-partners.vue
View File

@@ -20,7 +20,7 @@ const {} = toRefs(data);
<template>
<section class="strategic-partners">
<div class="content">
<h2 v-tween="{'y':'30px','opacity':0}">Strategic Partners</h2>
<h2 v-tween="{'y':'30px','opacity':0}">{{ $t('aboutUs.StrategicPartners') }}</h2>
<div class="img-box" v-tween="{'y':'30px','opacity':0}">
<a href="https://www.aidlab.hk/">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_partners_01.png" alt="">
@@ -44,6 +44,10 @@ const {} = toRefs(data);
margin: 0 auto;
max-width: 1440px;
padding: 200px 0px 200px 0px;
@media (max-width: 1000px) {
padding: 60px 20px 60px 20px;
max-width: 1000px;
}
> h2{
font-family: "Poppins", Sans-serif;
font-size: 40px;
@@ -52,6 +56,9 @@ const {} = toRefs(data);
color: #000000;
margin-bottom: 30px;
text-align: center;
@media (max-width: 1000px) {
font-size: 28px;
}
}
> .img-box{
width: 1110px;
@@ -59,8 +66,20 @@ const {} = toRefs(data);
margin-top: 40px;
display: flex;
height: 100px;
@media (max-width: 1000px) {
height: auto;
flex-direction: column;
align-items: center;
width: 100%;
}
> a{
width: 25%;
@media (max-width: 1000px) {
text-align: center;
width: 100%;
height: 100px;
}
> img{
object-fit: contain;
height: 100%;
@@ -71,6 +90,10 @@ const {} = toRefs(data);
width: 25%;
object-fit: contain;
padding: 10px;
@media (max-width: 1000px) {
width: 100%;
height: 100px;
}
}
}
}

25
src/pages/about-us/title.vue
View File

@@ -1,11 +1,16 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useGlobalStore } from '@/stores/global'
const globalStore = useGlobalStore()
const windowWidth = computed(() => globalStore.state.windowWidth)
defineExpose({})
</script>
<template>
<section class="title-section">
<div class="content">
<div class="text">
<h1>ABOUT US</h1>
<h1>{{$t('aboutUs.Title')}}</h1>
<img v-show="windowWidth < 1000" src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
</div>
</div>
</section>
@@ -13,11 +18,19 @@ defineExpose({})
<style lang="less" scoped>
.title-section{
width: 100%;
> .content{
max-width: 1400px;
margin: 0 auto;
@media (max-width: 1000px) {
max-width: 1000px;
}
> .text{
padding: 200px 300px;
position: relative;
@media (max-width: 1000px) {
padding: 100px 15px;
}
> h1{
text-align: center;
font-size: 64px;
@@ -25,6 +38,16 @@ defineExpose({})
line-height: 64px;
letter-spacing: 2px;
color: #FFFFFF;
@media (max-width: 1000px) {
font-size: 40px;
}
}
> img{
position: absolute;
top: 0;
right: 0;
z-index: -1;
height: 100%;
}
}
}

5
src/pages/events-detail/index.vue
View File

@@ -82,6 +82,9 @@ defineExpose({})
margin-top: 100px;
padding: 10px;
max-width: 740px;
@media (max-width: 1000px) {
margin-top: 0px;
}
> .img{
margin-bottom: 20px;
img{
@@ -149,10 +152,12 @@ defineExpose({})
display: grid;
grid-template-columns: repeat(3, 1fr);
> .img-item{
aspect-ratio: 3 / 2;
img{
width: 100%;
height: 100%;
object-fit: cover;
display: flex;
}
}
}

25
src/pages/events/all-events.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(['clickItem'])
const props = defineProps({
list: {
type: Array,
@@ -27,10 +28,10 @@ defineExpose({})
{{ item?.brief }}
</p>
</div>
<a href="#" class="read-more" target="_blank">
<div class="read-more" @click="$emit('clickItem', item)">
Read More
<span class="iconfont icon-direction-right"></span>
</a>
</div>
</div>
</div>
</div>
@@ -44,17 +45,29 @@ defineExpose({})
margin: 0 auto;
padding: 40px 0px 40px 0px;
max-width: 1120px;
@media (max-width: 1000px) {
padding: 40px 10px;
width: 100%;
}
> h2{
text-align: center;
margin-bottom: 50px;
font-size: 40px;
color: #222222;
font-family: "Poppins", Sans-serif;
@media (max-width: 1000px) {
font-size: 28px;
margin-bottom: 40px;
}
}
> .all-events{
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
grid-gap: 20px 30px;
@media (max-width: 1000px) {
grid-template-columns: repeat(1, minmax(100px, 1fr));
grid-gap: 30px;
}
> .img-item{
&:hover{
> .img-box{
@@ -105,6 +118,9 @@ defineExpose({})
font-weight: 600;
line-height: 1;
margin-bottom: 10px;
@media (max-width: 1000px) {
font-size: 18px;
}
&:hover{
color: #626262;
}
@@ -121,6 +137,9 @@ defineExpose({})
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
@media (max-width: 1000px) {
font-size: 14px;
}
}
.read-more{
color: #9A2125;
@@ -128,6 +147,8 @@ defineExpose({})
font-size: 14px;
text-decoration: none;
position: relative;
width: min-content;
white-space: nowrap;
&:hover{
&::after{
left: 0;

11
src/pages/events/index.vue
View File

@@ -7,7 +7,9 @@ import listZhCn from './list-zh-cn.js'
import listZhTw from './list-zh-tw.js'
import { LangType } from '../../lang'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const { locale } = useI18n()
const router = useRouter()
const allList = computed(() => {
if (locale.value === LangType.zhCn) {
return listZhCn
@@ -20,13 +22,18 @@ const allList = computed(() => {
const swiperList = computed(() => {
return allList.value.slice(0, 5)
})
const goDetail = (item) => {
router.push({
path: `/events/${item.id}`,
})
}
defineExpose({})
</script>
<template>
<div class="events">
<div class="placeholder"></div>
<Swiper :list="swiperList" />
<AllEvents :list="allList" />
<Swiper :list="swiperList" @clickItem="goDetail" />
<AllEvents :list="allList" @clickItem="goDetail" />
</div>
</template>
<style lang="less" scoped>

29
src/pages/events/swiper.vue
View File

@@ -8,6 +8,7 @@ const props = defineProps({
default: () => [],
},
})
const emit = defineEmits(['clickItem'])
//const emit = defineEmits([
//])
@@ -37,10 +38,10 @@ defineExpose({})
<div class="info">
{{ item?.brief }}
</div>
<a href="#" class="read-more" target="_blank">
<div class="read-more" @click="$emit('clickItem', item)">
Read More
<span class="iconfont icon-direction-right"></span>
</a>
</div>
</div>
</div>
@@ -66,6 +67,11 @@ defineExpose({})
margin: 0 auto;
max-width: 1120px;
position: relative;
@media (max-width: 1000px) {
max-width: 767px;
padding: 10px;
padding-top: 30px;
}
> .events-carousel{
.carousel-item{
overflow: hidden;
@@ -80,6 +86,9 @@ defineExpose({})
height: 600px;
width: 100%;
overflow: hidden;
@media (max-width: 1000px) {
height: 500px;
}
img{
width: 100%;
height: 100%;
@@ -95,6 +104,9 @@ defineExpose({})
background-color: #fff;
position: relative;
z-index: 22;
@media (max-width: 1000px) {
width: calc(100% - 50px);
}
.title{
font-family: Poppins, sans-serif;
font-weight: 600;
@@ -121,6 +133,8 @@ defineExpose({})
font-size: 14px;
text-decoration: none;
position: relative;
width: min-content;
white-space: nowrap;
&:hover{
&::after{
left: 0;
@@ -158,8 +172,16 @@ defineExpose({})
justify-content: center;
position: absolute;
bottom: 0;
z-index: 2222;
@media (max-width: 1000px) {
width: 40px;
height: 40px;
}
> span{
font-size: 38px;
@media (max-width: 1000px) {
font-size: 24px;
}
}
&:hover{
border: 1px solid #000;
@@ -167,6 +189,9 @@ defineExpose({})
}
.prev-page{
right: 112px;
@media (max-width: 1000px) {
right: 50px;
}
}
.next-page{
right: 0;

102
src/pages/help-centre/faq.vue
View File

@@ -1,43 +1,47 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref,computed } from "vue";
import { useI18n } from "vue-i18n";
// 使用接口定义
const faqList = ref([
{
id: 1,
title: 'What are the minimum, recommended system requirements?',
content: 'As AiDA is a cloud-based system, only stable internet access is required.',
},
{
id: 2,
title: 'Does AiDA run on both a PC & a MAC?',
content: 'Yes, AiDA supports both PC & MAC.',
},
{
id: 3,
title: 'Does AiDA run on an iPad?',
content: 'Yes, AiDA can be run on an iPad.',
},
{
id: 4,
title: 'What File Types it supports?',
content: 'The image file types that can be uploaded into AiDA: jpeg, jpg, png',
},
{
id: 5,
title: 'In what languages is AiDA system available',
content: 'Currently, AiDA is available in English',
},
{
id: 6,
title: 'Can I receive my invoice?',
content: 'The invoice will be sent to your registered mailbox 1 months before (for paid subscription) with the reminder email.',
},
{
id: 7,
title: 'How do I change my password?',
content: 'You could change your password after login to your account in “My Account” page “Account details” part.',
},
])
const { t } = useI18n()
const faqList = computed(()=>{
return [
{
id: 1,
title: t('helpCentre.faqItem1'),
content: t('helpCentre.faqItem1Content'),
},
{
id: 2,
title: t('helpCentre.faqItem2'),
content: t('helpCentre.faqItem2Content'),
},
{
id: 3,
title: t('helpCentre.faqItem3'),
content: t('helpCentre.faqItem3Content'),
},
{
id: 4,
title: t('helpCentre.faqItem4'),
content: t('helpCentre.faqItem4Content'),
},
{
id: 5,
title: t('helpCentre.faqItem5'),
content: t('helpCentre.faqItem5Content'),
},
{
id: 6,
title: t('helpCentre.faqItem6'),
content: t('helpCentre.faqItem6Content'),
},
{
id: 7,
title: t('helpCentre.faqItem7'),
content: t('helpCentre.faqItem7Content'),
},
]
})
const openIdList = ref([])
const openInfo = (id) => {
if(openIdList.value.includes(id)){
@@ -51,7 +55,7 @@ defineExpose({})
<template>
<section class="faq">
<div class="content">
<h2>FAQ</h2>
<h2>{{ t('helpCentre.FAQ') }}</h2>
<div class="faq-list">
<div v-for="item in faqList" :key="item.id" class="faq-item">
<h2 @click="openInfo(item.id)">
@@ -71,10 +75,15 @@ defineExpose({})
width: 100%;
padding: 60px 0;
background-color: #f9f9f9;
@media (max-width: 1000px) {
padding: 40px 0;
}
> .content{
max-width: 1140px;
margin: 0 auto;
@media (max-width: 1000px) {
max-width: 1000px;
}
> h2{
font-family: "Poppins", Sans-serif;
@@ -85,9 +94,15 @@ defineExpose({})
margin-bottom: 40px;
line-height: 1;
text-align: center;
@media (max-width: 1000px) {
font-size: 28px;
}
}
> .faq-list{
@media (max-width: 1000px) {
padding: 0 20px;
}
> .faq-item{
border-bottom: 1px solid #d5d8dc;
> h2{
@@ -101,6 +116,10 @@ defineExpose({})
align-items: flex-start;
justify-content: space-between;
cursor: pointer;
@media (max-width: 1000px) {
padding: 20px 0;
font-size: 16px;
}
> span{
font-size: 14px;
transition: all .3s;
@@ -123,6 +142,9 @@ defineExpose({})
font-size: 14px;
line-height: 20px;
margin-bottom: 20px;
@media (max-width: 1000px) {
padding: 12px;
}
}
}
}

7
src/pages/help-centre/index.vue
View File

@@ -1,11 +1,16 @@
<script setup lang="ts">
import { computed } from 'vue'
import Title from './title.vue'
import Faq from './faq.vue'
import { useGlobalStore } from '@/stores/global'
const globalStore = useGlobalStore()
const windowWidth = computed(() => globalStore.state.windowWidth)
defineExpose({})
</script>
<template>
<div class="about-us">
<div class="bg">
<div class="bg" v-show="windowWidth > 1000">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/helpcentre_banner-1.jpg" alt="">
</div>
<Title />

26
src/pages/help-centre/title.vue
View File

@@ -1,11 +1,16 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useGlobalStore } from '@/stores/global'
const globalStore = useGlobalStore()
const windowWidth = computed(() => globalStore.state.windowWidth)
defineExpose({})
</script>
<template>
<section class="title-section">
<div class="content">
<div class="text">
<h1>HELP CENTRE</h1>
<h1>{{ $t('helpCentre.Title') }}</h1>
<img v-show="windowWidth < 1000" src="https://code-create.com.hk/wp-content/uploads/2022/11/helpcentre_banner-1.jpg" alt="">
</div>
</div>
</section>
@@ -16,8 +21,15 @@ defineExpose({})
> .content{
max-width: 1400px;
margin: 0 auto;
@media (max-width: 1000px) {
max-width: 1000px;
}
> .text{
padding: 200px 300px;
position: relative;
@media (max-width: 1000px) {
padding: 100px 15px;
}
> h1{
text-align: center;
font-size: 64px;
@@ -25,6 +37,18 @@ defineExpose({})
line-height: 64px;
letter-spacing: 2px;
color: #FFFFFF;
@media (max-width: 1000px) {
font-size: 40px;
}
}
> img{
position: absolute;
top: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
object-fit: cover;
}
}
}

231
src/pages/user-stories/user-list.vue
View File

@@ -1,116 +1,122 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref,computed } from "vue";
import MyEvent from "@/tools/myEvents";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const playVideo = (item)=>{
MyEvent.emit("playVideo",{
url: item.videoUrl,
poster: item.imgUrl,
});
}
const list = ref([
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.png',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.mp4',
name: 'XULULU',
textList: [
'AiDA is a very interesting and creatively inspiring system that showcases limitless potential in fashion design. Traditional designers can typically create only a handful of styles in a day, whereas AiDA can generate multiple designs in an instant, making its efficiency incomparable to that of humans.',
'This high level of productivity makes AiDA an invaluable tool for designers, and the vast array of designs it produces also provides valuable learning opportunities. By analyzing and appreciating these designs, designers can gain inspiration and enhance their own creative skills.',
'Therefore, I believe that in the future, AiDA has the potential to become an essential tool for designers, driving innovation and transformation in the fashion industry.'
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau.png',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau1.mp4',
name: 'Yiu Ching Yau',
textList: [
'Throughout the process of using AiDA, I deeply felt the significant impact of artificial intelligence on the future society. AI has provided me with a lot of innovative ideas for clothing design, such as the use of different garments, the combination of silhouettes and the matching of materials. Because of the intelligence of AI, I have received a lot of inspiration. AI’s intelligence has provided me with a lot of inspiration that I never thought of, and its convenient and fast design methods have also greatly promoted my creative process.',
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT-scaled.png',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT.mp4',
name: 'XIEYAUKIT',
textList: [
'Using AiDA has been a transformative experience in my design journey. The integration of technology and creativity has allowed me to explore new dimensions in my work. One of the most significant advantages of AiDA is its ability to automate repetitive tasks, such as creating style sketches. This automation has freed up valuable time, enabling me to focus on the more creative aspects of my designs. ',
'Reflecting on my experience with AiDA, I feel a renewed sense of excitement about the future of design. It has not only improved my skills but also opened my eyes to the endless possibilities that lie ahead when creativity meets technology.',
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai-scaled.jpg',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai1.mp4',
name: 'Yuzhi Lai',
textList: [
'During the process of using AiDA for fashion design, I experienced unprecedented convenience and efficiency. Especially in the stages of color extraction and generating design sketches, as well as further developing them into fashion rendering image, the powerful capabilities of AI technology left me deeply impressed.',
'Using AiDA for fashion design is a highly enjoyable and innovative experience. Despite some limitations, I still believe that AiDA has brought revolutionary changes to the field of fashion design. Its efficiency and convenience have greatly shortened the design cycle. I look forward to future breakthroughs in AiDA and the emergence of more stunning design works.',
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.png',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.mp4',
name: 'Cheung Tsz Ching（Bobo）',
textList: [
'Through this competition, I had the opportunity to explore many different features of AiDA. Using AiDA allows me to design a collection step by step, starting from a moodboard. It provides the ability to edit outfit details, such as prints and colors. This feature makes it easier for the designs to align with my desired outcomes. Once completed, AiDA can generate real-life versions of the designs, making my work feel more complete. ',
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_INJURY_thumb.jpg',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory3.mp4',
name: 'INJURY from Australia',
textList: [
'Regarding the user experience of AiDA, we would like to use five keywords to describe, which are “Surprise” “Easy”, “Unlimited”, “Automatic” and “Fast”.',
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Jae_thumb.jpg',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory2.mp4',
name: 'BESFXXK from Korea',
textList: [
'Those keywords that come to my mind when describing the systems are “Safe”, “Fast”, “Friendly”, “Smart” and “Futuristic”',
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Mountain_thumb.jpg',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory1.mp4',
name: 'Mountain Yam from Hong Kong',
textList: [
'The process is “Simple and user-friendly”, and the system is “Efficient”, “Fruitful”, “Innovative” and “Solidarity”.',
],
},
])
const userList = ref([
{
profile:'https://code-create.com.hk/wp-content/uploads/2025/04/WhatsApp-Image-2025-04-23-at-18.36.16_740726a9-794x1024.jpg',
name: 'Prof. Jung',
school: 'Hanyang University Department of Clothing and Textiles',
info: 'In the “Digital Fashion Content Development” course, I’ve integrated the AiDA system into a 4-week mini-project with the goal of designing a “My Own Capsule Collection.” The class included a diverse group of students. Even those without prior knowledge of fashion design were able to create fun and imaginative designs within just three weeks using AiDA. Most notably, AiDA’s powerful generative AI system stimulated students’ creativity, enabling them to produce designs beyond what they thought they were capable of. Based on this experience, I summarized the impact of AiDA through a short rhyme: “No barrier to begin — that’s for sure, Ready to use everywhere, Boosting designer’s flair to dare.”',
},
{
profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_irene_siu-1-150x150.jpg',
name: 'Irene Siu',
info: 'The concept of AiDA has many potential applications in the fashion industry, which are still waiting for us to discover and develop.',
},
{
profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_joyce_chow-150x150.jpg',
name: 'Joyce Chow',
info: 'AiDA lets the fashion industry go into a new generation. A successful AiDA can help to push – eco-friendliness, which is one of the most crucial worldwide topics in the fashion industry.',
},
{
profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_cheryl_ho-150x150.jpg',
name: 'Cheryl Ho',
info: 'Apart from providing new elements to inform my design process, AiDA also inspires me by offering much more variety of proportions and outfit combinations.',
},
{
profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_minna_n_polam-150x150.jpg',
name: 'Minna & Polam',
info: 'AiDA helps us mix and match each item and generate colours so we can quickly see what it will look like – all items match together, and the effects come with different colours and patterns. It also assists us at the design development stage by learning our style and taste.',
},
])
const list = computed(()=>{
return[
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.png',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.mp4',
name: 'XULULU',
textList: [
t('userStories.XULULUInfo1'),
t('userStories.XULULUInfo2'),
t('userStories.XULULUInfo3'),
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau.png',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau1.mp4',
name: 'Yiu Ching Yau',
textList: [
t('userStories.YiuChingYauInfo1'),
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT-scaled.png',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT.mp4',
name: 'XIEYAUKIT',
textList: [
t('userStories.XIEYAUKITInfo1'),
t('userStories.XIEYAUKITInfo2'),
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai-scaled.jpg',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai1.mp4',
name: 'Yuzhi Lai',
textList: [
t('userStories.YuzhiLaiInfo1'),
t('userStories.YuzhiLaiInfo2'),
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.png',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.mp4',
name: 'Cheung Tsz Ching（Bobo）',
textList: [
t('userStories.CheungTszChingInfo1'),
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_INJURY_thumb.jpg',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory3.mp4',
name: 'INJURY from Australia',
textList: [
t('userStories.INJURYInfo1'),
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Jae_thumb.jpg',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory2.mp4',
name: 'BESFXXK from Korea',
textList: [
t('userStories.BESFXXKInfo1'),
],
},
{
imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Mountain_thumb.jpg',
videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory1.mp4',
name: 'Mountain Yam from Hong Kong',
textList: [
t('userStories.MountainYamInfo1'),
],
},
]
})
const userList = computed(()=>{
return [
{
profile:'https://code-create.com.hk/wp-content/uploads/2025/04/WhatsApp-Image-2025-04-23-at-18.36.16_740726a9-794x1024.jpg',
name: 'Prof. Jung',
school: t('userStories.ProfJungSchool'),
info: t('userStories.ProfJungInfo1'),
},
{
profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_irene_siu-1-150x150.jpg',
name: 'Irene Siu',
info: t('userStories.IreneSiuInfo1'),
},
{
profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_joyce_chow-150x150.jpg',
name: 'Joyce Chow',
info: t('userStories.JoyceChowInfo1'),
},
{
profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_cheryl_ho-150x150.jpg',
name: 'Cheryl Ho',
info: t('userStories.CherylHoInfo1'),
},
{
profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_minna_n_polam-150x150.jpg',
name: 'Minna & Polam',
info: t('userStories.MinnaPolamInfo1'),
},
]
})
defineExpose({})
</script>
<template>
<section class="user-list">
<div class="content">
<h2>User Stories</h2>
<h2>{{ $t('userStories.Title') }}</h2>
</div>
</section>
<section class="user-item" v-for="item in list" :key="item.name">
@@ -159,6 +165,10 @@
margin: 0 auto;
max-width: 1140px;
padding: 100px 0px 100px 0px;
@media (max-width: 1000px) {
padding: 10px;
padding-top: 50px;
}
> h2{
text-align: center;
width: 100%;
@@ -166,6 +176,9 @@
font-weight: 600;
letter-spacing: 1px;
color: #000000;
@media (max-width: 1000px) {
padding: 7px 15px;
}
}
}
}
@@ -175,6 +188,9 @@
&:nth-child(2n){
> .content{
flex-direction: row-reverse;
@media (max-width: 1000px) {
flex-direction: column;
}
}
}
> .content{
@@ -182,9 +198,17 @@
max-width: 1140px;
padding: 40px 0;
display: flex;
@media (max-width: 1000px) {
padding: 20px 0;
flex-direction: column-reverse;
max-width: 1000px;
}
> div{
width: 50%;
padding: 20px;
@media (max-width: 1000px) {
width: 100%;
}
}
> .video-box{
display: flex;
@@ -264,6 +288,9 @@
padding: 20px;
display: flex;
flex-wrap: wrap;
@media (max-width: 1000px) {
max-width: 1000px;
}
> .item{
margin: 40px 0;
width: 50%;
@@ -274,6 +301,10 @@
&:nth-child(1){
width: 100%;
}
@media (max-width: 1000px) {
width: 100%;
margin: 0;
}
> .img-box{
width: 100%;
height: 40px;