DDAC/app/components/about/MatrixCard.vue

<template>
  <section class="matrix-card">
    <div class="card-wrapper" v-for="item in cards" :key="item.icon">
      <img class="item-icon" :src="item.icon" alt="icon">
      <div class="card-bg"></div>
      <div class="card-content">
        <h3>{{ item.title }}</h3>
        <p>{{ item.text }}</p>
        <span :style="{ color: item.color }">{{ item.desc }}</span>
      </div>
    </div>
  </section>
</template>

<script setup>
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 cards = [
  {
    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'

  }
]


</script>

<style lang="scss" scoped>
.matrix-card {
  position: relative;
  margin: 100px auto 0;
  max-width: 1200px;
  box-sizing: border-box;
  display: flex;
  gap: 25px;

  &::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 657px;
    height: 297px;
    border-radius: 657px;
    background: rgba(125, 70, 255, 0.50);
    filter: blur(250px);

  }

  .card-wrapper {
    position: relative;
    width: 220px;
    height: 180px;
    padding-top: 32px;

    .item-icon {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
    }

    .card-bg {
      position: absolute;
      left: 0;
      top: 24px;
      width: 220px;
      height: 180px;
      border-radius: 20px;
      border: 1px solid rgba(64, 64, 64, 0.50);
      background: rgba(255, 255, 255, 0.10);
      box-shadow: -20px 68px 20px 0 rgba(0, 0, 0, 0.00), -13px 43px 18px 0 rgba(0, 0, 0, 0.01), -7px 24px 15px 0 rgba(0, 0, 0, 0.04), -3px 11px 11px 0 rgba(0, 0, 0, 0.07), -1px 3px 6px 0 rgba(0, 0, 0, 0.08);
      backdrop-filter: blur(12.5px);
      transition: all 0.3s ease;
      z-index: 1;
    }

    &:hover .card-bg {
      top: 0;
      height: 228px;
      transform: translateY(-24px);
    }

    .card-content {
      position: relative;
      z-index: 2;
      padding: 30px 14px 0;
      font-weight: 400;

      h3 {
        margin: 0 0 12px 0;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
      }

      p {
        margin: 0 0 10px 0;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.5);
      }

      span {
        font-size: 14px;
      }
    }
  }
}
</style>