移动端适配

src/components/main-header.vue

@@ -50,8 +50,11 @@
 	import { useI18n } from 'vue-i18n'
 	const { locale } = useI18n()
 	import { useRoute } from 'vue-router'
+	import { useGlobalStore } from '@/stores/global'
 	import { useUserInfoStore } from '@/stores/userInfo'
 	const userInfoStore = useUserInfoStore()
+	const globalStore = useGlobalStore()
+	const windowWidth = computed(() => globalStore.state.windowWidth)
 	const token = computed(() => userInfoStore.state.token)
 	const route = useRoute()
 	const lang = computed(() => route.params.lang)
@@ -125,17 +128,6 @@
 			path: '/contact-us'
 		}
 	])
-	const windowWidth = ref(1920)
-	const resize = () => {
-		windowWidth.value = window.innerWidth
-	}
-	onMounted(() => {
-		resize()
-		window.addEventListener('resize', resize)
-	})
-	onBeforeUnmount(() => {
-		window.removeEventListener('resize', resize)
-	})
 
 	const mainMenuDialogRef = ref()
 	const openMainMenu = () => {

src/pages/contact-us/index.vue

@@ -27,12 +27,13 @@
 
 <style scoped lang="less">
 	.contact-us {
+		--bg-height: 514px;
 		> * {
 			position: relative;
 			z-index: 1;
 		}
 		> .bg {
-			height: 514px;
+			height: var(--bg-height);
 			width: 100%;
 			object-fit: cover;
 			position: fixed;
@@ -40,7 +41,7 @@
 			z-index: 0;
 		}
 		> .header {
-			height: 514px;
+			height: var(--bg-height);
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -84,5 +85,22 @@
 				max-width: 860px;
 			}
 		}
+		@media (max-width: 800px) {
+			--bg-height: 239px;
+			> .header {
+				> h1 {
+					font-size: 40px;
+					margin-bottom: 20px;
+				}
+			}
+			> .contact {
+				> .iconfont {
+					font-size: 36px;
+				}
+			}
+			> .contact-input {
+				padding: 60px 20px;
+			}
+		}
 	}
 </style>

src/pages/media/index.vue

@@ -113,12 +113,13 @@
 
 <style scoped lang="less">
 	.media {
+		--bg-height: 464px;
 		> * {
 			position: relative;
 			z-index: 1;
 		}
 		> .bg {
-			height: 464px;
+			height: var(--bg-height);
 			width: 100%;
 			object-fit: cover;
 			position: fixed;
@@ -126,7 +127,7 @@
 			z-index: 0;
 		}
 		> .header {
-			height: 464px;
+			height: var(--bg-height);
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -140,10 +141,11 @@
 		> .content {
 			width: 100%;
 			padding: 100px 0;
-			background-color: #fff;
+			background-color: #f9f9f9;
 			font-size: 14px;
 			> .box {
 				max-width: 1140px;
+				padding: 0 20px;
 				margin: 0 auto;
 				> .nav {
 					display: flex;
@@ -174,5 +176,31 @@
 				}
 			}
 		}
+		@media (max-width: 800px) {
+			--bg-height: 239px;
+			> .content {
+				padding: 30px 0;
+				> .box {
+					> .nav {
+						margin-bottom: 20px;
+					}
+					> .list {
+						padding: 0;
+						> div {
+							> .date {
+								min-width: 0;
+								width: 25%;
+								margin-right: 10px;
+								color: #999;
+								flex-shrink: 0;
+							}
+							> .text {
+								color: #222;
+							}
+						}
+					}
+				}
+			}
+		}
 	}
 </style>

src/pages/my-account/account-info.vue

@@ -111,5 +111,16 @@
 		> .content {
 			flex: 1;
 		}
+		@media (max-width: 800px) {
+			flex-direction: column;
+			> .left {
+				width: 100%;
+				border: none;
+				margin-bottom: 20px;
+				>.info{
+					text-align: center;
+				}
+			}
+		}
 	}
 </style>

src/pages/my-account/css/style.css

@@ -16,11 +16,19 @@
 .register > form > * {
   margin-bottom: 20px;
 }
+.login > form .link,
+.register > form .link {
+  color: #222;
+}
 .login > form > .form-item,
 .register > form > .form-item {
   display: flex;
   flex-direction: column;
 }
