头部和mixi适配移动端

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>