fashion-ssr-vue3/components/business/account/notice/detailModal.vue

<!-- @format -->

<script lang="ts" setup>
defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
})
const visible = defineModel('visible', { type: Boolean, required: true })
</script>

<template>
  <el-dialog
    v-model="visible"
    :append-to-body="true"
    width="800"
    modal-class="custom-notice-modal"
  >
    <template #header>
      <div
        class="px-40px py-25px bg-#F5F5F5 b-rd-lt-6px b-rd-rt-6px text-18px fw-500 text-#333"
      >
        Notice
      </div>
    </template>
    <div class="py-24px px-40px">
      <div class="mb-20px">
        <div class="text-16px mb-10px text-#333">
          Notification Name
        </div>
        <el-input :value="detail?.title" :disabled="true" />
      </div>
      <div class="mb-20px">
        <div class="text-16px mb-10px text-#333">
          Notification Time
        </div>
        <el-input :value="detail?.sendTime" :disabled="true" />
      </div>
      <div class="mb-20px">
        <div class="text-16px mb-10px text-#333">
          Content
        </div>
        <el-input
          :value="detail?.msgContent"
          type="textarea"
          :rows="5"
          :disabled="true"
        />
      </div>
    </div>
  </el-dialog>
</template>

<style lang="less">
.custom-notice-modal {
  .el-dialog {
    padding: unset !important;
    .el-dialog__header {
      padding: 0 !important;
      .el-dialog__headerbtn {
        right: 20px;
        top: 10px;
      }
    }
    .el-dialog__footer {
      padding-top: 0 !important;
      padding-bottom: 24px !important;
      padding-left: 40px !important;
      padding-right: 40px !important;
    }
  }
}
</style>