| @@ -1,5 +1,9 @@ | |||||
| <template> | <template> | ||||
| <view class="page"> | <view class="page"> | ||||
| <!-- 毛玻璃 --> | |||||
| <view class="glass"> | |||||
| <image src="../../assets/img/homeImg.png" mode="scaleToFill" /> | |||||
| </view> | |||||
| <view class="showImgBox imgContenBox" | <view class="showImgBox imgContenBox" | ||||
| ><image :src="styleData.coverImg" | ><image :src="styleData.coverImg" | ||||
| /></view> | /></view> | ||||
| @@ -31,7 +35,7 @@ import { | |||||
| //#region 初始化 | //#region 初始化 | ||||
| const styleId = ref(null); | const styleId = ref(null); | ||||
| const styleData = ref(null); | |||||
| const styleData = ref({}); | |||||
| onLoad((options) => { | onLoad((options) => { | ||||
| styleId.value = options.id; | styleId.value = options.id; | ||||
| getInfo(); | getInfo(); | ||||
| @@ -3,6 +3,10 @@ | |||||
| <!-- 背景图 --> | <!-- 背景图 --> | ||||
| <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> --> | <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> --> | ||||
| <!-- 头像 --> | <!-- 头像 --> | ||||
| <!-- 毛玻璃 --> | |||||
| <view class="glass"> | |||||
| <image src="../../assets/img/homeImg.png" mode="scaleToFill" /> | |||||
| </view> | |||||
| <view class="avatarBox"> | <view class="avatarBox"> | ||||
| <image | <image | ||||
| class="avatar" | class="avatar" | ||||
| @@ -16,6 +16,24 @@ | |||||
| min-height: calc(100vh - 44px); | min-height: calc(100vh - 44px); | ||||
| } | } | ||||
| // 毛玻璃 | |||||
| .glass { | |||||
| position: fixed; | |||||
| width: 100vw; | |||||
| height: 100vh; | |||||
| z-index: -9; | |||||
| image { | |||||
| width: 100vw; | |||||
| height: 100vh; | |||||
| // position: fixed; | |||||
| // background-size: 100% 100%; | |||||
| // z-index: -1; | |||||
| /* 通过滤镜增加毛玻璃效果 */ | |||||
| filter: blur(20rpx); | |||||
| } | |||||
| } | |||||
| body { | body { | ||||
| -webkit-touch-callout: none; | -webkit-touch-callout: none; | ||||
| /*系统默认菜单被禁用*/ | /*系统默认菜单被禁用*/ | ||||