51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
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>
|