seecoder-devcloud-frontend/src/views/Project/Commit.vue

<template>
  <div class="container">
    <el-row class="row-item title">
      <h2>commit记录</h2>
    </el-row>
    <div>
      <ElTimeline>
        <ElTimelineItem
          v-for="(git, index) in gits"
          :key="index"
          :timestamp="git.timestamp"
          placement="top">
          <ElCard>
            <h3 class="id">#{{git.id}}</h3>
            <div style="margin-top: 10px; font-size: 16px">{{git.message}}</div>
            <div style="margin-top: 10px">
              <el-row>
                <el-col :span="12">
                  处理人：<span style="font-weight: bold">{{git.gitlabUsername}}</span>
                </el-col>
                <el-col :span="12">
                  类型：
                  <span v-if="git.relatedType === 'BUG_ID'" class="node bug">缺陷</span>
                  <span v-else class="node requirement">需求</span></el-col>
              </el-row>
            </div>
          </ElCard>
        </ElTimelineItem>
      </ElTimeline>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Commit.vue',
  data() {
    return {
      gits: [
        {
          id: '010f2a0ccf522fe6c1408bffdd494782880c1ec9',
          message: 'fix: working on #942#, 处理bug942',
          timestamp: '2021-07-10 15:09:36',
          gitlabUsername: 'xiaofei',
          relatedType: 'BUG_ID',
          relatedId: 942,
        },
        {
          id: '030a88a98695d83bdd91937783c08323451d5046',
          message: 'feat: complete #878# ',
          timestamp: '2021-07-09 23:18:20',
          gitlabUsername: '17313',
          relatedType: 'TREE_ID',
          relatedId: 878,
        },
        {
          id: '07f536fc5d660d8085d360961ab4fd337df9b8f1',
          message: 'fix: fixing on #17#',
          timestamp: '2021-07-08 13:45:22',
          gitlabUsername: 'suyiiis',
          relatedType: 'BUG_ID',
          relatedId: 17,
        },
        {
          id: '0c75b8b675291c1f90a56e912befc38341ec3171',
          message: 'feat: complete #273#',
          timestamp: '2021-07-08 10:11:23',
          gitlabUsername: 'YGcatwhite',
          relatedType: 'TREE_ID',
          relatedId: 273,
        },
      ],
    };
  },
};
</script>

<style scoped>
.container {
  margin: 50px 100px;
  width: 30%;
}
.row-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}
.id {
  width: fit-content;
  height: 20px;
  background-color: #2185d0;
  color: #fff;
  border: 0 solid transparent;
  border-radius: .28571429rem;
}
.node {
  width: 15px;
  color: #FFFFFF;
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
}
.bug {
  background-color: chocolate;
}
.requirement {
  background-color: #42b983;
}
</style>