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

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true" :width="'60%'">
        <view class="popup-content">
            <view class="des1">
                <view><text class="bold">Quý khách hàng thân mến:</text></view>
                <view>Trước khi giao dịch, chúng tôi xin nhắc nhở bạn rằng:</view>
                <view>1. Vì có những rủi ro nhất định trong giao dịch, bạn nên đầu tư thích hợp theo kinh nghiệm giao
                    dịch và thu nhập liên quan của mình, thay vì sử dụng tiền vay từ người khác.</view>
                <view>2. Dựa trên sự điều chỉnh đối với hệ thống kiểm soát rủi ro của ngân hàng, kênh nạp tiền có thể
                    không được hỗ trợ hoặc hạn mức giao dịch có thể không chính xác khi bạn sẵn sàng nạp tiền (đặc biệt
                    là vào ban đêm tại địa phương của bạn), vì vậy bạn nên sắp xếp vị thế giao dịch của mình và khoảng
                    thời gian nạp tiền sao cho hợp lý để tránh những tổn thất không đáng có do bất kỳ sự chậm trễ nào
                    trong việc nhận tiền nạp.</view>
                <view>Không bao giờ tiết lộ thông tin cá nhân nhạy cảm cho người gọi đến. CWG sẽ không bao giờ yêu cầu
                    bất kỳ thông tin cá nhân nhạy cảm nào từ bạn qua điện thoại hoặc email cũng như không cung cấp bất
                    kỳ lời khuyên đầu tư nào.</view>
                <view>Trong trường hợp có bất kỳ vấn đề gì với khoản tiền nạp của bạn, vui lòng liên hệ với trung tâm
                    dịch vụ khách hàng chính thức của chúng tôi bất kỳ lúc nào.</view>
                <view><text class="bold">Trân trọng,</text></view>
            </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 }
});
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);

    .des1 {
        font-size: px2rpx(16);
        line-height: 1.8;
        margin: px2rpx(20) 0 px2rpx(30);
        text-align: left;
        max-width: 100%;

        view {
            margin-bottom: px2rpx(20);

            &:last-child {
                margin-bottom: 0;
            }
        }

        .bold {
            font-weight: bold;
        }
    }
}
</style>