DDAC/app/components/about/DCard.vue

<template>
  <section class="about-dcard">
    <div class="dcard-item" v-for="item in dcards" :key="item.icon">
      <div class="icon-wrapper">
        <img :src="item.icon" alt="icon" class="dcard-icon" />
      </div>
      <div class="dcard-title">{{ item.title }}</div>
      <div class="dcard-subtitle">{{ item.subTitle }}</div>
      <div class="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>
.about-dcard {
  position: relative;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 64px auto 130px;
  display: flex;
  gap: 30px;

  .icon-wrapper {
    position: relative;

    .dcard-icon {
      width: auto;
      height: auto;
      display: block;
    }
  }

  .dcard-item:hover .icon-wrapper {
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 86px;
      height: 86px;
      background: #7D46FF;
      filter: blur(38px);
    }
  }

  .dcard-item {
    overflow: hidden;
    position: relative;
    width: 278px;
    height: 400px;
    border-radius: 24px;
    border: 1px solid rgba(163, 157, 255, 0.30);
    background: #030014;
    padding: 28px 22px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFF;
    transition: border-color 0.3s ease;

    &:hover {
      border-color: #ADA8FF;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 278px;
      height: 80px;
      background: conic-gradient(rgba(125, 70, 255, .4) 0deg, rgba(82, 229, 255, .4) 180deg, rgba(88, 91, 255, .4) 360deg);
      filter: blur(50px);
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    &:hover::before {
      opacity: 0;
    }

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

    &:hover::after {
      opacity: 1;
    }

    .dcard-title {
      margin-top: 38px;
      font-size: 20px;
      font-weight: 500;
    }

    .dcard-subtitle {
      margin-top: 12px;
      display: inline-flex;
      height: 34px;
      width: 164px;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 400;
      border-radius: 20px;
      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;
    }

    .dcard-desc {
      margin-top: 26px;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
    }
  }

}
</style>