feat: web页面

app/assets/svg/home/protect.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6.16978L16.0057 2.66602L28 6.16978V13.3551C28 20.9075 23.1668 27.6123 16.0017 29.9997C8.83473 27.6123 4 20.906 4 13.3518V6.16978Z" stroke="white" stroke-width="2.66667" stroke-linejoin="round"/>
+<path d="M10 15.3333L14.6667 20L22.6667 12" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/components/Header.vue

@@ -9,7 +9,10 @@
     <nav class="header-nav" role="navigation" aria-label="Main navigation">
       <NuxtLink to="/pc" class="nav-item">首页</NuxtLink>
       <div class="nav-item-wrapper">
-        <div class="nav-item">产品</div>
+        <div class="nav-item">
+          <span>产品</span>
+          <Icon name="line-md:chevron-down" class="nav-item-icon" />
+        </div>
         <div class="dropdown-menu">
           <NuxtLink to="/pc/products/sdk" class="dropdown-item">
             <img class="item-img" src="~/assets/svg/header/icon1.svg" alt="SDK 安全加固">
@@ -118,6 +121,9 @@ watchEffect(() => {
   align-items: center;
 
   .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     text-decoration: none;
     margin: 0 15px;
     cursor: pointer;
@@ -133,6 +139,14 @@ watchEffect(() => {
   }
 }
 
+.nav-item-icon {
+  transition: transform 0.3s ease;
+}
+
+.nav-item-wrapper:hover .nav-item-icon {
+  transform: rotate(180deg);
+}
+
 .header-right {
   flex: 1;
   display: flex;
@@ -237,4 +251,4 @@ watchEffect(() => {
     }
   }
 }
-</style>
+</style>

app/components/PlansSection.vue

@@ -80,7 +80,8 @@
 .plans-section {
   width: 100%;
   max-width: 1200px;
-  margin: 0 auto 0;
+  margin: -10% auto 0;
+  position: relative;
   padding: 0 20px;
   box-sizing: border-box;
   display: flex;
@@ -103,10 +104,12 @@
     display: flex;
     flex-direction: column;
     height: 608px;
+    transition: transform .3s ease;
 
     &:hover {
       border: 2px solid rgba(178, 161, 255, 0.80);
       background: linear-gradient(180deg, rgba(146, 116, 254, 0.20) 0%, rgba(125, 70, 255, 0.20) 100%);
+      transform: translateY(-5px);
 
       .plan-actions .btn-primary {
         background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
@@ -116,7 +119,7 @@
 
     .plan-name {
       text-align: center;
-      
+
       font-size: 36px;
       font-weight: 700;
       line-height: 26px;
@@ -126,7 +129,7 @@
     .plan-desc {
       margin-top: 40px;
       text-align: center;
-      
+
       font-size: 20px;
       font-weight: 400;
       line-height: 20px;
@@ -163,7 +166,7 @@
 
     .plan-price {
       padding: 42px;
-      
+
       text-align: center;
       font-size: 65px;
       font-weight: 700;
@@ -184,7 +187,7 @@
         background: linear-gradient(91deg, rgba(163, 157, 255, 0.20) 1.24%, rgba(125, 70, 255, 0.20) 122.93%);
         border: none;
         color: #fff;
-        
+
         font-size: 24px;
         cursor: pointer;
         transition: opacity 0.3s ease;
@@ -215,7 +218,7 @@
 
         li {
           position: relative;
-          
+
           padding-left: 20px;
           font-size: 14px;
           font-weight: 400;

app/components/home/StatsSection.vue

@@ -4,18 +4,20 @@
       <img class="stats-bg" src="/images/home/home-bg.png" alt="首页背景" />
       <section class="stats-section">
         <NuxtPicture class="stats-figure" src="/images/home/home-d.png" alt="游戏盾"></NuxtPicture>
-        <div class="stat-item">
-          <div class="stat-label">今日&nbsp;CC&nbsp;攻击次数</div>
-          <div class="stat-value">{{ formatNumber(stats.ccAttacks) }}</div>
+        <div class="stats-row">
+          <div class="stat-item">
+            <div class="stat-label">今日攻击次数</div>
+            <div class="stat-value">{{ formatNumber(stats.ccAttacks) }}</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">今日拦截次数</div>
+            <div class="stat-value">{{ formatNumber(stats.wafBlocks) }}</div>
+          </div>
         </div>
         <div class="stat-item state-other">
-          <div class="stat-label">今日&nbsp;DDoS&nbsp;攻击峰值</div>
+          <div class="stat-label">今日DDoS攻击峰值</div>
           <div class="stat-value">{{ formatNumber(stats.ddosPeak) }}</div>
         </div>
-        <div class="stat-item">
-          <div class="stat-label">今日&nbsp;WAF&nbsp;拦截次数</div>
-          <div class="stat-value">{{ formatNumber(stats.wafBlocks) }}</div>
-        </div>
       </section>
     </div>
   </div>
@@ -73,6 +75,17 @@ const formatNumber = (num) => {
   justify-content: center;
   overflow: hidden;
 
+  .stats-row {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+  }
+
   .stats-figure {
     position: absolute;
     top: 40%;
@@ -115,7 +128,7 @@ const formatNumber = (num) => {
     z-index: 1;
 
     .stat-label {
-      
+
       font-size: 24px;
       font-weight: 400;
       line-height: 24px;
@@ -125,7 +138,7 @@ const formatNumber = (num) => {
     }
 
     .stat-value {
-      
+
       font-size: 56px;
       font-weight: 700;
       line-height: 56px;

app/components/products/Card.vue

@@ -26,7 +26,7 @@
       <div v-mouse-glow class="card-item card2">
         <div class="card-title">
           <div class="title-wrapper">
-            <img src="~/assets/svg/products/sdk/security.svg" alt="加密锁" />
+            <img src="~/assets/svg/products/sdk/security.svg" alt="防护" />
             <h3>DDoS 防护</h3>
           </div>
           <div class="stat-text">
@@ -37,7 +37,7 @@
       <div v-mouse-glow class="card-item card3">
         <div class="card-title">
           <div class="title-wrapper">
-            <img src="~/assets/svg/products/sdk/acceleration.svg" alt="加密锁" />
+            <img src="~/assets/svg/products/sdk/acceleration.svg" alt="加速" />
             <h3>智能加速</h3>
           </div>
           <div class="stat-text">
@@ -170,8 +170,9 @@
 
 .card4 {
   grid-area: card4;
-  padding: 42px 30px 48px 24px;
+  padding: 42px 30px 28px 24px;
   display: flex;
+  align-items: center;
   gap: 30px;
 }
 

app/components/products/CaseCard.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="case-container">
+    <div class="case-cards">
+      <div class="card-content">
+        <!-- 左侧 Tabs -->
+        <div class="tabs-list">
+          <div v-for="(item, index) in cases" :key="index" class="tab-item" :class="{ active: activeIndex === index }"
+            @click="activeIndex = index">
+            {{ item.title }}
+          </div>
+        </div>
+
+        <!-- 右侧内容 -->
+        <div class="tab-content">
+          <transition name="fade" mode="out-in">
+            <div :key="activeIndex" class="content-wrapper">
+              <div class="text-content">
+                <h3 class="title">{{ cases[activeIndex].title }}</h3>
+                <p class="description">{{ cases[activeIndex].description }}</p>
+                <h4 class="title">业务价值</h4>
+                <p class="value-desc">{{ cases[activeIndex].value }}</p>
+              </div>
+              <div class="image-content">
+                <NuxtPicture :src="cases[activeIndex].image" :alt="cases[activeIndex].title" />
+              </div>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const activeIndex = ref(0);
+
+const cases = [
+  {
+    title: '网站提速',
+    description: '针对网页静态资源的优化和加速分发，解决网站流量激增时用户请求量、带宽负载增高、服务器压力过大以及站点响应缓慢的问题。',
+    value: '通过压缩优化，快速加载大图、样式等资源，缩短网页响应时间，提升用户体验。访问数据决定回源行为，减少回源流量，提高请求命中率，降低带宽成本。',
+    image: '/images/products/case1.png'
+  },
+  {
+    title: '下载加速',
+    description: '适用于网站或应用的静态大文件分发，如游戏安装包、应用更新文件、补丁程序文件、音视频文件、建筑数据模型、医疗图像等较大的文件。',
+    value: '通过海量加速节点，用户获得极速下载体验。分段缓存技术增强大文件下载的传输稳定性，确保顺畅的文件传输。',
+    image: '/images/products/case2.png'
+  },
+  {
+    title: '音视频加速',
+    description: '针对视频网站、短视频等业务场景，优化源站出口压力，解决用户在观看音视频时的卡顿和不流畅问题。',
+    value: '通过海量加速节点支持高并发，提供高速稳定的资源分发，确保流畅、稳定和丰富的观看体验。同时，丰富的访问控制功能有效防止用户盗用媒体资源。',
+    image: '/images/products/case3.png'
+  },
+  {
+    title: '安全防护',
+    description: '黑客通过扫描发现互联网应用的安全漏洞，并利用爬虫、挂马、黑客病毒、数据泄露、CC攻击等手段入侵服务器和数据库，窃取核心业务数据。',
+    value: '提供恶意URL过滤、入侵防护等全面的用户防护能力，有效防御常见Web攻击。同时提供Referer黑白名单和高阶URL鉴权，全面解决盗链问题。',
+    image: '/images/products/case4.png'
+  }
+];
+</script>
+
+<style lang="scss" scoped>
+.case-container {
+  position: relative;
+  width: 100%;
+  height: 800px;
+  background: url('/images/products/case-bg.png') no-repeat center;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    position: absolute;
+    content: '应用场景';
+    top: -45px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 45px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 45px;
+    background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .case-cards {
+    width: 100%;
+    max-width: 1200px;
+    margin-top: 60px;
+  }
+
+  .card-content {
+    display: flex;
+    gap: 80px;
+    align-items: flex-start;
+  }
+
+  .tabs-list {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 224px;
+    flex-shrink: 0;
+  }
+
+  .tab-item {
+    height: 72px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    background: rgba(255, 255, 255, 0.10);
+    color: rgba(255, 255, 255, 0.60);
+    ;
+    cursor: pointer;
+    font-size: 26px;
+    font-weight: 400;
+    line-height: 26px;
+
+    &:hover {
+      border-radius: 8px;
+      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+    }
+
+    &.active {
+      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+
+  .tab-content {
+    flex: 1;
+    color: #fff;
+    height: 500px; // Fixed height to prevent jitter
+  }
+
+  .content-wrapper {
+    display: flex;
+    align-items: stretch;
+    /* 让左右两列在高度上保持一致（无 JS） */
+    gap: 36px;
+  }
+
+  .text-content {
+    width: 540px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    justify-content: center;
+
+    .title {
+      font-size: 36px;
+      font-weight: 500;
+    }
+
+    .description {
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 36px;
+      margin-bottom: 38px;
+    }
+
+
+    .value-desc {
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 36px;
+    }
+  }
+
+  .image-content {
+    max-width: 540px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    :deep(img) {
+     width: 100%;
+     height: auto;
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

app/components/products/SecurityServicesSuite.vue

@@ -1,7 +1,259 @@
 <template>
-
+  <section class="service-container">
+    <NuxtImg src="/images/products/SecurityServicesSuite.png" class="bg-img" alt="bg-img" />
+    <div class="service-content">
+      <h2>为您定制的企业级安全服务包</h2>
+      <div class="service-cards">
+        <div v-for="(item, index) in products" :key="index" class="service-card">
+          <div class="card-title">{{ item.title }}</div>
+          <template v-if="item.price">
+            <div class="card-price">
+              <span class="amount">${{ item.price }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </div>
+            <div class="payment-support">
+              支持 <img width="22" height="22" src="/images/products/icon.png" alt="icon"> 支付
+            </div>
+          </template>
+          <template v-else>
+            <div class="customized-icon">
+              <NuxtPicture width="112" height="112" src="/images/products/customized.png" alt="定制" />
+            </div>
+          </template>
+          <button class="action-btn">{{ item.btnText }}</button>
+          <div class="features-list">
+            <div v-for="(feature, idx) in item.features" :key="idx" class="feature-item">
+              <span class="label">{{ feature.label }}</span>
+              <span class="value">{{ feature.value }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
 <script setup>
-
+const products = [
+  {
+    title: '标准版',
+    price: '299',
+    unit: '/月',
+    btnText: '立即开通',
+    features: [
+      { label: 'DDoS防护值', value: '150Gbps' },
+      { label: 'CC防御值', value: '30000QPS' },
+      { label: '域名', value: '5个' },
+      { label: '防御端口', value: '10个' },
+      { label: '业务宽带', value: '50Mbps' },
+      { label: 'SSL', value: '支持' },
+      { label: 'Websocket', value: '支持' },
+      { label: '网络', value: 'BGP/CN2网络' },
+    ]
+  },
+  {
+    title: '高级版',
+    price: '1199',
+    unit: '/月',
+    btnText: '立即开通',
+    features: [
+      { label: 'DDoS防护值', value: '400Gbps' },
+      { label: 'CC防御值', value: '50000QPS' },
+      { label: '域名', value: '10个' },
+      { label: '防御端口', value: '20个' },
+      { label: '业务宽带', value: '100Mbps' },
+      { label: 'SSL', value: '支持' },
+      { label: 'Websocket', value: '支持' },
+      { label: '网络', value: 'BGP/CN2网络' },
+    ]
+  },
+  {
+    title: '至尊版',
+    price: '2999',
+    unit: '/月',
+    btnText: '立即开通',
+    features: [
+      { label: 'DDoS防护值', value: '600Gbps' },
+      { label: 'CC防御值', value: '15WQPS' },
+      { label: '域名', value: '50个' },
+      { label: '防御端口', value: '50个' },
+      { label: '业务宽带', value: '500Mbps' },
+      { label: 'SSL', value: '支持' },
+      { label: 'Websocket', value: '支持' },
+      { label: '网络', value: 'BGP/CN2网络' },
+    ]
+  },
+  {
+    title: '定制版',
+    btnText: '联系商务',
+    features: [
+      { label: 'DDoS防护值', value: 'T级防御' },
+      { label: 'CC防御值', value: '免疫98%CC' },
+      { label: '域名', value: '定制' },
+      { label: '防御端口', value: '定制' },
+      { label: '业务宽带', value: '定制' },
+      { label: 'SSL', value: '定制' },
+      { label: 'Websocket', value: '定制' },
+      { label: '网络', value: 'BGP/CN2网络' },
+    ]
+  }
+]
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.service-container {
+  width: 100%;
+  height: 1150px;
+  position: relative;
+  overflow: hidden;
+
+  .bg-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    z-index: 1;
+  }
+
+  .service-content {
+    position: relative;
+    z-index: 2;
+    padding-top: 306px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    h2 {
+      font-size: 45px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 45px;
+      background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .service-cards {
+      margin-top: 82px;
+      display: flex;
+      justify-content: center;
+      gap: 12px;
+
+      .service-card {
+        border-radius: 10px;
+        background: #1B192A;
+        width: 290px;
+        height: 610px;
+        flex-shrink: 0;
+        padding: 42px 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #fff;
+        box-sizing: border-box;
+        transition: transform .3s ease;
+
+        &:hover {
+          transform: translateY(-5px);
+          border: 1px solid #BF69FF;
+          background: linear-gradient(176deg, rgba(146, 116, 254, 0.20) -10.82%, rgba(125, 70, 255, 0.20) 109.01%);
+        }
+
+        &:hover .action-btn {
+          background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+        }
+
+        .card-title {
+          color: #FFF;
+          text-align: center;
+          font-size: 26px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 26px;
+        }
+
+        .customized-icon {
+          padding-top: 12px
+        }
+
+        .card-price {
+          display: flex;
+          align-items: baseline;
+          padding: 25px 0 18px 0;
+
+          .amount {
+            font-size: 50px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 50px;
+            background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+
+          .unit {
+            color: #FFF;
+            font-size: 26px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 50px;
+          }
+        }
+
+        .payment-support {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          color: #FFF;
+          font-size: 18px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 18px;
+        }
+
+        .action-btn {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 250px;
+          height: 50px;
+          margin-top: 34px;
+          gap: 10px;
+          border-radius: 50px;
+          background: rgba(255, 255, 255, 0.20);
+          color: #FFF;
+          font-size: 24px;
+          font-weight: 400;
+          cursor: pointer;
+        }
+
+        .features-list {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          margin-top: 20px;
+
+          .feature-item {
+            display: flex;
+            justify-content: space-between;
+            font-size: 16px;
+            font-weight: 400;
+
+            .label {
+              color: rgba(255, 255, 255, 0.60)
+            }
+
+            .value {
+              color: #FFF;
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

app/pages/pc/index.vue

@@ -29,7 +29,7 @@
     <StatsSection />
 
     <!-- 安全运营与方案模块 -->
-    <PlansSection style="margin-top: 120px;" />
+    <PlansSection />
 
     <!-- 安全漏洞 / 全景技术架构上方模块 -->
     <section class="security-arch-section">
@@ -149,16 +149,17 @@
             <span class="radar-dot radar-dot-4" />
           </div>
         </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="hero-section" style="margin-top: 0;">
+    <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>
+      <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>
@@ -215,14 +216,14 @@ useHead(() => ({
 }
 
 // 标题区域（视频作为背景）
-.hero-section {
+.hero-section,
+.bottom-video {
   width: 100%;
   height: 497px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 182px;
   box-sizing: border-box;
 
   .hero-video-bg {
@@ -259,7 +260,7 @@ useHead(() => ({
     margin: 0 auto;
 
     .hero-title {
-      
+
       font-size: 30px;
       font-weight: 400;
       line-height: 30px;
@@ -279,7 +280,7 @@ useHead(() => ({
       margin-top: 28px;
       width: 100%;
       max-width: 918.27px;
-      min-height: 341.49px;
+      // min-height: 341.49px;
       position: relative;
       display: flex;
       justify-content: center;
@@ -300,6 +301,17 @@ useHead(() => ({
   }
 }
 
+.bottom-video {
+  height: 352px;
+
+  .hero-video-bg {
+    top: 4%;
+  }
+
+  .canvas-overlay {
+    top: 50%;
+  }
+}
 
 // 安全洞见标题
 .insight-header {
@@ -310,7 +322,7 @@ useHead(() => ({
   align-items: center;
 
   .insight-title {
-    
+
     font-size: 36px;
     font-weight: 400;
     line-height: 36px;
@@ -320,7 +332,7 @@ useHead(() => ({
   }
 
   .insight-subtitle {
-    
+
     font-size: 24px;
     font-weight: 400;
     line-height: 24px;
@@ -401,17 +413,16 @@ useHead(() => ({
 //彩虹部分
 .cain-section {
   position: relative;
-  padding-top: 496px;
-  padding-bottom: 60px;
+  padding-top: 380px;
   box-sizing: border-box;
 
   .cain-section-img {
     left: 50%;
     position: absolute;
-    top: 56px;
+    top: 0;
     transform: translate(-50%);
     height: 400px;
-    width: 900px;
+    width: 1200px;
   }
 
   .cain-section-animate {
@@ -419,7 +430,7 @@ useHead(() => ({
     left: 50%;
     mask-size: cover;
     position: absolute;
-    top: 128px;
+    top: 10%;
     transform: translate(-50%);
     width: 750px;
     opacity: .7;
@@ -429,7 +440,7 @@ useHead(() => ({
   .cain-section-desc {
     position: absolute;
     left: 50%;
-    top: 60%;
+    top: 80%;
     transform: translate(-50%, -50%);
     width: 100%;
     text-align: center;
@@ -437,7 +448,6 @@ useHead(() => ({
     .cain-section-title {
       font-size: 45px;
       color: #ffffff;
-      margin: 0;
       font-weight: 400;
     }
   }
@@ -448,10 +458,12 @@ useHead(() => ({
 $Diameter :890px;
 
 .industry {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
+  z-index: 2;
 
   .industry-content {
     display: flex;
@@ -474,7 +486,7 @@ $Diameter :890px;
 
   .industry-text {
     padding: 16px 0 0 16px;
-    
+
     font-size: 18px;
     font-weight: 400;
     line-height: 18px;
@@ -585,6 +597,16 @@ $Diameter :890px;
     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%;

app/pages/pc/products/sdk.vue

@@ -86,7 +86,7 @@ useHead(() => ({
     z-index: 1;
     position: relative;
     object-fit: cover;
-    clip-path: inset(0 0 9% 0);
+    clip-path: inset(0 0 0% 0);
   }
 
   .video-title {
@@ -201,6 +201,7 @@ useHead(() => ({
   flex-direction: column;
   align-items: center;
   gap: 50px;
+  margin-bottom: 92px;
 
   h2 {
     font-size: 62px;

app/pages/pc/products/web.vue

@@ -29,10 +29,10 @@
               加速您的网站，最速达优化性能。CDN内容分发网络遍布五大洲，我们的CDN将使您的网站前所未有的更流畅，提升您的用户体验，而我们的数据中心则提供商业的资讯管理和保护，确保您的数据平安无误。
             </p>
           </div>
-          <NuxtPicture width="541" height="626" class="item-img" src="/images/products/cdn.png" alt="cdn分发" />
+          <NuxtPicture width="400" height="462" class="item-img" src="/images/products/cdn.png" alt="cdn分发" />
         </div>
         <div class="cdn-item">
-          <NuxtPicture width="500" height="692" class="item-img" src="/images/products/678yun.png" alt="678云盾" />
+          <NuxtPicture width="316" height="436" class="item-img" src="/images/products/678yun.png" alt="678云盾" />
           <div class="item-text">
             <h3>网站保护</h3>
             <p>
@@ -54,6 +54,12 @@
         <div class="item-text">{{ card.text }}</div>
       </div>
     </section>
+    <SecurityServicesSuite />
+    <CaseCard />
+    <div class="bg-img">
+      <NuxtImg src="/images/products/web-bg2.png" class="bg-img" alt="bg-img" />
+
+    </div>
   </div>
 </template>
 <script setup>
@@ -74,6 +80,8 @@ import icon3 from '~/assets/svg/products/web/icon3.svg'
 import icon4 from '~/assets/svg/products/web/icon4.svg'
 import icon5 from '~/assets/svg/products/web/icon5.svg'
 import icon6 from '~/assets/svg/products/web/icon6.svg'
+import SecurityServicesSuite from '~/components/products/SecurityServicesSuite.vue'
+import CaseCard from '~/components/products/CaseCard.vue'
 
 const cards = [
   {
@@ -232,7 +240,7 @@ const cards = [
     width: 100%;
     max-width: 1200px;
     position: relative;
-    margin: 0 auto;
+    margin: 136px auto 0;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: repeat(3, 1fr);
     gap: 20px 100px;
@@ -267,12 +275,12 @@ const cards = [
       .item-text {
         grid-column: 1 / 2;
         grid-row: 1 / 2;
-        align-self: flex-end;
       }
 
       .item-img {
         grid-column: 2 / 3;
         grid-row: 1 / 3;
+        justify-self: end;
       }
     }
 
@@ -286,7 +294,6 @@ const cards = [
       .item-text {
         grid-column: 2 / 3;
         grid-row: 3 / 4;
-        align-self: flex-start;
       }
     }
 
@@ -398,4 +405,18 @@ const cards = [
     }
   }
 }
+
+.bg-img {
+  width: 100%;
+  height: 450px;
+  position: relative;
+
+  :deep(img) {
+    width: 100%;
+    height: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
 </style>