feat(products/sdk): 更新SDK产品页面内容并添加移动端组件

- 更新桌面端产品卡片描述文本，使其更准确
- 简化桌面端SDK页面背景布局，移除多余元素
- 新增移动端产品介绍组件，展示关键数据指标
- 实现完整的移动端SDK页面，包含折叠面板和产品特性展示
- 添加新的SVG图标资源用于移动端界面

app/assets/svg/products/sdk/user.svg

@@ -0,0 +1,17 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3652 3.55973L5.75145 5.33188C2.87864 6.10165 1.62468 8.27233 2.39406 11.1437L4.16322 17.7463C4.93472 20.6256 7.10602 21.8784 9.97883 21.1087L16.5847 19.3386C19.4575 18.5689 20.7115 16.3982 19.9421 13.5268L18.1708 6.91634C17.4093 4.04285 15.238 2.78996 12.3652 3.55973Z" fill="url(#paint0_linear_1367_4107)"/>
+<foreignObject x="2.33138" y="2.33333" width="27.9993" height="27.9998"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2.33px);clip-path:url(#bgblur_0_1367_4107_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="4.66667" d="M12.4238 7.29199H20.249C21.8904 7.29207 23.1652 7.77979 24.0283 8.64355C24.8915 9.50734 25.3776 10.7814 25.373 12.4219V20.2441C25.373 21.8847 24.8849 23.1595 24.0205 24.0234C23.1561 24.8874 21.8807 25.375 20.2393 25.375H12.4238C10.7825 25.375 9.50698 24.8873 8.64258 24.0225C7.77815 23.1574 7.29004 21.8799 7.29004 20.2344V12.4229C7.29004 10.7822 7.77815 9.50755 8.64258 8.64355C9.50702 7.77965 10.7824 7.29199 12.4238 7.29199Z" fill="#8C5BFF" fill-opacity="0.4" stroke="url(#paint1_linear_1367_4107)" stroke-width="0.583333"/>
+<path d="M16.849 15.3669C17.6544 15.3669 18.3073 14.7139 18.3073 13.9085C18.3073 13.1031 17.6544 12.4502 16.849 12.4502C16.0435 12.4502 15.3906 13.1031 15.3906 13.9085C15.3906 14.7139 16.0435 15.3669 16.849 15.3669Z" fill="white" stroke="white" stroke-width="0.833333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.0996 19.7004V19.9504H20.5996V19.7004C20.5996 18.7669 20.5996 18.3002 20.418 17.9437C20.2582 17.6301 20.0032 17.3751 19.6896 17.2153C19.3331 17.0337 18.8664 17.0337 17.9329 17.0337H15.7663C14.8329 17.0337 14.3662 17.0337 14.0096 17.2153C13.696 17.3751 13.4411 17.6301 13.2813 17.9437C13.0996 18.3002 13.0996 18.7669 13.0996 19.7004Z" fill="white" stroke="white" stroke-width="0.833333" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<clipPath id="bgblur_0_1367_4107_clip_path" transform="translate(-2.33138 -2.33333)"><path d="M12.4238 7.29199H20.249C21.8904 7.29207 23.1652 7.77979 24.0283 8.64355C24.8915 9.50734 25.3776 10.7814 25.373 12.4219V20.2441C25.373 21.8847 24.8849 23.1595 24.0205 24.0234C23.1561 24.8874 21.8807 25.375 20.2393 25.375H12.4238C10.7825 25.375 9.50698 24.8873 8.64258 24.0225C7.77815 23.1574 7.29004 21.8799 7.29004 20.2344V12.4229C7.29004 10.7822 7.77815 9.50755 8.64258 8.64355C9.50702 7.77965 10.7824 7.29199 12.4238 7.29199Z"/>
+</clipPath><linearGradient id="paint0_linear_1367_4107" x1="5.57723" y1="22.2881" x2="22.4169" y2="15.5003" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CC73FF"/>
+<stop offset="1" stop-color="#6726FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1367_4107" x1="9.08052" y1="9.59328" x2="24.4139" y2="24.9266" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C5BFF" stop-opacity="0.2"/>
+</linearGradient>
+</defs>
+</svg>

app/components/mobile/products/Introduction.vue

@@ -0,0 +1,66 @@
+<template>
+  <section class="intr-container">
+    <div>
+      <p class="intr-title">
+        1800+
+      </p>
+      <p class="intr-description">
+        实用至上-全球 1800+ 边缘哨兵帮你的游戏“开挂”
+      </p>
+    </div>
+    <div>
+      <p class="intr-title">
+        1.5T
+      </p>
+      <p class="intr-description">
+        抗打峰值：1.5 Tbps，单日轻松吃掉 5 万次 DDoS 攻击
+      </p>
+    </div>
+    <div>
+      <p class="intr-title">
+        10Min
+      </p>
+      <p class="intr-description">
+        不拆架构、不动服务器、不写一条 waf 防御规则，老项目也能 10 分钟老兵新枪
+      </p>
+    </div>
+    <div>
+      <p class="intr-title">
+        99.999%
+      </p>
+      <p class="intr-description">
+        99.999% 可用性，全年停机时间< 5 分钟 </p>
+    </div>
+  </section>
+</template>
+<script setup></script>
+<style lang="scss" scoped>
+.intr-container {
+  margin-top: 40px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, auto);
+  gap: 20px;
+  position: relative;
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  background: url("/images/products/bg-text1.png") no-repeat center center;
+  background-size: contain;
+  background-origin: border-box;
+  z-index: 3;
+}
+
+.intr-title {
+  color: #EADBFF;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.intr-description {
+  margin-top: 4px;
+  color: rgba(222, 200, 255, 0.50);
+  font-size: 10px;
+  font-weight: 400;
+}
+</style>

