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

<template>
    <popup
        v-model:show="showValue"
        round
        teleport="body"
        class="complete-farm-popup"
        :close-on-click-overlay="false"
    >
        <div class="complete-farm-popup__title">{{ t("agriFile.completeFarmInfo") }}</div>
        <div class="complete-farm-popup__subtitle">
            {{ t("agriFile.getImmediately") }}
            <span>{{ t("agriFile.patrolDiagnosisService") }}</span>
        </div>
        <div class="complete-farm-popup__image">
            <slot name="image"></slot>
        </div>
        <div class="complete-farm-popup__btn" @click="handleOpen">{{ t("agriFile.goEnable") }}</div>
    </popup>
</template>

<script setup>
import { computed } from "vue";
import { Popup } from "vant";
import { useI18n } from "@/i18n";

const { t } = useI18n();

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits(["update:show", "confirm"]);

const showValue = computed({
    get: () => props.show,
    set: (val) => emit("update:show", val),
});

const handleOpen = () => {
    emit("confirm");
    showValue.value = false;
};
</script>

<style scoped lang="scss">
.complete-farm-popup {
    width: 82%;
    padding: 20px 10px;
    text-align: center;

    &__title,
    &__subtitle {
        font-size: 24px;
        font-family: 'pangmenzhengdao';
    }

    &__subtitle {
        margin-top: -4px;

        span {
            color: #2199f8;
        }
    }

    &__image {
        width: 100%;
        height: 156px;
        margin: 14px 0;
        border-radius: 5px;
        background: #f2f4f7;

        :deep(img) {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    &__btn {
        width: 162px;
        border-radius: 25px;
        background: #2199f8;
        padding: 8px 0;
        color: #fff;
        font-size: 16px;
        margin: auto;
    }
}
</style>