feat: 顶栏全宽+Logo移到顶栏+CSS Grid布局
All checks were successful
continuous-integration/drone/push Build is passing

组件修改:
- topMenu.js: el-header 左侧添加 logo (header-logo class)

CSS Grid 布局:
- 外层 el-container → grid(190px+1fr, 60px+1fr)
- 内层 el-container → display:contents
- top-menu的div包裹 → display:contents
- el-header: grid-column 1/-1 跨两列全宽第一行
- el-aside: 第一列第二行
- el-main: 第二列第二行

其他:
- 隐藏侧边栏原有 logo (.el-aside > a:first-child)
- menu-top margin-top: 86px → 12px
This commit is contained in:
yiqiu
2026-03-20 08:46:15 +08:00
parent 063ac36110
commit d991d9af1c
2 changed files with 66 additions and 14 deletions

View File

@@ -75,6 +75,9 @@ const topMenu = {
<el-header>
<div class="header-left">
<a :href="commonData.clientarea_logo_url || '/home.htm'" onclick="return false" class="header-logo-link" @click="goHome">
<img class="header-logo" :src="logo" v-show="logo">
</a>
<img src="${url}/img/common/menu.png" class="menu-img" @click="showMenu">
<img v-if="isShowMore" src="${url}/img/common/search.png" class="left-img">
<el-autocomplete v-if="isShowMore" v-model="topInput" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"

View File

@@ -25,27 +25,81 @@ html, body {
display: none;
}
/* ============ 布局容器方向强制覆盖 ============ */
/* 外层容器水平方向aside 左 + container 右) */
/* ============ 布局CSS Grid 全宽顶栏 ============ */
/* 外层容器 → Grid: 第一行顶栏全宽, 第二行 aside+main */
.template > .el-container {
flex-direction: row !important;
display: grid !important;
grid-template-columns: 190px 1fr !important;
grid-template-rows: 60px 1fr !important;
min-height: 100vh !important;
width: 100% !important;
}
/* 内层容器垂直方向top-menu 上 + el-main 下) */
/* 内层 el-container: display:contents 让子元素直接参与外层 grid */
.template > .el-container > .el-container {
flex-direction: column !important;
display: contents !important;
}
/* top-menu 组件的 <div> 包裹层也 display:contents */
.template > .el-container > .el-container > div {
display: contents !important;
}
/* el-header: 跨两列, 第一行, 全宽 */
.el-header {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
background: #FFFFFF !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
border-bottom: 1px solid rgba(0,0,0,0.06);
z-index: 100 !important;
position: sticky !important;
top: 0 !important;
}
/* el-aside: 第一列, 第二行 */
.template > .el-container > .el-aside {
grid-column: 1 !important;
grid-row: 2 !important;
}
/* el-main: 第二列, 第二行 */
.el-main {
grid-column: 2 !important;
grid-row: 2 !important;
}
/* ============ 顶栏 Logo ============ */
.header-logo-link {
display: flex;
align-items: center;
margin-right: 16px;
cursor: pointer;
}
.header-logo {
height: 32px;
width: auto;
}
/* ============ 侧边栏 ============ */
/* 隐藏侧边栏原有 logo (已移到顶栏) */
.el-aside > a:first-child {
display: none !important;
}
.el-aside {
background: #FFFFFF !important;
border-right: none !important;
border-radius: 0 16px 16px 0 !important;
box-shadow: 1px 0 3px rgba(0,0,0,0.04) !important;
border-right: 1px solid rgba(0,0,0,0.06) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* 侧边栏菜单不再需要 86px 的 logo 占位 */
.el-aside .menu-top {
margin-top: 12px !important;
}
.ali-logo {
filter: none;
}
@@ -120,12 +174,7 @@ html, body {
border-right: none !important;
}
/* ============ 顶栏 ============ */
.el-header {
background: #FFFFFF !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* ============ 顶栏子元素 ============ */
.el-header .search-value,
.el-header .search-name {