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

72
frontend/portal/src/views/user/DashboardView.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Stat Cards -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl"><i class="pi pi-wallet"></i></div>
<div>
<div class="text-sm text-slate-500">账户余额</div>
<div class="text-2xl font-bold text-slate-900">¥ 128.50</div>
</div>
<!-- <button class="ml-auto text-sm font-medium text-primary-600 hover:bg-primary-50 px-3 py-1.5 rounded transition-colors">充值</button> -->
</div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-yellow-50 text-yellow-600 flex items-center justify-center text-xl"><i class="pi pi-star"></i></div>
<div>
<div class="text-sm text-slate-500">我的积分</div>
<div class="text-2xl font-bold text-slate-900">2,450</div>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-red-50 text-red-600 flex items-center justify-center text-xl"><i class="pi pi-ticket"></i></div>
<div>
<div class="text-sm text-slate-500">优惠券</div>
<div class="text-2xl font-bold text-slate-900">3 张</div>
</div>
</div>
</div>
<!-- Recent Orders -->
<div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-bold text-slate-900">最近订单</h2>
<router-link to="/me/orders" class="text-sm text-primary-600 hover:text-primary-700 font-medium">查看全部 <i class="pi pi-angle-right"></i></router-link>
</div>
<div class="space-y-4">
<div class="flex items-center gap-4 p-4 border border-slate-100 rounded-lg hover:border-slate-300 transition-colors cursor-pointer">
<div class="w-16 h-16 bg-slate-100 rounded object-cover flex-shrink-0">
<img src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" class="w-full h-full object-cover rounded">
</div>
<div class="flex-1 min-w-0">
<h3 class="font-bold text-slate-900 truncate">《霸王别姬》全本实录珍藏版</h3>
<div class="text-sm text-slate-500 mt-1">2025-12-24 14:30 · 订单号: 82934712</div>
</div>
<div class="text-right">
<div class="font-bold text-slate-900">¥ 9.90</div>
<div class="text-sm text-green-600 mt-1">交易成功</div>
</div>
</div>
<!-- More items... -->
</div>
</div>
<!-- Recent Views -->
<div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-bold text-slate-900">最近浏览</h2>
<button class="text-sm text-slate-500 hover:text-slate-700"><i class="pi pi-trash"></i> 清空历史</button>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
<div v-for="i in 5" :key="i" class="group cursor-pointer">
<div class="aspect-[16/9] bg-slate-100 rounded-lg overflow-hidden mb-2 relative">
<img :src="`https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60`" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
</div>
<h4 class="text-sm font-medium text-slate-800 line-clamp-2 group-hover:text-primary-600">京剧名家谈戏曲传承与创新发展的思考</h4>
<div class="text-xs text-slate-400 mt-1">10分钟前</div>
</div>
</div>
</div>
</div>
</template>

6
frontend/portal/src/views/user/LibraryView.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div class="p-8">
<h1 class="text-2xl font-bold mb-4">My Library</h1>
<p class="text-slate-400">(Purchased content)</p>
</div>
</template>

6
frontend/portal/src/views/user/NotificationsView.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div class="p-8">
<h1 class="text-2xl font-bold mb-4">Notifications</h1>
<p class="text-slate-400">(Message center)</p>
</div>
</template>

6
frontend/portal/src/views/user/OrdersView.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div class="p-8">
<h1 class="text-2xl font-bold mb-4">My Orders</h1>
<p class="text-slate-400">(Order list)</p>
</div>
</template>

6
frontend/portal/src/views/user/ProfileView.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div class="p-8">
<h1 class="text-2xl font-bold mb-4">Profile Settings</h1>
<p class="text-slate-400">(Edit profile)</p>
</div>
</template>

6
frontend/portal/src/views/user/SecurityView.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div class="p-8">
<h1 class="text-2xl font-bold mb-4">Account Security</h1>
<p class="text-slate-400">(Password and bindings)</p>
</div>
</template>

6
frontend/portal/src/views/user/WalletView.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div class="p-8">
<h1 class="text-2xl font-bold mb-4">My Wallet</h1>
<p class="text-slate-400">(Balance and transactions)</p>
</div>
</template>