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

<template>
  <section class="mb-product">
    <section class="video-section">
      <div class="video-title">
        <h1>DDAC游戏盾——让APP自带</h1>
        <div class="video-subtitle">“国家级别”防御</div>
        <div class="video-text">
          却只需要开发者“日常级别”
          的工作量
        </div>
        <div class="video-btn">
          联系我们 <Icon size="16" name="ic:sharp-keyboard-arrow-right"></Icon>
        </div>
      </div>
      <div class="right-bg"></div>
    </section>
    <Introduction />
    <section class="mb-card-text">
      <h3>
        一体化解决游戏安全问题
      </h3>
      <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">
              <img :src="item.icon" alt="icon">
              <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>
    <div class="mb-plans-box">
      <PlansSection />
    </div>
    <section class="mb-flow">
      <h3>安全加速SDK防护架构</h3>
      <NuxtImg loading="eager" src="/images/products/sdk-flow.png" alt="安全加速SDK防护架构" />
    </section>

  </section>
</template>

<script setup>
import { ref } from 'vue'
import Introduction from '~/components/mobile/products/Introduction.vue'
import PlansSection from '~/components/mobile/home/PlansSection.vue'
import icon1 from '~/assets/svg/products/sdk/security.svg'
import icon2 from '~/assets/svg/products/sdk/acceleration.svg'
import icon3 from '~/assets/svg/products/sdk/lock.svg'
import icon4 from '~/assets/svg/products/sdk/user.svg'

useHead(() => ({
  title: 'SDK安全加固',
  meta: [
    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
  ]
}))

const accordionItems = [
  {
    title: 'DDoS 防护',
    description: '分布式的抗D节点，同时基于SDK端流量数据的灵活调度策略，智能隔离清洗攻击流量。',
    icon: icon1
  },
  {
    title: '智能加速',
    description: '基于用户IP识别，智能网络传输线路选择，静态动态Edge分发，即时游戏无延迟。',
    icon: icon2
  },
  {
    title: '全链加密',
    description: 'SDK自身高强度加密，且可以实时动态更新，安全可靠，无惧 MITM Attack。',
    icon: icon3
  },
  {
    title: '用户友好的加密调度中心',
    description: '用于替代DNS的一个加密调度中心，能够实现细化到单个客户端，级别的秒级调度，兼容性稳定可靠!提供完整SDK中文文档，轻松集成!',
    icon: icon4
  }
]

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-product {
  .video-section {
    box-sizing: border-box;
    padding-top: 32px;
    display: flex;
    position: relative;
    width: 100%;
    margin: 0 auto;


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

    .video-title {
      z-index: 3;
      color: #fff;
      font-style: normal;
      display: flex;
      flex-direction: column;

      h1 {
        font-size: 14px;
        font-weight: 500;
        background: linear-gradient(91deg, #D8D3FF -6.9%, #E6D2FF 111.73%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

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

      .video-text {
        width: 130px;
        margin-top: 12px;
        color: #E2D9FF;
        font-size: 10px;
        font-weight: 400;
      }

      .video-btn {
        margin-top: 12px;
        display: flex;
        width: 85px;
        height: 24px;
        justify-content: center;
        align-items: center;
        color: #FFF;
        font-size: 10px;
        font-weight: 400;
        border-radius: 4px;
        background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
      }
    }
  }

}

.mb-card-text {
  margin-top: 20px;

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

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

    .accordion-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

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

      img {
        width: 24px;
        height: 24px;
      }
    }

    .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-plans-box {
  margin-top: 44px;
  margin-bottom: 60px;
  position: relative;

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

.mb-flow {
  padding-top: 20px;

  h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    background: linear-gradient(91deg, #C597FF 4.96%, #C597FF 109.07%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  :deep(img) {
    width: 100%;
    height: auto;
  }
}
</style>