DDAC/app/components/products/Defense.vue

<template>
  <section class="defense-section">
    <div class="defense-container">
      <div class="defense-header">
        <h2>真正实现秒级抵御</h2>
        <p>让高防服务器在DDoS攻击中守护您的业务无忧</p>
      </div>

      <div class="defense-grid">
        <!-- Row 1 -->
        <div v-mouse-glow="{size:500}" class="defense-card">
          <div class="card-title">
            <div>
              <h4>美/日/港三地高防节点</h4>
              <h4>灵活部署，助您业务即刻抵御DDoS风</h4>
            </div>
          </div>
          <div class="card-content">
            <ul>
              <li>• 美国节点：立足全球网络核心，提供卓越的欧美访问体验与高规格防御带宽，是进军国际市场的战略支点。</li>
              <li>• 日本节点：作为东亚数据枢纽，为日本、韩国及泛亚地区用户提供超低延迟访问，保障区域业务流畅稳定。</li>
              <li>• 香港节点：具备独特的网络中立性与中国大陆极速连接能力，是同时服务内地用户与全球业务的绝佳桥梁。</li>
            </ul>
            <NuxtImg width="202" class="ddos-img" src="/images/products/ddos.png" alt="DDoS攻击防护示意图" />
          </div>
        </div>

        <div v-mouse-glow="{size:500}" class="defense-card">
          <div class="card-title">
            <div>
              <h4>全球分布式近源清洗，让攻击流量</h4>
              <h4>无法触及您的业务核心</h4>
            </div>
            <NuxtImg src="/images/products/spread.png" alt="全球分布式近源清洗网络拓扑图" />
          </div>
          <div class="card-content">
            <p>
              我们的国际高级防御线路，为您构筑了一道远离业务核心的“防火墙”。它基于遍布全球的多个流量清洗中心，提供高达2Tbps的单点防御带宽。其核心原理在于近源清洗：当攻击流量还在国际网络枢纽中奔袭时，系统便能在最靠近攻击源的节点对其进行实时识别、分流与彻底清洗。这意味着，只有洁净、安全的流量才会被转发至您的服务器。
            </p>
          </div>
        </div>

        <!-- Row 2 -->
        <div v-mouse-glow="{size:550}" class="defense-card full-width">
          <div class="card-title">
            <div>
              <h4>从全局架构到智能边缘，为您重定义“安全”与“速度”</h4>
              <p>
                我们提供的不仅是一个高防节点，而是一张<span>深度融合安全能力与全球加速的智能网络。</span>
                我们深知，传统的“CDN加速”与“高防服务器”是分离的两层，这常常意味着复杂的配置与潜在的性能损耗。因此，我们从根本上重新设计，
                <span>基于完整的全球智能网络，原生构建了具备强大防护能力的CDN节点。</span>
                每一个CDN节点，都原生集成了与骨干网同级的DDoS清洗与Web应用加速能力。
              </p>
            </div>
          </div>
          <NuxtImg width="256" height="auto" class="defense-image" src="/images/products/sd.png" alt="高防CDN节点安全防护架构图" />
        </div>
      </div>
    </div>
  </section>
</template>
<script setup></script>
<style lang="scss" scoped>
.defense-section {
  margin-top: 62px;
  // padding: 80px 0;
  color: #fff;

  .defense-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .defense-header {
    text-align: center;
    margin-bottom: 80px;

    h2 {
      margin-bottom: 30px;
      font-size: 45px;
      font-weight: 400;
      line-height: 45px;
    }

    p {
      font-size: 45px;
      font-weight: 400;
      line-height: 45px;
      background: linear-gradient(90deg, #A2C2FF 5.58%, #A47DFF 89.68%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .defense-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .defense-grid > .defense-card:nth-child(2) {
    --corner-glow-size: 320px;
    --corner-glow-opacity: 0.26;
  }

  .defense-grid > .defense-card:nth-child(3) {
    --corner-glow-size:400px;
    --corner-glow-opacity: 0.20;
  }

  .defense-card {
    --corner-glow-size: 240px;
    --corner-glow-opacity: 0.38;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    position: relative;
    overflow: hidden;

    > * {
      position: relative;
      z-index: 2;
    }

    &::after {
      content: '';
      position: absolute;
      right: -64px;
      bottom: -64px;
      width: var(--corner-glow-size);
      height: var(--corner-glow-size);
      border-radius: 999px;
      pointer-events: none;
      background: conic-gradient(from 45deg, #5A7DFF, #9E3BFF, #5A7DFF);
      filter: blur(30px) drop-shadow(0 0 20px rgba(90, 125, 255, 0.5));
      opacity: var(--corner-glow-opacity);
      transition: opacity 200ms ease;
      z-index: 0;
    }

    &:hover {
      border: 1px solid #5347FF;
      background: linear-gradient(124deg, rgba(82, 91, 255, 0.07) -21.2%, rgba(144, 65, 255, 0.07) 72.72%);
    }

    &:hover::after {
      opacity: 0;
    }

    &.full-width {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 36px;
      padding: 50px 32px 0;

      p {
        width: 744px;
        margin-top: 20px;
        line-height: 26px;
      }

      span {
        color: #BEB9FF;
      }
    }

    .card-title {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;

      h4 {
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
      }

      p {
        color: rgba(255, 255, 255, 0.60);
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
      }
    }

    .card-content {
      flex: 1;
      display: flex;
      position: relative;
      color: rgba(255, 255, 255, 0.60);
      font-size: 14px;
      font-weight: 400;
      line-height: 26px;

      .ddos-img {
        position: absolute;
        z-index: 0;
        right: -50%;
        top: 30%;
        transform: translateY(-50%);
      }

      ul {
        list-style: none;
        padding: 0;
        margin-top: 20px;
        width: 358px;
      }
    }

  }

}
</style>