GuangYu/guanwang
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化文章详情与导航配置

Browse Source
This commit is contained in:
Nelson
2026-08-28 18:26:49 +08:00
parent d93486cd9a
commit d41b2f0ece
9 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/css/main.scss
View File

@@ -43,8 +43,7 @@ img { max-width: 100%; }
.site-header { position: absolute; z-index: 20; top: 0; left: 0; display: grid; grid-template-columns: 250px 1fr 160px; align-items: center; width: 100%; padding: 26px 4.2vw; }
.main-nav { display: flex; justify-content: center; gap: clamp(18px, 2.4vw, 42px); }
.main-nav a { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: 0 3px; color: #17364e; white-space: nowrap; }
.nav-label { font-size: 14px; line-height: 1.2; }
.nav-english { margin-top: 5px; color: #71889b; font-size: 9px; font-weight: 500; line-height: 1; letter-spacing: .12em; }
.nav-label { font-size: var(--nav-font-size, 14px); line-height: 1.2; }
.main-nav a::after { position: absolute; right: 50%; bottom: -8px; left: 50%; height: 1px; content: ""; background: var(--ink); transition: .28s ease; }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a[aria-current="page"]::after { right: 0; left: 0; }
.header-cta, .primary-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px; overflow: hidden; border-radius: 999px; color: white; background: linear-gradient(135deg, #2b5f8b, #0a3456); box-shadow: 0 12px 28px rgba(10, 52, 86, .2); isolation: isolate; }
@@ -180,8 +179,7 @@ img { max-width: 100%; }
.story-page { max-width: 1060px; margin: 0 auto; padding: 72px 32px 130px; }
.story-page header { text-align: center; }
.story-page header > p { color: var(--muted); }
.story-page header > img { width: 100%; max-height: 530px; margin-top: 48px; border-radius: 34px; object-fit: cover; box-shadow: var(--shadow); }
.story-body { max-width: 760px; margin: 58px auto 0; }
.story-body { width: 100%; margin: 58px 0 0; }
.detail-back { display: inline-flex; margin-bottom: 34px; color: #59758c; font-size: 13px; }
.related-content { max-width: 760px; margin: 90px auto 0; padding-top: 42px; border-top: 1px solid var(--line); }
.related-content h2 { margin: 0 0 20px; font: 500 34px var(--serif); }
@@ -430,8 +428,7 @@ img { max-width: 100%; }
.main-nav { position: fixed; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100svh; gap: 20px; visibility: hidden; opacity: 0; background: rgba(247,249,251,.97); transition: visibility .28s ease, opacity .28s ease; }
.main-nav.open { visibility: visible; opacity: 1; }
.main-nav a { display: flex; min-width: 220px; min-height: 56px; justify-content: center; }
.main-nav .nav-label { font: 500 23px/1.15 var(--serif); }
.main-nav .nav-english { margin-top: 6px; font: 500 9px/1 var(--sans); letter-spacing: .18em; }
.main-nav .nav-label { font-family: var(--serif); font-size: var(--nav-font-size, 14px); font-weight: 500; line-height: 1.15; }
.header-cta { display: none; }
.teacher-card { grid-template-columns: .9fr 1.1fr; }
.official-grid { grid-template-columns: repeat(2, 1fr); }