feat(web): 页头滚动信息、移除返回按钮、面包屑左侧可点、侧栏加首页
- 页头中间信息改为无缝滚动 ticker(3 份拼接,24s 线性,尊重 reduced-motion) - 去掉分区 / 条目 / 文章三处「返回」「返回首页」按钮 - 面包屑移到左侧,中间项可点击并通过 onNavigate 走 SPA 路由 - 侧栏新增「首页」,首页时高亮,点击回首页
This commit is contained in:
+56
-12
@@ -69,9 +69,60 @@
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
/* ---------- 页头滚动信息 ---------- */
|
||||
|
||||
.header-ticker {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 0,
|
||||
#000 32px,
|
||||
#000 calc(100% - 32px),
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.header-ticker-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
animation: header-ticker 24s linear infinite;
|
||||
}
|
||||
|
||||
/* 每组占满整条轨道宽度:任何时候只看到一份信息,滚动时下一份从右侧进入 */
|
||||
.header-ticker-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
gap: var(--su-space-8);
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.header-ticker-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--su-space-2);
|
||||
font-size: var(--su-font-size-sm);
|
||||
line-height: var(--su-line-height-sm);
|
||||
color: var(--su-text-sub);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes header-ticker {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(calc(-100% / 3));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.header-ticker-track {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
@@ -335,19 +386,12 @@
|
||||
.detail-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px var(--su-space-5);
|
||||
}
|
||||
|
||||
.detail-back {
|
||||
color: var(--su-color-primary);
|
||||
font-size: var(--su-font-size-md);
|
||||
font-weight: var(--su-font-weight-bold);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detail-back:hover {
|
||||
text-decoration: underline;
|
||||
/* 面包屑在左侧,12px(与旧版 breadcrumb 一致) */
|
||||
.detail-breadcrumb {
|
||||
font-size: var(--su-font-size-xs);
|
||||
}
|
||||
|
||||
.detail-nav > * {
|
||||
|
||||
Reference in New Issue
Block a user