health-front/pages_order/home/followUsIntro.vue

<template>
  <view class="view">
    <view>
      <view class="card" v-for="article in articleList" :key="article.id"  @click="$utils.navigateTo(article.path)">
        <image class="card-img" :src="article.url" mode="scaleToFill"></image>
      </view>
    </view>
    <view class="ways__view">
      <view class="way flex flex-column" v-for="(way, wIdx) in wayList" :key="wIdx"  @click="$utils.navigateTo(way.path)">
        <image class="way-icon" :src="way.url" mode="scaleToFill"></image>
        <view class="way-desc">{{ way.desc }}</view>
        <view class="way-title flex"><text style="margin-right: 4rpx;">{{ way.title }}</text><uv-icon name="arrow-right" color="#252545" size="24rpx"></uv-icon></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      articleList: {
        type: Array,
        default() {
          return []
        }
      },
      wayList: {
        type: Array,
        default() {
          return []
        }
      },
    },
  }
</script>

<style scoped lang="scss">

.view {
  padding: 24rpx 32rpx 0 32rpx;
}

.card {
  font-size: 0;
  overflow: hidden;
  border-radius: 32rpx;
  background-image: linear-gradient(to right, #FAFAFF, #F3F3F3);
  box-shadow: -5rpx -5rpx 20rpx 0 #FFFFFF,
              10rpx 10rpx 20rpx 0 #AAAACC80,
              4rpx 4rpx 10rpx 0 #AAAACC40,
              -2rpx -2rpx 5rpx 0 #FFFFFF;

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

  &-img {
    width: 100%;
    height: calc((100vw - 32rpx*2) * 129 / 343);
  }
  
}

.ways__view {
  margin-top: 80rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 24rpx;
}

.way {

  &-icon {
    width: 80rpx;
    height: 80rpx;
  }

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

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

</style>