Преглед на файлове

筛选弹窗 样式修改

yunxing преди 4 години
родител
ревизия
bd3743f18f

+ 25 - 15
src/views/equipmentFacilities/ElectricWell.vue

@@ -454,7 +454,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);
@@ -477,12 +477,12 @@ export default {
                     flex-wrap: wrap;
                     flex-flow: wrap;
                     .system-btn {
-                        width: 33% !important;
-                        min-width: 33% !important;
-                        max-width: 33% !important;
-                        height: 40px;
+                        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;
-                        padding: 5px 10px 5px 0;
                         .m-btn {
                             width: 100%;
                             height: 32px !important;
@@ -491,6 +491,9 @@ export default {
                             border-radius: 2px;
                         }
                     }
+                    .system-btn:not(:nth-child(3n)) {
+                        margin-right: 8px;
+                    }
                 }
                 .active {
                     background-color: #025baa !important;
@@ -513,12 +516,12 @@ export default {
                     flex-wrap: wrap;
                     flex-flow: wrap;
                     .system-btn {
-                        width: 33% !important;
-                        min-width: 33% !important;
-                        max-width: 33% !important;
-                        height: 50px;
+                        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;
-                        padding: 5px 10px 5px 0;
                         .m-btn {
                             width: 100%;
                             height: 32px !important;
@@ -528,6 +531,9 @@ export default {
                             padding: 0 !important;
                         }
                     }
+                    .system-btn:not(:nth-child(3n)) {
+                        margin-right: 8px;
+                    }
                 }
                 .active {
                     background-color: #025baa !important;
@@ -554,12 +560,16 @@ export default {
                 width: 100%;
                 height: 35px;
                 display: flex;
-                justify-content: space-around;
+                justify-content: space-between;
+                padding: 0 15px;
                 .van-button {
-                    width: 40%;
+                    width: calc(50% - 7px) !important;
+                    min-width: calc(50% - 7px) !important;
+                    max-width: calc(50% - 7px) !important;
                     height: 100%;
-                    max-width: 40%;
-                    min-width: 40%;
+                }
+                .van-button:first-child {
+                    margin-right: 14px;
                 }
             }
         }

+ 17 - 10
src/views/equipmentFacilities/EngineRoomPicture.vue

@@ -384,7 +384,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);
@@ -407,12 +407,12 @@ export default {
                     flex-wrap: wrap;
                     flex-flow: wrap;
                     .system-btn {
-                        width: 50% !important;
-                        min-width: 50% !important;
-                        max-width: 50% !important;
-                        height: 40px;
+                        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;
-                        padding: 10px 10px 10px 0;
                         .m-btn {
                             width: 100%;
                             height: 32px !important;
@@ -421,6 +421,9 @@ export default {
                             border-radius: 2px;
                         }
                     }
+                    .system-btn:not(:nth-child(2n)) {
+                        margin-right: 8px;
+                    }
                 }
                 .active {
                     background-color: #025baa !important;
@@ -482,12 +485,16 @@ export default {
                 width: 100%;
                 height: 35px;
                 display: flex;
-                justify-content: space-around;
+                justify-content: space-between;
+                padding: 0 15px;
                 .van-button {
-                    width: 40%;
+                    width: calc(50% - 7px) !important;
+                    min-width: calc(50% - 7px) !important;
+                    max-width: calc(50% - 7px) !important;
                     height: 100%;
-                    max-width: 40%;
-                    min-width: 40%;
+                }
+                .van-button:first-child {
+                    margin-right: 14px;
                 }
             }
         }

+ 17 - 10
src/views/equipmentFacilities/EquipmentList.vue

@@ -513,7 +513,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);
@@ -536,12 +536,12 @@ export default {
                     flex-wrap: wrap;
                     flex-flow: wrap;
                     .system-btn {
-                        width: 50% !important;
-                        min-width: 50% !important;
-                        max-width: 50% !important;
-                        height: 40px;
+                        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;
-                        padding: 10px 10px 10px 0;
                         .m-btn {
                             width: 100%;
                             height: 32px !important;
@@ -550,6 +550,9 @@ export default {
                             border-radius: 2px;
                         }
                     }
+                    .system-btn:not(:nth-child(2n)) {
+                        margin-right: 8px;
+                    }
                 }
                 .active {
                     background-color: #025baa !important;
@@ -611,12 +614,16 @@ export default {
                 width: 100%;
                 height: 35px;
                 display: flex;
-                justify-content: space-around;
+                justify-content: space-between;
+                padding: 0 15px;
                 .van-button {
-                    width: 40%;
+                    width: calc(50% - 7px) !important;
+                    min-width: calc(50% - 7px) !important;
+                    max-width: calc(50% - 7px) !important;
                     height: 100%;
-                    max-width: 40%;
-                    min-width: 40%;
+                }
+                .van-button:first-child {
+                    margin-right: 14px;
                 }
             }
         }

+ 9 - 5
src/views/equipmentFacilities/LowVoltageCabinet.vue

@@ -460,7 +460,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);
@@ -565,12 +565,16 @@ export default {
                 width: 100%;
                 height: 35px;
                 display: flex;
-                justify-content: space-around;
+                justify-content: space-between;
+                padding: 0 15px;
                 .van-button {
-                    width: 40%;
+                    width: calc(50% - 7px) !important;
+                    min-width: calc(50% - 7px) !important;
+                    max-width: calc(50% - 7px) !important;
                     height: 100%;
-                    max-width: 40%;
-                    min-width: 40%;
+                }
+                .van-button:first-child {
+                    margin-right: 14px;
                 }
             }
         }

+ 56 - 45
src/views/equipmentFacilities/MainEquipment.vue

@@ -434,7 +434,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% - 81px);
@@ -452,25 +452,29 @@ export default {
         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;
+            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;
+                }
+            }
+            .system-btn:not(:nth-child(3n)) {
+                margin-right: 8px;
             }
