DDAC/app/pages/pc/products/boost.vue

<template>
  <div>
    <section class="video-section">
      <video ref="videoRef" class="video-bg" src="~/assets/video/web.mp4" autoplay loop muted playsinline
        @loadedmetadata="onVideoLoaded"></video>
      <div class="video-title">
        <p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
        <h1><span>高防</span>服务器，也能<span>极致加速</span></h1>
        <div class="video-subtitle">
          <p>因为我们通过全球近源清洗，把攻击挡在千里之外，为合法流量让出了纯净快车道</p>
          <p>这得益于我们完整的智能网络架构，可以以此基础构建原生的高防CDN，</p>
          <p>这是一套完整的解决方案，而非功能拼凑 </p>
        </div>
        <div class="video-btn">
          <span>联系我们</span>
          <Icon name="line-md:chevron-right" />
        </div>
      </div>
    </section>
    <Defense />
    <SecurityServicesSuite />
    <section class="tabs-section">
      <ParticlesCanvas class="tabs-canvas" />
      <div class="toggle-container">
        <div class="toggle-bg" :class="{ 'right': activeTab === 'defense' }"></div>
        <div class="toggle-option" :class="{ 'active': activeTab === 'accelerate' }" @click="activeTab = 'accelerate'">
          加速
        </div>
        <div class="toggle-option" :class="{ 'active': activeTab === 'defense' }" @click="activeTab = 'defense'">
          防御
        </div>
      </div>

      <div class="tab-content">
        <transition name="fade" mode="out-in">
          <div v-if="activeTab === 'accelerate'" key="accelerate" class="content-panel">
            <div class="content-text">
              <h3>高防，不应以牺牲速度为代价</h3>
              <div>
                <p> 在传统方案中，您常常面临两难选择：开启全力防御，可能影响用户体验；追求极致速度，又需在安全上承担风险。 我们的高防服务器终结了这种取舍。它通过全球近源清洗与智能路由调度的一体化架构，实现了：</p>
                <p> 1. <span>加速式防御</span>：攻击在远离您服务器的外围被化解，合法流量无需绕行任何冗余检查点，路径更短，延迟更低。</p>
                <p>2. <span>无感安全</span>：用户不会感知到任何复杂的验证或速度衰减，他们只会体验到前所未有的稳定与流畅。</p>
                <p> <span>这意味您的业务可以同时达成两个看似矛盾的目标：在顶级安全防护下，实现全球用户的极速访问。</span></p>
              </div>
            </div>
            <NuxtPicture width="446" height="366" src="/images/products/tab-img.png" alt="tab图片" />
          </div>
          <div v-else key="defense" class="content-panel">
            <div class="content-text">
              <h3>御攻击于无形，赋业务以极速</h3>
              <div>
                <p>我们的高防服务器，重新定义了“防护”的含义。它并非在您的业务通道上设置一道需要检查的“减速闸”，而是在全球网络边缘提前构建了一个智能的“净化与调度层”。</p>
                <p>• <span>对于攻击流量</span>：在靠近攻击源的枢纽进行实时清洗与拦截，使其根本无权进入您的业务通道。</p>
                <p>• <span>对于合法用户</span>：系统自动为其选择最洁净、最短、最稳定的路径，直连您的服务器。</p>
                <p><span>因此，您获得的不是一个“更安全但可能更慢”的服务器，而是一个 “因极致安全而更加通畅” 的业务环境。威胁被阻挡在外，而体验畅行无内。</span></p>

              </div>
            </div>
            <NuxtPicture width="446" height="366" src="/images/products/tab-img.png" alt="tab图片" />
          </div>
        </transition>
      </div>
    </section>
  </div>
</template>
<script setup>
definePageMeta({
  layout: 'pc'
})
useHead(() => ({
  title: '高防服务器',
  meta: [
    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
    { name: 'description', content: '高防服务器，也能极致加速' },
    { name: 'keywords', content: 'CDN分发|网站保护' }
  ]
}))
import SecurityServicesSuite from '~/components/products/SecurityServicesSuite.vue';
import Defense from '~/components/products/Defense.vue';
import ParticlesCanvas from '~/components/ParticlesCanvas.vue'

const activeTab = ref('accelerate')

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


  .video-bg {
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
    position: relative;
    object-fit: cover;
    clip-path: inset(0 0 9% 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;

    h1 {
      color: #D8D3FF;
      font-size: 45px;
      font-style: normal;
      font-weight: 500;
      line-height: 80px;

      span {
        color: #997DFF;
      }
    }

    .video-subtitle {
      color: #E2D9FF;
      font-size: 16px;
      font-weight: 400;
      line-height: 30px;

      >p:last-of-type {
        color: #9C8DFE;
        font-size: 18px;
      }
    }

    .video-text {
      color: #E2D9FF;
      font-size: 20px;
      font-style: normal;
      font-weight: 300;
      line-height: 30px;
    }


    .video-btn {
      cursor: pointer;
      margin-top: 30px;
      display: flex;
      box-sizing: border-box;
      width: 255px;
      height: 60px;
      padding: 7px 21px 7px 45px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border-radius: 10px;
      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
    }
  }
}

.tabs-section {
  width: 100%;
  height: 660px;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    width: 972px;
    height: 604px;
    border-radius: 972px;
    background: linear-gradient(180deg, rgba(123, 140, 255, 0.20) 0.19%, rgba(135, 85, 255, 0.20) 46.36%);
    filter: blur(50px);
    z-index: 1;
  }

  &::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%);
    width: 574px;
    height: 336px;
    border-radius: 574px;
    background: linear-gradient(180deg, #7B8CFF 0.19%, #8755FF 46.36%);
    filter: blur(50px);
    z-index: 1;
  }

  .tabs-canvas {
    position: absolute;
    height: 200px;
    top: -10%;
    left: 50%;
    transform: translate(-50%);
  }

  .toggle-container {
    position: relative;
    display: flex;
    width: 200px;
    height: 50px;
    border-radius: 26px;
    border: 1px solid #CCA8FF;
    background: rgba(22, 19, 56, 0.50);
    backdrop-filter: blur(10px);
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    margin: 0 auto;
    z-index: 10;
    box-sizing: border-box;
  }

  .toggle-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #17133B;
    border-radius: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 1;
  }

  .toggle-bg.right {
    transform: translateX(100%);
  }

  .toggle-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #9D8FFF;
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    transition: color 0.3s;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .toggle-option.active {
    color: #D2CCFF;
  }

  .tab-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 40px 15px 40px 60px;
    box-sizing: border-box;
    z-index: 2;
    border-radius: 20px;
    border-top: 2px solid #9F46FF;
    background: rgba(28, 26, 43, 0.60);
    backdrop-filter: blur(100px);
    color: #fff;
    min-height: 446px;

    .content-panel {
      display: flex;
      gap: 56px;

      .content-text {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        gap: 40px;

        h3 {
          color: #FFF;
          font-size: 45px;
          font-weight: 400;
          line-height: 45px;
        }

        p {
          color: rgba(255, 255, 255, 0.60);
          font-size: 14px;
          font-weight: 400;
          line-height: 26px;
          width: 622px;
        }

        span {
          color: #A39DFF;
        }
      }
    }
  }
}
</style>