弹窗优化

@@ -2,9 +2,12 @@
   <transition name="fade" mode="out-in" v-if="isShow">
     <div class="ls-mask" v-loading="loading">
       <div class="ls-mask-window" :style="{'width':width,'height':height}">
-        <div :style="{'text-align':titleStyle}"><b>{{title}}</b></div>
-        <i class="el-icon-close" @click="onCancel"></i>
-        <div class="ls-mask-content">
+        <div class="ls-head">
+          <div class="ls-title" :style="{'text-align':titleStyle}"><b>{{title}}</b></div>
+          <i class="el-icon-close" @click="onCancel"></i>
+        </div>
+       
+        <div class="ls-mask-content" ref='contentRef' :style="{'height': contentHeight + 'px'}">
           <component :is="editItem" ref='childRef' @loading='loadingFn' :formData='formData' />
         </div>
         <div class="ls-mask-footer">
@@ -30,10 +33,12 @@ export default {
       editItem: "",
       titleStyle: 'center',
       width: "75%",
-      height: "500px",
+      height: "auto",
       formData: "",//父组件传递的参数 负责传给子组件
+      contentHeight:"",
     }
   },
+  
   props: {
     loading: { type: Boolean, default: false },
   },
@@ -42,6 +47,12 @@ export default {
       this.editItem = this.loadViewFn(this.editItem)
     },
   },
+  mounted(){
+  //  计算滚动条高度
+   setTimeout(() => {
+    this.contentHeight = this.$refs.contentRef.offsetHeight
+   }, 1000);
+  },
   methods: {
     onCancel () {
       this.isShow = false
@@ -85,33 +96,42 @@ export default {
 }
 
 .ls-mask-window {
-  padding-top: 20px;
   background: white;
-  position: absolute;
+  position: relative;
   left: 50%;
   top: 50%;
+  min-height: 200px;
   transform: translate(-50%, -50%);
 }
-
+.ls-head{
+  position: relative;
+}
 .ls-mask-window b {
   padding-left: 12px;
 }
-
+.ls-title{
+  padding: 20px;
+  background: #1E9FFF;
+  color: #ffffff;
+}
 .ls-mask-content {
   padding: 20px;
   text-align: center;
+  position: absolute;
+  width: 100%;
+  overflow: scroll;
 }
 
 .ls-mask-footer {
-  height: 45px;
+  height: 65px;
   border-top: 1px solid #f0f0f0;
   display: flex;
-  justify-content: flex-end;
-  padding: 2px;
+  justify-content: center;
   position: absolute;
-  width: 98%;
-  bottom: 10px;
-  right: 12px;
+  width: 100%;
+  bottom: 0px;
+  right: 0px;
+  background: #202B3D;
 }
 
 /deep/.el-icon-close {
@@ -120,10 +140,14 @@ export default {
   right: 12px;
   font-size: 20px;
   cursor: pointer;
+  color: #ffffff;
 }
 
 /deep/.el-loading-mask {
   background: none;
 }
+/deep/.el-button{
+  margin: 15px 10px;
+}
 </style>
   
\ No newline at end of file