<template>
    <div class="ht-base-timeline-demo">
        <ht-base-row style="margin: 20px 0;">
            <Timeline class="ht-timeline-horizontal">
                <TimelineItem>
                    <Icon type="md-radio-button-on" slot="dot"/>
                    <p class="time">发布1.0版本</p>
                    <p class="content">自定义事件描述文字</p>
                    <p class="ht-timeline-details">2017年10月25日</p>
                </TimelineItem>
                <TimelineItem>
                    <Icon type="md-radio-button-on" slot="dot"/>
                    <p class="time">发布2.0版本</p>
                    <p class="content">自定义事件描述文字</p>
                    <p class="ht-timeline-details">2017年12月08日</p>
                </TimelineItem>
                <TimelineItem>
                    <Icon type="md-radio-button-on" slot="dot"/>
                    <p class="time">严重故障</p>
                    <p class="content">自定义事件描述文字</p>
                    <p class="ht-timeline-details">2018年01月27日</p>
                </TimelineItem>
                <TimelineItem>
                    <Icon type="md-radio-button-on" slot="dot"/>
                    <p class="time">发布3.0版本</p>
                    <p class="content">自定义事件描述文字</p>
                    <p class="ht-timeline-details">2018年02月19日</p>
                </TimelineItem>
            </Timeline>
        </ht-base-row>
        <ht-base-row style="margin: 20px 0;">
            <Timeline class="ht-timeline-horizontal">
                <TimelineItem color="green">
                    <Icon type="ios-checkmark-circle" slot="dot"></Icon>
                    <p class="ht-timeline-title">2017年10月25日</p>
                    <p class="time">发布1.0版本</p>
                    <p class="content">自定义事件描述文字</p>
                </TimelineItem>
                <TimelineItem color="green">
                    <Icon type="ios-checkmark-circle" slot="dot"/>
                    <p class="ht-timeline-title">2017年12月08日</p>
                    <p class="time">发布2.0版本</p>
                    <p class="content">自定义事件描述文字</p>
                </TimelineItem>
                <TimelineItem color="red">
                    <Icon type="ios-close-circle" slot="dot"/>
                    <p class="ht-timeline-title">2018年01月27日</p>
                    <p class="time">严重故障</p>
                    <p class="content">自定义事件描述文字</p>
                </TimelineItem>
                <TimelineItem>
                    <Icon type="ios-information-circle" slot="dot"/>
                    <p class="ht-timeline-title">2018年02月19日</p>
                    <p class="time">发布3.0版本</p>
                    <p class="content">自定义事件描述文字</p>
                </TimelineItem>
            </Timeline>
        </ht-base-row>

    </div>
</template>

<script>
  export default {
    name: 'HtBaseTimelineDemo',
  }
</script>
<style>
    .ht-base-timeline-demo {

    }
</style>

