feat(about): 添加安全能力展示卡片组件及样式

添加新的DCard组件用于展示安全能力，包含四张卡片分别展示不同安全特性
新增相关图片资源，并在about页面中引入该组件
优化MatrixCard组件样式，添加背景光效

app/components/about/DCard.vue

@@ -0,0 +1,156 @@
+<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;
+
+    &::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: 146px;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 400;
+      border-radius: 20px;
+      // border: 1px solid rgba(13, 0, 34, 0.00);
+      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>

app/components/about/MatrixCard.vue

@@ -63,12 +63,27 @@ const cards = [
 
 <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;

app/pages/web/about.vue

@@ -29,11 +29,17 @@
       <p>链路产品体系，为企业提供可扩展、可进化的稳态安全能力。</p>
     </section>
     <MatrixCard />
+    <section class="about-a">
+      <h3>万千攻击，1 盾尽消</h3>
+      <p>"T级清洗能力 × 智能流量调度 × 全链路产品联防 — 这就是1盾的底气"</p>
+    </section>
+    <DCard />
   </section>
 </template>
 <script setup>
 import Flowchart from '~/components/about/Flowchart.vue';
 import MatrixCard from '~/components/about/MatrixCard.vue';
+import DCard from '~/components/about/DCard.vue';
 
 </script>
 <style lang="scss" scoped>
@@ -157,5 +163,25 @@ import MatrixCard from '~/components/about/MatrixCard.vue';
       }
     }
   }
+
+  .about-a {
+    margin-top: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #FFF;
+    gap: 20px;
+
+    h3 {
+      font-size: 45px;
+      font-weight: 700;
+    }
+
+    p {
+      font-size: 16px;
+      font-weight: 400;
+    }
+  }
 }
 </style>