vue时间轴组件横向,vue 时间轴
这篇文章主要为大家详细介绍了某视频剪辑软件实现横向时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现横向时间轴的具体代码，供大家参考，具体内容如下
1、效果图
2、代码实现
超文本标记语言
模板
div class=时间轴
div v-for=列表中的项目：key=item.index
div class=box
div class=item
div class= left { { item。警告名称} }/div
div class= center"{ item。条件} }/div
/div
div class=circular/div
div class=item2
div class= bottom { { item。标准} }/div
/div
/div
/div
/div
/模板
脚本
导出默认值{
data(){
返回{
//数据
列表：[
{
警告名称： 一级预警，
条件："60",
标准：18,
中位数：5,
},
{
警告名称： 二级预警，
条件："30分钟",
标准：15,
中位数：5,
},
{
警告名称： 三级预警，
条件："15",
标准：22,
中位数：5,
},
]
}
}
}
/脚本
钢性铸铁样式
样式范围语言=少。时间轴{
宽度：800像素
高度：200像素
}。方框{
浮动：左；
宽度：180像素
}。圆形{
边框：2px纯色# 67c23a
宽度：10px
高度：10px
边框半径：10px
背景：白色；
边距：自动；
边距-底部：-4px；
位置：相对；
top:-8px；
左：85像素
}。项目{
边框-底部：1px固体# 409eff
位置：相对；左侧{
位置：绝对；
左：55像素
顶：-25px；
}。居中{
位置：绝对；
左：165像素
top:-26px；
}
}。项目2 {
位置：相对；底部{
位置：绝对；
左：75像素
top:0px；
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。