26 lines
799 B
Vue
26 lines
799 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>
|
|
export default {
|
|
name: 'AaTimelineList',
|
|
props: {
|
|
items: { type: Array, default: function () { return []; } },
|
|
direction: { type: String, default: 'vertical' }
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style src="./TimelineList.css"></style>
|