优化页面布局

src/lang/zh-cn.ts

@@ -148,7 +148,7 @@ export default {
 			ProfWongPosition: '联合创办人和技术顾问',
 			MsWong: '王女士在时尚和奢侈品行业拥有丰富的高阶管理经验，于中国内地和亚太地区建立业务，并带领知名时装公司的营运，包括DFS USA、Lane Crawford、Burberry Asia、Brunello Cucinelli和Versace Asia Pacific。',
 			MsWongName: '王剑虹女士',
-			MsWongPosition: '联合创办人及行政总裁r',
+			MsWongPosition: '联合创办人及行政总裁',
 			DrZou: '邹博士目前是人工智能设计研究所的技术项目经理。 她是Code Create商业化技术的发明者之一。',
 			DrZouName: '邹星星博士',
 			DrZouPosition: '技术顾问',

src/pages/about-us/index.vue

@@ -1,15 +1,11 @@
 <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'
 import { useHead } from '@unhead/vue'
 import { useI18n } from 'vue-i18n'
-const globalStore = useGlobalStore()
-const windowWidth = computed(() => globalStore.state.windowWidth)
 const { t } = useI18n()
 useHead({
 	title: t('aboutUs.Title'),
@@ -25,9 +21,6 @@ defineExpose({})
 </script>
 <template>
 	<div class="about-us">
-		<div class="bg" v-show="windowWidth > 1000">
-			<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/12/about_banner-1.jpg" alt="">
-		</div>
 		<Title />
 		<Ecosystem />
 		<Mission />
@@ -40,14 +33,5 @@ defineExpose({})
 		width: 100%;
 		height: 100%;
 		position: relative;
-		> .bg{
-			width: 100%;
-			position: fixed;
-			z-index: -1;
-			top: 0;
-			> img{
-				width: 100%;
-			}
-		}
 	}
 </style>

src/pages/about-us/mission.vue

@@ -150,12 +150,11 @@ const {} = toRefs(data);
 				> .img-item{
 					margin: 10px;
 					// width: 1120px;
-					width: 340px;
-					height: 503px;
 					position: relative;
+					aspect-ratio: 165 / 244;
+					width: 25%;
 					@media (max-width: 1000px) {
 						width: 100%;
-						aspect-ratio: 165 / 244;
 					}
 					> h2{
 						font-family: "Poppins", Sans-serif;

src/pages/about-us/title.vue

@@ -10,7 +10,6 @@ defineExpose({})
 		<div class="content">
 			<div class="text">
 				<h1>{{$t('aboutUs.Title')}}</h1>
-				<img v-show="windowWidth < 1000" src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/12/about_banner-1.jpg" alt="">
 			</div>
 		</div>
 	</section>
@@ -18,7 +17,15 @@ defineExpose({})
 <style lang="less" scoped>
 	.title-section{
 		width: 100%;
-	
+		background-color: #000000;
+		background-image: url(https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/12/about_banner-1.jpg);
+		background-position: top center;
+		background-repeat: no-repeat;
+		background-size: auto;
+		background-attachment: fixed;
+		@media (max-width: 1000px) {
+			background-attachment: scroll;
+		}
 		> .content{
 			max-width: 1400px;
 			margin: 0 auto;
@@ -42,13 +49,6 @@ defineExpose({})
 						font-size: 40px;
 					}
 				}
-				> img{
-					position: absolute;
-					top: 0;
-					right: 0;
-					z-index: -1;
-					height: 100%;
-				}
 			}
 		}
 	}

src/pages/events/all-events.vue

@@ -14,7 +14,7 @@ defineExpose({})
 		<div class="content">
 			<h2>ALL EVENTS</h2>
 			<div class="all-events">
-				<div v-for="item in list" :key="item.url" class="img-item">
+				<div v-for="item  in list as any" :key="item.url" class="img-item">
 					<div class="img-box">
 						<img :src="item.coverUrl" alt="">
 						<div class="line">

src/pages/events/swiper.vue

@@ -27,7 +27,7 @@ defineExpose({})
 				:interval="1000"
 				class="events-carousel"
 			>
-				<div class="carousel-item" v-for="(item,index) in list" :key="index">
+				<div class="carousel-item" v-for="(item,index) in list as any" :key="index">
 					<div class="img-box">
 						<img :src="item?.coverUrl" alt="">
 					</div>

src/pages/help-centre/index.vue

@@ -1,18 +1,10 @@
 <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" v-show="windowWidth > 1000">
-			<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/helpcentre_banner-1.jpg" alt="">
-		</div>
 		<Title />
 		<Faq />
 	</div>
@@ -22,14 +14,5 @@ defineExpose({})
 		width: 100%;
 		height: 100%;
 		position: relative;
-		> .bg{
-			width: 100%;
-			position: fixed;
-			z-index: -1;
-			top: 0;
-			> img{
-				width: 100%;
-			}
-		}
 	}
 </style>

src/pages/help-centre/title.vue

@@ -1,8 +1,4 @@
 <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>
@@ -10,7 +6,6 @@ defineExpose({})
 		<div class="content">
 			<div class="text">
 				<h1>{{ $t('helpCentre.Title') }}</h1>
-				<img v-show="windowWidth < 1000" src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/helpcentre_banner-1.jpg" alt="">
 			</div>
 		</div>
 	</section>
@@ -18,6 +13,15 @@ defineExpose({})
 <style lang="less" scoped>
 	.title-section{
 		width: 100%;
+		background-color: #000000;
+		background-image: url(https://s3.ap-east-1.amazonaws.com/code-create.com.hk//2022/11/helpcentre_banner-1.jpg);
+		background-position: top center;
+		background-repeat: no-repeat;
+		background-size: auto;
+		background-attachment: fixed;
+		@media (max-width: 1000px) {
+			background-attachment: scroll;
+		}
 		> .content{
 			max-width: 1400px;
 			margin: 0 auto;

src/pages/media/index.vue

@@ -19,7 +19,7 @@
 					>
 				</div>
 				<div class="list">
-					<div class="item" v-for="v in list" :key="nav + v.text">
+					<div class="item" v-for="v in list as any" :key="nav + v.text">
 						<span class="date">{{ FormatDate(v.date, 'SM D, YYYY') }}</span>
 						<a class="text" :href="v.url" target="_blank">{{ v.text }}</a>
 					</div>