style:弹框组件

+<template>
+  <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
+    :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key" :show-close="false"
+    :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
+    id="dialogBox">
+    <div slot="title">
+
+    </div>
+    <div class="dialogBox-content" :style="{ minHeight: scrollerHeight ? scrollerHeight : 'auto' }">
+      <slot></slot>
+    </div>
+    <div slot="footer" class="dialog_footer" v-if="isButton">
+      <el-button @click="closeDialog" v-if="isReset">取消</el-button>
+      <el-button type="primary" plain @click="submitForm" v-if="isSave" :loading="saveloding">
+        {{ saveButton }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+    isMain: {
+      type: Boolean,
+      default: false
+    },
+    isButton: {
+      type: Boolean,
+      default: true,
+    },
+    width: {
+      type: String,
+      default: '70%',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    isFullscreen: {
+      type: Boolean,
+      default: true,
+    },
+    isSave: {
+      type: Boolean,
+      default: true,
+    },
+    saveButton: {
+      type: String,
+      default: '提交',
+    },
+    isReset: {
+      type: Boolean,
+      default: true,
+    },
+    saveloding: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+      key: 0,
+      dialogVisible: false,
+      fullscreen: false,
+      scrollerHeight: '520px',
+    }
+  },
+  watch: {
+    value (val) {
+      this.dialogVisible = val
+    }
+  },
+  methods: {
+    handleFullscreen (val) {
+      this.fullscreen = !this.fullscreen
+      let height = document.getElementById('dialogBox').clientHeight
+      if (!this.fullscreen) {
+        this.scrollerHeight = false
+      } else {
+        this.scrollerHeight = (window.innerHeight - 180) + 'px'
+      }
+    },
+    submitForm () {
+      this.$emit('submitForm');
+    },
+    closeDialog () {
+      this.key++
+      this.$emit('input', false)
+      this.$emit('closeDialog')
+    }
+  },
+}
+</script>
+<style rel="stylesheet/scss" scoped lang="scss" >
+@import "~@/styles/mixin.scss";
+@import "./dialogBox.scss";
+
+/deep/.el-dialog__header {
+  background-color: #409EFF;
+}
+</style>
\ No newline at end of file

@@ -16,13 +16,6 @@
         }
     }
 
-    .el-dialog__header {
-        height: 50px;
-        background: #FCFDFD;
-        border-radius: 4px 4px 0 0;
-        position: relative;
-    }
-
     .dialog_full {
         position: absolute;
         top: 0;
@@ -41,6 +34,37 @@
     }
 }
 