-          }
         }
         .active {
           background-color: #025baa !important;
@@ -487,26 +491,29 @@ 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;
+                }
+            }
+            .system-btn:not(:nth-child(3n)) {
+                margin-right: 8px;
             }
-          }
         }
         .active {
           background-color: #025baa !important;
@@ -526,21 +533,25 @@ 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;
+        }
+    }
     }
   }
 }

+ 27 - 16
src/views/equipmentFacilities/MainEquipmentDetail.vue

@@ -487,7 +487,7 @@ export default {
     .m-popup-container {
         width: 80%;
         height: 100%;
-        padding: 35px 20px 10px 20px;
+        padding: 10px 15px;
         .m-popup {
             width: 100%;
             height: calc(100% - 80px);
@@ -510,12 +510,13 @@ export default {
                     flex-wrap: wrap;
                     flex-flow: wrap;
                     .system-btn {
-                        width: 33% !important;
-                        min-width: 33% !important;
-                        max-width: 33% !important;
-                        height: 40px;
+                        width: calc(33.3333% - 5.34px) !important;
+                        min-width: calc(33.3333% - 5.34px) !important;
+                        max-width: calc(33.3333% - 5.34px) !important;
+                        height: 32px;
+                        margin-bottom: 8px;
                         box-sizing: border-box;
-                        padding: 5px 10px 5px 0;
+                        // padding: 5px 10px 5px 0;
                         .m-btn {
                             width: 100%;
                             height: 32px !important;
@@ -524,6 +525,9 @@ export default {
                             border-radius: 2px;
                         }
                     }
+                    .system-btn:not(:nth-child(3n)) {
+                        margin-right: 8px;
+                    }
                 }
                 .active {
                     background-color: #025baa !important;
@@ -546,21 +550,24 @@ export default {
                     flex-wrap: wrap;
                     flex-flow: wrap;
                     .system-btn {
-                        width: 33% !important;
-                        min-width: 33% !important;
-                        max-width: 33% !important;
-                        height: 50px;
+                        width: calc(33.3333% - 5.34px) !important;
+                        min-width: calc(33.3333% - 5.34px) !important;
+                        max-width: calc(33.3333% - 5.34px) !important;
+                        height: 32px;
+                        margin-bottom: 8px;
                         box-sizing: border-box;
-                        padding: 5px 10px 5px 0;
+                        // 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;
+                    }
                 }
                 .active {
                     background-color: #025baa !important;
@@ -587,12 +594,16 @@ export default {
                 width: 100%;
                 height: 35px;
                 display: flex;
-                justify-content: space-around;
+                justify-content: space-between;
+                padding: 0 15px;
                 .van-button {
-                    width: 40%;
+                    width: calc(50% - 7px) !important;
+                    min-width: calc(50% - 7px) !important;
+                    max-width: calc(50% - 7px) !important;
                     height: 100%;
-                    max-width: 40%;
-                    min-width: 40%;
+                }
+                .van-button:first-child {
+                    margin-right: 14px;
                 }
             }
         }