67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<template>
|
|
<view
|
|
class="module-page-background"
|
|
:class="`module-page-background--${module}`"
|
|
aria-hidden="true"
|
|
>
|
|
<image
|
|
class="module-page-background__image"
|
|
:src="source"
|
|
mode="aspectFill"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
module: { type: String, required: true },
|
|
});
|
|
|
|
const sources = {
|
|
tree: "/static/assets/modules/tree/opaque/tree-page-background-long.png",
|
|
family:
|
|
"/static/assets/modules/family/opaque/family-page-background-long.png",
|
|
records:
|
|
"/static/assets/modules/records/opaque/records-page-background-long.png",
|
|
notification:
|
|
"/static/assets/modules/notification/opaque/notification-page-background-long.png",
|
|
profile:
|
|
"/static/assets/modules/profile/opaque/profile-page-background-long.png",
|
|
};
|
|
const source = computed(() => sources[props.module] || sources.profile);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.module-page-background {
|
|
position: fixed;
|
|
z-index: 0;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
background: #f5eee2;
|
|
pointer-events: none;
|
|
}
|
|
.module-page-background__image {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.36;
|
|
}
|
|
.module-page-background--family .module-page-background__image {
|
|
opacity: 0.32;
|
|
}
|
|
.module-page-background--records .module-page-background__image {
|
|
opacity: 0.3;
|
|
}
|
|
.module-page-background--notification .module-page-background__image {
|
|
opacity: 0.28;
|
|
}
|
|
.module-page-background--profile .module-page-background__image {
|
|
opacity: 0.3;
|
|
}
|
|
</style>
|