背景模糊
This commit is contained in:
parent
6fab9ab63d
commit
ef0d1b59fb
@ -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>
|
Loading…
Reference in New Issue
Block a user