style(products): 调整组件样式和布局细节

- 为 CaseCard 组件添加底部边距
- 移除 PlansSection 组件的水平内边距
- 调整 Card 组件的网格布局和居中样式
- 在 web 产品页添加特性标题并设置样式
- 调整 Defense 组件中图片的定位和边距
- 优化 boost 产品页的背景元素尺寸和位置

app/components/PlansSection.vue

@@ -33,7 +33,6 @@ import { plans } from '~/utils/plans'
   max-width: 1200px;
   margin: 0 auto 0;
   position: relative;
-  padding: 0 20px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

app/components/products/Card.vue

@@ -68,7 +68,10 @@
 <style lang="scss" scoped>
 .card-container {
   width: 100%;
+  max-width: 1200px;
+  box-sizing: border-box;
   position: relative;
+  margin: 0 auto;
 
   .card-bg-img {
     position: absolute;
@@ -90,7 +93,7 @@
   grid-template-areas:
     "card1 card2 card3"
     "card1 card4 card4";
-  grid-template-columns: 400px 400px 400px;
+  grid-template-columns: 388px 388px 388px;
   grid-template-rows: 192px 308px;
   grid-column-gap: 20px;
   grid-row-gap: 20px;

app/components/products/CaseCard.vue

@@ -77,6 +77,7 @@ const cases = [
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-bottom: 140px;
 
   &::before {
     position: absolute;

app/components/products/Defense.vue

@@ -21,7 +21,7 @@
               <li>• 日本节点：作为东亚数据枢纽，为日本、韩国及泛亚地区用户提供超低延迟访问，保障区域业务流畅稳定。</li>
               <li>• 香港节点：具备独特的网络中立性与中国大陆极速连接能力，是同时服务内地用户与全球业务的绝佳桥梁。</li>
             </ul>
-            <NuxtImg src="/images/products/ddos.png" />
+            <NuxtImg width="202" class="ddos-img" src="/images/products/ddos.png" />
           </div>
         </div>
 
@@ -62,6 +62,7 @@
 <script setup></script>
 <style lang="scss" scoped>
 .defense-section {
+  margin-top: 62px;
   // padding: 80px 0;
   color: #fff;
 
@@ -155,15 +156,25 @@
     .card-content {
       flex: 1;
       display: flex;
+      position: relative;
       color: rgba(255, 255, 255, 0.60);
       font-size: 14px;
       font-weight: 400;
       line-height: 26px;
 
+      .ddos-img {
+        position: absolute;
+        z-index: 0;
+        right: -50%;
+        top: 30%;
+        transform: translateY(-50%);
+      }
+
       ul {
         list-style: none;
         padding: 0;
         margin-top: 20px;
+        width: 358px;
       }
     }
 

app/pages/web/products/boost.vue

@@ -132,8 +132,9 @@ const activeTab = ref('accelerate')
 
   .sd-bg {
     position: absolute;
-    right: 0;
+    left: 60%;
     top: 0;
+    transform: translate(-50%);
   }
 
 
@@ -163,6 +164,7 @@ const activeTab = ref('accelerate')
     }
 
     .video-subtitle {
+      margin-top: 24px;
       color: #E2D9FF;
       font-size: 16px;
       font-weight: 400;
@@ -211,8 +213,8 @@ const activeTab = ref('accelerate')
     left: 50%;
     top: 0;
     transform: translate(-50%);
-    width: 972px;
-    height: 604px;
+    width: 762px;
+    height: 304px;
     border-radius: 972px;
     background: linear-gradient(180deg, rgba(123, 140, 255, 0.20) 0.19%, rgba(135, 85, 255, 0.20) 46.36%);
     filter: blur(50px);
@@ -225,8 +227,8 @@ const activeTab = ref('accelerate')
     left: 50%;
     top: 0%;
     transform: translate(-50%);
-    width: 574px;
-    height: 336px;
+    width: 502px;
+    height: 296px;
     border-radius: 574px;
     background: linear-gradient(180deg, #7B8CFF 0.19%, #8755FF 46.36%);
     filter: blur(50px);

app/pages/web/products/web.vue

@@ -55,9 +55,9 @@
         </div>
       </div>
     </section>
-    <!-- <section class="cdn-bg">
-      <NuxtImg src="/images/products/web-bg.png" width="100%" height="auto" alt="背景图" />
-    </section> -->
+    <section class="card-text">
+      <h2>678CDN 特性</h2>
+    </section>
     <section class="cdn-cards">
       <div class="card-item" v-for="(card, index) in cards" :key="index">
         <div class="item-title">
@@ -354,6 +354,21 @@ const cards = [
   }
 }
 
+.card-text {
+  display: flex;
+  justify-content: center;
+  padding: 120px 0 82px 0;
+
+  h2 {
+    font-size: 45px;
+    font-weight: 500;
+    line-height: 45px;
+    background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
 
 .cdn-cards {
   padding: 30px 0 50px 0;