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

<template>
  <div>
    <section class="video-section">
      <NuxtImg width="1080" class="sd-bg" src="/images/products/sd-bg.png" alt="cdn" />
      <!-- <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">
      <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>
            <NuxtImg 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>
            <NuxtImg width="446" height="366" src="/images/products/tab-img.png" alt="tab图片" />
          </div>
        </transition>
      </div>
    </section>
    <section class="security-section">
      <div class="container">
        <div class="text-content">
          <h2>安全 可靠 极速</h2>
          <p class="subtitle">防御与加速，一体两面，同时生效</p>
          <div class="features-grid">
            <div class="feature-item">
              <Icon name="material-symbols:check-circle-outline" />
              <span>1. 单节点2T 防御</span>
            </div>
            <div class="feature-item">
              <Icon name="material-symbols:check-circle-outline" />
              <span>2. 近源清洗，攻击止步于千里之外</span>
            </div>
            <div class="feature-item">
              <Icon name="material-symbols:check-circle-outline" />
              <span>4. 一套架构，双重使命</span>
            </div>
            <div class="feature-item">
              <Icon name="material-symbols:check-circle-outline" />
              <span>3. 提供真正的「安全加速」</span>
            </div>
          </div>
        </div>
        <div class="image-content">
          <NuxtImg width="574" src="/images/products/suo.png" alt="suo" />
          <!-- <video ref="videoRef" class="video" preload="auto" :src="homeVideo" autoplay loop muted playsinline
            @loadedmetadata="onVideoLoaded"></video> -->
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>

useHead({
  title: '高防服务器'
})
import SecurityServicesSuite from '~/components/products/SecurityServicesSuite.vue';
import Defense from '~/components/products/Defense.vue';

const activeTab = ref('accelerate')

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

  &::before {
    content: '';
    position: absolute;
    left: 10%;
    top: 10%;
    width: 384px;
    height: 384px;
    border-radius: 50%;
    background: rgba(121, 69, 255, 0.60);
    filter: blur(250px);
  }

  .sd-bg {
    position: absolute;
    left: 60%;
    top: 0;
    transform: translate(-50%);
  }


  .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 {
      margin-top: 24px;
      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: 762px;
    height: 304px;
    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: 502px;
    height: 296px;
    border-radius: 574px;
    background: linear-gradient(180deg, #7B8CFF 0.19%, #8755FF 46.36%);
    filter: blur(50px);
    z-index: 1;
  }


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

.security-section {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: 142px;

  .container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
  }

  .text-content {
    box-sizing: border-box;
    padding-top: 70px;
    flex: 1;
    max-width: 600px;

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

    .subtitle {
      margin-top: 40px;
      color: #A39DFF;
      font-size: 24px;
      font-weight: 400;
      line-height: 24px;
    }

    .features-grid {
      margin-top: 70px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px 0px;

      .feature-item {
        display: flex;
        align-items: center;
        gap: 12px;

        .iconify {
          color: #A39DFF;
          width: 20px;
          height: 20px;
        }

        span {
          color: #FFF;
          font-size: 20px;
          font-weight: 400;
          line-height: 24px;
          white-space: nowrap;
        }
      }
    }
  }

  .image-content {
    display: flex;
    justify-content: flex-end;
    position: relative;
  }
}
</style>