优化头像样式，鼠标移入悬停遮罩

RuoYi

2020-11-19 5b63f0cab97b16fd6e47b11afe7fa527b7254b2c

优化头像样式，鼠标移入悬停遮罩

 ruoyi-ui/src/views/system/user/profile/userAvatar.vue

@@ -1,6 +1,6 @@
<template>

  <div>

    <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />

    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">

      <el-row>

        <el-col :xs="24" :md="12" :style="{height: '350px'}">

@@ -139,4 +139,28 @@
    }

  }

};

</script>
</script>

<style scoped lang="scss">

.user-info-head {

  position: relative;

  display: inline-block;

}



.user-info-head:hover:after {

  content: '+';

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  color: #eee;

  background: rgba(0, 0, 0, 0.5);

  font-size: 24px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  cursor: pointer;

  line-height: 110px;

  border-radius: 50%;

}

</style>