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 | 1 | <template> |
| 2 | 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 | 4 | <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"> |
| 5 | 5 | <el-row> |
| 6 | 6 | <el-col :xs="24" :md="12" :style="{height: '350px'}"> |
| ... | ... | @@ -139,4 +139,28 @@ export default { |
| 139 | 139 | } |
| 140 | 140 | } |
| 141 | 141 | }; |
| 142 | -</script> | |
| 143 | 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 | 168 | \ No newline at end of file | ... | ... |