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

<template>
    <popup
        v-model:show="showValue"
        round
        teleport="body"
        class="diagnosis-report-popup"
        :z-index="20000"
        :close-on-click-overlay="true"
    >
        <img class="diagnosis-report-popup__image" src="@/assets/img/agricultural/report.png" alt="" />
        <div class="diagnosis-report-popup__title">
            <div>{{ t("agriFile.plantingDiagnosisReport") }}</div>
            <div>{{ t("agriFile.reportGenerated") }}</div>
        </div>
        <div class="diagnosis-report-popup__btn" @click="handleView">{{ t("agriFile.clickToView") }}</div>
        <div class="diagnosis-report-popup__hint">{{ t("agriFile.viewInDiagnosisHint") }}</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 handleView = () => {
    emit("confirm");
    showValue.value = false;
};
</script>

<style scoped lang="scss">
.diagnosis-report-popup {
    width: 78%;
    padding: 90px 20px 22px;
    text-align: center;
    overflow: visible;
    background: linear-gradient(360deg, #FFFFFF 0%, #D3EBFF 100%);

    &__image {
        display: block;
        width: 138px;
        height: 138px;
        margin: 0 auto 16px;
        position: absolute;
        top: -54px;
        left: 50%;
        transform: translateX(-50%);
    }

    &__title {
        font-size: 30px;
        color: #010101;
        line-height: 32px;
        div{
            font-family: "pangmenzhengdao";
        }
    }

    &__btn {
        width: 162px;
        margin: 18px auto 10px;
        padding: 8px 0;
        border-radius: 25px;
        background: linear-gradient(180deg, #96D1FF 0%, #2199F8 100%);
        color: #fff;
        font-size: 16px;
    }

    &__hint {
        color: #1D1919;
    }
}
</style>