头部和mixi适配移动端

src/components/email-box.vue

@@ -78,5 +78,15 @@
 			text-transform: uppercase;
 			--hover-backcolor: #000;
 		}
+		@media (max-width: 800px) {
+			padding: 20px;
+			border-radius: 20px;
+			> .title {
+				font-size: 20px;
+			}
+			> .tip {
+				font-size: 12px;
+			}
+		}
 	}
 </style>

src/components/main-footer.vue

@@ -79,5 +79,15 @@
 				}
 			}
 		}
+		@media (max-width: 800px) {
+			padding: 15px 20px;
+			flex-direction: column;
+			align-items: center;
+			> .right {
+				> div {
+					border-left: none;
+				}
+			}
+		}
 	}
 </style>

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>

src/components/main-menu-dialog.vue

@@ -0,0 +1,210 @@
+<template>
+	<div class="main-menu-dialog" @click="close" :class="{ show: show }">
+		<div class="close" @click="close"><span class="iconfont icon-close"></span></div>
+		<div class="content" @click.stop>
+			<div class="menu-item" v-for="item in menuList" :key="item.name">
+				<router-link
+					@click="onItemClick(item)"
+					class="link"
+					:class="{
+						active: activeChild === item.name,
+						parent: !!item.children
+					}"
+					:to="item.path"
+					>{{ $t(item.name) }}</router-link
+				>
+				<div v-if="item.children" class="child" v-show="activeChild === item.name">
+					<router-link
+						class="link"
+						:to="child.path"
+						v-for="child in item.children"
+						:key="child.name"
+						@click="close"
+					>
+						{{ $t(child.name) }}
+					</router-link>
+				</div>
+			</div>
+			<router-link class="link" to="/my-account" @click="close">
+				<span class="iconfont icon-tubiao-"></span>
+				<span v-if="token">{{ $t('MainHeader.MyAccount') }}</span>
+				<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
+			</router-link>
+			<div class="lang">
+				<router-link
+					class="link"
+					:to="`/${item.value}${path}`"
+					v-for="item in langList"
+					:key="item.value"
+					v-show="item.value !== locale"
+					@click="close"
+				>
+					{{ item.label }}
+				</router-link>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
+	import DownMenu from './down-menu.vue'
+	import { setLang, LangType } from '../lang/index.js'
+	import { useI18n } from 'vue-i18n'
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const userInfoStore = useUserInfoStore()
+	const { locale } = useI18n()
+	const token = computed(() => userInfoStore.state.token)
+	const props = defineProps({
+		menuList: {
+			type: [Array, Object],
+			default: () => []
+		},
+		langList: {
+			type: [Array, Object],
+			default: () => []
+		},
+		path: {
+			type: String,
+			default: ''
+		}
+	})
+	const activeChild = ref('')
+	const show = ref(true)
+	const close = () => {
+		show.value = false
+	}
+	const open = () => {
+		show.value = true
+	}
+	const onItemClick = (item) => {
+		if (item.children) {
+			if (activeChild.value === item.name) {
+				activeChild.value = ''
+			} else {
+				activeChild.value = item.name
+			}
+		} else {
+			close()
+		}
+	}
+	defineExpose({
+		open,
+		close
+	})
+</script>
+<style lang="less" scoped>
+	.main-menu-dialog {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background: rgba(24, 24, 24, 0.3);
+		z-index: 10001;
+		overflow: hidden;
+		display: flex;
+		justify-content: flex-end;
+		animation: main-hide 0.2s linear both;
+		&.show {
+			animation: main-show 0.2s linear both;
+		}
+		> .close {
+			width: 37px;
+			height: 37px;
+			border-radius: 50%;
+			background-color: #fff;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			margin: 10px;
+			color: #222;
+		}
+		> .content {
+			max-width: 300px;
+			flex: 1;
+			height: 100%;
+			background-color: #4d4d4d;
+			padding: 10px 20px;
+			.link {
+				color: #fff;
+				text-decoration: none;
+				font-size: 14px;
+				display: flex;
+				align-items: center;
+				padding: 10px 0;
+				&:hover {
+					color: #d5d5d5;
+				}
+				> .iconfont {
+					margin-right: 5px;
+					font-size: 22px;
+				}
+			}
+			> .menu-item {
+				> .parent {
+					position: relative;
+					&::after,
+					&::before {
+						content: '';
+						position: absolute;
+						width: 6px;
+						height: 0;
+						border-top: 1px solid #fff;
+						right: 0;
+						transition: transform 0.2s linear;
+					}
+					&::after {
+						transform: rotate(-45deg);
+					}
+					&::before {
+						right: 4px;
+						transform: rotate(45deg);
+					}
+					&.active {
+						&::after,
+						&::before {
+							transform: rotate(0deg);
+						}
+					}
+				}
+				> .child {
+					opacity: 0.7;
+					border-left: 1px solid #e1e1e1;
+					> .link {
+						padding-left: 20px;
+					}
+				}
+			}
+			> .lang {
+				display: flex;
+				align-items: center;
+				margin-top: 20px;
+				margin-left: 10px;
+				> .link {
+					padding: 0 10px;
+				}
+			}
+		}
+		@keyframes main-show {
+			0% {
+				opacity: 0;
+				display: none;
+			}
+
+			100% {
+				opacity: 1;
+			}
+		}
+		@keyframes main-hide {
+			0% {
+				opacity: 1;
+			}
+
+			100% {
+				opacity: 0;
+				display: none;
+			}
+		}
+	}
+</style>