修改样式问题

src/pages/advice/AdvicePage.vue

   float: right;
   background-color: #ff7978;
   border: none;
+  @media only screen and (max-width: 812px) {
+  min-width: 60px !important;
+  }
 }
 </style>
 

src/pages/main/DetailsPage.vue

   .Tab {
     padding-top: 63px;
     // padding-bottom: 0.25rem;
+    @media only screen and (max-width: 812px) {
+    padding-top: 42px !important;
+    }
   }
 }
 </style>

src/pages/main/DialysisArea.vue

 .mint-datetime-action {
   line-height: 60px;
   font-size: 0.34rem;
+  @media only screen and (max-width: 812px) {
+    line-height: 30px !important;
+  }
 }
 </style>
 

src/pages/main/add_urgent_schedule.vue

           <van-col :span="9">
             <span class="title">患者：</span>
             <div class="field_panel">
-                <van-field ref="patient_field" @focus="selectPatientAction" :value="patient_name" class="field"
-                           left-icon="arrow-down"></van-field>
+              <van-field ref="patient_field" @focus="selectPatientAction" :value="patient_name" class="field"
+                         left-icon="arrow-down"></van-field>
             </div>
           </van-col>
 
   font-size: 18px;
   line-height: 45px;
   width: 180px;
+  @media only screen and (max-width: 812px) {
+  width: 100px;
+  }
   }
   }
 

src/pages/main/dialysis/MissionTable.vue

         v-model="endTime">
       </mt-datetime-picker>
 
-     
+
     </div>
 </template>
 
       @include text-align;
       @include justify-content-between;
     padding: 0.3rem 0;
-      
+
       .iconfont {
         margin: 0 0.1rem;
+        @media only screen and (max-width: 812px) {
+        font-size: 12px !important;
+        }
       }
       .line{
         background: #a8b3ba;

src/pages/main/dialysis/RecordTable.vue

                 <div class="popover-demo-content">
                   <ul>
                     <li  v-for="item in modeOptions" :key="item.id" @click="itemClick(item.id)"   :class="mode_id == item.id ? 'tick' : ''">{{item.name}}</li>
-                  </ul> 
+                  </ul>
                 </div>
               </el-popover>
 
       :endDate="new Date()"
       v-model="endTime">
     </mt-datetime-picker>
-  
+
   </div>
 </template>
 
       padding: 0.3rem 0;
       .iconfont {
         margin: 0 0.1rem;
+  @media only screen and (max-width: 812px) {
+  font-size: 12px !important;
+  }
       }
       .line {
         background: #a8b3ba;
   }
 }
 .RecordTable{
-  padding-top:0; 
+  padding-top:0;
   background: #fff;
   min-height: calc(100vh - 180px);
 }

src/pages/monitoring/index.vue

   .iconfont {
     font-size: 0.4rem;
     color: #a8b3ba;
+  @media only screen and (max-width: 812px) {
+  margin-right: 0 !important;
+  }
   }
 }
 .choice {

src/styles/style.scss

   color: #fff;
   border-color: $main-color !important;
   background-color: $main-color !important;
+   @media only screen and (max-width: 812px) {
+      font-size: 14px !important;
+      line-height: 16px !important;
+      width: 16px !important;
+      height: 16px !important;
+    }
+}
+
+.van-checkbox__icon .van-icon {
+  @media only screen and (max-width: 812px) {
+    font-size: 14px !important;
+    line-height: 16px !important;
+    width: 16px !important;
+    height: 16px !important;
+  }
 }
 
 .CheckBox .van-checkbox__label {
   width: 94%;
   font-size: 0.34rem;
+   @media only screen and (max-width: 812px) {
+      width: 90%;
+    }
 }
 
 .mint-datetime-action {
   color: $pgh-color!important;
   height: 64px!important;
   line-height: 64px!important;
+   @media only screen and (max-width: 812px) {
+      font-size: 0.35rem !important;
+      color: $pgh-color !important;
+      height: 48px !important;
+      line-height: 48px !important;
+    }
 }
 .el-collapse-item__arrow{
   color: #a8b3ba!important;
   line-height: 64px!important;
+    @media only screen and (max-width: 812px) {
+      line-height: 48px !important;
+    }
 }
 
 
   width: 4.2rem;
   float: right;
   font-size: 0.34rem;
+   .field {
+      @media only screen and (max-width: 812px) {
+        margin-top: 6px;
+      }
+    }
   .iconfont {
     color: #a8b3ba;
     font-size: 0.42rem;
     align-items: center;
     height: 0.64rem!important;
     line-height: 0.64rem!important;
+    @media only screen and (max-width: 812px) {
+      padding: 0 0 0 4px;
+    }
+  }
+}
 
+.van-cell {
+  @media only screen and (max-width: 812px) {
+    font-size: 6px !important;
+  }
+}
+.van-field__left-icon {
+  @media only screen and (max-width: 812px) {
+    // margin-right: 0 !important;
+    margin-top: 1px;
+  }
+  .van-icon-arrow-down {
+    @media only screen and (max-width: 812px) {
+      font-size: 12px !important;
+    }
+  }
+}
+.van-field__button {
+  @media only screen and (max-width: 812px) {
+    padding-left: 0 !important;
+  }
+}
+.van-switch {
+  @media only screen and (max-width: 812px) {
+    font-size: 16px !important;
   }
 }
 
+
 // 返回
 .goBack {
   cursor: pointer;
 
 .van-button--small{
   font-size: 0.28rem!important;
+  @media only screen and (max-width: 812px) {
+      min-width: 36px !important;
+    }
 }
 
 .el-input{