applet/pages/tabtar/components/ChoiceZone.vue

<template>
  <view
    class="hxbox u-skeleton-fillet"
    v-if="hxCateList.length || skeletonShow"
  >
    <view class="title">惠选专区</view>
    <view class="hxClassify">
      <view
        class="item"
        v-for="(item) in skeletonShow ? 1 : hxCateList.slice(0, 4)"
        @click="jumpHxCate(item)"
        :key="item.id"
      >
        <image
          mode="widthFix"
          :src="`${item.cover_image}?x-oss-process=style/w_350`"
        ></image>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  hxCateList: {
    type: Array,
    default: () => []
  },
  skeletonShow: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['jumpHxCate']);

const jumpHxCate = (item) => {
  emit('jumpHxCate', item);
};
</script>

<style scoped lang="scss">
.hxbox {
  padding: 30rpx 30rpx 0;
  margin: 0rpx 30rpx 30rpx;
  background: linear-gradient(139deg, #ffe9c4 1%, #edffe7 100%);
  border-radius: 10rpx;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #1a1a1a;
  }

  .hxClassify {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30rpx;
    color: #373737;

    .item {
      text-align: center;
      margin-bottom: 20rpx;

      image {
        width: 300rpx !important;
        height: 210rpx !important;
      }
    }

    .item:first-child {
      margin-left: 0;
    }

    .item:nth-child(5n + 1) {
      margin-left: 0;
    }
  }
}
</style>