feat(products): 添加高防服务器页面完整实现和样式优化

- 实现高防服务器完整页面，包括标题区、卡片区、标签切换和安全特性展示
- 优化SDK产品页面的图片尺寸和图标样式
- 为移动端首页添加DDAC标题设置

app/pages/mobile/index.vue

@@ -114,6 +114,9 @@ import ProductTabs from '~/components/mobile/home/ProductTabs.vue'
 import PlansSection from '~/components/mobile/home/PlansSection.vue'
 import Flowchart from '~/components/mobile/home/Flowchart.vue'
 import StatsSection from '~/components/mobile/home/StatsSection.vue';
+useHead(() => ({
+  title: 'DDAC',
+}))
 </script>
 
 <style scoped lang="scss">

app/pages/mobile/products/boost.vue

@@ -1,26 +1,530 @@
 <template>
-  <div class="mobile-product">
-    <h1>高防服务器</h1>
-  </div>
+  <section>
+    <section class="mb-boost-section">
+      <NuxtImg class="sd-bg" src="/images/products/sd-bg.png" alt="cdn" />
+      <div class="video-title">
+        <h1><span>高防</span>服务器，也能<span>极致加速</span></h1>
+        <div class="video-subtitle">
+          <p>因为我们通过全球近源清洗，把攻击挡在千里之外，为合法流量让出了纯净快车道。</p>
+        </div>
+        <div class="video-btn">
+          <span>联系我们</span>
+          <Icon name="line-md:chevron-right" />
+        </div>
+      </div>
+    </section>
+    <section class="mb-boost-card">
+      <div class="card-title">
+        <h2>真正实现秒级抵御</h2>
+        <p>让高防服务器在DDoS攻击中守护您的业务无忧</p>
+      </div>
+      <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">
+              <span class="accordion-title">{{ item.title }}</span>
+            </div>
+            <Icon 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>
+    <SecurityServicesSuite />
+    <section class="mb-tabs-section">
+      <div class="toggle-container">
+        <div class="toggle-bg" :class="{ 'right': activeTab === 'defense' }"></div>
+        <div class="toggle-option" :class="{ 'active': activeTab === 'accelerate' }" @click="activeTab = 'accelerate'">
+          加速
+        </div>
+        <div class="toggle-option" :class="{ 'active': activeTab === 'defense' }" @click="activeTab = 'defense'">
+          防御
+        </div>
+      </div>
+      <div class="tab-content">
+        <transition name="fade" mode="out-in">
+          <div v-if="activeTab === 'accelerate'" key="accelerate" class="content-panel">
+            <div class="content-text">
+              <h3>高防，不应以牺牲速度为代价</h3>
+              <div>
+                <p> 在传统方案中，您常常面临两难选择：开启全力防御，可能影响用户体验；追求极致速度，又需在安全上承担风险。 我们的高防服务器终结了这种取舍。它通过全球近源清洗与智能路由调度的一体化架构，实现了：</p>
+                <p> 1. <span>加速式防御</span>：攻击在远离您服务器的外围被化解，合法流量无需绕行任何冗余检查点，路径更短，延迟更低。</p>
+                <p>2. <span>无感安全</span>：用户不会感知到任何复杂的验证或速度衰减，他们只会体验到前所未有的稳定与流畅。</p>
+                <p> <span>这意味您的业务可以同时达成两个看似矛盾的目标：在顶级安全防护下，实现全球用户的极速访问。</span></p>
+              </div>
+            </div>
+          </div>
+          <div v-else key="defense" class="content-panel">
+            <div class="content-text">
+              <h3>御攻击于无形，赋业务以极速</h3>
+              <div>
+                <p>我们的高防服务器，重新定义了“防护”的含义。它并非在您的业务通道上设置一道需要检查的“减速闸”，而是在全球网络边缘提前构建了一个智能的“净化与调度层”。</p>
+                <p>• <span>对于攻击流量</span>：在靠近攻击源的枢纽进行实时清洗与拦截，使其根本无权进入您的业务通道。</p>
+                <p>• <span>对于合法用户</span>：系统自动为其选择最洁净、最短、最稳定的路径，直连您的服务器。</p>
+                <p><span>因此，您获得的不是一个“更安全但可能更慢”的服务器，而是一个 “因极致安全而更加通畅” 的业务环境。威胁被阻挡在外，而体验畅行无内。</span></p>
+              </div>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </section>
+    <section class="mb-security-section">
+      <div class="security-title">
+        <h2>安全&nbsp;&nbsp;可靠&nbsp;&nbsp;极速</h2>
+        <p>防御与加速，一体两面，同时生效</p>
+      </div>
+      <div class="features-grid">
+        <div class="feature-item">
+          <Icon name="material-symbols:check-circle-outline" />
+          <span>1. 单节点2T 防御</span>
+        </div>
+        <div class="feature-item">
+          <Icon name="material-symbols:check-circle-outline" />
+          <span>2. 近源清洗，攻击止步于千里之外</span>
+        </div>
+        <div class="feature-item">
+          <Icon name="material-symbols:check-circle-outline" />
+          <span>4. 一套架构，双重使命</span>
+        </div>
+        <div class="feature-item">
+          <Icon name="material-symbols:check-circle-outline" />
+          <span>3. 提供真正的「安全加速」</span>
+        </div>
+      </div>
+      <NuxtImg class="simg" src="/images/products/suo.png" alt="suo" />
+    </section>
+  </section>
 </template>
 
 <script setup>
 useHead(() => ({
-  title: '高防服务器 - 移动端',
-  meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
-  ]
+  title: '高防服务器',
 }))
