<template>
  <a-modal
    v-bind="$attrs"
    :bodyStyle="{ background: '#233741', color: '#fff' }"
    :width="800"
    destroyOnClose
  >
    <template #closeIcon>
      <img
        class="w-22px h-22px inline text-0"
        src="../../assets/images/model-close-icon.png"
        alt=""
        srcset=""
      />
    </template>
    <div>
      <div class="relative -mt-6px h-30px flex items-center">
        <div
          class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
        >
          {{ title1 }}
        </div>
      </div>
      <div class="bg-[#1D2D35] mt-14px p-10px">
        <slot name="content"></slot>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { Modal } from 'ant-design-vue'

  export default defineComponent({
    components: {
      [Modal.name]: Modal,
    },
    props: {
      title1: {
        type: String,
      },
    },
    setup() {
      return {}
    },
  })
</script>

<style scoped></style>
