<template>
  <Card title="质安管理时间轴">
    <div class="timeline">
      <el-timeline>
        <el-timeline-item v-for="(item,index) in contentList" :key="index" :timestamp="item.time" placement="top">
          <div class="point"></div><span class="mintit"> 监督巡检 </span>
          <div class="contentBox">
            <p>
              <span>是否发现问题</span>
              <a  style="color:#55aeb7">{{item.question == 1 ? '是' : '否' }}</a>
            </p>
            <p>
              <span>巡检单位</span>
              <a style="color:#bc5935">{{item.utils}}</a>
            </p>
            <p>
              <span>监督员</span>
              <a>{{item.safe}}</a>
            </p>
            <p>
              <span>抽查类型</span>
              <a style="color:#c4c7cc">{{item.type}}</a>
            </p>
            <p>
              <span>检查部位</span>
              <a style="color:#c4c7cc">{{item.position}}</a>
            </p>
            <p>
              <span>是否下发整改</span>
              <a style="color:#c4c7cc">{{item.change}}</a>
            </p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </Card>
</template>

<script>
import Card from "../components/Card.vue";
export default {
  components: { Card },
  data() {
    return {
      contentList: [
        {
          time: "2022-06-14",
          question: 1,
          utils: "中国建筑第四工程局有限公司",
          safe: "张三、李四",
          type: "安全",
          position: "主体结构",
          change: "是"
        },
        {
          time: "2022-07-28",
          question: 1,
          utils: "中国建筑第四工程局有限公司",
          safe: "张三、李四",
          type: "安全",
          position: "主体结构",
          change: "是"
        },
        {
          time: "2022-08-11",
          question: 1,
          utils: "中国建筑第四工程局有限公司",
          safe: "张三、李四",
          type: "安全",
          position: "主体结构",
          change: "是"
        },
        {
          time: "2022-08-14",
          question: 1,
          utils: "中国建筑第四工程局有限公司",
          safe: "张三、李四",
          type: "安全",
          position: "主体结构",
          change: "是"
        },
        {
          time: "2022-08-14",
          question: 1,
          utils: "中国建筑第四工程局有限公司",
          safe: "张三、李四",
          type: "安全",
          position: "主体结构",
          change: "是"
        },
        {
          time: "2022-08-14",
          question: 1,
          utils: "中国建筑第四工程局有限公司",
          safe: "张三、李四",
          type: "安全",
          position: "主体结构",
          change: "是"
        },
        {
          time: "2022-08-14",
          question: 1,
          utils: "中国建筑第四工程局有限公司",
          safe: "张三、李四",
          type: "安全",
          position: "主体结构",
          change: "是"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.timeline {
  margin-top: 3%;
  height: 98%;
  width: 97%;
  overflow: auto;
  
  .point{
      width: 6px;
      height: 6px;
      margin-right: 5px;
      background-color: #e2e4e6;
      border-radius: 50%;
      display: inline-block;
    }
  .mintit{
    display: inline-block;
    margin-bottom: 10px;
    font-size: 16px;
    color: #c4c7cc;
  }
  .contentBox {
    // background-color: rosybrown;
    p{
      display: flex;
      justify-content: left;
      align-content: left;
      margin-top: 6px;
      span {
      width: 40%;
     }
    }  
  }
}
::v-deep .el-timeline-item__tail {
  position: absolute;
  left: 4px;
  height: 100%;
  border-left: 3px solid #274b5f;
}
::v-deep .el-timeline-item__content {
  color: #888e98;
}
::v-deep .el-timeline {
    margin: 3px;
}
::-webkit-scrollbar {
 width: 3px;
 color: #19394d;
}
</style>
