feat: add initial styling and layout for portal views
- Created a global CSS file for consistent styling across the application. - Implemented the Explore, Home, Topics, and various user views with responsive design. - Added a Login view with OTP functionality and a Checkout view for order processing. - Developed a NotFound view for handling 404 errors. - Established a configuration file for Vite with Tailwind CSS integration.
This commit is contained in:
57
frontend/portal/src/components/AppFooter.vue
Normal file
57
frontend/portal/src/components/AppFooter.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<footer class="bg-slate-900 text-slate-400 mt-auto">
|
||||
<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 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-white/10 rounded-lg flex items-center justify-center text-white font-bold text-xl">Q</div>
|
||||
<span class="text-xl font-bold text-white">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-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i class="pi pi-twitter"></i></a>
|
||||
<a href="#" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i class="pi pi-github"></i></a>
|
||||
<a href="#" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i class="pi pi-discord"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">关于我们</h3>
|
||||
<ul class="space-y-3 text-sm">
|
||||
<li><a href="#" class="hover:text-white transition-colors">平台介绍</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">加入我们</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">联系方式</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">合作伙伴</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">帮助中心</h3>
|
||||
<ul class="space-y-3 text-sm">
|
||||
<li><a href="#" class="hover:text-white transition-colors">用户指南</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">创作者手册</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">反馈建议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">法律条款</h3>
|
||||
<ul class="space-y-3 text-sm">
|
||||
<li><a href="#" class="hover:text-white transition-colors">用户协议</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">隐私政策</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">知识产权</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">社区规范</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-slate-800 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>
|
||||
Reference in New Issue
Block a user