<template>
  <div class="timeLineWrap">
    <div class="timeLineTitle">{{ timeLineData.time }}</div>
    <div class="timeLine">
      <div class="line">
        <div class="cycle"></div>
      </div>
      <div class="timeLineContent">
<!-- v-if="$slot.contentRow" -->
        <div class="timeLineContentItem" >
          <div class="contentRow" v-for="(ct, cIndex) in timeLineData.content" :key="cIndex">
            <span>{{ ct }}</span>
          </div>
        </div>
        <!-- <div class="timeLineContentItem" >
          <slot v-bind:row="timeLineData.content" name="contentRow"></slot>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 数据格式
 * {
 *  time:xxxx
 *  content:[]
 * } 
 */

export default {
  props: {
    timeLineData: Object,
  },
  mounted(){
    console.log(this.timeLineData);
  }
};
</script>
<style scoped>
.timeLineTitle {
  font-size: 18px;
  font-weight: Bold;
  font-family: PingFang-SC-Bold;
}
.timeLine {
  display: flex;
}

.line {
  width: 2px;
  margin: 0 36px;
  background: #1b68de;
  position: relative;
}
.line .cycle {
  position: absolute;
  left: -6px;
  width: 11px;
  top: 50%;
  transform: translate(0, -50%);
  height: 11px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #1b68de;
}

.timeLineContent {
  font-size: 16px;
  flex: 1;
  background: #f5f6f7;
  border-radius: 6px;
}
.timeLineContentItem {
  padding: 18px 42px 0px 42px;
  font-family: PingFang-SC-Bold;
  color: #4d4d4d;
  font-weight: 400;
}
.contentRow {
  padding: 0px 0 18px 0;
}
</style>
