feat: clientarea 布局重构 — 顶栏全宽独占一行
All checks were successful
continuous-integration/drone/push Build is passing

HTML 结构变更 (20个PHP文件):
- 旧: el-container > [aside-menu, el-container > [top-menu, el-main]]
- 新: el-container[direction=vertical] > [top-menu, el-container > [aside-menu, el-main]]

CSS 适配:
- el-header: sticky top:0, z-index:100, width:100%
- el-aside: height calc(100vh-60px), sticky top:60px
This commit is contained in:
yiqiu
2026-03-20 08:09:31 +08:00
parent f9c0319b0c
commit a5fab1e519
26 changed files with 257 additions and 250 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -5,10 +5,10 @@
<body>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

View File

@@ -28,10 +28,10 @@
<body>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

View File

@@ -14,10 +14,10 @@
<div class="ddr ddr5"></div>
</div>
<div id="account" class="template">
<el-container>
<aside-menu :menu-active-id="2" @getruleslist="getRule"></aside-menu>
<el-container direction="vertical">
<top-menu ref="topMenuRef"></top-menu>
<el-container>
<top-menu ref="topMenuRef"></top-menu>
<aside-menu :menu-active-id="2" @getruleslist="getRule"></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="product">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<div class="main-card">
<!-- 表格 -->

View File

@@ -29,6 +29,9 @@ html, body {
.el-aside {
background: #FFFFFF !important;
border-right: 1px solid rgba(0,0,0,0.06);
height: calc(100vh - 60px) !important;
position: sticky !important;
top: 60px !important;
}
.ali-logo {
@@ -111,6 +114,10 @@ html, body {
backdrop-filter: none !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
border-bottom: 1px solid rgba(0,0,0,0.06);
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
width: 100% !important;
}
.el-header .search-value,

View File

View File

View File

@@ -14,10 +14,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template" id="finance">
<el-container>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-main>
<!-- 订单列表 -->
<div class="finance main-card">

View File

@@ -14,10 +14,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card security-group">

View File

@@ -12,10 +12,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

View File

@@ -5,10 +5,10 @@
<body>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<div class="box">
<!-- 自己的东西 -->

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="order-detail">

View File

@@ -11,10 +11,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="product">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
<!-- 后端渲染出来的配置页面 -->

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="product">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<div class="main-card">
<div class="main-card-title">

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

View File

@@ -5,10 +5,10 @@
<body>
<!-- mounted之前显示 -->
<div class="product_detail template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
<!-- 后端渲染出来的配置页面 -->

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card security-group">

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
</el-main>

View File

@@ -13,10 +13,10 @@
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container direction="vertical">
<top-menu></top-menu>
<el-container>
<top-menu></top-menu>
<aside-menu></aside-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">

Binary file not shown.

BIN
theme.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 4.6 MiB