fix: 统计卡合并为单容器 + Row3公告与产品等高
All checks were successful
continuous-integration/drone/push Build is passing
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:
@@ -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 i { font-size: 15px; color: var(--text-tertiary); }
|
||||
|
||||
/* 统计卡片组:占 40% */
|
||||
/* 统计卡片组:单卡片容器,占 40% */
|
||||
.stats-group {
|
||||
flex: 2 !important;
|
||||
min-width: 0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
gap: 12px !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
/* 每个统计卡 — 无彩色横条,用圆形图标背景区分 */
|
||||
.card-stat {
|
||||
/* 每个统计子项 */
|
||||
.stat-item {
|
||||
flex: 1 !important;
|
||||
min-width: 0 !important;
|
||||
padding: 16px !important;
|
||||
@@ -99,14 +100,15 @@
|
||||
gap: 8px !important;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border-top: none !important;
|
||||
transition: box-shadow var(--ease);
|
||||
transition: background var(--ease);
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.card-stat:hover { box-shadow: var(--shadow-md) !important; }
|
||||
.card-stat:active { transform: scale(0.97); }
|
||||
.stat-item + .stat-item { border-left: 1px solid var(--border-light); }
|
||||
.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%;
|
||||
display: flex !important; align-items: center !important; justify-content: center !important;
|
||||
font-size: 18px;
|
||||
@@ -117,7 +119,7 @@
|
||||
}
|
||||
.stat-label { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
|
||||
|
||||
/* 统计卡颜色 — 图标圆形背景 */
|
||||
/* 统计颜色 */
|
||||
.stat-purple i { background: #F3F0FF; color: #7C3AED; }
|
||||
.stat-blue i { background: #EFF6FF; color: #2563EB; }
|
||||
.stat-amber i { background: #FFF7ED; color: #D97706; }
|
||||
@@ -229,7 +231,7 @@
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
gap: 16px !important;
|
||||
align-items: flex-start !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
/* 产品卡 65% */
|
||||
|
||||
@@ -48,19 +48,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片组 -->
|
||||
<div class="stats-group">
|
||||
<div class="card card-stat stat-purple" @click="goProductList('using')">
|
||||
<!-- 统计卡片组(单个卡片容器) -->
|
||||
<div class="card stats-group">
|
||||
<div class="stat-item 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()">
|
||||
<div class="stat-item 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')">
|
||||
<div class="stat-item 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>
|
||||
|
||||
Reference in New Issue
Block a user