taicang-visitor/src/components/officialAccount/index.vue

<template>
    <div class="officialAccount">
        <div class="officialAccount-contain">
            <div class="officialAccount-contain-top">
                <img src="@/assets/images/gzh.png" style="width:30rem"/>
            </div>
            <div class="officialAccount-contain-middle" @click="returnPage">
                <span>为访客预约成功后能成功接收通知，请首次访客预约用户关注“XXXX”公众号，进行手机号授权，已关注用户可直接点击“下一步”。</span>
            </div>
            <div class="officialAccount-contain-bottom" @click="next">
                <el-button type="primary" style="width: 100%" size="large">
                    <span style="font-size: 2rem;">下 一 步</span>
                </el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
const emits = defineEmits(["changeStage"]);
function next() {
    emits("changeStage");
}
</script>

<style scoped lang="scss">
.officialAccount {
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    &-contain{
        width:50%;
        position: absolute;
        top:20%;
        left:25%;
        &-top{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom:4%;
            img{
    
            }
        }
        &-middle{
            font-size: 2.4rem;
            margin:0 0 10% 1rem;
            letter-spacing: 2px;
            line-height: 4rem;
            text-align: center;
            color:#fff;
        }
        &-bottom{
            width:20%;
            font-size: 2.4rem !important;
            margin:0 auto;
            display: flex;
            justify-content: center;
        }
    }
}

</style>