feat(homepage): 重构首页布局并优化视觉元素

- 移除静态PNG图标，替换为SVG格式以提高清晰度和性能
- 调整产品选项卡组件样式，优化间距和层级
- 重新组织页面结构，简化安全架构展示区域
- 移除底部视频区域，整合动画效果到主视觉区域
- 更新行业客户展示样式，采用新的卡片设计
- 微调粒子动画参数，增强视觉效果

app/assets/svg/home/icon1.svg

@@ -0,0 +1,8 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 13.5H33L18 4.5L3 13.5Z" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33 31.5H3" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.75 13.5V31.5" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.25 13.5V31.5" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.75 13.5V31.5" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.25 13.5V31.5" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/assets/svg/home/icon2.svg

@@ -0,0 +1,7 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 33C26.2843 33 33 26.2843 33 18C33 9.71572 26.2843 3 18 3C9.71572 3 3 9.71572 3 18C3 26.2843 9.71572 33 18 33Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 18H33" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 33C21.3137 33 24 26.2843 24 18C24 9.71572 21.3137 3 18 3C14.6863 3 12 9.71572 12 18C12 26.2843 14.6863 33 18 33Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.39258 7.60547C10.107 10.3199 13.857 11.9989 17.9991 11.9989C22.1413 11.9989 25.8913 10.3199 28.6058 7.60547" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.6058 28.3934C25.8913 25.6789 22.1413 24 17.9991 24C13.857 24 10.107 25.6789 7.39258 28.3934" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/assets/svg/home/icon3.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9089 27.75C21.7897 29.3054 19.6678 30.4404 18 30.9946C12.75 29.25 3 21.75 3 13.5C3 8.94368 6.69365 5.25 11.25 5.25C14.0402 5.25 16.507 6.63518 18 8.75535C19.493 6.63518 21.9598 5.25 24.75 5.25C29.3063 5.25 33 8.94368 33 13.5C33 14.8099 32.7542 16.1008 32.3197 17.3528" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.25 21.75H23.25L25.5 18.75L27.75 24.75L29.9719 21.75H33" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/assets/svg/home/icon4.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.8313 3.75C24.3045 3.75 25.6988 4.08582 26.9405 4.68455L24.5379 7.07001C23.153 8.44507 23.153 10.6745 24.5379 12.0496C25.9229 13.4246 28.1683 13.4246 29.5533 12.0496L31.6928 9.92527C32.0534 10.9168 32.25 11.9864 32.25 13.1014C32.25 18.266 28.0331 22.4528 22.8313 22.4528C21.5869 22.4528 20.3989 22.2132 19.3115 21.778L9.8025 31.219C8.41785 32.5937 6.17303 32.5937 4.78844 31.219C3.40385 29.8443 3.40385 27.6155 4.78844 26.2408L14.2142 16.8824C13.6988 15.7263 13.4125 14.447 13.4125 13.1014C13.4125 7.93673 17.6294 3.75 22.8313 3.75Z" stroke="white" stroke-width="3" stroke-linejoin="round"/>
+</svg>

app/assets/svg/home/icon5.svg

@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 13.05L17.2666 6.75L33.0333 13.05L17.2666 19.35L1.5 13.05Z" stroke="white" stroke-width="3" stroke-linejoin="round"/>
+<path d="M33.0332 13.1328V20.0502" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.66602 16.3672V25.6982C8.66602 25.6982 12.2736 29.2482 17.266 29.2482C22.2585 29.2482 25.8661 25.6982 25.8661 25.6982V16.3672" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/components/ParticlesCanvas.vue

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

app/components/home/ProductTabs.vue

