feat(web): 添加透视网格效果并调整页面布局

- 在视频区域底部添加透视网格动画背景
- 调整视频区域高度和顶部间距
- 修复元素层级关系，确保正确显示顺序
- 移除冗余注释代码，保持代码整洁

app/pages/web/products/sdk.vue

@@ -181,7 +181,7 @@ useHead(() => ({
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 50px;
+  margin-top: 150px;
   position: relative;
 
   h2 {

app/pages/web/products/web.vue

@@ -14,7 +14,18 @@
           <Icon name="line-md:chevron-right" />
         </div>
       </div>
+      <section class="perspective-grid-section">
+        <div class="perspective-container">
+          <div class="grid-floor">
+            <div class="grid-lines"></div>
+          </div>
+        </div>
+      </section>
     </section>
+
+    <!-- 透视网格效果 -->
+
+
     <section class="cdn-container">
       <div class="cdn-title">
         <h2>
@@ -120,7 +131,7 @@ const cards = [
 .video-section {
   position: relative;
   width: 100%;
-  height: 800px;
+  height: 700px;
   margin: 0 auto;
   overflow: hidden;
 
@@ -147,7 +158,7 @@ const cards = [
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 0;
+    z-index: 1;
 
     .cdn-bg {
       position: relative;
@@ -157,9 +168,12 @@ const cards = [
   }
 
   @keyframes float {
-    0%, 100% {
+
+    0%,
+    100% {
       transform: translateY(0);
     }
+
     50% {
       transform: translateY(-20px);
     }
@@ -236,6 +250,7 @@ const cards = [
 }
 
 .cdn-container {
+  margin-top: 20px;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -339,33 +354,6 @@ const cards = [
   }
 }
 
-// .cdn-bg {
-//   width: 100%;
-//   position: relative;
-
-//   &::before {
-//     position: absolute;
-//     content: "678CDN 特性";
-//     bottom: 42px;
-//     left: 50%;
-//     transform: translate(-50%);
-//     background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
-//     background-clip: text;
-//     -webkit-background-clip: text;
-//     -webkit-text-fill-color: transparent;
-//     font-size: 45px;
-//     font-style: normal;
-//     font-weight: 500;
-//     line-height: 45px;
-//   }
-
-//   :deep(img) {
-//     width: 100%;
-//     height: auto;
-//     display: block;
-//     object-fit: cover;
-//   }
-// }
 
 .cdn-cards {
   padding: 30px 0 50px 0;
@@ -420,10 +408,81 @@ const cards = [
   }
 }
 
+// 透视网格效果
+.perspective-grid-section {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  background: transparent;
+  perspective: 600px;
+  z-index: 0;
+
+  .perspective-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    transform-style: preserve-3d;
+  }
+
+  .grid-floor {
+    width: 200%;
+    height: 400px;
+    position: relative;
+    transform: rotateX(60deg);
+    transform-origin: center top;
+    overflow: hidden;
+  }
+
+  .grid-lines {
+    width: 100%;
+    height: 200%;
+    background-image:
+      linear-gradient(rgba(22, 24, 75, 0.5) 3px, transparent 3px),
+      linear-gradient(90deg, rgba(22, 24, 75, 0.5) 3px, transparent 3px);
+    background-size: 100px 100px;
+    animation: gridMove 4s linear infinite;
+  }
+}
+
+  .grid-floor {
+    width: 200%;
+    height: 400px;
+    position: relative;
+    transform: rotateX(60deg);
+    transform-origin: center top;
+    overflow: hidden;
+  }
+
+  .grid-lines {
+    width: 100%;
+    height: 200%;
+    background-image:
+      linear-gradient(rgba(124, 77, 255, 0.3) 2px, transparent 2px),
+      linear-gradient(90deg, rgba(124, 77, 255, 0.3) 2px, transparent 2px);
+    background-size: 50px 50px;
+    animation: gridMove 4s linear infinite;
+  }
+
+
+@keyframes gridMove {
+  0% {
+    transform: translateY(-50%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
 .bg-img {
   width: 100%;
   height: 450px;
   position: relative;
+  z-index: 1;
 
   :deep(img) {
     width: 100%;