generated from VLADIMIR/template_frontend
up
This commit is contained in:
+314
-23
@@ -1,41 +1,332 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { NButton } from 'naive-ui'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
|
||||||
import HeaderMenu from '@/components/HeaderMenu.vue'
|
import HeaderMenu from '@/components/HeaderMenu.vue'
|
||||||
|
import MessagePaper from '@/components/MessagePaper.vue'
|
||||||
|
|
||||||
|
const howItWorks = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{ title: 'Выберите дело', text: 'Найдите в каталоге историю, которую хочется распутать.' },
|
||||||
|
{
|
||||||
|
title: 'Соберите компанию',
|
||||||
|
text: 'Договоритесь о встрече и подготовьте сайт и бумажные материалы выбранного дела.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Следуйте за уликами',
|
||||||
|
text: 'Изучайте материалы, замечайте детали и обсуждайте версии. Каждый может увидеть то, что упустили другие.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Найдите разгадку',
|
||||||
|
text: 'Сопоставьте факты и сформулируйте общее решение. Какая версия объясняет всё?',
|
||||||
|
},
|
||||||
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="center-block-custom content-block center-middle-block-custom height80">
|
|
||||||
<div>
|
|
||||||
<h1 class="font-text">Вечерний детектив</h1>
|
|
||||||
<h3 class="font-text">Дело №0</h3>
|
|
||||||
<p class="content-text">Поиграем?</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<HeaderMenu active="main" />
|
<HeaderMenu active="main" />
|
||||||
|
|
||||||
|
<main class="center-block-custom home-scroll">
|
||||||
|
<div class="width1200 home-content">
|
||||||
|
<section class="hero" aria-labelledby="home-title">
|
||||||
|
<div class="hero-copy">
|
||||||
|
<p class="eyebrow">Вечерний детектив · расследование своей компанией</p>
|
||||||
|
<h1 id="home-title">Соберите друзей.<br /><span>Раскройте дело.</span></h1>
|
||||||
|
<p class="hero-description">
|
||||||
|
Изучайте материалы на сайте и на бумаге, сопоставляйте улики и обсуждайте версии. Вместе
|
||||||
|
найдите разгадку детективной истории.
|
||||||
|
</p>
|
||||||
|
<div class="actions">
|
||||||
|
<RouterLink v-slot="{ href, navigate }" to="/catalog" custom>
|
||||||
|
<n-button tag="a" :href="href" type="primary" size="large" @click="navigate">
|
||||||
|
Выбрать дело
|
||||||
|
</n-button>
|
||||||
|
</RouterLink>
|
||||||
|
<n-button
|
||||||
|
size="large"
|
||||||
|
secondary
|
||||||
|
@click="howItWorks?.scrollIntoView({ block: 'start' })"
|
||||||
|
>
|
||||||
|
Как проходит игра
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
<p class="hero-note">Ваша компания. Одна история. Множество версий.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dossier">
|
||||||
|
<MessagePaper>
|
||||||
|
<div class="dossier-content">
|
||||||
|
<p class="dossier-label">Вечерний детектив / досье</p>
|
||||||
|
<h2 class="dossier-title">Материалы дела</h2>
|
||||||
|
<p class="dossier-intro">Истина складывается из деталей.</p>
|
||||||
|
<dl class="dossier-list">
|
||||||
|
<div>
|
||||||
|
<dt>01 / Улики</dt>
|
||||||
|
<dd>Изучите. Сопоставьте. Заметьте связь.</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>02 / Версии</dt>
|
||||||
|
<dd>Обсудите, что могло произойти.</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>03 / Ваше решение</dt>
|
||||||
|
<dd>Соберите факты в одну историю.</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
<p class="dossier-footer">Дело ждёт своих детективов.</p>
|
||||||
|
</div>
|
||||||
|
</MessagePaper>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section ref="howItWorks" class="how-it-works" aria-labelledby="how-title">
|
||||||
|
<div class="section-heading">
|
||||||
|
<p class="eyebrow">От первой улики до разгадки</p>
|
||||||
|
<h2 id="how-title">Как проходит игра</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Сайт и бумажные материалы — части одного дела. А главное в расследовании — вы и ваши
|
||||||
|
обсуждения.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ol class="steps">
|
||||||
|
<li v-for="(step, index) in steps" :key="step.title" class="step">
|
||||||
|
<span class="step-number" aria-hidden="true">0{{ index + 1 }}</span>
|
||||||
|
<h3>{{ step.title }}</h3>
|
||||||
|
<p>{{ step.text }}</p>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="closing" aria-labelledby="closing-title">
|
||||||
|
<p class="eyebrow">Планы на вечер найдены</p>
|
||||||
|
<h2 id="closing-title">Один вечер.<br />Общее расследование.</h2>
|
||||||
|
<p>Соберите тех, с кем хочется спорить о версиях и радоваться найденной разгадке.</p>
|
||||||
|
<RouterLink v-slot="{ href, navigate }" to="/catalog" custom>
|
||||||
|
<n-button tag="a" :href="href" type="primary" size="large" @click="navigate">
|
||||||
|
Выбрать дело
|
||||||
|
</n-button>
|
||||||
|
</RouterLink>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.font-text {
|
.home-scroll {
|
||||||
font-family: 'font_old_typer', serif;
|
color: var(--vt-c-text-dark-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-text {
|
.home-content {
|
||||||
float: right;
|
max-width: 100%;
|
||||||
position: relative;
|
padding: 36px 24px 48px;
|
||||||
right: 0;
|
|
||||||
top: 100px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width >=1024px) {
|
.hero {
|
||||||
.font-text {
|
align-items: center;
|
||||||
left: -50px;
|
display: grid;
|
||||||
position: relative;
|
gap: 40px;
|
||||||
|
padding: 16px 0 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
color: var(--vt-c-text-dark-2);
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(36px, 5vw, 64px);
|
||||||
|
font-weight: 650;
|
||||||
|
letter-spacing: -0.045em;
|
||||||
|
line-height: 1.12;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 span {
|
||||||
|
color: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
color: var(--vt-c-text-dark-2);
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-top: 24px;
|
||||||
|
max-width: 510px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-content .n-button:focus-visible {
|
||||||
|
outline: 2px solid var(--vt-c-text-dark-1);
|
||||||
|
outline-offset: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-note {
|
||||||
|
color: var(--vt-c-text-dark-2);
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 420px;
|
||||||
|
padding: 8px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-content {
|
||||||
|
padding: 12px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-label {
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-title {
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-intro {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-list {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-list div {
|
||||||
|
border-top: 1px solid var(--vt-c-divider-light-1);
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-list dt {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-list dd {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-footer {
|
||||||
|
border-top: 1px solid var(--vt-c-divider-light-1);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.how-it-works {
|
||||||
|
border-top: 1px solid var(--vt-c-divider-dark-1);
|
||||||
|
padding: 48px 0;
|
||||||
|
scroll-margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: clamp(28px, 3.5vw, 40px);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-description {
|
||||||
|
color: var(--vt-c-text-dark-2);
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps {
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
list-style: none;
|
||||||
|
margin-top: 32px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
background: var(--vt-c-black-soft);
|
||||||
|
border: 1px solid var(--vt-c-divider-dark-2);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
color: var(--vt-c-text-dark-2);
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step h3 {
|
||||||
|
font-size: 19px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step p {
|
||||||
|
color: var(--vt-c-text-dark-2);
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closing {
|
||||||
|
border-top: 1px solid var(--vt-c-divider-dark-1);
|
||||||
|
padding: 48px 0 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closing > p:not(.eyebrow) {
|
||||||
|
color: var(--vt-c-text-dark-2);
|
||||||
|
margin: 20px auto 24px;
|
||||||
|
max-width: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width >= 1024px) {
|
||||||
|
.home-content {
|
||||||
|
padding: 64px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-text {
|
.hero {
|
||||||
position: relative;
|
gap: 56px;
|
||||||
right: -50px;
|
grid-template-columns: 1.2fr 1fr;
|
||||||
top: 100px;
|
min-height: 590px;
|
||||||
|
padding: 0 0 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dossier-content {
|
||||||
|
padding: 20px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.how-it-works {
|
||||||
|
padding: 64px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps {
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.closing {
|
||||||
|
padding: 64px 0 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user