style；弹框样式

@@ -40,6 +40,15 @@ export default {
 </script>
 
 <style>
+.ace-jsoneditor .ace_gutter {
+  background-color: #08346F !important;
+  color: #FFFFFF !important;
+}
+
+.jsoneditor-menu {
+  background-color: #074487 !important;
+}
+
 /* jsoneditor右上角默认有一个链接,加css去掉了 */
 .jsoneditor-poweredBy {
   display: none;

 .itemForm {
-  margin-top: 5px;
   position: relative;
   padding: 10px;
 
@@ -26,27 +25,19 @@
     width: 100%;
   }
 
-  /deep/.el-form-item__label {
-    line-height: 16px;
-    font-size: 12px;
-    position: relative;
-  }
-
-  /deep/ .el-form-item__content {
-    display: flex;
-  }
-
   // table 样式
   /deep/.el-form-item__label {
-    border: 1px solid #DCDFE6;
     border-right: none;
-    background-color: #F2F6FC;
     text-align: center;
     padding: 0;
+    line-height: 16px;
+    font-size: 12px;
+    color: #CEF8FF;
+    margin-top: 8px !important;
   }
 
   /deep/.el-form-item__content {
-    border: 1px solid #DCDFE6;
+    display: flex;
     margin-right: -1px;
   }
 
@@ -54,11 +45,18 @@
   /deep/.el-textarea__inner {
     margin: 5px;
     width: 96%;
+    background: #05275B;
+    color: #FFFFFF;
+    border-radius: 2px;
+    border: 1px solid #6BC1FC;
   }
 
   /deep/.el-input__inner {
     margin: 5px;
     width: 96%;
+    background: #05275B;
+    border-radius: 2px;
+    border: 1px solid #6BC1FC;
   }
 
   /deep/.el-form-item {

 <template>
   <!-- 编辑 -->
   <el-dialog :close-on-click-modal="false" top="0" custom-class="dialogBox editDialogBox mainCenter"
-    :visible.sync="dialogVisible" width="80%">
+    :visible.sync="dialogVisible" width="85%">
     <div slot="title" class="dialog_title" ref="dialogTitle">
       <b>{{ title || '标题' }}</b>
     </div>
+    <el-tabs v-model="titleName" type="card" @tab-click="handleTitleTab">
+      <el-tab-pane label="数据模型" name="sjmx"></el-tab-pane>
+      <el-tab-pane label="xml报文" name="xml"></el-tab-pane>
+    </el-tabs>
+    <div v-if="titleName == 'sjmx'">
       <div class="dialog-from">
         <el-row>
           <el-col :span="6">
@@ -90,34 +95,36 @@
         </el-tab-pane>
       </el-tabs>
       <div class="edit-content">
-      <component :is="editItem" ref="editItem" :class="{ 'editForm': $store.state.business.Edit }" :bsmYwsjb="bsmYwsjb"
-        :bsmSjsb="dataReport.bsmReport" />
+        <component :is="editItem" ref="editItem" :class="{ 'editForm': $store.state.business.Edit }"
+          :bsmYwsjb="bsmYwsjb" :bsmSjsb="dataReport.bsmReport" />
+      </div>
     </div>
-    <div slot="footer" class="dialog_footer" ref="dialogFooter">
+    <JsonEditor v-else />
+    <!-- <div slot="footer" class="dialog_footer" ref="dialogFooter">
       <div class="dialog_button">
-        <!-- <el-button type="primary" plain @click="submitForm" v-if="!Edit" :loading="saveloding"
-          :disabled="JSON.stringify(this.$store.state.business.rules) === '{}'">确定
-        </el-button> -->
         <el-button type="primary" plain @click="submitForm" v-if="!Edit" :loading="saveloding">确定
         </el-button>
         <el-button @click="closeDialog()">关闭</el-button>
       </div>
-    </div>
+    </div> -->
   </el-dialog>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 import dataReporting from "@/api/dataReporting";
+import JsonEditor from "@/components/JsonEditor/index";
 import { getDetail } from "@/api/sbbwcx.js";
 import { MessageBox } from "element-ui";
 export default {
+  components: { JsonEditor },
   computed: {
     ...mapGetters(["dicData"]),
   },
-  props: {},
-  data() {
+  data () {
     return {
+      titleName: 'sjmx',
+
       dataReport: {},
       index: 0,
       bsmYwsjb: "",
@@ -150,7 +157,10 @@ export default {
     };
   },
   methods: {
-    isShow(item) {
+    handleTitleTab (val) {
+      console.log(val);
+    },
+    isShow (item) {
       this.dataReport = item;
       this.dialogVisible = true;
       //获取表头列表
@@ -160,7 +170,7 @@ export default {
         }
       });
     },
-    changeList(val) {
+    changeList (val) {
       let _index = val.index;
       if (_index > this.index) {
       }
@@ -173,14 +183,14 @@ export default {
         }
       });
     },
-    loadView(view) {
+    loadView (view) {
       return (r) =>
         require.ensure([], () => r(require(`@/components/business/${view}`)));
     },
-    closeDialog() {
+    closeDialog () {
       this.dialogVisible = false;
     },
-    submitForm() {
+    submitForm () {
       let _this = this;
       this.$store.dispatch(
         "business/setRules",
@@ -226,9 +236,9 @@ export default {
             }
           });
       });
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
 @import "~@/styles/mixin.scss";
@@ -253,22 +263,42 @@ export default {
   flex-direction: column;
 }
 
-// /deep/.el-tabs__item {
-//   background-color: #f2f6fc;
-// }
+/deep/ .el-tabs {
+  margin: 0 15px 0 15px;
+  color: #CEF8FF;
+}
+
+/deep/.el-tabs__item {
+  color: #CEF8FF !important;
+  height: 50px;
+  padding-top: 7px;
+  background: url("~@/image/tabitem.png") no-repeat;
+  background-size: 100% 100%;
+  border: none !important;
+}
+
+.obligee-item-name {
+  background: #05275B;
+  color: #FFFFFF;
+  border: 1px solid #6BC1FC;
+}
 
 /deep/.el-tabs__nav-scroll {
   background: none;
 }
 
+/deep/.el-tabs__nav {
+  border: none !important;
+}
+
 /deep/.el-tabs__item.is-top {
   border: 1px solid #dfe4ed;
   border-top: 1px solid #dfe4ed;
   border-bottom: 1px solid transparent;
 }
 
-/deep/.el-tabs__header .el-tabs__nav {
-  border-top: none;
+/deep/.el-tabs__header {
+  border: none;
 }
 
 /deep/.el-tabs__item.is-top:not(:last-child) {
@@ -276,7 +306,12 @@ export default {
 }
 
 /deep/.el-tabs__item.is-top {
-  background-color: #f2f6fc;
+  background-color: none !important;
+}
+
+/deep/.el-tabs__item.is-active {
+  background: url("~@/image/tabitemse.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .success-images {
@@ -296,51 +331,50 @@ export default {
 }
 
 .edit-content {
-  height: 380px;
+  height: 400px;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 1px;
-  border: 1px solid #ccc;
   margin-bottom: 10px;
   border-top: none;
 }
 
-.editDialogBox {
+/deep/.editDialogBox {
   border-radius: 8px;
   overflow: hidden;
   min-width: 1228px;
+  height: 825px !important;
 
   .dialog-from {
-    margin-bottom: 10px;
-    padding: 5px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
+    padding: 15px;
+    background: #08346F;
+    border-radius: 2px;
+    box-sizing: border-box;
+    margin: -3px 15px 15px 15px;
 
     .el-col {
       line-height: 24px;
       display: flex;
       align-items: center;
       margin-bottom: 3px;
+      color: #B5D6DC;
 
       span {
         display: inline-block;
         padding: 3px;
         border-radius: 3px;
         overflow: hidden;
-        min-width: 130px;
+        min-width: 140px;
         text-align: right;
-        background-color: #f2f6fc;
         margin-right: 5px;
+        color: #02D9FD;
       }
 
-      p {
-        white-space: nowrap;
+      div {
         flex: 1;
         width: 100%;
         padding-left: 5px;
-        border: 1px solid #f2f6fc;
-        height: 26px;
-        background-color: #f5f7fa;
+        line-height: 20px;
         color: #c0c4cc;
         cursor: not-allowed;
         margin-right: 5px;

 .dialogBox {
-  border-radius: 8px;
   overflow: hidden;
-  background: #FFFFFF;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10);
+  background: url("~@/image/dialogBg.png") no-repeat;
+  background-size: 100% 100%;
 
   .dialog_title {
     display: flex;
@@ -45,10 +44,12 @@
 }
 
 .el-dialog__header {
-  margin-bottom: 10px;
-  color: #4A4A4A;
-  background-color: #FCFDFD;
-  border-bottom: 1px solid #E4EBF4;
+  color: #FFFFFF;
+  // background: #074487;
+  height: 46px !important;
+  width: 97%;
+  margin: 0 auto;
+  margin-top: 2px;
 }
 
 .el-dialog__body {
@@ -57,9 +58,10 @@
 }
 
 .el-dialog__headerbtn .el-dialog__close {
-  color: #6B7A99 !important;
+  color: #FFFFFF !important;
   position: relative;
   top: -2px;
+  right: 15px
 }
 
 

@@ -12,6 +12,7 @@
 
 //input
 .el-input__inner {
+  color: #FFFFFF!important;
   padding: 0 7px !important;
 }
 
@@ -63,7 +64,7 @@
 // to fixed https://github.com/ElemeFE/element/issues/2461
 // refine element ui upload
 .el-input.is-disabled .el-input__inner {
-  color: #909399;
+  color: #FFFFFF !important;
 }
 
 .upload-container {

@@ -383,7 +383,7 @@ aside {
   width: 0;
   height: 8px;
   left: -10px;
-  top: 1px;
+  top: 2px;
   background: #00FAA8;
   color: #00FAA8;
 }
@@ -400,7 +400,7 @@ aside {
   width: 0;
   height: 8px;
   left: -10px;
-  top: 1px;
+  top: 2px;
   background: #FF7962;
   color: #FF7962;
 }
\ No newline at end of file

@@ -27,6 +27,7 @@ span:focus {
 }
 
 .process-design {
+
   .el-table td,
   .el-table th {
     color: #333;
@@ -37,26 +38,31 @@ span:focus {
     box-sizing: border-box;
     border-bottom: 1px solid #e8e8e8;
   }
+
   .el-dialog__body {
-    padding: 16px;
     max-height: 80vh;
     box-sizing: border-box;
     overflow-y: auto;
   }
+
   .el-dialog__footer {
     padding: 16px;
     box-sizing: border-box;
     border-top: 1px solid #e8e8e8;
   }
+
   .el-dialog__close {
     font-weight: 600;
   }
+
   .el-select {
     width: 100%;
   }
+
   .el-divider:not(.el-divider--horizontal) {
-    margin: 0 8px ;
+    margin: 0 8px;
   }
+
   .el-divider.el-divider--horizontal {
     margin: 16px 0;
   }