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

完善移动端适配

Browse Source
This commit is contained in:
X1627315083@163.com
2026-06-02 13:23:41 +08:00
parent 2e35fd4de9
commit d98ddd2940
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%;
}
}
}