mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.6 KiB
76 lines
1.6 KiB
<template>
|
|
<div class="background" draggable="false" :style="{ backgroundColor: background }">
|
|
<template v-if="backgroundType === 'image'">
|
|
<Transition name="fade">
|
|
<img
|
|
v-show="loaded"
|
|
draggable="false"
|
|
@load="imgload"
|
|
class="background_load"
|
|
:src="background"
|
|
/>
|
|
</Transition>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref, watch } from "vue";
|
|
import { useSystem } from "@/system";
|
|
const rootState = useSystem()._rootState;
|
|
const backgroundType = ref("color");
|
|
const background:any = ref("#3A98CE");
|
|
const loaded = ref(false);
|
|
|
|
function imgload() {
|
|
loaded.value = true;
|
|
}
|
|
onMounted(() => {
|
|
refershBack(rootState.options.background);
|
|
});
|
|
watch(rootState.options, (nv) => {
|
|
refershBack(nv.background);
|
|
});
|
|
function refershBack(val: string | undefined) {
|
|
background.value = val || "#3A98CE";
|
|
//console.log(background.value)
|
|
if (background.value || background.value.startsWith("/image/")) {
|
|
backgroundType.value = "image";
|
|
} else {
|
|
backgroundType.value = "color";
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.background {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.704);
|
|
user-select: none;
|
|
.background_unload {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.background_load {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.fade-enter-to,
|
|
.fade-leave-from {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
|