137 lines
2.7 KiB
Vue
137 lines
2.7 KiB
Vue
<template>
|
|
<article class="notification-item" :class="{ expanded: item.isExpanded, unread: item.isUnread }">
|
|
<button type="button" class="notification-trigger" @click="handleToggle">
|
|
<span class="status-dot" :class="{ visible: item.isUnread }" />
|
|
|
|
<div class="notification-main">
|
|
<h3 class="notification-title">{{ item.title }}</h3>
|
|
<p class="notification-date">{{ item.date }}</p>
|
|
</div>
|
|
|
|
<span class="notification-arrow" :class="arrowClasses" />
|
|
</button>
|
|
|
|
<div v-if="item.isExpanded" class="notification-content">
|
|
{{ item.content }}
|
|
</div>
|
|
</article>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { NotificationRecord } from '../types'
|
|
|
|
const props = defineProps<{
|
|
item: NotificationRecord
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
toggle: [id: NotificationRecord['id']]
|
|
}>()
|
|
|
|
const arrowClasses = computed(() => ({
|
|
expanded: props.item.isExpanded
|
|
}))
|
|
|
|
const handleToggle = () => {
|
|
emit('toggle', props.item.id)
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.notification-item {
|
|
border-bottom: 0.05rem solid #ded8d2;
|
|
|
|
&.expanded {
|
|
.notification-title {
|
|
color: #585858;
|
|
font-family: 'KaiseiOpti-Medium';
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification-trigger {
|
|
width: 100%;
|
|
padding: 2rem 0;
|
|
display: grid;
|
|
grid-template-columns: 0.8rem minmax(0, 1fr) 2.4rem;
|
|
align-items: center;
|
|
gap: 2.4rem;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 0.8rem;
|
|
height: 0.8rem;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
transition: background-color 0.2s ease;
|
|
|
|
&.visible {
|
|
background: #232323;
|
|
}
|
|
}
|
|
|
|
.notification-main {
|
|
min-width: 0;
|
|
}
|
|
|
|
.notification-title {
|
|
margin: 0;
|
|
color: #232323;
|
|
font-size: 1.6rem;
|
|
line-height: 1.4;
|
|
font-family: 'KaiseiOpti-Bold';
|
|
}
|
|
|
|
.notification-date {
|
|
margin: 0.8rem 0 0;
|
|
color: #9f9f9f;
|
|
font-size: 1.2rem;
|
|
line-height: 1.4;
|
|
font-family: 'KaiseiOpti-Regular';
|
|
}
|
|
|
|
.notification-arrow {
|
|
width: 0.9rem;
|
|
height: 0.9rem;
|
|
justify-self: end;
|
|
border-right: 0.1rem solid #8f8f8f;
|
|
border-bottom: 0.1rem solid #8f8f8f;
|
|
transform: rotate(-45deg);
|
|
transition: transform 0.2s ease, border-color 0.2s ease;
|
|
|
|
&.expanded {
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
.notification-content {
|
|
padding: 0 5.6rem 2.4rem 3.2rem;
|
|
color: #585858;
|
|
font-size: 1.4rem;
|
|
line-height: 2;
|
|
font-family: 'KaiseiOpti-Regular';
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.notification-trigger {
|
|
gap: 1.6rem;
|
|
padding: 1.8rem 0;
|
|
grid-template-columns: 0.8rem minmax(0, 1fr) 1.8rem;
|
|
}
|
|
|
|
.notification-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.notification-content {
|
|
padding: 0 3rem 2rem 2.4rem;
|
|
font-size: 1.3rem;
|
|
line-height: 1.8;
|
|
}
|
|
}
|
|
</style>
|