你能写出一个基于vue框架的uniapp个人中心页面样式吗

当然可以，以下是一个基于vue框架的uniapp个人中心页面样式：

<template>
<view class="personal-center">
<view class="profile">
<image class="avatar" src="{{ userInfo.avatarUrl }}"></image>
<view class="info">
<text class="nickname">{{ userInfo.nickname }}</text>
<text class="signature">{{ userInfo.signature }}</text>
</view>
</view>
<view class="menu">
<view class="menu-item" v-for="(item,index) in menuList" :key="index">
<image class="icon" src="{{ item.icon }}"></image>
<text class="text">{{ item.text }}</text>
<view class="badge">{{ item.badge }}</view>
</view>
</view>
</view>
</template>

<style>
.personal-center {
padding: 20rpx;
}
.profile {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: 10rpx;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
}
.nickname {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.signature {
font-size: 24rpx;
color: #666;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-item {
display: flex;
flex-direction: column;
align-items: center;
width: 33%;
margin-bottom: 20rpx;
}
.icon {
width: 48rpx;
height: 48rpx;
margin-bottom: 10rpx;
}
.text {
font-size: 28rpx;
color: #333;
}
.badge {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-color: red;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
margin-top: 10rpx;
}
</style>

<script>
export default {
data() {
return {
userInfo: {
avatarUrl: '',
nickname: '',
signature: ''
},
menuList: [
{
icon: '',
text: '',
badge: ''
},
{
icon: '',
text: '',
badge: ''
},
{
icon: '',
text: '',
badge: ''
},
{
icon: '',
text: '',
badge: ''
},
{
icon: '',
text: '',
badge: ''
},
{
icon: '',
text: '',
badge: ''
}
]
}
},
mounted() {
// 获取用户信息和菜单列表
}
}
</script>

请注意，以上代码仅供参考，具体实现可能因实际情况而异，如需更详细的实现过程和代码细节，请自行查阅相关资料。