health-front/pages_order/report/recommendTest.vue

<template>
  <view>
    <view class="flex header">
      <view class="title">推荐检测</view>
      <button class="btn flex"><text style="margin-right: 4rpx;">查看全部</text><uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon></button>
    </view>
    <view class="content">
      <productCard v-for="item in list" :key="item.id" :data="item"></productCard>
    </view>
  </view>
</template>

<script>
  import productCard from '@/pages_order/product/productCard.vue'

  export default {
    components: {
      productCard,
    },
    data() {
      return {
        list: [],
      }
    },
    mounted() {
      this.list = [
        {
          id: '001',
					url: '', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '002',
					url: '', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
      ]
    },
  }
</script>

<style scoped lang="scss">
.header {
  justify-content: space-between;

  .title {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    line-height: 1.2;
    color: #252545;
  }

  .btn {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    line-height: 1.4;
    color: #A8A8A8;
  }
}

.content {
  margin-top: 24rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 32rpx;
}

</style>