feat(mobile): 添加CDN产品页面内容及安全服务组件

- 在移动端产品页面新增CDN功能介绍、特性卡片展示模块
- 创建安全服务套餐组件，展示不同版本防护方案
- 移除桌面端页面中的冗余注释
- 添加响应式样式支持移动端布局

app/components/mobile/products/SecurityServicesSuite.vue

@@ -0,0 +1,245 @@
+<template>
+  <section class="service-container">
+    <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 src="/images/products/icon.png" alt="icon"> 支付
+            </div>
+          </template>
+          <template v-else>
+            <div class="customized-icon">
+              <NuxtImg src="/images/products/customized.png" alt="定制" />
+            </div>
+          </template>
+          <div class="action-btn">{{ item.btnText }}</div>
+          <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>
+.service-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  .service-content {
+    position: relative;
+    z-index: 2;
+    padding-top: 40px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    h2 {
+      font-size: 20px;
+      font-weight: 500;
+      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: 26px;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .service-card {
+        border-radius: 4px;
+        background: #1B192A;
+        width: 166px;
+        padding: 10px;
+        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: 14px;
+          font-weight: 400;
+        }
+
+        .customized-icon {
+          padding-top: 12px;
+
+          :deep(img) {
+            width: 60px;
+            height: 60px;
+          }
+        }
+
+        .card-price {
+          display: flex;
+          align-items: baseline;
+          padding: 10px 0;
+
+          .amount {
+            font-size: 24px;
+            font-weight: 700;
+            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: 14px;
+            font-weight: 400;
+          }
+        }
+
+        .payment-support {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          color: #FFF;
+          font-size: 12px;
+          font-weight: 400;
+
+          img {
+            width: 20px;
+            height: 20px;
+          }
+        }
+
+        .action-btn {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 146px;
+          height: 28px;
+          margin-top: 12px;
+          border-radius: 28px;
+          background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+          color: #FFF;
+          font-size: 14px;
+          font-weight: 400;
+        }
+
+        .features-list {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          margin-top: 10px;
+
+          .feature-item {
+            display: flex;
+            justify-content: space-between;
+            font-size: 10px;
+            font-weight: 400;
+
+            .label {
+              color: rgba(255, 255, 255, 0.60)
+            }
+
+            .value {
+              color: #FFF;
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

app/pages/mobile/products/web.vue

@@ -21,6 +21,41 @@
         </div>
       </section>
     </section>
+    <section class="mb-cdn">
+      <h2>678CDN功能</h2>
+      <p>让科技为您的业务发光发亮，CDN功能助力您的网站顺畅、高效、安全地运作，同时提供数据防范和预防技术，让您的网站免于遭受恶意攻击</p>
+    </section>
+    <section class="mb-cdn-content">
+      <div class="cdn-item">
+        <div class="item-text">
+          <h3>CDN内容分发</h3>
+          <p>
+            加速您的网站，最速达优化性能。CDN内容分发网络遍布五大洲，我们的CDN将使您的网站前所未有的更流畅，提升您的用户体验</p>
+        </div>
+        <NuxtImg class="item-img img1" src="/images/products/cdn.png" alt="cdn分发" />
+      </div>
+      <div class="cdn-item">
+        <NuxtImg class="item-img img2" src="/images/products/678yun.png" alt="678云盾" />
+        <div class="item-text">
+          <h3>网站保护</h3>
+          <p>
+            使用678云盾高防CDN网站保护，网站攻击将无处遁形!我们的专业服务团队利用最佳技术和技巧为您提供安全性和可靠性保护，确保您的业务安全运营，稳步前进。</p>
+        </div>
+      </div>
+    </section>
+    <section class="mb-card-text">
+      <h2>678CDN 特性</h2>
+    </section>
+    <section class="mb-cdn-cards">
+      <div class="card-item" v-for="(card, index) in cards" :key="index">
+        <div class="item-title">
+          <img :src="card.icon" alt="icon" />
+          <h4>{{ card.title }}</h4>
+        </div>
+        <div class="item-text">{{ card.text }}</div>
+      </div>
+    </section>
+    <SecurityServicesSuite />
   </section>
 </template>
 
@@ -31,6 +66,46 @@ useHead(() => ({
     { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
   ]
 }))
+import icon1 from '~/assets/svg/products/web/icon.svg'
+import icon2 from '~/assets/svg/products/web/icon2.svg'
+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/mobile/products/SecurityServicesSuite.vue'
+
+const cards = [
+  {
+    icon: icon1,
+    title: 'Anycast',
+    text: '通过单一IP地址在全球范围内提供所有内容，并确保低延迟的访问体验。',
+  },
+  {
+    icon: icon2,
+    title: 'HTTP/2',
+    text: '除了支持HTTP/1.0和HTTP/1.1外，还支持更加高效的HTTP/2协议，进一步提升性能。',
+  },
+  {
+    icon: icon3,
+    title: 'HTTPS',
+    text: '提供自定义SSL/TLS证书，确保使用您选定的域名以保障内容的安全性。',
+  },
+  {
+    icon: icon4,
+    title: '失效操作',
+    text: '缓存内容删除仅需几分钟，快速响应并更新内容。',
+  },
+  {
+    icon: icon5,
+    title: '日志记录',
+    text: '与Stackdriver Logging集成，为您提供每次缓存命中与未命中的详细日志信息。',
+  },
+  {
+    icon: icon6,
+    title: '安全',
+    text: '多维度拦截（国家、URL、IP）、请求和带宽限制、CC保护。',
+  }
+]
 </script>
 
 <style scoped lang="scss">
@@ -198,5 +273,133 @@ useHead(() => ({
     }
   }
 
+  .mb-cdn {
+    padding-top: 24px;
+    text-align: center;
+
+    h2 {
+      font-size: 20px;
+      font-weight: 500;
+      background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    color: rgba(255, 255, 255, 0.60);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+  .mb-cdn-content {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    margin: 30px auto 0;
+    gap: 10px;
+
+    .cdn-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 20px;
+
+      .item-img {
+        flex-shrink: 0;
+      }
+
+      .img1 {
+        width: 154px;
+        height: auto;
+      }
+
+      .img2 {
+        width: 140px;
+        height: auto;
+      }
+    }
+  }
+
+  .item-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: 500;
+      background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    p {
+      width: 100%;
+      color: rgba(255, 255, 255, 0.60);
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+  }
+
+  .mb-card-text {
+    padding: 16px 0;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 500;
+    background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .mb-cdn-cards {
+    width: 100%;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+
+    .card-item {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid rgba(255, 255, 255, 0.10);
+      background: rgba(255, 255, 255, 0.10);
+
+      .item-title {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+
+        img {
+          width: 22px;
+          height: 22px;
+        }
+
+        h4 {
+          color: #FFF;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 700;
+        }
+      }
+
+      .item-text {
+        width: 100%;
+        color: rgba(255, 255, 255, 0.60);
+        font-size: 10px;
+        font-weight: 400;
+        line-height: 14px;
+      }
+    }
+  }
 }
 </style>

app/pages/web/products/web.vue

@@ -22,10 +22,6 @@
         </div>
       </section>
     </section>
-
-    <!-- 透视网格效果 -->
-
-
     <section class="cdn-container">
       <div class="cdn-title">
         <h2>