@@ -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; | ||||
/*系统默认菜单被禁用*/ | /*系统默认菜单被禁用*/ | ||||