增加服务入口图片卡片

index.html

@@ -62,27 +62,39 @@
 
       <section class="services-section" id="services" aria-labelledby="services-title">
         <div class="section-heading">
+          <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 面板">
+            <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 服务">
+            <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">
+            <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"
           >
+            <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

@@ -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;
+  display: block;
-  min-height: 206px;
+  min-height: 280px;
-  flex-direction: column;
-  padding: 24px;
   overflow: hidden;
-  background: var(--panel);
+  background: #0f1d34;
   border: 1px solid var(--line);
-  border-radius: 18px;
+  border-radius: 20px;
-  box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
+  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;
+  inset: 0;
-  bottom: -34px;
+  z-index: 1;
-  width: 112px;
+  background:
-  height: 112px;
+    linear-gradient(180deg, rgba(8, 21, 44, 0.02) 12%, rgba(8, 21, 44, 0.42) 54%, rgba(8, 21, 44, 0.9) 100%),
-  border-radius: 999px;
+    linear-gradient(135deg, rgba(36, 107, 254, 0.24), transparent 54%);
-  opacity: 0.12;
   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;
+  margin-top: 74px;
-  color: #14233f;
+  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;