feat: productTab

app/components/Footer.vue

@@ -133,7 +133,7 @@
 .footer {
   width: 100%;
   background-color: #030014;
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
   box-sizing: border-box;
   padding: 100px 0 0;
   min-height: 783px;
@@ -144,168 +144,164 @@
     padding: 0 360px;
     box-sizing: border-box;
 
-    // PC端样式
-    @media (min-width: 769px) {
-      .footer-brand {
-        margin-bottom: 91px;
+    .footer-brand {
+      margin-bottom: 91px;
 
-        .brand-title {
-          font-family: 'Roboto', sans-serif;
-          font-size: 36px;
-          font-weight: 900;
-          line-height: 36px;
-          color: #ffffff;
-          margin: 0;
-        }
+      .brand-title {
+        font-family: 'Roboto', sans-serif;
+        font-size: 36px;
+        font-weight: 900;
+        line-height: 36px;
+        color: #ffffff;
+        margin: 0;
       }
+    }
 
-      .footer-nav {
+    .footer-nav {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      width: 100%;
+      max-width: 1201px;
+      margin-bottom: 54px;
+
+      .nav-column {
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        width: 100%;
-        max-width: 1201px;
-        margin-bottom: 54px;
+        flex-direction: column;
+        align-items: flex-start;
+
+        &:not(:first-child) {
+          margin-left: 127px;
+        }
+
+        .nav-title {
+          font-family: 'Source Han Sans CN', sans-serif;
+          font-size: 20px;
+          font-weight: 500;
+          line-height: 20px;
+          color: #ffffff;
+          margin: 0 0 24px 0;
+          white-space: nowrap;
+        }
 
-        .nav-column {
+        .nav-list {
+          list-style: none;
+          padding: 0;
+          margin: 0;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
 
-          &:not(:first-child) {
-            margin-left: 127px;
-          }
+          li {
+            margin-bottom: 20px;
 
-          .nav-title {
-            font-family: 'Source Han Sans CN', sans-serif;
-            font-size: 20px;
-            font-weight: 500;
-            line-height: 20px;
-            color: #ffffff;
-            margin: 0 0 24px 0;
-            white-space: nowrap;
-          }
-
-          .nav-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-
-            li {
-              margin-bottom: 20px;
-
-              &:last-child {
-                margin-bottom: 0;
-              }
+            &:last-child {
+              margin-bottom: 0;
+            }
 
-              .nav-link {
-                font-family: 'Source Han Sans CN', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                line-height: 14px;
-                color: #bdbdbd;
-                text-decoration: none;
-                white-space: nowrap;
-                transition: color 0.3s ease;
-
-                &:hover {
-                  color: #ffffff;
-                }
+            .nav-link {
+              font-family: 'Source Han Sans CN', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 14px;
+              color: #bdbdbd;
+              text-decoration: none;
+              white-space: nowrap;
+              transition: color 0.3s ease;
+
+              &:hover {
+                color: #ffffff;
               }
             }
           }
         }
       }
+    }
 
-      .footer-section {
-        margin-bottom: 50px;
+    .footer-section {
+      margin-bottom: 50px;
 
-        .section-link {
-          font-family: 'Source Han Sans CN', sans-serif;
-          font-size: 20px;
-          font-weight: 400;
-          line-height: 20px;
-          color: #ffffff;
-          text-decoration: none;
-          transition: color 0.3s ease;
+      .section-link {
+        font-family: 'Source Han Sans CN', sans-serif;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #ffffff;
+        text-decoration: none;
+        transition: color 0.3s ease;
 
-          &:hover {
-            color: #bdbdbd;
-          }
+        &:hover {
+          color: #bdbdbd;
         }
       }
+    }
 
-      .footer-contact {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-bottom: 57px;
-        gap: 44px;
+    .footer-contact {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 57px;
+      gap: 44px;
+
+      .contact-label {
+        font-family: 'Source Han Sans CN', sans-serif;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #ffffff;
+        white-space: nowrap;
+      }
 
-        .contact-label {
-          font-family: 'Source Han Sans CN', sans-serif;
-          font-size: 20px;
-          font-weight: 400;
-          line-height: 20px;
+      .contact-email {
+        font-family: 'Source Han Sans CN', sans-serif;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #bdbdbd;
+        text-decoration: none;
+        transition: color 0.3s ease;
+
+        &:hover {
           color: #ffffff;
-          white-space: nowrap;
         }
+      }
+    }
 
-        .contact-email {
-          font-family: 'Source Han Sans CN', sans-serif;
-          font-size: 20px;
-          font-weight: 400;
-          line-height: 20px;
+    .footer-bottom {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      max-width: 1200px;
+      margin-bottom: 50px;
+
+      .report-link {
+        font-family: 'Source Han Sans CN', sans-serif;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #ffffff;
+        text-decoration: none;
+        white-space: nowrap;
+        transition: color 0.3s ease;
+
+        &:hover {
           color: #bdbdbd;
-          text-decoration: none;
-          transition: color 0.3s ease;
-
-          &:hover {
-            color: #ffffff;
-          }
         }
       }
 
-      .footer-bottom {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        max-width: 1200px;
-        margin-bottom: 50px;
-
-        .report-link {
-          font-family: 'Source Han Sans CN', sans-serif;
-          font-size: 20px;
-          font-weight: 400;
-          line-height: 20px;
-          color: #ffffff;
-          text-decoration: none;
-          white-space: nowrap;
-          transition: color 0.3s ease;
-
-          &:hover {
-            color: #bdbdbd;
-          }
-        }
-
-        .copyright {
-          font-family: 'Source Han Sans CN', sans-serif;
-          font-size: 20px;
-          font-weight: 400;
-          line-height: 20px;
-          color: #ffffff;
-          margin: 0;
-          white-space: nowrap;
-        }
+      .copyright {
+        font-family: 'Source Han Sans CN', sans-serif;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #ffffff;
+        margin: 0;
+        white-space: nowrap;
       }
     }
 
-
   }
 }
 </style>

app/components/home/ProductTabs.vue

@@ -2,188 +2,112 @@
   <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 }}
+        @click="tabClick(index)">
+        {{ tab.name }}
       </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>
+      <component :is="currentLayout" :key="activeTab" :cards="currentTabData.cards" />
     </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 = [
-  '网站安全加速',
-  'TCP业务安全',
-  '客户端安全加速',
-  '专家服务',
-  '零信任安全访问',
-  '出海业务保障'
+  {
+    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 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 tabClick = (index) => {
+  activeTab.value = index
+}
 
-const currentCards = computed(() => cardData[activeTab.value])
+const currentTabData = computed(() => tabs[activeTab.value])
+
+const currentLayout = computed(() => {
+  return currentTabData.value.layout === 'multi' ? MultiCardLayout : SingleCardLayout
+})
 </script>
 
 <style scoped lang="scss">
@@ -248,10 +172,7 @@ const currentCards = computed(() => cardData[activeTab.value])
   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;
+  background: linear-gradient(177deg, rgba(165, 101, 255, 0.30) -20.47%, rgba(3, 0, 20, 0.30) 134.25%);
 }
 
 .fade-enter-active,
@@ -268,107 +189,4 @@ const currentCards = computed(() => cardData[activeTab.value])
   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/components/home/ProductTabs/MultiCardLayout.vue

@@ -0,0 +1,145 @@
+<template>
+  <section class="product-cards multi-layout">
+    <div v-for="(card, index) in cards" :key="index" class="product-card-wrapper">
+      <div class="product-card">
+        <h3 class="card-title">{{ card.title }}</h3>
+        <p class="card-description">{{ card.description }}</p>
+        <div class="card-features">
+          <span v-for="(feature, idx) in card.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 v-if="index < cards.length - 1" class="divider"></div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  cards: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.multi-layout {
+  max-width: 1200px;
+  min-height: 474px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-card-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.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: 266px;
+    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/components/home/ProductTabs/SingleCardLayout.vue

@@ -0,0 +1,133 @@
+<template>
+  <section class="product-cards single-layout">
+    <div class="single-card">
+      <h3 class="card-title">{{ card.title }}</h3>
+      <p class="card-description">{{ card.description }}</p>
+      <div class="card-features">
+        <span v-for="(feature, idx) in card.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>
+</template>
+
+<script setup>
+const props = defineProps({
+  cards: {
+    type: Array,
+    required: true
+  }
+})
+const card = computed(() => props.cards[0])
+</script>
+
+<style scoped lang="scss">
+.single-layout {
+  display: flex;
+}
+
+.single-card {
+  width: 100%;
+  max-width: 1200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: auto;
+  min-height: 474px;
+  padding: 42px 69px 69px 69px;
+  box-sizing: border-box;
+
+
+  .card-title {
+    position: relative;
+    color: #FFF;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+
+    &::before {
+      position: absolute;
+      left: 0;
+      bottom: -22px;
+      content: '';
+      width: 100%;
+      height: 1px;
+      background: rgba(255, 255, 255, 0.40);
+
+    }
+  }
+
+  .card-description {
+    color: rgba(255, 255, 255, 0.60);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+  .card-features {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .feature-tag {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 14px;
+      color: #9b71ff;
+      margin-bottom: 12px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .card-actions {
+    display: flex;
+    gap: 24px;
+
+    .btn-primary {
+      width: 140px;
+      height: 48px;
+      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: 16px;
+      font-weight: 400;
+      color: #ffffff;
+      cursor: pointer;
+      transition: opacity 0.3s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .btn-secondary {
+      width: 140px;
+      height: 48px;
+      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: 16px;
+      font-weight: 400;
+      color: #ffffff;
+      cursor: pointer;
+      transition: opacity 0.3s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+</style>