- 先放一张没有修改过的iview对话框。
- 修改过的Modal。
- 代码:
HTML:
<Modal v-model="modalGlzcy" class-name="qzcxQzc" :closable="false">
<!-- <template #header>
</template> -->
<div slot="header">
<div class="yyqd-title">
<span>管理支撑域</span>
</div>
</div>
//以上两种方式都可以修改title
<div class="yyqd-content">
//写入主题HTML代码
</div>
<template #footer class="yyqd-footer">
</template>
</Modal>
CSS:
.qzcxQzc {
display: flex;
justify-content: center;
align-items: center;
.ivu-modal {
top: 0;
width: 24.3rem !important /* 972px */;
border: none;
background: transparent;
}
.ivu-modal-content {
background-color: transparent;
}
.yyqd-title {
width: 8.225rem /* 329px */;
height: 1.325rem /* 53px */;
background: url('../../../assets/img/title.png') no-repeat;
background-size: 100% 100%;
position: absolute;
margin-top: -0.7rem;
left: 50%;
margin-left: -4.125rem;
text-align: center;
line-height: 1.325rem;
span {
font-size: 0.55rem;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
}
}
.yyqd-content {
height: 13.7rem /* 548px */;
background: url('../../../assets/img/tkyyqd@2x.png');
background-size: 100% 100%;
padding: 0.5rem 0rem 0.55rem 0.4rem ;
box-sizing: border-box;
color: #fff;
font-size: 0.55rem /* 22px */;
font-family: Source Han Sans CN;
color: #ffffff;
}
.ivu-modal-footer {
display: none;
}
}