Просмотр исходного кода

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

RuoYi лет назад: 5
Родитель
Сommit
1a12d56cc3
1 измененных файлов с 26 добавлено и 2 удалено
  1. 26 2
      ruoyi-ui/src/views/system/user/profile/userAvatar.vue

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

@@ -1,6 +1,6 @@
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>
142
+</script>
143
+<style scoped lang="scss">
144
+.user-info-head {
145
+  position: relative;
146
+  display: inline-block;
147
+}
148
+
149
+.user-info-head:hover:after {
150
+  content: '+';
151
+  position: absolute;
152
+  left: 0;
153
+  right: 0;
154
+  top: 0;
155
+  bottom: 0;
156
+  color: #eee;
157
+  background: rgba(0, 0, 0, 0.5);
158
+  font-size: 24px;
159
+  font-style: normal;
160
+  -webkit-font-smoothing: antialiased;
161
+  -moz-osx-font-smoothing: grayscale;
162
+  cursor: pointer;
163
+  line-height: 110px;
164
+  border-radius: 50%;
165
+}
166
+</style>