Ver código fonte

筛选弹窗样式修改

yunxing 4 anos atrás
pai
commit
139572d70b

+ 72 - 61
src/views/AssetDetail.vue

@@ -599,7 +599,7 @@ export default {
   .m-popup-container {
     width: 80%;
     height: 100%;
-    padding: 55px 20px 10px 20px;
+    padding: 10px 15px;
     .m-popup {
       width: 100%;
       height: calc(100% - 80px);
@@ -615,27 +615,30 @@ export default {
       .system {
         width: 100%;
         height: auto;
-        // 专业系统按钮
-        .system-btn-container {
-          display: flex;
-          width: 100%;
-          flex-wrap: wrap;
-          flex-flow: wrap;
-          .system-btn {
-            width: 50% !important;
-            min-width: 50% !important;
-            max-width: 50% !important;
-            height: 40px;
-            box-sizing: border-box;
-            padding: 10px 10px 10px 0;
-            .m-btn {
-              width: 100%;
-              height: 32px !important;
-              text-align: center;
-              background: #eff0f1;
-              border-radius: 2px;
+         .system-btn-container {
+            display: flex;
+            width: 100%;
+            flex-wrap: wrap;
+            flex-flow: wrap;
+             // 专业系统按钮
+            .system-btn {
+                width: calc(50% - 4px) !important;
+                min-width: calc(50% - 4px) !important;
+                max-width: calc(50% - 4px) !important;
+                height: 32px;
+                margin-bottom: 8px;
+                box-sizing: border-box;
+                .m-btn {
+                    width: 100%;
+                    height: 32px !important;
+                    text-align: center;
+                    background: #eff0f1;
+                    border-radius: 2px;
+                }
+            }
+            .system-btn:not(:nth-child(2n)) {
+                margin-right: 8px;
             }
-          }
         }
         .active {
           background-color: #025baa !important;
@@ -652,42 +655,46 @@ export default {
           height: 25px;
         }
         .system-btn-container {
-          display: flex;
-          width: 100%;
-          flex-wrap: wrap;
-          flex-flow: wrap;
-          .system-btn {
-            width: 33% !important;
-            min-width: 33% !important;
-            max-width: 33% !important;
-            height: 50px;
-            box-sizing: border-box;
-            padding: 5px 10px 5px 0;
-            .m-btn {
-              width: 100%;
-              height: 32px !important;
-              text-align: center;
-              background: #eff0f1;
-              border-radius: 2px;
-              padding: 0 !important;
+            display: flex;
+            width: 100%;
+            flex-wrap: wrap;
+            flex-flow: wrap;
+            .system-btn {
+                width: calc(33.333% - 5.34px) !important;
+                min-width: calc(33.333% - 5.34px) !important;
+                max-width: calc(33.333% - 5.34px) !important;
+                height: 32px;
+                margin-bottom: 8px;
+                box-sizing: border-box;
+                .m-btn {
+                    width: 100%;
+                    height: 32px !important;
+                    text-align: center;
+                    background: #eff0f1;
+                    border-radius: 2px;
+                    padding: 0 !important;
+                }
             }
-          }
-          .self-btn {
-            width: 100% !important;
-            min-width: 100% !important;
-            max-width: 100% !important;
-            height: 50px;
-            box-sizing: border-box;
-            padding: 5px 10px 5px 0;
-            .m-btn {
-              width: 100%;
-              height: 32px !important;
-              text-align: center;
-              background: #eff0f1;
-              border-radius: 2px;
-              padding: 0 !important;
+            .system-btn:not(:nth-child(3n)) {
+                margin-right: 8px;
+            }
+            .self-btn {
+                width: 100% !important;
+                min-width: 100% !important;
+                max-width: 100% !important;
+                height: 50px;
+                box-sizing: border-box;
+                padding: 0;
+                margin-right: 0;
+                .m-btn {
+                    width: 100%;
+                    height: 32px !important;
+                    text-align: center;
+                    background: #eff0f1;
+                    border-radius: 2px;
+                    padding: 0 !important;
+                }
             }
-          }
         }
         .active {
           background-color: #025baa !important;
@@ -707,19 +714,23 @@ export default {
         border-bottom: 1px solid #e6e6e6;
         margin: 20px 0;
       }
-      .footer {
+     .footer {
         position: absolute;
         bottom: 30px;
         right: 0;
         width: 100%;
         height: 35px;
         display: flex;
-        justify-content: space-around;
+        justify-content: space-between;
+        padding: 0 15px;
         .van-button {
-          width: 40%;
-          height: 100%;
-          max-width: 40%;
-          min-width: 40%;
+            width: calc(50% - 7px) !important;
+            min-width: calc(50% - 7px) !important;
+            max-width: calc(50% - 7px) !important;
+            height: 100%;
+        }
+        .van-button:first-child {
+            margin-right: 14px;
         }
       }
     }

+ 72 - 61
src/views/equipmentFacilities/MaintenanceRecordView.vue

@@ -560,7 +560,7 @@ export default {
   .m-popup-container {
     width: 80%;
     height: 100%;
-    padding: 55px 20px 10px 20px;
+    padding: 10px 15px;
     .m-popup {
       width: 100%;
       height: calc(100% - 80px);
@@ -576,27 +576,30 @@ export default {
       .system {
         width: 100%;
         height: auto;
-        // 专业系统按钮
-        .system-btn-container {
-          display: flex;
-          width: 100%;
-          flex-wrap: wrap;
-          flex-flow: wrap;
-          .system-btn {
-            width: 50% !important;
-            min-width: 50% !important;
-            max-width: 50% !important;
-            height: 40px;
-            box-sizing: border-box;
-            padding: 10px 10px 10px 0;
-            .m-btn {
-              width: 100%;
-              height: 32px !important;
-              text-align: center;
-              background: #eff0f1;
-              border-radius: 2px;
+         .system-btn-container {
+            display: flex;
+            width: 100%;
+            flex-wrap: wrap;
+            flex-flow: wrap;
+             // 专业系统按钮
+            .system-btn {
+                width: calc(50% - 4px) !important;
+                min-width: calc(50% - 4px) !important;
+                max-width: calc(50% - 4px) !important;
+                height: 32px;
+                margin-bottom: 8px;
+                box-sizing: border-box;
+                .m-btn {
+                    width: 100%;
+                    height: 32px !important;
+                    text-align: center;
+                    background: #eff0f1;
+                    border-radius: 2px;
+                }
+            }
+            .system-btn:not(:nth-child(2n)) {
+                margin-right: 8px;
             }
-          }
         }
         .active {
           background-color: #025baa !important;
@@ -613,42 +616,46 @@ export default {
           height: 25px;
         }
         .system-btn-container {
-          display: flex;
-          width: 100%;
-          flex-wrap: wrap;
-          flex-flow: wrap;
-          .system-btn {
-            width: 33% !important;
-            min-width: 33% !important;
-            max-width: 33% !important;
-            height: 50px;
-            box-sizing: border-box;
-            padding: 5px 10px 5px 0;
-            .m-btn {
-              width: 100%;
-              height: 32px !important;
-              text-align: center;
-              background: #eff0f1;
-              border-radius: 2px;
-              padding: 0 !important;
+            display: flex;
+            width: 100%;
+            flex-wrap: wrap;
+            flex-flow: wrap;
+            .system-btn {
+                width: calc(33.333% - 5.34px) !important;
+                min-width: calc(33.333% - 5.34px) !important;
+                max-width: calc(33.333% - 5.34px) !important;
+                height: 32px;
+                margin-bottom: 8px;
+                box-sizing: border-box;
+                .m-btn {
+                    width: 100%;
+                    height: 32px !important;
+                    text-align: center;
+                    background: #eff0f1;
+                    border-radius: 2px;
+                    padding: 0 !important;
+                }
             }
-          }
-          .self-btn {
-            width: 100% !important;
-            min-width: 100% !important;
-            max-width: 100% !important;
-            height: 50px;
-            box-sizing: border-box;
-            padding: 5px 10px 5px 0;
-            .m-btn {
-              width: 100%;
-              height: 32px !important;
-              text-align: center;
-              background: #eff0f1;
-              border-radius: 2px;
-              padding: 0 !important;
+            .system-btn:not(:nth-child(3n)) {
+                margin-right: 8px;
+            }
+            .self-btn {
+                width: 100% !important;
+                min-width: 100% !important;
+                max-width: 100% !important;
+                height: 50px;
+                box-sizing: border-box;
+                padding: 0;
+                margin-right: 0;
+                .m-btn {
+                    width: 100%;
+                    height: 32px !important;
+                    text-align: center;
+                    background: #eff0f1;
+                    border-radius: 2px;
+                    padding: 0 !important;
+                }
             }
-          }
         }
         .active {
           background-color: #025baa !important;
@@ -668,19 +675,23 @@ export default {
         border-bottom: 1px solid #e6e6e6;
         margin: 20px 0;
       }
-      .footer {
+       .footer {
         position: absolute;
         bottom: 30px;
         right: 0;
         width: 100%;
         height: 35px;
         display: flex;
-        justify-content: space-around;
+        justify-content: space-between;
+        padding: 0 15px;
         .van-button {
-          width: 40%;
-          height: 100%;
-          max-width: 40%;
-          min-width: 40%;
+            width: calc(50% - 7px) !important;
+            min-width: calc(50% - 7px) !important;
+            max-width: calc(50% - 7px) !important;
+            height: 100%;
+        }
+        .van-button:first-child {
+            margin-right: 14px;
         }
       }
     }