DefaultLayout.vue
2.66 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { Menu as IconMenu, DataLine, Document } from '@element-plus/icons-vue'
const route = useRoute()
</script>
<template>
<el-container class="layout-container">
<el-aside width="220px" class="bg-[#001529] text-white min-h-screen flex flex-col transition-all duration-300">
<div class="h-16 flex items-center justify-center font-bold text-lg border-b border-gray-700 bg-[#002140]">
质检管理平台
</div>
<el-menu
active-text-color="#409eff"
background-color="#001529"
class="el-menu-vertical-demo border-none flex-1"
text-color="#fff"
:default-active="route.path"
router
>
<el-sub-menu index="/order">
<template #title>
<el-icon><Document /></el-icon>
<span>质检工单管理</span>
</template>
<el-menu-item index="/order-list">质检工单列表</el-menu-item>
</el-sub-menu>
<el-sub-menu index="/stats">
<template #title>
<el-icon><DataLine /></el-icon>
<span>数据统计</span>
</template>
<el-menu-item index="/stats/quality">质检工单数据</el-menu-item>
<el-menu-item index="/stats/device">设备识别数据</el-menu-item>
<el-menu-item index="/stats/serial">串号数据统计</el-menu-item>
<el-menu-item index="/stats/no-photo">无法拍摄数据</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
<el-container>
<el-header class="bg-white border-b shadow-sm flex items-center justify-between px-6 h-16">
<div class="text-gray-500 text-sm">首页 / {{ route.name || 'Dashboard' }}</div>
<div class="flex items-center gap-4">
<el-dropdown>
<span class="el-dropdown-link flex items-center gap-2 cursor-pointer">
<el-avatar size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
<span>Admin</span>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
<el-main class="bg-[#f0f2f5] p-6 h-[calc(100vh-64px)] overflow-y-auto">
<router-view />
</el-main>
</el-container>
</el-container>
</template>
<style scoped>
.layout-container {
height: 100vh;
overflow: hidden;
}
:deep(.el-menu) {
border-right: none;
}
</style>