74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<!-- 模态框通用样式 -->
|
|
<n-card
|
|
size="huge"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
:bordered="false"
|
|
class="modal-container"
|
|
:style="{ width: width, height: height }"
|
|
>
|
|
<n-flex justify="space-between" style="height: 40px">
|
|
<n-gradient-text
|
|
style="font-size: 20px; font-weight: 600; letter-spacing: 2px"
|
|
gradient="linear-gradient(90deg, #CDF7FD 0%, #DAFAFE 20%, #CDF7FD 40%, #DAFAFE 60%, #CDF7FD 80%, #DAFAFE 100%)"
|
|
>
|
|
{{ modalTitle }}
|
|
</n-gradient-text>
|
|
|
|
<img
|
|
class="close-icon"
|
|
src="@/assets/home-imgs/close.png"
|
|
@click="onHandleCloseModal"
|
|
/>
|
|
</n-flex>
|
|
|
|
<div class="modal-content">
|
|
<slot></slot>
|
|
</div>
|
|
</n-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
width: {
|
|
type: String,
|
|
default: '80%',
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
modalTitle: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
const emits = defineEmits(['onHandleCloseModal'])
|
|
|
|
// 关闭模态框
|
|
const onHandleCloseModal = () => {
|
|
emits('onHandleCloseModal')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.close-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal-content {
|
|
flex: 1;
|
|
height: calc(100% - 40px);
|
|
}
|
|
</style>
|