+import SecurityServicesSuite from '~/components/mobile/products/SecurityServicesSuite.vue'
+const activeTab = ref('accelerate')
+
+const accordionItems = [
+  {
+    title: '美/日/港三地高防节点灵活部署，助您业务即刻抵御DDoS风',
+    description: ` • 美国节点：立足全球网络核心，提供卓越的欧美访问体验与高规格防御带宽，是进军国际市场的战略支点。
+ • 日本节点：作为东亚数据枢纽，为日本、韩国及泛亚地区用户提供超低延迟访问，保障区域业务流畅稳定。
+ • 香港节点：具备独特的网络中立性与中国大陆极速连接能力，是同时服务内地用户与全球业务的绝佳桥梁。`,
+  },
+  {
+    title: '全球分布式近源清洗，让攻击流量无法触及您的业务核心',
+    description: ` 我们的国际高级防御线路，为您构筑了一道远离业务核心的“防火墙”。它基于遍布全球的多个流量清洗中心，提供高达2Tbps的单点防御带宽。其核心原理在于近源清洗：当攻击流量还在国际网络枢纽中奔袭时，系统便能在最靠近攻击源的节点对其进行实时识别、分流与彻底清洗。这意味着，只有洁净、安全的流量才会被转发至您的服务器。`,
+  },
+  {
+    title: '从全局架构到智能边缘，为您重定义“安全”与“速度”',
+    description: ` 我们提供的不仅是一个高防节点，而是一张深度融合安全能力与全球加速的智能网络。 我们深知，传统的“CDN加速”与“高防服务器”是分离的两层，这常常意味着复杂的配置与潜在的性能损耗。因此，我们从根本上重新设计，基于完整的全球智能网络，原生构建了具备强大防护能力的CDN节点。 每一个CDN节点，都原生集成了与骨干网同级的DDoS清洗与Web应用加速能力。 MITM Attack。`,
+  },
+]
+
+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-boost-section {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+
+
+  .sd-bg {
+    position: absolute;
+    width: 260px;
+    height: auto;
+    right: 0;
+    top: 0;
+    // transform: translate(-50%);
+  }
+
+
+  .video-title {
+    padding-top: 20px;
+    position: relative;
+    width: 100%;
+    z-index: 3;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    h1 {
+      color: #D8D3FF;
+      font-size: 14px;
+      font-weight: 500;
+
+      span {
+        color: #997DFF;
+      }
+    }
+
+    .video-subtitle {
+      color: #E2D9FF;
+      font-size: 10px;
+      font-weight: 400;
+      width: 168px;
+    }
+
+    .video-text {
+      color: #E2D9FF;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 300;
+      line-height: 30px;
+    }
+
+
+    .video-btn {
+      margin-top: 16px;
+      display: flex;
+      box-sizing: border-box;
+      width: 85px;
+      height: 24px;
+      justify-content: center;
+      align-items: center;
+      gap: 6px;
+      border-radius: 4px;
+      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+
+      span {
+        color: #FFF;
+        font-size: 10px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+.mb-boost-card {
+  margin-top: 22px;
+
+  .card-title {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+
+    h2 {
+      color: #FFF;
+      font-size: 20px;
+      font-weight: 400;
+    }
+
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      background: linear-gradient(90deg, #A2C2FF 5.58%, #A47DFF 89.68%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .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;
+      overflow: hidden;
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: -40px;
+        bottom: -40px;
+        width: 160px;
+        height: 160px;
+        border-radius: 999px;
+        pointer-events: none;
+        background: conic-gradient(from 45deg, #5A7DFF, #9E3BFF, #5A7DFF);
+        filter: blur(30px) drop-shadow(0 0 20px rgba(90, 125, 255, 0.5));
+        opacity: 0;
+        transition: opacity 200ms ease;
+        z-index: 0;
+      }
+
+      &.is-open::after {
+        opacity: .4;
+      }
+    }
+
+    .accordion-header {
+      display: flex;
+      align-items: start;
+      justify-content: space-between;
+      gap: 20px;
+    }
+
+    .accordion-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+    }
+
+    .accordion-title {
+      color: #FFF;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .accordion-icon {
+      color: #fff;
+      font-size: 20px;
+      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-tabs-section {
+  margin-top: 48px;
+  width: 100%;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 30px;
+    transform: translateX(-50%);
+    width: 287px;
+    height: 147px;
+    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(30px);
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 30px;
+    transform: translateX(-50%);
+    width: 190px;
+    height: 90px;
+    border-radius: 574px;
+    background: linear-gradient(180deg, #7B8CFF 0.19%, #8755FF 46.36%);
+    filter: blur(30px);
+    z-index: 1;
+  }
+
+
+  .toggle-container {
+    position: relative;
+    display: flex;
+    width: 215px;
+    height: 52px;
+    border-radius: 26px;
+    border: 1px solid #CCA8FF;
+    background: rgba(22, 19, 56, 0.50);
+    backdrop-filter: blur(10px);
+    cursor: pointer;
+    overflow: hidden;
+    user-select: none;
+    margin: 0 auto;
+    z-index: 10;
+    box-sizing: border-box;
+  }
+
+  .toggle-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    background: #17133B;
+    border-radius: 24px;
+    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+    z-index: 1;
+  }
+
+  .toggle-bg.right {
+    transform: translateX(100%);
+  }
+
+  .toggle-option {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    color: #9D8FFF;
+    font-size: 16px;
+    font-weight: 500;
+    transition: color 0.3s;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .toggle-option.active {
+    color: #D2CCFF;
+  }
+
+  .tab-content {
+    position: relative;
+    width: 100%;
+    margin: 16px auto 0;
+    padding: 28px 16px;
+    box-sizing: border-box;
+    z-index: 2;
+    border-radius: 20px;
+    border-top: 2px solid #9F46FF;
+    background: rgba(28, 26, 43, 0.60);
+    backdrop-filter: blur(100px);
+    color: #fff;
+
+    .content-panel {
+      display: flex;
+
+      .content-text {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+
+        h3 {
+          text-align: center;
+          color: #FFF;
+          font-size: 14px;
+          font-weight: 400;
+        }
+
+        p {
+          color: rgba(255, 255, 255, 0.60);
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 24px;
+        }
+
+        span {
+          color: #A39DFF;
+        }
+      }
+    }
+  }
+}
+
+.mb-security-section {
+  margin-top: 56px;
+
+  .security-title {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    align-items: center;
+
+    h2 {
+      color: #FFF;
+      font-size: 20px;
+      font-weight: 400;
+    }
+
+    p {
+      color: #A39DFF;
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+
+  .features-grid {
+    margin-top: 26px;
+    margin-bottom: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+
+    .feature-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .iconify {
+        color: #A39DFF;
+        width: 14px;
+        height: 14px;
+      }
+
+      span {
+        color: #FFF;
+        font-size: 12px;
+        font-weight: 400;
+        white-space: nowrap;
+      }
+    }
+  }
 
-  h1 {
-    font-size: 24px;
+  .simg {
+  
+    margin: 0 -16px;
+    width: 375px;
+    height: auto;
   }
 }
 </style>

app/pages/mobile/products/sdk.vue

@@ -24,10 +24,10 @@
           :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">
+              <img :src="item.icon" alt="icon">
               <span class="accordion-title">{{ item.title }}</span>
             </div>
-            <Icon size="20" name="line-md:chevron-right" class="accordion-icon" />
+            <Icon name="line-md:chevron-right" class="accordion-icon" />
           </div>
           <Transition name="accordion-expand">
             <div v-show="openIndices.includes(index)" class="accordion-body">
@@ -207,6 +207,11 @@ const toggleAccordion = (index) => {
       display: flex;
       align-items: center;
       gap: 10px;
+
+      img {
+        width: 24px;
+        height: 24px;
+      }
     }
 
     .accordion-title {
@@ -217,6 +222,7 @@ const toggleAccordion = (index) => {
 
     .accordion-icon {
       color: #fff;
+      font-size: 20px;
       transition: transform 0.2s ease;
     }