vue写一个水平时间轴
时间: 2024-05-04 08:22:13 浏览: 8
好的,下面是一个简单的实现:
```html
<template>
<div class="timeline">
<div class="timeline__item" v-for="(item, index) in items" :key="index">
<div class="timeline__date">{{ item.date }}</div>
<div class="timeline__content">
<h3 class="timeline__title">{{ item.title }}</h3>
<p class="timeline__description">{{ item.description }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
date: '2021年3月',
title: '项目启动',
description: '开始规划项目需求和技术架构'
},
{
date: '2021年4月',
title: '前端开发',
description: '完成前端页面的设计和开发'
},
{
date: '2021年5月',
title: '后端开发',
description: '完成后端接口的设计和开发'
},
{
date: '2021年6月',
title: '测试上线',
description: '进行全面的测试并上线发布'
}
]
}
}
}
</script>
<style>
.timeline__item {
display: flex;
margin-bottom: 30px;
}
.timeline__date {
font-size: 24px;
font-weight: bold;
width: 120px;
text-align: center;
}
.timeline__content {
margin-left: 50px;
}
.timeline__title {
font-size: 20px;
margin-bottom: 10px;
}
.timeline__description {
font-size: 16px;
}
</style>
```
这个时间轴组件由一个外层的 `timeline` 容器和多个 `timeline__item` 组成,每个 `timeline__item` 包含一个日期和内容。你可以通过修改 `items` 数组中的数据来自定义内容。注意,这个组件还需要进行样式的调整以适应你的项目需求。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)