42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router'
|
|
const { cut } = defineProps(["cut"])
|
|
const routerList = useRouter().options.routes[0]?.children
|
|
</script>
|
|
<template>
|
|
<div class="side_bar" :style="{ width: cut ? '250px' : '80px' }">
|
|
<div class="title"> {{ cut ? "调压通后台管理系统" : "调压通" }}</div>
|
|
<el-menu router :collapse="!cut" default-active="/overview" class="menu" background-color="#304156"
|
|
text-color="#bfcbd9" active-text-color="#409EFF">
|
|
<el-menu-item class="menu_item" v-for="route in routerList" :key="route.name" :index="route.path">
|
|
<i :class="['iconfont', route.meta?.icon]"></i>
|
|
<span>{{ route.meta?.title }}</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.side_bar {
|
|
background-color: #304156;
|
|
transition: all 0.3s;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
background-color: #2b2f3a;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
height: 60px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.menu {
|
|
border-right: none;
|
|
|
|
i {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style> |