gypsy-crm-frontend-vu/components/cwg-improve-popup.vue

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :show-footers="true">
        <view class="popup-content">
            <view class="des1" v-t="'Home.msg.content1'"></view>
            <view class="icon">
                <cwg-icon name="mdi-shield-lock-outline" :size="80" color="#303133" />
            </view>
            <view class="des2" v-t="'Home.msg.content2'"></view>
            <view class="des2" v-t="'Home.msg.content3'"></view>
        </view>
        <template #footer>
            <button @click="closeDia">{{ t('Btn.Cancel') }}</button>
            <button type="primary" @click="confirm">{{ t('Home.msg.btnImmediately') }}</button>
        </template>
    </cwg-popup>
</template>

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

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

const emit = defineEmits(['update:visible', 'confirm']);

const { t } = useI18n();

// Watch for changes in visible prop and emit update event
const visible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
});
const closeDia = () => {
    visible.value = false;
}
const confirm = () => {
    visible.value = false;
    emit('confirm');
}
</script>

<style lang="scss" scoped>
.des1{
    font-size: px2rpx(16);
    line-height: 1.6;
    margin: px2rpx(30) 0 px2rpx(50);
    color: #303133;
}
</style>