feat: update ui
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user