diff --git a/assets/css/routes/user-home.css b/assets/css/routes/user-home.css index 87e10e4b..fcd87113 100644 --- a/assets/css/routes/user-home.css +++ b/assets/css/routes/user-home.css @@ -411,14 +411,20 @@ box-shadow: none; } -/* 宽屏双列:无侧边栏全文宽时文章卡片并排两列,同 zibll site-layout-1 */ +/* 宽屏双列:无侧边栏全文宽时文章卡片并排两列,视觉同 zibll site-layout-1 + * (zibll 用 inline-flex+calc(50%),对标记空白敏感,此处用等几何的 grid) */ @media (min-width: 992px) { - .aksrt-user-home #panel-posts .aksrt-user-home__post-list .posts-item { - display: inline-flex; - width: calc(50% - 16px); - margin: 8px; - border-radius: var(--main-radius, 8px); - vertical-align: top; + .aksrt-user-home #panel-posts .aksrt-user-home__post-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + align-items: start; + margin-right: 0; + margin-left: 0; + } + + .aksrt-user-home #panel-posts .aksrt-user-home__post-list > .posts-item { + margin: 0 !important; /* 抵消 vendored .posts-row > * 的 8px !important 边距 */ } } diff --git a/tests/widget-system/post-visual-contract.test.cjs b/tests/widget-system/post-visual-contract.test.cjs index 7aab439e..3b4c3a93 100644 --- a/tests/widget-system/post-visual-contract.test.cjs +++ b/tests/widget-system/post-visual-contract.test.cjs @@ -322,7 +322,8 @@ test('profile routes load versioned leaf styles and keep dialogs hidden initiall assert.match(userCenterJs, /function closeModal\(m\)[\s\S]*?m\.hidden = true;/); assert.match(userHomeCss, /\.aksrt-profile-details-modal\[hidden\]\s*\{\s*display:\s*none\s*!important;\s*\}/); assert.match(userHomeCss, /\.aksrt-user-home #panel-posts \.aksrt-user-home__post-list \.posts-item\s*\{[^}]*background:\s*transparent;[^}]*box-shadow:\s*none;/); - assert.match(userHomeCss, /@media \(min-width: 992px\)\s*\{[\s\S]*?\.aksrt-user-home #panel-posts \.aksrt-user-home__post-list \.posts-item\s*\{[^}]*display:\s*inline-flex;[^}]*width:\s*calc\(50% - 16px\);[^}]*vertical-align:\s*top;/); + assert.match(userHomeCss, /@media \(min-width: 992px\)\s*\{[\s\S]*?\.aksrt-user-home #panel-posts \.aksrt-user-home__post-list\s*\{[^}]*display:\s*grid;[^}]*grid-template-columns:\s*repeat\(2,\s*minmax\(0,\s*1fr\)\);/); + assert.match(userHomeCss, /@media \(min-width: 992px\)\s*\{[\s\S]*?\.aksrt-user-home #panel-posts \.aksrt-user-home__post-list > \.posts-item\s*\{[^}]*margin:\s*0 !important;/); assert.match(userHomeCss, /@media \(max-width: 767px\)\s*\{[\s\S]*?\.aksrt-user-home #panel-posts \.aksrt-user-home__post-list \.posts-item\s*\{[^}]*padding:\s*10px 0;/); assert.match(profileLayoutCss, /\.aksrt-cover-menu__panel\[hidden\]\s*\{\s*display:\s*none\s*!important;\s*\}/); assert.match(profileLayoutCss, /#aksrt-bg-file-input\[hidden\],[\s\S]*?#aksrt-avatar-file-input\[hidden\][\s\S]*?display:\s*none\s*!important;/);