element ui时间线左右布局
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--引入 element-ui 的样式,-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue, 后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>时间线左右布局</title>
<style>
#app {
position: absolute;
top: 50px;
left:250px;
width: 25%;
}
.companydel {
color: #909399;
position: absolute;
left: -200px;
top: 1px;
font-size: 12px;
}
.fl {
float: left;
}
.fr {
float: right;
}
</style>
</head>
<body>
<!-- 下载地址 vue.js: https://cdn.jsdelivr.net/npm/vue/dist/vue.js
element.js: https://unpkg.com/element-ui@2.4.11/lib/index.js
element.css: https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css
我是粘贴复制到本地的,注意element-ui使用的是2.4.11版本的。 -->
<div id="app">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities1"
:key="index"
:icon="activity.icon"
:type="activity.type"
:size="activity.size"
>
<!-- 时间线左侧 -->
<div class="companydel">
{{activity.timestamp}}
<p style="font-size: 14px;">{{activity.company}}</p>
<p style="font-size: 14px;">{{activity. comtype}}</p>
</div>
<!-- 时间线右侧 -->
<div>
<div class="el-row">
<div class="fl"> <strong>{{activity.title}}</strong></div>
<div class="fr"> <el-link type="primary">查看修改留痕</el-link></div>
</div>
<p style="color: #909399;">{{activity.content1}}</p>
<p style="color: #909399; margin-bottom: 40px;">{{activity.content2}}</p>
</div>
</el-timeline-item>
</el-timeline>
</div>
</body>
</html>
<script>
new Vue({
el: '#app'
data: function() {
return {
drawer: false,
activities1: [{
title: '装箱单',
content1:'收货人:我爱我的家弟弟吧爸爸妈妈 我爱我的家弟弟爸爸妈妈',
content2:'翻译:',
company:'我爱我的家弟弟吧爸爸妈妈',
comtype:'核心企业',
timestamp: '2018-04-12 20:46',
size: 'large',
type: 'primary',
icon: 'el-icon-more'
},
{
title: '分提运单',
content1:'收货人:我爱我的家弟弟吧爸爸妈妈 我爱我的家弟弟爸爸妈妈',
content2:'翻译:',
company:'我爱我的家弟弟吧爸爸妈妈',
comtype:'核心企业',
timestamp: '2018-04-12 20:46',
size: 'large',
type: 'primary',
icon: 'el-icon-more'
},
{
title: '发票',
content1:'收货人:我爱我的家弟弟吧爸爸妈妈 我爱我的家弟弟爸爸妈妈',
content2:'翻译:',
company:'我爱我的家弟弟吧爸爸妈妈',
comtype:'核心企业',
timestamp: '2018-04-12 20:46',
size: 'large',
type: 'primary',
icon: 'el-icon-more'
}
, {
title: '进口采购订单',
content1:'收货人:我爱我的家弟弟吧爸爸妈妈 我爱我的家弟弟爸爸妈妈',
content2:'翻译:',
company:'我爱我的家弟弟吧爸爸妈妈',
comtype:'核心企业',
timestamp: '2018-04-12 20:46',
size: 'large',
type: 'primary',
icon: 'el-icon-more'
}]
}
}
})
</script>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)