From 53c1cdccb883090791146e3e3523b23cbdc2e134 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Fri, 20 Mar 2026 21:39:27 +0800
Subject: [PATCH] =?UTF-8?q?redesign:=20=E4=BB=AA=E8=A1=A8=E7=9B=98?=
 =?UTF-8?q?=E5=85=A8=E6=96=B0=E9=AB=98=E7=BA=A7=E7=AE=80=E7=BA=A6=E9=A3=8E?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=20=E2=80=94=20=E5=AE=8C=E5=85=A8=E9=87=8D?=
 =?UTF-8?q?=E5=86=99=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- home.php: 三行卡片式网格布局(用户+统计/余额+推介/产品+工单)
- home.css: Stripe/Linear风格设计系统(16px圆角/微阴影/渐变头像/色彩标记统计卡)
- 响应式适配 @media 1200px 断点
- Element UI表格样式覆写
---
 clientarea/home/hgcloud_home/css/home.css | 1472 +++++++++------------
 clientarea/home/hgcloud_home/home.php     |  494 +++----
 2 files changed, 845 insertions(+), 1121 deletions(-)

diff --git a/clientarea/home/hgcloud_home/css/home.css b/clientarea/home/hgcloud_home/css/home.css
index fc7a1ae..0219a52 100644
--- a/clientarea/home/hgcloud_home/css/home.css
+++ b/clientarea/home/hgcloud_home/css/home.css
@@ -1,937 +1,751 @@
+/* ============================================
+   Dashboard — Premium Minimalist Design
+   ============================================ */
+
+/* --- Base --- */
 .el-main {
   padding: 0 !important;
 }
