个人中心头像鼠标悬浮修改

src/views/user/Setting.vue

@@ -5,7 +5,12 @@
       <el-avatar :src="avatar" :size="116" alt=""></el-avatar>
       <!-- <span>{{userInfo.name}}</span> -->
       <!-- <el-button type="primary" @click="openAvatar">修改头像</el-button> -->
+      <div @click="openAvatar" class="avatarhover">
+       <img :src="`${webBaseUrl}/images/phone.png`" alt="">
+       <h6>修改头像</h6>
     </div>
+    </div>
+    
     <!-- <el-form :model="form" label-position="right" label-width="80px"> -->
       <div class="informationItem">
         <div class="information-header">
@@ -393,7 +398,35 @@
 </script>
 
 <style lang="scss" scoped>
-
+.avatarhover{
+  width: 116px;
+   height: 116px;
+  background-color: rgba(0, 0, 0, 0.4);
+   border-radius: 50%;
+   position: absolute;
+   cursor:pointer;
+   display: none;
+   left: 0%;
+   top:0px;
+   text-align: center;
+  img{
+   width: 42px;
+   height: 38px;
+   vertical-align: bottom;
+   margin-top: 22px;
+   margin-bottom: 5px;
+  }
+  h6{
+  font-size: 18px;
+  font-weight: 400;
+  color: #FFFFFF;
+  margin: 0px;
+  }
+  
+}
+.avatar:hover .avatarhover{
+  display: block;
+}
 ::v-deep .el-checkbox-button--medium .el-checkbox-button__inner{
   // padding: 10px 40px !important;
   width: 146px;
@@ -489,6 +522,8 @@
     // margin: 0 auto;
     position: relative;
     .avatar{
+      width: 116px;
+      height: 116px;
       position: absolute;
       cursor:pointer;
       left: 5%;