+.dialog_title {
+    @include flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.el-dialog__header {
+    margin-bottom: 10px;
+    color: #4A4A4A;
+}
+
+.borderBottom {
+    border-bottom: 1px solid #E4EBF4;
+}
+
+.el-dialog__body {
+    padding-top: 10px;
+    padding-bottom: 0;
+}
+
+.el-dialog__headerbtn .el-dialog__close {
+    color: #6B7A99 !important;
+    position: relative;
+    top: -2px;
+}
+
+
+.el-form-item {
+    @include flex;
+    width: 100%;
+}
 
 .el-dialog__wrapper {
     width: 100%;

 <template>
   <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
-    :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog"
+    :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key"
     :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
     id="dialogBox">
-    <div slot="title" class="dialog_title" ref="dialogTitle">
-      <b>{{ title }}</b>
-      <div v-if="isFullscreen" class="dialog_full">
-        <i class="el-icon-rank" v-if="fullscreen" @click="handleFullscreen"></i>
-        <i class="el-icon-full-screen" v-else @click="handleFullscreen" />
+    <div slot="title">
+      <div class="dialog_title">
+        <b>{{ title }}</b>
+        <div v-if="isFullscreen" class="dialog_full">
+          <i class="el-icon-rank" v-if="fullscreen" @click="handleFullscreen"></i>
+          <i class="el-icon-full-screen" v-else @click="handleFullscreen" />
+        </div>
       </div>
     </div>
-    <div class="dialogBox-content" :style="{ minHeight: scrollerHeight ? scrollerHeight : 'auto' }" :key="key">
+    <div class="dialogBox-content" :style="{ minHeight: scrollerHeight ? scrollerHeight : 'auto' }">
       <slot></slot>
     </div>
     <div slot="footer" class="dialog_footer" v-if="isButton">
@@ -74,6 +76,11 @@ export default {
       this.dialogVisible = val
     }
   },
+  mounted () {
+    var header = document.getElementsByClassName("el-dialog__header")[0].style
+    header.borderBottom = '1px solid #E4EBF4'
+    header.background = '#FCFDFD'
+  },
   methods: {
     handleFullscreen (val) {
       this.fullscreen = !this.fullscreen
@@ -90,7 +97,7 @@ export default {
     closeDialog () {
       this.key++
       this.$emit('input', false)
-      this.$emit('closeDialog');
+      this.$emit('closeDialog')
     }
   },
 }

-.dialog_title {
-  @include flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.el-dialog__header {
-  margin-bottom: 10px;
-  color: #4A4A4A;
-  border-bottom: 1px solid #E4EBF4;
-}
-
-.el-dialog__body {
-  padding-top: 10px;
-  padding-bottom: 0;
-}
-
-.el-dialog__headerbtn .el-dialog__close {
-  color: #6B7A99 !important;
-  position: relative;
-  top: -2px;
-}
-
-
-.el-form-item {
-  @include flex;
-  width: 100%;
-}
\ No newline at end of file

@@ -3,7 +3,6 @@
 @import './transition.scss';
 @import './element-ui.scss';
 @import './sidebar.scss';
-@import './dialog.scss';
 @import './btn.scss';
 
 /* CSS 初始化 */

+<template>
+  <cusDialogBox @closeDialog="closeDialog" width="80%" v-model="value">
+    <template #header>
+      <div class="header">
+        <ul class="header-left">
+          <li>
+            图形定位
+          </li>
+          <li>
+            登记薄
+          </li>
+          <li>
+            证书预览
+          </li>
+          <li>
+            流程图
+          </li>
+          <li>
+            材料导入
+          </li>
+          <li>
+            打印申请书
+          </li>
+        </ul>
+
+        <ul class="header-right">
+          <li>
+            登簿
+          </li>
+          <li>
+            退回
+          </li>
+          <li>
+            转出
+          </li>
+        </ul>
+      </div>
+
+    </template>
+  </cusDialogBox>
+</template>
+
+<script>
+import cusDialogBox from '@/components/DialogBox/cusDialogBox'
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  components: {
+    cusDialogBox
+  },
+  data () {
+    return {
+      applicationDialog: false,
+    }
+  },
+  methods: {
+    closeDialog () {
+      this.$emit('input', false)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "~@/styles/mixin.scss";
+
+.header {
+  @include flex;
+  justify-content: space-between;
+
+  ul {
+    @include flex;
+
+    li {
+      margin-right: 20px;
+    }
+  }
+}
+</style>

 <template>
-  <dialogBox title="查询权利信息" @submitForm="submitForm"  @closeDialog="closeDialog" v-model="value">
-    <div class="from-clues">
-      <!-- 表单部分 -->
-      <div class="from-clues-header">
-        <el-form :model="queryForm" ref="queryForm" label-width="100px">
-          <el-row>
-            <el-col :span="8">
-              <el-form-item label="权利类型">
-                <el-select
-                  v-model="queryForm.qllx"
-                  filterable
-                  clearable
-                  placeholder="请选择权利类型"
-                >
-                  <el-option
-                    v-for="item in qllxs"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="不动产单元号">
-                <el-input
-                  placeholder="请输入不动产单元号"
-                  v-model="queryForm.dyh"
-                  clearable
-                  class="width200px"
-                >
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="业务号">
-                <el-input
-                  placeholder="请输入业务号"
-                  v-model="queryForm.ywh"
-                  clearable
-                  class="width200px"
-                >
-                </el-input>
-              </el-form-item>
-            </el-col>
+  <div>
+    <dialogBox title="查询权利信息" @submitForm="submitForm" saveButton="发起申请" width="80%" @closeDialog="closeDialog"
+      v-model="value">
+      <div class="from-clues">
+        <!-- 表单部分 -->
+        <div class="from-clues-header">
+          <el-form :model="queryForm" ref="queryForm" label-width="100px">
+            <el-row>
+              <el-col :span="6">
+                <el-form-item label="权利类型">
+                  <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
+                    <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="不动产单元号">
+                  <el-input placeholder="请输入不动产单元号" v-model="queryForm.dyh" clearable class="width200px">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="业务号">
+                  <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
+                  </el-input>
+                </el-form-item>
+              </el-col>
             </el-row>
             <el-row>
-            <el-col :span="8">
-              <el-form-item label="不动产权证号">
-                <el-input
-                  placeholder="请输入不动产权证号"
-                  v-model="queryForm.cqzh"
-                  clearable
-                  class="width200px"
-                >
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="16" class="btnCol">
-              <el-form-item>
-                <el-button type="primary" @click="queryClick()">查询</el-button>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-      <!-- 表格 -->
-      <div class="from-clues-content">
-        <lb-table
-          :page-size="pageData.size"
-          :current-page.sync="pageData.current"
-          :total="pageData.total"
-          @selection-change="handleSelectionChange"
-          @size-change="handleSizeChange"
-          @p-current-change="handleCurrentChange"
-          :column="tableData.columns"
-          :data="tableData.data"
-        >
-        </lb-table>
+              <el-col :span="6">
+                <el-form-item label="不动产权证号">
+                  <el-input placeholder="请输入不动产权证号" v-model="queryForm.cqzh" clearable class="width200px">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="16" class="btnCol">
+                <el-form-item>
+                  <el-button type="primary" @click="queryClick()">查询</el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <!-- 表格 -->
+        <div class="from-clues-content">
+          <lb-table :page-size="pageData.size" heightNumSetting :current-page.sync="pageData.current"
+            :total="pageData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
+            :column="tableData.columns" :data="tableData.data">
+          </lb-table>
+        </div>
       </div>
-    </div>
-  </dialogBox>
+    </dialogBox>
+    <applicationDialog v-model="appliDialog" />
+  </div>
+
 </template>
 
 <script>
 import { datas } from "../ywsqdata.js";
+import applicationDialog from '../../components/applicationDialog.vue'
 export default {
   components: {
+    applicationDialog
   },
   props: {
     value: { type: Boolean, default: false },
   },
   data () {
     return {
+      appliDialog: false,
       queryForm: {
-        qllx:"",
-        dyh:"",
-        ywh:"",
-        cqzh:"",
+        qllx: "",
+        dyh: "",
+        ywh: "",
+        cqzh: "",
       },
-      qllxs:[],
+      qllxs: [],
       pageData: {
         current: 1,
         size: 10,
@@ -110,53 +86,30 @@ export default {
         columns: datas.columns(),
         data: [
           {
-            status:'已查封',
-            qllx:"国有建设用地使用权",
-            zddm:"610100008004GB00001",
-            bdcdyh:"610100008004GB00001W00000000",
-            qlxz:"出让",
-            zdmj:'22384.1700',
-            qlsdfs:'地表',
-            tdyt:"商业、住宅用地",
-            zl:"汉台区汉中路街道办事处汉中路居委会太白路北侧",
-          },
-          {
-            status:'已查封',
-            qllx:"国有建设用地使用权",
-            zddm:"610100008004GB00001",
-            bdcdyh:"610100008004GB00001W00000000",
-            qlxz:"出让",
-            zdmj:'22384.1700',
-            qlsdfs:'地表',
-            tdyt:"商业、住宅用地",
-            zl:"汉台区汉中路街道办事处汉中路居委会太白路北侧",
-          },
-          {
-            status:'已查封',
-            qllx:"国有建设用地使用权",
-            zddm:"610100008004GB00001",
-            bdcdyh:"610100008004GB00001W00000000",
-            qlxz:"出让",
-            zdmj:'22384.1700',
-            qlsdfs:'地表',
-            tdyt:"商业、住宅用地",
-            zl:"汉台区汉中路街道办事处汉中路居委会太白路北侧",
-          },
-        ],
-      },
+            status: '已查封',
+            qllx: "国有建设用地使用权",
+            zddm: "610100008004GB00001",
+            bdcdyh: "610100008004GB00001W00000000",
+            qlxz: "出让",
+            zdmj: '22384.1700',
+            qlsdfs: '地表',
+            tdyt: "商业、住宅用地",
+            zl: "汉台区汉中路街道办事处汉中路居委会太白路北侧",
+          }
+        ]
+      }
     }
   },
   methods: {
-  
     submitForm () {
       this.$emit('input', false)
+      this.appliDialog = true
     },
     closeDialog () {
       this.$emit('input', false)
     },
-    handleSelectionChange(){},
-    handleSizeChange(){},
-    handleCurrentChange(){},
+    handleSizeChange () { },
+    handleCurrentChange () { },
   }
 }
 </script>
@@ -168,9 +121,11 @@ export default {
   border-bottom: 1px solid $borderColor;
   margin-bottom: 10px;
 }
-/deep/.el-input{
+
+/deep/.el-input {
   width: 187px;
 }
+
 ul {
   @include flex;
   border-radius: 5px;