DDAC/app/pages/pc/index.vue

<template>
  <div class="container">
    <Header></Header>
    <section class="main-content">
      <!-- 标题区域和视频背景 -->
      <section 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>
      </section>

      <ProductTabs />

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

      <!-- 数据展示区域 -->
      <StatsSection />

      <!-- 安全运营与方案模块 -->
      <section 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>
      </section>

      <!-- 安全漏洞 / 全景技术架构上方模块 -->
      <section class="security-arch-section">
        <img alt="安全架构" :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>
      </section>
      <!-- TODO 正常访客等... -->

      <!-- 助力各行业客户成功 -->
      <section class="cain-section">
        <img alt="助力各行业客户成功" :src="homeBg3" width="1" height="1" class="cain-section-img" />
        <div class="cain-section-animate">
          <SecurityParticles />
        </div>
        <div class="cain-section-desc">
          <h3 class="cain-section-title">
            助力各行业客户成功
          </h3>
        </div>
      </section>
      <section class="industry">
        <div class="industry-content">
          <div class="industry-item">
            <div class="industry-text">金融</div>
            <img :src="icon" alt="金融" class="industry-icon" />
          </div>
          <div class="industry-item">
            <div class="industry-text">互联网</div>
            <img :src="icon2" alt="互联网" class="industry-icon" />
          </div>
          <div class="industry-item">
            <div class="industry-text">医疗健康</div>
            <img :src="icon3" alt="医疗健康" class="industry-icon" />
          </div>
          <div class="industry-item">
            <div class="industry-text">制造</div>
            <img :src="icon4" alt="制造" class="industry-icon" />
          </div>
          <div class="industry-item">
            <div class="industry-text">教育</div>
            <img :src="icon5" alt="教育" class="industry-icon" />
          </div>
        </div>
        <div class="industry-other">
          <div class="other-item">
            <img :src="icon6" alt="卓越教育">
          </div>
          <div class="other-item">
            <img :src="icon7" alt="华福证券">
          </div>
          <div class="other-item">
            <img :src="icon8" alt="汉王">
          </div>
          <div class="other-item">
            <img :src="icon9" alt="隧道股份">
          </div>
          <div class="other-item">
            <img :src="icon10" alt="岳阳医院">
          </div>
          <div class="other-item">
            <img :src="icon11" alt="杉德">
          </div>
          <div class="other-item">
            <img :src="icon12" alt="易班">
          </div>
          <div class="other-item">
            <img :src="icon13" alt="银联商务">
          </div>
          <div class="other-item">
            <img :src="icon14" alt="长海医院">
          </div>
          <div class="other-item">
            <img :src="icon15" alt="斗象科技">
          </div>
          <div class="other-item">
            <img :src="icon16" alt="瑞金">
          </div>
          <div class="other-item">
            <img :src="icon17" alt="3L">
          </div>
          <div class="other-item">
            <img :src="icon18" alt="宝付">
          </div>
          <div class="other-item">
            <img :src="icon19" alt="新华医院">
          </div>
          <div class="other-item">
            <img :src="icon20" alt="中船重工物贸集团">
          </div>
        </div>
        <div class="industry-box">
          <div class="industry-radar">
            <img :src="homeBg4" alt="radar" class="radar-bg-img" />
            <div class="radar-dots">
              <span class="radar-dot radar-dot-1" />
              <span class="radar-dot radar-dot-2" />
              <span class="radar-dot radar-dot-3" />
              <span class="radar-dot radar-dot-4" />
            </div>
          </div>
        </div>
        <div class="industry-title">
          <h3><span>立即加入</span> <span>安全之旅</span></h3>
          <div class="industry-subtitle">完成注册，即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
        </div>
      </section>
      <section class="hero-section">
        <!-- 视频背景 -->
        <video ref="videoRef" class="hero-video-bg" :src="videoSrc" autoplay loop muted playsinline
          @loadedmetadata="onVideoLoaded"></video>
        <!-- Canvas动画组件 -->
        <ParticlesCanvas class="canvas-overlay" />
      </section>
    </section>
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import StatsSection from '~/components/home/StatsSection.vue'
import ProductTabs from '~/components/home/ProductTabs.vue'
import videoSrc from '~/assets/video/home.webm'
import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
import SecurityParticles from '~/components/SecurityParticles.vue'
import homeBg2 from '~/assets/images/home/home-bg2.png'
import homeBg3 from '~/assets/images/home/home-bg3.png'
import homeBg4 from '~/assets/images/home/home-bg4.png'
import icon from '~/assets/images/home/icon.png'
import icon2 from '~/assets/images/home/icon2.png'
import icon3 from '~/assets/images/home/icon3.png'
import icon4 from '~/assets/images/home/icon4.png'
import icon5 from '~/assets/images/home/icon5.png'
import icon6 from '~/assets/images/home/icon6.png'
import icon7 from '~/assets/images/home/icon7.png'
import icon8 from '~/assets/images/home/icon8.png'
import icon9 from '~/assets/images/home/icon9.png'
import icon10 from '~/assets/images/home/icon10.png'
import icon11 from '~/assets/images/home/icon11.png'
import icon12 from '~/assets/images/home/icon12.png'
import icon13 from '~/assets/images/home/icon13.png'
import icon14 from '~/assets/images/home/icon14.png'
import icon15 from '~/assets/images/home/icon15.png'
import icon16 from '~/assets/images/home/icon16.png'
import icon17 from '~/assets/images/home/icon17.png'
import icon18 from '~/assets/images/home/icon18.png'
import icon19 from '~/assets/images/home/icon19.png'
import icon20 from '~/assets/images/home/icon20.png'

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

