gypsy-crm-frontend-vu/pages/customer/components/ClauseNZPopup.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>
          <view class="h4"><text v-t="'news_add_field1.activitiesNZ.item8'"></text>{{ startDate }} - {{ endDate }}
          </view>
          <view class="h4" v-t="'news_add_field1.activitiesNZ.item10'"></view>
          <view class="list">
            <view class="list-item" v-for="i in 5" :key="i" v-t="`news_add_field1.activitiesNZ.item1${i}`"></view>
            <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.activitiesNZ.item${30 + th}1`">
                    </view>
                  </view>
                  <view class="tr" v-for="r in 4" :key="r">
                    <view class="td" v-for="c in 7" :key="c" v-t="`news_add_field1.activitiesNZ.item${30 + r}${c}`">
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="list-item" v-for="i in 5" :key="i" v-t="`news_add_field1.activitiesNZ.item2${i}`"></view>
          </view>
        </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 },
  startDate: { type: String, default: '' },
  endDate: { 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 {
    padding: px2rpx(20);
    max-height: px2rpx(500);
    overflow-y: auto;
    text-align: left;
    line-height: 1.6;

    .h4 {
      font-size: px2rpx(16);
      font-weight: bold;
      margin: px2rpx(16) 0;
    }

    .list {
      .list-item {
        margin-bottom: px2rpx(12);
      }
    }

    .table-container {
      width: 100%;
      overflow-x: auto;
      margin: px2rpx(16) 0;

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

        .tr {
          display: flex;
          border-bottom: 1px solid #e4e7ed;

          &:last-child {
            border-bottom: none;
          }
        }

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

          &:last-child {
            border-right: none;
          }
        }

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

        .td {
          background-color: #ffffff;
        }
      }
    }
  }
}
</style>