feat(homepage): 优化首页视觉效果与布局

- 更新粒子动画速度，增强动态效果
- 为产品卡片区域添加毛玻璃背景和层级调整
- 将统计卡片背景替换为静态图片并移除实时数据绑定
- 优化图表提示框样式，使用CSS渐变背景
- 重构底部注册区域为左右布局，添加注册按钮
- 调整视频背景位置和大小，优化视觉层次
- 移除未使用的安全洞见标题占位符

app/components/ParticlesCanvas.vue

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

app/components/home/ProductTabs.vue

@@ -110,8 +110,11 @@ const currentLayout = computed(() => {
 
 <style scoped lang="scss">
 .product-tabs-container {
+  position: relative;
   width: 100%;
+  margin-top: 60px;
   margin-bottom: 120px;
+  z-index: 2;
 }
 
 .product-tabs {
@@ -167,6 +170,7 @@ const currentLayout = computed(() => {
   margin: 10px auto 0;
   box-sizing: border-box;
   z-index: 1;
+  backdrop-filter: blur(10px);
 }
 
 .product-cards {

app/components/home/ProductTabs/MultiCardLayout.vue

@@ -49,7 +49,7 @@ defineProps({
   padding: 30px 0 35px 0;
 
   .card-title {
-    
+
     font-size: 20px;
     font-weight: 500;
     line-height: 20px;
@@ -74,7 +74,7 @@ defineProps({
     align-items: flex-start;
 
     .feature-tag {
-      
+
       font-size: 14px;
       font-weight: 400;
       line-height: 14px;
@@ -99,7 +99,7 @@ defineProps({
       border-radius: 8px;
       background: linear-gradient(24.74deg, rgba(163, 157, 255, 1) 0%, rgba(125, 70, 255, 1) 100%);
       border: none;
-      
+
       font-size: 14px;
       font-weight: 400;
       color: #ffffff;
@@ -118,7 +118,7 @@ defineProps({
       border: 1px solid rgba(255, 255, 255, 0.5);
       background: rgba(255, 255, 255, 0.2);
       backdrop-filter: blur(15.2px);
-      
+
       font-size: 14px;
       font-weight: 400;
       color: #ffffff;

app/components/home/StatsSection.vue

@@ -57,8 +57,8 @@ import iconDDoS from '~/assets/svg/home/an1.svg'
 import iconCC from '~/assets/svg/home/an2.svg'
 import iconWAF from '~/assets/svg/home/an3.svg'
 
-const statsStore = useStatsStore()
-const { stats } = storeToRefs(statsStore)
+// const statsStore = useStatsStore()
+// const { stats } = storeToRefs(statsStore)
 
 // 格式化数字
 const formatNumber = (num) => {
@@ -67,15 +67,15 @@ const formatNumber = (num) => {
 
 // 统计数据列表
 const statsList = computed(() => [
-  { label: '今日 DDoS 攻击峰值', value: stats.value.ddosPeak, icon: iconDDoS, color: '#7D46FF', background: 'linear-gradient(181deg, rgba(130, 77, 255, 0.60) -50.14%, rgba(164, 125, 255, 0.00) 81.35%)' },
-  { label: '今日 CC 攻击次数', value: stats.value.ccAttacks, icon: iconCC, color: '#6971FF', background: 'linear-gradient(181deg, rgba(164, 169, 255, 0.60) -50.14%, rgba(56, 66, 255, 1.00) 81.35%)' },
-  { label: '今日 WAF 拦截次数', value: stats.value.wafBlocks, icon: iconWAF, color: '#9466FF', background: 'linear-gradient(181deg, rgba(130, 77, 255, 0.60) -50.14%, rgba(164, 125, 255, 0.00) 81.35%)' }
-]) 
+  { label: '今日 DDoS 攻击峰值', value: 22844, icon: iconDDoS, color: '#7D46FF', background: `url('/images/home/card-bg1.png') no-repeat center` },
+  { label: '今日 CC 攻击次数', value: 19009, icon: iconCC, color: '#6971FF', background: `url('/images/home/card-bg2.png') no-repeat center` },
+  { label: '今日 WAF 拦截次数', value: 56870, icon: iconWAF, color: '#9466FF', background: `url('/images/home/card-bg1.png') no-repeat center` }
+])
 
 // 启动自动增长
-onMounted(() => {
-  statsStore.startAutoIncrement()
-})
+// onMounted(() => {
+//   statsStore.startAutoIncrement()
+// })
 
 // 生成 24小时 Mock 数据
 const generateData = () => {
@@ -100,11 +100,13 @@ const chartOption = computed(() => ({
   backgroundColor: 'transparent',
   tooltip: {
     trigger: 'axis',
-    backgroundColor: 'linear-gradient(181deg, rgba(101, 70, 255, 0.40) -42.03%, rgba(101, 70, 255, 0.10) 107.46%)',
-    borderColor: '#C6BAFF',
-    borderRadius: 24,
+    backgroundColor: 'transparent', // 必须设置为透明，否则会覆盖 extraCssText 的背景
+    borderWidth: 0, // 移除默认边框，使用 CSS 处理
+    padding: 0, // 移除内边距，完全由 CSS 控制
+    extraCssText: 'background: linear-gradient(180deg, rgba(101, 70, 255, 0.40) 0.33%, rgba(101, 70, 255, 0.10) 93.25%) !important; border: 1px solid #C6BAFF; border-radius: 24px; backdrop-filter: blur(4px); padding: 10px 16px; text-align: left;',
     textStyle: {
-      color: '#fff'
+      color: '#fff',
+      align: 'left'
     },
     axisPointer: {
       type: 'line',

app/pages/web/index.vue

@@ -15,10 +15,6 @@
 
     <ProductTabs />
 
-    <!-- 安全洞见标题 -->
-
-    <!-- 数据展示区域 -->
-
     <!-- 安全运营与方案模块 -->
     <PlansSection />
 
@@ -50,7 +46,7 @@
       <h2 class="insight-title">安全洞见&nbsp;&nbsp;&nbsp;全网感知</h2>
       <p class="insight-subtitle">实时攻防态势数据</p>
     </section>
-    
+
     <StatsSection />
 
     <!-- 助力各行业客户成功 -->
@@ -129,9 +125,16 @@
           <NuxtImg width="180" src="/images/home/icon20.png" alt="中船重工物贸集团" />
         </div>
       </div>
-      <div class="industry-title">
-        <h3><span>立即加入</span> <span>安全之旅</span></h3>
-        <div class="industry-subtitle">完成注册，即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
+      <div class="join-container">
+        <div class="join-left">
+          <h3>立即加入 &nbsp;安全之旅</h3>
+          <div class="join-subtitle">完成注册，即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
+          <div class="join-btn">
+            <span>去完成注册</span>
+            <Icon name="material-symbols:arrow-forward-rounded" />
+          </div>
+        </div>
+        <img width="492" src="~/assets/svg/home/aq.svg" alt="安全之旅" />
       </div>
     </section>
   </section>
@@ -194,9 +197,9 @@ useHead(() => ({
 
   .hero-video-bg {
     position: absolute;
-    top: -10%;
+    top: 20%;
     left: 50%;
-    width: 100%;
+    width: 1600px;
     transform: translate(-50%);
     object-fit: cover;
     clip-path: inset(0 0 0% 0);
@@ -205,7 +208,7 @@ useHead(() => ({
 
   .canvas-overlay {
     position: absolute;
-    top: 260px;
+    top: 370px;
     left: 0;
     width: 100%;
     height: 50%; // 只显示上半部分
@@ -405,28 +408,52 @@ $Diameter :890px;
     background: #1C192B;
   }
 
-  .industry-title {
-    h3 {
-      padding: 40px 0;
-      text-align: center;
-      color: #FFF;
-      font-size: 45px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 45px;
+  .join-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 1200px; // 与上面的 grid 宽度对齐
+    margin-top: 100px;
+    margin-bottom: 60px;
+    gap: 160px;
 
-      span {
-        margin: 0 20px
+    .join-left {
+      text-align: left;
+
+      h3 {
+        color: #FFF;
+        font-size: 45px;
+        font-weight: 400;
+        line-height: 45px;
       }
-    }
 
-    .industry-subtitle {
-      text-align: center;
-      color: #FFF;
-      font-size: 26px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 26px;
+      .join-subtitle {
+        margin-top: 45px;
+        margin-bottom: 36px;
+        color: #A39DFF;
+        font-size: 26px;
+        font-weight: 400;
+        line-height: 45px;
+      }
+
+      .join-btn {
+        display: flex;
+        width: 330px;
+        height: 66px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        border-radius: 50px;
+        background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+        cursor: pointer;
+
+        span {
+          color: #FFF;
+          font-size: 24px;
+          font-weight: 500;
+        }
+
+      }
     }
   }