kenryuS/sera-new-hp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

10/3/24

Browse Source
This commit is contained in:
Kenryu Shibata
2024-10-03 16:22:20 +09:00
parent e512da9a48
commit d865938430
62 changed files with 931 additions and 905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/NewsCard.vue
View File

@@ -8,11 +8,18 @@ const datePosted = new Date(
property.newsEntry.date as number
).toLocaleDateString("ja-JP", { dateStyle: "medium" });
const coverImagePath = ref<string>(property.newsEntry.coverImagePath ? property.newsEntry.coverImagePath : "/sera-logo-text.svg");
const coverImagePath = ref<string>(
property.newsEntry.coverImagePath
? property.newsEntry.coverImagePath
: "/sera-logo-text.svg"
);
</script>
<template>
<div class="news-card" :style="{ backgroundImage: `url(${coverImagePath})`}">
<div
class="news-card"
:style="{ backgroundImage: `url(${coverImagePath})` }"
>
<NuxtLink
class="card-content"
:to="property.newsEntry.linkPath"
@@ -23,19 +30,25 @@ const coverImagePath = ref<string>(property.newsEntry.coverImagePath ? property.
>
<p class="news-type article">記事</p>
<p class="new" v-if="property.isNew">NEW!</p>
<p class="content">
<div class="content">
<article
v-html="marked.parse(property.newsEntry.cardContent as string)"
v-html="
marked.parse(property.newsEntry.cardContent as string)
"
></article>
</p>
</div>
<small>{{ datePosted }}</small>
</NuxtLink>
<div class="card-content" v-else>
<p class="news-type tweet">お知らせ</p>
<p class="new" v-if="property.isNew">NEW!</p>
<p class="content">
<article v-html="marked.parse(property.newsEntry.cardContent as string)"></article>
</p>
<div class="content">
<article
v-html="
marked.parse(property.newsEntry.cardContent as string)
"
></article>
</div>
<small>{{ datePosted }}</small>
</div>
</div>
@@ -65,7 +78,7 @@ const coverImagePath = ref<string>(property.newsEntry.coverImagePath ? property.
right: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.15);
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(5px) brightness(55%);
color: var(--starlight);
text-decoration: none;
@@ -108,7 +121,7 @@ const coverImagePath = ref<string>(property.newsEntry.coverImagePath ? property.
.card-content .tweet {
background-color: var(--venus2);
color: var(--venus1);;
color: var(--venus1);
}
.card-content .article {