rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add initial styling and layout for portal views

Browse Source 
- 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:
Rogee
2025-12-26 09:18:41 +08:00
parent a4262b4a52
commit bcbd3327ea
40 changed files with 3795 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/portal/src/layout/LayoutUser.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div class="min-h-screen flex flex-col bg-slate-50">
<TopNavbar />
<main class="flex-grow pt-16">
<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8 flex gap-8">
<!-- Sidebar -->
<aside class="w-[280px] flex-shrink-0 hidden lg:block">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden sticky top-24">
<!-- User Brief -->
<div class="p-6 border-b border-slate-100 bg-slate-50/50">
<div class="flex items-center gap-4">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
<div class="overflow-hidden">
<div class="font-bold text-slate-900 truncate">Felix Demo</div>
<div class="text-xs text-slate-500">ID: 9527330</div>
</div>
</div>
</div>
<!-- Menus -->
<nav class="p-4 space-y-1">
<router-link to="/me" exact-active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
<i class="pi pi-home text-lg"></i>
<span>概览</span>
</router-link>
<router-link to="/me/orders" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
<i class="pi pi-shopping-bag text-lg"></i>
<span>我的订单</span>
</router-link>
<router-link to="/me/wallet" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
<i class="pi pi-wallet text-lg"></i>
<span>我的钱包</span>
</router-link>
<router-link to="/me/library" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
<i class="pi pi-book text-lg"></i>
<span>已购内容</span>
</router-link>
<router-link to="/me/notifications" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
<i class="pi pi-bell text-lg"></i>
<span>消息中心</span>
</router-link>
<div class="my-2 border-t border-slate-100"></div>
<router-link to="/me/profile" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
<i class="pi pi-user text-lg"></i>
<span>个人资料</span>
</router-link>
<router-link to="/me/security" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
<i class="pi pi-shield text-lg"></i>
<span>账号安全</span>
</router-link>
</nav>
</div>
</aside>
<!-- Main Content -->
<div class="flex-grow min-w-0">
<router-view />
</div>
</div>
</main>
<AppFooter />
</div>
</template>
<script setup>
import TopNavbar from '../components/TopNavbar.vue';
import AppFooter from '../components/AppFooter.vue';
</script>