37 lines
2.2 KiB
Vue
37 lines
2.2 KiB
Vue
<script setup>
|
|
defineProps({ posts: { type: Array, default: () => [] } });
|
|
</script>
|
|
|
|
<template>
|
|
<section id="news" data-screen-label="04 News">
|
|
<div class="wrap">
|
|
<div class="section-head reveal">
|
|
<span class="eyebrow">Хроники сервера</span>
|
|
<div style="height: 20px"></div>
|
|
<h2 class="h-display" style="font-size: clamp(36px, 5vw, 60px)">Новости и патчноуты</h2>
|
|
<div class="divider-ornament">✦</div>
|
|
</div>
|
|
|
|
<div v-if="posts.length" class="news-grid">
|
|
<article v-for="post in posts" :key="post.id || post.title" :class="['news-card', 'reveal', { featured: post.featured }]">
|
|
<div class="news-meta">
|
|
<span :class="['news-tag', post.tagType || 'patch']">{{ post.tag }}</span>
|
|
<span v-if="post.date">{{ post.date }}</span>
|
|
</div>
|
|
<div v-if="post.featured" class="news-placeholder" :style="post.image_url ? { backgroundImage: `url(${post.image_url})`, backgroundSize: 'cover', backgroundPosition: 'center', color: 'transparent' } : {}">
|
|
{{ post.image_url ? post.title : '[ placeholder ] · 1600x800' }}
|
|
</div>
|
|
<h3 class="news-title">{{ post.title }}</h3>
|
|
<p class="news-excerpt">{{ post.excerpt }}</p>
|
|
</article>
|
|
</div>
|
|
|
|
<div v-else class="news-empty reveal" style="text-align: center; padding: 80px 24px; border: 1px dashed var(--panel-border-strong); border-radius: var(--radius); background: rgba(127, 184, 212, 0.02)">
|
|
<div style="font-size: 28px; color: var(--moon); margin-bottom: 14px">✦</div>
|
|
<h3 class="h-display" style="font-size: 24px; margin-bottom: 10px">Пока новостей нет</h3>
|
|
<p class="lead" style="font-style: italic; max-width: 520px; margin: 0 auto">Хроники сервера еще не открыли первую страницу. Загляни позже - здесь появятся патчноуты, события и девблоги.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|