peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(styles): lipstick: 头像样式调整

Browse Source
This commit is contained in:
ronger 2024-02-20 19:09:46 +08:00
parent 37221e8b5a
commit 8fc8c56e80
1 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
pages/user/settings/account.vue
View File

@ -7,11 +7,12 @@
</el-col> </el-col>
<el-col> <el-col>
<el-form :model="user" :rules="rules" ref="user" label-width="100px"> <el-form :model="user" :rules="rules" ref="user" label-width="100px">
<el-form-item> <el-form-item style="text-align: center;">
<el-col>
<Avataaars <Avataaars
v-show="cropperVisible" v-show="cropperVisible"
id="avatarSvg" id="avatarSvg"
style="width: 100px; height: 100px;" style="width: 256px; height: 256px;"
:avatarStyle='avatar.avatarStyle' :avatarStyle='avatar.avatarStyle'
:topType='avatar.topType' :topType='avatar.topType'
:accessoriesType='avatar.accessoriesType' :accessoriesType='avatar.accessoriesType'
@ -24,9 +25,12 @@
:mouthType='avatar.mouthType' :mouthType='avatar.mouthType'
:skinColor='avatar.skinColor'> :skinColor='avatar.skinColor'>
</Avataaars> </Avataaars>
<img @click="cropperVisible=true" :src="user.avatarUrl" /> <img @click="cropperVisible=true" alt="用户头像" :src="user.avatarUrl" class="card-profile-img-avatar"/>
<span @click="genAvatar" title="随机头像" class="random">{{ randomTitle }}</span> </el-col>
<!-- <span class="random">上传</span>--> <el-col>
<el-button @click="cropperVisible=true">上传</el-button>
<el-button @click="genAvatar" class="random">{{ randomTitle }}</el-button>
</el-col>
</el-form-item> </el-form-item>
<el-form-item label="昵称" prop="nickname"> <el-form-item label="昵称" prop="nickname">
<el-input v-model="user.nickname" @blur="checkNickname"></el-input> <el-input v-model="user.nickname" @blur="checkNickname"></el-input>
@ -126,8 +130,7 @@ export default {
avatar: {}, avatar: {},
} }
}, },
watch: { watch: {},
},
methods: { methods: {
updateUser(data) { updateUser(data) {
let _ts = this; let _ts = this;
@ -226,4 +229,14 @@ export default {
cursor: pointer; cursor: pointer;
color: #409EFF; color: #409EFF;
} }
.card-profile-img-avatar {
max-width: 16rem;
height: auto;
margin-bottom: 1rem;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}
</style> </style>