fix: 统计卡合并为单容器 + Row3公告与产品等高
All checks were successful
continuous-integration/drone/push Build is passing

- stats-group改为单卡片容器(去掉子card的独立边框)
- stat-item之间用border-left分隔
- Row3 align-items:stretch让公告与产品列表等高
This commit is contained in:
yiqiu
2026-03-20 22:17:59 +08:00
parent 9e9aea67c5
commit 4aecc48c47
2 changed files with 19 additions and 17 deletions

View File

@@ -78,17 +78,18 @@
.contact-item { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px; color: var(--text-secondary); } .contact-item { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px; color: var(--text-secondary); }
.contact-item i { font-size: 15px; color: var(--text-tertiary); } .contact-item i { font-size: 15px; color: var(--text-tertiary); }
/* 统计卡片组:占 40% */ /* 统计卡片组:单卡片容器,占 40% */
.stats-group { .stats-group {
flex: 2 !important; flex: 2 !important;
min-width: 0 !important; min-width: 0 !important;
display: flex !important; display: flex !important;
flex-direction: row !important; flex-direction: row !important;
flex-wrap: nowrap !important; flex-wrap: nowrap !important;
gap: 12px !important; padding: 0 !important;
overflow: hidden !important;
} }
/* 每个统计卡 — 无彩色横条,用圆形图标背景区分 */ /* 每个统计子项 */
.card-stat { .stat-item {
flex: 1 !important; flex: 1 !important;
min-width: 0 !important; min-width: 0 !important;
padding: 16px !important; padding: 16px !important;
@@ -99,14 +100,15 @@
gap: 8px !important; gap: 8px !important;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
border-top: none !important; transition: background var(--ease);
transition: box-shadow var(--ease); box-sizing: border-box !important;
} }
.card-stat:hover { box-shadow: var(--shadow-md) !important; } .stat-item + .stat-item { border-left: 1px solid var(--border-light); }
.card-stat:active { transform: scale(0.97); } .stat-item:hover { background: var(--surface-hover); }
.stat-item:active { transform: scale(0.97); }
/* 图标用圆形背景 */ /* 圆形图标背景 */
.card-stat i { .stat-item i {
width: 36px; height: 36px; border-radius: 50%; width: 36px; height: 36px; border-radius: 50%;
display: flex !important; align-items: center !important; justify-content: center !important; display: flex !important; align-items: center !important; justify-content: center !important;
font-size: 18px; font-size: 18px;
@@ -117,7 +119,7 @@
} }
.stat-label { font-size: 11px; color: var(--text-tertiary); font-weight: 500; } .stat-label { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
/* 统计颜色 — 图标圆形背景 */ /* 统计颜色 */
.stat-purple i { background: #F3F0FF; color: #7C3AED; } .stat-purple i { background: #F3F0FF; color: #7C3AED; }
.stat-blue i { background: #EFF6FF; color: #2563EB; } .stat-blue i { background: #EFF6FF; color: #2563EB; }
.stat-amber i { background: #FFF7ED; color: #D97706; } .stat-amber i { background: #FFF7ED; color: #D97706; }
@@ -229,7 +231,7 @@
flex-direction: row !important; flex-direction: row !important;
flex-wrap: nowrap !important; flex-wrap: nowrap !important;
gap: 16px !important; gap: 16px !important;
align-items: flex-start !important; align-items: stretch !important;
} }
/* 产品卡 65% */ /* 产品卡 65% */

View File

@@ -48,19 +48,19 @@
</div> </div>
</div> </div>
<!-- 统计卡片组 --> <!-- 统计卡片组(单个卡片容器) -->
<div class="stats-group"> <div class="card stats-group">
<div class="card card-stat stat-purple" @click="goProductList('using')"> <div class="stat-item stat-purple" @click="goProductList('using')">
<i class="ph ph-pulse"></i> <i class="ph ph-pulse"></i>
<div class="stat-value">{{account.host_active_num}}</div> <div class="stat-value">{{account.host_active_num}}</div>
<div class="stat-label">{{lang.index_text6}}</div> <div class="stat-label">{{lang.index_text6}}</div>
</div> </div>
<div class="card card-stat stat-blue" @click="goProductList()"> <div class="stat-item stat-blue" @click="goProductList()">
<i class="ph ph-cube"></i> <i class="ph ph-cube"></i>
<div class="stat-value">{{account.host_num}}</div> <div class="stat-value">{{account.host_num}}</div>
<div class="stat-label">{{lang.index_text7}}</div> <div class="stat-label">{{lang.index_text7}}</div>
</div> </div>
<div class="card card-stat stat-amber" @click="goOrderList('Unpaid')"> <div class="stat-item stat-amber" @click="goOrderList('Unpaid')">
<i class="ph ph-receipt"></i> <i class="ph ph-receipt"></i>
<div class="stat-value">{{account.unpaid_order}}</div> <div class="stat-value">{{account.unpaid_order}}</div>
<div class="stat-label">{{lang.index_text8}}</div> <div class="stat-label">{{lang.index_text8}}</div>