修改头像

components/UserManage.vue

@@ -5,15 +5,18 @@
         <p>账号管理</p>
       </div>  
       <div class="accountmanage-content">
-        <div class="changeheader flex justify-center">
-          <span><img src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg"></span>
-          <div class="headers">
+        <div class="changeheader flex justify-center relative"  >
+          <span ><img @mouseover="showEdit = true" @mouseenter="showEdit = true" @mouseout = "showEdit = false" class="cursor-pointer"
+             src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg"></span>
+          <div class="absolute headers" v-show="showEdit">
+            <span class="absolute z-1"><img src="~/assets/images/common/edit.png"></span>
+            <input type="file" accept="image/*" class="left z-10 w-64px h-64px rounded-35px bg-[#000] opacity-0" @change="addFile($event)">
           </div>
         </div>
 
         <div class="row-name">
           <span>昵称</span>
-          <input v-model="username" @blur="handlerChangeUserName">
+          <input  v-model="username" @blur="handlerChangeUserName">
           <!-- <p class="err-prompt">用户名已经存在</p> -->
         </div>
         <div class="changepwd" @click="changepwdModal()">
@@ -59,6 +62,7 @@ export default {
       },
       errMsg:'',
       isRight: false,
+      showEdit: false
     }
   },
   watch:{
@@ -140,6 +144,10 @@ export default {
       this.errMsg = ''
       this.isRight = false
     },
+    //上传图片
+    addFile(event){
+      console.log(event,event.target.files)
+    }
   },
   props:["dialogVisiable"],
   mounted() {
@@ -171,13 +179,19 @@ export default {
     }
 
     .headers {
-      margin-top: 8px;
+      width: 64px;
+      height: 64px;
+      margin: 0 24px;
       padding-bottom: 24px;
-      border-bottom: 1px solid rgb(240, 240, 240);
+      display:flex;
+      justify-content:center;
+      align-items:center;
+      border-radius: 35px;
+      background: #979797e6;
       img {
-        width: 36px;
+        width: 20px;
+        margin-top: 22px;
         border-radius: 35px;
-        margin: 8px 2px 0px 2px;
       }
     }
 
@@ -201,7 +215,7 @@ export default {
     input {
       width: 88%;
       float: right;
-      height: 30px;
+      height: 50px;
       line-height: 30px;
       text-align: right;
       border: 0px;
@@ -230,7 +244,7 @@ export default {
   }
 
   .changepwd {
-    color: rgb(51, 51, 51);
+    color: rgba(0, 0, 0, 0.4);
     height: 64px;
     font-size: 14px;
     cursor:pointer;