Code-Create/src/pages/about-us/title.vue

<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>{{$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>
</template>
<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;
					font-weight: 600;
					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%;
				}
			}
		}
	}
</style>