feiniao-farm-h5/src/views/old_mini/entry_information/components/inviteEntryPopup.vue

<template>
    <Popup
        v-model:show="show"
        round
        class="invite-entry-popup"
        teleport="body"
        :z-index="9999"
        :close-on-click-overlay="false"
    >
        <div class="invite-entry-popup__inner">
            <img class="invite-entry-popup__cover" src="@/assets/img/home/plant.png" alt="" />
            <div class="invite-entry-popup__text">
                <div class="invite-entry-popup__line">管理员邀请您</div>
                <div class="invite-entry-popup__line">
                    录入 <span class="highlight">地块种植信息</span>
                </div>
            </div>
            <div class="invite-entry-popup__btn" @click="handleConfirm">去录入</div>
        </div>
    </Popup>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { Popup } from "vant";

const show = ref(false);

const open = () => {
    show.value = true;
};

const close = () => {
    show.value = false;
};

const handleConfirm = () => {
    close();
};

defineExpose({ open, close });
</script>

<style lang="scss">
.invite-entry-popup {
    width: 78%;
    max-width: 320px;
    overflow: hidden;
    background: #fff;

    .invite-entry-popup__inner {
        padding: 10px;
        text-align: center;
    }

    .invite-entry-popup__cover {
        width: 100%;
        height: 158px;
        object-fit: cover;
        border-radius: 12px;
        display: block;
    }

    .invite-entry-popup__text {
        margin-top: 12px;
        font-size: 24px;
        color: #111;
        line-height: 28px;
    }

    .invite-entry-popup__line {
        font-family: "PangMenZhengDao";
        .highlight {
            color: #2199f8;
        }
    }

    .invite-entry-popup__btn {
        margin-top: 12px;
        height: 40px;
        line-height: 40px;
        width: 160px;
        margin: 12px auto 0;
        text-align: center;
        border-radius: 22px;
        background: #2199f8;
        color: #fff;
        font-size: 16px;
    }
}
</style>