背景模糊

This commit is contained in:
jqtmviyu@gmail.com 2021-03-05 21:27:31 +08:00
parent 6fab9ab63d
commit ef0d1b59fb

View File

@ -2,6 +2,7 @@
<view class="user"> <view class="user">
<!-- 1. 已登录 --> <!-- 1. 已登录 -->
<block v-if="userInfo.nickName"> <block v-if="userInfo.nickName">
<image class="user_avatar_bg" :src="userInfo.avatarUrl" mode="aspectFill"></image>
<image class="user_avatar" :src="userInfo.avatarUrl"></image> <image class="user_avatar" :src="userInfo.avatarUrl"></image>
<text class="user_nickName">{{userInfo.nickName}}</text> <text class="user_nickName">{{userInfo.nickName}}</text>
</block> </block>
@ -34,11 +35,13 @@ page {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.user { .user {
position: relative;
height: 330rpx; height: 330rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
.user_btn { .user_btn {
background-color: #07c160; background-color: #07c160;
color: #fff; color: #fff;
@ -56,6 +59,17 @@ page {
.user_nickName { .user_nickName {
font-size: 32rpx; font-size: 32rpx;
margin-top: 20rpx; margin-top: 20rpx;
color: #fff;
} }
} }
.user_avatar_bg {
width: 120%;
height: 120%;
position: absolute;
left: -10%;
top: -10%;
z-index: -1;
filter: blur(30px) grayscale(20%);
}
</style> </style>