fix: 回退PHP模板 + CSS Grid布局重排

- 回退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第二行右列
2026-03-20 08:24:24 +08:00
parent 63f0959dcb
commit b20d442e1f
21 changed files with 86 additions and 68 deletions
--- a/clientarea/hgcloud/404.php
+++ b/clientarea/hgcloud/404.php
@@ -5,10 +5,10 @@

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

 <body>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu></aside-menu>
      <el-container>
-        <aside-menu></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="main-card">
--- a/clientarea/hgcloud/account.php
+++ b/clientarea/hgcloud/account.php
@@ -14,10 +14,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div id="account" class="template">
-    <el-container direction="vertical">
-      <top-menu ref="topMenuRef"></top-menu>
+    <el-container>
+      <aside-menu :menu-active-id="2" @getruleslist="getRule"></aside-menu>
      <el-container>
-        <aside-menu :menu-active-id="2" @getruleslist="getRule"></aside-menu>
+        <top-menu ref="topMenuRef"></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="main-card">
--- a/clientarea/hgcloud/crossModule.php
+++ b/clientarea/hgcloud/crossModule.php
@@ -13,10 +13,10 @@
        <div class="ddr ddr5"></div>
    </div>
    <div class="product">
-        <el-container direction="vertical">
-            <top-menu></top-menu>
+        <el-container>
+            <aside-menu></aside-menu>
            <el-container>
-                <aside-menu></aside-menu>
+                <top-menu></top-menu>
                <el-main>
                    <div class="main-card">
                        <!-- 表格 -->
--- a/clientarea/hgcloud/css/dark-override.css
+++ b/clientarea/hgcloud/css/dark-override.css
@@ -25,18 +25,37 @@ html, body {
  display: none;
 }

-/* ============ 布局容器 ============ */
-/* 外层容器：垂直排列（顶栏 + 下方内容） */
+/* ============ 布局容器 — CSS Grid 重排 ============ */
+/* 外层容器：用 Grid 把 aside 和内层 container 重排 */
 .template > .el-container {
-  flex-direction: column !important;
-  width: 100% !important;
+  display: grid !important;
+  grid-template-columns: auto 1fr !important;
+  grid-template-rows: auto 1fr !important;
  min-height: 100vh !important;
+  width: 100% !important;
 }

-/* 内层容器：水平排列（侧边栏 + 主内容） */
+/* 顶栏（在内层 container 中的 el-header）：跨两列占满全宽 */
 .template > .el-container > .el-container {
-  flex-direction: row !important;
-  flex: 1 !important;
+  display: contents !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;
  top: 0 !important;
  z-index: 100 !important;
-  width: 100% !important;
 }

 .el-header .search-value,
--- a/clientarea/hgcloud/finance.php
+++ b/clientarea/hgcloud/finance.php
@@ -14,10 +14,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template" id="finance">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu @getruleslist="getRule"></aside-menu>
      <el-container>
-        <aside-menu @getruleslist="getRule"></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 订单列表 -->
          <div class="finance main-card">
--- a/clientarea/hgcloud/group_rules.php
+++ b/clientarea/hgcloud/group_rules.php
@@ -14,10 +14,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu @getruleslist="getRule"></aside-menu>
      <el-container>
-        <aside-menu @getruleslist="getRule"></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="main-card security-group">
--- a/clientarea/hgcloud/home.php
+++ b/clientarea/hgcloud/home.php
@@ -12,10 +12,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu></aside-menu>
      <el-container>
-        <aside-menu></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="main-card">
--- a/clientarea/hgcloud/networkErro.php
+++ b/clientarea/hgcloud/networkErro.php
@@ -5,10 +5,10 @@

 <body>
    <div class="template">
-        <el-container direction="vertical">
-            <top-menu></top-menu>
+        <el-container>
+            <aside-menu></aside-menu>
            <el-container>
-                <aside-menu></aside-menu>
+                <top-menu></top-menu>
                <el-main>
                    <!-- 自己的东西 -->
                    <div class="main-card">
