feiniao-farm-h5/src/components/popup/qrCodePopup.vue

<template>
    <popup v-model:show="showValue" round :close-on-click-overlay="closeOnClickOverlay" class="qr-code-popup" teleport="body">
        <div class="qr-code-content">
            <div class="qr-code-title">
                <slot name="success"></slot>
                <div class="title-text">
                    <div class="text-item">扫码进入 <span class="blue">飞鸟管家</span> 小程序</div>
                    <div class="text-item">查看农场更多详细信息</div>
                </div>
            </div>
            <div class="qr-code-img">
                <img src="@/assets/img/home/qrcode.png" alt="">
            </div>
            <div class="img-tips">长按图片扫码或保存</div>
        </div>
    </popup>
</template>

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

const showValue = ref(false);
const props = defineProps({
    closeOnClickOverlay: {
        type: Boolean,
        default: false,
    },
});
function showPopup() {
    showValue.value = true;
}

defineExpose({
    showPopup,
});
</script>

<style lang="scss" scoped>
.qr-code-popup {
    width: 321px;
    background: linear-gradient(0deg, #FFFFFF 5%, #FFFFFF 65%, #B2DCFD 123.05%, #2199F8 137.88%);
    .qr-code-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 20px 28px 20px;
    }
    .qr-code-img {
        width: 212px;
        img {
            width: 100%;
        }
    }
    .title-text {
        text-align: center;
        padding: 6px 0 8px 0;
        .text-item {
            font-size: 20px;
            color: #000;
            line-height: 32px;
            .blue {
                color: #2199F8;
                font-weight: 500;
                padding: 0 2px;
            }
        }
    }
    .img-tips {
        font-size: 16px;
        color: #7A7A7A;
        padding-top: 28px;
    }
}
</style>