From f6e1e018cb09ff01b51312968a972ffda9cbb492 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Sun, 22 Mar 2026 14:59:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=A6=96=E9=A1=B5=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF/=E8=AE=A4?=
 =?UTF-8?q?=E8=AF=81+=E9=87=91=E9=A2=9D=E5=8C=BA=E4=B8=89=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除card-user用户信息卡片
- 移除cert-section认证企业/姓名区块
- row-1改为单列stats-group占满全宽
- 新增row-finance三列grid：余额/本月消费/总消费各一张finance-card
- 渐变图标+大字号数值+趋势标签
---
 clientarea/home/hgcloud_home/css/home.css |  53 +++++++++-
 clientarea/home/hgcloud_home/home.php     | 113 ++++++++--------------
 2 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/clientarea/home/hgcloud_home/css/home.css b/clientarea/home/hgcloud_home/css/home.css
index 3d8f917..a2a0341 100644
--- a/clientarea/home/hgcloud_home/css/home.css
+++ b/clientarea/home/hgcloud_home/css/home.css
@@ -43,12 +43,61 @@
   box-sizing: border-box !important;
 }
 
-/* ====== ROW 1 — 用户信息 + 统计卡片（并排） ====== */
+/* ====== ROW 1 — 统计卡片（占满全宽） ====== */
 .row-1 {
   display: grid !important;
-  grid-template-columns: 3fr 2fr !important;
+  grid-template-columns: 1fr !important;
   gap: 16px !important;
 }
