OPC-Hub/training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): 对齐 portrait 首页动线 —— Hero 下方马赛克拼贴 + 标题内联渐变强调词

Browse Source 
- Hero 下方加 4×N 圆角渐变马赛克拼贴（抽象化 portrait 的照片网格，避免无版权照片）
- 标题内联强调词 .pt-h .ac / .ink-grad 改彩虹渐变文字(background-clip:text)
- 特征面板/居中主张沿用 portrait 的 tint分栏 + 早鸟漂浮芯片节奏
This commit is contained in:
Pine
2026-08-27 17:41:21 +08:00
parent eecd918002
commit 79e4ae04be
2 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/styles/home.css
+18 -1
View File
@@ -12,14 +12,31 @@
.mk-display span { display: block; }
.mk-display em { font-style: normal; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mk-lede { max-width: 640px; margin-top: 26px; font-size: 17px; color: var(--text-soft); line-height: 1.75; }
.ink-grad { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mk-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
/* Hero 下方的马赛克拼贴（portrait 照片网格的抽象化，用渐变tile替代无版权照片） */
.pt-mosaic { width: 100%; max-width: 1040px; margin: clamp(40px, 6vh, 64px) auto 0; display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(64px, 9vh, 104px); }
.mk-tile { border-radius: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm-border); display: grid; place-items: center; color: #fff; }
.mk-tile .icon { opacity: .9; }
.mk-tile span { font-family: var(--font-pixel); font-size: 13px; }
.mk-tile.t1 { background: linear-gradient(135deg, #26c0ff, #7f62ff); grid-column: span 2; grid-row: span 2; }
.mk-tile.t2 { background: linear-gradient(135deg, #ff7ab8, #ff6a3d); }
.mk-tile.t3 { background: linear-gradient(135deg, #8be0c9, #00cc9e); }
.mk-tile.t4 { background: linear-gradient(135deg, #ffd47a, #ff9f2e); grid-row: span 2; }
.mk-tile.t5 { background: linear-gradient(135deg, #c9a8ff, #8a7bff); }
.mk-tile.t6 { background: linear-gradient(135deg, #6fe0ff, #3f8bff); grid-column: span 2; }
.mk-tile.t7 { background: linear-gradient(135deg, #ffb38a, #ff5f86); }
.mk-tile.t8 { background: linear-gradient(135deg, #1b2a5e, #35507f); grid-column: span 2; grid-row: span 2; }
.mk-tile.t9 { background: linear-gradient(135deg, #ffa13e, #ff494e); }
@media (max-width: 720px) { .pt-mosaic { grid-template-columns: repeat(2, 1fr); } }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); color: var(--text-soft); background: transparent; font-weight: 600; font-size: 14px; padding: 12px 26px; transition: border-color .2s ease, color .2s ease, transform .2s var(--ease); }
.btn-ghost:hover { border-color: var(--heading); color: var(--heading); transform: translateY(-1px); }
/* ---------- 通用小节 ---------- */
.pt-section { margin-top: clamp(72px, 12vh, 150px); }
.pt-h { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.802rem, 1.313rem + 2.17vw, 3.05rem); line-height: 1.04; letter-spacing: -.032em; color: var(--heading); }
.pt-h .ac { color: var(--primary); }
.pt-h .ac { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pt-h.center { text-align: center; }
.pt-p { margin-top: 18px; font-size: 16.5px; line-height: 1.7; color: var(--text-soft); max-width: 560px; }
.pt-p.dim { color: var(--muted); }
website/src/user/Home.jsx
+11
View File
@@ -114,6 +114,17 @@ export default function Home() {
<Button variant="cta" href={MK_HERO.ctaPrimary.href}>{MK_HERO.ctaPrimary.label} <Icon name="arrow-right" size="sm" /></Button>
<Button variant="ghost" href={MK_HERO.ctaSecondary.href}>{MK_HERO.ctaSecondary.label}</Button>
</div>
<div className="pt-mosaic anim" style={{ '--d': '0.55s' }} aria-hidden="true">
<div className="mk-tile t1"><Icon name="sparkles" size="xl" /></div>
<div className="mk-tile t2"><span>测</span></div>
<div className="mk-tile t3"><Icon name="home" size="xl" /></div>
<div className="mk-tile t4"><span>认</span></div>
<div className="mk-tile t5"><Icon name="book" size="xl" /></div>
<div className="mk-tile t6"><Icon name="trending-up" size="xl" /></div>
<div className="mk-tile t7"><span>单</span></div>
<div className="mk-tile t8"><Icon name="compass" size="xl" /></div>
<div className="mk-tile t9"><span>陪</span></div>
</div>
</section>
{/* 2 · 特征分栏 1：三件套 */}