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>

      <!-- 产品标签栏 -->
      <section 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>
      </section>

      <!-- 产品卡片区域 -->
      <section 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>
      </section>

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

      <!-- 数据展示区域 -->
      <section 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>
      </section>

      <!-- 安全运营与方案模块 -->
      <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 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'
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%;
      }
    }
  }
}

// 产品标签栏
.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: 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>