证件管理样式

src/views/system/modules/AddCertificateManagement.vue

@@ -1,5 +1,7 @@
 <template>
+<div class="reply" ref = "replyModal">
   <a-modal
+   :getContainer ='()=>$refs.replyModal'
     :title="(defult == 'add')?'新增':'编辑'"
     width="55%"
     :closable="true"
@@ -7,49 +9,64 @@
     @ok="handleSubmit"
     :visible="visible"
   >
-    <a-spin :spinning="confirmLoading">
-      <a-form :model="formState"  >
-        <a-form-item label="证件名称" >
-          <a-input
-            placeholder="请输入"
-           v-model="formState.name"
-          />
-        </a-form-item>
-
-        <a-form-item label="证件所有人"  >
-          <a-input placeholder="请输入" v-model="formState.userId"/>
-        </a-form-item>
-
-        <a-form-item label="证件编号"  >
-          <a-input placeholder="请输入" v-model="formState.code"/>
-        </a-form-item>
-        <a-form-item label="起始日期"  >
-            <a-date-picker
-            style="width: 100%"
-            placeholder="请选择起始时间"
-            v-model="beDate"
-          />
-        </a-form-item>
-        <a-form-item label="到期时间"  >
-            <a-date-picker
-            style="width: 100%"
-            placeholder="请选择到期时间"
-            v-model="enDate"
-          />
-        </a-form-item>
-        <a-form-item label="管理人"  >
-          <a-input placeholder="请输入" v-model="formState.manageId"/>
-        </a-form-item>
-        <a-form-item label="提前通知时间/月"  >
-          <a-input placeholder="请输入" v-model="formState.noticeMonth"/>
-        </a-form-item>
-         <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume">
-          <a-input type="textarea" placeholder="请输入" v-model="formState.remarks"/>
-        </a-form-item>
-      </a-form>
-    </a-spin>
-
+      <div class="table-page-search-wrapper">
+        <a-form-model layout="inline" ref="form">
+          <a-row :gutter="24">
+            <a-col :md="8" :sm="8">
+              <a-form-item label="证件名称" >
+                <a-input   placeholder="请输入"  v-model="formState.name" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="8">
+              <a-form-item label="证件所有人"  >
+                <a-input placeholder="请输入" v-model="formState.userId"/>
+              </a-form-item>
+           </a-col>
+            <a-col :md="8" :sm="8">
+              <a-form-item label="证件编号"  >
+                 <a-input placeholder="请输入" v-model="formState.code"/>
+               </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="8">
+              <a-form-item label="起始日期"  >
+                <a-date-picker
+                 style="width: 100%"
+                 placeholder="请选择起始时间"
+                v-model="beDate"
+               />
+               </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="8">
+              <a-form-item label="到期时间"  >
+                <a-date-picker
+                 style="width: 100%"
+                  placeholder="请选择到期时间"
+                  v-model="enDate"
+                 />
+               </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="8">
+              <a-form-item label="管理人"  >
+                <a-input placeholder="请输入" v-model="formState.manageId"/>
+               </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="8">
+              <a-form-item label="提前通知时间/月"  >
+                <a-input placeholder="请输入" v-model="formState.noticeMonth"/>
+               </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24">
+              <a-col :md="24" :sm="8"> 
+               <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume" style="height:100px !important">
+                 <a-input type="textarea" placeholder="请输入" v-model="formState.remarks"/>
+               </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
   </a-modal>
+</div>
 </template>
 
 <script>
@@ -126,30 +143,30 @@ export default {
 </script>
 
 <style scoped lang="less">
-/deep/.ant-form{
-    display: flex;
-    width: 100%;
-    flex-wrap: wrap;
-    justify-content: start;
-}
+// /deep/.ant-form{
+//     display: flex;
+//     width: 100%;
+//     flex-wrap: wrap;
+//     justify-content: start;
+// }
 
-/deep/ .ant-form-item{
-    display: flex;
-    width: 32%;
-    justify-content: start;
-}
-/deep/ .ant-form-item-label{
-  width: 37%;
-}
-.nresume{
-  width: 100% !important;
-}
-/deep/ .nresume .ant-form-item-label{
-  width: 12% !important;
-}
-/deep/ .nresume .ant-form-item-control-wrapper{
-  width: 82% !important;
-}
+// /deep/ .ant-form-item{
+//     display: flex;
+//     width: 32%;
+//     justify-content: start;
+// }
+// /deep/ .ant-form-item-label{
+//   width: 37%;
+// }
+// .nresume{
+//   width: 100% !important;
+// }
+// /deep/ .nresume .ant-form-item-label{
+//   width: 12% !important;
+// }
+// /deep/ .nresume .ant-form-item-control-wrapper{
+//   width: 82% !important;
+// }
 /deep/ .nresume .ant-input{
   height: 100px !important;
 }