health-front/pages_order/product/detectPackageCard.vue

<template>
  <view class="flex package" @click="jumpToProductDetail(data.id)">
    <view class="flex flex-column package-info">
      <view class="package-info-title">{{ data.name }}</view>
      <!-- todo: check key -->
      <!-- <view class="package-info-desc">{{ data.desc }}</view> -->
    </view>
    <view class="package-detail">
      <view class="package-detail-item" v-for="item in data.packages" :key="item.id">
        <view class="package-detail-item-img">
          <image class="img" :src="getCoverImg(item)" mode="aspectFill"></image>
        </view>
        <view class="package-detail-item-label">{{ item.titile }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      jumpToProductDetail(id) {
        this.$utils.navigateTo(`/pages_order/product/productDetail?id=${id}`)
      },
      getCoverImg(data) {
        const { image } = data
        
        return image?.split(',')?.[0] || '' 
      },
    },
  }
</script>

<style scoped lang="scss">

  .package {
    width: 100%;
    padding: 8rpx 8rpx 8rpx 16rpx;
    box-sizing: border-box;
    background: #FAFAFF;
    border: 2rpx solid #FFFFFF;
    border-radius: 24rpx;

    & + & {
      margin-top: 32rpx;
    }

    &-info {
      flex: none;
      display: inline-flex;
      align-items: flex-start;
      width: 200rpx;
      font-family: PingFang SC;
      line-height: 1.4;

      &-title {
        font-weight: 600;
        font-size: 28rpx;
        color: #000000;
      }

      &-desc {
        margin-top: 8rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #8B8B8B;
      }
    }

    &-detail {
      flex: 1;
      white-space: nowrap;
      overflow-x: auto;
      padding: 16rpx;
      background-image: linear-gradient(#FAFAFF, #F3F3F3);
      border-radius: 16rpx;

      &-item {
        $size: 120rpx;

        & + & {
          margin-left: 16rpx;
        }

        display: inline-block;
        width: $size;

        &-img {
          width: $size;
          height: $size;
          border: 2rpx solid #E6E6E6;
          border-radius: 8rpx;
          overflow: hidden;

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

        &-label {
          margin-top: 8rpx;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          line-height: 1;
          color: #8B8B8B;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }

</style>