|
|
@@ -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>
|
reaper