优化头像样式,鼠标移入悬停遮罩
This commit is contained in:
		
							parent
							
								
									8f145bba3a
								
							
						
					
					
						commit
						5b63f0cab9
					
				| 
						 | 
					@ -1,6 +1,6 @@
 | 
				
			||||||
<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'}">
 | 
				
			||||||
| 
						 | 
					@ -140,3 +140,27 @@ export default {
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
</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>
 | 
				
			||||||
		Loading…
	
		Reference in New Issue