vue实现公司发展历程水平时间轴特效,实现一个demo
时间: 2023-09-11 08:09:26 浏览: 87
好的,以下是一个简单的Vue实现公司发展历程水平时间轴的demo。
首先,我们需要准备一些数据。在本例中,我们将使用以下数据:
```javascript
[
{
year: 1998,
event: '公司成立',
description: '公司在1998年成立,开始从事软件开发业务。'
},
{
year: 2005,
event: '公司扩张',
description: '公司在2005年扩张业务,成为一家规模较大的软件公司。'
},
{
year: 2010,
event: '公司上市',
description: '公司在2010年成功上市,成为一家受到投资者青睐的公司。'
},
{
year: 2018,
event: '公司进军人工智能领域',
description: '公司在2018年开始进军人工智能领域,开发了一系列AI产品。'
}
]
```
接下来,我们需要编写Vue组件来展示这些数据。我们将使用v-for指令来循环遍历数据,并使用v-bind指令将数据绑定到模板中。以下是组件的代码:
```html
<template>
<div class="timeline">
<div class="timeline__item" v-for="(item, index) in items" :key="index">
<div class="timeline__item__date">{{ item.year }}</div>
<div class="timeline__item__event">{{ item.event }}</div>
<div class="timeline__item__description">{{ item.description }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
year: 1998,
event: '公司成立',
description: '公司在1998年成立,开始从事软件开发业务。'
},
{
year: 2005,
event: '公司扩张',
description: '公司在2005年扩张业务,成为一家规模较大的软件公司。'
},
{
year: 2010,
event: '公司上市',
description: '公司在2010年成功上市,成为一家受到投资者青睐的公司。'
},
{
year: 2018,
event: '公司进军人工智能领域',
description: '公司在2018年开始进军人工智能领域,开发了一系列AI产品。'
}
]
}
}
}
</script>
<style>
.timeline {
display: flex;
flex-direction: row;
overflow: hidden;
}
.timeline__item {
flex: 1;
padding: 20px;
position: relative;
}
.timeline__item__date {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.timeline__item__event {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.timeline__item__description {
font-size: 16px;
}
</style>
```
最后,我们需要编写一些CSS样式来确保时间轴的正确显示。以下是CSS样式的代码:
```css
.timeline {
display: flex;
flex-direction: row;
overflow: hidden;
}
.timeline__item {
flex: 1;
padding: 20px;
position: relative;
}
.timeline__item__date {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.timeline__item__event {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.timeline__item__description {
font-size: 16px;
}
.timeline__item:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #ccc;
z-index: -1;
}
.timeline__item:first-child:before {
display: none;
}
.timeline__item:nth-child(even) .timeline__item__date {
text-align: right;
}
.timeline__item:nth-child(even):before {
right: 0;
left: auto;
}
```
现在,我们已经完成了一个基本的Vue时间轴组件。您可以在Vue的实例中使用该组件,如下所示:
```html
<template>
<div>
<h1>公司发展历程</h1>
<Timeline />
</div>
</template>
<script>
import Timeline from './Timeline.vue'
export default {
components: {
Timeline
}
}
</script>
```
希望这个简单的demo对你有所帮助!