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

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

@ -7,26 +7,30 @@
</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;">
<Avataaars <el-col>
v-show="cropperVisible" <Avataaars
id="avatarSvg" v-show="cropperVisible"
style="width: 100px; height: 100px;" id="avatarSvg"
:avatarStyle='avatar.avatarStyle' style="width: 256px; height: 256px;"
:topType='avatar.topType' :avatarStyle='avatar.avatarStyle'
:accessoriesType='avatar.accessoriesType' :topType='avatar.topType'
:hairColor='avatar.hairColor' :accessoriesType='avatar.accessoriesType'
:facialHairType='avatar.facialHairType' :hairColor='avatar.hairColor'
:clotheType='avatar.clotheType' :facialHairType='avatar.facialHairType'
:clotheColor='avatar.clotheColor' :clotheType='avatar.clotheType'
:eyeType='avatar.eyeType' :clotheColor='avatar.clotheColor'
:eyebrowType='avatar.eyebrowType' :eyeType='avatar.eyeType'
:mouthType='avatar.mouthType' :eyebrowType='avatar.eyebrowType'
:skinColor='avatar.skinColor'> :mouthType='avatar.mouthType'
</Avataaars> :skinColor='avatar.skinColor'>
<img @click="cropperVisible=true" :src="user.avatarUrl" /> </Avataaars>
<span @click="genAvatar" title="随机头像" class="random">{{ randomTitle }}</span> <img @click="cropperVisible=true" alt="用户头像" :src="user.avatarUrl" class="card-profile-img-avatar"/>
<!-- <span class="random">上传</span>--> </el-col>
<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>