63 lines
2.9 KiB
Vue
63 lines
2.9 KiB
Vue
<script setup>
|
|
defineProps({
|
|
eyebrow: { type: String, required: true },
|
|
title: { type: String, required: true },
|
|
description: { type: String, required: true },
|
|
effectiveDate: { type: String, default: '' },
|
|
effectiveDateLabel: { type: String, default: 'Дата вступления в силу' },
|
|
intro: { type: Array, default: () => [] },
|
|
sections: { type: Array, required: true },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="legal-page wrap">
|
|
<header class="legal-hero">
|
|
<span class="eyebrow">{{ eyebrow }}</span>
|
|
<h1 class="h-display">{{ title }}</h1>
|
|
<p class="lead">{{ description }}</p>
|
|
<div v-if="effectiveDate" class="legal-effective">
|
|
<span>{{ effectiveDateLabel }}</span>
|
|
<strong>{{ effectiveDate }}</strong>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="legal-layout">
|
|
<aside class="legal-toc">
|
|
<span>Содержание</span>
|
|
<a v-for="(section, index) in sections" :key="section.id" :href="`#${section.id}`">
|
|
<small>{{ String(index + 1).padStart(2, '0') }}</small>
|
|
{{ section.title }}
|
|
</a>
|
|
</aside>
|
|
|
|
<article class="portal-card legal-document corners">
|
|
<div v-if="intro.length" class="legal-intro">
|
|
<p v-for="paragraph in intro" :key="paragraph">{{ paragraph }}</p>
|
|
</div>
|
|
<section v-for="(section, index) in sections" :id="section.id" :key="section.id">
|
|
<span class="legal-section-number">{{ String(index + 1).padStart(2, '0') }}</span>
|
|
<h2 class="h-serif">{{ section.title }}</h2>
|
|
<template v-if="section.blocks">
|
|
<template v-for="(block, blockIndex) in section.blocks" :key="blockIndex">
|
|
<p v-if="block.type === 'paragraph'">{{ block.text }}</p>
|
|
<h3 v-else-if="block.type === 'subheading'" class="legal-subheading">{{ block.text }}</h3>
|
|
<ul v-else-if="block.type === 'list'">
|
|
<li v-for="item in block.items" :key="item">{{ item }}</li>
|
|
</ul>
|
|
<p v-else-if="block.type === 'note'" class="legal-note">{{ block.text }}</p>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
|
|
<ul v-if="section.items">
|
|
<li v-for="item in section.items" :key="item">{{ item }}</li>
|
|
</ul>
|
|
<p v-if="section.note" class="legal-note">{{ section.note }}</p>
|
|
</template>
|
|
</section>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|