From 5b63f0cab97b16fd6e47b11afe7fa527b7254b2c Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期四, 19 十一月 2020 09:33:10 +0800
Subject: [PATCH] 优化头像样式，鼠标移入悬停遮罩
---
ruoyi-ui/src/views/system/user/profile/userAvatar.vue | 28 ++++++++++++++++++++++++++--
1 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/ruoyi-ui/src/views/system/user/profile/userAvatar.vue b/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
index ef0c213..8304140 100644
--- a/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
+++ b/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
@@ -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 @@
}
}
};
-</script>
\ No newline at end of file
+</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>
\ No newline at end of file
--
Gitblit v1.9.2