nhfy/src/pages/cover.vue

<template>
    <div class="cover" :style="{ backgroundImage: `url(${require('@/assets/images/guide/bg.jpg')})` }">
        <div class="btn" @click="handleEnter">进入预案</div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const isShow = ref(true)
const emit = defineEmits(['enter']);

const handleEnter = () => {
    emit('enter')
}
</script>
<style lang="scss" scoped>
.cover {
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100000;
    background-size: cover;

    .btn {
        background-color: rgba($color: #000000, $alpha: 0.8);
        color: white;
        font-size: 20px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 20px 40px;
        border-radius: 10px;
        cursor: pointer;
        left: 50%;
        transform: translateX(-50%);
        top: 80%;
        position: absolute;
    }

}
</style>