usky-web-mobile/src/components/oa-timeLine-item/index.vue

<template>
  <view class="oa-timeLine-item">
    <view class="oa-timeLine-item-header">
      <view class="oa-timeLine-item-header-icon">
        <u-icon name="info-circle-fill" :color="iconColor" size="18"></u-icon>
      </view>
      <view class="oa-timeLine-item-header-cont">
        <view class="title">
          {{ titleValue }}
        </view>
        <!-- <view style="margin: auto"> </view> -->
        <view class="time">
          {{ timeValue }}
        </view>
      </view>
    </view>

    <view class="oa-timeLine-item-content">
      <view class="oa-timeLine-item-content-icon">
        <view class="icon"></view>
      </view>
      <view class="oa-timeLine-item-content-cont">
        <slot class="content"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { toRefs } from "vue";

const props = defineProps({
  titleValue: {
    type: String,
    default: "",
  },
  timeValue: {
    type: String,
    default: "",
  },
  iconColor: {
    type: String,
    default: "#149eff",
  },
});

const { titleValue, timeValue, iconColor } = toRefs(props);
</script>

<style lang="scss" scoped>
.oa-timeLine-item {
  .oa-timeLine-item-header {
    display: flex;
    height: 25px;
    line-height: 25px;

    .oa-timeLine-item-header-icon {
      margin: auto 0;
    }

    .oa-timeLine-item-header-cont {
      display: flex;
      width: calc(100% - 18px - 15px);
      margin-left: 15px;

      .title {
        font-size: 15px;
        color: #000000;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; // 默认不换行；
      }

      .time {
        font-size: 14px;
        color: #b5b5b5;
        margin-left: auto;
      }
    }
  }

  .oa-timeLine-item-content {
    display: flex;

    .oa-timeLine-item-content-icon {
      width: 18px;
      display: flex;

      .icon {
        width: 2px;
        background-color: #e4e7ed;
        margin: -5px auto;
      }
    }

    .oa-timeLine-item-content-cont {
      width: 100%;
      margin: 15px 0px 15px 15px;
      padding: 15px;
      background-color: #fff;
      border-radius: 10px;
    }
  }
}

// .oa-timeLine-item:last-child {
//   .oa-timeLine-item-content {
//     .oa-timeLine-item-content-icon {
//       .icon {
//         margin-bottom: 15px;
//       }
//     }
//   }
// }
</style>