Beautify the Dialog component in Element UI

illustrate:

        The above is my beautification of the dialog component in element ui, mainly to modify the style. I won’t say anything else, just go to the code.

Code:

<template>
  <!--查询医院子组件(我是小木鱼)-->
  <div>
    <el-dialog width="760px" :visible.sync="dialogVisible" title="定点机构查询" :close-on-click-modal="false" class="class_dialog_hospital">
    ......略
    </el-dialog>
    <div>
</template>

<script>
export default {
  name: 'query_hospital',
  data () {
    return {
      dialogVisible: false, // 默认不显示
      qryHisCodeName: '', // 查询码或名
      tableData: [], // 表数据
      page_size: 8, // 每页显示条目个数
      page_sizes: [8, 20, 30, 40, 50, 100], // 每页显示个数选择器的选项设置
      current_page: 1, // 当前页
      total: 0, // 总记录数
      curRow: null
    }
  },
  methods: {
    // 显示本窗口
    show () {
      // 判读是否查询过数据
      if (this.total > 0) {
        this.dialogVisible = true
      } else {
        this.queryInit()
      }
    }
    ...略
</script>

<style>

  /*标题样式*/
  .class_dialog_hospital .el-dialog__title{
    font-size: 14px;
  }

  /*头区样式*/
  .class_dialog_hospital .el-dialog__header{
    height: 26px;
    background: #e6e6e6;
    padding: 4px 0 4px 10px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
  }

  /*头区退出按钮样式*/
  .class_dialog_hospital .el-dialog__headerbtn{
    top: 10px ;
    right: 10px;
    font-size: 16px;
  }

  /*对话框区*/
  .class_dialog_hospital .el-dialog{
    border: 1px solid #DCDFE6;
    box-shadow: 0 0 4px #e6e6e6;
    border-radius: 9px;
    padding: 0;
  }

  /*内容区*/
  .class_dialog_hospital .el-dialog__body {
    padding: 0;
  }

  /*脚区*/
  .class_dialog_hospital .el-dialog__footer {
    border-top: 2px solid #e8eaec;
    height: 54px;
    font-weight: bolder;
  }

</style>

Notice:

.class_dialog_hospital is the class name of this dialog component.

If you want the style to work, you must "sytle" and remove the scoped that comes with it by default.