DDAC/app/components/mobile/about/DCard.vue

<template>
  <section class="mb-about-dcard">
    <div class="mb-dcard-item" v-for="item in dcards" :key="item.icon">
      <div class="mb-icon-wrapper">
        <img :src="item.icon" alt="icon" class="mb-dcard-icon" />
      </div>
      <div class="mb-dcard-title">{{ item.title }}</div>
      <div class="mb-dcard-subtitle">{{ item.subTitle }}</div>
      <div class="mb-dcard-desc">{{ item.desc }}</div>
    </div>
  </section>
</template>
<script setup>
const dcards = [
  {
    icon: '/images/about/icon-dc1.png',
    title: '黑洞级流量清洗',
    subTitle: '清洗能力：T级+',
    desc: ' 自研分布式清洗架构，多节点协同作战，从网络层到应用层全方位识别并拦截恶意流量，确保正常业务零损耗通过。 '
  },
  {
    icon: '/images/about/icon-dc2.png',
    title: '五重防线联防',
    subTitle: '防护覆盖：100%',
    desc: 'CDN · 游戏盾 · 高防服务器 · 高防IP · SDK五大产品不是各自为战，而是智能协同、实时联动，构建无死角立体防御体系。'
  },
  {
    icon: '/images/about/icon-dc3.png',
    title: '毫秒级智能调度',
    subTitle: '切换响应：<50ms',
    desc: '基于实时流量分析的智能调度系统，攻击发生时自动识别、秒级切换防御节点，业务端完全无感知。'
  },
  {
    icon: '/images/about/icon-dc4.png',
    title: '全天候安全值守',
    subTitle: '服务响应：7×24h',
    desc: '7×24小时专业安全团队在线，攻击告警秒级推送，VIP客户专属技术通道，确保任何时刻都有人为你的业务兜底。'
  }
]
</script>
<style lang="scss" scoped>
.mb-about-dcard {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  margin: 20px auto 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;

  .mb-icon-wrapper {
    position: relative;

    .mb-dcard-icon {
      position: relative;
      width: 48px;
      height: auto;
      display: block;
      z-index: 1;
    }
  }

  .mb-icon-wrapper {
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      background: #7D46FF;
      filter: blur(20px);
      z-index: 0;
    }
  }

  .mb-dcard-item {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    width: 168px;
    min-height: 242px;
    border-radius: 16px;
    border: 1px solid #ADA8FF;
    background: #030014;
    padding: 8px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFF;
    transition: border-color 0.3s ease;

    &::after {
      content: "";
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 20px;
      background: linear-gradient(90deg,
          rgba(125, 70, 255, 1) 30%,
          rgba(82, 229, 255, 1) 30%);
      filter: blur(50px);
      transition: opacity 0.3s ease;
    }


    .mb-dcard-title {
      margin-top: 16px;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
    }

    .mb-dcard-subtitle {
      margin-top: 8px;
      display: inline-flex;
      height: 24px;
      width: auto;
      padding: 0 10px;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: 400;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(32, 0, 84, 0.00) 0%, #4905B7 100%);
      box-shadow: 0 4px 4px 0 rgba(98, 0, 255, 0.30) inset;
    }

    .mb-dcard-desc {
      margin-top: 12px;
      font-size: 10px;
      font-weight: 400;
      line-height: 18px;
      text-align: center;
    }
  }

}
</style>