Commit 5b63f0ca authored by RuoYi's avatar RuoYi

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

parent 8f145bba
<template> <template>
<div> <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-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
<el-row> <el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}"> <el-col :xs="24" :md="12" :style="{height: '350px'}">
...@@ -139,4 +139,28 @@ export default { ...@@ -139,4 +139,28 @@ export default {
} }
} }
}; };
</script> </script>
\ No newline at end of file <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>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment