23 lines
740 B
Vue
23 lines
740 B
Vue
<template>
|
|
<div class="aa-timeline" :class="{ 'is-horizontal': direction === 'horizontal' }">
|
|
<div class="aa-timeline-item" v-for="(it, i) in items" :key="i" :class="'is-' + it.status">
|
|
<span class="aa-timeline-node"></span>
|
|
<span class="aa-timeline-line"></span>
|
|
<div class="aa-timeline-content">
|
|
<div class="aa-timeline-time">{{ it.time }}</div>
|
|
<div class="aa-timeline-title">{{ it.title }}</div>
|
|
<div class="aa-timeline-desc" v-if="it.desc">{{ it.desc }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
items: { type: Array, default: () => [] },
|
|
direction: { type: String, default: 'vertical' }
|
|
});
|
|
</script>
|
|
|
|
<style src="./TimelineList.css"></style>
|