feat: boost

app/components/Footer.vue

@@ -139,9 +139,10 @@
   min-height: 783px;
 
   .footer-container {
-    max-width: 1920px;
+    width: 100%;
+    max-width: 1200px;
     margin: 0 auto;
-    padding: 0 360px;
+    padding: 0 20px;
     box-sizing: border-box;
 
     .footer-brand {

app/components/ParticlesCanvas.vue

@@ -24,8 +24,8 @@ const initParticles = (width, height) => {
       y: centerY + Math.sin(angle) * distance,
       targetX: centerX,
       targetY: centerY,
-      speed: 0.3 + Math.random() * 0.5,
-      size: 1 + Math.random() * 1,
+      speed: 1.0 + Math.random() * 1.2,
+      size: 2 + Math.random() * 1,
       opacity: 0.3 + Math.random() * 0.7
     })
   }

app/components/PlansSection.vue

@@ -80,7 +80,7 @@
 .plans-section {
   width: 100%;
   max-width: 1200px;
-  margin: -10% auto 0;
+  margin: 0 auto 0;
   position: relative;
   padding: 0 20px;
   box-sizing: border-box;

app/components/home/StatsSection.vue

@@ -56,11 +56,17 @@ const formatNumber = (num) => {
 .stats-bg-wrapper {
   position: relative;
   width: 100%;
+  height: 800px;
 
   .stats-bg {
-    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 1400px;
     height: auto;
-    display: block;
   }
 }
 
@@ -91,13 +97,16 @@ const formatNumber = (num) => {
     top: 40%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
-    width: 226.059px;
-    height: 305.118px;
     object-fit: contain;
     pointer-events: none;
     z-index: 0;
     will-change: transform;
     animation: float 3s ease-in-out infinite;
+
+    :deep(img) {
+      width: 180px;
+      height: auto;
+    }
   }
 
   @keyframes float {
@@ -116,7 +125,7 @@ const formatNumber = (num) => {
 
   .state-other {
     position: absolute;
-    top: 100px;
+    top: 60px;
   }
 
   .stat-item {

app/pages/pc/index.vue

@@ -1,13 +1,9 @@
 <template>
   <section>
-    <!-- 标题区域和视频背景 -->
     <section class="hero-section">
-      <!-- 视频背景 -->
       <video ref="videoRef" class="hero-video-bg" preload="auto" :src="homeVideo" autoplay loop muted playsinline
         @loadedmetadata="onVideoLoaded"></video>
-      <!-- Canvas动画组件 -->
       <ParticlesCanvas class="canvas-overlay" />
-      <!-- 内容 -->
       <div class="hero-content">
         <h2 class="hero-title">您专注业务，我们守护安全&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;再强的攻击,也有攻不破的防线
         </h2>
@@ -51,10 +47,8 @@
         </div>
       </div>
     </section>
-    <!-- TODO 正常访客等... -->
-
     <section class="security-flowchart">
-      <NuxtPicture src="/images/home/flowchart.png" alt="流程" />
+      <NuxtPicture loading="eager" src="/images/home/flowchart.png" alt="流程" />
     </section>
 
     <!-- 助力各行业客户成功 -->
@@ -185,7 +179,6 @@ const videoRef = ref(null)
 const onVideoLoaded = () => {
   if (videoRef.value) {
     videoRef.value.play().catch(() => {
-      // 自动播放失败时静默处理
     })
   }
 }
@@ -215,7 +208,6 @@ useHead(() => ({
   padding: 0;
 }
 
-// 标题区域（视频作为背景）
 .hero-section,
 .bottom-video {
   width: 100%;
@@ -316,7 +308,7 @@ useHead(() => ({
 // 安全洞见标题
 .insight-header {
   width: 313px;
-  margin: 156px auto 0;
+  margin: 100px auto 0;
   display: flex;
   flex-direction: column;
   align-items: center;

app/pages/pc/products/boost.vue

@@ -20,7 +20,6 @@
     <Defense />
     <SecurityServicesSuite />
     <section class="tabs-section">
-      <ParticlesCanvas class="tabs-canvas" />
       <div class="toggle-container">
         <div class="toggle-bg" :class="{ 'right': activeTab === 'defense' }"></div>
         <div class="toggle-option" :class="{ 'active': activeTab === 'accelerate' }" @click="activeTab = 'accelerate'">
@@ -61,6 +60,36 @@
         </transition>
       </div>
     </section>
+    <section class="security-section">
+      <div class="container">
+        <div class="text-content">
+          <h2>安全 可靠 极速</h2>
+          <p class="subtitle">防御与加速，一体两面，同时生效</p>
+          <div class="features-grid">
+            <div class="feature-item">
+              <Icon name="material-symbols:check-circle-outline" />
+              <span>1. 单节点2T 防御</span>
+            </div>
+            <div class="feature-item">
+              <Icon name="material-symbols:check-circle-outline" />
+              <span>2. 近源清洗，攻击止步于千里之外</span>
+            </div>
+            <div class="feature-item">
+              <Icon name="material-symbols:check-circle-outline" />
+              <span>4. 一套架构，双重使命</span>
+            </div>
+            <div class="feature-item">
+              <Icon name="material-symbols:check-circle-outline" />
+              <span>3. 提供真正的「安全加速」</span>
+            </div>
+          </div>
+        </div>
+        <div class="image-content">
+          <video ref="videoRef" class="video" preload="auto" :src="homeVideo" autoplay loop muted playsinline
+            @loadedmetadata="onVideoLoaded"></video>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 <script setup>
@@ -77,7 +106,7 @@ useHead(() => ({
 }))
 import SecurityServicesSuite from '~/components/products/SecurityServicesSuite.vue';
 import Defense from '~/components/products/Defense.vue';
-import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
+import homeVideo from '~/assets/video/suo.mp4'
 
 const activeTab = ref('accelerate')
 
@@ -196,13 +225,6 @@ const activeTab = ref('accelerate')
     z-index: 1;
   }
 
-  .tabs-canvas {
-    position: absolute;
-    height: 200px;
-    top: -10%;
-    left: 50%;
-    transform: translate(-50%);
-  }
 
   .toggle-container {
     position: relative;
@@ -311,4 +333,82 @@ const activeTab = ref('accelerate')
     }
   }
 }
+
+.security-section {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  padding-bottom: 142px;
+
+  .container {
+    width: 100%;
+    max-width: 1200px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    position: relative;
+    z-index: 2;
+  }
+
+  .text-content {
+    box-sizing: border-box;
+    padding-top: 70px;
+    flex: 1;
+    max-width: 600px;
+
+    h2 {
+      color: #FFF;
+      font-size: 45px;
+      font-weight: 400;
+      line-height: 45px;
+    }
+
+    .subtitle {
+      margin-top: 40px;
+      color: #A39DFF;
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+
+    .features-grid {
+      margin-top: 70px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap:30px 0px;
+
+      .feature-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        .iconify {
+          color: #A39DFF;
+          width: 20px;
+          height: 20px;
+        }
+
+        span {
+          color: #FFF;
+          font-size: 20px;
+          font-weight: 400;
+          line-height: 24px;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .image-content {
+    display: flex;
+    justify-content: flex-end;
+    position: relative;
+
+    .video {
+      width: 522px;
+      height: 522px;
+    }
+  }
+}
 </style>