You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
3.5 KiB
161 lines
3.5 KiB
<template>
|
|
<el-container class="layout-container">
|
|
<el-header>
|
|
<div class="toolbar">
|
|
<div class="title">
|
|
<div class="img"></div>
|
|
<div class="text">智能电梯图纸生成系统后台</div>
|
|
</div>
|
|
<el-dropdown>
|
|
<div class="userInfo">
|
|
<div class="avatar"></div>
|
|
<div class="username">
|
|
{{ userStore.userInfo?.username }}
|
|
</div>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</el-header>
|
|
|
|
<el-container>
|
|
<el-aside width="200px">
|
|
<Aside></Aside>
|
|
</el-aside>
|
|
<el-main>
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item v-for="(item, index) in breadcrumbList">{{
|
|
item.meta.title
|
|
}}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<div class="container">
|
|
<el-scrollbar>
|
|
<router-view></router-view>
|
|
</el-scrollbar>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script lang="js" setup>
|
|
import Aside from './components/aside.vue'
|
|
import { routes } from '@/router/index'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useUserStore } from '@/stores/user'
|
|
const userStore = useUserStore()
|
|
// console.log(userStore.userInfo)
|
|
|
|
const breadcrumbList = ref([])
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const getBreadcrumbList = () => {
|
|
const arr = []
|
|
const obj = userStore?.routerList.find((item) => item.path === route.path.split('/')[1])
|
|
arr.push(obj)
|
|
if (route.path.split('/').length > 2) {
|
|
arr.push(obj.children.find((item) => item.path === route.path.split('/')[2]))
|
|
}
|
|
breadcrumbList.value = arr
|
|
}
|
|
watch(route, () => {
|
|
getBreadcrumbList()
|
|
})
|
|
getBreadcrumbList()
|
|
|
|
const logout = () => {
|
|
userStore.logout()
|
|
router.push('/login')
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.layout-container {
|
|
height: 100vh;
|
|
min-width: 1200px;
|
|
background-color: #f2f2f2;
|
|
overflow: hidden;
|
|
|
|
.el-header {
|
|
padding: 0;
|
|
height: 60px;
|
|
|
|
.toolbar {
|
|
height: 60px;
|
|
background-color: #000;
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-right: 24px;
|
|
color: #fff;
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 60px;
|
|
|
|
.img {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
margin-left: 24px;
|
|
margin-right: 10px;
|
|
background-color: skyblue;
|
|
}
|
|
|
|
.text {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.userInfo {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.avatar {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
background-color: skyblue;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.username {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-main {
|
|
padding-top: 0;
|
|
overflow-y: hidden;
|
|
|
|
:deep(.el-breadcrumb__inner.is-link) {
|
|
color: #006eff;
|
|
}
|
|
|
|
.el-breadcrumb {
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.container {
|
|
height: calc(98vh - 110px);
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
</style>
|