renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: optimize background rendering with transform-gpu

Browse Source
This commit is contained in:
Hakadao
2024-05-04 00:12:03 +08:00
parent 77b5e90799
commit 7d53a9a87f
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/AppBackground.vue
View File

@@ -38,39 +38,39 @@ function setAppWallpaperMaskingOpacity() {
<!-- background -->
<div
pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
z--1
z--1 transform-gpu
:style="{ backgroundImage: `url('${settings.individuallySetSearchPageWallpaper ? getBewlyImage(settings.searchPageWallpaper) : getBewlyImage(settings.wallpaper)}')` }"
/>
<!-- background mask -->
<transition name="fade">
<Transition name="fade">
<div
v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
duration-300 z--1
duration-300 z--1 transform-gpu
:style="{
backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
}"
/>
</transition>
</Transition>
</div>
<div v-else>
<!-- background -->
<div
:style="{ backgroundImage: `url('${getBewlyImage(settings.wallpaper)}')` }"
pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
z--1
z--1 transform-gpu
/>
<!-- background mask -->
<transition name="fade">
<Transition name="fade">
<div
v-if="settings.enableWallpaperMasking"
pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
duration-300 z--1
duration-300 z--1 transform-gpu
:style="{
backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
}"
/>
</transition>
</Transition>
</div>
</Transition>
</template>