46 lines
880 B
Vue
46 lines
880 B
Vue
<template>
|
|
<div class="page">
|
|
<div class="bio">
|
|
<img
|
|
v-if="actor.avatar"
|
|
:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
|
:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
|
|
class="avatar"
|
|
>
|
|
|
|
<h2 class="name">{{ actor.name }}</h2>
|
|
</div>
|
|
|
|
<Scenes />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { inject } from 'vue';
|
|
|
|
import Scenes from '#/components/scenes/scenes.vue';
|
|
|
|
const pageContext = inject('pageContext');
|
|
const { pageProps } = pageContext;
|
|
|
|
const { actor } = pageProps;
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bio {
|
|
display: flex;
|
|
padding: 1rem;
|
|
background: var(--grey-dark-40);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.name {
|
|
margin: 0;
|
|
}
|
|
|
|
.avatar {
|
|
height: 10rem;
|
|
margin-right: 1rem;
|
|
}
|
|
</style>
|