Browse Source

修复表单样式混乱

wangwei 3 years ago
parent
commit
336827ceea

+ 45 - 2
src/views/admin/group/popup.vue

@@ -1,5 +1,12 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" @ok="confirm" :title="title" :minHeight="500">
+  <BasicModal
+    width="800px"
+    v-bind="$attrs"
+    @register="register"
+    @ok="confirm"
+    :title="title"
+    :minHeight="500"
+  >
     <BasicForm @register="registerForm" :model="model" />
     <!-- <MenuTree /> -->
     <div class="tree-wrap">
@@ -188,7 +195,7 @@
   }
 
   .tree-label {
-    width: 20.6%;
+    width: 13.5%;
     margin-top: 8px;
     margin-bottom: 1em;
     text-align: center;
@@ -207,4 +214,40 @@
       text-align: center;
     }
   }
+  @media (max-width: 360px) {
+    .ant-form-item-label {
+      line-height: 2.5715 !important;
+      text-align: center !important;
+    }
+    .tree-label {
+      width: 40%;
+      margin-top: 8px;
+      margin-bottom: 1em;
+      text-align: center;
+    }
+    .ant-tree li .ant-tree-node-content-wrapper {
+      font-size: 13px;
+    }
+  }
+  @media (max-width: 340px) {
+    .ant-form-item-label {
+      line-height: 2.5715 !important;
+      text-align: center !important;
+    }
+    .tree-label {
+      width: 40%;
+      margin-top: 8px;
+      margin-bottom: 1em;
+      text-align: center;
+    }
+    .ant-tree li ul {
+      padding: 0 0 0 8px !important;
+    }
+    .ant-tree li .ant-tree-node-content-wrapper {
+      font-size: 12px;
+    }
+    .ant-tree li .ant-tree-node-content-wrapper {
+      padding: 0;
+    }
+  }
 </style>

+ 1 - 0
src/views/admin/logs/popup.vue

@@ -1,5 +1,6 @@
 <template>
   <BasicModal
+    width="800px"
     v-bind="$attrs"
     @register="register"
     :showOkBtn="false"

+ 1 - 1
src/views/admin/rule/popup.vue

@@ -1,5 +1,5 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" @ok="handleSubmit" :title="title">
+  <BasicModal width="800px" v-bind="$attrs" @register="register" @ok="handleSubmit" :title="title">
     <BasicForm @register="registerForm" :model="model" />
   </BasicModal>
 </template>

+ 4 - 4
src/views/general/config/index.vue

@@ -259,12 +259,12 @@
     },
   });
 </script>
-<style>
+<style scoped>
   .sys-container {
     position: relative;
   }
 
-  .vben-collapse-container__body > .mr-2 {
+  ::v-deep .vben-collapse-container__body > .mr-2 {
     margin-top: 5px;
     font-weight: 550 !important;
   }
@@ -282,11 +282,11 @@
     margin-top: 10px;
   }
 
-  .ant-form-item-children {
+  ::v-deep .ant-form-item-children {
     display: flex;
     justify-content: center;
   }
-  .upload-btn {
+  ::v-deep .upload-btn {
     bottom: 0 !important;
   }
 

+ 2 - 2
src/views/member/unit/index.vue

@@ -383,12 +383,12 @@
     margin-right: 5px;
   }
 
-  /deep/ table .rowClass {
+  ::v-deep table .rowClass {
     background: #dce7ae;
   }
 
   /* 鼠标悬停不变色 */
-  /deep/ table tbody .rowClass:hover > td {
+  ::v-deep table tbody .rowClass:hover > td {
     background-color: #dce7ae !important;
   }
 </style>

+ 2 - 3
src/views/money/bill/popup.vue

@@ -140,12 +140,11 @@
     },
   });
 </script>
-<style scoped>
+<style lang="less">
   .ant-form-item-label {
     overflow: hidden;
     text-align: center !important;
-
-    /* white-space: pre-wrap !important; */
+    // white-space: pre-wrap !important;
     text-overflow: ellipsis;
     white-space: nowrap;
   }