app/components/products/Card.vue

@@ -30,7 +30,7 @@
             <h3>DDoS 防护</h3>
           </div>
           <div class="stat-text">
-            SDK自身高强度加密，且可以实时动态更新，安全可靠，无惧MITM Attack。
+           分布式的抗D节点，同时基于SDK端流量数据的灵活调度策略，智能隔离清洗攻击流量。
           </div>
         </div>
       </div>
@@ -41,7 +41,7 @@
             <h3>智能加速</h3>
           </div>
           <div class="stat-text">
-            SDK自身高强度加密，且可以实时动态更新，安全可靠，无惧MITM Attack。
+            基于用户IP识别，智能网络传输线路选择，静态动态Edge分发，即时游戏无延迟。
           </div>
         </div>
       </div>

app/pages/mobile/products/sdk.vue

@@ -1,26 +1,254 @@
 <template>
-  <div class="mobile-product">
-    <h1>SDK 安全加固</h1>
-  </div>
+  <section class="mb-product">
+    <section class="video-section">
+      <div class="video-title">
+        <h1>DDAC游戏盾——让APP自带</h1>
+        <div class="video-subtitle">“国家级别”防御</div>
+        <div class="video-text">
+          却只需要开发者“日常级别”
+          的工作量
+        </div>
+        <div class="video-btn">
+          联系我们 <Icon size="16" name="ic:sharp-keyboard-arrow-right"></Icon>
+        </div>
+      </div>
+      <div class="right-bg"></div>
+    </section>
+    <Introduction />
+    <section class="mb-card-text">
+      <h3>
+        一体化解决游戏安全问题
+      </h3>
+      <div class="mb-accordion">
+        <div v-for="(item, index) in accordionItems" :key="item.title" class="accordion-item"
+          :class="{ 'is-open': openIndices.includes(index) }" @click="toggleAccordion(index)">
+          <div class="accordion-header">
+            <div class="accordion-left">
+              <img width="24" height="24" :src="item.icon" alt="icon">
+              <span class="accordion-title">{{ item.title }}</span>
+            </div>
+            <Icon size="20" name="line-md:chevron-right" class="accordion-icon" />
+          </div>
+          <Transition name="accordion-expand">
+            <div v-show="openIndices.includes(index)" class="accordion-body">
+              <p class="accordion-text">{{ item.description }}</p>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </section>
+    <PlansSection class="mb-plans-section" />
+
+  </section>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import Introduction from '~/components/mobile/products/Introduction.vue'
+import PlansSection from '~/components/mobile/home/PlansSection.vue'
+import icon1 from '~/assets/svg/products/sdk/security.svg'
+import icon2 from '~/assets/svg/products/sdk/acceleration.svg'
+import icon3 from '~/assets/svg/products/sdk/lock.svg'
+import icon4 from '~/assets/svg/products/sdk/user.svg'
+
 useHead(() => ({
-  title: 'SDK安全加固 - 移动端',
+  title: 'SDK安全加固',
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
   ]
 }))
+
+const accordionItems = [
+  {
+    title: 'DDoS 防护',
+    description: '分布式的抗D节点，同时基于SDK端流量数据的灵活调度策略，智能隔离清洗攻击流量。',
+    icon: icon1
+  },
+  {
+    title: '智能加速',
+    description: '基于用户IP识别，智能网络传输线路选择，静态动态Edge分发，即时游戏无延迟。',
+    icon: icon2
+  },
+  {
+    title: '全链加密',
+    description: 'SDK自身高强度加密，且可以实时动态更新，安全可靠，无惧 MITM Attack。',
+    icon: icon3
+  },
+  {
+    title: '用户友好的加密调度中心',
+    description: '用于替代DNS的一个加密调度中心，能够实现细化到单个客户端，级别的秒级调度，兼容性稳定可靠!提供完整SDK中文文档，轻松集成!',
+    icon: icon4
+  }
+]
+
+const openIndices = ref([0])
+
+const toggleAccordion = (index) => {
+  const i = openIndices.value.indexOf(index)
+  if (i > -1) {
+    openIndices.value.splice(i, 1)
+  } else {
+    openIndices.value.push(index)
+  }
+}
 </script>
 
 <style scoped lang="scss">
