修改样式

src/pages/advice/DialysisAdviceTable.vue

@@ -615,7 +615,7 @@ export default {
   // @media only screen and (max-width: 812px) {
   //   padding-top: 70px !important;
   // }
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     padding-top: 60px !important;
   }
   // @media only screen and (min-width: 813px) and (max-width: 1024px) {

src/pages/layout/SideBar.vue

@@ -86,7 +86,7 @@ export default {
   // position: fixed;
   height: 50px;
   z-index: 999;
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     height: 70px;
   }
   .column {
@@ -115,7 +115,7 @@ export default {
       justify-content: space-around;
       height: 50px;
       padding: 0;
-      @media only screen and (min-width: 768px) {
+      @media only screen and (min-width: 500px) {
         height: 70px;
       }
       li {
@@ -128,7 +128,7 @@ export default {
           display: inline-block;
           padding: 0;
           margin: 0;
-          @media only screen and (min-width: 768px) {
+          @media only screen and (min-width: 500px) {
             display: flex;
             align-items: center;
             // margin-bottom: 20px;

src/pages/main/DetailsPage.vue

@@ -180,10 +180,6 @@ export default {
     right: 0;
     z-index: 100;
     background: #258ffc;
-    -webkit-transform: translateZ(1px);
-    -moz-transform: translateZ(1px);
-    -o-transform: translateZ(1px);
-    transform: translateZ(1px);
     @media only screen and (max-width: 320px) {
       display: -webkit-box;
     }
@@ -192,10 +188,10 @@ export default {
     }
     .nav {
       margin-right: 2.4rem;
-      @media only screen and (min-width: 416px) {
-        margin-right: 4rem;
+      @media only screen and (min-width: 376px) and (max-width: 415px) {
+        margin-right: 3.6rem;
       }
-      @media only screen and (min-width: 768px) {
+      @media only screen and (min-width: 500px) {
         margin-right: 4rem;
       }
       ul {
@@ -256,7 +252,7 @@ export default {
     //   width: 40px !important;
     //   margin: 11px auto 0;
     // }
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       width: 50px;
       margin: 17px auto 0;
     }

src/pages/main/DialysisArea.vue

@@ -519,7 +519,7 @@ export default {
   border-bottom: 1px #e5e5e5 solid;
   position: fixed;
   top: 100px;
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     top: 163px;
   }
   // @media only screen and (min-width: 813px) and (max-width: 1024px) {

src/pages/main/RecordPage.vue

@@ -336,7 +336,7 @@ export default {
     box-sizing: border-box;
     padding-bottom: 0.05rem;
     vertical-align: middle;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       padding-left: 0.9rem !important;
     }
   }
@@ -345,12 +345,12 @@ export default {
     font-size: 0.45rem;
     margin-top: 0.02rem;
     padding-left: 0.1rem;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       margin-top: 1px;
     }
   }
   .el-input__prefix {
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       left: 10px;
     }
   }

src/pages/main/WaitingArea.vue

@@ -663,7 +663,7 @@ export default {
   border-bottom: 1px #e5e5e5 solid;
   position: fixed;
   top: 100px;
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     top: 163px;
   }
   right: 0;

src/pages/main/add_urgent_schedule.vue

@@ -547,7 +547,7 @@ export default {
     min-height: calc(100vh - 2px);
     padding-top: 55px;
     // padding-left: 20px;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       padding-top: 100px;
     }
     .row {
@@ -633,7 +633,7 @@ export default {
   .el-input__inner {
     border-radius: 30px;
     font-size: 0.4rem;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       height: 1.2rem;
       line-height: 1.2rem;
       border-radius: 50px;
@@ -641,7 +641,7 @@ export default {
   }
   .el-input__icon {
     font-size: 0.45rem;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       margin-top: 2px;
       margin-right: 8px;
     }

src/pages/main/dialog/AcceptsDialog.vue

@@ -475,14 +475,14 @@ export default {
   .el-radio {
     margin-right: 14px;
     width: 2.2rem;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       margin-bottom: 0.34rem;
     }
   }
   .el-radio__inner {
     width: 16px !important;
     height: 16px !important;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       width: 26px !important;
       height: 26px !important;
       margin-bottom: 4px !important;
@@ -493,7 +493,7 @@ export default {
 .illnessInput {
   .el-input__inner {
     font-size: 0.45rem;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       height: 60px;
       line-height: 60px;
       font-size: 0.45rem;

src/pages/main/dialog/DoubleDialog.vue

@@ -554,7 +554,7 @@ export default {
 <style lang="scss">
 .doubleForm {
   .el-radio__inner {
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       width: 26px;
       height: 26px;
       margin-bottom: 4px;
@@ -563,7 +563,7 @@ export default {
 }
 
 .el-radio__input {
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     margin-top: -6px;
   }
 }

src/pages/main/dialog/MonitDialog.vue

@@ -1099,7 +1099,7 @@ export default {
         padding: 0.18rem 0;
         padding-left: 5px;
         width: 100%;
-        @media only screen and (min-width: 768px) {
+        @media only screen and (min-width: 500px) {
           height: 60px;
           line-height: 60px;
           font-size: 0.45rem;
@@ -1110,7 +1110,7 @@ export default {
           line-height: 38px;
           font-size: 0.45rem;
           padding: 0 !important;
-        @media only screen and (min-width: 768px) {
+        @media only screen and (min-width: 500px) {
           height: 60px;
           line-height: 60px;
           font-size: 0.45rem;

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

@@ -541,7 +541,7 @@ export default {
   @media only screen and (max-width: 415px) {
     height: 8.8rem !important;
   }
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     height: 7.8rem !important;
   }
 }
@@ -630,7 +630,7 @@ export default {
 }
 .typeInput {
   .el-input__inner {
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       height: 60px;
       line-height: 60px;
     }

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

@@ -326,7 +326,7 @@ export default {
         float: left;
         width: 8%;
         margin-top: 6px;
-        @media only screen and (min-width: 768px) {
+        @media only screen and (min-width: 500px) {
           margin-top: 10px;
         }
       }

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

@@ -194,7 +194,7 @@ export default {
     max-height: 16rem !important;
     min-height: 8rem !important;
   }
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     max-height: 11.8rem !important;
     min-height: 8rem !important;
   }

src/pages/main/dialysis/AdviceTable.vue

@@ -1474,7 +1474,7 @@
   // @media only screen and (min-width: 813px) and (max-width: 1024px) {
   //   padding-top: 54px !important;
   // }
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     padding-top: 82px !important;
   }
   // @media only screen and (min-width: 415px) and (max-width: 736px) {
@@ -1492,7 +1492,7 @@
       margin: 0 auto;
       font-size: 0.32rem;
       color: $pgh-color;
-      @media only screen and (min-width: 768px) {
+      @media only screen and (min-width: 500px) {
         width: 98%;
         font-size: 0.45rem;
       }

src/pages/main/dialysis/CheckTab.vue

@@ -10,7 +10,11 @@
         >{{item.project_name}}</li>
       </ul>-->
       <van-tabs v-model="active" @change="onClick">
-        <van-tab v-for="(item, i) in inspectionDate" :key="i" :title="item.project_name"></van-tab>
+        <van-tab
+          v-for="(item, i) in inspectionDate"
+          :key="i"
+          :title="item.project_name"
+        ></van-tab>
       </van-tabs>
       <!-- <van-tabs v-model="active" ref="one">
         <van-tab title="标签 1">内容 1</van-tab>
@@ -108,7 +112,7 @@ export default {
   // @media only screen and (max-width: 767px) {
   //   top: 76px !important;
   // }
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     top: 124px !important;
   }
   // @media only screen and (min-width: 813px) and (max-width: 1024px) {

src/pages/main/dialysis/DialysisTab.vue

@@ -64,7 +64,7 @@ export default {
   // @media only screen and (min-width: 376px) and (max-width: 737px) {
   //   padding-top: 46px;
   // }
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     padding-top: 82px;
   }
   // @media only screen and (min-width: 813px) and (max-width: 1024px) {
@@ -74,7 +74,7 @@ export default {
     border-bottom: 1px #e5e5e5 solid;
     position: fixed;
     top: 40px;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       top: 63px;
     }
     // @media only screen and (min-width: 813px) and (max-width: 1024px) {

src/pages/main/dialysis/InspectionItemTable.vue

@@ -331,7 +331,7 @@ export default {
   // @media only screen and (max-width: 812px) {
   //   margin-top: 80px !important;
   // }
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     margin-top: 140px !important;
   }
   // @media only screen and (min-width: 813px) and (max-width: 1023px) {

src/pages/main/dialysis/RecordTable.vue

@@ -535,7 +535,7 @@ export default {
     margin: 0 auto;
     font-size: 0.4rem;
     color: $pgh-color;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       width: 80%;
     }
     li {

src/pages/main/today/TodayTab.vue

@@ -1456,7 +1456,7 @@ import {parseTime} from '@/utils'
   padding: 0.1rem 0 0.25rem 0;
   margin: 0.2rem 0 0 0;
   background: #fff;
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     margin: 0.5rem 0 0 0;
     padding: 0.1rem 0 0.45rem 0;
   }
@@ -1504,7 +1504,7 @@ import {parseTime} from '@/utils'
   border: 1px solid #fff;
   top: -8px;
   right: -8px;
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
   height: 30px;
   width: 30px;
   line-height: 28px;

src/pages/main/today/detailsInfo.vue

@@ -220,7 +220,7 @@ export default {
             width: 0.8rem;
             margin-left: 4px;
           }
-          @media only screen and (min-width: 768px) {
+          @media only screen and (min-width: 500px) {
             width: 1rem;
             margin-left: 10px;
           }

src/pages/monitoring/index.vue

@@ -532,7 +532,7 @@ export default {
   /*@media only screen and (min-width: 813px) and (max-width: 1024px) {*/
   /*top: 38px !important;*/
   /*}*/
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     top: 80px !important;
   }
   ul {
@@ -568,7 +568,7 @@ export default {
 }
 .table {
   width: 1000px;
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     width: 1600px;
   }
 }
@@ -579,7 +579,7 @@ export default {
   @media only screen and (min-width: 376px) and (max-width: 737px) {
     padding-top: 80px !important;
   }
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     padding-top: 120px !important;
   }
 }
@@ -624,7 +624,7 @@ export default {
     border: none;
     font-size: 0.45rem;
     vertical-align: middle;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       padding-left: 0.9rem;
     }
   }
@@ -635,7 +635,7 @@ export default {
     padding-left: 0.1rem;
   }
   .el-input__prefix {
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       left: 10px;
     }
   }

src/pages/personal/ChangePassword.vue

@@ -71,7 +71,7 @@
           color: $main-color;
           font-size: 0.5rem;
           margin-top: 1px;
-          @media only screen and (min-width: 768px) {
+          @media only screen and (min-width: 500px) {
             margin-top: 3px;
           }
         }
@@ -119,7 +119,7 @@
   .changeButton {
     font-size: 0.4rem !important;
     border-radius: 5px;
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       height: 50px;
       line-height: 50px;
       border-radius: 5px;

src/pages/personal/ElectronicSignature.vue

@@ -412,7 +412,7 @@ export default {
         color: $main-color;
         font-size: 0.5rem;
         margin-top: 1px;
-        @media only screen and (min-width: 768px) {
+        @media only screen and (min-width: 500px) {
           margin-top: 3px;
         }
       }
@@ -483,7 +483,7 @@ export default {
   //   width: 100% !important;
   //   height: 400px !important;
   // }
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     width: 100% !important;
     height: 400px !important;
   }
@@ -502,7 +502,7 @@ export default {
 <style lang="scss">
 .newStyle {
   .el-button {
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 500px) {
       padding: 22px 42px;
       font-size: 0.45rem;
       // height: 0;

src/styles/media.scss

@@ -1,4 +1,4 @@
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 415px) {
   html {
     font-size: 30px;
   }
@@ -10,17 +10,17 @@
 // }
 
 /* Medium devices (landscape tablets, 768px and up) */
-// @media only screen and (min-width: 800px) {
-//   html {
-//     font-size: 50px;
-//   }
-// }
-
-@media screen and (orientation: portrait) and (max-width: 640px) {
-  // .mainBox {
-  //   -webkit-transform: rotate(-90deg);
-  //   -moz-transform: rotate(-90deg);
-  //   -ms-transform: rotate(-90deg);
-  //   transform: rotate(-90deg);
-  // }
+@media only screen and (min-width: 500px) {
+  html {
+    font-size: 50px;
+  }
 }
+
+// @media screen and (orientation: portrait) and (max-width: 640px) {
+// .mainBox {
+//   -webkit-transform: rotate(-90deg);
+//   -moz-transform: rotate(-90deg);
+//   -ms-transform: rotate(-90deg);
+//   transform: rotate(-90deg);
+// }
+// }

src/styles/style.scss

@@ -98,7 +98,7 @@ body {
         @media only screen and (min-width: 376px) and (max-width: 413px) {
           width: 4.2rem;
         }
-        @media only screen and (min-width: 768px) {
+        @media only screen and (min-width: 500px) {
           width: 6.6rem;
         }
         .content {
@@ -375,7 +375,7 @@ body {
     height: 0 !important;
     background-color: transparent !important;
   }
-  @media only screen and (min-width: 768px) and (max-width: 1024px) {
+  @media only screen and (min-width: 500px) and (max-width: 1024px) {
     width: 0 !important;
   }
   @media only screen and (min-width: 1024px) {
@@ -487,7 +487,7 @@ body {
       // @media only screen and (min-width: 737px) and (max-width: 768px) {
       //   height: 14.8rem !important;
       // }
-      @media only screen and (min-width: 768px) {
+      @media only screen and (min-width: 500px) {
         height: 11.8rem !important;
       }
       .item {
@@ -614,7 +614,7 @@ body {
   color: #fff;
   border-color: $main-color !important;
   background-color: $main-color !important;
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     font-size: 20px !important;
     line-height: 30px !important;
     width: 30px !important;
@@ -622,13 +622,13 @@ body {
   }
 }
 .van-checkbox__icon {
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     line-height: 30px !important;
     height: 30px !important;
   }
 }
 .van-checkbox__icon .van-icon {
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     font-size: 20px !important;
     line-height: 30px !important;
     width: 30px !important;
@@ -900,10 +900,10 @@ body {
   background: #fff;
   min-height: calc(100vh - 2px);
   padding-left: 0.45rem;
-  @media only screen and (min-width: 768px) {
+  @media only screen and (min-width: 500px) {
     padding-top: 232px;
   }
 }
-#app {
-  -webkit-overflow-scrolling: touch;
-}
+// #app {
+//   -webkit-overflow-scrolling: touch;
+// }