46 lines
1.8 KiB
Vue
46 lines
1.8 KiB
Vue
<script setup>
|
|
defineProps({
|
|
eyebrow: { type: String, required: true },
|
|
title: { type: String, required: true },
|
|
description: { type: String, required: true },
|
|
effectiveDate: { type: String, required: true },
|
|
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 class="legal-effective">
|
|
<span>Дата вступления в силу</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">
|
|
<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>
|
|
<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>
|
|
</section>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|