feat(移动端): 在SDK产品页面添加架构图并优化样式

- 新增安全加速SDK防护架构图展示
- 调整PlansSection组件布局，增加背景装饰效果
- 优化页面间距和视觉层次

app/components/mobile/home/PlansSection.vue

@@ -31,6 +31,8 @@ import { plans } from '~/utils/plans'
 .mb-plans {
   width: 100%;
   box-sizing: border-box;
+  position: relative;
+  z-index: 2;
 }
 
 .mb-plans-list {

app/pages/mobile/products/sdk.vue

@@ -37,7 +37,13 @@
         </div>
       </div>
     </section>
-    <PlansSection class="mb-plans-section" />
+    <div class="mb-plans-box">
+      <PlansSection />
+    </div>
+    <section class="mb-flow">
+      <h3>安全加速SDK防护架构</h3>
+      <NuxtImg loading="eager" src="/images/products/sdk-flow.png" alt="安全加速SDK防护架构" />
+    </section>
 
   </section>
 </template>
@@ -248,7 +254,43 @@ const toggleAccordion = (index) => {
     max-height: 200px;
   }
 }
-.mb-plans-section{
+
+.mb-plans-box {
   margin-top: 44px;
+  margin-bottom: 60px;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -50px;
+    z-index: 0;
+    width: 260px;
+    height: 260px;
+    transform: translate(-50%) rotate(164deg);
+    border-radius: 260px;
+    background: linear-gradient(189deg, #7A41FF 6.39%, rgba(3, 0, 20, 0.20) 30.53%);
+    filter: blur(10px);
+  }
+}
+
+.mb-flow {
+  padding-top: 20px;
+
+  h3 {
+    text-align: center;
+    font-size: 20px;
+    font-weight: 500;
+    background: linear-gradient(91deg, #C597FF 4.96%, #C597FF 109.07%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  :deep(img) {
+    width: 100%;
+    height: auto;
+  }
 }
 </style>