优化头像样式,鼠标移入悬停遮罩
This commit is contained in:
		
							parent
							
								
									8f145bba3a
								
							
						
					
					
						commit
						5b63f0cab9
					
				@ -1,6 +1,6 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <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-row>
 | 
			
		||||
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
 | 
			
		||||
@ -139,4 +139,28 @@ 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
	
	Block a user