health-front/pages_order/product/tabDetect/detectPackageView.vue

<template>
  <view class="package__view">
    <view class="flex package" v-for="packageItem in list" :key="packageItem.id">
      <view class="flex flex-column package-info">
        <view class="package-info-title">{{ packageItem.title }}</view>
        <view class="package-info-desc">{{ packageItem.desc }}</view>
      </view>
      <view class="package-detail">
        <view class="package-detail-item" v-for="item in packageItem.children" :key="item.id">
          <view class="package-detail-item-img">
            <image class="img" :src="item.url" mode="aspectFill"></image>
          </view>
          <view class="package-detail-item-label">{{ item.label }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    this.list = [
      { 
        id: '001', 
        title: '儿童体检套餐', 
        desc: '适合3-12岁的儿童',
        children: [
          { id: '0011', label: '腹部超声', url: '',  },
          { id: '0012', label: '视力检查', url: '',  },
          { id: '0013', label: '骨龄检测', url: '',  },
          { id: '0014', label: '生长激素水平检测', url: '',  },
        ],
      },
      { 
        id: '002', 
        title: '青少年体检套餐', 
        desc: '适用于13-18岁的青少年',
        children: [
          { id: '0021', label: '身高', url: '',  },
          { id: '0022', label: '血常规', url: '',  },
          { id: '0023', label: '胸部 X 光', url: '',  },
          { id: '0024', label: '心电图检查', url: '',  },
        ],
      },
      { 
        id: '003', 
        title: '孕产妇体检套餐', 
        desc: '适用于孕期女性',
        children: [
          { id: '0031', label: '胎儿超声检查', url: '',  },
          { id: '0032', label: '唐氏筛查', url: '',  },
          { id: '0033', label: '糖筛查试验', url: '',  },
          { id: '0034', label: '血压', url: '',  },
        ],
      },
    ]
  },
}
</script>

<style scoped lang="scss">
.package__view {
  width: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.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>