health-front/pages_order/home/teamBgIntro.vue

<template>
  <view class="view">
    <image class="img" :src="configList.home_team_bg" mode="widthFix"></image>

    <view class="content">
      <view class="card">
        <image class="img" :src="configList.home_more_nutritional" mode="widthFix"></image>
        
        <view class="info">
          <view class="info-header">
            <view class="info-header-title">
              关注我们<br/><text>了解更多营养科学</text><view class="icon"><image class="icon-img" src="@/pages_order/static/index/btn-icon.png" mode="widthFix"></image></view>
            </view>
            <view class="info-header-desc">
              Background of team members
            </view>
          </view>
          <view class="info-content">
            <view class="info-card" v-for="item in list" :key="item.id" @click="jumpToProductDetail(item.id)">
              <view class="info-card-img flex">
                <image class="img" :src="getImage(item)" mode="widthFix"></image>
              </view>
              <view class="info-card-text flex flex-column">
                <view class="info-card-zh text-ellipsis">{{ item.name }}</view>
                <view class="info-card-en text-ellipsis">{{ item.enName }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
		data() {
			return {
        list: [],
			}
		},
		created() {
			this.getData()
		},
		methods: {
			async getData() {
				try {
					this.list = await this.$fetch('getRecommendProduct')
				} catch (err) {

				}
			},
      getImage(obj) {
        const { image } = obj

        return image?.split(',')?.[0] || ''
      },
      jumpToProductDetail(id) {
        this.$utils.navigateTo(`/pages_order/product/productDetail?id=${id}`)
      },
    },
  }
</script>

<style scoped lang="scss">

.view {
  font-size: 0;
  padding: 40rpx 32rpx 0 32rpx;
}

.content {
  padding-top: 80rpx;
}

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

.card {
  width: 100%;
  border-radius: 64rpx;
  overflow: hidden;
  background-image: linear-gradient(#F3F3F3, #FAFAFF);
  box-shadow: -5rpx -5rpx 10rpx 0 #FFFFFF,
                    10rpx 10rpx 20rpx 0 #AAAACC80,
                    4rpx 4rpx 10rpx 0 #AAAACC40,
                    -2rpx -2rpx 5rpx 0 #FFFFFF;
}

.info {
  padding: 32rpx;
  background-image: linear-gradient(#EDEDED, #FFFFFF);

  &-header {

    &-title {
      font-size: 48rpx;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 1.4;
      color: #252545;

      .icon {
        display: inline-block;
        vertical-align: middle;
        margin-left: 16rpx;

        &-img {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    &-desc {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 1.4;
      color: #989898;
    }
    
  }

  &-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20rpx;
  }

  &-card {
    margin-top: 20rpx;
    min-width: 0;
    border-radius: 24rpx;
    background-image: linear-gradient(#FAFAFF, #F3F3F3);
    box-shadow: -5rpx -5rpx 10rpx 0 #FFFFFF,
                    10rpx 10rpx 20rpx 0 #AAAACC80,
                    4rpx 4rpx 10rpx 0 #AAAACC40,
                    -2rpx -2rpx 5rpx 0 #FFFFFF;

    &-img {
      width: 100%;
      height: 160rpx;
      padding: 0 25rpx;
      box-sizing: border-box;
    }

    &-text {
      padding: 16rpx 0;
    }

    &-zh {
      width: 100%;
      text-align: center;
      font-family: PingFang SC;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 1.4;
      color: #252545;
    }

    &-en {
      width: 100%;
      text-align: center;
      font-family: PingFang SC;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 1.4;
      color: #989898;
    }
  }
}

</style>