feat(mobile): 添加移动端产品页视觉内容并调整布局间距

- 在移动端产品页添加视频区域、标题、按钮和透视网格背景
- 将移动端布局主内容区顶部内边距从54px减少至44px
- 移除原有简单标题结构，替换为包含中英文标题、副标题和联系按钮的完整视觉区域
- 添加动态浮动画和无限滚动的网格背景动画以增强视觉效果

app/layouts/mobile.vue

@@ -42,7 +42,7 @@ onBeforeUnmount(() => {
 .mobile-layout-main {
   flex: 1;
   width: 100%;
-  padding: 54px 16px 16px;
+  padding: 44px 16px 16px;
   box-sizing: border-box;
 }
 </style>

app/pages/mobile/products/web.vue

@@ -1,7 +1,27 @@
 <template>
-  <div class="mobile-product">
-    <h1>Web 安全加速</h1>
-  </div>
+  <section class="mb-web">
+    <section class="video-section">
+      <div class="cdn-dg">
+        <NuxtImg class="cdn-bg" src="/images/products/cdn-bg.png" alt="cdn" />
+      </div>
+      <div class="video-title">
+        <p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
+        <h1><span>智能</span>路由/<span>动态</span>优化/<span>实时</span>处理</h1>
+        <div class="video-subtitle">不止于快，更稳更安全，为您的业务保驾护航</div>
+        <div class="video-btn">
+          <span>联系我们</span>
+          <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>
 </template>
 
 <script setup>
@@ -14,13 +34,169 @@ useHead(() => ({
 </script>
 
 <style scoped lang="scss">
-.mobile-product {
-  color: #fff;
-  text-align: center;
-  padding-top: 60px;
+.mb-web {
+  .video-section {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    margin: 0 auto;
+    overflow: hidden;
 
-  h1 {
-    font-size: 24px;
+    .cdn-dg {
+      position: absolute;
+      top: 0;
+      right: -26px;
+      background: url('/images/products/dengg.png') no-repeat center center;
+      background-size: contain;
+      width: 212px;
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+
+      .cdn-bg {
+        position: relative;
+        z-index: 1;
+        animation: float 3s ease-in-out infinite;
+      }
+
+      :deep(img) {
+        width: 140px;
+        height: auto;
+      }
+    }
+
+    @keyframes float {
+
+      0%,
+      100% {
+        transform: translateY(0);
+      }
+
+      50% {
+        transform: translateY(-10px);
+      }
+    }
+
+    .video-title {
+      position: relative;
+      padding-top: 30px;
+      width: 100%;
+      z-index: 3;
+      color: #fff;
+      font-style: normal;
+      display: flex;
+      flex-direction: column;
+
+      h1 {
+        color: #D8D3FF;
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 16px;
+
+        span {
+          color: #997DFF;
+        }
+      }
+
+      .video-subtitle {
+        margin-top: 10px;
+        width: 140px;
+        color: #E2D9FF;
+        font-size: 10px;
+        font-weight: 400;
+        line-height: 14px;
+      }
+
+      .video-text {
+        color: #E2D9FF;
+        font-size: 8px;
+        font-weight: 300;
+        line-height: 8px;
+      }
+
+
+      .video-btn {
+        cursor: pointer;
+        margin-top: 20px;
+        display: flex;
+        box-sizing: border-box;
+        width: 85px;
+        height: 24px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        border-radius: 4px;
+        color: #FFF;
+        font-size: 10px;
+        font-weight: 400;
+        line-height: 14px;
+        background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+      }
+    }
   }
+
+  .perspective-grid-section {
+    width: 100%;
+    height: 100px;
+    overflow: hidden;
+    position: absolute;
+    bottom: 0;
+    background: transparent;
+    perspective: 400px;
+    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) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(22, 24, 75, 0.5) 1px, transparent 1px);
+      background-size: 50px 50px;
+      animation: gridMove 4s linear infinite;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100px;
+      background: linear-gradient(to bottom, transparent 0%, #030014 100%);
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  @keyframes gridMove {
+    0% {
+      transform: translateY(-50%);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+
 }
 </style>