效果图
![](https://img2022.cnblogs.com/blog/2833653/202210/2833653-20221020172106807-1336086927.png)
代码
<el-dialog :visible.sync="isShowGenerateVideo" width="500px" class="dialog-middle" center append-to-body>
<div slot="title">
<div class="el-dialog-header-box">
<div class="dialog-title-block"></div>
<span class="dialog-title-text">生成视频</span>
</div>
</div>
<el-form ref="videoFormRef" label-width="72px" size="small" @submit.native.prevent>
<el-form-item label="视频名称" prop="redeemCode">
<el-input type="text" v-model="videoName" placeholder=""></el-input>
</el-form-item>
<el-form-ite>
<span style="margin-left:5px;color:#8c8c8c;">注:生成的视频可在视频记录中查看</span>
</el-form-ite>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="isShowMusicDialog = false">取 消</el-button>
<el-button type="primary" @click="generateVideoOkFn">确 定</el-button>
</span>
</el-dialog>
// dialog 标题小竖线
.el-dialog-header-box {
display: flex;
flex-direction: row;
.dialog-title-block {
background-color: #3399ff;
width: 4px;
height: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.dialog-title-text {
display: flex;
align-items: center;
margin-left: 5px;
}
}
// dialog 居中
.dialog-middle {
& > .el-dialog {
margin-top: 0 !important;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
}