Element diaolog 居中，标题小竖线

效果图

代码

<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%;
  }
}