diff --git a/assets/css/routes/profile/layout.css b/assets/css/routes/profile/layout.css index 3f6c626b..51e95f03 100644 --- a/assets/css/routes/profile/layout.css +++ b/assets/css/routes/profile/layout.css @@ -470,18 +470,10 @@ } -/* 用户中心复用全站 content-layout,避免嵌套网格与双卡片负边距抵消。 */ +/* 用户中心 layout 间距;双栏 / sticky 见 user-center/shell.css(body.aksrt-user-center)。 */ .aksrt-profile__layout { margin-top: 20px; } -.aksrt-profile__aside.page-owned { - position: static; -} -@media (min-width: 992px) { - .aksrt-profile__aside.page-owned { - position: sticky; - } -} .aksrt-user-center__notice { margin-bottom: 16px; padding: 12px 14px; diff --git a/assets/css/routes/user-center/responsive.css b/assets/css/routes/user-center/responsive.css index d03f26cd..61fdffbb 100644 --- a/assets/css/routes/user-center/responsive.css +++ b/assets/css/routes/user-center/responsive.css @@ -51,30 +51,43 @@ } } -/* ==================== 响应式 ==================== */ -@media (max-width: 767px) { - .uc-sidebar { +/* ==================== 响应式抽屉(对齐全站 ≤991 隐藏点,覆盖 display:none) ==================== */ +@media (max-width: 991.98px) { + body.aksrt-user-center .aksrt-profile__layout { + display: block; + } + + /* 覆盖 layout.css / sidebar.css 的 .sidebar { display:none } 与 .content-layout__aside hide */ + body.aksrt-user-center .sidebar.page-owned.uc-sidebar, + body.aksrt-user-center .content-layout__aside.page-owned { + display: flex; + float: none; + width: 270px; + margin-left: 0; + margin-right: 0; + } + + body.aksrt-user-center .sidebar.page-owned.uc-sidebar { position: fixed; top: 0; left: -280px; bottom: 0; - width: 270px; z-index: 300; background: var(--surface-1); padding: 0; overflow-y: auto; overflow-x: hidden; transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1); - box-shadow: 4px 0 24px rgba(0,0,0,0.12); + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); gap: 0; } - .uc-sidebar.is-open { + body.aksrt-user-center .sidebar.page-owned.uc-sidebar.is-open { left: 0; } /* 抽屉头部 */ - .uc-sidebar::before { + body.aksrt-user-center .sidebar.page-owned.uc-sidebar::before { content: ''; display: block; height: 100px; @@ -82,24 +95,26 @@ flex-shrink: 0; } - .uc-sidebar__section { + body.aksrt-user-center .uc-sidebar__section { border-radius: 0; border-left: none; border-right: none; box-shadow: none; } - .uc-sidebar__section:first-of-type { + body.aksrt-user-center .uc-sidebar__section:first-of-type { margin-top: -20px; position: relative; z-index: 1; border-radius: 12px 12px 0 0; } - .uc-sidebar__drawer-trigger { + body.aksrt-user-center .uc-sidebar__drawer-trigger { display: flex; } +} +@media (max-width: 767px) { .uc-content .dashboard-panel { padding: 16px; } diff --git a/assets/css/routes/user-center/shell.css b/assets/css/routes/user-center/shell.css index e375fc3e..683ee2f4 100644 --- a/assets/css/routes/user-center/shell.css +++ b/assets/css/routes/user-center/shell.css @@ -25,6 +25,64 @@ padding: 0 0 40px; } +/* ==================== 页面自有双栏(page-owned,非全站 float 壳) ==================== */ +/* DOM: content first + aside second;桌面用 grid-area 把 aside 放左侧。 */ +body.aksrt-user-center .aksrt-profile__layout { + display: block; + width: 100%; + margin-left: 0; + margin-right: 0; + min-width: 0; +} + +/* 中和 site-layout-2/3 对 content-layout 的 margin 挖空 */ +body.aksrt-user-center.site-layout-1 .aksrt-profile__layout, +body.aksrt-user-center.site-layout-2 .aksrt-profile__layout, +body.aksrt-user-center.site-layout-3 .aksrt-profile__layout { + margin-left: 0; + margin-right: 0; +} + +/* 私有导航:中和 body.site-layout-1 .sidebar { display:none } 与 float 几何 */ +body.aksrt-user-center .sidebar.page-owned.uc-sidebar { + float: none; + width: auto; + margin-left: 0; + margin-right: 0; + display: flex; + flex-direction: column; + gap: 12px; + box-sizing: border-box; + min-width: 0; +} + +@media (min-width: 992px) { + body.aksrt-user-center .aksrt-profile__layout { + display: grid; + grid-template-columns: var(--sidebar-width, 311px) minmax(0, 1fr); + grid-template-areas: "aside primary"; + gap: 20px; + align-items: start; + } + + body.aksrt-user-center .aksrt-profile__layout > .uc-content, + body.aksrt-user-center .aksrt-profile__layout > .content-layout__primary { + grid-area: primary; + min-width: 0; + width: auto; + } + + body.aksrt-user-center .aksrt-profile__layout > .uc-sidebar, + body.aksrt-user-center .aksrt-profile__layout > .aksrt-profile__aside { + grid-area: aside; + } + + body.aksrt-user-center .sidebar.page-owned.uc-sidebar { + position: sticky; + top: calc(var(--nav-height, 60px) + 20px); + } +} + .uc-header__actions { position: relative; } @@ -45,9 +103,8 @@ line-height: 1; } /* ==================== 左侧边栏 ==================== */ +/* sticky / 双栏位置由 body.aksrt-user-center .sidebar.page-owned 负责;此处只定 chrome 布局 */ .uc-sidebar { - position: sticky; - top: 80px; display: flex; flex-direction: column; gap: 12px; @@ -304,5 +361,3 @@ padding-top: 18px; border-top: 1px solid var(--color-line-soft, rgba(0,0,0,0.06)); } - -.uc-content #panel-credits