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:19:23 +08:00
parent e9d8c72172
commit 105ec0e6d1
5 changed files with 100 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/service-frp.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 359 KiB

assets/service-gemini.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 KiB

assets/service-git.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

index.html
+29 -14
View File
@@ -62,27 +62,39 @@
<section class="services-section" id="services" aria-labelledby="services-title">
<div class="section-heading">
<p class="eyebrow">Quick Access</p>
<h2 id="services-title">常用服务</h2>
<div>
<p class="eyebrow">Quick Access</p>
<h2 id="services-title">常用服务</h2>
</div>
<p class="section-note">像游戏门户一样把入口做成清晰的视觉卡片，看到就能点。</p>
</div>
<div class="services">
<a class="service-card accent-blue" href="/frp/" aria-label="进入 FRP 面板">
<span class="service-icon">FRP</span>
<span class="service-title">FRP 面板</span>
<span class="service-desc">内网穿透管理</span>
<img src="assets/service-frp.jpg" alt="" loading="lazy" />
<span class="service-content">
<span class="service-icon">FRP</span>
<span class="service-title">FRP 面板</span>
<span class="service-desc">内网穿透管理</span>
</span>
</a>
<a class="service-card accent-green" href="/git/" aria-label="进入 Git 服务">
<span class="service-icon">Git</span>
<span class="service-title">Git 服务</span>
<span class="service-desc">代码仓库</span>
<img src="assets/service-git.jpg" alt="" loading="lazy" />
<span class="service-content">
<span class="service-icon">Git</span>
<span class="service-title">Git 服务</span>
<span class="service-desc">代码仓库</span>
</span>
</a>
<a class="service-card accent-orange" href="/sync/" aria-label="进入 Syncthing">
<span class="service-icon">Sync</span>
<span class="service-title">Syncthing</span>
<span class="service-desc">文件同步</span>
<img src="assets/workspace-hero.jpg" alt="" loading="lazy" />
<span class="service-content">
<span class="service-icon">Sync</span>
<span class="service-title">Syncthing</span>
<span class="service-desc">文件同步</span>
</span>
</a>
<a
@@ -92,9 +104,12 @@
rel="noreferrer"
aria-label="打开 Gemini"
>
<span class="service-icon">AI</span>
<span class="service-title">Gemini</span>
<span class="service-desc">Google AI 助手</span>
<img src="assets/service-gemini.jpg" alt="" loading="lazy" />
<span class="service-content">
<span class="service-icon">AI</span>
<span class="service-title">Gemini</span>
<span class="service-desc">Google AI 助手</span>
</span>
</a>
</div>
</section>
styles.css
+71 -45
View File
@@ -313,6 +313,14 @@ h1 {
margin-bottom: 22px;
}
.section-note {
max-width: 420px;
margin-bottom: 0;
color: var(--muted);
line-height: 1.7;
text-align: right;
}
h2 {
margin-bottom: 0;
font-size: clamp(1.9rem, 3vw, 3rem);
@@ -323,45 +331,69 @@ h2 {
.services {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
gap: 20px;
}
.service-card {
position: relative;
display: flex;
min-height: 206px;
flex-direction: column;
padding: 24px;
display: block;
min-height: 280px;
overflow: hidden;
background: var(--panel);
background: #0f1d34;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
border-radius: 20px;
box-shadow: 0 18px 42px rgba(38, 57, 96, 0.16);
transition:
transform 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
.service-card::after {
.service-card::before {
position: absolute;
right: -34px;
bottom: -34px;
width: 112px;
height: 112px;
border-radius: 999px;
opacity: 0.12;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(8, 21, 44, 0.02) 12%, rgba(8, 21, 44, 0.42) 54%, rgba(8, 21, 44, 0.9) 100%),
linear-gradient(135deg, rgba(36, 107, 254, 0.24), transparent 54%);
content: "";
transition: opacity 180ms ease;
}
.service-card:hover,
.service-card:focus-visible {
transform: translateY(-6px);
transform: translateY(-8px);
border-color: rgba(36, 107, 254, 0.28);
box-shadow: 0 22px 52px rgba(57, 83, 132, 0.16);
box-shadow: 0 28px 62px rgba(38, 57, 96, 0.2);
outline: none;
}
.service-card:hover img,
.service-card:focus-visible img {
transform: scale(1.06);
}
.service-card img {
display: block;
width: 100%;
height: 100%;
min-height: 280px;
object-fit: cover;
transition: transform 260ms ease;
}
.service-content {
position: absolute;
inset: auto 0 0;
z-index: 2;
display: flex;
min-height: 55%;
flex-direction: column;
justify-content: flex-end;
padding: 22px;
color: #fff;
}
.service-icon {
display: inline-flex;
width: fit-content;
@@ -371,49 +403,29 @@ h2 {
justify-content: center;
padding: 0 12px;
margin-bottom: auto;
border-radius: 10px;
color: #fff;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
font-size: 0.82rem;
font-weight: 900;
backdrop-filter: blur(12px);
}
.service-title {
margin-top: 42px;
color: #14233f;
margin-top: 74px;
color: #fff;
font-size: 1.18rem;
font-weight: 900;
}
.service-desc {
margin-top: 8px;
color: var(--muted);
color: rgba(255, 255, 255, 0.78);
font-size: 0.94rem;
line-height: 1.55;
}
.accent-blue .service-icon,
.accent-blue::after {
color: var(--blue);
background: rgba(36, 107, 254, 0.1);
}
.accent-green .service-icon,
.accent-green::after {
color: var(--green);
background: rgba(25, 185, 130, 0.12);
}
.accent-orange .service-icon,
.accent-orange::after {
color: var(--orange);
background: rgba(255, 138, 61, 0.12);
}
.accent-purple .service-icon,
.accent-purple::after {
color: var(--purple);
background: rgba(120, 100, 246, 0.12);
}
.record {
justify-content: center;
gap: 16px;
@@ -453,6 +465,15 @@ h2 {
.services {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section-heading {
align-items: flex-start;
flex-direction: column;
}
.section-note {
text-align: left;
}
}
@media (max-width: 560px) {
@@ -509,6 +530,11 @@ h2 {
grid-template-columns: 1fr;
}
.service-card,
.service-card img {
min-height: 230px;
}
.record {
align-items: center;
flex-direction: column;