mirror of
https://github.com/imsyy/SPlayer.git
synced 2025-11-25 11:29:26 +08:00
72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
:class="['background', settingStore.playerBackgroundType]"
|
|
:style="{ '--main-color': statusStore.mainColor }"
|
|
>
|
|
<Transition name="fade" mode="out-in">
|
|
<!-- 背景色 -->
|
|
<div
|
|
v-if="settingStore.playerBackgroundType === 'color'"
|
|
:key="statusStore.mainColor"
|
|
class="color"
|
|
/>
|
|
<!-- 背景模糊 -->
|
|
<s-image
|
|
v-else-if="settingStore.playerBackgroundType === 'blur'"
|
|
:src="musicStore.songCover"
|
|
class="bg-img"
|
|
alt="cover"
|
|
/>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
|
|
|
|
const musicStore = useMusicStore();
|
|
const statusStore = useStatusStore();
|
|
const settingStore = useSettingStore();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
&.blur {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.bg-img {
|
|
width: 100%;
|
|
height: auto;
|
|
transform: scale(1.5);
|
|
filter: blur(80px) contrast(1.2);
|
|
}
|
|
}
|
|
&.color {
|
|
background-color: rgb(var(--main-color));
|
|
.color {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgb(var(--main-color));
|
|
}
|
|
}
|
|
}
|
|
</style>
|