refactor: 首页去掉用户信息卡片+金额区重设计
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- 注释掉info-box（用户名/邮箱/认证已在账户页） - 用三张finance-card替换statistics-box+圆形图表 - 余额卡片含充值按钮，本月消费含同比变化标签 - 信用额度保留为独立卡片 - 移除多余的div闭合标签
This commit is contained in:
yiqiu
@@ -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;
|
||||
|
||||
@@ -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="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-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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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="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>
|
||||
</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">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<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="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 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 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="money-num">{{commonData.currency_prefix}}{{account.consume}}</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="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>
|
||||
@@ -194,7 +113,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-list-box">
|
||||
<h3 class="title-text">{{lang.index_text9}}</h3>
|
||||
<div class="goods-box" v-loading="productListLoading">
|
||||
|
||||
Reference in New Issue
Block a user