diff --git a/assets/style.css b/assets/style.css index d34f227..8959e5a 100644 --- a/assets/style.css +++ b/assets/style.css @@ -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; diff --git a/index.php b/index.php index 24dec6d..cd15cab 100644 --- a/index.php +++ b/index.php @@ -106,30 +106,23 @@ $headTitle = $sw ? fb_software_site_title($sw) fb_layout_head($sw ? fb_software_site_title($sw) : $headTitle, ['software' => $sw]); ?> +
+