gypsy-crm-frontend-vu/pages/customer/components/ClauseNewListPopup.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">
        <cwg-rich-text class="popup-text" :nodes="content" />
      </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 },
  content: { type: String, default: '' },
  title: { type: String, default: '' }
});
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";

.clause-popup {
  width: 90%;
  max-width: 800px;

  .clause-content {
    height: px2rpx(400);
    overflow-y: auto;
    padding: px2rpx(20);
    line-height: 1.6;

    view {
      :deep(*) {
        max-width: 100%;
        box-sizing: border-box;
      }

      :deep(p) {
        margin-bottom: px2rpx(12);
      }

      :deep(ul),
      :deep(ol) {
        margin-left: px2rpx(20);
        margin-bottom: px2rpx(12);

        :deep(li) {
          margin-bottom: px2rpx(6);
        }
      }

      :deep(table) {
        width: 100%;
        border-collapse: collapse;
        margin: px2rpx(16) 0;

        :deep(th),
        :deep(td) {
          border: 1px solid #e4e7ed;
          padding: px2rpx(8);
          text-align: center;
        }

        :deep(th) {
          font-weight: bold;
          background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        }
      }
    }
  }
}
</style>