@@ -111,6 +111,7 @@ const currentLayout = computed(() => {
 <style scoped lang="scss">
 .product-tabs-container {
   width: 100%;
+  margin-bottom: 120px;
 }
 
 .product-tabs {
@@ -160,10 +161,12 @@ const currentLayout = computed(() => {
 }
 
 .product-cards-wrapper {
-  width: 100%;
+  position: relative;
+  width: 80%;
   max-width: 1200px;
-  margin: 20px auto 0;
+  margin: 10px auto 0;
   box-sizing: border-box;
+  z-index: 1;
 }
 
 .product-cards {

app/pages/web/index.vue

@@ -16,23 +16,19 @@
     <ProductTabs />
 
     <!-- 安全洞见标题 -->
-    <section class="insight-header">
-      <h2 class="insight-title">安全洞见&nbsp;&nbsp;&nbsp;全网感知</h2>
-      <p class="insight-subtitle">实时攻防态势数据</p>
-    </section>
 
     <!-- 数据展示区域 -->
-    <StatsSection />
+    <!-- <StatsSection /> -->
 
     <!-- 安全运营与方案模块 -->
     <PlansSection />
 
     <!-- 安全漏洞 / 全景技术架构上方模块 -->
     <section class="security-arch-section">
-      <NuxtImg alt="安全架构" src="/images/home/home-bg2.png" class="security-arch-img" />
+      <!-- <NuxtImg alt="安全架构" src="/images/home/home-bg2.png" class="security-arch-img" />
       <div class="security-arch-animate">
         <SecurityParticles />
-      </div>
+      </div> -->
       <div class="security-arch-desc">
         <h3 class="security-arch-title">
           全景技术架构，让技术成为增长引擎
@@ -51,112 +47,92 @@
       <Flowchart />
     </section>
 
+    <section class="insight-header">
+      <h2 class="insight-title">安全洞见&nbsp;&nbsp;&nbsp;全网感知</h2>
+      <p class="insight-subtitle">实时攻防态势数据</p>
+    </section>
+
     <!-- 助力各行业客户成功 -->
     <section class="cain-section">
-      <NuxtImg alt="助力各行业客户成功" src="/images/home/home-bg3.png" class="cain-section-img" />
-      <div class="cain-section-animate">
-        <SecurityParticles />
-      </div>
-      <div class="cain-section-desc">
-        <h3 class="cain-section-title">
-          助力各行业客户成功
-        </h3>
-      </div>
+      <h3 class="cain-section-title">
+        助力各行业客户成功
+      </h3>
     </section>
     <section class="industry">
       <div class="industry-content">
         <div class="industry-item">
+          <img src="~/assets/svg/home/icon1.svg" alt="icon">
           <div class="industry-text">金融</div>
-          <NuxtImg src="/images/home/icon.png" alt="金融" class="industry-icon" />
         </div>
         <div class="industry-item">
+          <img src="~/assets/svg/home/icon2.svg" alt="icon">
           <div class="industry-text">互联网</div>
-          <NuxtImg src="/images/home/icon2.png" alt="互联网" class="industry-icon" />
         </div>
         <div class="industry-item">
+          <img src="~/assets/svg/home/icon3.svg" alt="icon">
           <div class="industry-text">医疗健康</div>
-          <NuxtImg src="/images/home/icon3.png" alt="医疗健康" class="industry-icon" />
         </div>
         <div class="industry-item">
+          <img src="~/assets/svg/home/icon4.svg" alt="icon">
           <div class="industry-text">制造</div>
-          <NuxtImg src="/images/home/icon4.png" alt="制造" class="industry-icon" />
         </div>
         <div class="industry-item">
+          <img src="~/assets/svg/home/icon5.svg" alt="icon">
           <div class="industry-text">教育</div>
-          <NuxtImg src="/images/home/icon5.png" alt="教育" class="industry-icon" />
         </div>
       </div>
       <div class="industry-other">
         <div class="other-item">
-          <NuxtImg src="/images/home/icon6.png" alt="卓越教育" />
+          <NuxtImg width="172" src="/images/home/icon6.png" alt="卓越教育" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon7.png" alt="华福证券" />
+          <NuxtImg width="178" src="/images/home/icon7.png" alt="华福证券" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon8.png" alt="汉王" />
+          <NuxtImg width="178" src="/images/home/icon8.png" alt="汉王" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon9.png" alt="隧道股份" />
+          <NuxtImg width="178" src="/images/home/icon9.png" alt="隧道股份" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon10.png" alt="岳阳医院" />
+          <NuxtImg width="102" src="/images/home/icon10.png" alt="岳阳医院" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon11.png" alt="杉德" />
+          <NuxtImg width="120" src="/images/home/icon11.png" alt="杉德" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon12.png" alt="易班" />
+          <NuxtImg width="154" src="/images/home/icon12.png" alt="易班" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon13.png" alt="银联商务" />
+          <NuxtImg width="164" src="/images/home/icon13.png" alt="银联商务" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon14.png" alt="长海医院" />
+          <NuxtImg width="164" src="/images/home/icon14.png" alt="长海医院" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon15.png" alt="斗象科技" />
+          <NuxtImg width="102" src="/images/home/icon15.png" alt="斗象科技" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon16.png" alt="瑞金" />
+          <NuxtImg width="72" src="/images/home/icon16.png" alt="瑞金" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon17.png" alt="3L" />
+          <NuxtImg width="84" src="/images/home/icon17.png" alt="3L" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon18.png" alt="宝付" />
+          <NuxtImg width="138" src="/images/home/icon18.png" alt="宝付" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon19.png" alt="新华医院" />
+          <NuxtImg width="66" src="/images/home/icon19.png" alt="新华医院" />
         </div>
         <div class="other-item">
-          <NuxtImg src="/images/home/icon20.png" alt="中船重工物贸集团" />
-        </div>
-      </div>
-      <div class="industry-box">
-        <div class="industry-radar">
-          <NuxtImg src="/images/home/home-bg4.png" alt="radar" class="radar-bg-img" />
-          <div class="radar-dots">
-            <span class="radar-dot radar-dot-1" />
-            <span class="radar-dot radar-dot-2" />
-            <span class="radar-dot radar-dot-3" />
-            <span class="radar-dot radar-dot-4" />
-          </div>
+          <NuxtImg width="180" src="/images/home/icon20.png" alt="中船重工物贸集团" />
         </div>
-        <img src="~/assets/svg/home/protect.svg" alt="防护箱" class="box-icon" />
       </div>
       <div class="industry-title">
         <h3><span>立即加入</span> <span>安全之旅</span></h3>
         <div class="industry-subtitle">完成注册，即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
       </div>
     </section>
-    <section class="bottom-video">
-      <!-- 视频背景 -->
-      <video ref="videoRef" style="clip-path: inset(0 0 50% 0);" class="hero-video-bg" src="~/assets/video/home.webm"
-        autoplay loop muted playsinline @loadedmetadata="onVideoLoaded"></video>
-      <!-- Canvas动画组件 -->
-      <ParticlesCanvas class="canvas-overlay" />
-    </section>
   </section>
 </template>
 
@@ -166,11 +142,11 @@ definePageMeta({
 })
 
 import { ref } from 'vue'
-import StatsSection from '~/components/home/StatsSection.vue'
+// import StatsSection from '~/components/home/StatsSection.vue'
 import ProductTabs from '~/components/home/ProductTabs.vue'
 import PlansSection from '~/components/PlansSection.vue'
 import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
-import SecurityParticles from '~/components/SecurityParticles.vue'
+// import SecurityParticles from '~/components/SecurityParticles.vue'
 import homeVideo from '~/assets/video/home.webm'
 import Flowchart from '~/components/home/Flowchart.vue'
 
@@ -206,8 +182,7 @@ useHead(() => ({
   padding: 0;
 }
 
-.hero-section,
-.bottom-video {
+.hero-section {
   width: 100%;
   height: 497px;
   position: relative;
@@ -218,12 +193,12 @@ useHead(() => ({
 
   .hero-video-bg {
     position: absolute;
-    top: 32%;
+    top: -10%;
     left: 50%;
-    width: 1200px;
+    width: 100%;
     transform: translate(-50%);
     object-fit: cover;
-    clip-path: inset(0 0 40% 0);
+    clip-path: inset(0 0 0% 0);
     z-index: 0;
   }
 
@@ -291,18 +266,6 @@ useHead(() => ({
   }
 }
 
-.bottom-video {
-  height: 352px;
-
-  .hero-video-bg {
-    top: 4%;
-  }
-
-  .canvas-overlay {
-    top: 50%;
-  }
-}
-
 // 安全洞见标题
 .insight-header {
   width: 313px;
@@ -336,59 +299,30 @@ useHead(() => ({
 // 安全架构展示（到全景技术架构上方）
 .security-arch-section {
   position: relative;
-  padding-top: 496px;
+  padding-top: 120px;
   padding-bottom: 60px;
   box-sizing: border-box;
 
-  .security-arch-img {
-    left: 50%;
-    position: absolute;
-    top: 56px;
-    transform: translate(-50%);
-    height: 700px;
-    width: 806px;
-  }
-
-  .security-arch-animate {
-    height: 212px;
-    left: 50%;
-    mask-size: cover;
-    position: absolute;
-    top: 234px;
-    transform: translate(-50%);
-    width: 750px;
-    opacity: .7;
-    pointer-events: none;
-  }
-
   .security-arch-desc {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     color: #fff;
-    position: absolute;
-    left: 50%;
-    top: 500px;
-    transform: translate(-50%, -50%);
+    gap: 30px;
 
     .security-arch-title {
-      font-size: 40px;
+      font-size: 45px;
       font-style: normal;
       font-weight: 400;
-      line-height: 40px;
-      margin: 0 auto;
-      text-align: center;
-
-
+      line-height: 36px;
     }
 
     .security-arch-subtitle {
-      margin-top: 20px;
-      color: rgba(255, 255, 255, 0.80);
-      font-size: 18px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 24px;
-      white-space: normal;
-      word-break: break-word;
+      color: #A39DFF;
       text-align: center;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 30px;
     }
   }
 }
@@ -400,49 +334,20 @@ useHead(() => ({
   margin-top: 40px;
 }
 
-//彩虹部分
 .cain-section {
-  position: relative;
-  padding-top: 380px;
+  width: 100%;
+  text-align: center;
+  padding-top: 120px;
+  padding-bottom: 60px;
   box-sizing: border-box;
 
-  .cain-section-img {
-    left: 50%;
-    position: absolute;
-    top: 0;
-    transform: translate(-50%);
-    height: 400px;
-    width: 1200px;
-  }
-
-  .cain-section-animate {
-    height: 212px;
-    left: 50%;
-    mask-size: cover;
-    position: absolute;
-    top: 10%;
-    transform: translate(-50%);
-    width: 750px;
-    opacity: .7;
-    pointer-events: none;
-  }
-
-  .cain-section-desc {
-    position: absolute;
-    left: 50%;
-    top: 80%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    text-align: center;
-
-    .cain-section-title {
-      font-size: 45px;
-      color: #ffffff;
-      font-weight: 400;
-    }
+  .cain-section-title {
+    color: #FFF;
+    font-size: 45px;
+    font-weight: 400;
+    line-height: 36px;
   }
 
-
 }
 
 $Diameter :890px;
@@ -452,7 +357,7 @@ $Diameter :890px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 40px;
+  gap: 20px;
   z-index: 2;
 
   .industry-content {
@@ -462,25 +367,23 @@ $Diameter :890px;
 
   .industry-item {
     display: flex;
-    justify-content: space-between;
-    width: 240px;
+    width: 220px;
     height: 100px;
-    border-radius: 10px;
-    background: linear-gradient(118deg, #C9C5FF -25.53%, #5704FF 110.12%);
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px;
+    border: 1px solid #C6BAFF;
+    background: linear-gradient(169deg, rgba(101, 70, 255, 0.60) -37.16%, rgba(101, 70, 255, 0.10) 193.82%);
+    backdrop-filter: blur(1px);
+    gap: 20px;
   }
 
-  .industry-icon {
-    width: 150px;
-    height: 100px;
-  }
 
   .industry-text {
-    padding: 16px 0 0 16px;
-
-    font-size: 18px;
+    color: #FFF;
+    font-size: 30px;
     font-weight: 400;
-    line-height: 18px;
-    color: #fff;
+    line-height: 30px;
   }
 
   .industry-other {
@@ -494,7 +397,7 @@ $Diameter :890px;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 240px;
+    width: 220px;
     height: 100px;
     border-radius: 10px;
     border: 1px solid #B2A1FF;
@@ -526,144 +429,5 @@ $Diameter :890px;
     }
   }
 
-  .industry-box,
-  .industry-radar {
-    position: relative;
-    width: $Diameter;
-    height: calc($Diameter / 2);
-  }
-
-  .industry-radar {
-    overflow: hidden;
-  }
-
-  .radar-bg-img {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translateX(-50%);
-    width: 100%;
-    height: $Diameter;
-    object-fit: contain;
-    object-position: center top;
-    opacity: 0.95;
-    z-index: 1;
-  }
-
-  .industry-radar::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: $Diameter;
-    height: $Diameter;
-    border-radius: 50%;
-    transform-origin: 50%;
-    background: conic-gradient(from 0deg at center,
-        rgba(99, 102, 241, 0) 0deg,
-        rgba(99, 102, 241, 0.05) 10deg,
-        rgba(99, 102, 241, 0.1) 20deg,
-        rgba(99, 102, 241, 0.2) 25deg,
-        rgba(99, 102, 241, 0.3) 28deg,
-        rgba(99, 102, 241, 0.4) 30deg,
-        transparent 30deg 360deg);
-    filter: blur(1px);
-    animation: radarScan 6s linear infinite;
-    z-index: 2;
-    opacity: 0.7;
-  }
-
-  .industry-box::before {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 100%;
-    transform: translate(-50%, -50%);
-    width: 64px;
-    height: 64px;
-    background: linear-gradient(114deg, #C9C5FF -44.49%, #5704FF 140.15%);
-    stroke: #AE80FF;
-    border-radius: 50%;
-    z-index: 3;
-  }
-
-  .box-icon {
-    position: absolute;
-    left: 50%;
-    top: 100%;
-    width: 32px;
-    height: 32px;
-    transform: translate(-50%, -50%);
-    z-index: 4;
-  }
-
-  .radar-dots {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    z-index: 4;
-  }
-
-  .radar-dot {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: rgba(99, 102, 241, 0.8);
-    box-shadow: 0 0 8px rgba(99, 102, 241, 0.8);
-  }
-
-  .radar-dot-1 {
-    left: 45%;
-    top: 35%;
-    animation: radarBlink 1.5s ease-in-out infinite;
-  }
-
-  .radar-dot-2 {
-    left: 60%;
-    top: 62%;
-    animation: radarBlink 1.5s ease-in-out infinite 0.375s;
-  }
-
-  .radar-dot-3 {
-    left: 30%;
-    top: 66%;
-    animation: radarBlink 1.5s ease-in-out infinite 0.75s;
-  }
-
-  .radar-dot-4 {
-    left: 70%;
-    top: 35%;
-    animation: radarBlink 1.5s ease-in-out infinite 1.125s;
-  }
-}
-
-@keyframes radarScan {
-  0% {
-    transform: rotateZ(0deg);
-  }
-
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-
-@keyframes radarBlink {
-  0% {
-    transform: scale(0.6);
-    opacity: 0.2;
-  }
-
-  50% {
-    transform: scale(1.2);
-    opacity: 1;
-  }
-
-  100% {
-    transform: scale(0.6);
-    opacity: 0.2;
-  }
 }
 </style>