30 lines
1.0 KiB
Vue
30 lines
1.0 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const userInfo = ref({
|
|
name: '用户名',
|
|
avatar: '',
|
|
// Add more user info as needed
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|
|
<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>
|