标题收到最上顶头,标签下移一行;顶栏标题回当前软件;去掉跨软件引导
用户三个问题:
一、软件名/分类/状态三个标签挤在标题前面,把标题推到右边很难看
列表页:item-top 里 badges 在前、标题在后 → 标题被挤到右边
详情页:同一个毛病
改法(两处一致):
行1 标题(顶头、独占一行)
行2 标签(分类/状态;详情页还有软件名)
行3 摘要 / 作者信息
列表页新增 .item-head + .item-tags;详情页新增 .subject-head + .subject-tags。
⚠️ .item-top 保留 —— admin.php 有三处内部列表还在用,删了后台会塌。
二、顶栏「XX 反馈系统」点完跳首页
用户:「点完之后应该还是进入这个反馈系统,而不是进到首页。首页没有太大作用,
只是演示说明用的。正常使用都是每个软件独立,要让用户觉得
这套反馈系统就是专门为这个软件做的。」
改法:brand-mini 的 href 从 "./" 改为 fb_software_list_url()。
三、软件内部不该引导去其他软件
用户:「在一个反馈系统里面,我要反馈、问题列表、左上角那个链接,
全部都是这个软件相关的内容,跟其他软件没关系。」
- 提交成功页删掉整个「也可以去其他软件反馈」区块及其 CSS
- 删掉成功页的「返回首页」按钮(已有「看该软件其他反馈」,重复且无意义)
- 跨软件只剩顶栏三横线菜单一个入口
验证:列表页/详情页 DOM 顺序均为 标题→标签→作者(实测 item-title 58 < item-tags 171;
subject-title 49 < subject-tags 151 < item-meta 592);
浏览器实测标题 top=282 标签 top=315(列表)、155→194(详情),标签确实在下方;
标题左边缘距卡片边 18/23px,就是卡片自身 padding,没有额外缩进;
顶栏标题 href=index.php?sw=synccalendar,不再指向根路径;全站 8 个路由 200。
This commit is contained in:
+92
-3
@@ -449,8 +449,21 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
|
||||
border-radius:13px; padding:15px 17px; box-shadow:var(--shadow); color:inherit;
|
||||
}
|
||||
.item:hover{border-color:var(--brand); text-decoration:none; box-shadow:0 3px 12px rgba(0,87,184,.10)}
|
||||
/* 列表项:
|
||||
* 行1 = 标题(顶头、单独一行)
|
||||
* 行2 = 分类 / 状态 标签
|
||||
* 行3 = 摘要、缩略图、作者信息
|
||||
*
|
||||
* 🔴 用户 2026-11-03:标签别放在标题前面。
|
||||
* 以前 badges 和标题挤在同一个 flex 行里,标签占掉左边一大截,
|
||||
* 标题被推到右边、长度不够就换行,很难看。
|
||||
* 现在标题独占一行、从左边缘开始,标签另起一行。 */
|
||||
/* ⚠️ .item-top 仍被 admin.php 的三处内部列表使用(后台待审核 / 详情头 / 操作日志)。
|
||||
* 前台列表已改用 .item-head + .item-tags(标题独占一行),这里保留供后台用。 */
|
||||
.item-top{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
|
||||
.item-title{font-weight:600; font-size:16px; flex:1; min-width:160px}
|
||||
.item-head{display:flex; align-items:flex-start; gap:8px}
|
||||
.item-title{font-weight:600; font-size:16px; flex:1; min-width:0; line-height:1.45; word-break:break-word}
|
||||
.item-tags{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:7px}
|
||||
.item-ex{color:var(--muted); font-size:14px; margin:8px 0 8px; word-break:break-word}
|
||||
.item-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
|
||||
.item-meta .who{color:#3a424d; font-weight:600}
|
||||
@@ -564,7 +577,12 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
|
||||
|
||||
/* ---------- 主题 / 回复 ---------- */
|
||||
.subject{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow)}
|
||||
.subject-title{font-size:21px; margin:0; flex:1; min-width:200px}
|
||||
/* 详情页三段:标题(顶头独占一行)→ 标签行 → 作者信息行。
|
||||
* 🔴 用户 2026-11-03:软件名/分类/状态这三个标签原来在标题前面,
|
||||
* 把标题挤到右边去了。现在标题在最上面顶头,标签另起一行放下面。 */
|
||||
.subject-head{display:flex; align-items:flex-start; gap:10px}
|
||||
.subject-title{font-size:21px; margin:0; flex:1; min-width:0; line-height:1.4; word-break:break-word}
|
||||
.subject-tags{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:10px 0 0}
|
||||
.subject-body{margin-top:14px; white-space:normal; word-break:break-word; line-height:1.85}
|
||||
.subject-body br{content:""}
|
||||
|
||||
@@ -579,7 +597,78 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
|
||||
.reply-body{word-break:break-word; line-height:1.8}
|
||||
|
||||
/* ---------- 表单 ---------- */
|
||||
.narrow{max-width:640px}
|
||||
/* 提交页容器。
|
||||
* 🔴 原来只有 max-width:640px,**没有居中** —— 在 880px 的内容区里,
|
||||
* 表单贴左边、右侧空出 240px 白,看起来像"页面缺了一块"。
|
||||
* 用户 2026-11-03 指出这一点。现在:加 margin 居中,宽度放到 720px,
|
||||
* 既不至于像正文那么宽(长行难读),也不会显得抠掉一块。 */
|
||||
.narrow{max-width:720px; margin-left:auto; margin-right:auto}
|
||||
|
||||
/* ---------- 提交成功页 ----------
|
||||
* 用户 2026-11-03:提交完不要跳走,要给回执 + 凭据 + 后续去处。 */
|
||||
.submitted{
|
||||
background:var(--card); border:1px solid var(--line);
|
||||
border-radius:16px; padding:30px 32px 26px; margin-top:14px;
|
||||
box-shadow:var(--shadow);
|
||||
text-align:center;
|
||||
}
|
||||
.submitted-ok{
|
||||
width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
|
||||
background:var(--ok-soft, #e8f6ee); color:var(--ok, #16794a);
|
||||
font-size:26px; line-height:52px; font-weight:700;
|
||||
}
|
||||
.submitted h1{font-size:22px; margin:0 0 10px}
|
||||
.submitted-lead{
|
||||
font-size:14px; line-height:1.75; color:var(--muted);
|
||||
margin:0 auto 20px; max-width:520px;
|
||||
}
|
||||
.submitted-lead b{color:var(--fg)}
|
||||
|
||||
/* 凭据框:要显眼但不能吓人 —— 用中性浅底 + 等宽字,看起来像"码" */
|
||||
.token-box{
|
||||
text-align:left; margin:0 0 22px; padding:15px 16px;
|
||||
background:var(--bg, #f6f8fb); border:1px solid var(--line);
|
||||
border-radius:11px;
|
||||
}
|
||||
.token-box-hd{
|
||||
font-size:12.5px; font-weight:700; color:var(--muted);
|
||||
letter-spacing:.3px; margin-bottom:8px;
|
||||
}
|
||||
.token-code{
|
||||
font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size:14px; font-weight:600; color:var(--fg);
|
||||
padding:10px 12px; background:var(--card);
|
||||
border:1px dashed var(--line-strong); border-radius:8px;
|
||||
word-break:break-all; user-select:all; line-height:1.5;
|
||||
}
|
||||
.token-box-tip{
|
||||
font-size:12.5px; line-height:1.7; color:var(--muted); margin:10px 0 0;
|
||||
}
|
||||
.token-box-warn{
|
||||
font-size:12.5px; line-height:1.7; color:#8a5a10; margin:8px 0 0;
|
||||
padding:7px 10px; background:#fff8e6; border-radius:6px;
|
||||
}
|
||||
|
||||
.submitted-next{
|
||||
font-size:13px; color:var(--muted); margin:0 0 10px; text-align:left;
|
||||
}
|
||||
.submitted-actions{
|
||||
display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start;
|
||||
margin:0 0 22px;
|
||||
}
|
||||
|
||||
/* (已删)submitted-others / submitted-sw ——
|
||||
* 成功页不再列其他软件的入口,跨软件只有顶栏三横线菜单一个入口。 */
|
||||
|
||||
.submitted-credit{
|
||||
margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
|
||||
font-size:12.5px; color:var(--muted); text-align:left;
|
||||
word-break:break-all;
|
||||
}
|
||||
@media (max-width:600px){
|
||||
.submitted{padding:24px 18px 20px}
|
||||
.submitted-actions .btn{flex:1 1 auto; text-align:center}
|
||||
}
|
||||
.card-form{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow); margin-top:14px}
|
||||
.field{display:block; margin-bottom:16px}
|
||||
.field > span{display:block; font-size:14px; font-weight:600; margin-bottom:6px}
|
||||
|
||||
Reference in New Issue
Block a user