修改样式

src/pages/advice/DialysisAdviceTable.vue

@@ -618,6 +618,9 @@ export default {
   @media only screen and (min-width: 768px) {
     padding-top: 60px !important;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    padding-top: 46px;
+  }
   // @media only screen and (min-width: 813px) and (max-width: 1024px) {
   //   padding-top: 118px !important;
   // }

src/pages/main/DetailsPage.vue

@@ -191,8 +191,8 @@ export default {
       @media only screen and (min-width: 376px) and (max-width: 415px) {
         margin-right: 3.6rem;
       }
-      @media only screen and (min-width: 415px) and (max-width: 737px) {
-        margin-right: 6rem;
+      @media only screen and (min-width: 415px) and (max-width: 767px) {
+        margin-right: 4rem;
       }
       @media only screen and (min-width: 768px) {
         margin-right: 4rem;
@@ -243,9 +243,9 @@ export default {
   bottom: 2.25rem;
   font-size: 0.34rem;
   text-align: center;
-  @media only screen and (max-width: 767px) {
-    display: none;
-  }
+  // @media only screen and (max-width: 767px) {
+  //   display: none;
+  // }
   p {
     width: 30px;
     text-align: center;
@@ -259,6 +259,9 @@ export default {
       width: 50px;
       margin: 17px auto 0;
     }
+    @media only screen and (min-width: 415px) and (max-width: 767px) {
+      margin: 15px auto 0;
+    }
   }
 }
 </style>

src/pages/main/DialysisArea.vue

@@ -525,6 +525,9 @@ export default {
   @media only screen and (min-width: 768px) {
     top: 163px;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    top: 134px;
+  }
   // @media only screen and (min-width: 813px) and (max-width: 1024px) {
   //   top: 130px;
   // }

src/pages/main/WaitingArea.vue

@@ -666,6 +666,9 @@ export default {
   @media only screen and (min-width: 768px) {
     top: 163px;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    top: 134px;
+  }
   right: 0;
   z-index: 66;
   left: 0;

src/pages/main/dialog/MonitDialog.vue

@@ -1099,6 +1099,9 @@ export default {
         padding: 0.18rem 0;
         padding-left: 5px;
         width: 100%;
+        @media only screen and (min-width: 415px) and (max-width: 767px) {
+          padding: 9.4px 0;
+        }
         @media only screen and (min-width: 768px) {
           height: 60px;
           line-height: 60px;
@@ -1110,6 +1113,9 @@ export default {
           line-height: 38px;
           font-size: 0.45rem;
           padding: 0 !important;
+          @media only screen and (min-width: 415px) and (max-width: 767px) {
+          font-size: 0.4rem;
+        }
         @media only screen and (min-width: 768px) {
           height: 60px;
           line-height: 60px;

src/pages/main/dialog/OrdersDialog.vue

@@ -1403,7 +1403,7 @@
 .table {
   width: 1200px;
   @media only screen and (max-width: 767px) {
-      width: 800px;
+      width: 850px;
     }
   tr {
     th {

src/pages/main/dialog/new_order/AddNewOrders.vue

@@ -544,6 +544,9 @@ export default {
   @media only screen and (min-width: 768px) {
     height: 7.8rem !important;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    height: 11.8rem !important;
+  }
 }
 .backgroundColor {
   background: #fff;

src/pages/main/dialog/subMenu/checkBoxSubMenu.vue

@@ -139,8 +139,8 @@ export default {
   @media only screen and (max-width: 768px) {
     max-height: 11.8rem !important;
   }
-  @media only screen and (min-width: 415px) and (max-width: 737px) {
-    max-height: 12.8rem !important;
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    max-height: 13.8rem !important;
   }
   @media only screen and (min-width: 666px) and (max-width: 737px) {
     max-height: 8rem;
@@ -158,8 +158,8 @@ export default {
     @media only screen and (max-width: 768px) {
       max-height: 11.8rem !important;
     }
-    @media only screen and (min-width: 415px) and (max-width: 737px) {
-      max-height: 12.8rem !important;
+    @media only screen and (min-width: 415px) and (max-width: 767px) {
+      max-height: 13.8rem !important;
     }
     li {
       height: 1.2rem;

src/pages/main/dialysis/CheckTab.vue

@@ -106,9 +106,9 @@ export default {
   // @media only screen and (min-width: 376px) and (max-width: 668px) {
   //   top: 84px !important;
   // }
-  // @media only screen and (min-width: 415px) and (max-width: 736px) {
-  //   top: 88px !important;
-  // }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    top: 100px !important;
+  }
   // @media only screen and (max-width: 767px) {
   //   top: 76px !important;
   // }

src/pages/main/dialysis/DialysisTab.vue

@@ -61,9 +61,9 @@ export default {
   padding-top: 38px;
   // background: #fff;
   min-height: calc(100vh - 64px);
-  // @media only screen and (min-width: 376px) and (max-width: 737px) {
-  //   padding-top: 46px;
-  // }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    padding-top: 58px;
+  }
   @media only screen and (min-width: 768px) {
     padding-top: 82px;
   }
@@ -77,6 +77,9 @@ export default {
     @media only screen and (min-width: 768px) {
       top: 63px;
     }
+    @media only screen and (min-width: 415px) and (max-width: 767px) {
+      top: 52px;
+    }
     // @media only screen and (min-width: 813px) and (max-width: 1024px) {
     //   top: 64px;
     // }

src/pages/main/dialysis/InspectionItemTable.vue

@@ -325,9 +325,9 @@ export default {
   // @media only screen and (min-width: 376px) and (max-width: 668px) {
   //   margin-top: 84px;
   // }
-  // @media only screen and (min-width: 415px) and (max-width: 736px) {
-  //   margin-top: 84px !important;
-  // }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    margin-top: 102px !important;
+  }
   // @media only screen and (max-width: 812px) {
   //   margin-top: 80px !important;
   // }

src/pages/main/records/CaseHistory.vue

@@ -84,9 +84,9 @@ export default {
   // @media only screen and (min-width: 376px) and (max-width: 668px) {
   //   top: 50px !important;
   // }
-  // @media only screen and (min-width: 415px) and (max-width: 736px) {
-  //   top: 50px !important;
-  // }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    top: 52px !important;
+  }
   @media only screen and (min-width: 813px) and (max-width: 1024px) {
     top: 67px;
   }

src/pages/main/records/RecordsTab.vue

@@ -342,6 +342,9 @@ export default {
   @media only screen and (min-width: 737px) and (max-width: 768px) {
     padding-top: 100px;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    padding-top: 90px !important;
+  }
   .data {
     width: 11rem;
     margin: 0 auto;

src/pages/main/today/detailsInfo.vue

@@ -220,9 +220,9 @@ export default {
             width: 0.8rem;
             margin-left: 4px;
           }
-          @media only screen and (min-width: 415px) and (max-width: 737px) {
+          @media only screen and (min-width: 415px) and (max-width: 767px) {
             width: 0.8rem;
-            margin-left: 0.4rem;
+            margin-left: 0.25rem;
           }
           @media only screen and (min-width: 768px) {
             width: 1rem;

src/pages/monitoring/index.vue

@@ -535,6 +535,9 @@ export default {
   @media only screen and (min-width: 768px) {
     top: 80px !important;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    top: 64px;
+  }
   ul {
     @include display-flex;
     @include align-items-center;
@@ -571,14 +574,20 @@ export default {
   @media only screen and (min-width: 768px) {
     width: 1600px;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    width: 1200px;
+  }
 }
 .van-list {
-  padding-top: 76px;
+  padding-top: 74px;
   background: #fff;
   min-height: calc(100vh - 1px);
-  @media only screen and (min-width: 376px) and (max-width: 737px) {
+  @media only screen and (min-width: 376px) and (max-width: 414px) {
     padding-top: 80px !important;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    padding-top: 96px;
+  }
   @media only screen and (min-width: 768px) {
     padding-top: 120px !important;
   }

src/styles/media.scss

@@ -3,11 +3,11 @@
     font-size: 30px;
   }
 }
-// @media only screen and (min-width: 376px) and (max-width: 812px) {
-//   html {
-//     font-size: 36px;
-//   }
-// }
+@media only screen and (min-width: 415px) and (max-width: 767px) {
+  html {
+    font-size: 40px;
+  }
+}
 
 /* Medium devices (landscape tablets, 768px and up) */
 // @media only screen and (min-width: 800px) {

src/styles/style.scss

@@ -98,8 +98,9 @@ body {
         @media only screen and (min-width: 376px) and (max-width: 413px) {
           width: 4.2rem;
         }
-        @media only screen and (min-width: 415px) and (max-width: 737px) {
-          width: 7.6rem;
+        @media only screen and (min-width: 415px) and (max-width: 767px) {
+          width: 6rem;
+          font-size: 0.4rem;
         }
         @media only screen and (min-width: 768px) {
           width: 6.6rem;
@@ -485,7 +486,7 @@ body {
         height: 14.8rem !important;
       }
       @media only screen and (min-width: 415px) and (max-width: 737px) {
-        height: 13.8rem !important;
+        height: 14.8rem !important;
       }
       // @media only screen and (min-width: 666px) and (max-width: 737px) {
       //   height: 8.8rem !important;
@@ -576,6 +577,9 @@ body {
 // 表单样式
 .table {
   width: 1800px;
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    width: 2800px;
+  }
   overflow: auto;
   font-size: 0.45rem;
   text-align: center;
@@ -916,6 +920,9 @@ body {
   @media only screen and (min-width: 768px) {
     padding-top: 232px;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    padding-top: 186px;
+  }
 }
 #app {
   -webkit-overflow-scrolling: touch;