-.mobile-product {
-  color: #fff;
-  text-align: center;
-  padding-top: 60px;
+.mb-product {
+  .video-section {
+    box-sizing: border-box;
+    padding-top: 32px;
+    display: flex;
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+
+
+    .right-bg {
+      position: absolute;
+      right: 0;
+      top: -52px;
+      width: 312px;
+      height: 260px;
+      background-image: url('/images/products/sdk-bg1.png');
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      z-index: 3;
+    }
+
+    .video-title {
+      z-index: 3;
+      color: #fff;
+      font-style: normal;
+      display: flex;
+      flex-direction: column;
+
+      h1 {
+        font-size: 14px;
+        font-weight: 500;
+        background: linear-gradient(91deg, #D8D3FF -6.9%, #E6D2FF 111.73%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      .video-subtitle {
+        margin-left: -4%;
+        color: #DBB9FF;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      .video-text {
+        width: 130px;
+        margin-top: 12px;
+        color: #E2D9FF;
+        font-size: 10px;
+        font-weight: 400;
+      }
+
+      .video-btn {
+        margin-top: 12px;
+        display: flex;
+        width: 85px;
+        height: 24px;
+        justify-content: center;
+        align-items: center;
+        color: #FFF;
+        font-size: 10px;
+        font-weight: 400;
+        border-radius: 4px;
+        background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+      }
+    }
+  }
+
+}
 
-  h1 {
-    font-size: 24px;
+.mb-card-text {
+  margin-top: 20px;
+
+  h3 {
+    text-align: center;
+    color: #FFF;
+    font-size: 20px;
+    font-weight: 400;
+  }
+
+  .mb-accordion {
+    margin-top: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .accordion-item {
+      padding: 20px;
+      border-radius: 10px;
+      border: 1px solid rgba(255, 255, 255, 0.10);
+      background: #1C192B;
+      backdrop-filter: blur(9px);
+      transition: border-color 0.2s ease, background 0.2s ease;
+    }
+
+    .accordion-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .accordion-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .accordion-title {
+      color: #FFF;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .accordion-icon {
+      color: #fff;
+      transition: transform 0.2s ease;
+    }
+
+    .accordion-item.is-open .accordion-icon {
+      transform: rotate(90deg);
+    }
+
+    .accordion-body {
+      margin-top: 10px;
+    }
+
+    .accordion-text {
+      color: rgba(255, 255, 255, 0.50);
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+    }
   }
+
+  .accordion-expand-enter-active,
+  .accordion-expand-leave-active {
+    transition: all 0.2s ease;
+    overflow: hidden;
+  }
+
+  .accordion-expand-enter-from,
+  .accordion-expand-leave-to {
+    opacity: 0;
+    max-height: 0;
+  }
+
+  .accordion-expand-enter-to,
+  .accordion-expand-leave-from {
+    opacity: 1;
+    max-height: 200px;
+  }
+}
+.mb-plans-section{
+  margin-top: 44px;
 }
 </style>

app/pages/web/products/sdk.vue

@@ -1,10 +1,7 @@
 <template>
   <section>
     <section class="video-section">
-      <!-- <div class="left-bg"></div> -->
       <div class="right-bg"></div>
-      <!-- <video ref="videoRef" class="video-bg" src="~/assets/video/sdk.mp4" autoplay loop muted playsinline
-        @loadedmetadata="onVideoLoaded"></video> -->
       <div class="video-title">
         <h1>DDAC游戏盾——让APP自带</h1>
         <div class="video-subtitle">“国家级别”防御</div>
@@ -64,27 +61,12 @@ useHead(() => ({
   overflow: hidden;
   height: 790px;
 
-  .left-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 927px;
-    height: auto;
-    aspect-ratio: 103/62;
-    background-image: url('/images/products/sdk-bg.png');
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    z-index: 2;
-    opacity: 0.6;
-  }
-
   .right-bg {
     position: absolute;
     top: 0;
     right: 10%;
     width: 1216px;
-    height:840px;
+    height: 840px;
     background-image: url('/images/products/sdk-bg1.png');
     background-size: contain;
     background-position: center;
@@ -92,17 +74,6 @@ useHead(() => ({
     z-index: 3;
     // opacity: 0.6;
   }
-
-  .video-bg {
-    width: 100%;
-    height: auto;
-    display: block;
-    z-index: 1;
-    position: relative;
-    object-fit: cover;
-    clip-path: inset(0 0 0% 0);
-  }
-
   .video-title {
     position: absolute;
     top: 30%;