long
2021-12-08 0e0365cb3abd31edcf0c09c3fc215027983dfca8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
  <div class="long_timeline">
    <el-timeline>
      <el-timeline-item v-if="!list || !list.length" color="#999">{{ emptyText||'暂无日志记录' }}</el-timeline-item>
      <el-timeline-item
        v-for="(item, index) in list"
        :key="index"
        color="#00AFAA"
      >
        <div class="flex flex-sb">
          <div class="content-box">
            <div class="title">{{ item.content }}</div>
            <div v-if="item.remark" class="content">{{ item.remark }}</div>
          </div>
          <div class="right-box">
            <div class="time-tx">{{ item.time }}</div>
            <div v-if="item.author" class="author-tx">操作人:{{ item.author }}</div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
 
<script>
export default {
  name: 'LongTimeline',
  props: {
    // [{content:'xxx', time: 'xxx', author: 'xxx'}]
    list: {
      type: Array,
      default: null
    },
    // 空列表时显示
    emptyText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>
 
<style lang="scss" scoped>
.long_timeline{
    margin-top: 37px;
}
.content-box{
    font-size: 14px;
    line-height: 1.2;
    color: #666666;
    // line-height: 34px;
    width: 70%;
    .content{
      // width: 60%;
      margin-top: 4px;
      font-size: 12px;
      color: #ccc;
    }
}
.right-box{
    margin-left: 20px;
}
.time-tx{
    font-size: 14px;
    color: #000000;
    // line-height: 34px;
    text-align: right;
}
.author-tx{
    font-size: 14px;
    color: #000000;
    // line-height: 34px;
    text-align: right;
    margin-top: 8px;
}
</style>