feat: tab页

app/components/home/ProductTabs.vue

@@ -0,0 +1,375 @@
+<template>
+  <div class="product-tabs-container">
+    <section class="product-tabs">
+      <div 
+        v-for="(tab, index) in tabs" 
+        :key="index"
+        class="tab-item"
+        :class="{ active: activeTab === index }"
+        @click="activeTab = index"
+      >
+        {{ tab }}
+      </div>
+    </section>
+
+    <section class="product-cards-wrapper">
+      <transition name="fade" mode="out-in">
+        <section :key="activeTab" class="product-cards">
+          <div class="product-card">
+            <h3 class="card-title">{{ currentCards[0].title }}</h3>
+            <p class="card-description">
+              {{ currentCards[0].description }}
+            </p>
+            <div class="card-features">
+              <span v-for="(feature, idx) in currentCards[0].features" :key="idx" class="feature-tag">{{ feature }}</span>
+            </div>
+            <div class="card-actions">
+              <button class="btn-primary">更多详情</button>
+              <button class="btn-secondary">0元体验</button>
+            </div>
+          </div>
+
+          <div class="divider"></div>
+
+          <div class="product-card">
+            <h3 class="card-title">{{ currentCards[1].title }}</h3>
+            <p class="card-description">
+              {{ currentCards[1].description }}
+            </p>
+            <div class="card-features">
+              <span v-for="(feature, idx) in currentCards[1].features" :key="idx" class="feature-tag">{{ feature }}</span>
+            </div>
+            <div class="card-actions">
+              <button class="btn-primary">更多详情</button>
+              <button class="btn-secondary">0元体验</button>
+            </div>
+          </div>
+
+          <div class="divider"></div>
+
+          <div class="product-card">
+            <h3 class="card-title">{{ currentCards[2].title }}</h3>
+            <p class="card-description">
+              {{ currentCards[2].description }}
+            </p>
+            <div class="card-features">
+              <span v-for="(feature, idx) in currentCards[2].features" :key="idx" class="feature-tag">{{ feature }}</span>
+            </div>
+            <div class="card-actions">
+              <button class="btn-primary">更多详情</button>
+              <button class="btn-secondary">0元体验</button>
+            </div>
+          </div>
+        </section>
+      </transition>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeTab = ref(0)
+
+const tabs = [
+  '网站安全加速',
+  'TCP业务安全',
+  '客户端安全加速',
+  '专家服务',
+  '零信任安全访问',
+  '出海业务保障'
+]
+
+const cardData = [
+  [
+    {
+      title: 'Web安全加速',
+      description: '为游戏、电商、金融、医疗、门户等网站业务,提供DDoS、CC、页面篡改、爬虫等各类攻击防护,结合精准访问控制和全网联防联控,在抵御各类攻击的同时,保障网站业务的快速稳定访问。',
+      features: ['支持HTTP、HTTPS和WebSocket协议', '适用网站类业务']
+    },
+    {
+      title: 'DNS安全加速',
+      description: '安全可靠的智能DNS解析服务,具备多重灾备机制,支持IPv4、IPv6双栈,全球及自定义智能解析线路,运营商缓存刷新,提供大QPS DNS查询攻击、大流量DNS DDoS攻击等针对域名解析的攻击防御服务,为网站域名提供安全、稳定、可靠的解析体验。',
+      features: ['支持定制专用清洗集群']
+    },
+    {
+      title: '扫描观测(漏洞扫描)',
+      description: '为网站业务提供安全体检服务,模拟黑客视角,对网站业务进行可用性监测、内容安全监测、漏洞渗透性探测等风险多维度巡检综合评估,提出相应安全对策,告警安全事件,输出网站安全体检报告',
+      features: ['支持HTTP、HTTPS和WebSocket协议', '适用网站类业务']
+    }
+  ],
+  [
+    {
+      title: 'TCP/UDP游戏盾',
+      description: '专为游戏、语音、视频、物联网等TCP/UDP业务设计,提供高性能、低延迟的DDoS防护服务,支持源站隐藏、智能调度、协议清洗,确保业务稳定运行。',
+      features: ['支持TCP/UDP协议', '超低延迟转发', '游戏专用优化']
+    },
+    {
+      title: 'UDP游戏加速',
+      description: '针对FPS、MOBA等实时游戏场景优化,提供UDP协议加速服务,减少丢包和延迟,提升玩家游戏体验。',
+      features: ['实时性优先', '全球节点覆盖', '智能路由']
+    },
+    {
+      title: '端口防护',
+      description: '对指定端口进行针对性防护,支持端口范围配置,灵活适配各种业务场景,精准过滤攻击流量。',
+      features: ['支持端口段配置', '灵活策略配置', '实时监控']
+    }
+  ],
+  [
+    {
+      title: 'APP安全加速',
+      description: '为移动应用提供安全加速服务,整合SDK集成方式,实现APP端的DDoS防护、CC攻击防护,保障移动应用稳定运行。',
+      features: ['Android/iOS双平台', '轻量级SDK', '自动更新']
+    },
+    {
+      title: 'SDK游戏盾',
+      description: '专为游戏客户端开发的安全SDK,内置多层防护算法,实现端到端的安全防护,有效对抗各类游戏攻击。',
+      features: ['Unity/Unreal支持', '零侵入集成', '实时防护']
+    },
+    {
+      title: 'H5安全加速',
+      description: '为H5页面和小程序提供安全加速服务,支持混合开发框架,统一的安全防护策略,简化开发复杂度。',
+      features: ['支持小程序', '混合开发兼容', '统一管理']
+    }
+  ],
+  [
+    {
+      title: '安全评估服务',
+      description: '专业的安全团队提供全方位的安全评估服务,包括渗透测试、漏洞扫描、安全加固等,帮助发现并修复安全隐患。',
+      features: ['资深专家团队', '详细评估报告', '修复建议']
+    },
+    {
+      title: '应急响应服务',
+      description: '7x24小时应急响应服务,在发生安全事件时快速响应,协助客户进行攻击溯源、数据恢复、系统加固。',
+      features: ['24小时在线', '快速响应', '溯源分析']
+    },
+    {
+      title: '安全培训服务',
+      description: '面向开发人员和运维人员的安全培训,提升团队安全意识和技能,预防安全问题的发生。',
+      features: ['定制化课程', '实战演练', '认证证书']
+    }
+  ],
+  [
+    {
+      title: '零信任访问控制',
+      description: '基于零信任架构的访问控制服务,实现身份认证、设备信任、环境感知的多维安全验证,确保只有可信终端和用户才能访问资源。',
+      features: ['多因素认证', '动态访问控制', '持续验证']
+    },
+    {
+      title: '内网安全访问',
+      description: '为远程办公和内网访问提供安全通道,替代传统VPN,提供更好的性能和安全性,支持细粒度的权限管理。',
+      features: ['替代VPN', '高性能', '细粒度权限']
+    },
+    {
+      title: '数据传输加密',
+      description: '端到端的数据传输加密服务,保障数据在传输过程中的安全性,防止数据泄露和窃听。',
+      features: ['国密算法', '端到端加密', '合规认证']
+    }
+  ],
+  [
+    {
+      title: '全球CDN加速',
+      description: '全球节点覆盖的CDN加速服务,为出海业务提供低延迟、高可用的内容分发,提升海外用户访问体验。',
+      features: ['全球节点', '智能调度', '实时监控']
+    },
+    {
+      title: 'DNS智能解析',
+      description: '针对海外用户的智能DNS解析服务,根据用户地理位置返回最优节点IP,实现就近访问,降低延迟。',
+      features: ['智能路由', '多线路支持', '快速切换']
+    },
+    {
+      title: '合规服务支持',
+      description: '了解并支持各国的网络安全和数据保护法规,帮助出海业务合规运营,降低法律风险。',
+      features: ['GDPR支持', '多国合规', '法务咨询']
+    }
+  ]
+]
+
+const currentCards = computed(() => cardData[activeTab.value])
+</script>
+
+<style scoped lang="scss">
+.product-tabs-container {
+  width: 100%;
+}
+
+.product-tabs {
+  width: 100%;
+  max-width: 1200px;
+  padding: 0 20px;
+  box-sizing: border-box;
+  height: 100px;
+  margin: 0 auto;
+  border-radius: 150px;
+  background: linear-gradient(7.88deg, rgba(165, 101, 255, 0.3) 0%, rgba(3, 0, 20, 0.3) 100%);
+  display: flex;
+  align-items: center;
+  gap: 60px;
+
+  .tab-item {
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 16px;
+    color: #ffffff;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 177px;
+    height: 60px;
+    padding: 0;
+    border-radius: 46.5px;
+    background: transparent;
+
+    &.active {
+      background: linear-gradient(62.84deg, rgba(130, 77, 255, 1) 0%, rgba(164, 125, 255, 1) 100%);
+      color: #ffffff;
+      transform: translateY(0);
+    }
+
+    &:hover:not(.active) {
+      color: #bdbdbd;
+      transform: translateY(-2px);
+    }
+  }
+}
+
+.product-cards-wrapper {
+  width: 100%;
+  max-width: 1200px;
+  margin: 81px auto 0;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+.product-cards {
+  width: 100%;
+  height: 474px;
+  border-radius: 20px;
+  background: linear-gradient(1.67deg, rgba(165, 101, 255, 0.3) 0%, rgba(3, 0, 20, 0.3) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.product-card {
+  width: 266px;
+  height: 336px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 30px 0 35px 0;
+
+  .card-title {
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 20px;
+    color: #ffffff;
+    margin: 0;
+    text-align: center;
+  }
+
+  .card-description {
+    width: 266px;
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #ffffff;
+    margin: 0;
+    text-align: left;
+    word-wrap: break-word;
+  }
+
+  .card-features {
+    width: 237px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .feature-tag {
+      font-family: 'Source Han Sans CN', sans-serif;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 14px;
+      color: #9b71ff;
+      margin-bottom: 12px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .card-actions {
+    width: 263px;
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+
+    .btn-primary {
+      width: 120px;
+      height: 40px;
+      border-radius: 8px;
+      background: linear-gradient(24.74deg, rgba(163, 157, 255, 1) 0%, rgba(125, 70, 255, 1) 100%);
+      border: none;
+      font-family: 'Source Han Sans CN', sans-serif;
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
+      cursor: pointer;
+      transition: opacity 0.3s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .btn-secondary {
+      width: 120px;
+      height: 40px;
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.5);
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(15.2px);
+      font-family: 'Source Han Sans CN', sans-serif;
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
+      cursor: pointer;
+      margin-left: 23px;
+      transition: opacity 0.3s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+.divider {
+  width: 1px;
+  height: 450px;
+  background-color: rgba(255, 255, 255, 0.1);
+  margin: 0 65.5px;
+}
+</style>

app/pages/pc/index.vue

@@ -19,66 +19,7 @@
         </div>
       </section>
 
-      <!-- 产品标签栏 -->
-      <section class="product-tabs">
-        <div class="tab-item active">网站安全加速</div>
-        <div class="tab-item">TCP业务安全</div>
-        <div class="tab-item">客户端安全加速</div>
-        <div class="tab-item">专家服务</div>
-        <div class="tab-item">零信任安全访问</div>
-        <div class="tab-item">出海业务保障</div>
-      </section>
-
-      <!-- 产品卡片区域 -->
-      <section class="product-cards">
-        <div class="product-card">
-          <h3 class="card-title">Web安全加速</h3>
-          <p class="card-description">
-            为游戏、电商、金融、医疗、门户等网站业务，提供DDoS、CC、页面篡改、爬虫等各类攻击防护，结合精准访问控制和全网联防联控，在抵御各类攻击的同时，保障网站业务的快速稳定访问。
-          </p>
-          <div class="card-features">
-            <span class="feature-tag">支持HTTP、HTTPS和WebSocket协议</span>
-            <span class="feature-tag">适用网站类业务</span>
-          </div>
-          <div class="card-actions">
-            <button class="btn-primary">更多详情</button>
-            <button class="btn-secondary">0元体验</button>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="product-card">
-          <h3 class="card-title">DNS安全加速</h3>
-          <p class="card-description">
-            安全可靠的智能DNS解析服务，具备多重灾备机制，支持IPv4、IPv6双栈，全球及自定义智能解析线路，运营商缓存刷新，提供大QPS&nbsp;DNS查询攻击、大流量DNS&nbsp;DDoS攻击等针对域名解析的攻击防御服务，为网站域名提供安全、稳定、可靠的解析体验。
-          </p>
-          <div class="card-features">
-            <span class="feature-tag">支持定制专用清洗集群</span>
-          </div>
-          <div class="card-actions">
-            <button class="btn-primary">更多详情</button>
-            <button class="btn-secondary">0元体验</button>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="product-card">
-          <h3 class="card-title">扫描观测（漏洞扫描）</h3>
-          <p class="card-description">
-            为网站业务提供安全体检服务，模拟黑客视角，对网站业务进行可用性监测、内容安全监测、漏洞渗透性探测等风险多维度巡检综合评估，提出相应安全对策，告警安全事件，输出网站安全体检报告
-          </p>
-          <div class="card-features">
-            <span class="feature-tag">支持HTTP、HTTPS和WebSocket协议</span>
-            <span class="feature-tag">适用网站类业务</span>
-          </div>
-          <div class="card-actions">
-            <button class="btn-primary">更多详情</button>
-            <button class="btn-secondary">0元体验</button>
-          </div>
-        </div>
-      </section>
+      <ProductTabs />
 
       <!-- 安全洞见标题 -->
       <section class="insight-header">
@@ -297,6 +238,7 @@
 <script setup>
 import { ref } from 'vue'
 import StatsSection from '~/components/home/StatsSection.vue'
+import ProductTabs from '~/components/home/ProductTabs.vue'
 import videoSrc from '~/assets/video/home.webm'
 import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
 import SecurityParticles from '~/components/SecurityParticles.vue'
@@ -452,169 +394,6 @@ useHead(() => ({
   }
 }
 
-// 产品标签栏
-.product-tabs {
-  width: 100%;
-  max-width: 1200px;
-  padding: 0 20px;
-  box-sizing: border-box;
-  height: 100px;
-  margin: 0 auto;
-  // margin-top: 441px;
-  border-radius: 150px;
-  background: linear-gradient(7.88deg, rgba(165, 101, 255, 0.3) 0%, rgba(3, 0, 20, 0.3) 100%);
-  display: flex;
-  align-items: center;
-
-  .tab-item {
-    font-family: 'Source Han Sans CN', sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 16px;
-    color: #ffffff;
-    margin-left: 90px;
-    cursor: pointer;
-    white-space: nowrap;
-    transition: color 0.3s ease;
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:nth-child(1) {
-      width: 177px;
-      height: 60px;
-      border-radius: 46.5px;
-      background: linear-gradient(62.84deg, rgba(130, 77, 255, 1) 0%, rgba(164, 125, 255, 1) 100%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-left: 20px;
-    }
-
-    &:hover {
-      color: #bdbdbd;
-    }
-  }
-}
-
-// 产品卡片区域
-.product-cards {
-  width: 100%;
-  max-width: 1200px;
-  padding: 0 20px;
-  box-sizing: border-box;
-  min-height: 474px;
-  margin: 0 auto;
-  margin-top: 81px;
-  border-radius: 20px;
-  background: linear-gradient(1.67deg, rgba(165, 101, 255, 0.3) 0%, rgba(3, 0, 20, 0.3) 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .product-card {
-    width: 266px;
-    height: 336px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0;
-
-    .card-title {
-      font-family: 'Source Han Sans CN', sans-serif;
-      font-size: 20px;
-      font-weight: 500;
-      line-height: 20px;
-      color: #ffffff;
-      margin: 0 0 44px 0;
-      text-align: center;
-    }
-
-    .card-description {
-      width: 266px;
-      font-family: 'Source Han Sans CN', sans-serif;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 24px;
-      color: #ffffff;
-      margin: 0 0 30px 0;
-      text-align: left;
-    }
-
-    .card-features {
-      width: 237px;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      margin-bottom: 48px;
-
-      .feature-tag {
-        font-family: 'Source Han Sans CN', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 14px;
-        color: #9b71ff;
-        margin-bottom: 12px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-
-    .card-actions {
-      width: 263px;
-      display: flex;
-      align-items: center;
-
-      .btn-primary {
-        width: 120px;
-        height: 40px;
-        border-radius: 8px;
-        background: linear-gradient(24.74deg, rgba(163, 157, 255, 1) 0%, rgba(125, 70, 255, 1) 100%);
-        border: none;
-        font-family: 'Source Han Sans CN', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        color: #ffffff;
-        cursor: pointer;
-        transition: opacity 0.3s ease;
-
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-
-      .btn-secondary {
-        width: 120px;
-        height: 40px;
-        border-radius: 8px;
-        border: 1px solid rgba(255, 255, 255, 0.5);
-        background: rgba(255, 255, 255, 0.2);
-        backdrop-filter: blur(15.2px);
-        font-family: 'Source Han Sans CN', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        color: #ffffff;
-        cursor: pointer;
-        margin-left: 23px;
-        transition: opacity 0.3s ease;
-
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-
-  .divider {
-    width: 1px;
-    height: 450px;
-    background-color: rgba(255, 255, 255, 0.1);
-    margin: 0 65.5px;
-  }
-}
 
 // 安全洞见标题
 .insight-header {