急需一个卡片类型的展示样式,但是卡片没有办法浮现在页面上,对话框虽能浮现,但是原版对话框标题处只有一个文字标题,不能写图标。
原本版对话框
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
借鉴对话框尾部书写方法,写头部
<el-dialog
:title="title"
:visible.sync="deliveryOpen"
width="30%">
<div slot="title" class="dialog-title">
<i style="font-size: 35px;color:#ffc31b" class="el-icon-s-custom"></i>
<span style="font-size: 20px;margin-left:20px" class="title-text">验收资料递送方式</span>
<el-button style="font-size: 15px; float: right;" type="primary" @click="deliveryOpen = false">返回</el-button>
</div>
<div class="text">联系人:XXX</div>
<div class="text" style="color: red;">*纸质资料可邮寄/线下递送,电子资料请发送邮箱*</div>
</el-dialog>
.text {
font-size: 15px;
color: #333333;
margin-bottom: 10px;
margin-left: 10px;
}