DDAC/app/pages/pc/index.vue

<template>
  <div class="container">
    <Header></Header>
    <section class="main-content">
      <!-- 标题区域和视频背景 -->
      <div class="hero-section">
        <!-- 视频背景 -->
        <video ref="videoRef" class="hero-video-bg" :src="videoSrc" autoplay loop muted playsinline
          @loadedmetadata="onVideoLoaded"></video>
        <!-- Canvas动画组件 -->
        <ParticlesCanvas class="canvas-overlay" />
        <!-- 内容 -->
        <div class="hero-content">
          <h2 class="hero-title">您专注业务，我们守护安全&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;再强的攻击,也有攻不破的防线
          </h2>
          <div class="hero-subtitle">
            <p>高防服务器&nbsp;|&nbsp;高防DNS&nbsp;|&nbsp;游戏盾SDK&nbsp;|&nbsp;高防CDN&nbsp;全方位守护您的业务</p>
          </div>
        </div>
      </div>

      <!-- 产品标签栏 -->
      <div class="product-tabs">
        <div class="tab-item active">网站安全加速</div>
        <div class="tab-item">TCP业务安全</div>
        <div class="tab-item">客户端安全加速</div>
        <div class="tab-item">专家服务</div>
        <div class="tab-item">零信任安全访问</div>
        <div class="tab-item">出海业务保障</div>
      </div>

      <!-- 产品卡片区域 -->
      <div class="product-cards">
        <div class="product-card">
          <h3 class="card-title">Web安全加速</h3>
          <p class="card-description">
            为游戏、电商、金融、医疗、门户等网站业务，提供DDoS、CC、页面篡改、爬虫等各类攻击防护，结合精准访问控制和全网联防联控，在抵御各类攻击的同时，保障网站业务的快速稳定访问。
          </p>
          <div class="card-features">
            <span class="feature-tag">支持HTTP、HTTPS和WebSocket协议</span>
            <span class="feature-tag">适用网站类业务</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">DNS安全加速</h3>
          <p class="card-description">
            安全可靠的智能DNS解析服务，具备多重灾备机制，支持IPv4、IPv6双栈，全球及自定义智能解析线路，运营商缓存刷新，提供大QPS&nbsp;DNS查询攻击、大流量DNS&nbsp;DDoS攻击等针对域名解析的攻击防御服务，为网站域名提供安全、稳定、可靠的解析体验。
          </p>
          <div class="card-features">
            <span class="feature-tag">支持定制专用清洗集群</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">扫描观测（漏洞扫描）</h3>
          <p class="card-description">
            为网站业务提供安全体检服务，模拟黑客视角，对网站业务进行可用性监测、内容安全监测、漏洞渗透性探测等风险多维度巡检综合评估，提出相应安全对策，告警安全事件，输出网站安全体检报告
          </p>
          <div class="card-features">
            <span class="feature-tag">支持HTTP、HTTPS和WebSocket协议</span>
            <span class="feature-tag">适用网站类业务</span>
          </div>
          <div class="card-actions">
            <button class="btn-primary">更多详情</button>
            <button class="btn-secondary">0元体验</button>
          </div>
        </div>
      </div>

      <!-- 安全洞见标题 -->
      <div class="insight-header">
        <h2 class="insight-title">安全洞见&nbsp;&nbsp;&nbsp;全网感知</h2>
        <p class="insight-subtitle">实时攻防态势数据</p>
      </div>

      <!-- 数据展示区域 -->
      <div class="stats-section" :style="{ backgroundImage: `url(${homeBg})` }">
        <img class="stats-figure" :src="homeD" alt="游戏盾" />
        <div class="stat-item">
          <div class="stat-label">今日&nbsp;CC&nbsp;攻击次数</div>
          <div class="stat-value">19,009</div>
        </div>
        <div class="stat-item state-other">
          <div class="stat-label">今日&nbsp;DDoS&nbsp;攻击峰值</div>
          <div class="stat-value">22,844</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">今日&nbsp;WAF&nbsp;拦截次数</div>
          <div class="stat-value">56,870</div>
        </div>
      </div>

      <!-- 安全运营与方案模块 -->
      <div class="plans-section">
        <div class="plans-cards">
          <div class="plan-card">
            <div class="plan-name">Lite Plan</div>
            <div class="plan-desc">适合项目上线初期集成</div>
            <div class="old-price">
              <del>$1500</del>
              <span>节省20.04%</span>
            </div>
            <div class="plan-price">$999</div>
            <div class="plan-actions">
              <button class="btn-primary">立即选择</button>
            </div>
            <div class="plan-title">
              <div class="plan-cs">详细参数</div>
              <ul class="plan-features">
                <li>防护目标数：3个</li>
                <li>峰值设备数：200</li>
                <li>智能BGP线路</li>
                <li>带宽峰值：20M</li>
                <li>DDoS防御：无上限</li>
                <li>CC防御：100%</li>
              </ul>
            </div>
          </div>

          <div class="plan-card">
            <div class="plan-name">Basic Plan</div>
            <div class="plan-desc">最经济实惠的个人开发者套餐</div>
            <div class="old-price">
              <del>$2500</del>
              <span>节省20.04%</span>
            </div>
            <div class="plan-price">$1999</div>
            <div class="plan-actions">
              <button class="btn-primary">立即选择</button>
            </div>
            <div class="plan-title">
              <div class="plan-cs">详细参数</div>
              <ul class="plan-features">
                <li>防护目标数：10个</li>
                <li>峰值设备数：2000</li>
                <li>智能CN2/BGP线路</li>
                <li>带宽峰值：50M</li>
                <li>DDoS防御：无上限</li>
                <li>CC防御：100%</li>
              </ul>
            </div>
          </div>

          <div class="plan-card">
            <div class="plan-name">Standard Plan</div>
            <div class="plan-desc">企业入门级畅销精选套餐</div>
            <div class="old-price">
              <del>$6000</del>
              <span>节省16.68%</span>
            </div>
            <div class="plan-price">$4999</div>
            <div class="plan-actions">
              <button class="btn-primary ghost">立即选择</button>
            </div>
            <div class="plan-title">
              <div class="plan-cs">详细参数</div>
              <ul class="plan-features">
                <li>防护目标数：15个</li>
                <li>峰值设备数：10000</li>
                <li>智能CN2/BGP线路</li>
                <li>带宽峰值：80M</li>
                <li>DDoS防御：无上限</li>
                <li>CC防御：100%</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全漏洞 / 全景技术架构上方模块 -->
      <div class="security-arch-section">
        <img :src="homeBg2" width="1" height="1" class="security-arch-img" />
        <div class="security-arch-animate">
          <SecurityParticles />
        </div>
        <div class="security-arch-desc">
          <h3 class="security-arch-title">
            全景技术架构，让技术成为增长引擎
          </h3>
          <div class="security-arch-subtitle">
            从基础设施、数据引擎、服务中台到业务应用，层层协同，将算力、数据与能力统一管理，
            保证系统在高并发、高复杂度场景下依然稳定运行。
          </div>
        </div>
      </div>
    </section>
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import videoSrc from '~/assets/video/home.webm'
import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
import SecurityParticles from '~/components/SecurityParticles.vue'
import homeBg from '~/assets/images/home/home-bg.png'
import homeD from '~/assets/images/home/home-d.png'
import homeBg2 from '~/assets/images/home/home-bg2.png'

