DDAC/app/pages/pc/index.vue

<template>
  <section>
    <section class="hero-section">
      <video ref="videoRef" class="hero-video-bg" preload="auto" :src="homeVideo" autoplay loop muted playsinline
        @loadedmetadata="onVideoLoaded"></video>
      <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 />

    <!-- 安全运营与方案模块 -->
    <PlansSection />

    <!-- 安全漏洞 / 全景技术架构上方模块 -->
    <section class="security-arch-section">
      <NuxtImg alt="安全架构" src="/images/home/home-bg2.png" 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">
          <p>
            从基础设施、数据引擎、服务中台到业务应用，层层协同，将算力、数据与能力统一管理，
          </p>
          <p>
            保证系统在高并发、高复杂度场景下依然稳定运行。
          </p>
        </div>
      </div>
    </section>
    <section class="security-flowchart">
      <NuxtImg width="1918" loading="eager" src="/images/home/flowchart.png" alt="流程" />
    </section>

    <!-- 助力各行业客户成功 -->
    <section class="cain-section">
      <NuxtImg alt="助力各行业客户成功" src="/images/home/home-bg3.png" 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>
          <NuxtImg src="/images/home/icon.png" alt="金融" class="industry-icon" />
        </div>
        <div class="industry-item">
          <div class="industry-text">互联网</div>
          <NuxtImg src="/images/home/icon2.png" alt="互联网" class="industry-icon" />
        </div>
        <div class="industry-item">
          <div class="industry-text">医疗健康</div>
          <NuxtImg src="/images/home/icon3.png" alt="医疗健康" class="industry-icon" />
        </div>
        <div class="industry-item">
          <div class="industry-text">制造</div>
          <NuxtImg src="/images/home/icon4.png" alt="制造" class="industry-icon" />
        </div>
        <div class="industry-item">
          <div class="industry-text">教育</div>
          <NuxtImg src="/images/home/icon5.png" alt="教育" class="industry-icon" />
        </div>
      </div>
      <div class="industry-other">
        <div class="other-item">
          <NuxtImg src="/images/home/icon6.png" alt="卓越教育" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon7.png" alt="华福证券" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon8.png" alt="汉王" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon9.png" alt="隧道股份" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon10.png" alt="岳阳医院" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon11.png" alt="杉德" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon12.png" alt="易班" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon13.png" alt="银联商务" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon14.png" alt="长海医院" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon15.png" alt="斗象科技" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon16.png" alt="瑞金" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon17.png" alt="3L" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon18.png" alt="宝付" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon19.png" alt="新华医院" />
        </div>
        <div class="other-item">
          <NuxtImg src="/images/home/icon20.png" alt="中船重工物贸集团" />
        </div>
      </div>
      <div class="industry-box">
        <div class="industry-radar">
          <NuxtImg src="/images/home/home-bg4.png" 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>
        <img src="~/assets/svg/home/protect.svg" alt="防护箱" class="box-icon" />
      </div>
      <div class="industry-title">
        <h3><span>立即加入</span> <span>安全之旅</span></h3>
        <div class="industry-subtitle">完成注册，即可免费体验 DDoS防护、CC防护、DNS解析等多款安全产品</div>
      </div>
    </section>
    <section class="bottom-video">
      <!-- 视频背景 -->
      <video ref="videoRef" style="clip-path: inset(0 0 50% 0);" class="hero-video-bg" src="~/assets/video/home.webm"
        autoplay loop muted playsinline @loadedmetadata="onVideoLoaded"></video>
      <!-- Canvas动画组件 -->
      <ParticlesCanvas class="canvas-overlay" />
    </section>
  </section>
</template>

<script setup>
definePageMeta({
  layout: 'pc'
})

import { ref } from 'vue'
import StatsSection from '~/components/home/StatsSection.vue'
import ProductTabs from '~/components/home/ProductTabs.vue'
import PlansSection from '~/components/PlansSection.vue'
import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
import SecurityParticles from '~/components/SecurityParticles.vue'
import homeVideo from '~/assets/video/home.webm'



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, maximum-scale=1, user-scalable=no' },
    { name: 'description', content: 'DDAC - 游戏盾防御' },
    { name: 'keywords', content: '高防服务器 | 高防DNS | 游戏盾SDK | 高防CDN' }
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' },
    // { rel: 'preload', as: 'video', href: homeVideo }
  ],
  htmlAttrs: {
    lang: 'en'
  }
}))
</script>

<style scoped lang="scss">
.main-content {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
}

.hero-section,
.bottom-video {
  width: 100%;
  height: 497px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  .hero-video-bg {
    position: absolute;
    top: 32%;
    left: 50%;
    width: 1200px;
    transform: translate(-50%);
    object-fit: cover;
    clip-path: inset(0 0 40% 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-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-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%;
      }
    }
  }
}

.bottom-video {
  height: 352px;

  .hero-video-bg {
    top: 4%;
  }

  .canvas-overlay {
    top: 50%;
  }
}

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

  .insight-title {

    font-size: 36px;
    font-weight: 400;
    line-height: 36px;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
  }

  .insight-subtitle {

    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    color: #a39dff;
    margin: 24px 0 0 0;
    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: 750px;
    opacity: .7;
    pointer-events: none;
  }

  .security-arch-desc {
    color: #fff;
    position: absolute;
    left: 50%;
    top: 500px;
    transform: translate(-50%, -50%);

    .security-arch-title {
      font-size: 40px;
      font-style: normal;
      font-weight: 400;
      line-height: 40px;
      margin: 0 auto;
      text-align: center;


    }

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

.security-flowchart {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

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

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

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

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

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


}

$Diameter :890px;

.industry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  z-index: 2;

  .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-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: 10px;
    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;
  }

  .box-icon {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    z-index: 4;
  }

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