完善移动端适配

src/pages/help-centre/title.vue

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