sulibao-mini/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue

<template>
  <view class="tn-time-line-item-class tn-time-line-item">
    <view>
      <slot name="content"></slot>
    </view>
    <view class="tn-time-line-item__node" :style="[nodeStyle]">
      <slot name="node">
        <view class="tn-time-line-item__node--dot"></view>
      </slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'tn-time-line-item',
    props: {
      // 节点左边图标的绝对定位top值
      top: {
        type: [String, Number],
        default: ''
      }
    },
    computed: {
      nodeStyle() {
        let style = {}
        if (this.top !== '') style.top = this.top + 'rpx'
        
        return style
      }
    },
    data() {
      return {
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .tn-time-line-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    margin-bottom: 32rpx;
    
    &__node {
      display: flex;
      flex-direction: row;
      position: absolute;
      top: 12rpx;
      left: -40rpx;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      transform-origin: 0;
      transform: translateX(-50%);
      z-index: 1;
      background-color: transparent;
      
      &--dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 100rpx;
        background-color: #AAAAAA;
      }
    }
  }
</style>