64 lines
949 B
Vue
64 lines
949 B
Vue
|
<template>
|
||
|
<div class="page">
|
||
|
<div class="header">
|
||
|
<h2 class="title">{{ tag.name }}</h2>
|
||
|
</div>
|
||
|
|
||
|
<div class="content">
|
||
|
<div
|
||
|
v-if="description"
|
||
|
class="description"
|
||
|
v-html="description"
|
||
|
/>
|
||
|
|
||
|
<Scenes />
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script setup>
|
||
|
import { inject } from 'vue';
|
||
|
|
||
|
import Scenes from '#/components/scenes/scenes.vue';
|
||
|
|
||
|
const pageContext = inject('pageContext');
|
||
|
const { tag, description } = pageContext.pageProps;
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.description .link {
|
||
|
color: var(--primary);
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<style scoped>
|
||
|
.page {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.content {
|
||
|
flex-grow: 1;
|
||
|
overflow-y: auto;
|
||
|
}
|
||
|
|
||
|
.header {
|
||
|
padding: .5rem 1rem;
|
||
|
color: var(--text-light);
|
||
|
background: var(--grey-dark-40);
|
||
|
}
|
||
|
|
||
|
.title {
|
||
|
margin: 0;
|
||
|
text-transform: capitalize;
|
||
|
}
|
||
|
|
||
|
.description {
|
||
|
padding: 0 1rem .5rem 1rem;
|
||
|
color: var(--text-light);
|
||
|
background: var(--grey-dark-40);
|
||
|
line-height: 1.5;
|
||
|
}
|
||
|
</style>
|