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

<template>
    <Popup
        v-model:show="showValue"
        round
        position="center"
        teleport="body"
        :z-index="20000"
        class="survey-ask-popup"
        :close-on-click-overlay="true"
    >
        <img class="survey-ask-popup__badge" src="@/assets/img/agricultural/ask-bg.png" alt="" />
        <img class="survey-ask-popup__illust" src="@/assets/img/agricultural/ask.png" alt="" />
        <div class="survey-ask-popup__title">{{ t("workExecute.fillSurvey") }}</div>
        <div class="survey-ask-popup__desc">{{ t("workExecute.fillSurveyDesc") }}</div>
        <div class="survey-ask-popup__btn" @click="handleFill">{{ t("workExecute.fillNow") }}</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 handleFill = () => {
    emit("confirm");
    showValue.value = false;
};
</script>

<style lang="scss">
.survey-ask-popup.van-popup {
    width: 300px;
    padding: 28px 20px 24px;
    text-align: center;
    overflow: visible;
    background: #fff;
    box-sizing: border-box;
}

.survey-ask-popup__badge {
    position: absolute;
    top: -18px;
    left: -10px;
    width: 128px;
    height: auto;
    pointer-events: none;
    z-index: 1;
}

.survey-ask-popup__illust {
    display: block;
    width: 148px;
    height: auto;
    margin: 12px auto 18px;
}

.survey-ask-popup__title {
    font-size: 24px;
    color: #000;
    line-height: 28px;
    font-family: "PangMenZhengDao";
}

.survey-ask-popup__desc {
    margin-top: 6px;
    font-size: 22px;
    color: #000;
    line-height: 28px;
    font-family: "PangMenZhengDao";
}

.survey-ask-popup__btn {
    height: 40px;
    line-height: 40px;
    border-radius: 25px;
    background: #2199f8;
    color: #fff;
    font-size: 16px;
    box-sizing: border-box;
    padding: 0 30px;
    width: fit-content;
    margin: 20px auto 0;
    }
</style>