DDAC/app/components/home/ProductTabs.vue

<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(177deg, rgba(165, 101, 255, 0.30) -20.47%, rgba(3, 0, 20, 0.30) 134.25%);
  backdrop-filter: blur(20px);
  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>