feat: 顶栏全宽+Logo移到顶栏+CSS Grid布局
All checks were successful
continuous-integration/drone/push Build is passing
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:
@@ -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="请输入内容"
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user