tall-mui-3-project/src/components/TimeLine/component/TimeBox.vue

<!--
 * @Author: aBin
 * @email: binbin0314@126.com
 * @Date: 2021-07-19 15:36:28
 * @LastEditors: aBin
 * @LastEditTime: 2021-07-19 18:54:55
-->
<template>
  <view class="px-3 pb-10">
    <view :key="index" v-for="(item, index) in list">
      <view class="flex items-center">
        <TimeStatus :status="item" />
        <view class="flex-1 ml-2 flex justify-between items-center">
          <view>任务时间栏</view>
          <view>
            <view class="flex justify-between" style="min-width: 180rpx">
              <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="34"></u-icon>
              <u-icon custom-prefix="custom-icon" name="attachment" size="42"></u-icon>
              <u-icon custom-prefix="custom-icon" name="moneycollect" size="40"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="border-l-2 border-gray-300 ml-3.5 my-2">
        <view class="ml-4 shadow-lg task-box overflow-hidden">
          <u-card :show-foot="false" :show-head="false" class="h-16" margin="0">
            <view slot="body">
              <view class="u-col-between p-0 u-skeleton">
                <view class="u-skeleton-rect">瓶身描绘的牡丹一如你初妆</view>
              </view>
            </view>
          </u-card>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import TimeStatus from './TimeStatus.vue';
export default {
  name: 'TimeBox',

  components: { TimeStatus },

  data() {
    return { list: [0, 1, 2, 0, 1, 2] };
  },

  methods: {
    addTopList() {
      this.list.unshift(0, 0, 0);
      console.log('this.list: ', this.list);
    },

    addBottomList() {
      this.list.push(1, 1, 1);
      console.log('this.list: ', this.list);
    },
  },
};
</script>

<style scoped lang="scss">
.task-box {
  border-radius: 24rpx;
}
</style>