education-front/components/serve/serveSecondModuleCard.vue

<template>
  <view class="flex card" @click="jumpToList(data.id, data.title)">
    <image class="card-bg" :src="data.image" mode="scaleToFill"></image>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      jumpToList(categoryId, title) {
        uni.navigateTo({
					url: `/pages_order/serve/search?categoryId=${categoryId}&title=${title}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">
    $w: calc(100vw - 50rpx*2);

  .card {
    position: relative;
    width: $w;
    height: auto;
    font-size: 0;
    border-radius: 25rpx;
    overflow: hidden;
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);

    &-bg {
      width: $w;
      height: calc(#{$w} * 179 / 714);
    }
  }
</style>