yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 回退PHP模板 + CSS Grid布局重排
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- 回退20个PHP文件到原始结构 (aside-menu先, inner container包含top-menu+el-main)
- 用CSS Grid + display:contents实现布局重排:
  - 外层容器: grid, 两列(auto+1fr), 两行(auto+1fr)
  - 内层容器: display:contents (消失,子元素直接参与grid)
  - el-header: grid-column: 1/-1 跨两列全宽
  - el-aside: grid第二行左列
  - el-main: grid第二行右列
This commit is contained in:
yiqiu
2026-03-20 08:24:24 +08:00
parent 63f0959dcb
commit b20d442e1f
21 changed files with 86 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
clientarea/hgcloud/404.php
View File

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

6
clientarea/hgcloud/NotFound.php
View File

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

6
clientarea/hgcloud/account.php
View File

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

6
clientarea/hgcloud/crossModule.php
View File

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

34
clientarea/hgcloud/css/dark-override.css
View File

@@ -25,18 +25,37 @@ html, body {
display: none; display: none;
} }
/* ============ 布局容器 ============ */ /* ============ 布局容器 — CSS Grid 重排 ============ */
/* 外层容器：垂直排列（顶栏 + 下方内容） */ /* 外层容器：用 Grid 把 aside 和内层 container 重排 */
.template > .el-container { .template > .el-container {
flex-direction: column !important; display: grid !important;
width: 100% !important; grid-template-columns: auto 1fr !important;
grid-template-rows: auto 1fr !important;
min-height: 100vh !important; min-height: 100vh !important;
width: 100% !important;
} }
/* 内层容器：水平排列（侧边栏 + 主内容） */ /* 顶栏（在内层 container 中的 el-header）：跨两列占满全宽 */
.template > .el-container > .el-container { .template > .el-container > .el-container {
flex-direction: row !important; display: contents !important;
flex: 1 !important; }
/* el-header 跨两列 */
.template > .el-container .el-header {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
}
/* aside 在第二行左列 */
.template > .el-container > .el-aside {
grid-column: 1 !important;
grid-row: 2 !important;
}
/* el-main 在第二行右列 */
.template > .el-container .el-main {
grid-column: 2 !important;
grid-row: 2 !important;
} }
/* ============ 侧边栏 ============ */ /* ============ 侧边栏 ============ */
@@ -142,7 +161,6 @@ html, body {
position: sticky !important; position: sticky !important;
top: 0 !important; top: 0 !important;
z-index: 100 !important; z-index: 100 !important;
width: 100% !important;
} }
.el-header .search-value, .el-header .search-value,

6
clientarea/hgcloud/finance.php
View File

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

6
clientarea/hgcloud/group_rules.php
View File

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

6
clientarea/hgcloud/home.php
View File

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

6
clientarea/hgcloud/networkErro.php
View File

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

6
clientarea/hgcloud/noPermissions.php
View File

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

6
clientarea/hgcloud/orderDetail.php
View File

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

6
clientarea/hgcloud/product.php
View File

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

6
clientarea/hgcloud/productList.php
View File

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

6
clientarea/hgcloud/product_list.php
View File

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

6
clientarea/hgcloud/productdetail.php
View File

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

6
clientarea/hgcloud/security.php
View File

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

6
clientarea/hgcloud/security_group.php
View File

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

6
clientarea/hgcloud/security_log.php
View File

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

6
clientarea/hgcloud/security_ssh.php
View File

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

6
clientarea/hgcloud/template.php
View File

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

6
clientarea/hgcloud/withdrawal.php
View File

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