<template>
    <div class="vipFooterBox animate__animated animate__fadeInUp" @click="goVipIntroduce">
        <img class="cursor-pointer" src="../../assets//img/vipfooter.png"/>
        <span class="close-btn cursor-pointer column items-center flex-center"
        @click.stop="OffVip"><IconClose :size="16"></IconClose></span>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";


const router = useRouter();


const props = defineProps({
    DetaTem:{
        type: Boolean,
        default: false,
    },
    Details:{
        type: Object,
        default: {},
    }
})
const emit = defineEmits<{
    (event: 'close'): void,
}>()

const OffVip = () => {
    emit('close')
}

const goVipIntroduce = () =>{
    router.push({
        path:`/p/show`
    })
}

</script>

<style lang="scss" scoped>
.vipFooterBox{
    position: relative;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.vipFooterBox img{
    width: 100vw;
    height: 7.81vw;
}  
.vipFooterBox .content-item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.73vw;
    margin-bottom: 0.7vw;
    color: #000000;
}
.vipFooterBox .close-btn{
    position: fixed;
    bottom: 3.3vw;
    right: 5vw;
    width: 1.77vw;
    height: 1.77vw;
    border:2px solid #AFAFAF;
    text-align: center;
    color:#AFAFAF;
    border-radius: 50%;
    z-index: 3;
}
.vipFooterBox .close-btn:hover{
    border:2px solid #fff;
    color:#fff;
}
    
</style>