DDAC/app/pages/web/products/sdk.vue

<template>
  <section>
    <section class="video-section">
      <div class="left-bg"></div>
      <div class="right-bg"></div>
      <!-- <video ref="videoRef" class="video-bg" src="~/assets/video/sdk.mp4" autoplay loop muted playsinline
        @loadedmetadata="onVideoLoaded"></video> -->
      <div class="video-title">
        <h1>DDAC游戏盾——让APP自带</h1>
        <div class="video-subtitle">“国家级别”防御</div>
        <div class="video-text">
          <p>我们把7层防护做成了一根函数 StartService</p>
          <p>客户端程序员几分钟就能完成集成，黑产却要</p>
          <p>重新设计整条攻击链</p>
        </div>
      </div>
    </section>
    <Introduction />
    <section class="main-text">
      <h2 class="main-text-title">一体化解决游戏安全问题</h2>
      <p class="main-text-subtitle">整合资源、强化防御，让安全从未如此简单</p>
    </section>
    <Card />
    <section class="products-server">
      <h2>为您定制的企业级安全服务包</h2>
      <PlansSection style="margin-top: 40px;" />
    </section>
    <section class="products-sdk">
      <h2>安全加速SDK防护架构</h2>
      <NuxtImg width="1920" loading="eager" src="/images/products/flowchart.png" alt="安全加速SDK防护架构" />
    </section>
  </section>
</template>

<script setup>

import { ref } from 'vue'
import Introduction from '~/components/products/Introduction.vue'
import Card from '~/components/products/Card.vue'
const videoRef = ref(null)
const onVideoLoaded = () => {
  if (videoRef.value) {
    videoRef.value.play().catch(() => {
      // 自动播放失败时静默处理
    })
  }
}

useHead(() => ({
  title: 'SDK安全加固',
  meta: [
    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
    { name: 'description', content: '一体化解决游戏安全问题' },
    { name: 'keywords', content: '全链加密 | DDoS 防护 | 智能加速 ' }
  ]
}))
</script>

<style scoped lang="scss">
.video-section {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  height: 790px;

  .left-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 927px;
    height: auto;
    aspect-ratio: 103/62;
    background-image: url('/images/products/sdk-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
    opacity: 0.6;
  }

  .right-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 1216px;
    height:840px;
    background-image: url('/images/products/sdk-bg1.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    opacity: 0.6;
  }

  .video-bg {
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
    position: relative;
    object-fit: cover;
    clip-path: inset(0 0 0% 0);
  }

  .video-title {
    position: absolute;
    top: 30%;
    left: 48%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    z-index: 3;
    color: #fff;
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 30px;

    h1 {
      font-size: 45px;
      font-weight: 500;
      line-height: 45px;
      background: linear-gradient(91deg, #D8D3FF -6.9%, #E6D2FF 111.73%);
      background-clip: text;
    }

    .video-subtitle {
      margin-left: -4%;
      color: #DBB9FF;
      font-size: 45px;
      font-weight: 500;
      line-height: 45px;
    }

    .video-text {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    p {
      color: #E2D9FF;
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
    }

  }
}

.main-text {
  width: 100%;
  text-align: center;
  margin-top: 92px;

  .main-text-title {
    font-size: 45px;
    font-style: normal;
    font-weight: 500;
    line-height: 80px;
    background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .main-text-subtitle {
    color: #E2D9FF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 80px;
  }
}

.products-server {
  width: 100%;
  height: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  position: relative;

  h2 {
    font-size: 45px;
    font-style: normal;
    font-weight: 500;
    line-height: 80px;
    background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -14%;
    width: 1280px;
    height: 1280px;
    transform: translate(-50%) rotate(173.992deg);
    border-radius: 50%;
    background: linear-gradient(189deg, #7A41FF 6.39%, rgba(3, 0, 20, 0.20) 30.53%);
    filter: blur(50px);
    z-index: 0;
  }
}

.products-sdk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-bottom: 92px;

  h2 {
    font-size: 62px;
    font-style: normal;
    font-weight: 500;
    line-height: 80px;
    background: linear-gradient(91deg, #C597FF 4.96%, #C597FF 109.07%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>