86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<template>
|
|
<article v-if="article" class="dashboard-widget__news-single">
|
|
<a
|
|
v-if="article.link"
|
|
:href="article.link"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="dashboard-widget__news-title"
|
|
>
|
|
{{ article.title || '—' }}
|
|
</a>
|
|
<span v-else class="dashboard-widget__title-text">{{ article.title || '—' }}</span>
|
|
<span v-if="article.pubDate" class="dashboard-widget__date">{{ formatNewsDate(article.pubDate) }}</span>
|
|
<p v-if="article.description" class="dashboard-widget__desc">{{ article.description }}</p>
|
|
</article>
|
|
<span v-else>—</span>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'NewsWidget',
|
|
props: {
|
|
data: { type: Object, default: null }
|
|
},
|
|
computed: {
|
|
article() {
|
|
const d = this.data;
|
|
if (d && typeof d === 'object' && Array.isArray(d.results) && d.results.length > 0) {
|
|
return d.results[0];
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
methods: {
|
|
formatNewsDate(dateStr) {
|
|
if (!dateStr) return '';
|
|
const d = new Date(dateStr);
|
|
if (Number.isNaN(d.getTime())) return String(dateStr);
|
|
return d.toLocaleDateString('de-DE', {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-widget__news-single {
|
|
margin: 0;
|
|
}
|
|
|
|
.dashboard-widget__news-title {
|
|
font-weight: 600;
|
|
color: var(--color-primary-orange);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dashboard-widget__news-title:hover {
|
|
text-decoration: underline;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.dashboard-widget__title-text {
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.dashboard-widget__date {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.dashboard-widget__desc {
|
|
margin: 4px 0 0 0;
|
|
font-size: 0.85rem;
|
|
color: #555;
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|