-.main-content {
-  display: flex;
-  column-gap: 0.24rem;
-  background: #f6f6fa;
-}
-.left-box {
-  flex: 1;
+.dashboard {
+  padding: 24px;
   display: flex;
   flex-direction: column;
-  row-gap: 0.24rem;
+  gap: 20px;
+  max-width: 1440px;
+  margin: 0 auto;
 }
-.info-box {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  padding: 0.25rem;
-  background-color: #fff;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+
+/* --- Card Base --- */
+.card {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  transition: box-shadow 0.2s ease;
 }
-.info-first {
-  height: 0.6rem;
+.card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+/* ====== Row 1: User + Stats ====== */
+.row-1 {
   display: flex;
+  gap: 20px;
+  align-items: stretch;
+}
+
+/* -- User Card -- */
+.card-user {
+  flex: 1;
+  padding: 28px 32px;
   cursor: pointer;
-}
-.name-first {
   display: flex;
+  flex-direction: column;
   justify-content: center;
+  gap: 20px;
+}
+.user-header {
+  display: flex;
   align-items: center;
-  font-size: 0.28rem;
-  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
-  width: 0.52rem;
-  height: 0.52rem;
+  gap: 16px;
+}
+.user-avatar {
+  width: 56px;
+  height: 56px;
   border-radius: 50%;
-  color: #FFFFFF;
-  font-weight: bold;
-  flex-shrink: 0;
-}
-.name-box {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  margin-left: 0.08rem;
-}
-.name {
-  color: #8692B0;
-  font-size: 0.14rem;
-  font-weight: 400;
-}
-.name .id-text {
-  color: #1E2736;
-}
-.hello {
-  font-weight: 400;
-  font-size: 0.16rem;
-  color: #1E2736;
-  max-width: 2.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.info-second {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.info-three {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  row-gap: 0.04rem;
-}
-.info-three .compny-box,
-.info-three .person-box {
-  display: flex;
-  align-items: flex-start;
-  column-gap: 0.32rem;
-  font-size: 0.14rem;
-}
-.info-three .compny-box .left-icon,
-.info-three .person-box .left-icon {
-  display: flex;
-  align-items: center;
-  column-gap: 0.04rem;
-  font-size: 0.14rem;
-  color: #8692B0;
-}
-.info-three .compny-box .left-icon i,
-.info-three .person-box .left-icon i {
-  font-size: 20px;
-  color: #8692B0;
-  flex-shrink: 0;
-}
-.info-three .compny-box .right-text .certify-id,
-.info-three .person-box .right-text .certify-id {
-  display: flex;
-  align-items: center;
-}
-.info-three .compny-box .right-text .right-type,
-.info-three .person-box .right-text .right-type {
-  color: #949CB0;
-}
-.info-three .compny-box .right-text .company-name,
-.info-three .person-box .right-text .company-name {
-  color: #1E2736;
-  display: inline-block;
-  max-width: 2.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.info-three .compny-box .right-text .certify-bottom,
-.info-three .person-box .right-text .certify-bottom {
-  display: flex;
-  align-items: center;
-}
-.info-three .compny-box .right-text .certify-bottom .cpoy-btn,
-.info-three .person-box .right-text .certify-bottom .cpoy-btn {
-  cursor: pointer;
-  margin-left: 0.04rem;
-  width: 0.14rem;
-  height: 0.14rem;
-}
-.info-three .compny-box .right-text .bule-text,
-.info-three .person-box .right-text .bule-text {
-  cursor: pointer;
-  color: var(--color-primary);
-}
-.info-three .compny-box .right-text .certify-text,
-.info-three .person-box .right-text .certify-text {
-  color: #292E36;
-  display: inline-block;
-  max-width: 1.6rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.email-box,
-.phone-box {
-  color: #8692B0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 0.14rem;
-}
-.email-box .phone-number,
-.phone-box .phone-number {
-  margin-left: 0.25rem;
-  color: #1E2736;
-}
-.info-second > div i.ph {
-  margin-right: 0.05rem;
-  vertical-align: middle;
-  font-size: 16px;
-}
-.statistics-content {
-  display: flex;
-  flex-wrap: wrap;
-  min-height: 2.4rem;
-}
-.money-box {
-  box-sizing: border-box;
-  flex: 1;
-  padding: 0.24rem;
-  border-radius: 12px;
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-}
-.money-top {
-  display: flex;
-  justify-content: space-between;
-  column-gap: 0.26rem;
-}
-.money-top .money-credit {
-  position: relative;
-  flex: 1;
-  flex-shrink: 0;
-  border-radius: 10px;
-  background: #F6F6FA;
-  padding: 0.16rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.money-top .money-credit .credit-btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  cursor: pointer;
-  background-color: var(--color-primary);
-  font-size: 0.14rem;
+  background: linear-gradient(135deg, #6366F1, #8B5CF6);
   color: #fff;
-  padding: 0.05rem 0.23rem;
-  border-radius: 0.04rem;
-  border-radius: 0 0.04rem 0 0.08rem;
-}
-.money-top .money-credit .credit-title {
-  color: #646464;
-  font-size: 0.14rem;
+  font-size: 22px;
+  font-weight: 700;
   display: flex;
   align-items: center;
-  column-gap: 0.08rem;
+  justify-content: center;
+  flex-shrink: 0;
+  letter-spacing: 1px;
 }
-.money-top .money-credit .credit-title.coin-title {
-  justify-content: space-between;
+.user-greeting {
+  font-size: 18px;
+  color: #1a1a2e;
 }
-.money-top .money-credit .credit-title .credit-detail {
-  color: var(--color-primary);
-  font-size: 0.14rem;
-  cursor: pointer;
+.user-greeting strong {
+  font-weight: 600;
 }
-.money-top .money-credit .credit-title .create-notice {
-  display: flex;
-  align-items: center;
-}
-.money-top .money-credit .credit-title .create-notice .notice-status {
-  width: 0.06rem;
-  height: 0.06rem;
-  border-radius: 50%;
-  background-color: #A2A2A2;
-}
-.money-top .money-credit .credit-title .create-notice .notice-status.active {
-  background-color: var(--color-success);
-}
-.money-top .money-credit .credit-title .create-notice .notice-btn {
-  color: var(--color-primary);
-  font-size: 0.12rem;
-  cursor: pointer;
-}
-.money-top .money-credit .credit-money {
-  margin-top: 0.16rem;
-  display: flex;
-  align-items: center;
-  column-gap: 0.1rem;
-}
-.money-top .money-credit .credit-money .credit-num {
-  color: #2B2B2B;
-  font-size: 0.32rem;
+.user-level {
+  margin-left: 6px;
+  font-size: 13px;
   font-weight: 500;
-  flex-shrink: 0;
 }
-.money-top .money-credit .credit-money .credit-num .s-24 {
-  margin-right: 0.08rem;
-  font-size: 0.24rem;
+.user-id {
+  font-size: 13px;
+  color: #9CA3AF;
+  margin-top: 2px;
 }
-.money-top .money-credit .credit-money .recharge-btn {
-  cursor: pointer;
-  padding: 0 0.1rem;
-  line-height: 0.24rem;
-  color: #ffffff;
-  font-size: 0.12rem;
-  border-radius: 0.04rem;
-  background: var(--color-primary);
+.user-contacts {
+  display: flex;
+  gap: 24px;
 }
-.money-top .money-credit .credit-money .recharge-text {
-  font-weight: 400;
-  cursor: pointer;
-  color: var(--color-primary);
-  font-size: 0.14rem;
-  margin-left: 0.16rem;
-}
-.money-order {
-  margin-top: 0.32rem;
-  border-top: 1px solid #EEEEEE;
-  padding-top: 0.24rem;
+.contact-item {
   display: flex;
   align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #6B7280;
 }
-.money-order .money-order-divider {
-  width: 1px;
-  height: 0.2rem;
-  border-radius: 1px;
-  background: #EBEBF4;
-  margin: 0 0.2rem;
+.contact-item i {
+  font-size: 16px;
+  color: #9CA3AF;
 }
-.money-order .money-order-item {
+
+/* -- Stats Group -- */
+.stats-group {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: 1;
-  flex-shrink: 0;
+  gap: 16px;
 }
-.money-order .money-order-item .money-order-title {
-  display: flex;
-  align-items: center;
-  font-size: 0.14rem;
-  color: #333333;
-}
-.money-order .money-order-item .money-order-title .credit-tag {
-  margin-left: 0.08rem;
-  color: #333333;
-  font-size: 0.12rem;
-  box-sizing: border-box;
-  padding: 0.02rem 0.04rem;
-  border: 1px solid #E6E7EB;
-  border-radius: 2px;
-  background: #FFFFFF;
-}
-.money-order .money-order-item .money-order-value {
-  font-size: 0.14rem;
-  color: #2B2B2B;
-  font-weight: bold;
-}
-.money-order .money-order-item .money-order-value .s-12 {
-  margin-right: 0.06rem;
-  font-size: 0.12rem;
-}
-.voucher-box {
-  color: #646464;
-  font-size: 0.12rem;
-}
-.voucher-box .bule-text {
-  color: var(--color-primary);
-  margin-left: 0.03rem;
-  cursor: pointer;
-}
-.statistics-bottom {
-  margin-top: -0.16rem;
-  display: flex;
-  padding: 0.26rem 0.24rem;
-  border-radius: 12px;
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-}
-.statistics-bottom .statistics-item {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  column-gap: 0.08rem;
-}
-.statistics-bottom .statistics-item .statistics-item-name {
-  color: #A2A2A2;
-  font-size: 0.14rem;
-}
-.statistics-bottom .statistics-item .statistics-item-name .green-text {
-  color: var(--color-success);
-}
-.statistics-bottom .statistics-item .statistics-item-name .red-text {
-  color: var(--color-danger);
-}
-.statistics-bottom .statistics-item .statistics-item-value {
-  font-size: 0.14rem;
-  color: #2B2B2B;
-  font-weight: bold;
-}
-.statistics-bottom .statistics-item .statistics-item-value .s-12 {
-  margin-right: 0.06rem;
-  font-size: 0.12rem;
-}
-.statistics-bottom .statistics-item-divider {
-  width: 1px;
-  height: 0.2rem;
-  border-radius: 1px;
-  background: #EBEBF4;
-  margin: 0 0.2rem;
-}
-.order-box {
-  margin-left: 0.08rem;
-  width: 5rem;
-  display: flex;
-  column-gap: 0.08rem;
-}
-.order-box .order-item {
-  height: 100%;
-  flex: 1;
+.card-stat {
+  width: 160px;
+  padding: 24px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
-  border-radius: 12px;
+  justify-content: center;
+  gap: 8px;
   cursor: pointer;
+  text-align: center;
+  border-top: 3px solid transparent;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
-.order-box .order-item:hover {
+.card-stat:hover {
   transform: translateY(-3px);
-  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 }
-.order-box .order-title {
-  color: #FFFFFF;
-  font-size: 0.13rem;
+.card-stat i {
+  font-size: 32px;
+  opacity: 0.7;
+}
+.stat-value {
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: -1px;
+  line-height: 1;
+}
+.stat-label {
+  font-size: 12px;
+  color: #9CA3AF;
   font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
-.order-box .order-nums {
-  margin-bottom: 0.33rem;
-  font-size: 0.32rem;
-  font-weight: bold;
-  color: #FFFFFF;
+
+/* Stat colors */
+.stat-purple {
+  border-top-color: #8B5CF6;
 }
-.order-box .order-type-icon {
-  margin-top: 0.28rem;
-  font-size: 0.48rem;
-  color: rgba(255, 255, 255, 0.85);
+.stat-purple i, .stat-purple .stat-value {
+  color: #8B5CF6;
 }
-.order-box .order-box-1 {
-  background: linear-gradient(145deg, #7239EA, #9B6BFF);
+.stat-blue {
+  border-top-color: #3B82F6;
 }
-.order-box .order-box-2 {
-  background: linear-gradient(145deg, #3699FF, #60B0FF);
+.stat-blue i, .stat-blue .stat-value {
+  color: #3B82F6;
 }
-.order-box .order-box-3 {
-  background: linear-gradient(145deg, #3DD598, #60E8B5);
+.stat-amber {
+  border-top-color: #F59E0B;
 }
-.product-list-box {
+.stat-amber i, .stat-amber .stat-value {
+  color: #F59E0B;
+}
+
+/* ====== Row 2: Balance + Side ====== */
+.row-2 {
+  display: flex;
+  gap: 20px;
+  align-items: flex-start;
+}
+
+/* -- Balance Card -- */
+.card-balance {
   flex: 1;
-  background-color: #fff;
-  border-radius: 12px;
-  padding: 0.24rem;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+  padding: 28px 32px;
 }
-.product-list-box .title-text {
-  font-size: 0.14rem;
-  color: #2B2B2B;
-  margin-bottom: 0.24rem;
-}
-.product-list-box .product-name {
-  color: var(--color-primary);
-  font-size: 0.14rem;
-  cursor: pointer;
-}
-.product-list-box .red-time {
-  color: var(--color-danger);
-}
-.right-box {
-  flex-shrink: 0;
-  box-sizing: border-box;
-  padding: 0.24rem;
-  width: 4.5rem;
-  border-radius: 12px;
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-}
-.recommend-box {
-  width: 3.65rem;
-  text-align: center;
-  margin: 0 auto;
-  margin-top: 0.21rem;
-}
-.recommend-box h2 {
-  text-align: center;
-  color: #1E2736;
-  font-size: 0.24rem;
-}
-.recommend-box p {
-  margin-top: 0.26rem;
-  text-align: center;
-  color: #8692B0;
-  font-size: 0.14rem;
-}
-.recommend-box img {
-  display: none;
-}
-.recommend-placeholder-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 80px;
-  color: #8692B0;
-  opacity: 0.15;
-  padding: 0.4rem 0;
-}
-.recommend-illustration {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 64px;
-  color: var(--color-primary);
-  opacity: 0.3;
-}
-.recommend-people {
-  margin-top: 0.3rem;
-  border-top: 1px solid #E6E7EB;
-  padding-top: 0.3rem;
-  text-align: left;
-}
-.recommend-people-num {
-  display: inline-block;
-  width: 1rem;
-  height: 0.08rem;
-  background: var(--color-warning);
-  border-radius: 0rem 0.2rem 0.2rem 0rem;
-}
-.recommend-money-num {
-  display: inline-block;
-  width: 1.2rem;
-  height: 0.08rem;
-  background: var(--color-success);
-  border-radius: 0rem 0.2rem 0.2rem 0rem;
-}
-.recommend-number {
-  margin-left: 0.16rem;
-  font-weight: bold;
-  font-size: 0.26rem;
-  color: #040E34;
-}
-.recommend-people > div {
-  display: flex;
-  align-items: center;
-}
-.recommend-people > div:nth-of-type(2) {
-  margin-top: 0.47rem;
-}
-.WorkOrder-box {
-  margin-top: 0.24rem;
-}
-.WorkOrder-title {
+.balance-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 0.12rem;
+}
+.balance-title {
   font-size: 14px;
-  color: #2B2B2B;
-  font-weight: bold;
+  color: #6B7280;
+  font-weight: 500;
 }
-.more {
+.balance-btn {
+  font-size: 13px;
+  color: #fff;
+  background: var(--color-primary, #3B82F6);
+  padding: 6px 16px;
+  border-radius: 999px;
   cursor: pointer;
-  display: block;
-  padding: 0 0.03rem;
-  background: #EEF4FF;
-  height: 0.24rem;
-  line-height: 0.24rem;
-  text-align: center;
-  border-radius: 0.03rem;
-  color: #8692B0;
+  font-weight: 500;
+  transition: opacity 0.2s;
 }
-.WorkOrder-content {
-  padding: 16px;
-  border-radius: 10px;
-  border: 1px solid #EEEEEE;
-  background: #FAFBFC;
+.balance-btn:hover {
+  opacity: 0.85;
 }
-.WorkOrder-item {
+.balance-amount {
+  font-size: 40px;
+  font-weight: 700;
+  color: #1a1a2e;
+  margin: 12px 0 4px;
+  line-height: 1.1;
+  letter-spacing: -1px;
+}
+.balance-amount .currency {
+  font-size: 24px;
+  margin-right: 4px;
+  font-weight: 500;
+  color: #6B7280;
+}
+.balance-extra {
+  margin-bottom: 8px;
+}
+.recharge-link {
+  font-size: 13px;
+  color: var(--color-primary, #3B82F6);
+  cursor: pointer;
+}
+.balance-footer {
   display: flex;
   align-items: center;
-  margin-bottom: 0.3rem;
+  gap: 0;
+  padding-top: 20px;
+  margin-top: 20px;
+  border-top: 1px solid #F3F4F6;
 }
-.WorkOrder-item:hover {
-  cursor: pointer;
-  background-color: #f5f7fa;
-  transition: background-color 0.25s ease;
+.consume-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-.replay-div {
-  flex-shrink: 0;
-  margin-right: 0.1rem;
+.consume-label {
+  font-size: 13px;
+  color: #9CA3AF;
+}
+.consume-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+.consume-divider {
+  width: 1px;
+  height: 16px;
+  background: #E5E7EB;
+  margin: 0 20px;
+}
+.trend-up {
+  font-size: 12px;
+  color: #10B981;
   font-weight: 500;
-  font-size: 0.13rem;
-  padding: 0 0.1rem;
-  height: 0.26rem;
-  line-height: 0.26rem;
-  text-align: center;
-  background: rgba(54, 155, 255, 0.205);
-  color: #FFF;
-  border-radius: 0.03rem;
 }
-.replay-red {
-  color: var(--color-danger);
-  background: rgba(240, 20, 46, 0.205);
+.trend-down {
+  font-size: 12px;
+  color: #EF4444;
+  font-weight: 500;
 }
-.replay-green {
-  background: rgba(61, 213, 152, 0.205);
-  color: var(--color-success);
+
+/* Credit section */
+.credit-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #F3F4F6;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
-.replay-box {
-  width: 80%;
+.credit-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-.replay-title {
-  font-size: 0.14rem;
-  color: #1E2736;
-  white-space: nowrap;
+.credit-label {
+  font-size: 13px;
+  color: #6B7280;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.credit-val {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+.credit-tag {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  border: 1px solid #E5E7EB;
+  color: #6B7280;
+  background: #F9FAFB;
+}
+
+/* Coin section */
+.coin-section {
+  margin-top: 16px;
+  padding: 16px;
+  background: #F9FAFB;
+  border-radius: 10px;
+}
+.coin-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  color: #6B7280;
+}
+.coin-link {
+  font-size: 13px;
+  color: var(--color-primary, #3B82F6);
+}
+.coin-amount {
+  margin-top: 8px;
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a2e;
+}
+
+/* Voucher */
+.voucher-row {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #9CA3AF;
+}
+.voucher-link {
+  color: var(--color-primary, #3B82F6);
+  margin-left: 4px;
+}
+
+/* -- Side Card (Cert + Referral) -- */
+.card-side {
+  width: 420px;
+  flex-shrink: 0;
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Certification */
+.cert-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #F3F4F6;
+}
+.cert-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.cert-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: #F3F4F6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.cert-icon i {
+  font-size: 20px;
+  color: #6B7280;
+}
+.cert-label {
+  font-size: 12px;
+  color: #9CA3AF;
+}
+.cert-value {
+  font-size: 14px;
+  color: #1a1a2e;
+  font-weight: 500;
+  max-width: 200px;
+  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cert-action {
+  font-size: 14px;
+  color: var(--color-primary, #3B82F6);
+  cursor: pointer;
+  font-weight: 500;
+}
+
+/* Referral Open */
+.referral-open {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.referral-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.referral-title > span:first-child {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+.referral-reward {
+  font-size: 12px;
+  color: #fff;
+  background: linear-gradient(135deg, #EF4444, #F97316);
+  padding: 3px 10px;
+  border-radius: 999px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.referral-reward i {
+  font-size: 14px;
+}
+.referral-url {
+  display: flex;
+  border: 1px solid #E5E7EB;
+  border-radius: 10px;
   overflow: hidden;
 }
-.replay-name {
-  font-size: 0.13rem;
-  font-weight: 500;
-  color: #8692B0;
+.url-text {
+  flex: 1;
+  padding: 10px 14px;
+  font-size: 13px;
+  color: #6B7280;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background: #F9FAFB;
 }
-.notice-box {
-  margin-top: 0.24rem;
+.url-copy {
+  padding: 10px 20px;
+  font-size: 13px;
+  color: var(--color-primary, #3B82F6);
+  font-weight: 500;
+  cursor: pointer;
+  border-left: 1px solid #E5E7EB;
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.url-copy:hover {
+  background: #F0F7FF;
+}
+.referral-stats {
+  display: flex;
+  gap: 12px;
+}
+.ref-stat {
+  flex: 1;
+  padding: 14px 16px;
+  background: #F9FAFB;
+  border-radius: 10px;
+}
+.ref-amount {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1a1a2e;
+}
+.ref-label {
+  font-size: 12px;
+  color: #9CA3AF;
+  margin-top: 4px;
+}
+
+/* Referral Closed */
+.referral-closed {
+  text-align: center;
+  padding: 24px 0;
+}
+.referral-closed > i {
+  font-size: 48px;
+  color: #D1D5DB;
+}
+.referral-closed h3 {
+  font-size: 16px;
+  color: #1a1a2e;
+  margin: 12px 0 4px;
+}
+.referral-closed p {
+  font-size: 13px;
+  color: #9CA3AF;
+  margin-bottom: 16px;
+}
+.referral-open-btn {
+  display: inline-block;
+  padding: 8px 24px;
+  background: var(--color-primary, #3B82F6);
+  color: #fff;
+  font-size: 13px;
+  border-radius: 999px;
+  cursor: pointer;
+  font-weight: 500;
+}
+.referral-disabled {
+  font-size: 13px;
+  color: #9CA3AF;
+  margin-top: 8px;
+}
+
+/* ====== Row 3: Products + Sidebar ====== */
+.row-3 {
+  display: flex;
+  gap: 20px;
+  align-items: flex-start;
+}
+
+/* -- Products Card -- */
+.card-products {
+  flex: 1;
+  padding: 28px 32px;
+  min-width: 0;
+}
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a2e;
+  margin: 0 0 20px;
+}
+.product-link {
+  color: var(--color-primary, #3B82F6);
+  font-weight: 500;
+  text-decoration: none;
+}
+.product-link:hover {
+  text-decoration: underline;
+}
+.text-danger {
+  color: #EF4444;
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  padding: 60px 0;
+}
+.empty-state > i {
+  font-size: 64px;
+  color: #D1D5DB;
+}
+.empty-state h3 {
+  font-size: 18px;
+  color: #374151;
+  margin: 16px 0 6px;
+  font-weight: 500;
+}
+.empty-state p {
+  font-size: 13px;
+  color: #9CA3AF;
+  margin-bottom: 20px;
+}
+.empty-state .el-button {
+  padding: 10px 28px;
+  font-size: 14px;
+  border: none;
+  background: var(--color-primary, #3B82F6);
+  color: #fff;
+}
+
+/* -- Sidebar Card -- */
+.card-sidebar {
+  width: 360px;
+  flex-shrink: 0;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.sidebar-header > span:first-child {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+.sidebar-more {
+  cursor: pointer;
+  font-size: 18px;
+  color: #9CA3AF;
+  letter-spacing: 2px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+.sidebar-more:hover {
+  background: #F3F4F6;
+}
+
+/* Tickets */
+.ticket-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.ticket-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.ticket-item:hover {
+  background: #F9FAFB;
+}
+.ticket-status {
+  flex-shrink: 0;
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  color: #fff;
+  font-weight: 500;
+}
+.ticket-title {
+  font-size: 13px;
+  color: #374151;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ticket-dept {
+  font-size: 12px;
+  color: #9CA3AF;
+}
+
+/* Notices */
+.notice-list {
+  display: flex;
+  flex-direction: column;
 }
 .notice-item {
   display: flex;
-  cursor: pointer;
-  justify-content: space-between;
   align-items: center;
-  padding-left: 0.16rem;
+  justify-content: space-between;
+  padding: 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.15s;
 }
 .notice-item:hover {
-  background-color: #f5f7fa;
-  transition: background-color 0.25s ease;
-}
-.notice-item:nth-of-type(1) {
-  border-left: 0.02rem solid var(--color-success);
-  margin-bottom: 0.4rem;
-}
-.notice-item:nth-of-type(2) {
-  border-left: 0.02rem solid var(--color-primary);
-  margin-bottom: 0.4rem;
-}
-.notice-item:nth-of-type(3) {
-  border-left: 0.02rem solid var(--color-warning);
-  margin-bottom: 0.3rem;
-}
-.notice-time {
-  font-size: 0.2rem;
-  color: #1E2736;
+  background: #F9FAFB;
 }
 .notice-title {
-  font-weight: 400;
-  font-size: 0.14rem;
-  color: #1E2736;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.notice-type {
-  font-size: 0.13rem;
-  font-weight: 500;
-  color: #8692B0;
-}
-.notice-item-right {
-  color: #8692B0;
-  width: 0.24rem;
-  height: 0.24rem;
-  text-align: center;
-  line-height: 0.24rem;
-  background: #EEF4FF;
-  border-radius: 0.03rem;
-}
-.no-product {
-  text-align: center;
-  background-color: #fff;
-  border-radius: 12px;
-  padding: 60px 24px 80px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-}
-.no-product::before {
-  content: '\e4b6';
-  font-family: 'Phosphor';
-  font-size: 72px;
-  color: #8692B0;
-  opacity: 0.15;
-  display: block;
-  margin-bottom: 16px;
-}
-.no-product h2 {
-  font-weight: 400;
-  color: #171725;
-  font-size: 0.28rem;
-}
-.no-product p {
-  margin: 0.1rem 0 0.2rem 0;
-  color: #8692B0;
-  font-size: 0.14rem;
-}
-.no-recommend {
-  margin: 0 auto;
-  margin-top: 0.24rem;
-  color: #FFF;
-  font-size: 0.14rem;
-  background: var(--color-primary);
-  height: 0.32rem;
-  line-height: 0.32rem;
-  width: 1.52rem;
-  border-radius: 0.03rem;
-  cursor: pointer;
-}
-.recommend-text {
-  margin: 0 auto;
-  margin-top: 0.24rem;
-  color: #8692B0;
-  font-size: 0.14rem;
-  background: #EEF4FF;
-  height: 0.32rem;
-  line-height: 0.32rem;
-  border-radius: 0.03rem;
-}
-.info-box .divider-box {
-  height: 100%;
-  background-color: #E6E7EB !important;
-}
-.dialog-form {
-  display: flex;
-  flex-direction: column;
-}
-.cz-input {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.cz-input > .btn-ok {
-  margin-left: 0.1rem;
-  height: 0.46rem;
-  background: var(--color-primary);
-  border-radius: 3px;
-  color: rgba(255, 255, 255, 0.9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.pay-html {
-  display: flex;
-  justify-content: center;
-}
-.pay-html > img {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-.ty-select {
-  width: 100%;
-}
-.recommend-box-open .recommend-top {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.recommend-box-open .recommend-top .left {
-  display: flex;
-  flex-direction: column;
-}
-.recommend-box-open .recommend-top .left .row1 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.recommend-box-open .recommend-top .left .row1 .title-text {
-  font-size: 18px;
-  font-weight: bold;
-  color: #171725;
-  margin-right: 0.2rem;
-  margin-bottom: 0;
-}
-.recommend-box-open .recommend-top .left .row1 .reword {
-  background: linear-gradient(180deg, #F74C4B 0%, #EF7575 100%);
-  border-radius: 3px;
-  color: #FFF;
-  position: relative;
-  padding: 1px 6px 1px 20px;
   font-size: 13px;
-  cursor: pointer;
-}
-.recommend-box-open .recommend-top .left .row1 .reword img {
-  width: 36px;
-  height: 35px;
-  position: absolute;
-  left: -18px;
-  top: -4px;
-}
-.recommend-box-open .recommend-top .left .row2 {
-  font-size: 14px;
-  font-weight: bold;
-  color: #2B2B2B;
-  margin-top: 0.3rem;
-  margin-bottom: 0.13rem;
-}
-.recommend-box-open .recommend-top .left .row3,
-.recommend-box-open .recommend-top .left .row4 {
-  font-size: 14px;
-  color: #8692B0;
-}
-.recommend-box-open .recommend-top .right {
-  width: 1.5rem;
-  height: 1.53rem;
-}
-.recommend-box-open .url {
-  width: 100%;
-  height: 0.46rem;
-  border: 1px solid #E6E7EB;
-  border-radius: 3px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 0.26rem;
-}
-.recommend-box-open .url .url-text {
-  width: 100%;
-  font-size: 15px;
-  color: #8692B0;
-  margin-left: 0.16rem;
+  color: #374151;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.recommend-box-open .url .copy-btn {
-  width: 112px;
-  height: 100%;
-  background: #E1F0FF;
-  border-left: 1px solid #E6E7EB;
-  border-radius: 0px 3px 3px 0px;
-  font-size: 16px;
-  color: var(--color-primary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.notice-meta {
+  font-size: 12px;
+  color: #9CA3AF;
+  margin-top: 2px;
 }
-.recommend-box-open .top-statistic {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  column-gap: 0.08rem;
-  flex-wrap: wrap;
-  margin-top: 0.24rem;
+.notice-item > i {
+  font-size: 14px;
+  color: #D1D5DB;
+  flex-shrink: 0;
 }
-.recommend-box-open .top-statistic .top-item {
-  padding: 0.16rem;
-  flex: 1;
-  box-shadow: 0px 1px 4px rgba(21, 34, 50, 0.08);
-  border-radius: 0.04rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding-bottom: 0.45rem;
+
+/* ====== Element UI Overrides ====== */
+.card-products .el-table {
+  background: transparent;
+  color: #374151;
+  font-size: 13px;
 }
-.recommend-box-open .top-statistic .top-item:nth-of-type(1) {
-  background: url("../img/referral/top1.png") no-repeat;
-  background-size: 100% auto;
-  background-position: bottom;
+.card-products .el-table th {
+  background: #F9FAFB !important;
+  color: #6B7280;
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  border-bottom: none !important;
 }
-.recommend-box-open .top-statistic .top-item:nth-of-type(2) {
-  background: url("../img/referral/top3.png") no-repeat;
-  background-size: 100% auto;
-  background-position: bottom;
+.card-products .el-table td {
+  border-bottom: 1px solid #F3F4F6 !important;
 }
-.recommend-box-open .top-statistic .top-item .top-money {
-  font-size: 0.24rem;
-  font-weight: bold;
-  color: #1E2736;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.card-products .el-table tr:hover > td {
+  background: #FAFBFC !important;
 }
-.recommend-box-open .top-statistic .top-item .top-text {
-  font-size: 0.14rem;
-  color: #8692B0;
+.card-products .el-table::before {
+  display: none;
 }
+
+/* ====== Dialog ====== */
 .open-dialog {
-  font-size: 16px;
-}
-.open-dialog .dialog-footer {
-  font-size: 0.16rem;
+  border-radius: 16px;
+  font-size: 14px;
 }
 .open-dialog .dialog-footer .btn-ok {
-  width: 1.12rem;
-  height: 0.46rem;
-  background: var(--color-primary);
-  border-radius: 3px;
-  color: #FFF;
+  padding: 10px 24px;
+  background: var(--color-primary, #3B82F6);
+  border-radius: 999px;
+  color: #fff;
+  border: none;
 }
 .open-dialog .dialog-footer .btn-no {
-  width: 1.12rem;
-  height: 0.46rem;
-  background: #E7E7E7;
-  border-radius: 3px;
-  color: #1E2736;
+  padding: 10px 24px;
+  border-radius: 999px;
 }
+
+/* ====== WeChat ====== */
 .wx-code {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  z-index: 100;
   position: fixed;
-  top: 50%;
-  right: 3px;
-  transform: translateY(50%);
-  cursor: pointer;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  right: 30px;
+  bottom: 30px;
+  z-index: 100;
 }
-.wx-code .wx-img {
-  width: 40px;
-  height: 40px;
-  background: url('../img/wx.svg') no-repeat;
-  background-size: 100% 100%;
-}
-.wx-code:hover .wx-img {
-  background: url('../img/wx_hover.svg') no-repeat;
-  background-size: 100% 100%;
-}
-.wx-box {
+.wx-box .tit {
   text-align: center;
+  font-size: 14px;
+  color: #374151;
+  margin-bottom: 10px;
 }
 .wx-box .img {
-  width: 200px;
-  height: 200px;
-  margin: 0 auto;
+  display: flex;
+  justify-content: center;
 }
 .wx-box .img img {
-  width: 100%;
+  width: 160px;
+  height: 160px;
 }
-@media screen and (max-width: 750px) {
-  .main-content {
-    display: block;
-    padding-bottom: 1.5rem;
+.wx-img {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #07C160;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
+}
+
+/* ====== Responsive ====== */
+@media (max-width: 1200px) {
+  .row-1, .row-2, .row-3 {
+    flex-direction: column;
   }
-  .el-main {
-    margin-top: 1rem;
-  }
-  .statistics-bottom {
-    padding: 0.26rem 0.24rem;
-    margin-top: 0.24rem;
-  }
-  .recharge-btn {
-    height: 30px;
-    line-height: 30px;
-  }
-  .progress-box .el-progress-circle {
-    display: flex;
-  }
-  .order-box {
+  .stats-group {
     width: 100%;
-    margin-left: 0;
-    margin-top: 0.2rem;
   }
-  .order-box .order-item {
+  .card-side, .card-sidebar {
+    width: 100%;
+  }
+  .card-stat {
+    width: auto;
     flex: 1;
   }
-  .info-box .divider-box {
-    display: none;
-  }
-  .info-three {
-    margin-top: 10px;
-    width: 100%;
-    align-items: flex-end;
-  }
-  .right-box {
-    width: auto;
-    margin-top: 0.2rem;
-  }
 }
diff --git a/clientarea/home/hgcloud_home/home.php b/clientarea/home/hgcloud_home/home.php
index 69d340e..f20f388 100644
--- a/clientarea/home/hgcloud_home/home.php
+++ b/clientarea/home/hgcloud_home/home.php
@@ -19,330 +19,240 @@
       <el-container>
         <top-menu></top-menu>
         <el-main class="home-main">
-          <!-- 自己的东西 -->
-          <div class="main-card">
-            <div class="main-content">
-              <div class="left-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="name-box">
-                      <p class="hello" :title="account.username">
-                        {{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>
-                  </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"></i>{{lang.index_email}}</span>
-                      <span class="phone-number">{{account.email ? account.email : '--'}}</span>
-                    </div>
-                    <div class="phone-box">
-                      <span><i class="ph ph-phone"></i>{{lang.index_tel}}</span>
-                      <span class="phone-number">{{account.phone ? account.phone : '--'}}</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"></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" v-if="certificationObj.certification_show_certify_id === 1">
-                          <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"></i>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="person-box">
-                      <div class="left-icon">
-                        <i class="ph ph-user"></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"
-                            :title="certificationObj.company.status === 1 ? certificationObj.company.card_name : certificationObj.person.card_name">
-                            {{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" v-if="certificationObj.certification_show_certify_id === 1">
-                          <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"></i>
-                          </div>
-                        </div>
-                      </div>
+          <div class="dashboard">
+
+            <!-- ====== 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="statistics-box">
-                  <div class="statistics-content" v-loading="nameLoading">
-                    <div class="money-box">
-                      <div class="money-top">
-                        <div class="money-credit">
-                          <div class="credit-btn" @click="showCz" v-if="commonData.recharge_open == 1">
-                            {{lang.index_text2}}
-                          </div>
-                          <div class="credit-title" v-if="commonData.balance_notice_show == 1">
-                            <div class="credit-name">{{lang.index_text3}}</div>
-                            <div class="create-notice">
-                              <div class="notice-status" :class="{'active': account.credit_remind === 1}"></div>
-                              <div class="notice-btn" @click="setAccoutCredit">【{{lang.coin_text66}}】</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="credit-money">
-                            <div class="credit-num">
-                              <span class="s-24">{{commonData.currency_prefix}}</span>{{account.credit}}
-                              <span v-if="commonData.recharge_open == 1 && coinRecharge.length > 0"
-                                class="recharge-text" @click="showCz">{{lang.index_text35}}</span>
-                            </div>
-                          </div>
-                        </div>
-                        <div class="money-credit" v-plugin="'Coin'" v-if="coinData.name">
-                          <div class="credit-title coin-title">
-                            <div class="credit-name" style="display: flex; align-items: center;">
-                              {{coinData.name}}
-                              <el-tooltip effect="dark" placement="top" v-if="coinData.coin_description_open == 1">
-                                <div slot="content" v-html="coinData.coin_description"></div>
-                                <svg t="1745803081479" viewBox="0 0 1024 1024" version="1.1"
-                                  xmlns="http://www.w3.org/2000/svg" p-id="14138" width="16" height="16"
-                                  xmlns:xlink="http://www.w3.org/1999/xlink">
-                                  <path
-                                    d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m45.32419 487.619047v73.142857h-68.510476l-0.024381-73.142857h68.534857z m-4.047238-362.008381c44.251429 8.923429 96.889905 51.126857 96.889905 112.518096 0 61.415619-50.151619 84.650667-68.120381 96.134095-17.993143 11.50781-24.722286 24.771048-24.722286 38.863238V609.52381h-68.534857v-90.672762c0-21.504 6.89981-36.571429 26.087619-49.883429l4.315429-2.852571 38.497524-25.6c24.551619-16.530286 24.210286-49.712762 9.020952-64.365715a68.998095 68.998095 0 0 0-60.391619-15.481904c-42.715429 8.387048-47.640381 38.521905-47.932952 67.779047v16.554667H390.095238c0-56.953905 6.534095-82.773333 36.912762-115.395048 34.03581-36.449524 81.993143-42.300952 126.268952-33.328762z"
-                                    p-id="14139" fill="currentColor"></path>
-                                </svg>
-                              </el-tooltip>
-                            </div>
-                            <a href="/finance.htm?tab=7" target="_blank" class="credit-detail">
-                              {{lang.index_text34}}
-                            </a>
-                          </div>
-                          <div class="credit-money">
-                            <div class="credit-num">
-                              <span class="s-24">{{commonData.currency_prefix}}</span>{{coinData.leave_amount}}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <template v-if="isShowCredit && creditData.status">
-                        <div class="money-order">
-                          <div class="money-order-item">
-                            <span
-                              class="money-order-title">{{lang.finance_text42}}({{commonData.currency_suffix}})</span>
-                            <span class="money-order-value"><span
-                                class="s-12">{{commonData.currency_prefix}}</span>{{creditData.account?.status === 'Repaid' ? '0.00' : creditData.account?.amount}}</span>
-                          </div>
-                          <div class="money-order-divider"></div>
-                          <div class="money-order-item">
-                            <div class="money-order-title">
-                              {{lang.finance_text38}}
-                              <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="money-order-value">
-                              <span class="s-12">{{commonData.currency_prefix}}</span>{{creditData.remaining_amount}}
-                            </div>
-                          </div>
-                        </div>
-                      </template>
-
-                    </div>
-                    <div class="order-box">
-                      <div class="order-item order-box-1" @click="goProductList('using')">
-                        <div class="order-type-icon"><i class="ph ph-pulse"></i></div>
-                        <h3 class="order-title">{{lang.index_text6}}</h3>
-                        <div class="order-nums">{{account.host_active_num}}</div>
-                      </div>
-                      <div class="order-item order-box-2" @click="goProductList()">
-                        <div class="order-type-icon"><i class="ph ph-cube"></i></div>
-                        <h3 class="order-title">{{lang.index_text7}}</h3>
-                        <div class="order-nums">{{account.host_num}}</div>
-                      </div>
-                      <div class="order-item order-box-3" @click="goOrderList('Unpaid')">
-                        <div class="order-type-icon"><i class="ph ph-receipt"></i></div>
-                        <h3 class="order-title">{{lang.index_text8}}</h3>
-                        <div class="order-nums">{{account.unpaid_order}}</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>
-                <div class="statistics-bottom">
-                  <div class="statistics-item">
-                    <div class="statistics-item-name">
-                      <span>{{lang.index_text4}}({{commonData.currency_suffix}})</span>
-                      <span
-                        :class="Number(account.this_month_consume_percent) >= 0 ? 'green-text' : 'red-text'"><span></span>{{Number(account.this_month_consume_percent)}}%</span>
-                    </div>
-                    <div class="statistics-item-value">
-                      <span class="s-12">{{commonData.currency_prefix}}</span>{{account.this_month_consume}}
-                    </div>
-                  </div>
-
-                  <div class="statistics-item-divider"></div>
-
-                  <div class="statistics-item">
-                    <div class="statistics-item-name">
-                      <span>{{lang.index_text5}}({{commonData.currency_suffix}})</span>
-                    </div>
-                    <div class="statistics-item-value">
-                      <span class="s-12">{{commonData.currency_prefix}}</span>{{account.consume}}
-                    </div>
-                  </div>
-
-                </div>
-                <div class="product-list-box">
-                  <h3 class="title-text">{{lang.index_text9}}</h3>
-                  <el-table :data="productList" style="width: 100%" v-if="productList.length !== 0"
-                    v-loading="productListLoading">
-                    <el-table-column prop="product_name" :label="lang.index_text10">
-                      <template slot-scope="{row}">
-                        <a :href="`/productdetail.htm?id=${row.id}`" class="product-name"
-                          target="_blank">{{row.product_name}}</a>
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="name" :label="lang.index_text12">
-                      <template slot-scope="{row}">
-                        <span>{{row.name}}</span>
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="due_time" :label="lang.index_text13">
-                      <template slot-scope="{row}">
-                        <span :class="row.isOverdue ? 'red-time' : ''">{{row.due_time | formateTime}}</span>
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="client_notes" :label="lang.invoice_text139" show-overflow-tooltip>
-                      <template slot-scope="{row}">
-                        <span>{{row.client_notes || '--'}}</span>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-                  <div v-if="productList.length === 0 && !productListLoading" class="no-product">
-                    <h2>{{lang.index_text14}}</h2>
-                    <p>{{lang.index_text15}}</p>
-                    <el-button @click="goGoodsList" type="primary">{{lang.index_text16}}</el-button>
+                  <div class="contact-item">
+                    <i class="ph ph-phone"></i>
+                    <span>{{account.phone ? account.phone : '--'}}</span>
                   </div>
                 </div>
               </div>
-              <div class="right-box">
-                <!-- 推介计划开始 -->
 
-                <div class="recommend-box-open" v-if="showRight && isOpen" v-plugin="'IdcsmartRecommend'">
-                  <div class="recommend-top">
-                    <div class="left">
-                      <div class="row1">
-                        <div class="title-text">{{lang.referral_title1}}</div>
-                        <span class="reword" @click="toReferral"><i class="ph-fill ph-gift"></i>{{lang.referral_text14}}</span>
-                      </div>
-                      <div class="row2">{{lang.referral_title6}}</div>
-                      <div class="row3">{{lang.referral_text15}}</div>
-                      <div class="row4">{{lang.referral_text16}}</div>
-                    </div>
-                    <div class="right recommend-illustration"><i class="ph ph-credit-card"></i></div>
+              <!-- 统计卡片组 -->
+              <div class="stats-group">
+                <div class="card card-stat 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()">
+                  <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')">
+                  <i class="ph ph-receipt"></i>
+                  <div class="stat-value">{{account.unpaid_order}}</div>
+                  <div class="stat-label">{{lang.index_text8}}</div>
+                </div>
+              </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>
+                  <span class="balance-btn" @click="showCz" v-if="commonData.recharge_open == 1">{{lang.index_text2}}</span>
+                </div>
+                <div class="balance-amount">
+                  <span class="currency">{{commonData.currency_prefix}}</span>{{account.credit}}
+                </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="url">
+                  <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="credit-section" v-if="isShowCredit && creditData.status">
+                  <div class="credit-row">
+                    <span class="credit-label">{{lang.finance_text42}}({{commonData.currency_suffix}})</span>
+                    <span class="credit-val">{{commonData.currency_prefix}}{{creditData.account?.status === 'Repaid' ? '0.00' : creditData.account?.amount}}</span>
+                  </div>
+                  <div class="credit-row">
+                    <span class="credit-label">
+                      {{lang.finance_text38}}
+                      <span class="credit-tag" v-if="creditData.status === 'Expired'">{{lang.finance_text93}}</span>
+                      <span class="credit-tag" v-if="creditData.status === 'Overdue'">{{lang.finance_text94}}</span>
+                      <span class="credit-tag" v-if="creditData.status === 'Active'">{{lang.finance_text95}}</span>
+                      <span class="credit-tag" v-if="creditData.status === 'Suspended'">{{lang.finance_text96}}</span>
+                    </span>
+                    <span class="credit-val">{{commonData.currency_prefix}}{{creditData.remaining_amount}}</span>
+                  </div>
+                </div>
+                <!-- 代币 -->
+                <div class="coin-section" v-plugin="'Coin'" v-if="coinData.name">
+                  <div class="coin-header">
+                    <span>{{coinData.name}}</span>
+                    <a href="/finance.htm?tab=7" target="_blank" class="coin-link">{{lang.index_text34}}</a>
+                  </div>
+                  <div class="coin-amount">{{commonData.currency_prefix}}{{coinData.leave_amount}}</div>
+                </div>
+                <div class="voucher-row" v-if="voucherList.length > 0">
+                  {{lang.index_text24}}
+                  <a href="/finance.htm?tab=4" target="_blank" class="voucher-link">{{lang.index_text25}}</a>
+                </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">
+                    <span>{{lang.referral_title1}}</span>
+                    <span class="referral-reward" @click="toReferral"><i class="ph-fill ph-gift"></i> {{lang.referral_text14}}</span>
+                  </div>
+                  <div class="referral-url">
                     <div class="url-text" :title="promoterData.url">{{promoterData.url}}</div>
-                    <div class="copy-btn" @click="copyUrl(promoterData.url)">{{lang.referral_btn2}}</div>
+                    <div class="url-copy" @click="copyUrl(promoterData.url)">{{lang.referral_btn2}}</div>
                   </div>
-                  <div class="top-statistic">
-                    <div class="top-item">
-                      <div class="top-money">{{commonData.currency_prefix}}{{promoterData.withdrawable_amount}}</div>
-                      <div class="top-text">{{lang.referral_title2}}</div>
+                  <div class="referral-stats">
+                    <div class="ref-stat">
+                      <div class="ref-amount">{{commonData.currency_prefix}}{{promoterData.withdrawable_amount}}</div>
+                      <div class="ref-label">{{lang.referral_title2}}</div>
                     </div>
-                    <div class="top-item">
-                      <div class="top-money">{{commonData.currency_prefix}}{{promoterData.pending_amount}}
-                      </div>
-                      <div class="top-text">{{lang.referral_title4}}</div>
+                    <div class="ref-stat">
+                      <div class="ref-amount">{{commonData.currency_prefix}}{{promoterData.pending_amount}}</div>
+                      <div class="ref-label">{{lang.referral_title4}}</div>
                     </div>
                   </div>
                 </div>
-                <div class="recommend-box" v-if="!showRight || !isOpen">
-                  <div class="recommend-placeholder-icon"><i class="ph ph-megaphone"></i></div>
+                <!-- 推介计划（未开启） -->
+                <div class="referral-closed" v-if="!showRight || !isOpen">
+                  <i class="ph ph-megaphone"></i>
                   <div v-if="showRight">
-                    <h2>{{lang.index_text17}}</h2>
+                    <h3>{{lang.index_text17}}</h3>
                     <p>{{lang.index_text18}}</p>
-                    <div class="no-recommend" @click="openVisible = true">{{lang.index_text28}}</div>
+                    <div class="referral-open-btn" @click="openVisible = true">{{lang.index_text28}}</div>
                   </div>
-                  <div v-else class="recommend-text">{{lang.index_text21}}</div>
+                  <div v-else class="referral-disabled">{{lang.index_text21}}</div>
                 </div>
-                <!-- 推介计划结束 -->
+              </div>
+            </div>
 
-                <div class="WorkOrder-box" v-if="ticketList.length !==0 " v-plugin="'IdcsmartTicket'">
-                  <div class="title-text WorkOrder-title">
-                    <div>{{lang.index_text22}}</div>
-                    <div class="more" @click="goWorkPage">···</div>
+            <!-- ====== Row 3: 产品列表 + 工单/公告 ====== -->
+            <div class="row-3">
+              <div class="card card-products">
+                <h3 class="section-title">{{lang.index_text9}}</h3>
+                <el-table :data="productList" style="width: 100%" v-if="productList.length !== 0"
+                  v-loading="productListLoading">
+                  <el-table-column prop="product_name" :label="lang.index_text10">
+                    <template slot-scope="{row}">
+                      <a :href="`/productdetail.htm?id=${row.id}`" class="product-link" target="_blank">{{row.product_name}}</a>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="name" :label="lang.index_text12"></el-table-column>
+                  <el-table-column prop="due_time" :label="lang.index_text13">
+                    <template slot-scope="{row}">
+                      <span :class="row.isOverdue ? 'text-danger' : ''">{{row.due_time | formateTime}}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="client_notes" :label="lang.invoice_text139" show-overflow-tooltip>
+                    <template slot-scope="{row}">
+                      <span>{{row.client_notes || '--'}}</span>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div v-if="productList.length === 0 && !productListLoading" class="empty-state">
+                  <i class="ph ph-package"></i>
+                  <h3>{{lang.index_text14}}</h3>
+                  <p>{{lang.index_text15}}</p>
+                  <el-button @click="goGoodsList" type="primary" round>{{lang.index_text16}}</el-button>
+                </div>
+              </div>
+
+              <!-- 工单 + 公告侧栏 -->
+              <div class="card card-sidebar" v-if="ticketList.length !== 0 || homeNewList.length !== 0">
+                <!-- 工单 -->
+                <div class="sidebar-section" v-if="ticketList.length !== 0" v-plugin="'IdcsmartTicket'">
+                  <div class="sidebar-header">
+                    <span>{{lang.index_text22}}</span>
+                    <span class="sidebar-more" @click="goWorkPage">···</span>
                   </div>
-                  <div class="WorkOrder-content">
-                    <div class="WorkOrder-item" v-for="item in ticketList" :key="item.id"
-                      @click="goTickDetail(item.id)">
-                      <div class="replay-div" :style="{'background':`${item.color}`}">{{item.status}}</div>
-                      <div class="replay-box">
-                        <div class="replay-title">#{{item.ticket_num}} - {{item.title}}</div>
-                        <div class="replay-name">{{item.name}}</div>
+                  <div class="ticket-list">
+                    <div class="ticket-item" v-for="item in ticketList" :key="item.id" @click="goTickDetail(item.id)">
+                      <span class="ticket-status" :style="{'background': item.color}">{{item.status}}</span>
+                      <div class="ticket-info">
+                        <div class="ticket-title">#{{item.ticket_num}} - {{item.title}}</div>
+                        <div class="ticket-dept">{{item.name}}</div>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div class="notice-box" v-if="homeNewList.length !==0" v-plugin="'IdcsmartNews'">
-                  <div class="title-text WorkOrder-title">
-                    <div>{{lang.index_text23}}</div>
-                    <div class="more" @click="goNoticePage">···</div>
+                <!-- 公告 -->
+                <div class="sidebar-section" v-if="homeNewList.length !== 0" v-plugin="'IdcsmartNews'">
+                  <div class="sidebar-header">
+                    <span>{{lang.index_text23}}</span>
+                    <span class="sidebar-more" @click="goNoticePage">···</span>
                   </div>
-                  <div class="WorkOrder-content">
-                    <div v-for="item in homeNewList" :key="item.id" class="notice-item"
-                      @click="goNoticeDetail(item.id)">
-                      <div class="notice-item-left">
-                        <h3 class="notice-time">{{item.create_time | formareDay}}</h3>
-                        <h4 class="notice-title">{{item.title}}</h4>
-                        <h5 class="notice-type">{{item.type}}</h5>
+                  <div class="notice-list">
+                    <div class="notice-item" v-for="item in homeNewList" :key="item.id" @click="goNoticeDetail(item.id)">
+                      <div class="notice-info">
+                        <div class="notice-title">{{item.title}}</div>
+                        <div class="notice-meta">{{item.type}} · {{item.create_time | formareDay}}</div>
                       </div>
-                      <div class="notice-item-right"><i class="el-icon-arrow-right"></i></div>
+                      <i class="el-icon-arrow-right"></i>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
+
           </div>
           <!-- 确认开启弹窗 -->
           <el-dialog :title="lang.referral_title8" :visible.sync="openVisible" width="4.8rem"