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

<template>
  <section>
    <section class="mb-boost-section">
      <NuxtImg class="sd-bg" src="/images/products/sd-bg.png" alt="cdn" />
      <div class="video-title">
        <h1><span>高防</span>服务器，也能<span>极致加速</span></h1>
        <div class="video-subtitle">
          <p>因为我们通过全球近源清洗，把攻击挡在千里之外，为合法流量让出了纯净快车道。</p>
        </div>
        <div class="video-btn">
          <span>联系我们</span>
          <Icon name="line-md:chevron-right" />
        </div>
      </div>
    </section>
    <section class="mb-boost-card">
      <div class="card-title">
        <h2>真正实现秒级抵御</h2>
        <p>让高防服务器在DDoS攻击中守护您的业务无忧</p>
      </div>
      <div class="mb-accordion">
        <div v-for="(item, index) in accordionItems" :key="item.title" class="accordion-item"
          :class="{ 'is-open': openIndices.includes(index) }" @click="toggleAccordion(index)">
          <div class="accordion-header">
            <div class="accordion-left">
              <span class="accordion-title">{{ item.title }}</span>
            </div>
            <Icon name="line-md:chevron-right" class="accordion-icon" />
          </div>
          <Transition name="accordion-expand">
            <div v-show="openIndices.includes(index)" class="accordion-body">
              <p class="accordion-text">{{ item.description }}</p>
            </div>
          </Transition>
        </div>
      </div>
    </section>
    <SecurityServicesSuite />
    <section class="mb-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>
          </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>
          </div>
        </transition>
      </div>
    </section>
    <section class="mb-security-section">
      <div class="security-title">
        <h2>安全&nbsp;&nbsp;可靠&nbsp;&nbsp;极速</h2>
        <p>防御与加速，一体两面，同时生效</p>
      </div>
      <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>
      <NuxtImg class="simg" src="/images/products/suo.png" alt="suo" />
    </section>
  </section>
</template>

<script setup>
useHead(() => ({
  title: '高防服务器',
}))
import SecurityServicesSuite from '~/components/mobile/products/SecurityServicesSuite.vue'
const activeTab = ref('accelerate')

const accordionItems = [
  {
    title: '美/日/港三地高防节点灵活部署，助您业务即刻抵御DDoS风',
    description: ` • 美国节点：立足全球网络核心，提供卓越的欧美访问体验与高规格防御带宽，是进军国际市场的战略支点。
 • 日本节点：作为东亚数据枢纽，为日本、韩国及泛亚地区用户提供超低延迟访问，保障区域业务流畅稳定。
 • 香港节点：具备独特的网络中立性与中国大陆极速连接能力，是同时服务内地用户与全球业务的绝佳桥梁。`,
  },
  {
    title: '全球分布式近源清洗，让攻击流量无法触及您的业务核心',
    description: ` 我们的国际高级防御线路，为您构筑了一道远离业务核心的“防火墙”。它基于遍布全球的多个流量清洗中心，提供高达2Tbps的单点防御带宽。其核心原理在于近源清洗：当攻击流量还在国际网络枢纽中奔袭时，系统便能在最靠近攻击源的节点对其进行实时识别、分流与彻底清洗。这意味着，只有洁净、安全的流量才会被转发至您的服务器。`,
  },
  {
    title: '从全局架构到智能边缘，为您重定义“安全”与“速度”',
    description: ` 我们提供的不仅是一个高防节点，而是一张深度融合安全能力与全球加速的智能网络。 我们深知，传统的“CDN加速”与“高防服务器”是分离的两层，这常常意味着复杂的配置与潜在的性能损耗。因此，我们从根本上重新设计，基于完整的全球智能网络，原生构建了具备强大防护能力的CDN节点。 每一个CDN节点，都原生集成了与骨干网同级的DDoS清洗与Web应用加速能力。 MITM Attack。`,
  },
]

const openIndices = ref([0])

const toggleAccordion = (index) => {
  const i = openIndices.value.indexOf(index)
  if (i > -1) {
    openIndices.value.splice(i, 1)
  } else {
    openIndices.value.push(index)
  }
}
</script>

