Browse Source

弹窗表格适配

yx 4 years ago
parent
commit
c4f2c4b4ee
1 changed files with 77 additions and 53 deletions
  1. 77 53
      src/views/equipment/table/eqDetaileDialog.vue

+ 77 - 53
src/views/equipment/table/eqDetaileDialog.vue

@@ -392,7 +392,7 @@ export default {
     .gdqd-top {
         .gdqd-dialog-bottom {
             overflow: auto;
-            max-height: 20vh;
+            max-height: 17.6vh;
             margin-top: 20px;
         }
     }
@@ -407,11 +407,87 @@ export default {
             padding-left: 20px;
         }
     }
+    // 底部表格
+    .table-bottom {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        // tab 样式
+        .title {
+            display: flex;
+            height: 70px;
+            line-height: 30px;
+            align-items: center;
+            padding: 15px 0;
+            // 维修维保文本
+            .text {
+                width: 50px;
+            }
+            .text-r {
+                margin-left: 100px;
+            }
+            // tab页签
+            .d-tab {
+                padding: 5px 16px;
+                height: 30px;
+                line-height: 22px;
+                font-size: 14px;
+                font-family: MicrosoftYaHei;
+                font-weight: 500;
+                color: #1f2429;
+                text-align: center;
+                border: 1px solid #c3c7cb;
+                cursor: pointer;
+            }
+            .d-tab-left {
+                border-radius: 4px 0 0 4px;
+            }
+            .d-tab-right {
+                border-radius: 0 4px 4px 0;
+            }
+            // 当前选中页签
+            .active {
+                color: #025baa !important;
+                border-color: #025baa !important;
+            }
+        }
+        //筛选+表格
+        .table2-container {
+            width: 100%;
+            flex: 1;
+            position: relative;
+        }
+    }
 }
 @media screen and (max-width: 1600px) {
     .gdqd-dialog td {
         padding: 4px 0;
     }
+    .gdqd-dialog-bottom {
+        max-height: 20vh !important;
+    }
+}
+@media screen and (max-width: 1366px) {
+    .gdqd-dialog {
+        /deep/ .el-table td {
+            padding: 1px 0 !important;
+        }
+        .gdqd-dialog-bottom {
+            max-height: 20vh !important;
+            margin-top: 10px !important;
+        }
+
+        .table-bottom {
+            .title {
+                height: 60px !important;
+            }
+        }
+        // 顶部表格的分页位置修改
+        /deep/ .rcwb-list .foot {
+            margin-top: 10px !important;
+        }
+    }
 }
 </style>
 <style lang="less">
@@ -485,57 +561,5 @@ export default {
             background-color: transparent !important;
         }
     }
-    // 底部表格
-    .table-bottom {
-        width: 100%;
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        // tab 样式
-        .title {
-            display: flex;
-            height: 70px;
-            line-height: 30px;
-            align-items: center;
-            padding: 15px 0;
-            // 维修维保文本
-            .text {
-                width: 50px;
-            }
-            .text-r {
-                margin-left: 100px;
-            }
-            // tab页签
-            .d-tab {
-                padding: 5px 16px;
-                height: 30px;
-                line-height: 22px;
-                font-size: 14px;
-                font-family: MicrosoftYaHei;
-                font-weight: 500;
-                color: #1f2429;
-                text-align: center;
-                border: 1px solid #c3c7cb;
-                cursor: pointer;
-            }
-            .d-tab-left {
-                border-radius: 4px 0 0 4px;
-            }
-            .d-tab-right {
-                border-radius: 0 4px 4px 0;
-            }
-            // 当前选中页签
-            .active {
-                color: #025baa !important;
-                border-color: #025baa !important;
-            }
-        }
-        //筛选+表格
-        .table2-container {
-            width: 100%;
-            flex: 1;
-            position: relative;
-        }
-    }
 }
 </style>