style(ui): 内容区四角改为直角
内容区原来只有左上角 12px 圆角、左下角是直角,看着不统一;去掉 .main 和 .top 的左上角圆角。 设计规范 §5.3、UI demo 和原型的样式同步修改。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -8,7 +8,7 @@
|
|||||||
* 与原型的差别:原型把框架挂在 body.app 上,这里挂在 AppShell 的根元素 .app-frame 上。 */
|
* 与原型的差别:原型把框架挂在 body.app 上,这里挂在 AppShell 的根元素 .app-frame 上。 */
|
||||||
|
|
||||||
/* =====================================================================
|
/* =====================================================================
|
||||||
* 1. 页面框架:96px 墨色渐变侧栏 + 透明顶栏 + 内容区左上角圆角
|
* 1. 页面框架:96px 墨色渐变侧栏 + 透明顶栏;内容区四角都是直角(侧栏贴边,不做圆角衔接)
|
||||||
* ===================================================================== */
|
* ===================================================================== */
|
||||||
.app-frame{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed}
|
.app-frame{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed}
|
||||||
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:0 0 var(--sp-4) 10px;color:var(--side-fg);min-width:0}
|
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:0 0 var(--sp-4) 10px;color:var(--side-fg);min-width:0}
|
||||||
@@ -31,8 +31,8 @@
|
|||||||
.plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)}
|
.plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)}
|
||||||
.plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)}
|
.plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)}
|
||||||
|
|
||||||
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page);border-top-left-radius:var(--radius-card)}
|
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page)}
|
||||||
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;border-top-left-radius:var(--radius-card);transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
|
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
|
||||||
.top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)}
|
.top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)}
|
||||||
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden}
|
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden}
|
||||||
.crumbs > *{min-width:0;overflow:hidden;text-overflow:ellipsis}
|
.crumbs > *{min-width:0;overflow:hidden;text-overflow:ellipsis}
|
||||||
|
|||||||
@@ -207,7 +207,7 @@
|
|||||||
┌──────┬────────────────────────────────────────────────────┐
|
┌──────┬────────────────────────────────────────────────────┐
|
||||||
│ 侧栏 │ 顶栏(透明):公司 / 页面 搜索 │ 额度 · 通知 │
|
│ 侧栏 │ 顶栏(透明):公司 / 页面 搜索 │ 额度 · 通知 │
|
||||||
│ 96px ├────────────────────────────────────────────────────┤
|
│ 96px ├────────────────────────────────────────────────────┤
|
||||||
│ logo │╭ 内容区(浅灰底,左上角 12px 圆角压在侧栏深色上) │
|
│ logo ││ 内容区(浅灰底,四角直角,直接贴着侧栏) │
|
||||||
│ 菜单 ││ │
|
│ 菜单 ││ │
|
||||||
│ … ││ 页面内容(三种主布局见下) │
|
│ … ││ 页面内容(三种主布局见下) │
|
||||||
│ 头像 ││ │
|
│ 头像 ││ │
|
||||||
@@ -229,7 +229,7 @@
|
|||||||
- 顶栏不用深色,避免和侧栏连成一个「门」字形边框。
|
- 顶栏不用深色,避免和侧栏连成一个「门」字形边框。
|
||||||
|
|
||||||
**内容区**:
|
**内容区**:
|
||||||
- 浅灰底 `--bg-page`,左上角 12px 圆角,压在侧栏的深色上。
|
- 浅灰底 `--bg-page`,四角都是直角,直接贴着侧栏(2026-11-05 改:原为左上角 12px 圆角,只有左上角圆、左下角是直角,看着不统一)。
|
||||||
- 页面左右内边距 32px,1400px 以下为 24px。
|
- 页面左右内边距 32px,1400px 以下为 24px。
|
||||||
|
|
||||||
| 布局 | 页面 | 结构 |
|
| 布局 | 页面 | 结构 |
|
||||||
|
|||||||
@@ -81,7 +81,7 @@ table.data.keys td:first-child{width:1%;padding-right:var(--sp-6)} /* 快捷
|
|||||||
.ic.xl{width:32px;height:32px;stroke-width:1.25}
|
.ic.xl{width:32px;height:32px;stroke-width:1.25}
|
||||||
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
||||||
|
|
||||||
/* ---- B2 页面框架 v0.2(§5.3):96px 墨色渐变侧栏 + 透明顶栏 + 内容区左上角圆角 ----
|
/* ---- B2 页面框架 v0.2(§5.3):96px 墨色渐变侧栏 + 透明顶栏;内容区四角直角(2026-11-05 改) ----
|
||||||
* 结构由 demo.js 的 Demo.shell() 生成:body.app > aside.sidebar + main.main > header.top + 页面内容 */
|
* 结构由 demo.js 的 Demo.shell() 生成:body.app > aside.sidebar + main.main > header.top + 页面内容 */
|
||||||
body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed}
|
body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed}
|
||||||
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:0 0 var(--sp-4) 10px;color:var(--side-fg);min-width:0}
|
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:0 0 var(--sp-4) 10px;color:var(--side-fg);min-width:0}
|
||||||
@@ -105,8 +105,8 @@ body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-heig
|
|||||||
.plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)}
|
.plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)}
|
||||||
.plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)}
|
.plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)}
|
||||||
|
|
||||||
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page);border-top-left-radius:var(--radius-card)}
|
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page)}
|
||||||
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;border-top-left-radius:var(--radius-card);transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
|
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
|
||||||
.top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)}
|
.top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)}
|
||||||
/* 左侧「公司 / 页面」 */
|
/* 左侧「公司 / 页面」 */
|
||||||
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden}
|
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden}
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
* v0.1 的 216px 侧栏、校样纸底色、2px 圆角已删除。 */
|
* v0.1 的 216px 侧栏、校样纸底色、2px 圆角已删除。 */
|
||||||
|
|
||||||
/* =====================================================================
|
/* =====================================================================
|
||||||
* 1. 页面框架 v0.2(§5.3):96px 墨色渐变侧栏 + 透明顶栏 + 内容区左上角圆角
|
* 1. 页面框架 v0.2(§5.3):96px 墨色渐变侧栏 + 透明顶栏;内容区四角直角(2026-11-05 改)
|
||||||
* 结构:body.app > aside.sidebar + main.main > header.top + [header.ph 项目头] + 页面内容
|
* 结构:body.app > aside.sidebar + main.main > header.top + [header.ph 项目头] + 页面内容
|
||||||
* ===================================================================== */
|
* ===================================================================== */
|
||||||
body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed}
|
body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed}
|
||||||
@@ -34,8 +34,8 @@ body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-heig
|
|||||||
.plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)}
|
.plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)}
|
||||||
.plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)}
|
.plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)}
|
||||||
|
|
||||||
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page);border-top-left-radius:var(--radius-card)}
|
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page)}
|
||||||
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;border-top-left-radius:var(--radius-card);transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
|
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
|
||||||
.top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)}
|
.top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)}
|
||||||
/* 左侧「公司 / 页面」 */
|
/* 左侧「公司 / 页面」 */
|
||||||
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden}
|
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden}
|
||||||
|
|||||||
Reference in New Issue
Block a user