Commit 5b63f0cab97b16fd6e47b11afe7fa527b7254b2c
1 parent
8f145bba
优化头像样式，鼠标移入悬停遮罩
Showing
1 changed file
with
26 additions
and
2 deletions
ruoyi-ui/src/views/system/user/profile/userAvatar.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" /> | 3 | + <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div> |
| 4 | <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"> | 4 | <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"> |
| 5 | <el-row> | 5 | <el-row> |
| 6 | <el-col :xs="24" :md="12" :style="{height: '350px'}"> | 6 | <el-col :xs="24" :md="12" :style="{height: '350px'}"> |
| @@ -139,4 +139,28 @@ export default { | @@ -139,4 +139,28 @@ export default { | ||
| 139 | } | 139 | } |
| 140 | } | 140 | } |
| 141 | }; | 141 | }; |
| 142 | -</script> | ||
| 143 | \ No newline at end of file | 142 | \ No newline at end of file |
| 143 | +</script> | ||
| 144 | +<style scoped lang="scss"> | ||
| 145 | +.user-info-head { | ||
| 146 | + position: relative; | ||
| 147 | + display: inline-block; | ||
| 148 | +} | ||
| 149 | + | ||
| 150 | +.user-info-head:hover:after { | ||
| 151 | + content: '+'; | ||
| 152 | + position: absolute; | ||
| 153 | + left: 0; | ||
| 154 | + right: 0; | ||
| 155 | + top: 0; | ||
| 156 | + bottom: 0; | ||
| 157 | + color: #eee; | ||
| 158 | + background: rgba(0, 0, 0, 0.5); | ||
| 159 | + font-size: 24px; | ||
| 160 | + font-style: normal; | ||
| 161 | + -webkit-font-smoothing: antialiased; | ||
| 162 | + -moz-osx-font-smoothing: grayscale; | ||
| 163 | + cursor: pointer; | ||
| 164 | + line-height: 110px; | ||
| 165 | + border-radius: 50%; | ||
| 166 | +} | ||
| 167 | +</style> | ||
| 144 | \ No newline at end of file | 168 | \ No newline at end of file |