crm-mobile/pages_task/components/recordItem.vue

<template>
  <view class="list-item">
    <view class="time">
      <text class="date">
        {{ formatTime(item.createTime, 'MM-DD') }}
      </text>
      <text class="now">
        {{ formatTime(item.createTime, 'HH:mm') }}
      </text>
    </view>
    <view class="icon-box">
      <text class="icon" />
    </view>
    <view class="content">
      <view class="title">
        {{ item.content }}
      </view>
      <view class="option">
        <text class="option-text">
          {{ item.realname }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
	/**
	 * 操作记录
	 */
  import moment from 'moment'
	
  export default {
    name: 'RecordItem',
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    methods: {
      formatTime(date, formatStr) {
        return moment(date).format(formatStr)
      }
    }
  }
</script>

<style scoped lang="scss">
	.list-item {
		display: flex;
		justify-content: space-around;

		.time {
			flex-direction: column;
			@include left;

			.date {
				font-size: 26rpx;
				color: $dark;
			}

			.now {
				font-size: 24rpx;
				color: $gray;
			}
		}

		.icon-box {
			position: relative;
			display: flex;

			.icon {
				z-index: 2;
				width: 17rpx;
				height: 17rpx;
				border-radius: 50%;
				background-color: #17cfbd;
				margin: 14rpx 24rpx 0;
			}

			&::before {
				position: absolute;
				z-index: 1;
				top: 14rpx;
				left: 50%;
				transform: translateX(-50%);
				content: "";
				width: 1rpx;
				height: 100%;
				background-color: $border-color;
				display: block;
			}
		}

		.content {
			flex: 1;
			padding-bottom: 36rpx;
			overflow: hidden;

			.title {
				font-size: 30rpx;
				color: $dark;
				white-space: pre-wrap;
				word-wrap: break-word;
				margin-bottom: 20rpx;
			}

			.option {
				font-size: 26rpx;
				color: $gray;
				display: flex;
				flex-wrap: wrap;

				.option-text {
					flex: 1;
				}
			}
		}

		&:first-child {
			.icon {
				background-color: #ffbc01;
			}
		}

		&:last-child {
			.icon-box {
				&::before {
					display: none;
				}
			}
		}
	}
</style>