<template>
|
<div id="app">
|
<router-view />
|
</div>
|
</template>
|
<script>
|
export default { name: 'App' }
|
</script>
|
<style>
|
/* 全局布局：顶部标题栏与左侧菜单固定，仅右侧内容区滚动 */
|
html, body, #app {
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
}
|
#app > .el-container {
|
height: 100%;
|
}
|
#app > .el-container > .el-container {
|
flex: 1;
|
min-height: 0;
|
overflow: hidden;
|
}
|
#app > .el-container > .el-header {
|
flex-shrink: 0;
|
}
|
#app > .el-container > .el-container > .el-aside {
|
overflow-y: auto;
|
}
|
#app > .el-container > .el-container > .el-main {
|
overflow: hidden;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
/* 表格页：表格区域占满剩余高度，表格内部滚动、表头固定 */
|
#app .table-area {
|
flex: 1;
|
min-height: 0;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
#app .table-area .el-table {
|
flex: 1;
|
min-height: 0;
|
}
|
/* 非表格页：内容区可滚动兜底 */
|
#app .page-scroll {
|
flex: 1;
|
min-height: 0;
|
overflow-y: auto;
|
}
|
/* 悬浮提示框：限制最大宽度并允许换行，避免内容过长时撑满屏幕、左侧溢出被切掉 */
|
.el-tooltip__popper {
|
max-width: min(600px, 80vw);
|
white-space: normal;
|
word-break: break-all;
|
text-align: left;
|
}
|
</style>
|
