feat: update ui

This commit is contained in:
yanghao05
2025-04-16 21:54:27 +08:00
parent 85ece3e899
commit 682a2397d2
17 changed files with 525 additions and 223 deletions

View File

@@ -9,21 +9,21 @@ const userInfo = ref({
</script>
<template>
<div class="user-profile p-3">
<Card>
<template #header>
<div class="flex align-items-center gap-3">
<Avatar :image="userInfo.avatar" size="large" />
<h3>{{ userInfo.name }}</h3>
<div class="p-4">
<div class="bg-white rounded-lg shadow-sm p-4">
<div class="flex items-center gap-4 p-4 border-b border-gray-100">
<div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden">
<img v-if="userInfo.avatar" :src="userInfo.avatar" alt="头像" class="w-full h-full object-cover">
</div>
</template>
<template #content>
<div class="grid">
<Button label="我的收藏" class="p-button-text" />
<Button label="我的点赞" class="p-button-text" />
<Button label="订单列表" class="p-button-text" />
</div>
</template>
</Card>
<h3 class="text-xl font-medium">{{ userInfo.name }}</h3>
</div>
<div class="grid grid-cols-3 gap-4 p-4">
<button v-for="(item, index) in ['我的收藏', '我的点赞', '订单列表']" :key="index"
class="py-3 text-center text-gray-700 hover:bg-gray-50 active:bg-gray-100 rounded-lg transition-colors">
{{ item }}
</button>
</div>
</div>
</div>
</template>