OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 首页功能页样式与组件更新

Browse Source
This commit is contained in:
OmniAI Developer
2026-06-03 17:28:44 +08:00
parent a8266fc475
commit 7b41cf3e87
10 changed files with 3175 additions and 959 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/pages/toolbox.css
+43 -36
View File
@@ -3,15 +3,15 @@
--toolbox-green: #00ff88;
--toolbox-blue: #4fc3f7;
--toolbox-purple: #a855f7;
--toolbox-surface: rgba(14, 16, 38, 0.75);
--toolbox-elevated: rgba(20, 22, 52, 0.85);
--toolbox-surface: rgba(255, 255, 255, 0.04);
--toolbox-elevated: rgba(255, 255, 255, 0.06);
--toolbox-highlight: rgba(28, 31, 68, 0.9);
--toolbox-border-subtle: rgba(0, 255, 136, 0.08);
--toolbox-border-default: rgba(0, 255, 136, 0.14);
--toolbox-border-hover: rgba(0, 255, 136, 0.28);
--toolbox-text-primary: #f0f0f5;
--toolbox-text-secondary: rgba(240, 240, 245, 0.6);
--toolbox-text-tertiary: rgba(240, 240, 245, 0.4);
--toolbox-text-primary: #e8eaef;
--toolbox-text-secondary: #9aa1b8;
--toolbox-text-tertiary: #62697f;
position: relative;
isolation: isolate;
@@ -20,7 +20,7 @@
background:
linear-gradient(180deg, #070b10 0%, #05080d 100%),
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 255, 136, 0.04) 0%, transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 70%, rgba(79, 195, 247, 0.03) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 70%, rgba(42, 159, 212, 0.03) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 20% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 60%);
scroll-snap-align: start;
scroll-snap-stop: normal;
@@ -30,21 +30,21 @@
position: relative;
z-index: 2;
display: flex;
gap: clamp(20px, 3vw, 40px);
padding: clamp(42px, 6vw, 82px) clamp(22px, 7vw, 92px);
gap: clamp(18px, 2.8vw, 36px);
padding: clamp(36px, 5.5vw, 68px) clamp(20px, 6vw, 76px);
min-height: var(--home-section-min-height);
align-items: center;
}
/* ===== Left Panel ===== */
.omni-home__toolbox-left {
width: clamp(340px, 30vw, 440px);
width: clamp(320px, 30vw, 450px);
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 16px;
gap: 17px;
justify-content: flex-start;
padding-top: clamp(40px, 8vh, 100px);
padding-top: clamp(34px, 6vh, 84px);
}
.omni-home__toolbox-brand {
@@ -54,31 +54,31 @@
}
.omni-home__toolbox-brand-icon {
width: 52px;
height: 52px;
width: 56px;
height: 56px;
background: var(--toolbox-green);
border-radius: 14px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #0a0b12;
font-size: 26px;
font-size: 28px;
}
.omni-home__toolbox-brand-icon .anticon {
font-size: 28px;
font-size: 30px;
}
.omni-home__toolbox-brand-text {
font-weight: 900;
font-size: 30px;
font-size: 34px;
color: #fff;
letter-spacing: -0.5px;
}
.omni-home__toolbox-title {
font-weight: 900;
font-size: clamp(34px, 3.6vw, 46px);
font-size: clamp(36px, 3.8vw, 50px);
line-height: 1.15;
background: linear-gradient(135deg, var(--toolbox-green), var(--toolbox-blue));
-webkit-background-clip: text;
@@ -87,9 +87,10 @@
}
.omni-home__toolbox-subtitle {
font-size: 17px;
line-height: 1.6;
font-size: 18px;
line-height: 1.55;
color: var(--toolbox-text-secondary);
max-width: 100%;
}
.omni-home__toolbox-list {
@@ -102,8 +103,8 @@
.omni-home__toolbox-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 22px;
gap: 17px;
padding: 17px 22px;
border-radius: 16px;
background: var(--toolbox-surface);
border: 1px solid var(--toolbox-border-subtle);
@@ -124,14 +125,14 @@
}
.omni-home__toolbox-item-icon {
font-size: 28px;
font-size: 29px;
flex-shrink: 0;
width: 48px;
height: 48px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border-radius: 13px;
background: rgba(0, 255, 136, 0.08);
}
@@ -139,18 +140,19 @@
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.omni-home__toolbox-item-name {
font-weight: 700;
font-size: 17px;
font-size: 19px;
color: var(--toolbox-text-primary);
}
.omni-home__toolbox-item-desc {
font-size: 14px;
font-size: 16px;
color: var(--toolbox-text-tertiary);
line-height: 1.5;
line-height: 1.4;
}
@keyframes omni-toolbox-fadeSlideIn {
@@ -160,14 +162,14 @@
.omni-home__toolbox-workflow {
margin-top: auto;
padding: 20px 24px;
padding: 19px 24px;
border-radius: 16px;
background: var(--toolbox-surface);
border: 1px solid var(--toolbox-border-subtle);
}
.omni-home__toolbox-workflow-label {
font-size: 14px;
font-size: 16px;
font-weight: 700;
color: var(--toolbox-green);
margin-bottom: 12px;
@@ -178,18 +180,21 @@
.omni-home__toolbox-workflow-steps {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 14px;
font-size: 16px;
color: var(--toolbox-text-tertiary);
}
.omni-home__toolbox-workflow-step {
color: var(--toolbox-text-secondary);
white-space: nowrap;
}
.omni-home__toolbox-workflow-arrow {
color: var(--toolbox-green);
font-size: 14px;
font-size: 16px;
flex-shrink: 0;
}
/* ===== Grid Area ===== */
@@ -829,17 +834,19 @@
@media (max-width: 980px) {
.omni-home__toolbox-shell {
flex-direction: column;
padding: 48px 22px 64px;
padding: 36px 20px 48px;
gap: 24px;
}
.omni-home__toolbox-left {
width: 100%;
flex-shrink: unset;
padding-top: 0;
}
.omni-home__toolbox-grid {
width: 100%;
min-height: clamp(480px, 70vw, 700px);
min-height: clamp(400px, 60vw, 560px);
}
.omni-home__toolbox-workflow {
@@ -849,7 +856,7 @@
@media (max-width: 560px) {
.omni-home__toolbox-shell {
padding: 36px 18px 48px;
padding: 28px 16px 40px;
}
.omni-home__toolbox-title {