From 8fc8c56e806b7d3f13eb93926a42c52049f72151 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Tue, 20 Feb 2024 19:09:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(styles):=20lipstick:=20=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/user/settings/account.vue | 57 ++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/pages/user/settings/account.vue b/pages/user/settings/account.vue
index e32a48e..1b3d2e8 100644
--- a/pages/user/settings/account.vue
+++ b/pages/user/settings/account.vue
@@ -7,26 +7,30 @@
         </el-col>
         <el-col>
           <el-form :model="user" :rules="rules" ref="user" label-width="100px">
-            <el-form-item>
-              <Avataaars
-                v-show="cropperVisible"
-                id="avatarSvg"
-                style="width: 100px; height: 100px;"
-                :avatarStyle='avatar.avatarStyle'
-                :topType='avatar.topType'
-                :accessoriesType='avatar.accessoriesType'
-                :hairColor='avatar.hairColor'
-                :facialHairType='avatar.facialHairType'
-                :clotheType='avatar.clotheType'
-                :clotheColor='avatar.clotheColor'
-                :eyeType='avatar.eyeType'
-                :eyebrowType='avatar.eyebrowType'
-                :mouthType='avatar.mouthType'
-                :skinColor='avatar.skinColor'>
-              </Avataaars>
-              <img @click="cropperVisible=true" :src="user.avatarUrl" />
-              <span @click="genAvatar" title="随机头像" class="random">{{ randomTitle }}</span>
-<!--              <span class="random">上传</span>-->
+            <el-form-item style="text-align: center;">
+              <el-col>
+                <Avataaars
+                  v-show="cropperVisible"
+                  id="avatarSvg"
+                  style="width: 256px; height: 256px;"
+                  :avatarStyle='avatar.avatarStyle'
+                  :topType='avatar.topType'
+                  :accessoriesType='avatar.accessoriesType'
+                  :hairColor='avatar.hairColor'
+                  :facialHairType='avatar.facialHairType'
+                  :clotheType='avatar.clotheType'
+                  :clotheColor='avatar.clotheColor'
+                  :eyeType='avatar.eyeType'
+                  :eyebrowType='avatar.eyebrowType'
+                  :mouthType='avatar.mouthType'
+                  :skinColor='avatar.skinColor'>
+                </Avataaars>
+                <img @click="cropperVisible=true" alt="用户头像" :src="user.avatarUrl" class="card-profile-img-avatar"/>
+              </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 label="昵称" prop="nickname">
               <el-input v-model="user.nickname" @blur="checkNickname"></el-input>
@@ -126,8 +130,7 @@ export default {
       avatar: {},
     }
   },
-  watch: {
-  },
+  watch: {},
   methods: {
     updateUser(data) {
       let _ts = this;
@@ -226,4 +229,14 @@ export default {
   cursor: pointer;
   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>