<template>
  <view class="tui-timeaxis-item">
    <slot name="content"></slot>
    <view class="tui-timeaxis-node" :style="{ backgroundColor: backgroundColor }">
      <slot name="node"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'tuiTimeaxisItem',
  props: {
    //节点背景色
    backgroundColor: {
      type: String,
      default: '#FFF',
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.tui-timeaxis-item {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20upx;
}

.tui-timeaxis-node {
  position: absolute;
  top: 0;
  left: -20px;
  transform-origin: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  font-size: 24upx;
}
</style>
