去掉内容区与顶栏重复的标题行和我要反馈按钮;简介移到顶栏标题下灰色小字
用户:上面已有标题和「我要反馈」,下面又出现一次,完全重复。
「下面这一行不要了…把那个软件简介放在最上面『同步日历反馈系统』下面那个位置,
用个灰色的。我要反馈按钮也不要了,其他内容开始往前提,更简洁。」
改法:
- index.php 删掉整个 page-head 行(软件图标+名字 / 简介 / 我要反馈大按钮)
→ 列表内容直接从筛选器开始,上提一整行(实测内容起始 y=109)
- 顶栏品牌位改成两行:
行1 图标 + 「XX 反馈系统」(软件主题色 17px)
行2 一句话简介(software.note,灰色 #6b7280,12.5px,移动端 11.5px)
- 简介左对齐到标题文字(padding-left 41px = 图标 32 + gap 9),不是贴图标左边
- 顶栏高度从固定 66px 改为 min-height + padding,两行也放得下(实测 67px)
⚠️ 「我要反馈」按钮去掉了 hide-sm:
列表页那个大按钮删掉后,顶栏这个是全站唯一入口,
如果手机上隐藏掉,手机端就没有提交入口了。
清理 .page-sw-id 死样式。
验证:桌面/手机下简介都在标题下方、颜色灰色、内容区无重复、我要反馈只 1 个且两宽度都可见;
8 个路由全部 200;详情页顶栏同样显示简介。
This commit is contained in:
+19
-4
@@ -33,18 +33,32 @@ p{margin:8px 0}
|
||||
border-bottom:1px solid var(--line);
|
||||
/* 软件抽屉是 absolute + top:100%,需要它来做定位参照,否则会跑到页面最上面 */
|
||||
}
|
||||
.topbar .wrap{display:flex; align-items:center; gap:14px; height:66px; position:relative}
|
||||
.topbar .brand-mini{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--fg); min-width:0}
|
||||
.topbar .wrap{display:flex; align-items:center; gap:14px; min-height:66px; padding-top:9px; padding-bottom:9px; position:relative; box-sizing:border-box}
|
||||
/* 顶栏品牌位:两行结构
|
||||
* 行1 = 图标 + 「XX 反馈系统」(软件主题色,17px)
|
||||
* 行2 = 一句话简介(灰色 12.5px),只在有 note 时出现
|
||||
* 🔴 用户 2026-11-03:简介从内容区挪到这里,用灰色。
|
||||
* 内容区那一行(标题+简介+我要反馈)与新顶栏完全重复,已删除。 */
|
||||
.topbar .brand-mini{display:flex; flex-direction:column; align-items:flex-start; gap:1px; font-weight:700; font-size:17px; color:var(--fg); min-width:0; line-height:1.25}
|
||||
.topbar .brand-mini:hover{text-decoration:none; color:var(--fg)}
|
||||
.topbar .brand-mini-row{display:flex; align-items:center; gap:10px; min-width:0}
|
||||
.topbar .brand-mini-note{
|
||||
font-size:12.5px; font-weight:400; color:var(--muted);
|
||||
line-height:1.35; max-width:520px;
|
||||
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
||||
/* 与标题文字左对齐:让简介从图标右侧开始,而不是贴到图标左侧 */
|
||||
padding-left:41px;
|
||||
}
|
||||
/* 顶栏里的软件标识:17px 字 + 32px 图标 ——
|
||||
* 比「选择软件」标签(13.5px)大两号,又不至于压过内容区标题。 */
|
||||
.topbar .brand-mini .sw-badge{gap:9px}
|
||||
.topbar .brand-mini .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px}
|
||||
@media (max-width:560px){
|
||||
.topbar .wrap{height:60px}
|
||||
.topbar .wrap{min-height:60px; padding-top:8px; padding-bottom:8px}
|
||||
.topbar .brand-mini .sw-badge-nm{font-size:15.5px}
|
||||
.topbar .brand-mini .sw-badge-img{width:26px !important; height:26px !important}
|
||||
.topbar .brand-mini .sw-badge{gap:7px}
|
||||
.topbar .brand-mini-note{font-size:11.5px; padding-left:33px; max-width:60vw}
|
||||
}
|
||||
|
||||
/* ---------- 右上角三横线按钮 + 下拉菜单 ---------- */
|
||||
@@ -281,7 +295,8 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
|
||||
* 让「同步日历」「密码生成器」这些标题一眼可辨。 */
|
||||
.sw-badge-brand .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px; color:var(--swc, var(--fg))}
|
||||
/* 页头副行:图标 + 软件名 */
|
||||
.page-sw-id{margin:0; display:flex; align-items:center}
|
||||
/* (已删).page-sw-id —— 内容区那行软件标识已移除,
|
||||
* 软件名与简介统一由顶栏承担,避免与顶栏标题重复。 */
|
||||
/* 提交页顶部的软件上下文条:同样无背景色,只留一行轻分隔 */
|
||||
.sw-context{
|
||||
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
|
||||
|
||||
Reference in New Issue
Block a user