lwt/sumi.work
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页视觉照片

Browse Source
This commit is contained in:
lwt
2026-05-08 23:16:22 +08:00
parent 9848a5cdb4
commit e9d8c72172
3 changed files with 70 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/workspace-hero.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

index.html
+11 -21
View File
@@ -44,27 +44,17 @@
</div>
<aside class="hero-visual" aria-label="服务概览">
<div class="visual-topbar">
<span></span>
<span></span>
<span></span>
</div>
<div class="visual-screen">
<div class="screen-heading">
<span>Service Console</span>
<img src="assets/workspace-hero.jpg" alt="整洁的现代桌面工作区，包含笔记本电脑和办公设备" />
<div class="visual-overlay">
<div class="overlay-heading">
<span>Service Gateway</span>
<strong>Online</strong>
</div>
<div class="screen-grid" aria-hidden="true">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="screen-chart" aria-hidden="true">
<i></i>
<i></i>
<i></i>
<i></i>
<div class="overlay-grid" aria-label="可用服务">
<span>FRP</span>
<span>Git</span>
<span>Sync</span>
<span>Gemini</span>
</div>
</div>
</aside>
@@ -100,11 +90,11 @@
href="https://gemini.google.com/app"
target="_blank"
rel="noreferrer"
aria-label="打开 Gemini 外部链接"
aria-label="打开 Gemini"
>
<span class="service-icon">AI</span>
<span class="service-title">Gemini</span>
<span class="service-desc">Google AI 助手 · 外部链接</span>
<span class="service-desc">Google AI 助手</span>
</a>
</div>
</section>
styles.css
+59 -99
View File
@@ -226,7 +226,7 @@ h1 {
.hero-visual {
position: relative;
min-height: 460px;
padding: 20px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 245, 255, 0.72)),
#fff;
@@ -235,116 +235,70 @@ h1 {
box-shadow: var(--shadow);
}
.hero-visual::before {
.hero-visual::after {
position: absolute;
inset: auto 38px 32px auto;
width: 190px;
height: 190px;
background: linear-gradient(135deg, rgba(36, 107, 254, 0.16), rgba(25, 185, 130, 0.12));
border-radius: 999px;
inset: 0;
background:
linear-gradient(90deg, rgba(9, 34, 74, 0.38), rgba(9, 34, 74, 0.02) 58%),
linear-gradient(180deg, transparent 48%, rgba(6, 24, 56, 0.42));
content: "";
}
.visual-topbar {
display: flex;
gap: 8px;
padding: 10px 8px 18px;
.hero-visual img {
display: block;
width: 100%;
height: 100%;
min-height: 460px;
object-fit: cover;
}
.visual-topbar span {
width: 10px;
height: 10px;
background: #d5dfef;
border-radius: 999px;
.visual-overlay {
position: absolute;
right: 24px;
bottom: 24px;
left: 24px;
z-index: 1;
padding: 20px;
color: #fff;
background: rgba(17, 35, 66, 0.68);
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 20px;
box-shadow: 0 24px 54px rgba(10, 31, 68, 0.24);
backdrop-filter: blur(18px);
}
.visual-screen {
position: relative;
min-height: 370px;
padding: clamp(22px, 4vw, 34px);
overflow: hidden;
background:
linear-gradient(140deg, #ffffff 0%, #edf5ff 100%);
border: 1px solid #e0e9f7;
border-radius: 22px;
}
.screen-heading {
.overlay-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
color: #4e607b;
margin-bottom: 16px;
color: rgba(255, 255, 255, 0.82);
font-weight: 780;
}
.screen-heading strong {
color: var(--green);
.overlay-heading strong {
color: #48f0aa;
}
.screen-grid {
.overlay-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
max-width: 360px;
}
.screen-grid span {
min-height: 92px;
background: #fff;
border: 1px solid #e0e9f7;
border-radius: 16px;
box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
}
.screen-grid span:nth-child(1) {
border-top: 4px solid var(--blue);
}
.screen-grid span:nth-child(2) {
border-top: 4px solid var(--green);
}
.screen-grid span:nth-child(3) {
border-top: 4px solid var(--orange);
}
.screen-grid span:nth-child(4) {
border-top: 4px solid var(--purple);
}
.screen-chart {
position: absolute;
right: 34px;
bottom: 34px;
display: flex;
align-items: end;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
height: 96px;
}
.screen-chart i {
display: block;
width: 18px;
background: linear-gradient(180deg, #74a5ff, var(--blue));
border-radius: 999px 999px 6px 6px;
}
.screen-chart i:nth-child(1) {
height: 42px;
}
.screen-chart i:nth-child(2) {
height: 72px;
}
.screen-chart i:nth-child(3) {
height: 58px;
}
.screen-chart i:nth-child(4) {
height: 92px;
.overlay-grid span {
display: inline-flex;
min-height: 36px;
align-items: center;
justify-content: center;
padding: 0 10px;
color: rgba(255, 255, 255, 0.92);
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 10px;
font-size: 0.84rem;
font-weight: 800;
}
.services-section {
@@ -492,6 +446,10 @@ h2 {
min-height: 390px;
}
.hero-visual img {
min-height: 390px;
}
.services {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -525,24 +483,26 @@ h2 {
.hero-visual {
min-height: auto;
padding: 14px;
border-radius: 22px;
}
.visual-screen {
min-height: 310px;
.hero-visual img {
min-height: 360px;
}
.screen-grid {
grid-template-columns: 1fr;
.visual-overlay {
right: 14px;
bottom: 14px;
left: 14px;
padding: 16px;
}
.screen-grid span {
min-height: 54px;
.overlay-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.screen-chart {
display: none;
.overlay-grid span {
min-height: 34px;
}
.services {