feat(products): 添加WebCard组件并集成到产品页面

- 新增WebCard组件展示应用场景和业务价值
- 在产品页面集成WebCard组件
- 移除Header组件底部边框样式

app/components/mobile/Header.vue

@@ -86,7 +86,6 @@ const toggleProducts = () => {
   right: 0;
   z-index: 1000;
   background: #030014;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   width: 100%;
   box-sizing: border-box;
 }

app/components/mobile/products/WebCard.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="case-container">
+    <div class="case-title">应用场景</div>
+    <div class="case-cards">
+      <div class="tabs-list">
+        <div v-for="(item, index) in cases" :key="index" class="tab-item" :class="{ active: activeIndex === index }"
+          @click="activeIndex = index">
+          {{ item.title }}
+        </div>
+      </div>
+
+      <div class="tab-content">
+        <transition name="fade" mode="out-in">
+          <div :key="activeIndex" class="content-wrapper">
+            <div class="text-content">
+              <h3 class="title">{{ cases[activeIndex].title }}</h3>
+              <p class="description">{{ cases[activeIndex].description }}</p>
+              <h4 class="sub-title">业务价值</h4>
+              <p class="value-desc">{{ cases[activeIndex].value }}</p>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const activeIndex = ref(0);
+
+const cases = [
+  {
+    title: '网站提速',
+    description: '针对网页静态资源的优化和加速分发，解决网站流量激增时用户请求量、带宽负载增高、服务器压力过大以及站点响应缓慢的问题。',
+    value: '通过压缩优化，快速加载大图、样式等资源，缩短网页响应时间，提升用户体验。访问数据决定回源行为，减少回源流量，提高请求命中率，降低带宽成本。',
+  },
+  {
+    title: '下载加速',
+    description: '适用于网站或应用的静态大文件分发，如游戏安装包、应用更新文件、补丁程序文件、音视频文件、建筑数据模型、医疗图像等较大的文件。',
+    value: '通过海量加速节点，用户获得极速下载体验。分段缓存技术增强大文件下载的传输稳定性，确保顺畅的文件传输。',
+  },
+  {
+    title: '音视频加速',
+    description: '针对视频网站、短视频等业务场景，优化源站出口压力，解决用户在观看音视频时的卡顿和不流畅问题。',
+    value: '通过海量加速节点支持高并发，提供高速稳定的资源分发，确保流畅、稳定和丰富的观看体验。同时，丰富的访问控制功能有效防止用户盗用媒体资源。',
+  },
+  {
+    title: '安全防护',
+    description: '黑客通过扫描发现互联网应用的安全漏洞，并利用爬虫、挂马、黑客病毒、数据泄露、CC攻击等手段入侵服务器和数据库，窃取核心业务数据。',
+    value: '提供恶意URL过滤、入侵防护等全面的用户防护能力，有效防御常见Web攻击。同时提供Referer黑白名单和高阶URL鉴权，全面解决盗链问题。',
+  }
+];
+</script>
+
+<style lang="scss" scoped>
+.case-container {
+  position: relative;
+
+  padding: 40px 0;
+
+  .case-title {
+    text-align: center;
+    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;
+    margin-bottom: 26px;
+  }
+
+  .case-cards {
+    width: 100%;
+  }
+
+  .tabs-list {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    padding-bottom: 8px;
+  }
+
+  .tab-item {
+    width: 82px;
+    height: 26px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.10);
+    color: rgba(255, 255, 255, 0.60);
+    font-size: 14px;
+    text-align: center;
+    line-height: 26px;
+    font-weight: 400;
+    white-space: nowrap;
+
+    &.active {
+      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+      color: #fff;
+    }
+  }
+
+  .tab-content {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding: 30px 16px 0;
+    width: 100%;
+    height: 180px;
+    background: url('/images/products/case-bg.png') no-repeat center;
+    background-size: cover;
+    color: #fff;
+  }
+
+  .content-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .text-content {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .sub-title {
+      font-size: 16px;
+      font-weight: 500;
+      margin-top: 8px;
+    }
+
+    .description {
+      font-size: 10px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.85);
+    }
+
+    .value-desc {
+      font-size: 10px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

app/pages/mobile/products/web.vue

@@ -56,6 +56,8 @@
       </div>
     </section>
     <SecurityServicesSuite />
+    <WebCard />
+    
   </section>
 </template>
 
@@ -73,6 +75,7 @@ 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'
+import WebCard from '~/components/mobile/products/WebCard.vue'
 
 const cards = [
   {