优化首页视觉照片

index.html

@@ -44,27 +44,17 @@
         </div>
 
         <aside class="hero-visual" aria-label="服务概览">
-          <div class="visual-topbar">
+          <img src="assets/workspace-hero.jpg" alt="整洁的现代桌面工作区，包含笔记本电脑和办公设备" />
-            <span></span>
+          <div class="visual-overlay">
-            <span></span>
+            <div class="overlay-heading">
-            <span></span>
+              <span>Service Gateway</span>
-          </div>
-          <div class="visual-screen">
-            <div class="screen-heading">
-              <span>Service Console</span>
               <strong>Online</strong>
             </div>
-            <div class="screen-grid" aria-hidden="true">
+            <div class="overlay-grid" aria-label="可用服务">
-              <span></span>
+              <span>FRP</span>
-              <span></span>
+              <span>Git</span>
-              <span></span>
+              <span>Sync</span>
-              <span></span>
+              <span>Gemini</span>
-            </div>
-            <div class="screen-chart" aria-hidden="true">
-              <i></i>
-              <i></i>
-              <i></i>
-              <i></i>
             </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

@@ -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;
+  inset: 0;
-  width: 190px;
+  background:
-  height: 190px;
+    linear-gradient(90deg, rgba(9, 34, 74, 0.38), rgba(9, 34, 74, 0.02) 58%),
-  background: linear-gradient(135deg, rgba(36, 107, 254, 0.16), rgba(25, 185, 130, 0.12));
+    linear-gradient(180deg, transparent 48%, rgba(6, 24, 56, 0.42));
-  border-radius: 999px;
   content: "";
 }
 
-.visual-topbar {
+.hero-visual img {
-  display: flex;
+  display: block;
-  gap: 8px;
+  width: 100%;
-  padding: 10px 8px 18px;
+  height: 100%;
+  min-height: 460px;
+  object-fit: cover;
 }
 
-.visual-topbar span {
+.visual-overlay {
-  width: 10px;
+  position: absolute;
-  height: 10px;
+  right: 24px;
-  background: #d5dfef;
+  bottom: 24px;
-  border-radius: 999px;
+  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 {
+.overlay-heading {
-  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 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 28px;
+  margin-bottom: 16px;
-  color: #4e607b;
+  color: rgba(255, 255, 255, 0.82);
   font-weight: 780;
 }
 
-.screen-heading strong {
+.overlay-heading strong {
-  color: var(--green);
+  color: #48f0aa;
 }
 
-.screen-grid {
+.overlay-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(4, 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;
   gap: 10px;
-  height: 96px;
 }
 
-.screen-chart i {
+.overlay-grid span {
-  display: block;
+  display: inline-flex;
-  width: 18px;
+  min-height: 36px;
-  background: linear-gradient(180deg, #74a5ff, var(--blue));
+  align-items: center;
-  border-radius: 999px 999px 6px 6px;
+  justify-content: center;
-}
+  padding: 0 10px;
-
+  color: rgba(255, 255, 255, 0.92);
-.screen-chart i:nth-child(1) {
+  background: rgba(255, 255, 255, 0.14);
-  height: 42px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
-}
+  border-radius: 10px;
-
+  font-size: 0.84rem;
-.screen-chart i:nth-child(2) {
+  font-weight: 800;
-  height: 72px;
-}
-
-.screen-chart i:nth-child(3) {
-  height: 58px;
-}
-
-.screen-chart i:nth-child(4) {
-  height: 92px;
 }
 
 .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 {
+  .hero-visual img {
-    min-height: 310px;
+    min-height: 360px;
   }
 
-  .screen-grid {
+  .visual-overlay {
-    grid-template-columns: 1fr;
+    right: 14px;
+    bottom: 14px;
+    left: 14px;
+    padding: 16px;
   }
 
-  .screen-grid span {
+  .overlay-grid {
-    min-height: 54px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .screen-chart {
+  .overlay-grid span {
-    display: none;
+    min-height: 34px;
   }
 
   .services {