DDAC/app/pages/mobile/about.vue

<template>
  <section class="mb-about">
    <NuxtImg class="mb-about-bg" src="/images/about/bg.png" alt="about" />
    <section class="mb-about-content">
      <div class="mb-about-title">
        <h1>层层设防，步步为盾,全产品矩阵协同打造零穿透安全体系</h1>
        <p>A collaborative approach across the entire product portfolio creates a zero-penetration security system.</p>
      </div>
      <div class="mb-about-box">
        <div class="mb-about-box-text">
          <p><span style="color: #D2AEFF;">盾网络 — 专注于企业级DDoS/CC防护与安全加速的网络安全服务商。
            </span>我们以自研流量清洗架构为核心，构建了覆盖高防CDN、游戏盾、高防服务器、高防IP、SDK防护的全链路安全产品体系。依托全国多节点分布式防御网络，为游戏、电商、金融、直播等行业客户提供T级攻击防御与毫秒级响应保障。技术是我们的信仰，稳定是我们的承诺。1盾，让每一次攻击都徒劳无功。
          </p>
        </div>
      </div>
    </section>
    <section class="mb-about-subtitle">
      <h2>全维度安全防护矩阵</h2>
      <p>体系化安全能力，全场景多维联动防护，筑牢企业风</p>
      <p>险抵御与运营保障</p>
    </section>
    <Flowchart />
    <section class="mb-about-matrix">
      <h2>驱动业务持续稳定运行的全域安全产品矩阵</h2>
      <p>以全球节点、智能调度与多层防护为底座，构建覆盖业务接入、传</p>
      <p>输、抗攻击与终端安全的全链路产品体系，为企业提供可扩展、可</p>
      <p>进化的稳态安全能力。</p>
    </section>
    <section class="mb-matrix-card">
      <div v-for="(item, index) in accordionItems" :key="item.title" class="mb-card-item"
        :class="{ 'mb-is-open': openIndices.includes(index) }" @click="togglecard(index)">
        <div class="mb-card-header">
          <div class="mb-card-left">
            <img :src="item.icon" alt="icon">
            <span class="mb-card-title">{{ item.title }}</span>
          </div>
          <Icon name="line-md:chevron-right" class="mb-card-icon" />
        </div>
        <Transition name="mb-card-expand">
          <div v-show="openIndices.includes(index)" class="mb-card-body">
            <p class="mb-card-text">{{ item.text }}</p>
            <p :style="{ color: item.color }" class="mb-card-text">{{ item.desc }}</p>
          </div>
        </Transition>
      </div>
    </section>
    <section class="mb-about-text">
      <h2>万千攻击，1盾尽消</h2>
      <p>"T级清洗能力×智能流量调度×全链路产品联防—这就是1盾的底气"</p>
    </section>
    <DCard />
  </section>
</template>
<script setup>
import Flowchart from '~/components/mobile/about/Flowchart.vue';
import DCard from '~/components/mobile/about/DCard.vue';
import cardIcon1 from '@/assets/svg/about/card-icon1.svg'
import cardIcon2 from '@/assets/svg/about/card-icon2.svg'
import cardIcon3 from '@/assets/svg/about/card-icon3.svg'
import cardIcon4 from '@/assets/svg/about/card-icon4.svg'
import cardIcon5 from '@/assets/svg/about/card-icon5.svg'


const accordionItems = [
  {
    title: 'CDN加速',
    icon: cardIcon1,
    text: '球加速节点分发，降低延迟提升用户访问体验。',
    desc: '全球200+节点',
    color: '#A39DFF'
  },
  {
    title: '游戏盾',
    icon: cardIcon2,
    text: '专为游戏业务定制，智能调度抗DDoS，隐藏源站。',
    desc: 'T级防御能力',
    color: '#4696FF'
  },
  {
    title: '高防服务器',
    icon: cardIcon3,
    text: '物理级高防机房，大带宽大防御，稳定业务运行。',
    desc: '单节点500G+',
    color: '#B546FF'
  },
  {
    title: '高防IP',
    icon: cardIcon4,
    text: '弹性IP防护，精准流量清洗，零影响转发正常业务。',
    desc: '弹性扩展1T+',
    color: '#616EFF'
  },
  {
    title: 'SDK防护',
    icon: cardIcon5,
    text: '端侧安全加固，链路加密通信，防篡改防抓包。',
    desc: '端到端加密',
    color: '#46ECFF'

  }
]
const openIndices = ref([0])

const togglecard = (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-about {
  width: 100%;
  position: relative;

  .mb-about-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 375px;
    height: auto;
    z-index: 1;
  }

  .mb-about-content {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .mb-about-title {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #FFF;
      gap: 6px;

      h1 {
        font-size: 12px;
        font-weight: 400;
      }

      p {
        font-size: 6px;
        font-weight: 400;
      }
    }

    .mb-about-box {
      position: relative;
      margin-top: 72px;
      border-radius: 10px;
      border: 1px solid rgba(13, 0, 34, 0.00);
      background: linear-gradient(179deg, rgba(3, 0, 20, 0.50) 1.22%, rgba(151, 87, 255, 0.10) 41.19%);
      box-shadow: 0 4px 4px 0 rgba(98, 0, 255, 0.30) inset;
      backdrop-filter: blur(7px);
      padding: 16px;

      .mb-about-box-text {
        color: #FFF;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
      }

    }
  }

  .mb-about-subtitle {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFF;

    h2 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    p {
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
  }

  .mb-about-matrix {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFF;
    margin-top: 56px;
    gap: 10px;

    h2 {
      font-size: 16px;
      font-weight: 700;
    }

    p {
      font-size: 10px;
      font-weight: 400;
      line-height: 14px;
    }
  }

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

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

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

    .mb-card-left {
      display: flex;
      align-items: start;

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

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

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

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

    .mb-card-body {
      margin-top: 10px;
    }

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

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

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

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

  .mb-about-text {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;

    h2 {
      font-size: 16px;
      font-weight: 700;
    }

    p {
      font-size: 10px;
      font-weight: 400;
    }
  }
}
</style>