qing/micro_servers
1
3 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(dnfs): 首页进一步美化，光晕氛围与卡片细节

Browse Source
This commit is contained in:
qing committed 2026-08-05 10:01:17 +08:00
1 parent d1e4b5b01a
commit c059589e94
1 file changed
+35 -9
Download Patch File Download Diff File Expand all files Collapse all files
static/public/css/index.css
+35 -9
View File
@@ -25,8 +25,8 @@ body {
transition: opacity 0.15s, transform 0.1s, background 0.15s, border-color 0.15s; transition: opacity 0.15s, transform 0.1s, background 0.15s, border-color 0.15s;
} }
.btn:active { transform: scale(0.96); } .btn:active { transform: scale(0.96); }
.btn-primary { background: var(--accent); color: #fff; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(232, 133, 58, 0.28); }
.btn-primary:hover { background: var(--accent-dark); opacity: 1; } .btn-primary:hover { background: var(--accent-dark); opacity: 1; box-shadow: 0 4px 14px rgba(232, 133, 58, 0.36); }
.btn-ghost { background: var(--accent-soft); color: var(--accent-dark); } .btn-ghost { background: var(--accent-soft); color: var(--accent-dark); }
.btn-ghost:hover { border-color: var(--accent); opacity: 1; } .btn-ghost:hover { border-color: var(--accent); opacity: 1; }
.btn-lg { padding: 0.7rem 1.9rem; font-size: 1rem; border-radius: var(--radius-md); } .btn-lg { padding: 0.7rem 1.9rem; font-size: 1rem; border-radius: var(--radius-md); }
@@ -99,7 +99,7 @@ body {
.hero { .hero {
position: relative; position: relative;
text-align: center; text-align: center;
padding: 5.5rem 1rem 4.5rem; padding: 6rem 1rem 5rem;
} }
.hero::before { .hero::before {
content: ""; content: "";
@@ -108,7 +108,19 @@ body {
background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--accent-glow), transparent 70%); background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--accent-glow), transparent 70%);
pointer-events: none; pointer-events: none;
} }
.hero > * { position: relative; } .hero::after {
content: "";
position: absolute;
left: 50%;
top: 52%;
width: 640px;
height: 640px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, var(--accent-glow), transparent 62%);
opacity: 0.5;
pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-title { .hero-title {
font-size: clamp(2rem, 6vw, 3rem); font-size: clamp(2rem, 6vw, 3rem);
font-weight: 800; font-weight: 800;
@@ -164,27 +176,41 @@ body {
margin: 1.75rem auto 0; margin: 1.75rem auto 0;
} }
.feature-card { .feature-card {
position: relative;
background: var(--card); background: var(--card);
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 1.6rem 1.35rem; padding: 1.7rem 1.4rem;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s; transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
} }
.feature-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
opacity: 0;
transition: opacity 0.2s;
}
.feature-card:hover { .feature-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
border-color: var(--accent); border-color: var(--accent);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.feature-card:hover::before { opacity: 0.9; }
.feature-icon { .feature-icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 42px; width: 44px;
height: 42px; height: 44px;
margin-bottom: 0.85rem; margin-bottom: 0.9rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--accent-soft); background: linear-gradient(135deg, var(--accent-soft), rgba(232, 133, 58, 0.16));
color: var(--accent-dark); color: var(--accent-dark);
} }
.feature-icon svg { width: 22px; height: 22px; } .feature-icon svg { width: 22px; height: 22px; }