<style scoped lang="scss">
.mb-boost-section {
  position: relative;
  width: 100%;
  margin: 0 auto;


  .sd-bg {
    position: absolute;
    width: 260px;
    height: auto;
    right: 0;
    top: 0;
    // transform: translate(-50%);
  }


  .video-title {
    padding-top: 20px;
    position: relative;
    width: 100%;
    z-index: 3;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;

    h1 {
      color: #D8D3FF;
      font-size: 14px;
      font-weight: 500;

      span {
        color: #997DFF;
      }
    }

    .video-subtitle {
      color: #E2D9FF;
      font-size: 10px;
      font-weight: 400;
      width: 168px;
    }

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


    .video-btn {
      margin-top: 16px;
      display: flex;
      box-sizing: border-box;
      width: 85px;
      height: 24px;
      justify-content: center;
      align-items: center;
      gap: 6px;
      border-radius: 4px;
      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);

      span {
        color: #FFF;
        font-size: 10px;
        font-weight: 400;
      }
    }
  }
}

.mb-boost-card {
  margin-top: 22px;

  .card-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;

    h2 {
      color: #FFF;
      font-size: 20px;
      font-weight: 400;
    }

    p {
      font-size: 14px;
      font-weight: 400;
      background: linear-gradient(90deg, #A2C2FF 5.58%, #A47DFF 89.68%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .mb-accordion {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .accordion-item {
      padding: 20px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: #1C192B;
      backdrop-filter: blur(9px);
      transition: border-color 0.2s ease, background 0.2s ease;
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        right: -40px;
        bottom: -40px;
        width: 160px;
        height: 160px;
        border-radius: 999px;
        pointer-events: none;
        background: conic-gradient(from 45deg, #5A7DFF, #9E3BFF, #5A7DFF);
        filter: blur(30px) drop-shadow(0 0 20px rgba(90, 125, 255, 0.5));
        opacity: 0;
        transition: opacity 200ms ease;
        z-index: 0;
      }

      &.is-open::after {
        opacity: .4;
      }
    }

    .accordion-header {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 20px;
    }

    .accordion-left {
      display: flex;
      align-items: center;
      gap: 10px;

    }

    .accordion-title {
      color: #FFF;
      font-size: 14px;
      font-weight: 500;
    }

    .accordion-icon {
      color: #fff;
      font-size: 20px;
      transition: transform 0.2s ease;
    }

    .accordion-item.is-open .accordion-icon {
      transform: rotate(90deg);
    }

    .accordion-body {
      margin-top: 10px;
    }

    .accordion-text {
      color: rgba(255, 255, 255, 0.50);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
  }

  .accordion-expand-enter-active,
  .accordion-expand-leave-active {
    transition: all 0.2s ease;
    overflow: hidden;
  }

  .accordion-expand-enter-from,
  .accordion-expand-leave-to {
    opacity: 0;
    max-height: 0;
  }

  .accordion-expand-enter-to,
  .accordion-expand-leave-from {
    opacity: 1;
    max-height: 200px;
  }


}

.mb-tabs-section {
  margin-top: 48px;
  width: 100%;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    width: 287px;
    height: 147px;
    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(30px);
    z-index: 1;
  }

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


  .toggle-container {
    position: relative;
    display: flex;
    width: 215px;
    height: 52px;
    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-container,
  .toggle-option {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
  }

  .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: 16px;
    font-weight: 500;
    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%;
    margin: 16px auto 0;
    padding: 28px 16px;
    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;

    .content-panel {
      display: flex;

      .content-text {
        display: flex;
        flex-direction: column;
        gap: 20px;

        h3 {
          text-align: center;
          color: #FFF;
          font-size: 14px;
          font-weight: 400;
        }

        p {
          color: rgba(255, 255, 255, 0.60);
          font-size: 12px;
          font-weight: 400;
          line-height: 24px;
        }

        span {
          color: #A39DFF;
        }
      }
    }
  }
}

.mb-security-section {
  margin-top: 56px;

  .security-title {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;

    h2 {
      color: #FFF;
      font-size: 20px;
      font-weight: 400;
    }

    p {
      color: #A39DFF;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .features-grid {
    margin-top: 26px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;

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

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

      span {
        color: #FFF;
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
      }
    }
  }

  .simg {

    margin: 0 -16px;
    width: 375px;
    height: auto;
  }
}
</style>