element ui时间线左右布局

最新推荐文章于 2024-07-25 11:52:08 发布

xumengxia—xu

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量6.5k

点赞数 8

文章标签： vue html elementui

本文链接：https://blog.csdn.net/qq_56514785/article/details/118405333

版权

elementui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图：

代码：

<!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>

xumengxia—xu

关注

8
点赞
踩
34

收藏

觉得还不错? 一键收藏
2
评论
element ui时间线左右布局

效果图：代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="stylesheet"...
复制链接

扫一扫

专栏目录