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.5);
  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;

    // PC端样式
    @media (min-width: 769px) {
      .footer-brand {
        margin-bottom: 91px;

        .brand-title {
          font-family: 'Roboto', sans-serif;
          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: 1201px;
        margin-bottom: 54px;

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

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

          .nav-title {
            font-family: 'Source Han Sans CN', sans-serif;
            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-family: 'Source Han Sans CN', sans-serif;
                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-family: 'Source Han Sans CN', sans-serif;
          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-family: 'Source Han Sans CN', sans-serif;
          font-size: 20px;
          font-weight: 400;
          line-height: 20px;
          color: #ffffff;
          white-space: nowrap;
        }

        .contact-email {
          font-family: 'Source Han Sans CN', sans-serif;
          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-family: 'Source Han Sans CN', sans-serif;
          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-family: 'Source Han Sans CN', sans-serif;
          font-size: 20px;
          font-weight: 400;
          line-height: 20px;
          color: #ffffff;
          margin: 0;
          white-space: nowrap;
        }
      }
    }


  }
}
</style>