+.login > form > .form-item.center,
+.register > form > .form-item.center {
+  align-items: center;
+}
 .login > form > .form-item > label,
 .register > form > .form-item > label {
   margin-bottom: 5px;
@@ -87,7 +95,6 @@
 .login > form > .remember > .link,
 .register > form > .remember > .link {
   margin-left: auto;
-  color: #222;
 }
 .login > form > .subscribe,
 .register > form > .subscribe {

src/pages/my-account/index.vue

@@ -48,7 +48,7 @@
 		> .content {
 			max-width: 1200px;
 			margin: 0 auto;
-			padding-bottom: 80px;
+			padding: 0 15px 80px;
 			display: flex;
 			align-items: flex-start;
 			gap: 60px;
@@ -57,5 +57,14 @@
 			}
 			animation: opacity-in 0.3s linear both;
 		}
+		@media (max-width: 800px) {
+			> .content {
+				flex-direction: column;
+				gap: 30px;
+				> * {
+					width: 100%;
+				}
+			}
+		}
 	}
 </style>

src/pages/my-account/less/style.less

@@ -17,10 +17,19 @@
 			margin-bottom: 20px;
 		}
 
+		.link {
+			color: #222;
+
+		}
+
 		>.form-item {
 			display: flex;
 			flex-direction: column;
 
+			&.center {
+				align-items: center;
+			}
+
 			>label {
 				margin-bottom: 5px;
 				font-size: 16px;
@@ -83,7 +92,6 @@
 
 			>.link {
 				margin-left: auto;
-				color: #222;
 			}
 
 		}

src/pages/my-account/login.vue

@@ -26,20 +26,26 @@
 			<div class="remember">
 				<input type="checkbox" id="remember" name="remember" v-model="remember" />
 				<label for="remember">Remember me</label>
-				<router-link class="link" to="/my-account/lost-password"
+				<router-link class="link" to="/my-account/lost-password" v-show="windowWidth > 800"
 					>Lost your password?</router-link
 				>
 			</div>
 			<button type="submit" custom>LOG IN</button>
+			<div class="form-item center">
+				<router-link class="link" to="/my-account/lost-password" v-show="windowWidth <= 800"
+					>Lost your password?</router-link
+				>
+			</div>
 		</form>
 	</div>
 </template>
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, computed } from 'vue'
 	import { useGlobalStore } from '@/stores/global'
 	const globalStore = useGlobalStore()
 	import { useUserInfoStore } from '@/stores/userInfo'
 	const userInfoStore = useUserInfoStore()
+	const windowWidth = computed(() => globalStore.state.windowWidth)
 	const passShow = ref(false)
 	const remember = ref(false)
 	const fromData = ref({

src/pages/others/not-found-404.vue

@@ -58,5 +58,10 @@
 				margin-bottom: 20px;
 			}
 		}
+		@media (max-width: 800px) {
+			> .content {
+				padding: 50px 15px;
+			}
+		}
 	}
 </style>

src/pages/others/others-header.vue

@@ -38,5 +38,8 @@
 			text-transform: none;
 			color: #ffffff;
 		}
+		@media (max-width: 800px) {
+			padding: 25px 0;
+		}
 	}
 </style>

src/pages/others/site-map.vue

@@ -93,5 +93,18 @@
 				}
 			}
 		}
+		@media (max-width: 800px) {
+			> .content {
+				flex-direction: column;
+				padding: 70px 90px;
+				> div {
+					padding: 0;
+					margin-bottom: 30px;
+					> div {
+						margin-bottom: 30px;
+					}
+				}
+			}
+		}
 	}
 </style>

src/stores/global.ts

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 export const useGlobalStore = defineStore('global', () => {
 	const state = ref({
 		loading: false,// 全局loading
+		windowWidth: window.innerWidth,// 页面宽度
 	})
 
 	const setLoading = (v: boolean) => { state.value.loading = v }
@@ -12,3 +13,6 @@ export const useGlobalStore = defineStore('global', () => {
 		setLoading,
 	}
 })
+window.addEventListener('resize', () => {
+	useGlobalStore().state.windowWidth = window.innerWidth
+})