50 lines
897 B
Vue
50 lines
897 B
Vue
<template>
|
|
<view
|
|
class="genealogy-page-background"
|
|
:class="{ 'genealogy-page-background--light': tone === 'light' }"
|
|
>
|
|
<image
|
|
class="genealogy-page-background__art"
|
|
src="/static/assets/modules/genealogy/opaque/genealogy-page-background-long.png"
|
|
mode="aspectFill"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
tone: { type: String, default: "default" },
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.genealogy-page-background {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
background: #e7ded1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.genealogy-page-background__art {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.28;
|
|
}
|
|
|
|
.genealogy-page-background--light {
|
|
background: #faf8f3;
|
|
}
|
|
|
|
.genealogy-page-background--light .genealogy-page-background__art {
|
|
opacity: 0.15;
|
|
}
|
|
|
|
</style>
|