From c84adf68235f105c0fa68d12fc5fb262ca2b2886 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Sun, 22 Mar 2026 14:53:45 +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=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?+=E9=87=91=E9=A2=9D=E5=8C=BA=E9=87=8D=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 注释掉info-box（用户名/邮箱/认证已在账户页）
- 用三张finance-card替换statistics-box+圆形图表
- 余额卡片含充值按钮，本月消费含同比变化标签
- 信用额度保留为独立卡片
- 移除多余的div闭合标签
---
 clientarea/hgcloud/css/home.css | 124 ++++++++++++++++++++
 clientarea/hgcloud/home.php     | 196 ++++++++++----------------------
 2 files changed, 181 insertions(+), 139 deletions(-)

diff --git a/clientarea/hgcloud/css/home.css b/clientarea/hgcloud/css/home.css
index dccf192..f188193 100644
--- a/clientarea/hgcloud/css/home.css
+++ b/clientarea/hgcloud/css/home.css
@@ -5,6 +5,130 @@
   max-width: none;
   background: transparent;
 }
+
+/* ====== 金融指标卡片 ====== */
+.finance-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
+}
+.credit-extra {
+  margin-bottom: 20px;
+}
+.finance-card {
+  background: #FFFFFF;
+  border-radius: 12px;
+  padding: 20px 24px;
+  border: 1px solid #E5E7EB;
+  transition: box-shadow .2s, transform .2s;
+}
+.finance-card:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
+  transform: translateY(-2px);
+}
+.finance-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+.finance-icon-wrap {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+.finance-icon-wrap.balance-icon {
+  background: linear-gradient(135deg, #E0EAFF, #C7D7FE);
+  color: #3B5DFF;
+}
+.finance-icon-wrap.month-icon {
+  background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
+  color: #059669;
+}
+.finance-icon-wrap.total-icon {
+  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
+  color: #D97706;
+}
+.finance-icon-wrap.credit-icon {
+  background: linear-gradient(135deg, #E0E7FF, #C7D2FE);
+  color: #6366F1;
+}
+.finance-label {
+  font-size: 13px;
+  color: #6B7280;
+  font-weight: 500;
+}
+.finance-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.2;
+  margin-bottom: 12px;
+  letter-spacing: -0.5px;
+}
+.finance-card-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+.finance-card-footer .recharge-btn {
+  cursor: pointer;
+  padding: 4px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #fff;
+  background: var(--color-primary, #3B5DFF);
+  border-radius: 6px;
+  transition: opacity .2s;
+}
+.finance-card-footer .recharge-btn:hover {
+  opacity: .85;
+}
+.finance-card-footer .voucher-link {
+  font-size: 12px;
+  color: #9CA3AF;
+}
+.percent-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.percent-badge.green {
+  background: #D1FAE5;
+  color: #059669;
+}
+.percent-badge.red {
+  background: #FEE2E2;
+  color: #DC2626;
+}
+.vs-text {
+  font-size: 12px;
+  color: #9CA3AF;
+}
+.total-sub-text {
+  font-size: 12px;
+  color: #9CA3AF;
+}
+.credit-status-tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #F3F4F6;
+  color: #6B7280;
+}
+.credit-status-tag.active {
+  background: #D1FAE5;
+  color: #059669;
+}
 .main-content {
   display: flex;
   gap: 20px;
diff --git a/clientarea/hgcloud/home.php b/clientarea/hgcloud/home.php
index 6bfab7f..e4a8c4b 100644
--- a/clientarea/hgcloud/home.php
+++ b/clientarea/hgcloud/home.php
@@ -21,156 +21,75 @@
           <div class="main-card">
             <div class="main-content">
               <div class="left-box">
+                <!-- info-box 已移至账户页面，此处隐藏 -->
+                <!--
                 <div class="info-box">
-                  <div class="info-first" @click="goUser" v-loading="nameLoading">
-                    <div class="name-first" ref="headBoxRef">
-                      {{account.firstName}}
+                  ... 用户信息/邮箱/认证 ...
+                </div>
+                -->
+                <div class="finance-cards" v-loading="nameLoading">
+                  <div class="finance-card balance-card">
+                    <div class="finance-card-header">
+                      <div class="finance-icon-wrap balance-icon"><i class="ph ph-wallet"></i></div>
+                      <span class="finance-label">{{lang.index_text3}}</span>
                     </div>
-                    <div class="name-box">
-                      <p class="hello">{{lang.index_hello}},{{account.username}}
-                        <span v-if="idcsmart_client_level.id"
-                          :style="{'color':idcsmart_client_level.background_color}">({{idcsmart_client_level.name}})
-                        </span>
-                      </p>
-                      <p class="name">
-                        ID：<span class="id-text">{{account.id}}</span>
-                      </p>
+                    <div class="finance-value">{{commonData.currency_prefix}}{{account.credit}}</div>
+                    <div class="finance-card-footer">
+                      <div class="recharge-btn" @click="showCz" v-if="commonData.recharge_open == 1">
+                        {{lang.index_text2}}
+                      </div>
+                      <div class="voucher-link" v-if="voucherList.length > 0">
+                        {{lang.index_text24}}
+                        <a href="/finance.htm?tab=4" target="_blank" class="bule-text">{{lang.index_text25}}</a>
+                      </div>
                     </div>
                   </div>
-                  <el-divider class="divider-box" direction="vertical"></el-divider>
-                  <div class="info-second" v-loading="nameLoading">
-                    <div class="email-box">
-                      <span><i class="ph ph-envelope" style="font-size:16px;vertical-align:middle;margin-right:4px"></i>{{lang.index_email}}</span>
-                      <span class="phone-number">{{account.email ? account.email : '--'}}</span>
+                  <div class="finance-card month-card">
+                    <div class="finance-card-header">
+                      <div class="finance-icon-wrap month-icon"><i class="ph ph-chart-line-up"></i></div>
+                      <span class="finance-label">{{lang.index_text4}}</span>
                     </div>
-                    <div class="phone-box">
-                      <span><i class="ph ph-phone" style="font-size:16px;vertical-align:middle;margin-right:4px"></i>{{lang.index_tel}}</span>
-                      <span class="phone-number">{{account.phone ? account.phone : '--'}}</span>
+                    <div class="finance-value">{{commonData.currency_prefix}}{{account.this_month_consume}}</div>
+                    <div class="finance-card-footer">
+                      <span class="percent-badge green" v-if="Number(account.this_month_consume_percent) >= 0">
+                        ↑ {{Number(account.this_month_consume_percent)}}%
+                      </span>
+                      <span class="percent-badge red" v-else>
+                        ↓ {{Number(account.this_month_consume_percent) * -1}}%
+                      </span>
+                      <span class="vs-text">vs 上月</span>
                     </div>
                   </div>
-                  <el-divider class="divider-box" direction="vertical"></el-divider>
-                  <div class="info-three" v-plugin="'IdcsmartCertification'"
-                    v-if="certificationObj.certification_open === 1">
-                    <div class="compny-box">
-                      <div class="left-icon">
-                        <i class="ph ph-buildings" style="font-size:20px;color:#8B949E"></i>
-                        <span class="left-type">{{lang.index_compny}}</span>
-                      </div>
-                      <div class="right-text">
-                        <div class="right-title">
-                          <span class="company-name"
-                            v-if="certificationObj.company?.status === 1">{{certificationObj.company.certification_company}}</span>
-                          <span class="company-name bule-text" @click="handelAttestation"
-                            v-else>{{lang.index_goAttestation}}</span>
-                        </div>
-                        <div class="certify-id">
-                          <div class="right-type">{{lang.finance_custom23}}：</div>
-                          <div class="company-name certify-bottom" :title="certificationObj.company?.certify_id">
-                            <span
-                              class="certify-text">{{certificationObj.company?.certify_id ? certificationObj.company.certify_id : '--'}}</span>
-                            <i class="ph ph-copy cpoy-btn" v-copy="certificationObj.company.certify_id"
-                              v-if="certificationObj.company?.certify_id"
-                              style="font-size:14px;cursor:pointer;margin-left:4px;color:#8B949E"></i>
-                          </div>
-                        </div>
-                      </div>
+                  <div class="finance-card total-card">
+                    <div class="finance-card-header">
+                      <div class="finance-icon-wrap total-icon"><i class="ph ph-coins"></i></div>
+                      <span class="finance-label">{{lang.index_text5}}</span>
                     </div>
-                    <div class="person-box">
-                      <div class="left-icon">
-                        <i class="ph ph-user" style="font-size:20px;color:#8B949E"></i>
-                        <span class="left-type">{{lang.index_name}}</span>
-                      </div>
-                      <div class="right-text">
-                        <div class="right-title">
-                          <span class="company-name" v-if="certificationObj.is_certification">
-                            {{certificationObj.company.status === 1 ? certificationObj.company.card_name : certificationObj.person.card_name}}
-                          </span>
-                          <span class="company-name bule-text" @click="handelAttestation"
-                            v-else>{{lang.index_goAttestation}}</span>
-                        </div>
-                        <div class="certify-id">
-                          <div class="right-type">{{lang.finance_custom24}}：</div>
-                          <div class="company-name certify-bottom" :title="certificationObj.person?.certify_id">
-                            <span
-                              class="certify-text">{{certificationObj.person?.certify_id ? certificationObj.person.certify_id : '--'}}
-                            </span>
-                            <i class="ph ph-copy cpoy-btn" v-copy="certificationObj.person?.certify_id" v-if="certificationObj.person?.certify_id"
-                              style="font-size:14px;cursor:pointer;margin-left:4px;color:#8B949E"></i>
-                          </div>
-                        </div>
-                      </div>
+                    <div class="finance-value">{{commonData.currency_prefix}}{{account.consume}}</div>
+                    <div class="finance-card-footer">
+                      <span class="total-sub-text">{{lang.index_text1}}</span>
                     </div>
                   </div>
                 </div>
-                <div class="statistics-box">
-                  <h3 class="title-text">{{lang.index_text1}}</h3>
-                  <div class="statistics-content" v-loading="nameLoading">
-                    <div class="money-box">
-                      <div class="statistics-top">
-                        <div class="statistics-credit">
-                          <div class="credit-title">
-                            <div>{{lang.index_text3}}</div>
-                          </div>
-                          <div class="credit-money">
-                            <div class="credit-num">{{commonData.currency_prefix}}{{account.credit}}</div>
-                            <div class="recharge-btn" @click="showCz" v-if="commonData.recharge_open == 1">
-                              {{lang.index_text2}}
-                            </div>
-                          </div>
-                        </div>
-                        <div class="statistics-credit" v-if="isShowCredit && creditData.status">
-                          <div class="credit-title">
-                            <div>{{lang.finance_text38}}</div>
-                            <div class="credit-tag" v-if="creditData.status === 'Expired'">{{lang.finance_text93}}</div>
-                            <div class="credit-tag" v-if="creditData.status === 'Overdue'">{{lang.finance_text94}}</div>
-                            <div class="credit-tag" v-if="creditData.status === 'Active'">{{lang.finance_text95}}</div>
-                            <div class="credit-tag" v-if="creditData.status === 'Suspended'">{{lang.finance_text96}}
-                            </div>
-                          </div>
-                          <div class="credit-money">
-                            <div class="credit-num">
-                              {{commonData.currency_prefix}}{{creditData.remaining_amount}}
-                            </div>
-                            <div class="recharge-text" @click="goCredit">
-                              {{lang.index_text34}}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="voucher-box" v-if="voucherList.length > 0">
-                        {{lang.index_text24}}
-                        <a href="/finance.htm?tab=4" target="_blank" class="bule-text">
-                          {{lang.index_text25}}
-                        </a>
-                      </div>
-                      <div class="statistics-bottom">
-                        <div class="progress-box">
-                          <el-progress type="circle" :width="Number(117)" :stroke-width="Number(12)" color='#04C8C9'
-                            :show-text="false" :percentage="percentage"></el-progress>
-                        </div>
-                        <div class="statistics-bottom-right">
-                          <div class="money-month">
-                            <div>
-                              <span class="type-box green-bg"></span>
-                              <span>{{lang.index_text4}}
-                                <span v-if="Number(account.this_month_consume_percent) >= 0"
-                                  class="percent-box-green">↑{{Number(account.this_month_consume_percent)}}%</span>
-                                <span v-else class="percent-box-red">↓{{Number(account.this_month_consume_percent)
-                                  *-1}}%</span>
-                              </span>
-                            </div>
-                            <div class="money-num">{{commonData.currency_prefix}}{{account.this_month_consume}}</div>
-                          </div>
-                          <div class="money-total">
-                            <div><span class="type-box grey-bg"></span>
-                              <span>{{lang.index_text5}}</span>
-                            </div>
-                            <div class="money-num">{{commonData.currency_prefix}}{{account.consume}}</div>
-                          </div>
-                        </div>
-                      </div>
+                <!-- 信用额度（保留） -->
+                <div class="credit-extra" v-if="isShowCredit && creditData.status" v-loading="nameLoading">
+                  <div class="finance-card credit-card">
+                    <div class="finance-card-header">
+                      <div class="finance-icon-wrap credit-icon"><i class="ph ph-credit-card"></i></div>
+                      <span class="finance-label">{{lang.finance_text38}}</span>
+                      <span class="credit-status-tag" v-if="creditData.status === 'Expired'">{{lang.finance_text93}}</span>
+                      <span class="credit-status-tag" v-if="creditData.status === 'Overdue'">{{lang.finance_text94}}</span>
+                      <span class="credit-status-tag active" v-if="creditData.status === 'Active'">{{lang.finance_text95}}</span>
+                      <span class="credit-status-tag" v-if="creditData.status === 'Suspended'">{{lang.finance_text96}}</span>
                     </div>
-                    <div class="order-box">
+                    <div class="finance-value">{{commonData.currency_prefix}}{{creditData.remaining_amount}}</div>
+                    <div class="finance-card-footer">
+                      <span class="bule-text" style="cursor:pointer" @click="goCredit">{{lang.index_text34}}</span>
+                    </div>
+                  </div>
+                </div>
+                <!-- 产品统计 -->
+                <div class="order-box" v-loading="nameLoading">
                       <div class="order-item order-box-1">
                         <div class="order-type-icon">
                           <i class="ph ph-pulse"></i>
@@ -193,7 +112,6 @@
                         <div class="order-nums">{{account.unpaid_order}}</div>
                       </div>
                     </div>
-                  </div>
                 </div>
                 <div class="product-list-box">
                   <h3 class="title-text">{{lang.index_text9}}</h3>