--- a/clientarea/hgcloud/noPermissions.php
+++ b/clientarea/hgcloud/noPermissions.php
@@ -13,10 +13,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu></aside-menu>
      <el-container>
-        <aside-menu></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <div class="box">
            <!-- 自己的东西 -->
--- a/clientarea/hgcloud/orderDetail.php
+++ b/clientarea/hgcloud/orderDetail.php
@@ -13,10 +13,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu></aside-menu>
      <el-container>
-        <aside-menu></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="order-detail">
--- a/clientarea/hgcloud/product.php
+++ b/clientarea/hgcloud/product.php
@@ -11,10 +11,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="product">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu></aside-menu>
      <el-container>
-        <aside-menu></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <!-- 后端渲染出来的配置页面 -->
--- a/clientarea/hgcloud/productList.php
+++ b/clientarea/hgcloud/productList.php
@@ -13,10 +13,10 @@
        <div class="ddr ddr5"></div>
    </div>
    <div class="product">
-        <el-container direction="vertical">
-            <top-menu></top-menu>
+        <el-container>
+            <aside-menu></aside-menu>
            <el-container>
-                <aside-menu></aside-menu>
+                <top-menu></top-menu>
                <el-main>
                    <div class="main-card">
                        <div class="main-card-title">
--- a/clientarea/hgcloud/product_list.php
+++ b/clientarea/hgcloud/product_list.php
@@ -13,10 +13,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu></aside-menu>
      <el-container>
-        <aside-menu></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="main-card">
--- a/clientarea/hgcloud/productdetail.php
+++ b/clientarea/hgcloud/productdetail.php
@@ -5,10 +5,10 @@
 <body>
  <!-- mounted之前显示 -->
  <div class="product_detail template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu></aside-menu>
      <el-container>
-        <aside-menu></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <!-- 后端渲染出来的配置页面 -->
--- a/clientarea/hgcloud/security.php
+++ b/clientarea/hgcloud/security.php
@@ -13,10 +13,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu @getruleslist="getRule"></aside-menu>
      <el-container>
-        <aside-menu @getruleslist="getRule"></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="main-card">
--- a/clientarea/hgcloud/security_group.php
+++ b/clientarea/hgcloud/security_group.php
@@ -13,10 +13,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu @getruleslist="getRule"></aside-menu>
      <el-container>
-        <aside-menu @getruleslist="getRule"></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="main-card security-group">
--- a/clientarea/hgcloud/security_log.php
+++ b/clientarea/hgcloud/security_log.php
@@ -13,10 +13,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu @getruleslist="getRule"></aside-menu>
      <el-container>
-        <aside-menu @getruleslist="getRule"></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="main-card">
--- a/clientarea/hgcloud/security_ssh.php
+++ b/clientarea/hgcloud/security_ssh.php
@@ -13,10 +13,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu @getruleslist="getRule"></aside-menu>
      <el-container>
-        <aside-menu @getruleslist="getRule"></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
          <div class="main-card">
--- a/clientarea/hgcloud/template.php
+++ b/clientarea/hgcloud/template.php
@@ -13,10 +13,10 @@
    <div class="ddr ddr5"></div>
  </div>
  <div class="template">
-    <el-container direction="vertical">
-      <top-menu></top-menu>
+    <el-container>
+      <aside-menu></aside-menu>
      <el-container>
-        <aside-menu></aside-menu>
+        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->
        </el-main>
--- a/clientarea/hgcloud/withdrawal.php
+++ b/clientarea/hgcloud/withdrawal.php
@@ -13,10 +13,10 @@
        <div class="ddr ddr5"></div>
    </div>
    <div class="template">
-        <el-container direction="vertical">
-            <top-menu></top-menu>
+        <el-container>
+            <aside-menu></aside-menu>
            <el-container>
-                <aside-menu></aside-menu>
+                <top-menu></top-menu>
                <el-main>
                    <!-- 自己的东西 -->
                    <div class="main-card">