gypsy-crm-frontend-vu/pages/ib/components/BonusAgreementPopup.vue

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true"
        custom-class="clause-popup" :title="title">
        <view class="popup-content">
            <scroll-view scroll-y class="clause-content">
                <view v-if="type == 'nzTwo'">
                    <view class="h4"><text v-t="'news_add_field1.activitiesNZTwo.item8'"></text>{{
                        tableData4Two.applicationStartTime }} - {{ tableData4Two.applicationEndTime }}</view>
                    <view class="h4" v-t="'news_add_field1.activitiesNZTwo.item10'"></view>
                    <view class="list">
                        <view class="list-item" v-for="i in 6" :key="i"
                            v-t="`news_add_field1.activitiesNZTwo.item1${i}`" />
                        <view class="list-item">
                            <view class="table-container">
                                <view class="table">
                                    <view class="tr">
                                        <view class="th" v-for="th in 7" :key="th"
                                            v-t="`news_add_field1.activitiesNZTwo.item${3 + th - 1}1`"></view>
                                    </view>
                                    <view class="tr" v-for="r in 5" :key="r">
                                        <view class="td" v-for="c in 7" :key="c"
                                            v-t="`news_add_field1.activitiesNZTwo.item${3 + r - 1}${c}`"></view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="list-item" v-for="i in 5" :key="i"
                            v-t="`news_add_field1.activitiesNZTwo.item${17 + i - 1}`" />
                    </view>
                </view>
                <view v-else-if="type == 'newList'">
                    <cwg-rich-text class="popup-text" :nodes="content" />
                </view>
            </scroll-view>
        </view>
        <template #footer>
            <button @click="close">{{ t('Btn.Cancel') }}</button>
            <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
    },
    type: {
        type: String,
        default: 'nzTwo',
    },
    title: {
        type: String,
        default: ''
    },
    tableData4Two: {
        type: Object,
        default: () => ({})
    },
    content: {
        type: String,
        default: ''
    }
});

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

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 close = () => { visible.value = false; };
</script>

<style lang="scss" scoped>
.clause-popup {
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow: hidden;

    .popup-content {
        padding: 20px;
    }

    .clause-content {
        height: 60vh;
        width: 100%;

        .h4 {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 12px;
            margin-top: 16px;
        }

        .list {
            margin-bottom: 20px;

            .list-item {
                margin-bottom: 8px;
                line-height: 1.5;
                color: #606266;
            }

            .table-container {
                margin: 16px 0;
                overflow-x: auto;

                .table {
                    width: 100%;
                    border-collapse: collapse;

                    .tr {
                        display: flex;
                        width: 100%;

                        .th,
                        .td {
                            flex: 1;
                            padding: 10px;
                            text-align: center;
                            border: 1px solid #dcdfe6;
                            font-size: 14px;
                        }

                        .th {
                            background: #f5f7fa;
                            font-weight: 600;
                            color: #303133;
                        }

                        .td {
                            color: #606266;
                        }
                    }
                }
            }
        }

        .popup-text {
            line-height: 1.6;
            color: #606266;

            p {
                margin-bottom: 12px;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                margin: 16px 0 8px 0;
                color: #303133;
            }

            ul,
            ol {
                margin-left: 20px;
                margin-bottom: 12px;
            }

            li {
                margin-bottom: 4px;
            }
        }
    }
}

// Responsive styles
@media (max-width: 768px) {
    .clause-popup {
        width: 95%;
        max-height: 85vh;

        .popup-content {
            padding: 16px;
        }

        .clause-content {
            height: 50vh;

            .h4 {
                font-size: 14px;
            }

            .list {
                .table-container {
                    .table {
                        .tr {

                            .th,
                            .td {
                                padding: 8px;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>