laoyang/FeedLite
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

顶栏图标改为与「标题+简介」整体垂直居中

Browse Source 
用户：「图标应该在标题和它的简介的正中间…现在图标和上面的标题是对齐的，
      把图标往下放一放，让标题和它下面的简介合起来和图标高度一样，
      两个对齐上下。」

根因是结构问题，不是调 padding 能解决的：
以前图标和标题被 fb_software_badge() 包在同一个 .sw-badge 里（单行结构），
note 挂在它外面下面一层 ⇒ 图标天然只能对齐第一行文字，永远做不到两行居中。

改结构为「左图标 + 右文字列」两栏：
  <a class="brand-mini">
    <span class="brand-ic">图标</span>        ← flex:none 30×30
    <span class="brand-txt">                  ← flex column
      <span class="brand-title">标题</span>
      <span class="brand-mini-note">简介</span>
    </span>
  </a>
外层 .brand-mini 用 align-items:center ⇒ 图标中线对齐文字列中线。

图标不再走 fb_software_badge()，改用 fb_software_icon() / icon_key 自己拼，
因为 badge 那个函数是把图标和名字绑死在一行的。

实测中线偏差：
  桌面 1280：图标 18→48（中线 33.0），文字列 13.8→52.2（中线 33.0）→ 偏差 0.0px
  手机 390：图标 17→43（中线 30.0），文字列 12.3→47.7（中线 30.0）→ 偏差 0.0px
首页（无软件时）仍是原来的 logo-mark + brand-text，未受影响；6 个路由全 200。
This commit is contained in:
laoyang
2026-11-03 15:21:41 +08:00
parent 0ebf250c76
commit 82f4fa3c49
3 changed files with 65 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.css
+40 -11
View File
@@ -34,20 +34,44 @@ p{margin:8px 0}
/* 软件抽屉是 absolute + top:100%，需要它来做定位参照，否则会跑到页面最上面 */
}
.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}
/* 顶栏品牌位：**左图标 + 右文字列**两栏
*
* [📅] 同步日历反馈系统 ← 文字列
* 优秀的鸿蒙CalDav同步客户端
*
* 🔴 用户 2026-11-03：「图标应该在标题和简介的正中间…
* 让标题和它下面的简介合起来和图标高度一样，两个对齐上下。」
* ⇒ 图标的垂直中线要与**两行文字整体**的中线重合，不是只对齐第一行。
*
* ⚠️ 关键在 align-items:center 作用在「图标 vs 文字列」这一层：
* 图标是 .brand-ic，文字列是 .brand-txt（内部再上下排 title/note）。
* 以前图标和标题被包在同一个 .sw-badge 里（单行结构），
* note 挂在它下面，图标天然只能对齐第一行 —— 那种结构做不到居中。
*/
.topbar .brand-mini{display:flex; flex-direction:row; align-items:center; gap:10px; 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}
/* 图标：固定 30×30 的方框，自身内容居中，不参与文字行高计算 */
.topbar .brand-ic{
width:30px; height:30px; flex:none;
display:flex; align-items:center; justify-content:center;
border-radius:9px; overflow:hidden;
}
.topbar .brand-ic img{width:30px; height:30px; object-fit:contain; display:block; border-radius:9px}
.topbar .brand-ic-ch{
font-size:17px; line-height:1; color:var(--swc, var(--brand)); font-weight:700;
}
/* 文字列：上下两行，自己成一组 */
.topbar .brand-txt{display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0}
.topbar .brand-title{
font-size:17px; font-weight:700; letter-spacing:.2px; line-height:1.25;
color:var(--swc, var(--brand));
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar .brand-mini-note{
font-size:12.5px; font-weight:400; color:var(--muted);
line-height:1.35; max-width:520px;
line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
/* 与标题文字左对齐：让简介从图标右侧开始，而不是贴到图标左侧 */
padding-left:41px;
max-width:520px;
}
/* 顶栏里的软件标识：17px 字 + 32px 图标 ——
* 比「选择软件」标签(13.5px)大两号，又不至于压过内容区标题。 */
@@ -55,10 +79,15 @@ p{margin:8px 0}
.topbar .brand-mini .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px}
@media (max-width:560px){
.topbar .wrap{min-height:60px; padding-top:8px; padding-bottom:8px}
.topbar .brand-mini{font-size:15.5px; gap:8px}
.topbar .brand-ic{width:26px; height:26px}
.topbar .brand-ic img{width:26px; height:26px}
.topbar .brand-ic-ch{font-size:15px}
.topbar .brand-title{font-size:15.5px}
.topbar .brand-mini-note{font-size:11.5px; max-width:60vw}
.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}
}
/* ---------- 右上角三横线按钮 + 下拉菜单 ---------- */