头部和mixi适配移动端

src/components/main-header.vue

@@ -1,10 +1,10 @@
 <template>
 	<header class="main-header" v-scroll-progress>
 		<a href="/" class="logo"><img src="../assets/logo-full.png" alt="code-create" /></a>
-		<div class="center-nav">
+		<div class="center-nav" v-show="windowWidth > 1000">
 			<div class="nav-item" v-for="item in navList" :key="item.name">
 				<down-menu :title="$t(item.name)" v-if="item.children">
-					<router-link :to="child.path" v-for="(child) in item.children" :key="child.name">
+					<router-link :to="child.path" v-for="child in item.children" :key="child.name">
 						{{ $t(child.name) }}
 					</router-link>
 				</down-menu>
@@ -13,7 +13,7 @@
 				}}</router-link>
 			</div>
 		</div>
-		<div class="right">
+		<div class="right" v-show="windowWidth > 1000">
 			<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
 				<router-link
 					class="link"
@@ -31,10 +31,20 @@
 				<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
 			</router-link>
 		</div>
+		<div class="right" v-show="windowWidth <= 1000">
+			<span class="iconfont icon-caidan" @click="openMainMenu"></span>
+		</div>
 	</header>
+	<main-menu-dialog
+		ref="mainMenuDialogRef"
+		:menu-list="navList"
+		:lang-list="langList"
+		:path="path"
+	/>
 </template>
 <script setup lang="ts">
-	import { ref, watch, computed } from 'vue'
+	import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
+	import MainMenuDialog from './main-menu-dialog.vue'
 	import DownMenu from './down-menu.vue'
 	import { setLang, LangType } from '../lang'
 	import { useI18n } from 'vue-i18n'
@@ -65,7 +75,7 @@
 		}
 	])
 
-	const navList:any = ref([
+	const navList: any = ref([
 		{
 			name: 'MainHeader.Home',
 			path: '/'
@@ -115,6 +125,22 @@
 			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 = () => {
+		mainMenuDialogRef.value.open()
+	}
 </script>
 <style lang="less" scoped>
 	.main-header {
@@ -219,6 +245,14 @@
 					font-size: 22px;
 				}
 			}
+			> .icon-caidan {
+				color: #fff;
+				font-size: 24px;
+				cursor: pointer;
+			}
+		}
+		@media (max-width: 1000px) {
+			padding: 7px 15px;
 		}
 	}
 </style>