<template>
    <el-card style="border-radius:10px"> 
        <img class="labs_card_img" :src="imgSrc" alt="">
        <div style="padding:20px;">
            <p class="labs_card_p">{{ title }}</p>
            <el-button v-if="!comingSoon">
                <a :href="linkSrc" target="_Blank" v-if="linkSrc != ''">进入</a>
                <span v-else @click="goNext(title)">进入</span>
            </el-button>
        </div>
    </el-card>
</template>
<script setup>
const props = defineProps({
    imgSrc: {
        type: String,
        default: ""
    },
    linkSrc: {
        type: String,
        default: ""
    },
    title: {
        type: String,
        default: ""
    },
    comingSoon: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits("getNextValue")
const goNext = (value) => {
    emit("getNextValue", value)
}
</script>
<style scoped>
.labs_card_img {
    width: 100%;
}

.labs_card_p {
    line-height: 32px;
    margin-bottom: 8px;
    font-size: 24px;
}

.el-button {
    background-color: #2979FF;
    color: #fff;

    a {
        color: #fff;
    }
    a:hover{
        color: (--el-button-hover-text-color)
    }
}
</style>