studytour-front/components/growing/recordsView.vue

<template>
  <view class="records__view">
    <uv-steps direction="column">
      <uv-steps-item v-for="(record, index) in list" :key="record.id">
        <template #icon>
          <view class="flex mark is-active" v-if="index === 0">
            <image class="icon" src="@/static/image/icon-mark-highlight.png" mode="widthFix"></image>
          </view>
          <view class="flex mark" v-else>
            <image class="icon" src="@/static/image/icon-mark.png" mode="widthFix"></image>
          </view>
        </template>
        <template #title>
          <view class="title" @click="onClickActivity(record.id)">{{ $dayjs(record.createTime).format('YYYY-MM-DD') }}</view>
        </template>
        <template #desc>
          <view class="content" @click="onClickActivity(record.id)">
            <view class="desc">{{ record.name }}</view>
            <view class="image">
              <view class="image-item" v-for="(image, imgIdx) in record.images" :key="imgIdx">
                <image class="img" :src="image" mode="aspectFill"></image>
              </view>
            </view>
          </view>
        </template>
      </uv-steps-item>
    </uv-steps>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
    methods: {
      onClickActivity(id) {
        this.$utils.navigateTo(`/pages_order/growing/activity/index?id=${id}`)
      },
    },
  }
</script>

<style scoped lang="scss">

  .records__view {
    padding-left: 40rpx;
  }

  .mark {
    margin-top: 8rpx;
    width: 36rpx;
    height: 36rpx;
    background: #F3F3F3;
    border-radius: 50%;

    .icon {
      width: 24rpx;
      height: auto;
    }

    &.is-active {
      background: linear-gradient(to right, #21FEEC, #019AF9);
    }
  }

  .title {
    font-family: PingFang SC;
    font-size: 36rpx;
    font-weight: 600;
    line-height: 1.4;
    color: $uni-color;
  }

  .content {
    width: calc(100vw - 92rpx);
  }

  .desc {
    padding: 12rpx 0 8rpx 0;
    font-family: PingFang SC;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 1.4;
    color: #191919;
  }

  .image {
    display: flex;
    column-gap: 16rpx;
    flex-wrap: nowrap;
    overflow-x: auto;

    &-item {
      flex: none;
      width: 208rpx;
      height: 296rpx;
      border: 2rpx solid #CDCDCD;
      border-radius: 12rpx;
      overflow: hidden;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

</style>