DDAC/app/pages/web/about.vue

<template>
  <section class="about">
    <NuxtImg class="about-bg" src="/images/about/bg.png" alt="about" />
    <section class="about-content">
      <div class="about-title">
        <h1>层层设防，步步为盾,全产品矩阵协同打造零穿透安全体系</h1>
        <p>A collaborative approach across the entire product portfolio creates a zero-penetration security system.</p>
      </div>
      <div class="about-box">
        <div class="about-box-text">
          <p style="color: #D2AEFF;">盾网络 — 专注于企业级DDoS/CC防护与安全加速的网络安全服务商。</p>
          <p>我们以自研流量清洗架构为核心，构建了覆盖高防CDN、游戏盾、高防服务器、高防IP、SDK防护的全链路安全产品体系。依托全国多节点分布式防御网络，为游戏、电商、金融、直播等行业客户提供T级攻击防御与毫秒级响应保障。
          </p>
          <p>技术是我们的信仰，稳定是我们的承诺。1盾，让每一次攻击都徒劳无功。</p>
        </div>
        <NuxtImg class="about-box-img" src="/images/about/dun.png" alt="about-box" />
      </div>
    </section>
    <section class="about-subtitle">
      <h2>全维度安全防护矩阵</h2>
      <p>以体系化、可持续的安全能力构建覆盖全业务场景的多维联动防护框架，全面提升企业在复杂</p>
      <p>环境下的风险抵御与运营保障水平</p>
    </section>
    <Flowchart />
    <section class="about-matrix">
      <h2>驱动业务持续稳定运行的全域安</h2>
      <h2>全产品矩阵</h2>
      <p>以全球节点、智能调度与多层防护为底座，构建覆盖业务接入、传输、抗攻击与终端安全的全</p>
      <p>链路产品体系，为企业提供可扩展、可进化的稳态安全能力。</p>
    </section>
    <MatrixCard />
  </section>
</template>
<script setup>
import Flowchart from '~/components/about/Flowchart.vue';
import MatrixCard from '~/components/about/MatrixCard.vue';

</script>
<style lang="scss" scoped>
.about {
  width: 100%;
  padding-top: 88px;
  position: relative;
  margin: 0 auto;

  .about-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1430px;
    height: auto;
  }

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

    .about-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #FFF;

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

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

    .about-box {
      position: relative;
      width: 1200px;
      height: 487px;
      margin-top: 192px;
      border-radius: 30px;
      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(25px);

      .about-box-text {
        width: 520px;
        height: 260px;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        margin: 102px 0 125px 50px;
        color: #FFF;
        font-size: 16px;
        font-weight: 400;
      }

      .about-box-img {
        position: absolute;
        top: 50%;
        right: 90px;
        transform: translateY(-50%);
        width: 400px;
        height: auto;
      }
    }
  }

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

    h2 {
      font-size: 45px;
      font-weight: 700;
      margin-bottom: 32px;
    }

    p {
      font-size: 16px;
      font-weight: 400;
      line-height: 36px;
    }
  }

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

    h2 {
      font-size: 45px;
      font-weight: 700;
      line-height: 60px;
    }

    p {
      font-size: 16px;
      font-weight: 400;
      line-height: 36px;

      &:first-of-type {
        margin-top: 32px;
      }
    }
  }
}
</style>