<template>
    <view class="relative" @click="$emit('click')">
        <view class="absolute z-1 top-24 left-28">
            <view class="text-fore-title text-lg font-bold">{{ title }}</view>
            <view class="mt-6 h-42 flex justify-center items-center px-12 rounded-full text-2xs text-fore-title"
                  :style="{backgroundColor: descBgColor}">
                {{ desc }}
            </view>
        </view>
        <ie-image :src="bgSrc" is-oss :custom-class="`w-full ${customClass}`" mode="widthFix" />
    </view>
</template>

<script setup lang="ts">
defineProps({
    title: {
        type: String,
        default: ''
    },
    desc: {
        type: String,
        default: ''
    },
    descBgColor: {
        type: String,
        default: ''
    },
    bgSrc: {
        type: String,
        default: ''
    },
    customClass: {
        type: String,
        default: ''
    }
})
defineEmits(['click'])
</script>

<style scoped>

</style>