fix(user-center): 1:1 port reference sidebar statistics row and icon box line-height
- Rewrite sidebar stats as a single zib-widget row (user-statistics-item, em14 / em09 opacity5 mt6), drop legacy .uc-stats styles - Restore reference body line-height (1.42857143) on stats and service/settings boxes - Move 我的订单 to the front of 我的服务 to match reference order Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
6ded62df92
commit
c152e00501
5 files changed
+53
-124
No files matched your search
@@ -216,18 +216,6 @@
|
||||
padding: 0 12px 32px;
|
||||
}
|
||||
|
||||
.uc-stats {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.uc-stats__item {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
.uc-stats__value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.uc-content .dashboard-panel {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
@@ -193,44 +193,6 @@ body.aksrt-user-center .uc-content,
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,0.06));
|
||||
}
|
||||
|
||||
/* 数据统计 */
|
||||
.uc-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.uc-stats__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 6px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-2);
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.uc-stats__item:hover {
|
||||
background: var(--color-primary-soft);
|
||||
transform: none;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.uc-stats__value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
line-height: 1.2;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.uc-stats__label {
|
||||
font-size: 11px;
|
||||
color: var(--color-ink-4);
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* 侧栏按钮组 */
|
||||
.uc-sidebar__buttons {
|
||||
display: flex;
|
||||
@@ -427,72 +389,41 @@ body.aksrt-user-center .uc-content,
|
||||
}
|
||||
|
||||
|
||||
/* ==================== 侧栏账户仪表盘 ==================== */
|
||||
.uc-sidebar__section--stats {
|
||||
padding: 8px 10px;
|
||||
/* 文章 / 评论 / 收藏 / 粉丝：1:1 参考主题 zib_user_center_page_sidebar_statistics()。
|
||||
参考主题没有给 .user-statistics-item 写专门样式，外观全部来自 zib-widget padding-10
|
||||
与 em14 / em09 opacity5 mt6；链接只继承正文色，无 hover 变色。 */
|
||||
.uc-sidebar-statistics.zib-widget {
|
||||
clear: both;
|
||||
line-height: 1.42857143;
|
||||
background-color: var(--main-bg-color);
|
||||
box-shadow: 0 0 10px var(--main-shadow);
|
||||
border-radius: var(--main-radius);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.uc-sidebar__heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
color: var(--color-ink, #172033);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
/* 侧栏 gap:12px 与 mb20 叠加会翻倍，扣掉 gap 后与参考间距一致。 */
|
||||
.uc-sidebar > .uc-sidebar-statistics.mb20 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.uc-sidebar__heading > a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: var(--color-ink-4);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
.uc-sidebar-statistics > .user-statistics-item,
|
||||
.uc-sidebar-statistics > .user-statistics-item:hover,
|
||||
.uc-sidebar-statistics > .user-statistics-item:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.uc-sidebar__heading > a:hover {
|
||||
color: var(--color-primary);
|
||||
@media (max-width: 767px) {
|
||||
.uc-sidebar > .uc-sidebar-statistics.mb20 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.uc-stats {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.uc-stats__item {
|
||||
position: relative;
|
||||
gap: 2px;
|
||||
padding: 8px 2px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.uc-stats__item + .uc-stats__item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
background: var(--color-line-soft, rgba(15, 23, 42, 0.07));
|
||||
}
|
||||
|
||||
.uc-stats__item:hover {
|
||||
background: var(--surface-2);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.uc-stats__value {
|
||||
color: var(--color-ink, #172033);
|
||||
font-size: 17px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.uc-stats__label {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
@media (max-width: 991.98px) {
|
||||
.uc-sidebar > .uc-sidebar-statistics {
|
||||
margin-right: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* VIP 入口：1:1 参考主题 zib_user_center_page_sidebar_vip()，外观全部来自
|
||||
@@ -607,9 +538,12 @@ body.aksrt-user-center .uc-content,
|
||||
|
||||
/* 我的服务 / 功能设置：1:1 参考主题 zib_user_center_page_sidebar_button_1/2()。
|
||||
外壳为 zib-widget padding-6，标题为普通字重的 padding-6 ml3；
|
||||
网格项只继承正文色，参考主题没有 hover / 选中变色。 */
|
||||
网格项只继承正文色，参考主题没有 hover / 选中变色。
|
||||
参考主题正文行高是 bootstrap 的 1.42857143，本站 body 为 1.6，
|
||||
标题、图标、文字三行会各自被撑高，这里恢复参考行高。 */
|
||||
.uc-sidebar-iconbox.zib-widget {
|
||||
clear: both;
|
||||
line-height: 1.42857143;
|
||||
background-color: var(--main-bg-color);
|
||||
box-shadow: 0 0 10px var(--main-shadow);
|
||||
border-radius: var(--main-radius);
|
||||
|
||||
@@ -19,26 +19,26 @@ $orders_url = $orders_available ? (string) ($orders_url ?? '') : '';
|
||||
$tickets_available = isset($dashboard_tabs['tickets']);
|
||||
$tickets_url = $tickets_available ? aksrt_get_user_center_tab_url('tickets') : '';
|
||||
|
||||
// 参考主题由 zibpay 把「我的订单」前插到按钮组最前，其后才是等级 / 认证。
|
||||
$services = array_values(array_filter([
|
||||
[
|
||||
'label' => __('我的订单', 'aksrt'),
|
||||
'icon' => 'order-color',
|
||||
'url' => $orders_url,
|
||||
'tab' => 'orders',
|
||||
],
|
||||
[
|
||||
'label' => __('我的等级', 'aksrt'),
|
||||
'icon' => 'trend-color',
|
||||
'url' => $level_url,
|
||||
'tab' => 'level',
|
||||
],
|
||||
|
||||
[
|
||||
'label' => __('官方认证', 'aksrt'),
|
||||
'icon' => 'user-auth',
|
||||
'url' => $auth_url,
|
||||
'tab' => 'auth',
|
||||
],
|
||||
[
|
||||
'label' => __('我的订单', 'aksrt'),
|
||||
'icon' => 'order-color',
|
||||
'url' => $orders_url,
|
||||
'tab' => 'orders',
|
||||
],
|
||||
[
|
||||
'label' => __('工单中心', 'aksrt'),
|
||||
'icon' => 'manual-service',
|
||||
|
||||
@@ -34,13 +34,9 @@ $stats = [
|
||||
],
|
||||
];
|
||||
?>
|
||||
<div class="uc-sidebar__section uc-sidebar__section--stats" aria-label="<?php esc_attr_e('账号统计', 'aksrt'); ?>">
|
||||
<div class="uc-stats">
|
||||
<?php foreach ($stats as $stat) : ?>
|
||||
<a class="uc-stats__item" href="<?php echo esc_url((string) $stat['url']); ?>"<?php if (!empty($stat['tab'])) : ?> data-tab="<?php echo esc_attr((string) $stat['tab']); ?>"<?php endif; ?>>
|
||||
<span class="uc-stats__value"><?php echo esc_html(number_format_i18n((int) $stat['value'])); ?></span>
|
||||
<span class="uc-stats__label"><?php echo esc_html((string) $stat['label']); ?></span>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php // 1:1 参考主题 zib_user_center_page_sidebar_statistics()：单张 zib-widget，四项 space-around 平铺。 ?>
|
||||
<div class="uc-sidebar-statistics mb10-sm mb20 flex ac jsa zib-widget padding-10 text-center" aria-label="<?php esc_attr_e('账号统计', 'aksrt'); ?>">
|
||||
<?php foreach ($stats as $stat) : ?>
|
||||
<a class="user-statistics-item" href="<?php echo esc_url((string) $stat['url']); ?>"<?php if (!empty($stat['tab'])) : ?> data-tab="<?php echo esc_attr((string) $stat['tab']); ?>"<?php endif; ?>><div class="em14"><?php echo esc_html(aksrt_cut_count((int) $stat['value'])); ?></div><div class="em09 opacity5 mt6"><?php echo esc_html((string) $stat['label']); ?></div></a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
@@ -131,6 +131,17 @@ test('旧 uc-service-grid 外壳与色调底色已彻底移除', () => {
|
||||
assert.doesNotMatch(shell, /uc-center-card/);
|
||||
assert.doesNotMatch(shell, /uc-sidebar-vip__/);
|
||||
assert.match(shell, /\.uc-sidebar-centers > \.zib-widget/);
|
||||
|
||||
// 文章/评论/收藏/粉丝统计 1:1 参考主题 zib_user_center_page_sidebar_statistics()。
|
||||
const stats = read(sidebarDir + 'sidebar-stats.php');
|
||||
assert.match(stats, /mb10-sm mb20 flex ac jsa zib-widget padding-10 text-center/);
|
||||
assert.match(stats, /<a class="user-statistics-item"/);
|
||||
assert.match(stats, /<div class="em14"><\?php echo esc_html\(aksrt_cut_count\(/);
|
||||
assert.match(stats, /<div class="em09 opacity5 mt6">/);
|
||||
assert.doesNotMatch(stats, /uc-stats|uc-sidebar__section/);
|
||||
assert.doesNotMatch(shell, /\.uc-stats/);
|
||||
assert.doesNotMatch(read('assets/css/routes/user-center/responsive.css'), /\.uc-stats/);
|
||||
assert.match(shell, /\.uc-sidebar-statistics\.zib-widget \{/);
|
||||
});
|
||||
|
||||
test('所用 sprite key 均在前端 sprite 中定义', () => {
|
||||
|
||||
Reference in new issue
Block a user