feat(admin): 管理后台布局改为视口固定,Header和侧边栏固定,内容区独立滚动

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
TianyangZhang 2026-03-26 13:58:04 +08:00
parent a15eae5f5d
commit 93f5622894
1 changed files with 5 additions and 5 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<el-container style="min-height: 100vh;"> <el-container style="height:100vh;overflow:hidden;flex-direction:column;">
<el-header style="background:#001529;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #333;"> <el-header style="background:#001529;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #333;flex-shrink:0;">
<div style="color:#fff;font-weight:bold;font-size:16px;">管理后台</div> <div style="color:#fff;font-weight:bold;font-size:16px;">管理后台</div>
<el-dropdown> <el-dropdown>
<div style="color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;"> <div style="color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;">
@ -14,8 +14,8 @@
</template> </template>
</el-dropdown> </el-dropdown>
</el-header> </el-header>
<el-container> <el-container style="flex:1;overflow:hidden;">
<el-aside width="200px" style="background:#001529;"> <el-aside width="200px" style="background:#001529;overflow-y:auto;height:100%;">
<div style="padding:20px;color:#fff;font-weight:bold;font-size:16px;">菜单</div> <div style="padding:20px;color:#fff;font-weight:bold;font-size:16px;">菜单</div>
<el-menu router :default-active="$route.path" background-color="#001529" text-color="#fff" active-text-color="#409eff"> <el-menu router :default-active="$route.path" background-color="#001529" text-color="#fff" active-text-color="#409eff">
<el-menu-item index="/admin/jobs">职位管理</el-menu-item> <el-menu-item index="/admin/jobs">职位管理</el-menu-item>
@ -26,7 +26,7 @@
</template> </template>
</el-menu> </el-menu>
</el-aside> </el-aside>
<el-main><router-view /></el-main> <el-main style="overflow-y:auto;height:100%;"><router-view /></el-main>
</el-container> </el-container>
</el-container> </el-container>
</template> </template>