+
+/* ====== ROW-FINANCE — 余额 / 本月消费 / 总消费 ====== */
+.row-finance {
+  display: grid !important;
+  grid-template-columns: repeat(3, 1fr) !important;
+  gap: 16px !important;
+}
+.finance-card {
+  padding: 20px 24px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  transition: box-shadow var(--ease), transform var(--ease) !important;
+}
+.finance-card:hover {
+  box-shadow: var(--shadow-md) !important;
+  transform: translateY(-2px);
+}
+.fc-icon-wrap {
+  width: 40px !important; height: 40px !important; border-radius: 10px !important;
+  display: flex !important; align-items: center !important; justify-content: center !important;
+  font-size: 20px !important; margin-bottom: 12px !important;
+}
+.fc-icon-blue  { background: linear-gradient(135deg, #E0EAFF, #C7D7FE) !important; color: #3B5DFF !important; }
+.fc-icon-green { background: linear-gradient(135deg, #D1FAE5, #A7F3D0) !important; color: #059669 !important; }
+.fc-icon-amber { background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important; color: #D97706 !important; }
+.fc-label {
+  font-size: 13px; color: var(--text-secondary); font-weight: 500; margin-bottom: 6px;
+}
+.fc-value {
+  font-size: 28px; font-weight: 700; color: var(--text-primary);
+  line-height: 1.1; margin-bottom: 14px; font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
+}
+.fc-value .fc-currency { font-size: 16px; margin-right: 2px; font-weight: 500; color: var(--text-secondary); }
+.fc-footer {
+  display: flex !important; align-items: center !important; gap: 8px !important;
+  min-height: 24px;
+}
+.fc-trend-up {
+  display: inline-flex; align-items: center; padding: 2px 8px;
+  border-radius: 20px; font-size: 12px; font-weight: 600;
+  background: #D1FAE5; color: var(--success);
+}
+.fc-trend-down {
+  display: inline-flex; align-items: center; padding: 2px 8px;
+  border-radius: 20px; font-size: 12px; font-weight: 600;
+  background: #FEE2E2; color: var(--danger);
+}
+.fc-vs { font-size: 12px; color: var(--text-tertiary); }
+.fc-sub { font-size: 12px; color: var(--text-tertiary); }
 /* 用户卡片：占 60% */
 .card-user {
   flex: 3 !important;
diff --git a/clientarea/home/hgcloud_home/home.php b/clientarea/home/hgcloud_home/home.php
index 537d537..a1cddae 100644
--- a/clientarea/home/hgcloud_home/home.php
+++ b/clientarea/home/hgcloud_home/home.php
@@ -21,34 +21,9 @@
         <el-main class="home-main">
           <div class="dashboard">
 
-            <!-- ====== Row 1: 用户信息 + 统计卡片 ====== -->
+            <!-- ====== Row 1: 统计卡片 ====== -->
             <div class="row-1">
-              <!-- 用户信息卡 -->
-              <div class="card card-user" @click="goUser" v-loading="nameLoading">
-                <div class="user-header">
-                  <div class="user-avatar" ref="headBoxRef">{{account.firstName}}</div>
-                  <div class="user-meta">
-                    <div class="user-greeting">
-                      {{lang.index_hello}}, <strong>{{account.username}}</strong>
-                      <span v-if="idcsmart_client_level.id" class="user-level"
-                        :style="{'color':idcsmart_client_level.background_color}">{{idcsmart_client_level.name}}</span>
-                    </div>
-                    <div class="user-id">ID: {{account.id}}</div>
-                  </div>
-                </div>
-                <div class="user-contacts">
-                  <div class="contact-item">
-                    <i class="ph ph-envelope"></i>
-                    <span>{{account.email ? account.email : '--'}}</span>
-                  </div>
-                  <div class="contact-item">
-                    <i class="ph ph-phone"></i>
-                    <span>{{account.phone ? account.phone : '--'}}</span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 统计卡片组（单个卡片容器） -->
+              <!-- 统计卡片组 -->
               <div class="card stats-group">
                 <div class="stat-item stat-purple" @click="goProductList('using')">
                   <i class="ph ph-pulse"></i>
@@ -68,34 +43,46 @@
               </div>
             </div>
 
-            <!-- ====== Row 2: 余额 + 推介/认证 ====== -->
-            <div class="row-2">
-              <!-- 余额卡片 -->
-              <div class="card card-balance" v-loading="nameLoading">
-                <div class="balance-header">
-                  <span class="balance-title">{{lang.index_text3}}</span>
+            <!-- ====== Row 2: 余额 / 本月消费 / 总消费 三卡片 ====== -->
+            <div class="row-finance">
+              <!-- 余额 -->
+              <div class="card finance-card fc-balance" v-loading="nameLoading">
+                <div class="fc-icon-wrap fc-icon-blue"><i class="ph ph-wallet"></i></div>
+                <div class="fc-label">{{lang.index_text3}}</div>
+                <div class="fc-value"><span class="fc-currency">{{commonData.currency_prefix}}</span>{{account.credit}}</div>
+                <div class="fc-footer">
                   <span class="balance-btn" @click="showCz" v-if="commonData.recharge_open == 1">{{lang.index_text2}}</span>
+                  <span class="recharge-link" @click="showCz" v-if="commonData.recharge_open == 1 && coinRecharge.length > 0">{{lang.index_text35}}</span>
                 </div>
-                <div class="balance-amount">
-                  <span class="currency">{{commonData.currency_prefix}}</span>{{account.credit}}
+              </div>
+              <!-- 本月消费 -->
+              <div class="card finance-card fc-month" v-loading="nameLoading">
+                <div class="fc-icon-wrap fc-icon-green"><i class="ph ph-chart-line-up"></i></div>
+                <div class="fc-label">{{lang.index_text4}}</div>
+                <div class="fc-value"><span class="fc-currency">{{commonData.currency_prefix}}</span>{{account.this_month_consume}}</div>
+                <div class="fc-footer">
+                  <span :class="Number(account.this_month_consume_percent) >= 0 ? 'fc-trend-up' : 'fc-trend-down'">
+                    <template v-if="Number(account.this_month_consume_percent) >= 0">↑</template>
+                    <template v-else>↓</template>
+                    {{Math.abs(Number(account.this_month_consume_percent))}}%
+                  </span>
+                  <span class="fc-vs">vs 上月</span>
                 </div>
-                <div class="balance-extra" v-if="commonData.recharge_open == 1 && coinRecharge.length > 0">
-                  <span class="recharge-link" @click="showCz">{{lang.index_text35}}</span>
-                </div>
-                <div class="balance-footer">
-                  <div class="consume-item">
-                    <span class="consume-label">{{lang.index_text4}}</span>
-                    <span class="consume-value">{{commonData.currency_prefix}}{{account.this_month_consume}}</span>
-                    <span :class="Number(account.this_month_consume_percent) >= 0 ? 'trend-up' : 'trend-down'">
-                      {{Number(account.this_month_consume_percent)}}%
-                    </span>
-                  </div>
-                  <div class="consume-divider"></div>
-                  <div class="consume-item">
-                    <span class="consume-label">{{lang.index_text5}}</span>
-                    <span class="consume-value">{{commonData.currency_prefix}}{{account.consume}}</span>
-                  </div>
+              </div>
+              <!-- 总消费 -->
+              <div class="card finance-card fc-total" v-loading="nameLoading">
+                <div class="fc-icon-wrap fc-icon-amber"><i class="ph ph-coins"></i></div>
+                <div class="fc-label">{{lang.index_text5}}</div>
+                <div class="fc-value"><span class="fc-currency">{{commonData.currency_prefix}}</span>{{account.consume}}</div>
+                <div class="fc-footer">
+                  <span class="fc-sub">{{lang.index_text1}}</span>
                 </div>
+              </div>
+            </div>
+
+            <!-- ====== Row 2b: 信用额度 + 代金券 + 代币 + 推介 ====== -->
+            <div class="row-2">
+              <div class="card card-balance" v-loading="nameLoading" v-if="(isShowCredit && creditData.status) || (coinData && coinData.name) || voucherList.length > 0">
                 <!-- 信用额度 -->
                 <div class="credit-section" v-if="isShowCredit && creditData.status">
                   <div class="credit-row">
@@ -127,30 +114,8 @@
                 </div>
               </div>
 
-              <!-- 右侧: 认证 + 推介 -->
+              <!-- 右侧: 推介计划 -->
               <div class="card card-side">
-                <!-- 实名认证 -->
-                <div class="cert-section" v-plugin="'IdcsmartCertification'" v-if="certificationObj.certification_open === 1">
-                  <div class="cert-item">
-                    <div class="cert-icon"><i class="ph ph-buildings"></i></div>
-                    <div class="cert-info">
-                      <div class="cert-label">{{lang.index_compny}}</div>
-                      <div class="cert-value" v-if="certificationObj.company?.status === 1">{{certificationObj.company.certification_company}}</div>
-                      <div class="cert-action" @click="handelAttestation" v-else>{{lang.index_goAttestation}}</div>
-                    </div>
-                  </div>
-                  <div class="cert-item">
-                    <div class="cert-icon"><i class="ph ph-user"></i></div>
-                    <div class="cert-info">
-                      <div class="cert-label">{{lang.index_name}}</div>
-                      <div class="cert-value" v-if="certificationObj.is_certification">
-                        {{certificationObj.company.status === 1 ? certificationObj.company.card_name : certificationObj.person.card_name}}
-                      </div>
-                      <div class="cert-action" @click="handelAttestation" v-else>{{lang.index_goAttestation}}</div>
-                    </div>
-                  </div>
-                </div>
-
                 <!-- 推介计划（已开启） -->
                 <div class="referral-open" v-if="showRight && isOpen" v-plugin="'IdcsmartRecommend'">
                   <div class="referral-title">