const videoRef = ref(null)
const onVideoLoaded = () => {
  if (videoRef.value) {
    videoRef.value.play().catch(() => {
      // 自动播放失败时静默处理
    })
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #030014;
  overflow-x: hidden;
  box-sizing: border-box;
}

.main-content {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
}

// 标题区域（视频作为背景）
.hero-section {
  width: 100%;
  height: 497px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 81px 0 0;
  box-sizing: border-box;
  overflow: hidden;

  .hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; // 只显示上半部分
    z-index: 0;
  }

  .canvas-overlay {
    position: absolute;
    top: 260px;
    left: 0;
    width: 100%;
    height: 50%; // 只显示上半部分
    pointer-events: none;
    z-index: 1; // 层级不要太高
  }

  .hero-content {
    width: 100%;
    max-width: 1568px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; // 内容在视频和canvas之上
    margin: 0 auto;

    .hero-title {
      font-family: 'Source Han Sans CN', sans-serif;
      font-size: 30px;
      font-weight: 400;
      line-height: 30px;
      // color: #7c4dff;
      margin: 0;
      white-space: normal;
      text-align: center;
      word-break: break-word;
      max-width: 100%;
      background: linear-gradient(90deg, #7C4DFF 0.24%, #DEB9FF 45.03%, #617FFF 132.52%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-subtitle {
      margin-top: 28px;
      width: 100%;
      max-width: 918.27px;
      min-height: 341.49px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-start;

      p {
        font-family: 'Inter', sans-serif;
        font-size: 20px;
        font-weight: 400;
        line-height: normal;
        color: #ffffff;
        margin: 0;
        text-align: center;
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
      }
    }
  }
}

// 产品标签栏
.product-tabs {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
  // margin-top: 441px;
  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;

  .tab-item {
    font-family: 'Source Han Sans CN', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: #ffffff;
    margin-left: 90px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease;

    &:first-child {
      margin-left: 0;
    }

    &:nth-child(1) {
      width: 177px;
      height: 60px;
      border-radius: 46.5px;
      background: linear-gradient(62.84deg, rgba(130, 77, 255, 1) 0%, rgba(164, 125, 255, 1) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20px;
    }

    &:hover {
      color: #bdbdbd;
    }
  }
}

// 产品卡片区域
.product-cards {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
  min-height: 474px;
  margin: 0 auto;
  margin-top: 81px;
  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;

  .product-card {
    width: 266px;
    height: 336px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;

    .card-title {
      font-family: 'Source Han Sans CN', sans-serif;
      font-size: 20px;
      font-weight: 500;
      line-height: 20px;
      color: #ffffff;
      margin: 0 0 44px 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 0 30px 0;
      text-align: left;
    }

    .card-features {
      width: 237px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 48px;

      .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;

      .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;
  }
}

// 安全洞见标题
.insight-header {
  width: 313px;
  margin: 156px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .insight-title {
    font-family: 'Source Han Sans CN', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 36px;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
  }

  .insight-subtitle {
    font-family: 'Source Han Sans CN', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    color: #a39dff;
    margin: 24px 0 0 0;
    text-align: center;
  }
}

// 数据展示区域
.stats-section {
  width: 100%;
  max-width: 1920px;
  height: 749px;
  // margin: 80px auto 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center top;
  overflow: hidden;

  .stats-figure {
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 226.059px;
    height: 305.118px;
    object-fit: contain;
    pointer-events: none;
    z-index: 0;
    /* 上下浮动动画 */
    will-change: transform;
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translateX(-50%) translateY(0);
    }

    50% {
      transform: translateX(-50%) translateY(-20px);
    }

    100% {
      transform: translateX(-50%) translateY(0);
    }
  }

  .state-other {
    position: absolute;
    top: 100px;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 0 300px;
    z-index: 1;

    .stat-label {
      font-family: 'Source Han Sans CN', sans-serif;
      font-size: 24px;
      font-weight: 400;
      line-height: 24px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 20px;
    }

    .stat-value {
      font-family: 'Roboto', sans-serif;
      font-size: 56px;
      font-weight: 700;
      line-height: 56px;
      color: #a182ff;
      text-align: center;
    }
  }
}

// 方案卡片区域
.plans-section {
  width: 100%;
  max-width: 1200px;
  margin: 120px auto 0;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;


  .plans-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
  }

  .plan-card {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(178, 161, 255, 0.8);
    padding: 28px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 380px;

    &:hover {
      border: 2px solid rgba(178, 161, 255, 0.9);
      box-shadow: 0 10px 30px rgba(125, 70, 255, 0.3);
      background: linear-gradient(1.67deg, rgba(165, 101, 255, 0.16) 0%, rgba(3, 0, 20, 0.1) 100%);

      .plan-actions .btn-primary {
        background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
      }
    }

    // &.highlight {

    // }

    .plan-name {
      text-align: center;
      font-family: 'Roboto', sans-serif;
      font-size: 36px;
      font-weight: 700;
      line-height: 26px;
      color: #ffffff;
    }

    .plan-desc {
      text-align: center;
      font-family: 'Source Han Sans CN', sans-serif;
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
      color: #e0d3ff;
    }

    .old-price {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;

      del {
        color: #A39DFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
      }

      span {
        display: flex;
        border-radius: 17.5px;
        background: #7D46FF;
        color: #fff;
        width: 145px;
        height: 35px;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
    }

    .plan-price {
      font-family: 'Roboto', sans-serif;
      text-align: center;
      font-size: 65px;
      font-weight: 700;
      line-height: 65px;
      color: #ffffff;
      margin: 8px 0;
    }

    .plan-actions {
      display: flex;
      gap: 12px;
      align-items: center;

      .btn-primary {
        flex: 1;
        height: 44px;
        border-radius: 50px;
        background: linear-gradient(91deg, rgba(163, 157, 255, 0.20) 1.24%, rgba(125, 70, 255, 0.20) 122.93%);
        border: none;
        color: #fff;
        font-family: 'Source Han Sans CN', sans-serif;
        font-size: 24px;
        cursor: pointer;
        transition: opacity 0.3s ease;

        &:hover {

          opacity: 0.85;
        }

      }

      .btn-link {
        flex: 1;
        height: 44px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        background: transparent;
        color: #fff;
        font-family: 'Source Han Sans CN', sans-serif;
        font-size: 16px;
        cursor: pointer;
        transition: opacity 0.3s ease;

        &:hover {
          opacity: 0.8;
        }
      }
    }

    .plan-title {
      .plan-cs {
        margin: 22px 0;
        color: #fff;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
      }

      .plan-features {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;

        li {
          position: relative;
          font-family: 'Source Han Sans CN', sans-serif;
          padding-left: 20px;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #ffffff;

          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #a39dff;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          &::after {
            position: absolute;
            left: 4px;
            top: 50%;
            transform: translateY(-50%);
            content: "✓";
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
          }
        }
      }
    }

  }
}

// 安全架构展示（到全景技术架构上方）
.security-arch-section {
  position: relative;
  padding-top: 496px;
  padding-bottom: 400px;
  box-sizing: border-box;

  .security-arch-img {
    left: 50%;
    position: absolute;
    top: 56px;
    transform: translate(-50%);
    height: 700px;
    width: 806px;
  }

  .security-arch-animate {
    height: 212px;
    left: 50%;
    mask-size: cover;
    position: absolute;
    top: 234px;
    transform: translate(-50%);
    width: 936px;
    opacity: .7;
    pointer-events: none;
  }

  .security-arch-desc {
    color: #fff;
    position: absolute;
    left: 50%;
    top: 500px;
    transform: translate(-50%, -50%);
    /* 限制宽度并居中：保证 title 与 subtitle 两端对齐 */
    width: min(760px, 90%);
    text-align: justify;

    .security-arch-title {
      font-size: 40px;
      font-style: normal;
      font-weight: 400;
      line-height: 40px;
      margin: 0 auto;
      /* 通过伪元素强制单行也两端对齐 */
      text-align: justify;
      display: block;

      &::after {
        content: "";
        display: inline-block;
        width: 100%;
        height: 0;
      }
    }

    .security-arch-subtitle {
      margin-top: 20px;
      color: rgba(255, 255, 255, 0.80);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      white-space: normal;
      word-break: break-word;
      text-align: justify; /* 两端对齐并自动换行 */
    }
  }
}
</style>