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

modify ui

Browse Source
This commit is contained in:
Rogee
2025-05-14 17:42:44 +08:00
parent 2f8f7c6072
commit a8a41b8382
9 changed files with 352 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/wechat/src/views/UserProfile.vue
View File

@@ -35,30 +35,55 @@ const menuGroups = [
</script>
<template>
<div class="bg-white p-4 shadow-lg border-b border-gray-300">
<div class="flex items-center gap-4 p-4 border-gray-100">
<div class="w-16 h-16 border rounded-full border-gray-200 bg-gray-200 overflow-hidden">
<img :src="userInfo.avatar" :alt="userInfo.username" class="w-full h-full object-cover" />
</div>
<div class="min-h-screen bg-gray-50">
<!-- 用户信息卡片 -->
<div class="bg-white shadow-sm">
<div class="max-w-2xl mx-auto">
<div class="flex items-center gap-4 p-6">
<div class="w-20 h-20 rounded-full border-2 border-white shadow-lg overflow-hidden bg-gray-100">
<img :src="userInfo.avatar"
:alt="userInfo.username"
class="w-full h-full object-cover" />
</div>
<div>
<h3 class="text-xl font-medium">{{ userInfo.username }}</h3>
<div class="text-gray-500">用户编号: {{ userInfo.id }}</div>
<div class="text-gray-500">账户余额: {{ (userInfo.balance / 100).toFixed(2) }}</div>
<div class="space-y-1">
<h3 class="text-xl font-semibold text-gray-800">
{{ userInfo.username }}
</h3>
<div class="text-gray-500 text-sm">
用户编号: {{ userInfo.id }}
</div>
<div class="text-primary-600 font-medium">
账户余额: ¥{{ (userInfo.balance / 100).toFixed(2) }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menus space-y-4 mt-4 px-4 hidden">
<div v-for="(group, groupIndex) in menuGroups" :key="groupIndex" class="bg-white rounded-lg overflow-hidden">
<div class="px-4 py-2 text-sm text-gray-500">{{ group.title }}</div>
<div class="divide-y divide-gray-100">
<div v-for="(item, itemIndex) in group.items" :key="itemIndex"
class="flex items-center px-4 py-3 hover:bg-gray-50 active:bg-gray-100 cursor-pointer">
<component :is="item.icon" class="mr-3 text-xl text-gray-600" />
<span class="flex-1">{{ item.label }}</span>
<span class="text-gray-400">›</span>
<!-- 菜单列表 -->
<div class="max-w-2xl mx-auto px-4 py-6 space-y-4">
<div v-for="(group, groupIndex) in menuGroups"
:key="groupIndex"
class="bg-white rounded-xl overflow-hidden shadow-sm">
<div class="px-4 py-2 text-sm font-medium text-gray-500 bg-gray-50">
{{ group.title }}
</div>
<div class="divide-y divide-gray-100">
<div v-for="(item, itemIndex) in group.items"
:key="itemIndex"
class="flex items-center px-4 py-3.5 hover:bg-gray-50 active:bg-gray-100
cursor-pointer transition-colors duration-150">
<component :is="item.icon"
class="mr-3 text-xl text-gray-500" />
<span class="flex-1 text-gray-700">{{ item.label }}</span>
<span class="text-gray-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</span>
</div>
</div>
</div>
</div>