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

style(home): 页面底色改 portrait 扁平纯色(去除整页彩洗)，特征面板改单色相低饱和一角辉光

Browse Source
This commit is contained in:
Pine
2026-08-27 17:40:18 +08:00
parent b6428d85a0
commit eecd918002
2 changed files with 7 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/styles/global.css
+3 -11
View File
@@ -421,19 +421,11 @@ input[type="range"] { accent-color: var(--primary); }
.bg-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg); }
.bg-scene::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(45% 42% at 12% 4%, rgba(38,192,255,0.14), transparent 60%),
radial-gradient(38% 36% at 90% 8%, rgba(230,0,194,0.10), transparent 60%),
radial-gradient(50% 44% at 82% 96%, rgba(255,161,62,0.10), transparent 62%),
radial-gradient(42% 40% at 6% 96%, rgba(0,204,61,0.08), transparent 60%);
/* portrait 式：页面基本纯色，仅在顶部极淡微光，不做整页彩洗 */
background: radial-gradient(60% 22% at 50% 0%, rgba(120,150,255,0.06), transparent 60%);
}
.bg-scene canvas { display: none; }
.bg-shade {
position: absolute; inset: 0;
/* 浅色下无需暗角，仅微光保证文字层次；深色同理 */
background: radial-gradient(120% 60% at 50% 0%, transparent 55%, rgba(0,0,0,0.12) 100%);
}
[data-theme="dark"] .bg-shade { background: radial-gradient(120% 60% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%); }
.bg-shade { position: absolute; inset: 0; background: transparent; }
.page-landing {
position: relative; z-index: 1;
height: 100vh; height: 100dvh; overflow: hidden;
website/src/styles/home.css
+4 -4
View File
@@ -29,10 +29,10 @@
.pt-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.pt-stage { border-radius: 44px; min-height: clamp(320px, 40vh, 460px); display: grid; place-items: center; padding: clamp(30px, 5vw, 56px); position: relative; overflow: hidden; }
.pt-stage::before { content: ''; position: absolute; inset: 0; }
.pt-stage.blue { background: linear-gradient(160deg, #dfe9ff, #e6efff 45%, #f3eeff); }
.pt-stage.blue::before { background: radial-gradient(60% 50% at 16% 20%, rgba(98,132,255,.32), transparent 60%), radial-gradient(50% 44% at 96% 90%, rgba(230,160,255,.28), transparent 60%); }
.pt-stage.orange { background: linear-gradient(160deg, #ffefe2, #ffe9f2 45%, #f1ebff); }
.pt-stage.orange::before { background: radial-gradient(60% 50% at 14% 18%, rgba(255,150,80,.30), transparent 60%), radial-gradient(50% 44% at 96% 90%, rgba(255,100,160,.24), transparent 60%); }
.pt-stage.blue { background: radial-gradient(70% 70% at 18% 22%, #dbe7ff, #e9eefb 55%, #f4f4fc); }
.pt-stage.blue::before { background: radial-gradient(52% 46% at 12% 24%, rgba(120,160,255,.22), transparent 60%); }
.pt-stage.orange { background: radial-gradient(70% 70% at 18% 22%, #ffe9d6, #fdecec 55%, #f7f1fb); }
.pt-stage.orange::before { background: radial-gradient(52% 46% at 12% 24%, rgba(255,170,90,.22), transparent 60%); }
.pt-window { position: relative; width: min(360px, 92%); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,.4); padding: 22px; }
.pt-window-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pt-win-title { font-size: 15px; font-weight: 700; color: var(--heading); }