quyun-v2/frontend/portal/src/components/AppFooter.vue

<template>
  <footer class="bg-surface-highlight text-muted mt-auto border-t border-line">
    <div class="mx-auto max-w-screen-xl py-12">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <!-- Brand -->
        <div class="col-span-1">
          <div class="flex items-center gap-2 mb-4">
            <div
              class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold text-xl"
            >
              Q
            </div>
            <span class="text-xl font-bold text-content">Quyun</span>
          </div>
          <p class="text-sm leading-relaxed mb-6">
            专业的租户管理与内容交付平台，连接创作者与用户，探索内容的无限可能。
          </p>
          <div class="flex gap-4">
            <a
              href="#"
              class="w-8 h-8 rounded-full bg-surface border border-line flex items-center justify-center hover:bg-primary-50 hover:text-primary-600 transition-all"
              ><i class="pi pi-twitter"></i
            ></a>
            <a
              href="#"
              class="w-8 h-8 rounded-full bg-surface border border-line flex items-center justify-center hover:bg-primary-50 hover:text-primary-600 transition-all"
              ><i class="pi pi-github"></i
            ></a>
            <a
              href="#"
              class="w-8 h-8 rounded-full bg-surface border border-line flex items-center justify-center hover:bg-primary-50 hover:text-primary-600 transition-all"
              ><i class="pi pi-discord"></i
            ></a>
          </div>
        </div>

        <!-- Links -->
        <div>
          <h3 class="text-content font-bold mb-4">关于我们</h3>
          <ul class="space-y-3 text-sm">
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >平台介绍</a
              >
            </li>
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >加入我们</a
              >
            </li>
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >联系方式</a
              >
            </li>
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >合作伙伴</a
              >
            </li>
          </ul>
        </div>

        <div>
          <h3 class="text-content font-bold mb-4">帮助中心</h3>
          <ul class="space-y-3 text-sm">
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >用户指南</a
              >
            </li>
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >创作者手册</a
              >
            </li>
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >常见问题</a
              >
            </li>
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >反馈建议</a
              >
            </li>
          </ul>
        </div>

        <div>
          <h3 class="text-content font-bold mb-4">法律条款</h3>
          <ul class="space-y-3 text-sm">
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >用户协议</a
              >
            </li>
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >隐私政策</a
              >
            </li>
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >知识产权</a
              >
            </li>
            <li>
              <a href="#" class="hover:text-primary-600 transition-colors"
                >社区规范</a
              >
            </li>
          </ul>
        </div>
      </div>

      <div
        class="border-t border-line mt-12 pt-8 flex flex-col md:flex-row justify-between items-center text-xs"
      >
        <p>© 2025 Quyun Platform. All rights reserved.</p>
        <p class="mt-2 md:mt-0">
          ICP 备 88888888 号-1 | 公安网备 11010102000000 号
        </p>
      </div>
    </div>
  </footer>
</template>