完善移动端适配

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

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;
}
}
}
}