gypsy-crm-frontend-vu/pages/customer/components/NewYear24Popup.vue

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true">
        <view class="popup-content">
            <view class="des1">
                <text>{{ t('news_add_field1.NewYear24.itemT1') }}</text>
                <text class="myRED">${{ data.balance }}</text>
                <text>{{ t('news_add_field1.NewYear24.itemT2') }}</text>
                <text class="myRED">${{ data.income }}</text>!
            </view>
        </view>
        <template #footer>
            <button type="primary" @click="close">{{ t('Btn.Confirm') }}</button>
        </template>
    </cwg-popup>
</template>

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

const props = defineProps({
    visible: { type: Boolean, default: false },
    data: { type: Object, default: () => ({ balance: 0, income: 0 }) }
});
const emit = defineEmits(['update:visible']);

const { t } = useI18n();
const visible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
});
const close = () => { visible.value = false; };
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.popup-content {
    padding: px2rpx(20);
    text-align: center;

    .des1 {
        font-size: px2rpx(16);
        line-height: 1.6;
        margin: px2rpx(30) 0 px2rpx(50);
    }

    .myRED {
        color: #f56c6c;
        font-weight: bold;
    }
}
</style>