81 lines
1.8 KiB
Vue
81 lines
1.8 KiB
Vue
<template>
|
|
<div class="linkmodel">
|
|
<a-modal
|
|
v-bind="getBindValue"
|
|
:bodyStyle="{ background: '#233741', color: '#fff' }"
|
|
:width="1200"
|
|
destroyOnClose
|
|
:getContainer="getContainer"
|
|
>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed, ref, unref, watchEffect } from 'vue'
|
|
import { Modal } from 'ant-design-vue'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
[Modal.name]: Modal,
|
|
},
|
|
props: {
|
|
title1: {
|
|
type: String,
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
setup(props, { attrs }) {
|
|
const modelVisible = ref(false)
|
|
|
|
const getBindValue = computed(() => {
|
|
const attr = {
|
|
...attrs,
|
|
...unref(props),
|
|
visible: unref(modelVisible),
|
|
maskClosable: false,
|
|
}
|
|
return attr
|
|
})
|
|
|
|
watchEffect(() => {
|
|
modelVisible.value = !!props.visible
|
|
})
|
|
|
|
const getContainer = () => {
|
|
if (document.body.clientWidth < 3000) return document.body
|
|
return document.body.querySelector(`.linkmodel`)
|
|
}
|
|
|
|
return {
|
|
getBindValue,
|
|
getContainer,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style>
|