useHead(() => ({
  title:'DDAC',
  meta: [
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { name: 'description', content: 'DDAC - 游戏盾防御' },
    { name: 'keywords', content: '高防服务器 | 高防DNS | 游戏盾SDK | 高防CDN' }
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' }
  ],
  htmlAttrs: {
    lang: 'en'
  }
}))
</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: -3%;
    left: 0;
    width: 100%;
    object-fit: cover;
    clip-path: inset(0 0 50% 0);
    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%;
      }
    }
  }
}


// 安全洞见标题
.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;
  }
}



// 方案卡片区域
.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: 60px;
  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;
      /* 两端对齐并自动换行 */
    }
  }
}

//彩虹部分
.cain-section {
  position: relative;
  padding-top: 496px;
  padding-bottom: 60px;
  box-sizing: border-box;

  .cain-section-img {
    left: 50%;
    position: absolute;
    top: 56px;
    transform: translate(-50%);
    height: 400px;
    width: 900px;
  }

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

  .cain-section-desc {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;

    .cain-section-title {
      font-size: 45px;
      color: #ffffff;
      margin: 0;
      font-weight: 400;
    }
  }


}

$Diameter :890px;

.industry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;

  .industry-content {
    display: flex;
    gap: 16px;
  }

  .industry-item {
    display: flex;
    justify-content: space-between;
    width: 240px;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(118deg, #C9C5FF -25.53%, #5704FF 110.12%);
  }

  .industry-icon {
    width: 150px;
    height: 100px;
  }

  .industry-text {
    padding: 16px 0 0 16px;
    font-family: 'Source Han Sans CN', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    color: #fff;
  }

  .industry-other {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, auto);
  }

  .other-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 100px;
    border-radius: 20px;
    border: 1px solid #B2A1FF;
    background: #1C192B;
  }

  .industry-title {
    h3 {
      padding: 40px 0;
      text-align: center;
      color: #FFF;
      font-size: 45px;
      font-style: normal;
      font-weight: 400;
      line-height: 45px;

      span {
        margin: 0 20px
      }
    }

    .industry-subtitle {
      text-align: center;
      color: #FFF;
      font-size: 26px;
      font-style: normal;
      font-weight: 400;
      line-height: 26px;
    }
  }

  .industry-box,
  .industry-radar {
    position: relative;
    width: $Diameter;
    height: calc($Diameter / 2);
  }

  .industry-radar {
    overflow: hidden;
  }

  .radar-bg-img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: $Diameter;
    object-fit: contain;
    object-position: center top;
    opacity: 0.95;
    z-index: 1;
  }

  .industry-radar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: $Diameter;
    height: $Diameter;
    border-radius: 50%;
    transform-origin: 50%;
    background: conic-gradient(from 0deg at center,
        rgba(99, 102, 241, 0) 0deg,
        rgba(99, 102, 241, 0.05) 10deg,
        rgba(99, 102, 241, 0.1) 20deg,
        rgba(99, 102, 241, 0.2) 25deg,
        rgba(99, 102, 241, 0.3) 28deg,
        rgba(99, 102, 241, 0.4) 30deg,
        transparent 30deg 360deg);
    filter: blur(1px);
    animation: radarScan 6s linear infinite;
    z-index: 2;
    opacity: 0.7;
  }

  .industry-box::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: linear-gradient(114deg, #C9C5FF -44.49%, #5704FF 140.15%);
    stroke: #AE80FF;
    border-radius: 50%;
    z-index: 3;
  }

  .radar-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 4;
  }

  .radar-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(99, 102, 241, 0.8);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.8);
  }

  .radar-dot-1 {
    left: 45%;
    top: 35%;
    animation: radarBlink 1.5s ease-in-out infinite;
  }

  .radar-dot-2 {
    left: 60%;
    top: 62%;
    animation: radarBlink 1.5s ease-in-out infinite 0.375s;
  }

  .radar-dot-3 {
    left: 30%;
    top: 66%;
    animation: radarBlink 1.5s ease-in-out infinite 0.75s;
  }

  .radar-dot-4 {
    left: 70%;
    top: 35%;
    animation: radarBlink 1.5s ease-in-out infinite 1.125s;
  }
}

@keyframes radarScan {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes radarBlink {
  0% {
    transform: scale(0.6);
    opacity: 0.2;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.6);
    opacity: 0.2;
  }
}
</style>