studytour-front/pages_order/growing/activity/markList.vue

<template>
	<view class="page__view highlight">

		<navbar title="标记有我" leftClick @leftClick="$utils.navigateBack" />

    <view class="main">
      <view class="section" v-for="item in list" :key="item.id">
        <view class="section-header">
          <view class="flex title">{{ item.title }}</view>
          <button class="flex btn btn-all" @click="jumpToGrowing(item.id)">
            <view>查看成长档案</view>
            <image class="icon" src="@/static/image/icon-arrow-right.png" mode="widthFix"></image>
          </button>
        </view>
        <view class="section-content record">
          <view class="record-item" v-for="(image, imgIdx) in item.images" :key="imgIdx">
            <image class="img" :src="image" mode="scaleToFill"></image>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

  export default {
		mixins: [mixinsList],
    data() {
      return {
        // todo
				mixinsListApi: '',
      }
    },
    methods: {
      jumpToGrowing(id) {
        // todo
  			this.$utils.navigateTo(`/pages/index/growing`)
      },
    },
  }
</script>

<style lang="scss" scoped>

  .swiper {
    margin-top: 40rpx;

    .title {
      margin-top: 12rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #252545;
    }

    .tag {
      margin-top: 4rpx;
      padding: 2rpx 8rpx;
      font-size: 24rpx;
      color: #00A9FF;
      background: #E0F5FF;
      border-radius: 8rpx;
    }
  }

  .main {
    padding: 0 40rpx;
  }

  .section {
    margin-top: 64rpx;

    &-header {
      font-size: 36rpx;
      font-weight: 500;
      color: #191919;

      .title {
        flex: 1;
        justify-content: flex-start;
        column-gap: 8rpx;
      }

      .btn-all {
        column-gap: 4rpx;
        font-size: 24rpx;
        line-height: 1.4;
        color: #8B8B8B;

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

    &-content {
      margin-top: 24rpx;
    }
  }

  .record {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rpx;

    &-item {
      border: 2rpx solid #CDCDCD;
      border-radius: 12rpx;
      overflow: hidden;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>