DDAC/app/components/Footer.vue

<template>
  <footer class="footer" role="contentinfo">
    <div class="footer-container">
      <!-- 品牌标识 -->
      <div class="footer-brand">
        <h2 class="brand-title">DDAC</h2>
      </div>

      <!-- 导航链接区域 -->
      <nav class="footer-nav" aria-label="Footer navigation">
        <section class="nav-column">
          <h3 class="nav-title">安全产品</h3>
          <ul class="nav-list">
            <li>
              <span class="nav-link">SDK安全加速（游戏DDoS、CC、WAF防护）</span>
            </li>
            <li>
              <span class="nav-link">Web安全加速（网站DDoS、CC、WAF防护）</span>
            </li>
            <li>
              <span class="nav-link">TCP安全加速（DDoS防护）</span>
            </li>
            <li>
              <span class="nav-link">DNS安全加速（域名解析）</span>
            </li>
          </ul>
        </section>

        <section class="nav-column">
          <h3 class="nav-title">安全服务</h3>
          <ul class="nav-list">
            <li>
              <span class="nav-link">互联网暴露面检测服务</span>
            </li>
            <li>
              <span class="nav-link">渗透测试服务</span>
            </li>
            <li>
              <span class="nav-link">安全巡检和加固服务</span>
            </li>
            <li>
              <span class="nav-link">重保服务</span>
            </li>
            <li>
              <span class="nav-link">其他安全专家服务</span>
            </li>
          </ul>
        </section>

        <section class="nav-column">
          <h3 class="nav-title">热搜榜单</h3>
          <ul class="nav-list">
            <li>
              <span class="nav-link">零信任安全访问</span>
            </li>
            <li>
              <span class="nav-link">出海云主机</span>
            </li>
            <li>
              <span class="nav-link">Web网站安全加速</span>
            </li>
            <li>
              <span class="nav-link">APP安全加速</span>
            </li>
          </ul>
        </section>

        <section class="nav-column">
          <h3 class="nav-title">文档中心</h3>
          <ul class="nav-list">
            <li>
              <span class="nav-link">入门指导</span>
            </li>
            <li>
              <span class="nav-link">问答专区</span>
            </li>
            <li>
              <span class="nav-link">主题</span>
            </li>
            <li>
              <span class="nav-link">资讯列表</span>
            </li>
            <li>
              <span class="nav-link">关键词</span>
            </li>
          </ul>
        </section>

        <section class="nav-column">
          <h3 class="nav-title">关于我们</h3>
          <ul class="nav-list">
            <li>
              <span class="nav-link">企业简介</span>
            </li>
            <li>
              <span class="nav-link">资质认证</span>
            </li>
            <li>
              <span class="nav-link">法律条款</span>
            </li>
            <li>
              <span class="nav-link">大事记</span>
            </li>
          </ul>
        </section>
      </nav>

      <!-- 行业解决方案 -->
      <div class="footer-section">
        <span class="section-link">行业解决方案</span>
      </div>

      <!-- 联系信息 -->
      <div class="footer-contact">
        <span class="contact-label">联系我们</span>
        <a href="mailto:support@yundun.com" class="contact-email" aria-label="企业邮箱">企业邮箱：support@yundun.com</a>
      </div>

      <!-- 底部信息 -->
      <div class="footer-bottom">
        <span class="report-link">举报中心</span>
        <p class="copyright">Copyright@2025&nbsp;SUYUN,All&nbsp;Rights&nbsp;Reserved</p>
      </div>
    </div>
  </footer>
</template>

<script setup>
// Footer组件，无需额外逻辑
</script>

<style lang="scss" scoped>
.footer {
  width: 100%;
  background-color: #030014;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  padding: 100px 0 0;
  min-height: 783px;

  .footer-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 360px;
    box-sizing: border-box;

    .footer-brand {
      margin-bottom: 91px;

      .brand-title {
        
        font-size: 36px;
        font-weight: 900;
        line-height: 36px;
        color: #ffffff;
        margin: 0;
      }
    }

    .footer-nav {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      max-width: 1200px;
      margin-bottom: 54px;

      .nav-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        &:not(:first-child) {
          margin-left: 127px;
        }

        .nav-title {
          
          font-size: 20px;
          font-weight: 500;
          line-height: 20px;
          color: #ffffff;
          margin: 0 0 24px 0;
          white-space: nowrap;
        }

        .nav-list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          li {
            margin-bottom: 20px;

            &:last-child {
              margin-bottom: 0;
            }

            .nav-link {
              
              font-size: 14px;
              font-weight: 400;
              line-height: 14px;
              color: #bdbdbd;
              text-decoration: none;
              white-space: nowrap;
              transition: color 0.3s ease;

              &:hover {
                color: #ffffff;
              }
            }
          }
        }
      }
    }

    .footer-section {
      margin-bottom: 50px;

      .section-link {
        
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;
        text-decoration: none;
        transition: color 0.3s ease;

        &:hover {
          color: #bdbdbd;
        }
      }
    }

    .footer-contact {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 57px;
      gap: 44px;

      .contact-label {
        
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;
        white-space: nowrap;
      }

      .contact-email {
        
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
        color: #bdbdbd;
        text-decoration: none;
        transition: color 0.3s ease;

        &:hover {
          color: #ffffff;
        }
      }
    }

    .footer-bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 1200px;
      margin-bottom: 50px;

      .report-link {
        
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.3s ease;

        &:hover {
          color: #bdbdbd;
        }
      }

      .copyright {
        
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;
        margin: 0;
        white-space: nowrap;
      }
    }

  }
}
</style>