sky-take-out/src/commpent/aside.vue

<template>
	<el-menu :collapse="store.isCollapse" default-active="1">
		<div :style="!store.isCollapse ? 'width: 100%' : 'width: 63px'" class="logo">
			<img v-show="!store.isCollapse" alt="图标" src="../assets/login/logo.png" srcset="../assets/login/logo.png" />
			<img v-show="store.isCollapse" alt="图标" src="../assets/login/mini-logo.png" srcset="../assets/login/mini-logo.png" />
		</div>
		<el-menu-item v-for="(item, index) in menuData" :key="index" :index="(index + 1).toString()">
			<el-icon>
				<component :is="item.icon" />
			</el-icon>
			<template #title>
				<RouterLink :to="item.path" style="width: 100%; height: 100%; color: #bfcbd9">{{ item.label }}</RouterLink>
			</template>
		</el-menu-item>
	</el-menu>
</template>

<script lang="ts" setup>
import { headerStore } from '@/store/header';
import { menuData } from '@/config/menuData';

const store = headerStore();
</script>

<style lang="scss" scoped>
// 图标
.logo {
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 62px;
	background-color: var(--el-color-primary);

	img {
		height: 31px;
	}
}

.el-menu {
	max-width: 200px;
	min-width: 63px;
	height: 100%;
	background: #343744 !important;

	.el-menu-item {
		color: #bfcbd9;
	}
}
</style>