75 lines
1.3 KiB
Vue
75 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
items: Array<{
|
|
date: string
|
|
title: string
|
|
summary: string
|
|
highlight?: boolean
|
|
}>
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<section class="timeline">
|
|
<div v-for="item in items" :key="`${item.date}-${item.title}`" :class="['timeline-item', { highlight: item.highlight }]">
|
|
<div class="timeline-marker" />
|
|
<div class="timeline-content">
|
|
<p class="timeline-date">{{ item.date }}</p>
|
|
<h3>{{ item.title }}</h3>
|
|
<p>{{ item.summary }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.timeline {
|
|
position: relative;
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 14px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: #d7e4f2;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 28px minmax(0, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.timeline-marker {
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-top: 10px;
|
|
border-radius: 50%;
|
|
background: #4f6f93;
|
|
z-index: 1;
|
|
}
|
|
|
|
.timeline-item.highlight .timeline-marker {
|
|
background: #1481ff;
|
|
}
|
|
|
|
.timeline-content {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
padding: 18px 20px;
|
|
box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
|
|
}
|
|
|
|
.timeline-date {
|
|
margin: 0 0 8px;
|
|
color: #4f6f93;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|