风大四发

css/index.css

@@ -482,21 +482,94 @@
   }
 }
 
-/* Banner下方快速入口卡片 - 统一深色玻璃态设计 */
+/* Banner下方快速入口卡片 - 独立毛玻璃卡片设计 */
 .banner .banner-s {
   margin-top: -80px;
   position: relative;
   z-index: 10;
+  padding: 30px 0;
+  /* 移除整体背景，让卡片独立显示 */
+  background: transparent;
+}
+
+.banner .banner-s .banner-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  padding: 0 20px;
+}
+
+/* 独立毛玻璃卡片样式 */
+.banner-s .banner-list .banner-item {
+  flex: 0 1 calc(25% - 20px);
+  min-width: 260px;
+  max-width: 320px;
+  cursor: pointer;
+  padding: 32px 28px;
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* 毛玻璃效果 */
+  background: rgba(15, 23, 42, 0.6);
   backdrop-filter: blur(20px);
-  /* 统一深色玻璃态，与上下背景融合 */
-  background:
-    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
-    rgba(15, 23, 42, 0.85);
+  -webkit-backdrop-filter: blur(20px);
+
+  /* 边框和圆角 */
   border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 16px;
+
+  /* 阴影效果 */
   box-shadow:
-    0 8px 32px rgba(15, 23, 42, 0.5),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  border-radius: 0;  /* 移除圆角 */
+    0 8px 32px rgba(15, 23, 42, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+
+  /* 内部发光 */
+  overflow: hidden;
+}
+
+/* 卡片光晕装饰 */
+.banner-s .banner-list .banner-item::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    circle at center,
+    rgba(56, 189, 248, 0.15) 0%,
+    transparent 50%
+  );
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+/* 悬浮效果 */
+.banner-s .banner-list .banner-item:hover {
+  transform: translateY(-12px);
+  border-color: rgba(56, 189, 248, 0.4);
+  background: rgba(15, 23, 42, 0.8);
+  box-shadow:
+    0 20px 60px rgba(56, 189, 248, 0.3),
+    0 0 40px rgba(56, 189, 248, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.banner-s .banner-list .banner-item:hover::before {
+  opacity: 1;
+}
+
+.banner-s .banner-list .banner-item:hover h5 {
+  color: #38BDF8;
+  text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+  transform: translateX(5px);
+}
+
+/* 移除分隔线 */
+.banner-s .banner-list .banner-item::after {
+  display: none;
 }
 
 /* ============================================
@@ -674,49 +747,22 @@
   box-shadow: 0 8px 20px rgba(56, 189, 248, 0.4);
 }
 
-.banner .banner-s .banner-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0 !important;  /* 移除额外的 padding，使用 section-content 的统一边距 */
-}
-
-.banner-s .banner-list .banner-item {
-  flex: 1;
-  cursor: pointer;
-  width: 335px;
-  padding: 24px 50px;
-  position: relative;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 16px;
-}
-
-/* 分隔线效果 */
-.banner-s .banner-list .banner-item:not(:last-child)::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 20%;
-  height: 60%;
-  width: 1px;
-  background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.2), transparent);
-}
-
-
-.banner-s .banner-list .banner-item h5 {
+.banner .banner-s .banner-list .banner-item h5 {
   color: #F9FAFB;
   font-size: 20px;
   font-weight: 600;
   transition: all 0.3s ease;
+  margin-bottom: 0;
 }
 
 /* banner-item 标题中的重点色 */
-.banner-s .banner-list .banner-item h5 .highlight {
+.banner .banner-s .banner-list .banner-item h5 .highlight {
   color: #38BDF8;
   font-weight: 700;
   text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
 }
 
-.banner-s .banner-list .banner-item .title-desc {
+.banner .banner-s .banner-list .banner-item .title-desc {
   color: rgba(203, 213, 225, 0.8);
   font-size: 13px;
   line-height: 1.6;
@@ -1728,8 +1774,14 @@ html {
   }
   */
 
+  .banner-s .banner-list {
+    gap: 16px;
+    padding: 0 16px;
+  }
+
   .banner-s .banner-list .banner-item {
-    padding: 30px 40px;
+    flex: 0 1 calc(50% - 16px);
+    padding: 28px 32px;
   }
 
   .section-title h2 {
@@ -1786,11 +1838,14 @@ html {
 
   .banner-s .banner-list {
     flex-direction: column;
+    gap: 12px;
   }
 
   .banner-s .banner-list .banner-item {
+    flex: 1 1 100%;
     width: 100%;
-    padding: 24px 30px;
+    max-width: 100%;
+    padding: 24px 28px;
   }
 
   .banner-s .banner-list .banner-item:not(:last-child)::after {
@@ -1927,7 +1982,7 @@ html {
   }
 
   .banner-s .banner-list .banner-item {
-    padding: 20px 24px;
+    padding: 22px 24px;
   }
 
   .banner-s .banner-list .banner-item h5 {