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.name }}
      </div>
    </section>

    <section class="product-cards-wrapper">
      <Transition name="fade" mode="out-in">
        <component :is="currentLayout" :key="activeTab" :cards="currentTabData.cards" />
      </Transition>
    </section>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import MultiCardLayout from './ProductTabs/MultiCardLayout.vue'
import SingleCardLayout from './ProductTabs/SingleCardLayout.vue'

const activeTab = ref(0)

const tabs = [
  {
    name: '网站安全加速',
    layout: 'multi',
    cards: [
      {
        title: 'Web安全加速',
        description: '为游戏、电商、金融、医疗、门户等网站业务，提供DDoS、CC、页面篡改、爬虫等各类攻击防护，结合精准访问控制和全网联防联控，在抵御各类攻击的同时，保障网站业务的快速稳定访问。',
        features: ['支持HTTP、HTTPS和WebSocket协议', '适用网站类业务']
      },
      {
        title: 'DNS安全加速',
        description: '安全可靠的智能DNS解析服务，具备多重灾备机制，支持IPv4、IPv6双栈，全球及自定义智能解析线路，运营商缓存刷新，提供大QPS DNS查询攻击、大流量DNS DDoS攻击等针对域名解析的攻击防御服务，为网站域名提供安全、稳定、可靠的解析体验。',
        features: ['支持定制专用清洗集群']
      },
      {
        title: '扫描观测(漏洞扫描)',
        description: '为网站业务提供安全体检服务，模拟黑客视角，对网站业务进行可用性监测、内容安全监测、漏洞渗透性探测等风险多维度巡检综合评估，提出相应安全对策，告警安全事件，输出网站安全体检报告',
        features: []
      }
    ]
  },
  {
    name: 'TCP业务安全',
    layout: 'single',
    cards: [
      {
        title: 'TCP安全加速',
        description: '为游戏、电商、金融等客户的TCP协议应用业务提供DDoS替身安全防御服务，支持HTTP、HTTPS、WebSocket和TCP协议，适用于网站及非网站业务 隐藏目标源IP，将DDoS攻击流量牵引至TCP安全加速的高防清洗集群，结合 全球IP威胁情报库、用户行为分析、特征学习、防护对抗等多种技术，有效防护SYN Flood、UDP Flood、ACK Flood、ICMP Flood、DNS Query Flood、NTP Reply Flood、CC等DDoS攻击，全方位对威胁进行阻断过滤',
        features: ['全力防御，不按防御大小计费 ', '超80Tbps储存宽带，融合强大得清洗能力']
      }
    ]
  },
  {
    name: '客户端安全加速',
    layout: 'single',
    cards: [
      {
        title: 'SDK安全加速 AntiDDoS SDK （Client&Mobile SDK）',
        description: '专门针对游戏、电商、金融等APP提供DDoS、CC攻击防护服务通过在端应用嵌入安全SDK，结合风控大脑，形成主动端安全、风险管控调度、云安全资源池的端管云一体化安全架构核心风控大脑持续评估每个终端设备环境、网络环境、应用程序和用户行为是否可信，标注威胁等级 未通过可信认证的终端将被拒绝服务且进行攻击智能拆分调度，可信用户即使在被攻击后也能秒级调度，最终做到动态地隔离风险用户，定位攻击者',
        features: ['终端管控、智能调度、DDoS/CC免疫、链路加密、精准溯源']
      }
    ]
  },
  {
    name: '专家服务',
    layout: 'single',
    cards: [
      {
        title: '“管家式”人工服务,全天候业务护航',
        description: '提供等保咨询、渗透测试、应急演练、应急响应、现场值守、重点事件安全保障等多种专家服务',
        features: []
      }
    ]
  },
  {
    name: '零信任安全访问',
    layout: 'single',
    cards: [
      {
        title: '零信任安全访问',
        description: '为企业应用提供服务级的动态自适应细粒度授权，替代内部VPN，实现应用统一管理、企业应用程序远程访问服务，解决企业内、外部相对应的安全风险',
        features: []
      }
    ]
  },
  {
    name: '出海业务保障',
    layout: 'single',
    cards: [
      {
        title: '出海业务保障',
        description: '为企业应用提供服务级的动态自适应细粒度授权，替代内部VPN，实现应用统一管理、企业应用程序远程访问服务，解决企业内、外部相对应的安全风险',
        features: []
      }
    ]
  }
]

const currentTabData = computed(() => tabs[activeTab.value])

const currentLayout = computed(() => {
  return currentTabData.value.layout === 'multi' ? MultiCardLayout : SingleCardLayout
})
</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: 22px;

  .tab-item {
    
    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;
    }

    &:hover:not(.active) {
      color: #bdbdbd;
      transform: translateY(-2px);
    }
  }


}

.product-cards-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0;
  box-sizing: border-box;
}

.product-cards {
  width: 100%;
  height: 474px;
  border-radius: 20px;
  background: linear-gradient(177deg, rgba(165, 101, 255, 0.30) -20.47%, rgba(3, 0, 20, 0.30) 134.25%);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>