health-front/pages_order/home/teamBgIntro.vue

<template>
  <view class="view">
    <image class="img" src="@/pages_order/static/index/team-school.png" mode="widthFix"></image>

    <view class="content">
      <view class="card">
        <image class="img" src="@/pages_order/static/index/team-info-bg.png" 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">
              <view class="info-card-img flex">
                <image class="img" :src="item.url" mode="widthFix"></image>
              </view>
              <view class="info-card-text flex flex-column">
                <view class="info-card-zh">{{ item.zh }}</view>
                <view class="info-card-en">{{ item.en }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
  }
</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;
    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 {
      font-family: PingFang SC;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 1.4;
      color: #252545;
    }

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

</style>