<template>
  <div class="time-line">
    <div class="date">
      <span>{{ props.date }}</span>
    </div>
    <div class="content-wrap">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  date: {
    type: String,
    default: '7:00',
  },
});
</script>

<style lang="scss" scoped>
.time-line {
  display: flex;
  .date {
    flex: 0 0 120rpx;
    text-align: center;
    margin-right: 20rpx;
    color: #767676;
    position: relative;
    &::after {
      content: '';
      display: block;
      height: 100%;
      width: 0;
      border-right: 2rpx dashed #767676;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-2rpx);
    }
    span {
      z-index: 1;
      position: relative;
      display: inline-block;
      padding: 10rpx;
      background-color: #fff;
    }
  }
  .content-wrap {
    flex: 1;
    padding: 10rpx 0 50rpx;
    display: flex;
    flex-direction: column;
    gap: 12rpx;
  }
}
</style>
