refactor: 首页去掉用户信息/认证+金额区三卡片化
All checks were successful
continuous-integration/drone/push Build is passing

- 移除card-user用户信息卡片
- 移除cert-section认证企业/姓名区块
- row-1改为单列stats-group占满全宽
- 新增row-finance三列grid:余额/本月消费/总消费各一张finance-card
- 渐变图标+大字号数值+趋势标签
This commit is contained in:
yiqiu
2026-03-22 14:59:37 +08:00
parent c84adf6823
commit f6e1e018cb
2 changed files with 90 additions and 76 deletions

View File

@@ -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;

View File

@@ -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">