<template>
  <view 
    :class="['grid4-item position-relative mb-3', classNames]"
    @click="emit('click')"
  >
    <text class="tag bg-mask-white color-primary radius-l p-1 position-absolute size-s text-lines-1">
      {{ title }}
    </text> 
    <Image
      width="100%"
      :height="250"
      :radius="15"
      :src="image"
      mode="aspectFit"
    />
  </view>
</template>

<script setup lang="ts">
import Image from '@/components/basic/Image.vue';

const props = defineProps<{
  title: string,
  image: string,
  classNames: string,
}>();

const emit = defineEmits([ 'click' ]);
</script>

<style lang="scss">
.grid4-item {

  &.half {
    width: 320rpx;
  }
  &.full {
    width: 710rpx;
  }

  .tag {
    top: 2rpx; 
    right: 2rpx;
    z-index: 20;
  }
}
</style>