From 4aecc48c472503b3b6dcf8f3c7f806e5e5bc1ca6 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Fri, 20 Mar 2026 22:17:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E8=AE=A1=E5=8D=A1=E5=90=88?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=BA=E5=8D=95=E5=AE=B9=E5=99=A8=20+=20Row3?=
 =?UTF-8?q?=E5=85=AC=E5=91=8A=E4=B8=8E=E4=BA=A7=E5=93=81=E7=AD=89=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- stats-group改为单卡片容器(去掉子card的独立边框)
- stat-item之间用border-left分隔
- Row3 align-items:stretch让公告与产品列表等高
---
 clientarea/home/hgcloud_home/css/home.css | 26 ++++++++++++-----------
 clientarea/home/hgcloud_home/home.php     | 10 ++++-----
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/clientarea/home/hgcloud_home/css/home.css b/clientarea/home/hgcloud_home/css/home.css
index bfe337b..6fe321a 100644
--- a/clientarea/home/hgcloud_home/css/home.css
+++ b/clientarea/home/hgcloud_home/css/home.css
@@ -78,17 +78,18 @@
 .contact-item { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px; color: var(--text-secondary); }
 .contact-item i { font-size: 15px; color: var(--text-tertiary); }
 
-/* 统计卡片组：占 40% */
+/* 统计卡片组：单卡片容器，占 40% */
 .stats-group {
   flex: 2 !important;
   min-width: 0 !important;
   display: flex !important;
   flex-direction: row !important;
   flex-wrap: nowrap !important;
-  gap: 12px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
 }
-/* 每个统计卡 — 无彩色横条，用圆形图标背景区分 */
-.card-stat {
+/* 每个统计子项 */
+.stat-item {
   flex: 1 !important;
   min-width: 0 !important;
   padding: 16px !important;
@@ -99,14 +100,15 @@
   gap: 8px !important;
   cursor: pointer;
   text-align: center;
-  border-top: none !important;
-  transition: box-shadow var(--ease);
+  transition: background var(--ease);
+  box-sizing: border-box !important;
 }
-.card-stat:hover { box-shadow: var(--shadow-md) !important; }
-.card-stat:active { transform: scale(0.97); }
+.stat-item + .stat-item { border-left: 1px solid var(--border-light); }
+.stat-item:hover { background: var(--surface-hover); }
+.stat-item:active { transform: scale(0.97); }
 
-/* 图标用圆形背景 */
-.card-stat i {
+/* 圆形图标背景 */
+.stat-item i {
   width: 36px; height: 36px; border-radius: 50%;
   display: flex !important; align-items: center !important; justify-content: center !important;
   font-size: 18px;
@@ -117,7 +119,7 @@
 }
 .stat-label { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
 
-/* 统计卡颜色 — 图标圆形背景 */
+/* 统计颜色 */
 .stat-purple i { background: #F3F0FF; color: #7C3AED; }
 .stat-blue i { background: #EFF6FF; color: #2563EB; }
 .stat-amber i { background: #FFF7ED; color: #D97706; }
@@ -229,7 +231,7 @@
   flex-direction: row !important;
   flex-wrap: nowrap !important;
   gap: 16px !important;
-  align-items: flex-start !important;
+  align-items: stretch !important;
 }
 
 /* 产品卡 65% */
diff --git a/clientarea/home/hgcloud_home/home.php b/clientarea/home/hgcloud_home/home.php
index f20f388..537d537 100644
--- a/clientarea/home/hgcloud_home/home.php
+++ b/clientarea/home/hgcloud_home/home.php
@@ -48,19 +48,19 @@
                 </div>
               </div>
 
-              <!-- 统计卡片组 -->
-              <div class="stats-group">
-                <div class="card card-stat stat-purple" @click="goProductList('using')">
+              <!-- 统计卡片组（单个卡片容器） -->
+              <div class="card stats-group">
+                <div class="stat-item stat-purple" @click="goProductList('using')">
                   <i class="ph ph-pulse"></i>
                   <div class="stat-value">{{account.host_active_num}}</div>
                   <div class="stat-label">{{lang.index_text6}}</div>
                 </div>
-                <div class="card card-stat stat-blue" @click="goProductList()">
+                <div class="stat-item stat-blue" @click="goProductList()">
                   <i class="ph ph-cube"></i>
                   <div class="stat-value">{{account.host_num}}</div>
                   <div class="stat-label">{{lang.index_text7}}</div>
                 </div>
-                <div class="card card-stat stat-amber" @click="goOrderList('Unpaid')">
+                <div class="stat-item stat-amber" @click="goOrderList('Unpaid')">
                   <i class="ph ph-receipt"></i>
                   <div class="stat-value">{{account.unpaid_order}}</div>
                   <div class="stat-label">{{lang.index_text8}}</div>