158 lines
3.3 KiB
Vue
158 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<el-container class="layout-container">
|
||
|
|
<!-- 侧边栏菜单 -->
|
||
|
|
<el-aside width="200px" class="sidebar">
|
||
|
|
<div class="logo">
|
||
|
|
<h2>猪场管理系统</h2>
|
||
|
|
</div>
|
||
|
|
<el-menu
|
||
|
|
:default-active="activeMenu"
|
||
|
|
class="sidebar-menu"
|
||
|
|
background-color="#545c64"
|
||
|
|
text-color="#fff"
|
||
|
|
active-text-color="#ffd04b"
|
||
|
|
router
|
||
|
|
>
|
||
|
|
<el-menu-item index="/">
|
||
|
|
<el-icon><House /></el-icon>
|
||
|
|
<span>首页</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<el-menu-item index="/devices">
|
||
|
|
<el-icon><Monitor /></el-icon>
|
||
|
|
<span>设备管理</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<el-menu-item index="/plans">
|
||
|
|
<el-icon><Calendar /></el-icon>
|
||
|
|
<span>计划管理</span>
|
||
|
|
</el-menu-item>
|
||
|
|
</el-menu>
|
||
|
|
</el-aside>
|
||
|
|
|
||
|
|
<!-- 主区域 -->
|
||
|
|
<el-container>
|
||
|
|
<!-- 头部 -->
|
||
|
|
<el-header class="header">
|
||
|
|
<div class="header-content">
|
||
|
|
<h3>{{ currentPageTitle }}</h3>
|
||
|
|
<div class="user-info">
|
||
|
|
<el-dropdown>
|
||
|
|
<span class="el-dropdown-link">
|
||
|
|
管理员 <el-icon><ArrowDown /></el-icon>
|
||
|
|
</span>
|
||
|
|
<template #dropdown>
|
||
|
|
<el-dropdown-menu>
|
||
|
|
<el-dropdown-item>个人信息</el-dropdown-item>
|
||
|
|
<el-dropdown-item>退出登录</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-header>
|
||
|
|
|
||
|
|
<!-- 主内容区 -->
|
||
|
|
<el-main class="main-content">
|
||
|
|
<slot></slot>
|
||
|
|
</el-main>
|
||
|
|
|
||
|
|
<!-- 底部 -->
|
||
|
|
<el-footer class="footer">
|
||
|
|
<p>© 2025 猪场管理系统. All rights reserved.</p>
|
||
|
|
</el-footer>
|
||
|
|
</el-container>
|
||
|
|
</el-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { useRoute } from 'vue-router';
|
||
|
|
import { House, Monitor, Calendar, ArrowDown } from '@element-plus/icons-vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'MainLayout',
|
||
|
|
components: {
|
||
|
|
House,
|
||
|
|
Monitor,
|
||
|
|
Calendar,
|
||
|
|
ArrowDown
|
||
|
|
},
|
||
|
|
setup() {
|
||
|
|
const route = useRoute();
|
||
|
|
|
||
|
|
// 当前激活的菜单项
|
||
|
|
const activeMenu = computed(() => {
|
||
|
|
return route.path;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 当前页面标题
|
||
|
|
const currentPageTitle = computed(() => {
|
||
|
|
const routeMap = {
|
||
|
|
'/': '系统首页',
|
||
|
|
'/devices': '设备管理',
|
||
|
|
'/plans': '计划管理'
|
||
|
|
};
|
||
|
|
return routeMap[route.path] || '猪场管理系统';
|
||
|
|
});
|
||
|
|
|
||
|
|
return {
|
||
|
|
activeMenu,
|
||
|
|
currentPageTitle
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.layout-container {
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar {
|
||
|
|
background-color: #545c64;
|
||
|
|
box-shadow: 2px 0 6px rgba(0, 21, 18, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
height: 60px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
background-color: #454d54;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar-menu {
|
||
|
|
border-right: none;
|
||
|
|
height: calc(100% - 60px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
background-color: #fff;
|
||
|
|
box-shadow: 0 1px 4px rgba(0, 21, 18, 0.1);
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-content {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-info {
|
||
|
|
margin-right: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content {
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
background-color: #fff;
|
||
|
|
color: #666;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 14px;
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
}
|
||
|
|
</style>
|