generated from VLADIMIR/template_frontend
148 lines
3.0 KiB
Vue
148 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { useMessage } from 'naive-ui'
|
|
import { NTag } from 'naive-ui'
|
|
import { ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { getAuthClient } from '@/api/auth_client'
|
|
import type { Scenario } from '@/api/generated/crabs/evening_detective_server'
|
|
import HeaderMenu from '@/components/HeaderMenu.vue'
|
|
|
|
const message = useMessage()
|
|
const client = getAuthClient()
|
|
const route = useRoute()
|
|
|
|
const scenarioId = route.params.id
|
|
|
|
const scenario = ref<Scenario>({
|
|
id: undefined,
|
|
name: undefined,
|
|
story: undefined,
|
|
author: undefined,
|
|
status: undefined,
|
|
updatedAt: undefined,
|
|
createdAt: undefined,
|
|
publishedAt: undefined,
|
|
})
|
|
|
|
async function getScenario(id: number) {
|
|
const res = await client.GetScenario({ id: id })
|
|
if (res.error != '') {
|
|
message.error(res.error!)
|
|
return
|
|
}
|
|
scenario.value = res.scenario!
|
|
}
|
|
getScenario(Number(scenarioId))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="center-block-custom">
|
|
<div class="width700">
|
|
<section class="scenario-card">
|
|
<div class="scenario-heading">
|
|
<p class="scenario-kicker">ДЕЛО ИЗ КАТАЛОГА</p>
|
|
<h1 class="scenario-title">{{ scenario.name }}</h1>
|
|
</div>
|
|
<div class="scenario-image-frame">
|
|
<img class="scenario-image" :src="scenario.image" :alt="scenario.name" />
|
|
</div>
|
|
<div class="scenario-details">
|
|
<p class="scenario-description">{{ scenario.description }}</p>
|
|
<div class="scenario-author">
|
|
<n-tag :bordered="false" type="success" class="status-block">
|
|
Автор: {{ scenario.author?.username }}
|
|
</n-tag>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<HeaderMenu active="catalog" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.center-block-custom {
|
|
height: calc(100dvh - 70px);
|
|
overflow: hidden auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.scenario-card {
|
|
background-color: #222;
|
|
border: 1px solid #222;
|
|
border-radius: 10px;
|
|
margin-bottom: 24px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scenario-heading {
|
|
padding: 20px 20px 12px;
|
|
}
|
|
|
|
.scenario-kicker {
|
|
color: #777;
|
|
font-size: 12px;
|
|
letter-spacing: 0.12em;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.scenario-title {
|
|
color: #eee;
|
|
font-size: 28px;
|
|
line-height: 1.2;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.scenario-image-frame {
|
|
aspect-ratio: 1;
|
|
background-color: #111;
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.scenario-image {
|
|
display: block;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
width: 100%;
|
|
}
|
|
|
|
.scenario-details {
|
|
padding: 16px 20px 20px;
|
|
}
|
|
|
|
.scenario-description {
|
|
color: #aaa;
|
|
line-height: 1.6;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.scenario-author {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.status-block {
|
|
height: auto;
|
|
line-height: 1.5;
|
|
max-width: 100%;
|
|
min-height: var(--n-height);
|
|
overflow-wrap: anywhere;
|
|
white-space: normal;
|
|
}
|
|
|
|
@media (width >=1024px) {
|
|
.scenario-image-frame {
|
|
margin: 0 40px;
|
|
}
|
|
|
|
.scenario-heading,
|
|
.scenario-details {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
}
|
|
}
|
|
</style>
|