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

<template>
  <div class="container">
    <div class="row-item">
      <div>
        <el-select v-model="branch" clearable placeholder="请选择分支">
          <el-option
            v-for="branch in branches"
            :key="branch.value"
            :label="branch.label"
            :value="branch.value"
          ></el-option>
        </el-select>
      </div>
      <div class="title" v-if="branch !== ''">
        <h4>当前所选分支：</h4>
        <h3>{{branch}}</h3>
      </div>
    </div>
    <div class="body">
      <el-row>
        <el-col :span="12">
          <el-timeline>
            <el-timeline-item
              v-for="(git, index) in gits"
              :key="index"
              :timestamp="git.timestamp"
            >
            <div class="card">
              <div class="user left-5 top-5">{{git.user}}</div>
              <div class="id left-5 top-5">{{git.id}}</div>
              <div class="content left-5 top-5">{{git.content}}</div>
            </div>
            </el-timeline-item>
          </el-timeline>
        </el-col>
        <el-col :span="11" :offset="1">具体的git记录</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Commit1.vue',
  data() {
    return {
      branches: [
        {
          value: 'master',
          label: 'master',
        },
        {
          value: 'dev',
          label: 'dev',
        },
        {
          value: 'zxr',
          label: 'zxr',
        },
        {
          value: 'wph',
          label: 'wph',
        },
      ],
      branch: '',
      gits: [
        {
          user: 'ZhaoXR',
          timestamp: '2018-04-12 20:46',
          content: '!1 mytest',
          id: '95d6c7eeef26229959ac9a8b839fa22d3adb09e2',
        },
        {
          user: 'ZhaoXR',
          timestamp: '2018-04-12 20:46',
          content: '!1 mytest',
          id: '95d6c7eeef26229959ac9a8b839fa22d3adb09e2',
        },
        {
          user: 'ZhaoXR',
          timestamp: '2018-04-12 20:46',
          content: '!1 mytest',
          id: '95d6c7eeef26229959ac9a8b839fa22d3adb09e2',
        },
        {
          user: 'ZhaoXR',
          timestamp: '2018-04-12 20:46',
          content: '!1 mytest',
          id: '95d6c7eeef26229959ac9a8b839fa22d3adb09e2',
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  margin: 50px 100px;
  width: 70%;
}
.row-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.title {
  display: flex;
  float: left;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
}
.body {
  margin-top: 30px;
}
::v-deep .el-timeline {
  padding-left: 130px;
  .el-timeline-item {
     .el-timeline-item__tail {
      border-left: 2px solid #1296db;
    }
    .el-timeline-item__node {
      background-color: #1296db;
    }
  }
  .el-timeline-item__timestamp.is-bottom {
    position: absolute;
    left: -117px;
    top: -5px;
    color: #333333;
  }
}
.card {
  border: 1px solid black;
  border-radius: 4px;

}
.left-5 {
  margin-left: 5px;
}
.top-5 {
  margin-top: 5px;
}
.user {
  font-size: 16px;
  font-weight: bold;
}
.id {
  color: #666666;
  font: 14px Monaco, monospace;
}
.content {
  color: black;
  font: 14px Monaco, monospace;
}
</style>