fix(user-center): restore page-owned dual-column sidebar layout

User center left nav (stats/services/commerce) stacked or hid after
content-layout lost its grid and the site float shell treated the
nested .sidebar as a widget column. Scope a CSS grid under
body.aksrt-user-center, neutralize site-layout float/hide, align the
drawer to ≤991.98, and drop the truncated #panel-credits selector.
This commit is contained in:
2026-07-16 11:56:09 +08:00
parent a1d724d48e
commit c656c20c8b
3 changed files with 85 additions and 23 deletions
+1 -9
View File
@@ -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;
+25 -10
View File
@@ -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;
}
+59 -4
View File
@@ -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