55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
|
<el-scrollbar>
|
|
<div class="menu-title">
|
|
胆道闭锁管理系统
|
|
</div>
|
|
<el-menu :default-active="route.path" router>
|
|
<el-menu-item index="/user">
|
|
<el-icon><User /></el-icon>
|
|
患者管理
|
|
</el-menu-item>
|
|
<el-menu-item index="/news">
|
|
<el-icon><Document /></el-icon>
|
|
患教文章
|
|
</el-menu-item>
|
|
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</template>
|
|
<script setup>
|
|
import { useRoute } from 'vue-router';
|
|
const route = useRoute()
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.el-menu {
|
|
border-right: none;
|
|
background-color: #2b3a4a;
|
|
color: #fff;
|
|
}
|
|
|
|
.el-menu-item {
|
|
color: #fff;
|
|
&:hover {
|
|
background-color: #34495e;
|
|
}
|
|
&.is-active {
|
|
background-color: var(--el-color-primary);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.el-scrollbar {
|
|
height: 100%;
|
|
background-color: #2b3a4a;
|
|
}
|
|
|
|
.menu-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
color: #fff;
|
|
background-color: #2b3a4a;
|
|
}
|
|
</style> |