修改样式1

src/pages/advice/AdvicePage.vue

           <span class="title"></span>
         </div>
       </van-col>
-      <van-col :span="8">
+      <van-col :span="14">
         <div class="department">
           <ul>
-            <li v-for="(item,i) in ['透析临嘱','普通医嘱']" :key="i" :class="index == i? 'active':'' " @click="ClickTab(i)" >{{item}}</li>
+            <li
+              v-for="(item,i) in ['透析临嘱','普通医嘱']"
+              :key="i"
+              :class="index == i? 'active':'' "
+              @click="ClickTab(i)"
+            >{{item}}</li>
           </ul>
         </div>
       </van-col>
 
-
-      <van-col :span="5">
-        <router-link to="/add_urgent_schedule">
-        </router-link>
+      <van-col :span="4">
+        <router-link to="/add_urgent_schedule"></router-link>
         <div class="search" style="visibility: hidden">
           <van-field v-model="search_input" ref="search_field" placeholder="透析号/姓名" class="field">
             <i class="iconfont" slot="left-icon">&#xe741;</i>
-            <van-button slot="button" size="small" type="info" style="border: none;" @click="searchWithKeyword">搜索</van-button>
+            <van-button
+              slot="button"
+              size="small"
+              type="info"
+              style="border: none;"
+              @click="searchWithKeyword"
+            >搜索</van-button>
           </van-field>
         </div>
       </van-col>
     </van-row>
 
-
     <div class="area">
-      <DialysisAdviceTable v-show="index==0"> </DialysisAdviceTable>
+      <DialysisAdviceTable v-show="index==0"></DialysisAdviceTable>
       <NormalAdviceTable v-show="index==1"></NormalAdviceTable>
     </div>
-
   </div>
 </template>
 
       line-height: 0.64rem;
       padding: 0 0.3rem;
       color: $title-color;
+
       &.active {
         background: $main-color;
         color: #fff;
   background-color: #ff7978;
   border: none;
   @media only screen and (max-width: 812px) {
-  min-width: 60px !important;
+    min-width: 60px !important;
   }
 }
 </style>

src/pages/advice/DialysisAdviceTable.vue

   <div class="mainBox">
     <div class="choice">
       <ul>
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          v-model="show_patient_type_selector"
-        >
+        <el-popover placement="bottom" trigger="click" v-model="show_patient_type_selector">
           <li slot="reference">
             {{ patient_types[patient_selected].text
-            }}<span class="iconfont">&#xe74a;</span>
+            }}
+            <span class="iconfont">&#xe74a;</span>
           </li>
           <div class="popover-demo-content">
             <ul>
                 :key="type.value"
                 @click="handlePaitentType(type.value)"
                 :class="advice_type_selected == type.value ? 'tick' : ''"
-              >
-                {{ type.text }}
-              </li>
+              >{{ type.text }}</li>
             </ul>
           </div>
         </el-popover>
 
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          v-model="show_zone_selector"
-        >
+        <el-popover placement="bottom" trigger="click" v-model="show_zone_selector">
           <li slot="reference">
             {{ zones[zone_selected].text
-            }}<span class="iconfont">&#xe74a;</span>
+            }}
+            <span class="iconfont">&#xe74a;</span>
           </li>
           <div class="popover-demo-content">
             <ul>
                 :key="zone.value"
                 @click="handleZoneChange(index)"
                 :class="zone_selected == index ? 'tick' : ''"
-              >
-                {{ zone.text }}
-              </li>
+              >{{ zone.text }}</li>
             </ul>
           </div>
         </el-popover>
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          v-model="show_sch_type_selector"
-        >
+        <el-popover placement="bottom" trigger="click" v-model="show_sch_type_selector">
           <li slot="reference">
             {{ schedule_types[schedule_type_selected].text
-            }}<span class="iconfont">&#xe74a;</span>
+            }}
+            <span
+              class="iconfont"
+            >&#xe74a;</span>
           </li>
           <div class="popover-demo-content">
             <ul>
                 :class="
                   schedule_type_selected == scheduleType.value ? 'tick' : ''
                 "
-              >
-                {{ scheduleType.text }}
-              </li>
+              >{{ scheduleType.text }}</li>
             </ul>
           </div>
         </el-popover>
       </ul>
     </div>
 
-    <div
-      style="width:100%;overflow:hildden;overflow-x:auto;"
-      class="DialysisAdvice"
-    >
+    <div style="width:100%;overflow:hildden;overflow-x:auto;" class="DialysisAdvice">
       <div class="blueBorder"></div>
       <table class="table">
         <tr>
           </tr>
           <template v-for="schedule in schedules">
             <template v-for="(group, group_index) in schedule.new_advice">
-              <tr
-                v-for="(advice, advice_index) in group.advices"
-                @click="clickfunction(schedule)"
-              >
+              <tr v-for="(advice, advice_index) in group.advices" @click="clickfunction(schedule)">
                 <!--<td  v-if="advice_index == 0"-->
                 <!--:rowspan="group.advices.length">{{ advice.parent_id == 0 ? schedule.device_number.number : "" }}</td>-->
 
                   v-if="advice_index == 0"
                   :rowspan="group.advices.length"
                   style="color:#409eff;"
-                >
-                  {{ advice.parent_id == 0 ? schedule.patient.name : "" }}
-                </td>
+                >{{ advice.parent_id == 0 ? schedule.patient.name : "" }}</td>
                 <td v-if="advice_index == 0" :rowspan="group.advices.length">
                   {{
-                    advice.parent_id == 0 ? schedule.patient.dialysis_no : ""
+                  advice.parent_id == 0 ? schedule.patient.dialysis_no : ""
                   }}
                 </td>
-                <td v-if="advice_index == 0" :rowspan="group.advices.length">
-                  {{ getAdaviceType(advice.advice_type, advice.parent_id) }}
-                </td>
+                <td
+                  v-if="advice_index == 0"
+                  :rowspan="group.advices.length"
+                >{{ getAdaviceType(advice.advice_type, advice.parent_id) }}</td>
                 <td v-if="advice_index == 0" :rowspan="group.advices.length">
                   {{
-                    advice.parent_id == 0
-                      ? parseTime(advice.start_time, "{m}-{d} {h}:{i}")
-                      : ""
+                  advice.parent_id == 0
+                  ? parseTime(advice.start_time, "{m}-{d} {h}:{i}")
+                  : ""
                   }}
                 </td>
                 <td
                   "
                 >
                   <span>{{ advice.advice_name }}</span>
-                  <span
-                    >{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span
-                  >
-                  <span v-if="advice.prescribing_number"
-                    >{{ advice.prescribing_number
-                    }}{{ advice.prescribing_number_unit }}</span
-                  >
+                  <span>{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span>
+                  <span v-if="advice.prescribing_number">
+                    {{ advice.prescribing_number
+                    }}{{ advice.prescribing_number_unit }}
+                  </span>
                   <span v-if="advice.single_dose">
                     单次用量 {{ advice.single_dose
-                    }}{{ advice.single_dose_unit }}</span
-                  >
+                    }}{{ advice.single_dose_unit }}
+                  </span>
                   <span>{{ advice.delivery_way }}</span>
                   <span>{{ advice.execution_frequency }}</span>
-                  <span v-if="advice.parent_id == 0 && advice.remark.length > 0"
-                    >({{ advice.remark }})</span
-                  >
-                </td>
-                <td>
-                  {{ parseTime(advice.execution_time, "{m}-{d} {h}:{i}") }}
+                  <span
+                    v-if="advice.parent_id == 0 && advice.remark.length > 0"
+                  >({{ advice.remark }})</span>
                 </td>
+                <td>{{ parseTime(advice.execution_time, "{m}-{d} {h}:{i}") }}</td>
                 <td>{{ getName(advice.execution_staff) }}</td>
                 <td>{{ getName(advice.checker) }}</td>
                 <td>{{ parseTime(advice.check_time, "{m}-{d} {h}:{i}") }}</td>
       </table>
 
       <div class="NoData" v-show="zones.length <= 1">
-        <img
-          style="margin-top: 50px; margin-bottom: 50px"
-          src="@/assets/login/data.jpg"
-          alt=""
-        />
+        <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
       </div>
     </div>
 
       month-format="{value} "
       date-format="{value} "
       @confirm="requestSchedualDoctors"
-    >
-    </mt-datetime-picker>
+    ></mt-datetime-picker>
   </div>
 </template>
 
   top: 63px;
   right: 0;
   z-index: 66;
-  left: 1.58rem;
+  left: 0;
   background: #fff;
-  @media only screen and (max-width: 812px) {
-    top: 43px !important;
+  @media only screen and (max-width: 415px) {
+    top: 39px !important;
+  }
+  @media only screen and (min-width: 376px) and (max-width: 737px) {
+    top: 45px !important;
   }
   ul {
     @include display-flex;
     @include align-items-center;
     @include text-align;
     @include justify-content-between;
-    width: 70%;
+    width: 80%;
     margin: 0 auto;
     font-size: 0.32rem;
     color: $pgh-color;
   @media only screen and (max-width: 812px) {
     padding-top: 80px !important;
   }
+  @media only screen and (min-width: 768px) and (max-width: 1024px) {
+    padding-top: 118px !important;
+  }
 }
 
 .advice_content {

src/pages/advice/NormalAdviceTable.vue

   <div class="mainBox">
     <div class="choice">
       <ul>
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          v-model="show_patient_type_selector"
-        >
+        <el-popover placement="bottom" trigger="click" v-model="show_patient_type_selector">
           <li slot="reference">
             {{ patient_types[patient_selected].text
-            }}<span class="iconfont">&#xe74a;</span>
+            }}
+            <span class="iconfont">&#xe74a;</span>
           </li>
           <div class="popover-demo-content">
             <ul>
                 :key="type.value"
                 @click="handlePaitentType(type.value)"
                 :class="advice_type_selected == type.value ? 'tick' : ''"
-              >
-                {{ type.text }}
-              </li>
+              >{{ type.text }}</li>
             </ul>
           </div>
         </el-popover>
 
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          v-model="show_zone_selector"
-        >
+        <el-popover placement="bottom" trigger="click" v-model="show_zone_selector">
           <li slot="reference">
             {{ zones[zone_selected].text
-            }}<span class="iconfont">&#xe74a;</span>
+            }}
+            <span class="iconfont">&#xe74a;</span>
           </li>
           <div class="popover-demo-content">
             <ul>
                 :key="zone.value"
                 @click="handleZoneChange(index)"
                 :class="zone_selected == index ? 'tick' : ''"
-              >
-                {{ zone.text }}
-              </li>
+              >{{ zone.text }}</li>
             </ul>
           </div>
         </el-popover>
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          v-model="show_sch_type_selector"
-        >
+        <el-popover placement="bottom" trigger="click" v-model="show_sch_type_selector">
           <li slot="reference">
             {{ schedule_types[schedule_type_selected].text
-            }}<span class="iconfont">&#xe74a;</span>
+            }}
+            <span
+              class="iconfont"
+            >&#xe74a;</span>
           </li>
           <div class="popover-demo-content">
             <ul>
                 :class="
                   schedule_type_selected == scheduleType.value ? 'tick' : ''
                 "
-              >
-                {{ scheduleType.text }}
-              </li>
+              >{{ scheduleType.text }}</li>
             </ul>
           </div>
         </el-popover>
       </ul>
     </div>
 
-    <div
-      style="width:100%;overflow:hildden;overflow-x:auto;"
-      class="NormalAdvice"
-    >
+    <div style="width:100%;overflow:hildden;overflow-x:auto;" class="NormalAdvice">
       <div class="blueBorder"></div>
       <table class="table">
         <tr>
               <!--<td>{{ advice.parent_id == 0 && advice.dialysis_order&&advice.dialysis_order.device_number&& advice.dialysis_order.device_number.number.length > 0 ? advice.dialysis_order.device_number.number : schedule.device_number.number }}</td>-->
               <!--<td>{{getNumber(advice)}}</td>-->
               <td>{{ advice.parent_id == 0 ? schedule.patient.name : "" }}</td>
-              <td>
-                {{ advice.parent_id == 0 ? schedule.patient.dialysis_no : "" }}
-              </td>
-              <td>
-                {{ getAdaviceType(advice.advice_type, advice.parent_id) }}
-              </td>
+              <td>{{ advice.parent_id == 0 ? schedule.patient.dialysis_no : "" }}</td>
+              <td>{{ getAdaviceType(advice.advice_type, advice.parent_id) }}</td>
               <td>
                 {{
-                  advice.parent_id == 0
-                    ? parseTime(advice.start_time, "{m}-{d} {h}:{i}")
-                    : ""
+                advice.parent_id == 0
+                ? parseTime(advice.start_time, "{m}-{d} {h}:{i}")
+                : ""
                 }}
               </td>
               <td>
                 <span>{{ advice.advice_name }}</span>
                 <span>{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span>
 
-                <span v-if="advice.prescribing_number"
-                  >{{ advice.prescribing_number
-                  }}{{ advice.prescribing_number_unit }}</span
-                >
+                <span v-if="advice.prescribing_number">
+                  {{ advice.prescribing_number
+                  }}{{ advice.prescribing_number_unit }}
+                </span>
                 <span v-if="advice.single_dose">
                   单次用量 {{ advice.single_dose
-                  }}{{ advice.single_dose_unit }}</span
-                >
+                  }}{{ advice.single_dose_unit }}
+                </span>
                 <span>{{ advice.delivery_way }}</span>
                 <span>{{ advice.execution_frequency }}</span>
               </td>
               <td>
                 {{
-                  advice.parent_id == 0
-                    ? parseTime(advice.execution_time, "{m}-{d} {h}:{i}")
-                    : ""
+                advice.parent_id == 0
+                ? parseTime(advice.execution_time, "{m}-{d} {h}:{i}")
+                : ""
                 }}
               </td>
               <td>
                 {{
-                  advice.parent_id == 0 ? getName(advice.execution_staff) : ""
+                advice.parent_id == 0 ? getName(advice.execution_staff) : ""
                 }}
               </td>
-              <td>
-                {{ advice.parent_id == 0 ? getName(advice.checker) : "" }}
-              </td>
+              <td>{{ advice.parent_id == 0 ? getName(advice.checker) : "" }}</td>
               <td>
                 {{
-                  advice.parent_id == 0
-                    ? parseTime(advice.check_time, "{m}-{d} {h}:{i}")
-                    : ""
+                advice.parent_id == 0
+                ? parseTime(advice.check_time, "{m}-{d} {h}:{i}")
+                : ""
                 }}
               </td>
-              <td>
-                {{ advice.parent_id == 0 ? getName(advice.advice_doctor) : "" }}
-              </td>
+              <td>{{ advice.parent_id == 0 ? getName(advice.advice_doctor) : "" }}</td>
               <td>
                 {{
-                  advice.parent_id == 0
-                    ? parseTime(advice.created_time, "{m}-{d} {h}:{i}")
-                    : ""
+                advice.parent_id == 0
+                ? parseTime(advice.created_time, "{m}-{d} {h}:{i}")
+                : ""
                 }}
               </td>
             </tr>
       </table>
 
       <div class="NoData" v-show="zones.length <= 1">
-        <img
-          style="margin-top: 50px; margin-bottom: 50px"
-          src="@/assets/login/data.jpg"
-          alt=""
-        />
+        <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
       </div>
     </div>
     <!--<div class="NoData" v-show="zones.length <= 1"><img src="@/assets/login/data.jpg" alt=""></div>-->
       month-format="{value} "
       date-format="{value} "
       @confirm="requestSchedualDoctors"
-    >
-    </mt-datetime-picker>
+    ></mt-datetime-picker>
   </div>
 </template>
 
   top: 63px;
   right: 0;
   z-index: 66;
-  left: 1.58rem;
+  left: 0;
   background: #fff;
-  @media only screen and (max-width: 812px) {
-    top: 43px !important;
+  @media only screen and (max-width: 376px) {
+    top: 39px !important;
+  }
+  @media only screen and (min-width: 376px) and (max-width: 737px) {
+    top: 45px !important;
   }
   ul {
     @include display-flex;
     @include align-items-center;
     @include text-align;
     @include justify-content-between;
-    width: 70%;
+    width: 80%;
     margin: 0 auto;
     font-size: 0.32rem;
     color: $pgh-color;
   @media only screen and (max-width: 812px) {
     padding-top: 80px !important;
   }
+  @media only screen and (min-width: 768px) and (max-width: 1024px) {
+    padding-top: 115px !important;
+  }
 }
 </style>

src/pages/advice/index.vue

 <template>
   <div class="mainBox">
-    <side-bar :active_index="2"></side-bar>
     <div class="mainContent">
       <AdvicePage></AdvicePage>
     </div>
+    <side-bar :active_index="2"></side-bar>
   </div>
 </template>
 
   height: 100%;
 }
 .mainBox {
+  overflow: hidden;
   height: 100%;
   font-size: 0.3rem;
+  display: flex;
+  flex-direction: column;
+  > :first-child {
+    flex: 1;
+    overflow: auto;
+  }
   .sideColumn {
     .column {
       .head {
   }
 }
 .mainContent {
-  margin: 0 0 0 1.58rem;
+  // margin: 0 0 0 1.58rem;
 }
 </style>

src/pages/layout/SideBar.vue

 <template>
-    <div class="sideColumn">
-      <div class="column">
-        <div class="head"><img :src="$store.getters.user.org.org_logo" alt=""></div>
-        <ul class="sidebar">
-            <li style="position: relative;" :class="active_index == 0 ? 'active' : ''">
-                <router-link to="/main"> <span class="iconfont">&#xe6e6;</span><p>记录</p></router-link>
-              <span class="redpoint" v-if="total_read_dot">{{total_read_dot > 99?total_read_dot+'+':total_read_dot}}</span>
-            </li>
-             <li :class="active_index == 1 ? 'active' : ''">
-                <router-link to="/monitoring"><span class="iconfont">&#xe6f5;</span><p>监控</p></router-link>
-            </li>
-             <li :class="active_index == 2 ? 'active' : ''">
-                <router-link to="/advice"><span class="iconfont">&#xe6f4;</span><p>医嘱</p></router-link>
-            </li>
-             <li :class="active_index == 3 ? 'active' : ''">
-                <router-link to="/my"><span class="iconfont">&#xe715;</span><p>我的</p></router-link>
-            </li>
-        </ul>
-       </div>
+  <div class="sideColumn">
+    <div class="column">
+      <!-- <div class="head"><img :src="$store.getters.user.org.org_logo" alt=""></div> -->
+      <ul class="sidebar">
+        <li style="position: relative;" :class="active_index == 0 ? 'active' : ''">
+          <router-link to="/main">
+            <span class="iconfont">&#xe6e6;</span>
+            <p>记录</p>
+          </router-link>
+          <span
+            class="redpoint"
+            v-if="total_read_dot"
+          >{{total_read_dot > 99?total_read_dot+'+':total_read_dot}}</span>
+        </li>
+        <li :class="active_index == 1 ? 'active' : ''">
+          <router-link to="/monitoring">
+            <span class="iconfont">&#xe6f5;</span>
+            <p>监控</p>
+          </router-link>
+        </li>
+        <li :class="active_index == 2 ? 'active' : ''">
+          <router-link to="/advice">
+            <span class="iconfont">&#xe6f4;</span>
+            <p>医嘱</p>
+          </router-link>
+        </li>
+        <li :class="active_index == 3 ? 'active' : ''">
+          <router-link to="/my">
+            <span class="iconfont">&#xe715;</span>
+            <p>我的</p>
+          </router-link>
+        </li>
+      </ul>
     </div>
+  </div>
 </template>
 
 <script>
       type: Number,
       default: 0
     },
-    total_read_dot:{
+    total_read_dot: {
       type: Number,
       default: 0
     }
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-  .redpoint{
-  display:inline-block;
-  height:20px;
-  width:20px;
-  line-height:20px;
-  text-align:center;
-  font-size:0.74em;
-  border-radius:20px;
-  color:#fff;
-  background:#F56C6C;
+.redpoint {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  text-align: center;
+  font-size: 0.74em;
+  border-radius: 20px;
+  color: #fff;
+  background: #f56c6c;
   position: absolute;
   top: -5px;
   right: -15px;
-  }
+}
 .sideColumn {
-  float: left;
-  width: 1.58rem;
+  // float: left;
+  // width: 1.58rem;
   background: #f5f8fb;
-  height: 100%;
-  border-right: 1px  solid rgba(193, 193, 193, 0.8);
-  position: fixed;
+  // height: 100%;
+  // border-right: 1px solid rgba(193, 193, 193, 0.8);
+  border-top: 1px solid rgba(193, 193, 193, 0.8);
+  // position: fixed;
+  height: 50px;
   z-index: 999;
   .column {
     .head {
       @include justify-content-center;
       margin: 0.5rem auto 0.7rem auto;
       width: 1rem;
-        height: 1rem;
-        overflow: hidden;
-        border-radius: 50%;
+      height: 1rem;
+      overflow: hidden;
+      border-radius: 50%;
       img {
         width: 100%;
         height: auto;
     .sidebar {
       @include display-flex;
       @include align-items-center;
-      @include flex-direction;
+      // @include flex-direction;
       @include text-align;
+      flex-direction: row;
+      justify-content: space-around;
+      height: 50px;
+
       padding: 0;
       li {
-        padding: 0 0 0.8rem 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        // padding: 0 0 0.8rem 0;
         a {
           color: #a8b3ba;
           display: inline-block;
           padding: 0;
           margin: 0;
+          @media only screen and (min-width: 768px) {
+            display: flex;
+          }
           p {
             font-size: 0.32rem;
             margin-top: 0.05rem;

src/pages/main/DetailsPage.vue

 <template>
-    <div class="mainBox">
-        <side-bar :active_index="0"></side-bar>
-        <div class="mainContent">
-            <div class="navigation">
-                <div class="goBack">
-                    <span class="back" @click="backAction()"><span class="iconfont">&#xe720;</span>返回</span>
-                    <el-popover
-                      placement="bottom"
-                      trigger="click" :disabled="true">
-                      <li slot="reference" class="name">{{ patient_name }}</li>
-                    </el-popover>
-                </div>
-                <div class="nav">
-                  <ul>
-                     <li v-for="(item,i) in ['病历','透析','今日']" :key="i" :class="index == i? 'active':'' " @click="ClickTab(i)" >{{item}}</li>
-                  </ul>
-                </div>
+  <div class="mainBox">
+    <div class="mainContent">
+      <div class="navigation">
+        <div class="goBack">
+          <span class="back" @click="backAction()">
+            <span class="iconfont">&#xe720;</span>返回
+          </span>
+          <el-popover placement="bottom" trigger="click" :disabled="true">
+            <li slot="reference" class="name">{{ patient_name }}</li>
+          </el-popover>
+        </div>
+        <div class="nav">
+          <ul>
+            <li
+              v-for="(item,i) in ['病历','透析','今日']"
+              :key="i"
+              :class="index == i? 'active':'' "
+              @click="ClickTab(i)"
+            >{{item}}</li>
+          </ul>
+        </div>
 
-                <!-- <div @click="openPicker()" class="time">
+        <!-- <div @click="openPicker()" class="time">
                   {{pickerVisible}}<span class="iconfont">&#xe74a;</span>
-                </div> -->
-                <!-- <div class="time" style="width:1.49rem;">
+        </div>-->
+        <!-- <div class="time" style="width:1.49rem;">
                   <span class="iconfont">2018-01-01&#xe74a;</span>
-                </div> -->
-
-              <div class="print" style="float: right;">
-                <el-button size="mini" type="primary" @click="print" icon="el-icon-printer">打印</el-button>
-              </div>
-
-            </div>
-            <div class="Tab">
-              <CaseHistory v-show="index==0" title="病历"></CaseHistory>
-              <!--<check-tab v-show="index==1" title="化验单"></check-tab>-->
-              <dialysis-tab v-show="index==1" title="透析" v-on:records="jump(val)"></dialysis-tab>
-              <today-tab ref="today" v-show="index==2" title="今日" ></today-tab>
-            </div>
-
+        </div>-->
 
+        <div class="print" style="float: right; visibility: hidden;">
+          <el-button size="mini" type="primary" @click="print" icon="el-icon-printer">打印</el-button>
         </div>
-         <!-- <mt-datetime-picker
+      </div>
+      <div class="Tab">
+        <CaseHistory v-show="index==0" title="病历"></CaseHistory>
+        <!--<check-tab v-show="index==1" title="化验单"></check-tab>-->
+        <dialysis-tab v-show="index==1" title="透析" v-on:records="jump(val)"></dialysis-tab>
+        <today-tab ref="today" v-show="index==2" title="今日"></today-tab>
+      </div>
+    </div>
+    <div class="add" @click="print">
+      <p>打印预览</p>
+    </div>
+    <side-bar :active_index="0"></side-bar>
+    <!-- <mt-datetime-picker
             v-model="pickerVisible"
             type="date"
             ref="picker"
             year-format="{value} "
             month-format="{value} "
             date-format="{value} ">
-        </mt-datetime-picker> -->
-    </div>
+    </mt-datetime-picker>-->
+  </div>
 </template>
 
 <script>
 import RecordsTab from "./records/RecordsTab";
 import { Popover } from "vux";
 import CheckTab from "./dialysis/CheckTab";
-import {parseTime} from "@/utils"
-import {GetPatientInfoWithDiseases} from "@/api/patient";
-import { Toast } from 'vant';
+import { parseTime } from "@/utils";
+import { GetPatientInfoWithDiseases } from "@/api/patient";
+import { Toast } from "vant";
 import CaseHistory from "./records/CaseHistory";
 
 export default {
     TodayTab,
     DialysisTab,
     RecordsTab,
-    Popover,
+    Popover
   },
   data() {
     return {
       patient_name: "",
       date: 0,
       index: 2,
-      patient: null,
+      patient: null
     };
   },
   created() {
     },
     openPicker() {
       this.$refs.picker.open();
-    },print:function () {
-      var xtdate = parseTime(this.date, "{y}-{m}-{d}")
-      if(this.patient != null){
-        this.$router.push('/Print?xtdate='+xtdate+'&xtno='+this.patient.dialysis_no);
+    },
+    print: function() {
+      var xtdate = parseTime(this.date, "{y}-{m}-{d}");
+      if (this.patient != null) {
+        this.$router.push(
+          "/Print?xtdate=" + xtdate + "&xtno=" + this.patient.dialysis_no
+        );
       }
-    },GetPatientInfoWithDiseases(id) {
-      GetPatientInfoWithDiseases(id).then(response=>{
-        if (response.data.state==1) {
-          this.patient = response.data.data.patient;
-        }else {
+    },
+    GetPatientInfoWithDiseases(id) {
+      GetPatientInfoWithDiseases(id)
+        .then(response => {
+          if (response.data.state == 1) {
+            this.patient = response.data.data.patient;
+          } else {
+            Toast.fail("网络异常");
+            return false;
+          }
+        })
+        .catch(() => {
+          // on cancel
           Toast.fail("网络异常");
           return false;
-        }
-      }).catch(() => {
-        // on cancel
-        Toast.fail("网络异常");
-        return false;
-      });
-    },jump:function (val) {
-      this.index = 2
-
+        });
+    },
+    jump: function(val) {
+      this.index = 2;
     }
   }
 };
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
+.mainBox {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-x: hidden;
+  > :first-child {
+    flex: 1;
+    overflow-x: hidden;
+  }
+}
 .mainContent {
   position: relative;
   .navigation {
     @include box-sizing;
     @include justify-content-between;
     padding: 0.3rem 0.36rem;
-    border-bottom: 1px #e5e5e5 solid;
+    // border-bottom: 1px #e5e5e5 solid;
     position: fixed;
     top: 0;
-    left:1.58rem;
+    left: 0;
     right: 0;
     z-index: 100;
-    background: #fff;
-
+    background: #258ffc;
+    .name {
+      color: #fff;
+    }
     .nav {
       ul {
         li {
           line-height: 0.64rem;
           padding: 0 0.3rem;
           cursor: pointer;
+          color: #fff;
           &.active {
-            background: $main-color;
-            color: #fff;
+            // background: $main-color;
+            background: #fff;
+            color: #258ffc;
+            // color: #fff;
             border-radius: 30px;
           }
         }
     padding-top: 63px;
     // padding-bottom: 0.25rem;
     @media only screen and (max-width: 812px) {
-    padding-top: 42px !important;
+      padding-top: 42px !important;
+    }
+  }
+}
+.add {
+  width: 1.5rem;
+  height: 1.5rem;
+  background: #f18f68;
+  // box-shadow: 0px 3px 9px 0px rgba(7, 30, 102, 0.15);
+  border-radius: 50%;
+  position: fixed;
+  right: 0.6rem;
+  bottom: 2.25rem;
+  font-size: 0.4rem;
+  text-align: center;
+  z-index: 99;
+  p {
+    width: 30px;
+    text-align: center;
+    margin: 8px auto 0;
+    color: #fff;
+    @media only screen and (min-width: 768px) {
+      width: 40px !important;
+      margin: 11px auto 0;
     }
   }
 }

src/pages/main/DialysisArea.vue

     <div v-loading="loading">
       <div class="screening">
         <ul>
-          <el-popover
-            v-model="zone_options_visible"
-            placement="bottom"
-            trigger="click"
-          >
+          <el-popover v-model="zone_options_visible" placement="bottom" trigger="click">
             <li slot="reference">
               {{
-                zones.length <= 1 && zone_selected > 0
-                  ? "全部分区"
-                  : zones[zone_selected].text
+              zones.length <= 1 && zone_selected > 0
+              ? "全部分区"
+              : zones[zone_selected].text
               }}
-              <span class="iconfont">&#xe74a;</span>
+              <span
+                class="iconfont"
+              >&#xe74a;</span>
             </li>
             <div class="popover-demo-content">
               <ul>
                   :key="zone.value"
                   @click="handleZoneChange(index)"
                   :class="zone_selected == index ? 'tick' : ''"
-                >
-                  {{ zone.text }}
-                </li>
+                >{{ zone.text }}</li>
               </ul>
             </div>
           </el-popover>
 
-          <el-popover
-            v-model="sch_type_options_visible"
-            placement="bottom"
-            trigger="click"
-          >
+          <el-popover v-model="sch_type_options_visible" placement="bottom" trigger="click">
             <li slot="reference">
               {{ schedual_types[schedual_type_selected].text }}
               <span class="iconfont">&#xe74a;</span>
                   :class="
                     schedual_type_selected == schedualType.value ? 'tick' : ''
                   "
-                >
-                  {{ schedualType.text }}
-                </li>
+                >{{ schedualType.text }}</li>
               </ul>
             </div>
           </el-popover>
       <div class="stateBox">
         <div v-for="(item, index) in filtedScheduals" :key="index">
           <h2 class="title">{{ item.zone_name }}</h2>
-          <patient-box
-            class="clearfix"
-            :patients="item.scheduals"
-          ></patient-box>
+          <patient-box class="clearfix" :patients="item.scheduals"></patient-box>
         </div>
         <div class="NoData" v-if="filtedScheduals.length == 0 && networkStates">
-          <img
-            style="margin-top: 50px; margin-bottom: 50px"
-            src="@/assets/login/data.jpg"
-            alt
-          />
+          <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
         </div>
-        <div
-          class="NoData"
-          v-if="!networkStates"
-          style="display: block;text-align: center"
-        >
-          <p style="margin-top: 100px;font-size: 18px">
-            网络异常，请点击重新加载
-          </p>
+        <div class="NoData" v-if="!networkStates" style="display: block;text-align: center">
+          <p style="margin-top: 100px;font-size: 18px">网络异常，请点击重新加载</p>
 
           <!--<img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/no_network.jpg" alt="">-->
           <van-button
             type="info"
             style="display:block;margin:0 auto"
             @click="reloads()"
-            >重新加载
-          </van-button>
+          >重新加载</van-button>
         </div>
       </div>
       <mt-datetime-picker
 .screening {
   border-bottom: 1px #e5e5e5 solid;
   position: fixed;
-  top: 63px;
+  top: 122px;
+  @media only screen and (min-width: 768px) and (max-width: 1024px) {
+    top: 130px;
+  }
   right: 0;
   z-index: 66;
-  left: 1.58rem;
+  left: 0;
   background: #fff;
-  @media only screen and (max-width: 812px) {
-    top: 50px !important;
-  }
+  // @media only screen and (max-width: 812px) {
+  //   top: 50px !important;
+  // }
   ul {
     @include display-flex;
     @include align-items-center;

src/pages/main/PatientBox.vue

 <template>
   <div>
-    <div class="patient" :class="borderColor(patient)" v-for="(patient, index) in patients" :key="index"
-         @click="detailAction(patient)">
+    <div
+      class="patient"
+      :class="borderColor(patient)"
+      v-for="(patient, index) in patients"
+      :key="index"
+      @click="detailAction(patient)"
+    >
       <!-- <router-link :to="{path:'/details',  query: {patient_id: patient.patient_id, date: patient.schedule_date}}"> -->
       <div class="kehu">
-
         <div style="position: relative;flex:2;" class="tx">
-            <img :src="patient.patient.avatar.length > 0 ? patient.patient.avatar : '../../assets/product/test.jpg'"
-                 alt="">
-            <span class="redpoint" v-if="getStatus(patient)">{{getUnReadNum(patient) > 99?getUnReadNum(patient)+"+":getUnReadNum(patient)}}</span>
+          <img
+            :src="patient.patient.avatar.length > 0 ? patient.patient.avatar : '../../assets/product/test.jpg'"
+            alt
+          />
+          <span
+            class="redpoint"
+            v-if="getStatus(patient)"
+          >{{getUnReadNum(patient) > 99?getUnReadNum(patient)+"+":getUnReadNum(patient)}}</span>
           <div class="right">
-            <h3 class="name">{{patient.patient.name}}<span class="el-icon-bell yztx" v-if="getStatus(patient)"> 医嘱</span> <span class="yc" v-show="isAbnormal(patient)">异常</span></h3>
+            <h3 class="name">
+              {{patient.patient.name}}
+              <span class="el-icon-bell yztx" v-if="getStatus(patient)">医嘱</span>
+              <span class="yc" v-show="isAbnormal(patient)">异常</span>
+            </h3>
             <span class="num">{{ genderText(patient) }} | {{ age(patient) }}岁</span>
             <!-- 性别、年龄 -->
-
           </div>
         </div>
         <div class="online" style="flex:1.3;" v-show="computeState(patient) != 4">
           <p :class="stateColor(patient)">{{stateText(patient)}}</p>
           <!-- <span class="time">剩余时间 : 90:08</span>     -->
         </div>
-
       </div>
       <!-- </router-link> -->
       <div class="function" :class="functionColor(patient)">
         <ul>
-          <li><span class="iconfont">&#xe6f7;</span>班次 : {{timeTypeText(patient)}}</li>
-          <li><span class="iconfont">&#xe6de;</span>床位号 : {{patient.dialysis_order&&patient.dialysis_order.device_number&&patient.dialysis_order.device_number.number.length > 0 ? patient.dialysis_order.device_number.number:patient.device_number.number}}</li>
-          <li><span class="iconfont">&#xe6f6;</span>透析模式 : {{$store.getters.treatment_mode[patient.mode_id].name}}</li>
+          <li>
+            <span class="iconfont">&#xe6f7;</span>
+            班次 : {{timeTypeText(patient)}}
+          </li>
+          <li>
+            <span class="iconfont">&#xe6de;</span>
+            床位号 : {{patient.dialysis_order&&patient.dialysis_order.device_number&&patient.dialysis_order.device_number.number.length > 0 ? patient.dialysis_order.device_number.number:patient.device_number.number}}
+          </li>
+          <li>
+            <span class="iconfont">&#xe6f6;</span>
+            透析模式 : {{$store.getters.treatment_mode[patient.mode_id].name}}
+          </li>
         </ul>
       </div>
     </div>
 </template>
 
 <script>
-  import {parseTime} from '@/utils'
-  import {jsGetAge} from '@/utils/tools'
-  import {
-    setDialysisOrWaitSelectedConfig
-  } from '@/utils/data_config'
-  export default {
-    name: 'PatientBox',
-    props: {
-      patients: Array
-    },
-    data () {
-      return {}
-    },
-    created(){
-      console.log("11111")
-      console.log(this.patients)
-    },
-    methods: {
-      getUnReadNum: function (schedual) {
-        if (schedual.doctor_advice != null) {
-          let doctorAdvice = []
-          for (let i = 0; i < schedual.doctor_advice.length; i++) {
-            if (schedual.doctor_advice[i].execution_state == 2) {
-              doctorAdvice.push(schedual.doctor_advice[i])
-            }
+import { parseTime } from "@/utils";
+import { jsGetAge } from "@/utils/tools";
+import { setDialysisOrWaitSelectedConfig } from "@/utils/data_config";
+export default {
+  name: "PatientBox",
+  props: {
+    patients: Array
+  },
+  data() {
+    return {};
+  },
+  created() {
+    console.log("11111");
+    console.log(this.patients);
+  },
+  methods: {
+    getUnReadNum: function(schedual) {
+      if (schedual.doctor_advice != null) {
+        let doctorAdvice = [];
+        for (let i = 0; i < schedual.doctor_advice.length; i++) {
+          if (schedual.doctor_advice[i].execution_state == 2) {
+            doctorAdvice.push(schedual.doctor_advice[i]);
           }
-          const sorted = this.groupBy(doctorAdvice, function (item) {
-            return [item.groupno]
-          })
-          return sorted.length
         }
-      },
-      getStatus: function (schedual) {
-        var isShowDot = false
-        if (schedual.doctor_advice != null) {
-          for (let i = 0; i < schedual.doctor_advice.length; i++) {
-            if (schedual.doctor_advice[i].execution_state == 2) {
-              isShowDot = true
-            }
+        const sorted = this.groupBy(doctorAdvice, function(item) {
+          return [item.groupno];
+        });
+        return sorted.length;
+      }
+    },
+    getStatus: function(schedual) {
+      var isShowDot = false;
+      if (schedual.doctor_advice != null) {
+        for (let i = 0; i < schedual.doctor_advice.length; i++) {
+          if (schedual.doctor_advice[i].execution_state == 2) {
+            isShowDot = true;
           }
-          return isShowDot
-
-        } else {
-          return false
-        }
-      },
-      stateColor: function (schedual) {
-        var state = this.computeState(schedual)
-        if (state == 1) {
-          return 'blue'
-        } else if (state == 2) {
-          return 'gray'
-        } else if (state == 3) {
-          return 'red'
-        } else {
-          return 'blue'
-        }
-      },
-      functionColor: function (schedual) {
-        var state = this.computeState(schedual)
-        if (state == 1 || state == 3) {
-          return 'blue'
-        } else if (state == 2) {
-          return 'gray'
-        } else {
-          return 'blue'
-        }
-      },
-      borderColor: function (schedual) {
-        var yc = this.isAbnormal(schedual)
-        if (yc == true) {
-          return 'red'
-        } else {
-          return 'gray'
         }
-      },
-      stateText: function (schedual) {
-        var state = this.computeState(schedual)
-        if (state == 1) {
-          return '已上机'
-        } else if (state == 2) {
-          return '已下机'
-        } else if (state == 3) {
-          return '监测中'
-        } else {
-          // return schedual.patient.gender == 1 ? "男" : "女"
-          return '未上机'
-        }
-      },
-      computeState: function (schedual) {
-        if (schedual.dialysis_order == null) {
-          // 未上机
-          return 4
-        } else if (schedual.dialysis_order.stage == 2) {
-          // 已下机
-          return 2
-        } else if (
-          schedual.dialysis_order.stage == 1 &&
-          schedual.monitoring_records != null &&
-          schedual.monitoring_records.length > 1
-        ) {
-          // 监测中
-          return 3
-        } else {
-          return 1
-        }
-      },
-
-      orderState: function (schedual) {
-        if (schedual.dialysis_order == null) {
-          // 未上机
-          return 4
-        } else if (schedual.dialysis_order.stage == 2) {
-          // 已下机
-          return 2
-        } else if (
-          schedual.dialysis_order.stage == 1 &&
-          schedual.monitoring_records != null &&
-          schedual.monitoring_records.length > 1
-        ) {
-          // 监测中
-          return 3
-        } else {
-          return 1
-        }
-      },
-      isAbnormal: function (schedual) {
-        return false // schedual.yc;
-      },
-      timeTypeText: function (schedual) {
-        if (schedual.schedule_type == 1) {
-          return '上午'
-        } else if (schedual.schedule_type == 2) {
-          return '下午'
-        } else {
-          return '晚上'
-        }
-      },
-      genderText: function (schedual) {
-        if (schedual.patient.gender == 0) {
-          return '未知'
-        } else if (schedual.patient.gender == 1) {
-          return '男'
-        } else {
-          return '女'
-        }
-      },
-      age: function (schedual) {
-        if (schedual.patient.age == 0) {
-
-          return jsGetAge(parseTime(schedual.patient.birthday, '{y}-{m}-{d}'), '-')
+        return isShowDot;
+      } else {
+        return false;
+      }
+    },
+    stateColor: function(schedual) {
+      var state = this.computeState(schedual);
+      if (state == 1) {
+        return "blue";
+      } else if (state == 2) {
+        return "gray";
+      } else if (state == 3) {
+        return "red";
+      } else {
+        return "blue";
+      }
+    },
+    functionColor: function(schedual) {
+      var state = this.computeState(schedual);
+      if (state == 1 || state == 3) {
+        return "blue";
+      } else if (state == 2) {
+        return "gray";
+      } else {
+        return "blue";
+      }
+    },
+    borderColor: function(schedual) {
+      var yc = this.isAbnormal(schedual);
+      if (yc == true) {
+        return "red";
+      } else {
+        return "gray";
+      }
+    },
+    stateText: function(schedual) {
+      var state = this.computeState(schedual);
+      if (state == 1) {
+        return "已上机";
+      } else if (state == 2) {
+        return "已下机";
+      } else if (state == 3) {
+        return "监测中";
+      } else {
+        // return schedual.patient.gender == 1 ? "男" : "女"
+        return "未上机";
+      }
+    },
+    computeState: function(schedual) {
+      if (schedual.dialysis_order == null) {
+        // 未上机
+        return 4;
+      } else if (schedual.dialysis_order.stage == 2) {
+        // 已下机
+        return 2;
+      } else if (
+        schedual.dialysis_order.stage == 1 &&
+        schedual.monitoring_records != null &&
+        schedual.monitoring_records.length > 1
+      ) {
+        // 监测中
+        return 3;
+      } else {
+        return 1;
+      }
+    },
 
-        } else {
+    orderState: function(schedual) {
+      if (schedual.dialysis_order == null) {
+        // 未上机
+        return 4;
+      } else if (schedual.dialysis_order.stage == 2) {
+        // 已下机
+        return 2;
+      } else if (
+        schedual.dialysis_order.stage == 1 &&
+        schedual.monitoring_records != null &&
+        schedual.monitoring_records.length > 1
+      ) {
+        // 监测中
+        return 3;
+      } else {
+        return 1;
+      }
+    },
+    isAbnormal: function(schedual) {
+      return false; // schedual.yc;
+    },
+    timeTypeText: function(schedual) {
+      if (schedual.schedule_type == 1) {
+        return "上午";
+      } else if (schedual.schedule_type == 2) {
+        return "下午";
+      } else {
+        return "晚上";
+      }
+    },
+    genderText: function(schedual) {
+      if (schedual.patient.gender == 0) {
+        return "未知";
+      } else if (schedual.patient.gender == 1) {
+        return "男";
+      } else {
+        return "女";
+      }
+    },
+    age: function(schedual) {
+      if (schedual.patient.age == 0) {
+        return jsGetAge(
+          parseTime(schedual.patient.birthday, "{y}-{m}-{d}"),
+          "-"
+        );
+      } else {
+        return schedual.patient.age;
+      }
 
-          return schedual.patient.age
-        }
+      // var now = new Date();
+      // var nowYear = parseTime(now, "{y}");
+      // var birthdayYear = parseTime(schedual.patient.birthday, "{y}");
+      // // console.log(nowYear)
+      // // console.log(birthdayYear)
+      // return nowYear - birthdayYear;
+    },
+    groupBy(array, f) {
+      const groups = {};
+      array.forEach(function(o) {
+        const group = JSON.stringify(f(o));
+        groups[group] = groups[group] || [];
+        groups[group].push(o);
+      });
+      return Object.keys(groups).map(function(group) {
+        return groups[group];
+      });
+    },
+    detailAction: function(schedual) {
+      if (schedual.dialysis_order != null) {
+        setDialysisOrWaitSelectedConfig(1);
+      } else {
+        setDialysisOrWaitSelectedConfig(0);
+      }
 
-        // var now = new Date();
-        // var nowYear = parseTime(now, "{y}");
-        // var birthdayYear = parseTime(schedual.patient.birthday, "{y}");
-        // // console.log(nowYear)
-        // // console.log(birthdayYear)
-        // return nowYear - birthdayYear;
-      }, groupBy (array, f) {
-        const groups = {}
-        array.forEach(function (o) {
-          const group = JSON.stringify(f(o))
-          groups[group] = groups[group] || []
-          groups[group].push(o)
-        })
-        return Object.keys(groups).map(function (group) {
-          return groups[group]
-        })
-      },
-      detailAction: function (schedual) {
-        if(schedual.dialysis_order != null){
-          setDialysisOrWaitSelectedConfig(1)
-        }else{
-          setDialysisOrWaitSelectedConfig(0)
+      var patient_id = schedual.patient_id;
+      var date = schedual.schedule_date;
+      this.$router.push({
+        path: "/details",
+        query: {
+          patient_id: patient_id,
+          date: date,
+          patient_name: schedual.patient.name
         }
-
-        var patient_id = schedual.patient_id
-        var date = schedual.schedule_date
-        this.$router.push({
-          path: '/details',
-          query: {
-            patient_id: patient_id,
-            date: date,
-            patient_name: schedual.patient.name
-          }
-        })
-      }
+      });
     }
   }
+};
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-  .patient {
+.patient {
   border: 1px #e5e5ee solid;
   padding: 0.33rem 0;
   width: 47%;
   margin: 0 3% 0.5rem 0;
   float: left;
-  .function {
-  padding: 0.3rem 0.32rem 0 0.32rem;
-  color: #7b8a97;
-  ul {
-  @include display-flex;
-  @include align-items-center;
-  @include text-align;
-  @include justify-content-between;
-  li {
-  font-size: 0.3rem;
-  @include display-flex;
-  @include align-items-center;
-  .iconfont {
-  margin: 0 0.1rem 0 0;
-  font-size: 0.4rem;
-  }
-  }
+  @media only screen and (max-width: 415px) {
+    width: 96% !important;
   }
+  .function {
+    padding: 0.3rem 0.32rem 0 0.32rem;
+    color: #7b8a97;
+    ul {
+      @include display-flex;
+      @include align-items-center;
+      @include text-align;
+      @include justify-content-between;
+      li {
+        font-size: 0.3rem;
+        @include display-flex;
+        @include align-items-center;
+        .iconfont {
+          margin: 0 0.1rem 0 0;
+          font-size: 0.4rem;
+        }
+      }
+    }
   }
   .blue {
-  color: $main-color;
-  .iconfont {
-  color: $main-color;
-  }
+    color: $main-color;
+    .iconfont {
+      color: $main-color;
+    }
   }
   .kehu {
-  @include display-flex;
-  @include align-items-center;
-  @include text-align;
-  @include justify-content-between;
-  border-bottom: 1px #e5e5e5 solid;
-  padding: 0 0 0.3rem 0.32rem;
-  .tx {
-  @include display-flex;
-  @include align-items-center;
-  img {
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  float: left;
-  margin: 0 0.3rem 0 0;
+    @include display-flex;
+    @include align-items-center;
+    @include text-align;
+    @include justify-content-between;
+    border-bottom: 1px #e5e5e5 solid;
+    padding: 0 0 0.3rem 0.32rem;
+    .tx {
+      @include display-flex;
+      @include align-items-center;
+      img {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        float: left;
+        margin: 0 0.3rem 0 0;
+      }
+      .right {
+        float: left;
+        text-align: left;
+        .name {
+          font-size: 0.34rem;
+          color: $title-color;
+          font-weight: 600;
+          margin-bottom: 0.1rem;
+          .yc {
+            background: #ff7979;
+            color: #fff;
+            height: 0.38rem;
+            line-height: 0.38rem;
+            font-size: 0.24rem;
+            width: 0.74rem;
+            border-radius: 4px;
+            display: inline-block;
+            text-align: center;
+            margin-left: 0.13rem;
+          }
+        }
+        .num {
+          font-size: 0.3rem;
+        }
+      }
+    }
+
+    .online {
+      text-align: center;
+      width: 50%;
+      border-left: 1px #e5e5e5 solid;
+      p {
+        background: #c6cdd2;
+        color: #fff;
+        width: 1.35rem;
+        height: 0.56rem;
+        line-height: 0.56rem;
+        border-radius: 4px;
+        margin: 0 auto;
+        font-size: 0.32rem;
+      }
+      .blue {
+        background: $main-color;
+      }
+      .red {
+        background: #f18f68;
+      }
+      .green {
+        background: #5bd18b;
+      }
+      .gray {
+        background: #a8b3ba;
+      }
+      .lightGray {
+        background: #c6cdd2;
+      }
+      .time {
+        font-size: 0.26rem;
+        color: #34495e;
+      }
+    }
   }
-  .right {
-  float: left;
-  text-align: left;
-  .name {
-  font-size: 0.34rem;
-  color: $title-color;
-  font-weight: 600;
-  margin-bottom: 0.1rem;
-  .yc {
-  background: #ff7979;
-  color: #fff;
-  height: 0.38rem;
-  line-height: 0.38rem;
-  font-size: 0.24rem;
-  width: 0.74rem;
-  border-radius: 4px;
+}
+.red {
+  border: 1px #ff7979 solid;
+}
+.redpoint {
   display: inline-block;
+  height: 20px;
+  width: 20px;
+  line-height: 18px;
   text-align: center;
-  margin-left: 0.13rem;
-  }
-  }
-  .num {
-  font-size: 0.3rem;
-  }
-  }
-  }
-
-  .online {
-  text-align: center;
-  width: 50%;
-  border-left: 1px #e5e5e5 solid;
-  p {
-  background: #c6cdd2;
+  font-size: 0.8em;
+  border-radius: 20px;
   color: #fff;
-  width: 1.35rem;
-  height: 0.56rem;
-  line-height: 0.56rem;
-  border-radius: 4px;
-  margin: 0 auto;
-  font-size: 0.32rem;
-  }
-  .blue {
-  background: $main-color;
-  }
-  .red {
-  background: #f18f68;
-  }
-  .green {
-  background: #5bd18b;
-  }
-  .gray {
-  background: #a8b3ba;
-  }
-  .lightGray {
-  background: #c6cdd2;
-  }
-  .time {
-  font-size: 0.26rem;
-  color: #34495e;
-  }
-  }
-  }
-  }
-  .red {
-  border: 1px #ff7979 solid;
-  }
-  .redpoint{
-  display:inline-block;
-  height:20px;
-  width:20px;
-  line-height:18px;
-  text-align:center;
-  font-size:0.8em;
-  border-radius:20px;
-  color:#fff;
-  background:#F56C6C;
+  background: #f56c6c;
   position: absolute;
   top: -8px;
   left: 0.7rem;
-  border:1px solid #fff;
-  }
-  .yztx{
-    margin: 0 5px;
-    padding: 3px 10px;
-    background-color: #f56C6C;
-    color: #fff;
-    border-radius: 15px;
-    font-size: 14px;
+  border: 1px solid #fff;
+}
+.yztx {
+  margin: 0 5px;
+  padding: 3px 10px;
+  background-color: #f56c6c;
+  color: #fff;
+  border-radius: 15px;
+  font-size: 14px;
+  @media only screen and (max-width: 376px) {
+    font-size: 0.34rem !important;
   }
+}
 </style>
 

src/pages/main/Print.vue

   }
 
   .mainContent {
-  margin: 0 0 0 1.58rem;
+  // margin: 0 0 0 1.58rem;
   }
 </style>

src/pages/main/PrintIndex.vue

 <template>
-  <div class="mainBox" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="width: 100%;height: 100%">
-    <side-bar :active_index="0" v-if="isShow == true"></side-bar>
+  <div
+    class="mainBox"
+    v-loading="loading"
+    element-loading-text="加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    style="width: 100%;height: 100%"
+  >
     <div class="mainContent">
       <div class="navigation" v-if="isShow == true">
         <div class="goBack">
-          <span class="back" @click="backAction()"><span class="iconfont">&#xe720;</span>返回</span>
+          <span class="back" @click="backAction()">
+            <span class="iconfont">&#xe720;</span>返回
+          </span>
         </div>
         <!--<div class="print" style="float: right">-->
-          <!--&lt;!&ndash;<el-button size="mini" type="primary" icon="el-icon-printer" @click="printThisPage">打印</el-button>&ndash;&gt;-->
+        <!--&lt;!&ndash;<el-button size="mini" type="primary" icon="el-icon-printer" @click="printThisPage">打印</el-button>&ndash;&gt;-->
         <!--</div>-->
       </div>
-      <DialysisPrintOrderOne style="margin-top:60px;" v-bind:childResponse="childResponse" v-if="org_template_info.template_id ==1"> </DialysisPrintOrderOne>
-      <DialysisPrintOrderTwo style="margin-top:60px;" v-bind:childResponse="childResponse" v-if="org_template_info.template_id ==2||org_template_info.template_id ==0"></DialysisPrintOrderTwo>
-      <DialysisPrintOrderFive style="margin-top:60px;" v-bind:childResponse="childResponse" v-if="org_template_info.template_id ==5"></DialysisPrintOrderFive>
-
+      <DialysisPrintOrderOne
+        style="margin-top:60px;"
+        v-bind:childResponse="childResponse"
+        v-if="org_template_info.template_id ==1"
+      ></DialysisPrintOrderOne>
+      <DialysisPrintOrderTwo
+        style="margin-top:60px;"
+        v-bind:childResponse="childResponse"
+        v-if="org_template_info.template_id ==2||org_template_info.template_id ==0"
+      ></DialysisPrintOrderTwo>
+      <DialysisPrintOrderFive
+        style="margin-top:60px;"
+        v-bind:childResponse="childResponse"
+        v-if="org_template_info.template_id ==5"
+      ></DialysisPrintOrderFive>
     </div>
+    <side-bar :active_index="0" v-if="isShow == true"></side-bar>
   </div>
 </template>
 
 import { jsGetAge, uParseTime } from "@/utils/tools";
 import { fetchAllAdminUsers } from "@/api/doctor";
 import LabelBox from "./printItem/LabelBox";
-import DialysisPrintOrderOne from './template/DialysisPrintOrderOne';
-import DialysisPrintOrderTwo from './template/DialysisPrintOrderTwo';
-import DialysisPrintOrderFive from './template/DialysisPrintOrderFive';
+import DialysisPrintOrderOne from "./template/DialysisPrintOrderOne";
+import DialysisPrintOrderTwo from "./template/DialysisPrintOrderTwo";
+import DialysisPrintOrderFive from "./template/DialysisPrintOrderFive";
 
 export default {
   name: "PrintIndex",
       adminUser: [],
       receiverTreatmentAccess: {},
 
-
       AlPanel: {
         id: 0,
         name: "",
         : "";
     },
     getDialysisRecord() {
-      this.loading = true
+      this.loading = true;
       getPrintDialysisRecord(this.queryParams).then(response => {
-        this.loading = false
+        this.loading = false;
         if (response.data.state == 1) {
-          this.childResponse = response
-          this.org_template_info = response.data.data.org_template_info
+          this.childResponse = response;
+          this.org_template_info = response.data.data.org_template_info;
         } else {
           this.$message.error("请求数据失败");
           return false;
   width: 960px;
   margin: 0 auto;
   .order-yy-name {
-    margin:10px auto 0 auto;
+    margin: 10px auto 0 auto;
     text-align: center;
     font-size: 20px;
   }
   height: 100%;
   font-size: 0.3rem;
   .sideColumn {
-    float: left;
-    width: 1.58rem;
+    // float: left;
+    // width: 1.58rem;
     background: #f5f8fb;
-    height: 100%;
-    border-right: 1px #c1c1c1 solid;
-    position: fixed;
+    // height: 100%;
+    // border-right: 1px #c1c1c1 solid;
+    // position: fixed;
     .column {
       // height: 100%;
       // background: #f5f8fb;
   border-bottom: 1px #e5e5e5 solid;
   position: fixed;
   top: 0;
-  left: 1.58rem;
+  left: 0;
   right: 0;
   z-index: 100;
   background: #fff;
 }
 
 .mainContent {
-  margin: 0 0 0 1.58rem;
+  // margin: 0 0 0 1.58rem;
+}
+.mainBox {
+  display: flex;
+  flex-direction: column;
+  > :first-child {
+    flex: 1;
+    overflow: auto;
+  }
 }
 </style>

src/pages/main/RecordPage.vue

 <template>
   <div>
-    <van-row class="top_row">
-      <van-col :span="9">
-        <div>
-          <span class="title"> {{ $store.getters.user.org.org_short_name }} </span>
-        </div>
-      </van-col>
-      <van-col :span="6">
+    <!-- <van-row class="top_row">
+    <van-col :span="14">-->
+    <div class="top_row">
+      <div class="head">
+        <img :src="$store.getters.user.org.org_logo" alt />
+      </div>
+      <div class="floatLeft">
+        <span class="title">{{ $store.getters.user.org.org_short_name }}</span>
+      </div>
+      <!-- </van-col> -->
+      <!-- <van-col :span="6">
         <div class="department">
           <ul>
             <li style="position: relative;" :class="index == 0? 'active':'' " @click="ClickTab(0)">
             </li>
           </ul>
         </div>
-      </van-col>
-      <van-col :span="9">
-        <router-link to="/add_urgent_schedule">
+      </van-col>-->
+      <!-- <van-col :span="10"> -->
+      <!-- <router-link to="/add_urgent_schedule">
           <van-button size="small" type="info" class="add_schedule_btn">临时排班</van-button>
-        </router-link>
-        <div class="search">
-          <van-field v-model="search_input" ref="search_field" placeholder="透析号/姓名" class="field">
-            <i class="iconfont" slot="left-icon">&#xe741;</i>
-            <van-button slot="button" size="small" type="info" style="border: none;" @click="searchWithKeyword">搜索
-            </van-button>
-          </van-field>
+      </router-link>-->
+      <div class="search">
+        <van-field v-model="search_input" ref="search_field" placeholder="透析号/姓名" class="field">
+          <i class="iconfont" slot="left-icon">&#xe741;</i>
+          <van-button
+            slot="button"
+            size="small"
+            type="info"
+            style="border: none;"
+            @click="searchWithKeyword"
+          >搜索</van-button>
+        </van-field>
+      </div>
+      <!-- </van-col>
+      </van-row>-->
+      <div class="box">
+        <div class="department">
+          <ul>
+            <li style="position: relative;" :class="index == 0? 'active':'' " @click="ClickTab(0)">
+              {{'候诊区'}}
+              <span
+                class="redpoint"
+                v-if="un_read_wait_num"
+              >{{un_read_wait_num > 99 ? un_read_wait_num+'+':un_read_wait_num}}</span>
+            </li>
+            <li style="position: relative;" :class="index == 1? 'active':'' " @click="ClickTab(1)">
+              {{'透析区'}}
+              <span
+                class="redpoint"
+                v-if="un_read_dialysis_num"
+              >{{un_read_dialysis_num > 99 ? un_read_dialysis_num+'+':un_read_dialysis_num}}</span>
+            </li>
+          </ul>
         </div>
-      </van-col>
-    </van-row>
-
+      </div>
+    </div>
     <!-- <div class="top">
         <div class="hospital">
           <span class="title"> {{ $store.getters.user.org.org_short_name }} </span>
           </van-field>
         </div>
         <van-button size="small" type="info">临时排班</van-button>
-    </div> -->
+    </div>-->
     <div class="area">
       <waiting-area v-show="index==0" title="候诊区" :search_keyword="search_keyword"></waiting-area>
-      <dialysis-area v-show="index==1" title="透析区" :search_keyword="search_keyword"
-                     @clear_search_keyword="clearKeyword"></dialysis-area>
+      <dialysis-area
+        v-show="index==1"
+        title="透析区"
+        :search_keyword="search_keyword"
+        @clear_search_keyword="clearKeyword"
+      ></dialysis-area>
     </div>
-
+    <router-link to="/add_urgent_schedule">
+      <div class="add">
+        <p>临时排班</p>
+      </div>
+    </router-link>
   </div>
 </template>
 
 
 <script>
-  import DialysisArea from './DialysisArea'
-  import WaitingArea from './WaitingArea'
-  import {Popover} from 'vux'
-  import {getDialysisScheduals, getWaitingScheduals} from '@/api/dialysis'
-  import {parseTime} from '@/utils/index'
-  import {getDialysisOrWaitSelectedConfig} from '@/utils/data_config'
+import DialysisArea from "./DialysisArea";
+import WaitingArea from "./WaitingArea";
+import { Popover } from "vux";
+import { getDialysisScheduals, getWaitingScheduals } from "@/api/dialysis";
+import { parseTime } from "@/utils/index";
+import { getDialysisOrWaitSelectedConfig } from "@/utils/data_config";
 
-  export default {
-    name: 'RecordPage',
-    props: {
-      un_read_wait_num: {
-        type: Number,
-      },
-      un_read_dialysis_num: {
-        type: Number,
-      }
+export default {
+  name: "RecordPage",
+  props: {
+    un_read_wait_num: {
+      type: Number
     },
-    data () {
-      return {
-        index: 1,
-        search_input: '',
-        search_keyword: '',
-        scheduals: [],
-        advice_groups: [],
-        unReadWaitNum: 0,
-        unReadDialysisNum: 0,
+    un_read_dialysis_num: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      index: 1,
+      search_input: "",
+      search_keyword: "",
+      scheduals: [],
+      advice_groups: [],
+      unReadWaitNum: 0,
+      unReadDialysisNum: 0
+    };
+  },
+  components: {
+    DialysisArea,
+    WaitingArea,
+    Popover
+    // Group,
+    // Cell
+  },
 
-      }
+  methods: {
+    ClickTab: function(tabIndex) {
+      this.index = tabIndex;
     },
-    components: {
-      DialysisArea,
-      WaitingArea,
-      Popover
-      // Group,
-      // Cell
+    searchWithKeyword: function() {
+      this.$refs.search_field.blur();
+      this.search_keyword = this.search_input;
     },
-
-    methods: {
-      ClickTab: function (tabIndex) {
-        this.index = tabIndex
-      },
-      searchWithKeyword: function () {
-        this.$refs.search_field.blur()
-        this.search_keyword = this.search_input
-      },
-      clearKeyword: function () {
-        this.search_input = ''
-        this.search_keyword = ''
-      },
-    }, created () {
-      var index = getDialysisOrWaitSelectedConfig()
-      console.log(index)
-      if (index != null){
-        this.index = index
-      }
+    clearKeyword: function() {
+      this.search_input = "";
+      this.search_keyword = "";
+    }
+  },
+  created() {
+    var index = getDialysisOrWaitSelectedConfig();
+    console.log(index);
+    if (index != null) {
+      this.index = index;
     }
   }
+};
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-  .top_row {
+.top_row {
+  // height: 50px;
   font-size: 0.3rem;
   padding: 0.3rem 0.3rem;
-  border-bottom: 1px #e5e5e5 solid;
-  display: flex;
-  align-items: center;
+  // border-bottom: 1px #e5e5e5 solid;
+  // display: flex;
+  // align-items: center;
+  background: #258ffc;
+  .floatLeft {
+    float: left;
+  }
+  .search {
+    float: right;
+    margin-top: 15px;
   }
-  .title {
+}
+.title {
   font-size: 0.34rem;
   font-weight: 600;
+  height: 45px;
+  line-height: 50px;
+  margin-left: 8px;
   color: $title-color;
-  }
-  .department {
+}
+.department {
   text-align: center;
+  height: 100%;
   ul {
-  li {
-  float: left;
-  font-size: 0.36rem;
-  margin: 0 0.2rem;
-  height: 0.64rem;
-  line-height: 0.64rem;
-  padding: 0 0.3rem;
-  color: $title-color;
-  &.active {
-  background: $main-color;
-  color: #fff;
-  border-radius: 30px;
-  }
-  }
-  }
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    li {
+      float: left;
+      font-size: 0.36rem;
+      margin: 0 0.2rem;
+      height: 0.64rem;
+      line-height: 0.64rem;
+      padding: 0 0.3rem;
+      // color: $title-color;
+      color: #fff;
+      &.active {
+        // background: $main-color;
+        background: #ffffff;
+        color: #258ffc;
+        border-radius: 30px;
+      }
+    }
   }
+}
 
-  .add_schedule_btn {
+.add_schedule_btn {
   margin-left: 10px;
   float: right;
   background-color: #ff7978;
   border: none;
-  }
+}
 
-  .redpoint{
-  display:inline-block;
-  height:20px;
-  width:20px;
-  line-height:18px;
-  text-align:center;
-  font-size:0.8em;
-  border-radius:20px;
-  color:#fff;
-  background:#F56C6C;
+.redpoint {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  line-height: 18px;
+  text-align: center;
+  font-size: 0.8em;
+  border-radius: 20px;
+  color: #fff;
+  background: #f56c6c;
   position: absolute;
   top: -8px;
   right: -8px;
   border: 1px solid #fff;
+}
+.box {
+  height: 50px;
+  margin-top: 50px;
+  background: #258ffc;
+}
+.head {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  margin-top: 3px;
+  display: inline-block;
+  float: left;
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+}
+.add {
+  width: 1.5rem;
+  height: 1.5rem;
+  background: #f66c6c;
+  // box-shadow: 0px 3px 9px 0px rgba(7, 30, 102, 0.15);
+  border-radius: 50%;
+  position: fixed;
+  right: 0.6rem;
+  bottom: 2.25rem;
+  font-size: 0.4rem;
+  text-align: center;
+  p {
+    width: 30px;
+    text-align: center;
+    margin: 8px auto 0;
+    color: #fff;
+    @media only screen and (min-width: 415px) and (max-width: 668px) {
+      width: 40px;
+    }
+    @media only screen and (min-width: 768px) and (max-width: 1024px) {
+      width: 40px;
+      margin: 10px auto 0;
+    }
   }
+}
 </style>
 

src/pages/main/WaitingArea.vue

             :class="select_index == i ? 'active' : ''"
             @click="menuTabClick(i)"
             :key="i"
-          >
-            {{ item.label + (item.count > 0 ? "(" + item.count + ")" : "") }}
-          </li>
+          >{{ item.label + (item.count > 0 ? "(" + item.count + ")" : "") }}</li>
 
-          <el-popover
-            v-model="zone_options_visible"
-            placement="bottom"
-            trigger="click"
-          >
+          <el-popover v-model="zone_options_visible" placement="bottom" trigger="click">
             <li slot="reference">
               {{ zone_options[zone_selected].text
-              }}<span class="iconfont">&#xe74a;</span>
+              }}
+              <span class="iconfont">&#xe74a;</span>
             </li>
             <div class="popover-demo-content">
               <ul>
                   :key="index"
                   @click="handleZoneChange(index)"
                   :class="zone_selected == index ? 'tick' : ''"
-                >
-                  {{ option.text }}
-                </li>
+                >{{ option.text }}</li>
               </ul>
             </div>
           </el-popover>
 
-          <el-popover
-            v-model="time_options_visible"
-            placement="bottom"
-            trigger="click"
-          >
+          <el-popover v-model="time_options_visible" placement="bottom" trigger="click">
             <li slot="reference">
               {{ time_options[time_selected].text
-              }}<span class="iconfont">&#xe74a;</span>
+              }}
+              <span class="iconfont">&#xe74a;</span>
             </li>
             <div class="popover-demo-content">
               <ul>
                   :key="index"
                   @click="handleTimeChange(index)"
                   :class="time_selected == index ? 'tick' : ''"
-                >
-                  {{ option.text }}
-                </li>
+                >{{ option.text }}</li>
               </ul>
             </div>
           </el-popover>
         </ul>
       </div>
-      <div class="stateBox ">
+      <div class="stateBox">
         <!-- <patient-box class="clearfix" :patients="filtedScheduals "></patient-box> -->
         <div v-for="(item, index) in filtedScheduals" :key="index">
           <h2 class="title">{{ item.zone_name }}</h2>
-          <patient-box
-            class="clearfix"
-            :patients="item.scheduals"
-          ></patient-box>
+          <patient-box class="clearfix" :patients="item.scheduals"></patient-box>
         </div>
         <div class="NoData" v-if="filtedScheduals.length == 0 && networkStates">
-          <img
-            style="margin-top: 50px; margin-bottom: 50px"
-            src="@/assets/login/data.jpg"
-            alt=""
-          />
+          <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
         </div>
 
-        <div
-          class="NoData"
-          v-if="!networkStates"
-          style="display: block;text-align: center;"
-        >
+        <div class="NoData" v-if="!networkStates" style="display: block;text-align: center;">
           <!--<img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/no_network.jpg" alt="">-->
-          <p style="margin-top: 100px;font-size: 18px">
-            网络异常，请点击重新加载
-          </p>
+          <p style="margin-top: 100px;font-size: 18px">网络异常，请点击重新加载</p>
           <van-button
             slot="button"
             size="normal"
             type="info"
             style="display:block;margin:0 auto"
             @click="reloads()"
-            >重新加载
-          </van-button>
+          >重新加载</van-button>
         </div>
       </div>
     </div>
 .screening {
   border-bottom: 1px #e5e5e5 solid;
   position: fixed;
-  top: 63px;
+  top: 122px;
+  @media only screen and (min-width: 768px) and (max-width: 1024px) {
+    top: 130px;
+  }
   right: 0;
   z-index: 66;
-  left: 1.58rem;
+  left: 0;
   background: #fff;
-  @media only screen and (max-width: 812px) {
-    top: 50px !important;
-  }
+  // @media only screen and (max-width: 812px) {
+  //   top: 50px !important;
+  // }
   ul {
     @include display-flex;
     @include align-items-center;
     @include text-align;
     @include justify-content-between;
-    width: 60%;
+    width: 82%;
     margin: 0 auto;
     font-size: 0.32rem;
     color: $title-color;

src/pages/main/add_urgent_schedule.vue

 <template>
   <div class="mainBox">
-    <side-bar :active_index="0"></side-bar>
     <div class="mainContent">
       <div class="navigation">
         <div class="goBack">
-          <span class="back" @click="$router.back(-1)"
-            ><span class="iconfont">&#xe720;</span>返回</span
-          >
+          <span class="back" @click="$router.back(-1)">
+            <span class="iconfont">&#xe720;</span>返回
+          </span>
         </div>
         <div class="nav">
           <span>临时排班</span>
           </van-col>
         </van-row>
         <van-row class="row">
-          <van-col :span="9">
+          <van-col :span="12">
             <span class="title">日期：</span>
             <div class="field_panel">
               <van-field v-model="date" class="field"></van-field>
           </van-col>
         </van-row>
         <van-row class="row">
-          <van-col :span="9">
+          <van-col :span="12">
             <span class="title">患者：</span>
             <div class="field_panel">
               <van-field
                 placeholder="请输入病人名字"
                 @select="handleSelect"
               >
-                <i class="el-icon-search el-input__icon" slot="suffix"> </i>
+                <i class="el-icon-search el-input__icon" slot="suffix"></i>
                 <template slot-scope="{ item }">
                   <div class="name">{{ item.name }}</div>
                 </template>
           </van-col>
         </van-row>
         <van-row class="row">
-          <van-col :span="9">
+          <van-col :span="12">
             <span class="title">班次：</span>
             <div class="field_panel">
               <van-field
             </div>
           </van-col>
 
-          <van-col :span="9">
+          <van-col :span="12">
             <span class="title">治疗模式：</span>
             <div class="field_panel">
               <van-field
               ></van-field>
             </div>
           </van-col>
-          <van-col :span="9">
+          <van-col :span="12">
             <span class="title">床位：</span>
             <div class="field_panel">
               <van-field
           <van-col :span="24">
             <span class="title">&nbsp;</span>
             <div class="field_panel">
-              <van-button type="info" size="normal" @click="submitAction"
-                >立即排班</van-button
-              >
+              <van-button type="info" size="normal" @click="submitAction">立即排班</van-button>
             </div>
           </van-col>
         </van-row>
       </div>
     </div>
-
+    <side-bar :active_index="0"></side-bar>
     <van-popup v-model="show_patient_picker" position="bottom" class="popup">
-      <van-picker
-        :columns="patients"
-        value-key="name"
-        @change="didChangePatient"
-      ></van-picker>
+      <van-picker :columns="patients" value-key="name" @change="didChangePatient"></van-picker>
     </van-popup>
     <van-popup v-model="show_mode_picker" position="bottom" class="popup">
-      <van-picker
-        :columns="modes"
-        value-key="name"
-        @change="didChangeMode"
-      ></van-picker>
+      <van-picker :columns="modes" value-key="name" @change="didChangeMode"></van-picker>
     </van-popup>
     <van-popup v-model="show_bed_picker" position="bottom" class="popup">
-      <van-picker
-        :columns="zone_device_options"
-        value-key="number"
-        @change="didChangeBed"
-      ></van-picker>
+      <van-picker :columns="zone_device_options" value-key="number" @change="didChangeBed"></van-picker>
     </van-popup>
     <van-popup v-model="show_sch_type_picker" position="bottom" class="popup">
-      <van-picker
-        :columns="schedule_types"
-        value-key="text"
-        @change="didChangeSchType"
-      ></van-picker>
+      <van-picker :columns="schedule_types" value-key="text" @change="didChangeSchType"></van-picker>
     </van-popup>
   </div>
 </template>
     border-bottom: 1px #e5e5e5 solid;
     position: fixed;
     top: 0;
-    left: 1.58rem;
+    left: 0;
     right: 0;
     z-index: 100;
     background: #fff;
     .nav {
       text-align: center;
       font-size: 0.36rem;
+      margin-right: 56px;
     }
   }
 
     min-height: calc(100vh - 2px);
     padding-top: 55px;
     padding-left: 20px;
+
     .row {
       padding: 5px 0;
       .title {
         line-height: 45px;
         width: 80px;
         float: left;
-        @media only screen and (max-width: 812px) {
+        // @media only screen and (max-width: 812px) {
+        //   font-size: 0.3rem !important;
+        // }
+        @media only screen and (max-width: 376px) {
+          width: 50px !important;
           font-size: 0.3rem !important;
         }
       }
         line-height: 40px;
         text-align: center;
         color: red;
+        @media only screen and (max-width: 812px) {
+          margin-left: -10px !important;
+        }
       }
     }
   }
   border-radius: 0 !important;
   top: initial !important;
 }
+.mainBox {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  > :first-child {
+    overflow: auto;
+    flex: 1;
+  }
+}
 </style>

src/pages/main/dialog/LongDialog.vue

 <template>
   <div>
-    <div class="Dialog"  v-show="showObj.paden_show">
+    <div class="Dialog" v-show="showObj.paden_show">
       <div class="DialogTit">
-        <span class="iconfont"  @click="$emit('closeLongDialog')">&#xe6e9;</span>
+        <span class="iconfont" @click="$emit('closeLongDialog')">&#xe6e9;</span>
         <h1 class="name">长期处方</h1>
         <span @click="submitSolution" class="success">完成</span>
       </div>
       <div class="DialogContent">
         <div class="item" @click="showMenu(0)">
           <h2 class="name">透析模式</h2>
-          <div class="content" >
+          <div class="content">
             <span class="text">{{dialysisSolution.mode_name}}</span>
             <span class="iconfont">&#xe6f9;</span>
           </div>
         <div class="item">
           <h2 class="name">透析时长(h)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.dialysis_duration">
+            <input type="number" v-model="dialysisSolution.dialysis_duration" />
             <!-- <span class="text">1</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span>  -->
           </div>
         </div>
         <div class="item" @click="showMenu(1)">
           <h2 class="name">透析器</h2>
-          <div class="content" >
+          <div class="content">
             <span class="text">{{dialysisSolution.hemodialysis_machine_name}}</span>
             <span class="iconfont">&#xe6f9;</span>
           </div>
         <div class="item">
           <h2 class="name">血流量(ml/min)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.blood_flow_volume">
+            <input type="number" v-model="dialysisSolution.blood_flow_volume" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">脱水量(L)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.dewater">
+            <input type="number" v-model="dialysisSolution.dewater" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">置换液(L)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.displace_liqui">
+            <input type="number" v-model="dialysisSolution.displace_liqui" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item" v-show="anticoagulant.shouji != -1">
           <h2 class="name">首剂({{anticoagulant.shouji_unit}})</h2>
           <div class="content">
-          <input type="text"  v-model="dialysisSolution.anticoagulant_shouji" :disabled="anticoagulant.shouji==1?false:true">
+            <input
+              type="text"
+              v-model="dialysisSolution.anticoagulant_shouji"
+              :disabled="anticoagulant.shouji==1?false:true"
+            />
           </div>
         </div>
         <div class="item" v-show="anticoagulant.weichi != -1">
           <h2 class="name">维持({{anticoagulant.weichi_unit}})</h2>
           <div class="content">
-          <input type="text"  v-model="dialysisSolution.anticoagulant_weichi" :disabled="anticoagulant.weichi==1?false:true">
+            <input
+              type="text"
+              v-model="dialysisSolution.anticoagulant_weichi"
+              :disabled="anticoagulant.weichi==1?false:true"
+            />
           </div>
         </div>
-        <div class="item"  v-show="anticoagulant.zongliang != -1">
+        <div class="item" v-show="anticoagulant.zongliang != -1">
           <h2 class="name">总量({{anticoagulant.zongliang_unit}})</h2>
           <div class="content">
-          <input type="text" v-model="dialysisSolution.anticoagulant_zongliang" :disabled="anticoagulant.zongliang==1?false:true" >
+            <input
+              type="text"
+              v-model="dialysisSolution.anticoagulant_zongliang"
+              :disabled="anticoagulant.zongliang==1?false:true"
+            />
           </div>
         </div>
-        <div class="item"  v-show="anticoagulant.gaimingcheng != -1">
+        <div class="item" v-show="anticoagulant.gaimingcheng != -1">
           <h2 class="name">钙({{anticoagulant.gaimingcheng_unit}})</h2>
           <div class="content">
-            <input type="text" v-model="dialysisSolution.anticoagulant_gaimingcheng" :disabled="anticoagulant.gaimingcheng==1?false:true" >
+            <input
+              type="text"
+              v-model="dialysisSolution.anticoagulant_gaimingcheng"
+              :disabled="anticoagulant.gaimingcheng==1?false:true"
+            />
           </div>
         </div>
-        <div class="item"  v-show="anticoagulant.gaijiliang != -1">
+        <div class="item" v-show="anticoagulant.gaijiliang != -1">
           <h2 class="name">钙剂量</h2>
           <div class="content">
-            <input type="text" v-model="dialysisSolution.anticoagulant_gaijiliang" :disabled="anticoagulant.gaijiliang==1?false:true" >
+            <input
+              type="text"
+              v-model="dialysisSolution.anticoagulant_gaijiliang"
+              :disabled="anticoagulant.gaijiliang==1?false:true"
+            />
           </div>
         </div>
 
         <div class="item">
           <h2 class="name">钾(mmol/L)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.kalium">
+            <input type="number" v-model="dialysisSolution.kalium" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">钠(mmol/L):</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.sodium">
+            <input type="number" v-model="dialysisSolution.sodium" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">钙(mmol/L)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.calcium">
+            <input type="number" v-model="dialysisSolution.calcium" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">碳酸氢盐(mmol/L)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.bicarbonate">
+            <input type="number" v-model="dialysisSolution.bicarbonate" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">葡萄糖(mmol/L)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.glucose">
+            <input type="number" v-model="dialysisSolution.glucose" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">干体重(kg)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.dry_weight">
+            <input type="number" v-model="dialysisSolution.dry_weight" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">透析液流量(ml/min)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.dialysate_flow">
+            <input type="number" v-model="dialysisSolution.dialysate_flow" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">透析液温度(℃)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.dialysate_temperature">
+            <input type="number" v-model="dialysisSolution.dialysate_temperature" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <div class="item">
           <h2 class="name">电导率(mS/cm)</h2>
           <div class="content">
-            <input type="number" v-model="dialysisSolution.conductivity">
+            <input type="number" v-model="dialysisSolution.conductivity" />
             <!-- <span class="text">HD</span>   -->
             <!-- <span class="iconfont">&#xe6f9;</span> -->
           </div>
         <textarea class="textarea" placeholder="请输入内容" v-model="dialysisSolution.remark"></textarea>
       </div>
       <!--<div class="footer">-->
-        <!--处方医生：{{doctor}}-->
+      <!--处方医生：{{doctor}}-->
       <!--</div>-->
     </div>
 
             </ul>
           </div>
         </div>
-    </div> -->
-    <long-dialog-menu title="模式" v-show="showObj.mode_show[0]" :show_index="0" :option_poro="modeList"  :data_prop="dialysisSolution" :show_prop="showObj" data_mode="mode" :index="dialysisSolution.mode_id"></long-dialog-menu>
+    </div>-->
+    <long-dialog-menu
+      title="模式"
+      v-show="showObj.mode_show[0]"
+      :show_index="0"
+      :option_poro="modeList"
+      :data_prop="dialysisSolution"
+      :show_prop="showObj"
+      data-_mode="mode"
+      :index="dialysisSolution.mode_id"
+    ></long-dialog-menu>
 
-    <long-dialog-menu title="透析器" v-show="showObj.mode_show[1]" :show_index="1" :option_poro="dialyserList"  :data_prop="dialysisSolution" :show_prop="showObj" data_mode="hemodialysis_machine" :index="dialysisSolution.hemodialysis_machine"></long-dialog-menu>
+    <long-dialog-menu
+      title="透析器"
+      v-show="showObj.mode_show[1]"
+      :show_index="1"
+      :option_poro="dialyserList"
+      :data_prop="dialysisSolution"
+      :show_prop="showObj"
+      data-_mode="hemodialysis_machine"
+      :index="dialysisSolution.hemodialysis_machine"
+    ></long-dialog-menu>
 
-    <long-dialog-menu title="灌流器" v-show="showObj.mode_show[2]" :show_index="2" :option_poro="perfusion_apparatus"  :data_prop="dialysisSolution" :show_prop="showObj" data_mode="perfusion_apparatus" :index="dialysisSolution.perfusion_apparatus"></long-dialog-menu>
+    <long-dialog-menu
+      title="灌流器"
+      v-show="showObj.mode_show[2]"
+      :show_index="2"
+      :option_poro="perfusion_apparatus"
+      :data_prop="dialysisSolution"
+      :show_prop="showObj"
+      data-_mode="perfusion_apparatus"
+      :index="dialysisSolution.perfusion_apparatus"
+    ></long-dialog-menu>
 
-    <long-dialog-menu title="置换方式" v-show="showObj.mode_show[3]" :show_index="3" :option_poro="replacementWays"  :data_prop="dialysisSolution"  :show_prop="showObj" data_mode="replacement_way" :index="dialysisSolution.replacement_way"></long-dialog-menu>
+    <long-dialog-menu
+      title="置换方式"
+      v-show="showObj.mode_show[3]"
+      :show_index="3"
+      :option_poro="replacementWays"
+      :data_prop="dialysisSolution"
+      :show_prop="showObj"
+      data-_mode="replacement_way"
+      :index="dialysisSolution.replacement_way"
+    ></long-dialog-menu>
 
-    <long-dialog-menu title="搞凝剂" v-show="showObj.mode_show[4]" :show_index="4" :option_poro="anticoagulantsConfitList"  :data_prop="dialysisSolution"  :show_prop="showObj" data_mode="anticoagulant" :index="dialysisSolution.anticoagulant"></long-dialog-menu>
+    <long-dialog-menu
+      title="搞凝剂"
+      v-show="showObj.mode_show[4]"
+      :show_index="4"
+      :option_poro="anticoagulantsConfitList"
+      :data_prop="dialysisSolution"
+      :show_prop="showObj"
+      data-_mode="anticoagulant"
+      :index="dialysisSolution.anticoagulant"
+    ></long-dialog-menu>
   </div>
 </template>
 
         return false;
       }
       this.anticoagulant = this.anticoagulantsConfit[thismode];
-      this.dialysisSolution.anticoagulant_name = this.anticoagulantsConfit[thismode].name;
+      this.dialysisSolution.anticoagulant_name = this.anticoagulantsConfit[
+        thismode
+      ].name;
     },
-    "dialysisSolution.hemodialysis_machine":function(){
+    "dialysisSolution.hemodialysis_machine": function() {
       var machine = parseInt(this.dialysisSolution.hemodialysis_machine);
       if (isNaN(machine) || machine <= 0) {
         return;
       }
       for (let index = 0; index < this.dialyserList.length; index++) {
         if (machine == this.dialyserList[index].id) {
-          this.dialysisSolution.hemodialysis_machine_name = this.dialyserList[index].name;
+          this.dialysisSolution.hemodialysis_machine_name = this.dialyserList[
+            index
+          ].name;
           break;
         }
       }
     },
-    "dialysisSolution.perfusion_apparatus": function(){
+    "dialysisSolution.perfusion_apparatus": function() {
       var apparatus = parseInt(this.dialysisSolution.perfusion_apparatus);
-      if (isNaN(apparatus) || apparatus<=0) {
+      if (isNaN(apparatus) || apparatus <= 0) {
         return false;
       }
       for (let index = 0; index < this.perfusion_apparatus.length; index++) {
         if (apparatus == this.perfusion_apparatus[index].id) {
-          this.dialysisSolution.perfusion_apparatus_name = this.perfusion_apparatus[index].name;
+          this.dialysisSolution.perfusion_apparatus_name = this.perfusion_apparatus[
+            index
+          ].name;
           break;
         }
       }
     },
-    "dialysisSolution.replacement_way": function(){
+    "dialysisSolution.replacement_way": function() {
       var way = parseInt(this.dialysisSolution.replacement_way);
-      if (isNaN(way) || way<=0) {
+      if (isNaN(way) || way <= 0) {
         return false;
       }
       for (let index = 0; index < this.replacementWays.length; index++) {
         if (way == this.replacementWays[index].id) {
-          this.dialysisSolution.replacement_way_name = this.replacementWays[index].name;
+          this.dialysisSolution.replacement_way_name = this.replacementWays[
+            index
+          ].name;
           break;
         }
       }
-    },
+    }
   },
   // computed:{
   //   dialysisSolution:function(){
   //     }
   //   }
 
-
   // },
   created() {
     this.doctor = this.$store.getters.user.user.user_name;
     this.patient = this.patient_prop;
 
     // console.log("this.solution_prop",this.solution_prop);
-    if (this.solution_prop != null && this.solution_prop.id != '') {
+    if (this.solution_prop != null && this.solution_prop.id != "") {
       for (const key in this.solution_prop) {
         this.dialysisSolution[key] = this.solution_prop[key];
       }
     }
 
-
     this.dialyserList = this.machines_prop;
-  },
+  }
   // data() {
   //   return {
   //     show_two_menu: false
   max-height: 10.6rem;
   min-height: 5rem;
   overflow-y: scroll;
-   @media only screen and (max-width: 812px) {
+  @media only screen and (max-width: 812px) {
     min-height: 8rem !important;
   }
   ul {
   max-height: 10.6rem;
   min-height: 5rem;
   overflow-y: scroll;
-  
+
   ul {
     li {
       line-height: 1rem;

src/pages/main/dialog/TwoMenu.vue

   <div class="Dialog" v-show="show">
     <div class="DialogTit">
       <div class="back" @click="hide()">
-        <span class="iconfont">&#xe720; </span>返回
+        <span class="iconfont">&#xe720;</span>返回
       </div>
       <h1 class="name">{{ title }}</h1>
       <!-- <span class="success" @click="handle_selected()">完成</span> -->
-      <span v-if="type == 1" class="success"> </span>
-      <span v-if="type == 2" @click="handle_selected" class="success"
-        >确定</span
-      >
+      <span v-if="type == 1" class="success"></span>
+      <span v-if="type == 2" @click="handle_selected" class="success">确定</span>
     </div>
 
     <div class="optionsBox" v-show="type == 1">
                 single.id_key.lenght == 0 ? item : item[single.id_key]
               )
             "
-          >
-            {{ single.show_key.lenght == 0 ? item : item[single.show_key] }}
-          </li>
+          >{{ single.show_key.lenght == 0 ? item : item[single.show_key] }}</li>
         </ul>
       </div>
     </div>
               v-for="(item, index) in mutable.options"
               :key="index"
               :name="mutable.id_key.lenght == 0 ? item : item[mutable.id_key]"
-            >
-              {{ mutable.show_key.lenght == 0 ? item : item[mutable.show_key] }}
-            </van-checkbox>
+            >{{ mutable.show_key.lenght == 0 ? item : item[mutable.show_key] }}</van-checkbox>
           </van-checkbox-group>
         </li>
       </ul>

src/pages/main/dialog/modify_order/ModifyAdviceGroup.vue

             <div class="cell" style="margin-top: 0;">
               <label>开嘱医生</label>
               <span>{{ $store.getters.user.user.user_name }}</span>
-
             </div>
           </div>
           <table class="table">
               <th width="15%">给药途径</th>
               <th width="15%">执行频率</th>
             </tr>
-            <tr v-for="(advice, index) in advices" :key="index" :class="{ 'row-class-active': index == current_advice_index }" @click="selectAdviceAction(index, advice)">
-              <td :class="{ 'advice_name': advice.parent_id == 0, 'subdrug_name': advice.parent_id > 0 }">{{ advice.advice_name }}</td>
+            <tr
+              v-for="(advice, index) in advices"
+              :key="index"
+              :class="{ 'row-class-active': index == current_advice_index }"
+              @click="selectAdviceAction(index, advice)"
+            >
+              <td
+                :class="{ 'advice_name': advice.parent_id == 0, 'subdrug_name': advice.parent_id > 0 }"
+              >{{ advice.advice_name }}</td>
               <td>{{ advice.advice_desc }}{{advice.drug_spec_unit}}</td>
               <td>{{ advice.prescribing_number }}{{ advice.prescribing_number_unit }}</td>
               <td>{{ advice.single_dose }} {{ advice.single_dose_unit }}</td>
 <script>
 import ModifyAdviceForm from "./modify_order_form";
 import { parseTime } from "@/utils";
-import {
-  EditDoctorAdvice,
-  modifyAdviceGroupStartTime,
-} from "@/api/advice";
-import { Toast } from 'vant';
+import { EditDoctorAdvice, modifyAdviceGroupStartTime } from "@/api/advice";
+import { Toast } from "vant";
 import AddNewOrderDialog from "../new_order/AddNewOrders";
 
 export default {
   name: "ModifyAdviceGroup",
   components: {
     ModifyAdviceForm,
-    AddNewOrderDialog,
+    AddNewOrderDialog
   },
   props: {
     patient_id: {
       default: function() {
         return [];
       }
-    },
+    }
   },
   data() {
     return {
       advices: [],
 
       current_advice_index: -1,
-      current_advice: null,
+      current_advice: null
     };
   },
   computed: {
       if (this.start_time != null) {
         return parseTime(this.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";
       }
-      return ""
+      return "";
     },
     record_date_str: function() {
       if (this.record_date != null) {
         return parseTime(this.record_date, "{y}-{m}-{d} {h}:{i}");
       }
-      return ""
+      return "";
     }
   },
   methods: {
     show: function(group_no, advices) {
       this.visibility = true;
       this.sub_dialog_key = 0;
-      this.group_no = group_no
-      this.advices = advices
+      this.group_no = group_no;
+      this.advices = advices;
       if (this.advices.length > 0) {
-        this.start_time = new Date(this.advices[0].start_time * 1000)
-        this.record_date = new Date(this.advices[0].created_time * 1000)
+        this.start_time = new Date(this.advices[0].start_time * 1000);
+        this.record_date = new Date(this.advices[0].created_time * 1000);
       }
     },
     backAction: function() {
       this.visibility = false;
       this.sub_dialog_key = 0;
-      this.group_no = 0
-      this.advices = []
-      this.start_time = new Date()
-      this.record_date = new Date()
+      this.group_no = 0;
+      this.advices = [];
+      this.start_time = new Date();
+      this.record_date = new Date();
       this.$emit("back");
     },
     selectStartTimeAction: function() {
       this.$refs.start_time_picker.open();
     },
     selectAdviceAction: function(index, advice) {
-      this.current_advice_index = index
-      this.current_advice = advice
+      this.current_advice_index = index;
+      this.current_advice = advice;
     },
     cancelSelectAdvice: function() {
-      this.current_advice_index = -1
-      this.current_advice = null
+      this.current_advice_index = -1;
+      this.current_advice = null;
     },
     modifyAction: function() {
       if (this.current_advice_index < 0) {
-        return
+        return;
       }
-      this.sub_dialog_key = 1
+      this.sub_dialog_key = 1;
       this.$refs.modify_advice_form.showWithModify({
-          id: this.current_advice.id,
-          parent_id: this.current_advice.parent_id,
-          title: this.current_advice.advice_name,
-          advice_desc: this.current_advice.advice_desc,
-          drug_spec: this.current_advice.drug_spec,
-          drug_spec_unit: this.current_advice.drug_spec_unit,
-          delivery_way: this.current_advice.delivery_way,
-          execution_frequency: this.current_advice.execution_frequency,
-          single_dose: this.current_advice.single_dose,
-          single_dose_unit: this.current_advice.single_dose_unit,
-          prescribing_number: this.current_advice.prescribing_number,
-          prescribing_number_unit: this.current_advice.prescribing_number_unit
-        })
+        id: this.current_advice.id,
+        parent_id: this.current_advice.parent_id,
+        title: this.current_advice.advice_name,
+        advice_desc: this.current_advice.advice_desc,
+        drug_spec: this.current_advice.drug_spec,
+        drug_spec_unit: this.current_advice.drug_spec_unit,
+        delivery_way: this.current_advice.delivery_way,
+        execution_frequency: this.current_advice.execution_frequency,
+        single_dose: this.current_advice.single_dose,
+        single_dose_unit: this.current_advice.single_dose_unit,
+        prescribing_number: this.current_advice.prescribing_number,
+        prescribing_number_unit: this.current_advice.prescribing_number_unit
+      });
     },
     newAdviceAction: function() {
-      this.cancelSelectAdvice()
-      this.sub_dialog_key = 2
+      this.cancelSelectAdvice();
+      this.sub_dialog_key = 2;
     },
 
     didSelectStartTime: function(time) {
       // Toast.loading({ forbidClick: true, duration: 0 });
-      console.log(this.start_time)
-      this.loading = true
-      modifyAdviceGroupStartTime(this.group_no, parseTime(this.start_time, "{y}-{m}-{d} {h}:{i}") + ":00").then(rs => {
-        if (rs.data.state == 1) {
-          var new_start_time = rs.data.data.start_time
-          for (let index = 0; index < this.advices.length; index++) {
-            const advice = this.advices[index];
-            advice.start_time = new_start_time
+      console.log(this.start_time);
+      this.loading = true;
+      modifyAdviceGroupStartTime(
+        this.group_no,
+        parseTime(this.start_time, "{y}-{m}-{d} {h}:{i}") + ":00"
+      )
+        .then(rs => {
+          if (rs.data.state == 1) {
+            var new_start_time = rs.data.data.start_time;
+            for (let index = 0; index < this.advices.length; index++) {
+              const advice = this.advices[index];
+              advice.start_time = new_start_time;
+            }
+            this.start_time = new Date(new_start_time * 1000);
+          } else {
+            Toast.fail(rs.data.msg);
           }
-          this.start_time = new Date(new_start_time * 1000)
-
-        } else {
-          Toast.fail(rs.data.msg)
-        }
-        this.loading = false
-
-      }).catch(err => {
-        Toast.fail(err)
-        this.loading = false
-      })
+          this.loading = false;
+        })
+        .catch(err => {
+          Toast.fail(err);
+          this.loading = false;
+        });
     },
     didModifyAdvice: function(advice) {
-      this.loading = true
+      this.loading = true;
       EditDoctorAdvice(advice.id, {
         advice_name: advice.title,
         advice_desc: advice.advice_desc,
-        remark:advice.remark,
-        drug_spec_unit:advice.drug_spec_unit,
+        remark: advice.remark,
+        drug_spec_unit: advice.drug_spec_unit,
         delivery_way: advice.delivery_way,
         execution_frequency: advice.execution_frequency,
         single_dose: String(advice.single_dose),
         single_dose_unit: advice.single_dose_unit,
         prescribing_number: String(advice.prescribing_number),
         prescribing_number_unit: advice.prescribing_number_unit,
-        drug_spec_unit:advice.drug_spec_unit
-      }).then(rs => {
-        if (rs.data.state == 1) {
-          var resp_advice = rs.data.data.advice
-
-          this.current_advice
-          this.current_advice.advice_name = resp_advice.advice_name
-          this.current_advice.advice_desc = resp_advice.advice_desc
-          this.current_advice.drug_spec_unit = resp_advice.drug_spec_unit
-          this.current_advice.remark = resp_advice.remark
-          this.current_advice.delivery_way = resp_advice.delivery_way,
-          this.current_advice.execution_frequency = resp_advice.execution_frequency,
-          this.current_advice.single_dose = resp_advice.single_dose,
-          this.current_advice.single_dose_unit = resp_advice.single_dose_unit,
-          this.current_advice.prescribing_number = resp_advice.prescribing_number,
-          this.current_advice.prescribing_number_unit = resp_advice.prescribing_number_unit
-          this.sub_dialog_key = 0
-          this.$refs.modify_advice_form.dismiss()
-
-        } else {
-          Toast.fail(rs.data.msg)
-        }
-        this.loading = false
-
-      }).catch(err => {
-        Toast.fail(err)
-        this.loading = false
+        drug_spec_unit: advice.drug_spec_unit
       })
+        .then(rs => {
+          if (rs.data.state == 1) {
+            var resp_advice = rs.data.data.advice;
+
+            this.current_advice;
+            this.current_advice.advice_name = resp_advice.advice_name;
+            this.current_advice.advice_desc = resp_advice.advice_desc;
+            this.current_advice.drug_spec_unit = resp_advice.drug_spec_unit;
+            this.current_advice.remark = resp_advice.remark;
+            (this.current_advice.delivery_way = resp_advice.delivery_way),
+              (this.current_advice.execution_frequency =
+                resp_advice.execution_frequency),
+              (this.current_advice.single_dose = resp_advice.single_dose),
+              (this.current_advice.single_dose_unit =
+                resp_advice.single_dose_unit),
+              (this.current_advice.prescribing_number =
+                resp_advice.prescribing_number),
+              (this.current_advice.prescribing_number_unit =
+                resp_advice.prescribing_number_unit);
+            this.sub_dialog_key = 0;
+            this.$refs.modify_advice_form.dismiss();
+          } else {
+            Toast.fail(rs.data.msg);
+          }
+          this.loading = false;
+        })
+        .catch(err => {
+          Toast.fail(err);
+          this.loading = false;
+        });
     },
     didCreateAdvices: function(advices) {
-      this.advices.push(...advices)
-      this.sub_dialog_key = 0
+      this.advices.push(...advices);
+      this.sub_dialog_key = 0;
     }
   }
 };

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

 <template>
   <div v-loading="loading">
-    <div class="Dialog" style="width: 16.8rem;" v-show="show_dialog_key == 0">
+    <div class="Dialog" style="width: 11.8rem;" v-show="show_dialog_key == 0">
       <div class="DialogTit">
         <div class="back" @click="backAction">
           <span class="iconfont">&#xe720;</span>返回
         <span class="success" @click="comfirmAction">完成</span>
       </div>
       <div class="yzNav" style="width:100%;">
-            <span @click="addOrderByTemplateAction">选择医嘱模板</span>
-            <span @click="addNewOrderAction">新增医嘱内容</span>
-            <span @click="modifyOrderAction">修改医嘱内容</span>
-            <span @click="deleteOrderAction">删除医嘱内容</span>
+        <span @click="addOrderByTemplateAction">选择医嘱模板</span>
+        <span @click="addNewOrderAction">新增医嘱内容</span>
+        <span @click="modifyOrderAction">修改医嘱内容</span>
+        <span @click="deleteOrderAction">删除医嘱内容</span>
       </div>
-      <div class="DialogContent choose" style="height: 6.2rem;" >
+      <div class="DialogContent choose" style="height: 6.2rem;">
         <div class="content clearfix">
           <div style="overflow: hidden;">
             <div class="cell" style="margin-top: 0;">
               <el-input :value="start_time_str" readonly @focus="selectStartTimeAction"></el-input>
             </div>
           </div>
-          <div style="overflow: hidden;margin-top: 15px" >
+          <div style="overflow: hidden;margin-top: 15px">
             <div class="cell" style="margin-top: 0;">
               <label>开嘱医生: {{$store.getters.user.user.user_name}}</label>
             </div>
                   style="text-align: left; padding-left: 5px; padding-right: 5px;"
                 >{{ advice.title }}</td>
                 <td v-if="advice.advice_desc">{{ advice.advice_desc }}{{advice.drug_spec_unit}}</td>
-                <td v-if="advice.prescribing_number">{{ advice.prescribing_number }}{{ advice.prescribing_number_unit }}</td>
+                <td
+                  v-if="advice.prescribing_number"
+                >{{ advice.prescribing_number }}{{ advice.prescribing_number_unit }}</td>
                 <td v-else></td>
                 <td v-if="advice.single_dose">{{ advice.single_dose }} {{ advice.single_dose_unit }}</td>
                 <td v-else></td>
                   style="text-align: left; padding-right: 5px; padding-left: 25px;"
                 >{{ subdrug.title }}</td>
                 <td>{{ subdrug.advice_desc }} {{subdrug.drug_spec_unit}}</td>
-                <td><span v-if="subdrug.prescribing_number">{{ subdrug.prescribing_number }}{{ subdrug.prescribing_number_unit }}</span></td>
-                <td><span v-if="subdrug.single_dose">{{ subdrug.single_dose }} {{ subdrug.single_dose_unit }}</span></td>
+                <td>
+                  <span
+                    v-if="subdrug.prescribing_number"
+                  >{{ subdrug.prescribing_number }}{{ subdrug.prescribing_number_unit }}</span>
+                </td>
+                <td>
+                  <span
+                    v-if="subdrug.single_dose"
+                  >{{ subdrug.single_dose }} {{ subdrug.single_dose_unit }}</span>
+                </td>
                 <!--<td v-if="subdrug.single_dose">{{ subdrug.single_dose }} {{ subdrug.single_dose_unit }}</td>-->
                 <td></td>
                 <td></td>
     },
     drug_spec_unit_options: {
       type: Array,
-      default: function () {
+      default: function() {
         return [];
       }
     },
           prescribing_number_unit: advice.prescribing_number_unit,
           delivery_way: advice.delivery_way,
           execution_frequency: advice.execution_frequency,
-          remark : advice.remark,
+          remark: advice.remark,
           subdrugs: []
         };
         for (let s_i = 0; s_i < advice.subdrugs.length; s_i++) {
     },
     didSelectTemplateAdvice: function(resp_advices) {
       this.show_dialog_key = 0;
-      var advices = []
+      var advices = [];
       for (let index = 0; index < resp_advices.length; index++) {
         const adv = resp_advices[index];
         if (adv.parent_id == 0) {
             prescribing_number: adv.prescribing_number,
             prescribing_number_unit: adv.prescribing_number_unit,
             subdrugs: []
-          })
+          });
         }
       }
       for (let r_a_i = 0; r_a_i < resp_advices.length; r_a_i++) {
           advice.prescribing_number = order.prescribing_number;
           advice.prescribing_number_unit = order.prescribing_number_unit;
           advice.remark = order.remark;
-
         } else {
           var subdrug = advice.subdrugs[this.selecting_subdrug_index];
           subdrug.title = order.title;
   }
 
   .row-class-active > td {
-    background: #badcff!important;
+    background: #badcff !important;
   }
 }
 </style>

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

                 "
                 class="select_all_btn"
                 @click="selectTemplateAllAdviceAction(template)"
-              >
-                全选
-              </div>
+              >全选</div>
               <div
                 v-show="
                   isFold(template.id) && isTemplateSelectingAllAdvices(template)
                 "
                 class="select_all_btn"
                 @click="cancelSelectTemplateAllAdviceAction(template)"
-              >
-                取消全选
-              </div>
+              >取消全选</div>
 
               <span v-if="isFold(template.id)" class="iconfont">&#xe749;</span>
               <span v-if="!isFold(template.id)" class="iconfont">&#xe74a;</span>
-              <div @click="foldTemplateAction(template.id)" class="name">
-                {{ template.name }}
-              </div>
+              <div @click="foldTemplateAction(template.id)" class="name">{{ template.name }}</div>
             </div>
             <div
               v-show="isFold(template.id)"
               :key="index"
             >
               <span v-if="advice.parent_id > 0" class="subdrug_info">
-                <span> {{ advice.advice_name }}</span>
-                <span>
-                  {{ advice.advice_desc }}{{ advice.drug_spec_unit }}
-                </span>
+                <span>{{ advice.advice_name }}</span>
+                <span>{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span>
                 <span v-if="advice.prescribing_number">
                   {{ advice.prescribing_number }}
-                  {{ advice.prescribing_number_unit }}</span
-                >
+                  {{ advice.prescribing_number_unit }}
+                </span>
                 <span v-if="advice.single_dose">
                   单次用量{{ advice.single_dose
-                  }}{{ advice.single_dose_unit }}</span
-                >
+                  }}{{ advice.single_dose_unit }}
+                </span>
               </span>
               <van-checkbox
                 v-else
                 :value="isAdviceSelecting(advice.id)"
                 @click="selectAdviceAction(template, advice)"
               >
-                <span> {{ advice.advice_name }}</span>
-                <span>
-                  {{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span
-                >
+                <span>{{ advice.advice_name }}</span>
+                <span>{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span>
                 <span v-if="advice.prescribing_number">
                   {{ advice.prescribing_number }}
-                  {{ advice.prescribing_number_unit }}</span
-                >
+                  {{ advice.prescribing_number_unit }}
+                </span>
                 <span v-if="advice.single_dose">
                   单次用量{{ advice.single_dose
-                  }}{{ advice.single_dose_unit }}</span
-                >
-                <span> {{ advice.delivery_way }} </span>
-                <span> {{ advice.execution_frequency }}</span>
+                  }}{{ advice.single_dose_unit }}
+                </span>
+                <span>{{ advice.delivery_way }}</span>
+                <span>{{ advice.execution_frequency }}</span>
                 <!--{{ advice.advice_name }} {{ advice.advice_desc }} {{ advice.prescribing_number }}{{ advice.prescribing_number_unit }} 单次用量{{ advice.single_dose }}{{ advice.single_dose_unit }} {{ advice.delivery_way }} {{ advice.execution_frequency }}-->
               </van-checkbox>
             </div>
 };
 </script>
 
-<style style="stylesheet/scss" lang="scss" scoped>
+<style style="stylesheet/scss" lang="scss">
 .optionsBox {
   background: #fff;
   max-height: 10.6rem;
   min-height: 5rem;
   overflow-y: scroll;
   @media only screen and (max-width: 812px) {
-    min-height: 8rem !important;
+    min-height: 17.8rem !important;
   }
   ul {
     li {
 
   .template {
     border-bottom: 1px #e5e5e5 solid;
-
+    overflow: hidden;
     .template_name {
       height: 1rem;
       line-height: 1rem;
       }
       .name {
         display: inline-block;
-        width: 80%;
+        width: 76%;
       }
     }
 
       color: #445a70;
 
       .advice_info {
-        height: 1rem;
+        min-height: 1rem;
         line-height: 1rem;
         padding: 0 0.38rem 0 0;
       }
+      .van-checkbox__icon {
+        float: left;
+        width: 8%;
+        margin-top: 6px;
+      }
+      .van-checkbox__label {
+        float: left;
+        width: 92%;
+        line-height: 1rem;
+      }
+      .van-checkbox__label {
+        margin-left: 0px;
+      }
       .subdrug_info {
         height: 1rem;
         line-height: 1rem;
     max-height: 8rem !important;
     min-height: 8rem !important;
   }
+  @media only screen and (max-width: 768px) {
+    max-height: 16rem !important;
+    min-height: 8rem !important;
+  }
   ul {
     li {
       line-height: 1rem;

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

   <div v-if="visibility" class="Dialog">
     <div class="DialogTit">
       <div class="back" @click="cancle()">
-        <span class="iconfont">&#xe720; </span>返回
+        <span class="iconfont">&#xe720;</span>返回
       </div>
       <h1 class="name">{{ propsForm.title }}</h1>
-      <span v-if="propsForm.isMultiple == 1" @click="comfirm" class="success">
-      </span>
-      <span v-if="propsForm.isMultiple == 2" @click="comfirm" class="success"
-        >确定</span
-      >
+      <span v-if="propsForm.isMultiple == 1" @click="comfirm" class="success"></span>
+      <span v-if="propsForm.isMultiple == 2" @click="comfirm" class="success">确定</span>
     </div>
 
     <div v-if="propsForm.isMultiple == 1" class="optionsBox">
             :key="item.id"
             value="item"
             :class="propsForm.selectId == item.id ? 'tick' : ''"
-          >
-            {{ item.name }}
-          </li>
+          >{{ item.name }}</li>
           <!--<li v-if="propsForm.isHasOther == 1 && this.$store.getters.user.template_info.template_id == 2" @click="itemClick(-1)"  :key="-1" value="-1" :class="propsForm.selectId == -1? 'tick':'' ">其他</li>-->
         </ul>
       </div>
               v-for="(item, index) in propsForm.list"
               :key="index"
               :name="item.name"
-            >
-              {{ item.name }}
-            </van-checkbox>
+            >{{ item.name }}</van-checkbox>
           </van-checkbox-group>
         </li>
       </ul>
   @media only screen and (max-width: 812px) {
     min-height: 8rem !important;
   }
+  @media only screen and (max-width: 415px) {
+    height: 16.8rem !important;
+  }
+  @media only screen and (min-width: 666px) and (max-width: 737px) {
+    max-height: 8rem;
+    min-height: 7rem !important;
+  }
+  @media only screen and (max-width: 768px) {
+    max-height: 16rem !important;
+  }
+  @media only screen and (min-width: 666px) and (max-width: 737px) {
+    max-height: 8rem;
+    min-height: 7rem !important;
+  }
   ul {
     overflow-y: scroll;
     max-height: 9rem;
+    @media only screen and (min-width: 666px) and (max-width: 737px) {
+      max-height: 8rem;
+    }
+    @media only screen and (max-width: 768px) {
+      max-height: 16rem;
+    }
     li {
       height: 1.1rem;
       line-height: 1.1rem;
     max-height: 8rem !important;
     min-height: 8rem !important;
   }
-
+  @media only screen and (max-width: 768px) {
+    max-height: 16rem !important;
+    min-height: 8rem !important;
+  }
+  @media only screen and (min-width: 769px) and (max-width: 1024px) {
+    max-height: 10.8rem !important;
+  }
   ul {
     li {
       line-height: 1rem;

src/pages/main/dialysis/CheckTab.vue

 <template>
   <div class="fixedTop">
     <div class="nav">
-      <ul style="width: 90%">
-        <li  v-for="(item,i) in inspectionDate" :key="i" :class="index == i? 'active':'' "  @click="ClickTab(i,item)" >{{item.project_name}}</li>
-      </ul>
+      <!-- <ul style="width: 90%">
+        <li
+          v-for="(item,i) in inspectionDate"
+          :key="i"
+          :class="index == i? 'active':'' "
+          @click="ClickTab(i,item)"
+        >{{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-tabs>
+      <!-- <van-tabs v-model="active">
+        <van-tab title="标签 1">内容 1</van-tab>
+        <van-tab title="标签 2">内容 2</van-tab>
+        <van-tab title="标签 3">内容 3</van-tab>
+        <van-tab title="标签 4">内容 4</van-tab>
+      </van-tabs>-->
     </div>
 
     <div class="tab-content">
-        <inspection-item-table ref="item"></inspection-item-table>
+      <inspection-item-table ref="item"></inspection-item-table>
     </div>
   </div>
 </template>
     this.patient = this.$route.query.patient_id;
     this.GetList();
   },
+  mounted() {
+    this.active = 0;
+  },
   data() {
     return {
       index: 0,
       inspectionDate: [],
-      patient: 0
+      patient: 0,
+      active: 0
     };
   },
 
       GetInspection(params).then(response => {
         this.inspectionDate = [];
         if (response.data.state == 1) {
+          console.log(this.$refs.item);
           this.inspectionDate = response.data.data.reference;
           this.$refs.item.GetList(1, this.inspectionDate[0]);
         }
       });
+    },
+    onClick(num, title) {
+      // console.log(this.inspectionDate);
+      // console.log(num);
+      console.log(this.$refs.item);
+
+      this.inspectionDate.map((items, i) => {
+        if (num == i) {
+          this.index = i;
+          this.$refs.item.GetList(items.project_id, items);
+        }
+      });
     }
   }
 };
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-  .nav {
-    border-bottom: 1px #e5e5e5 solid;
-    background: #fff;
-     position: fixed;
-    top: 116px;
-    right: 0;
-    z-index: 55;
-    left: 1.58rem;
-    background: #fff;
-    ul {
-      width: 60%;
-      margin: 0 auto;
-      @include box-sizing;
-      @include display-flex;
-      @include align-items-center;
-      @include text-align;
-      @include justify-content-between;
-      li {
-        font-size: 0.32rem;
-        float: left;
-        color: $pgh-color;
-        padding: 0.3rem 0;
-        cursor: pointer;
-      }
-      .active {
-        position: relative;
-        &::before {
-          width: 100%;
-          height: 2px;
-          color: $main-color;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          content: "";
-          background: $main-color;
-        }
+.nav {
+  border-bottom: 1px #e5e5e5 solid;
+  background: #fff;
+  position: fixed;
+  top: 76px;
+  @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: 768px) and (max-width: 1024px) {
+    top: 117px !important;
+  }
+  @media only screen and (min-width: 1024px) {
+    top: 117px !important;
+  }
+  right: 0;
+  z-index: 55;
+  left: 0;
+  background: #fff;
+  ul {
+    width: 60%;
+    margin: 0 auto;
+    @include box-sizing;
+    @include display-flex;
+    @include align-items-center;
+    @include text-align;
+    @include justify-content-between;
+    li {
+      font-size: 0.32rem;
+      float: left;
+      color: $pgh-color;
+      padding: 0.3rem 0;
+      cursor: pointer;
+    }
+    .active {
+      position: relative;
+      &::before {
+        width: 100%;
+        height: 2px;
+        color: $main-color;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        content: "";
+        background: $main-color;
       }
     }
   }
-
+}
 </style>
 
+
+

src/pages/main/dialysis/DialysisTab.vue

 <template>
-    <div class="fixedBox">
-        <div class="nav">
-            <ul>
-                <li v-for="(item,i) in ['长期透析处方','透析记录','排班信息','宣教信息']" :key="i" :class="index == i? 'active':'' "  @click="ClickTab(i)" >{{item}}</li>
-            </ul>
-        </div>
+  <div class="fixedBox">
+    <div class="nav">
+      <ul>
+        <li
+          v-for="(item,i) in ['长期透析处方','透析记录','排班信息','宣教信息']"
+          :key="i"
+          :class="index == i? 'active':'' "
+          @click="ClickTab(i)"
+        >{{item}}</li>
+      </ul>
+    </div>
 
-        <div class="tab-content">
-            <long-table v-show="index==0" title="长期透析处方"></long-table>
-            <record-table v-show="index==1" title="透析记录"></record-table>
-            <!--<advice-table v-show="index==2" title="医嘱信息"></advice-table>-->
-            <schedul-table v-show="index==2" class="排班信息"></schedul-table>
-            <mission-table v-show="index==3" class="宣教信息"></mission-table>
-        </div>
+    <div class="tab-content">
+      <long-table v-show="index==0" title="长期透析处方"></long-table>
+      <record-table v-show="index==1" title="透析记录"></record-table>
+      <!--<advice-table v-show="index==2" title="医嘱信息"></advice-table>-->
+      <schedul-table v-show="index==2" class="排班信息"></schedul-table>
+      <mission-table v-show="index==3" class="宣教信息"></mission-table>
     </div>
+  </div>
 </template> 
 
 <script>
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-.fixedBox{
- padding-top:53px; 
+.fixedBox {
+  padding-top: 40px;
   background: #fff;
   min-height: calc(100vh - 64px);
-.nav {
-  border-bottom: 1px #e5e5e5 solid;
+  @media only screen and (min-width: 376px) and (max-width: 737px) {
+    padding-top: 46px;
+  }
+  @media only screen and (min-width: 768px) and (max-width: 1024px) {
+    padding-top: 74px;
+  }
+  .nav {
+    border-bottom: 1px #e5e5e5 solid;
     position: fixed;
-  top: 63px;
-  right: 0;
-  z-index: 66;
-  left: 1.58rem;
-  background: #fff;
-    background: #fff;
-  ul {
-    width: 60%;
-    margin: 0 auto;
-    @include box-sizing;
-    @include display-flex;
-    @include align-items-center;
-    @include text-align;
-    @include justify-content-between;
-    li {
-      font-size: 0.32rem;
-      float: left;
-      color: $pgh-color;
-      padding: 0.3rem 0;
-      cursor: pointer;
+    top: 51px;
+    @media only screen and (min-width: 768px) and (max-width: 1024px) {
+      top: 64px;
+    }
+    @media only screen and (min-width: 376px) and (max-width: 668px) {
+      top: 50px;
     }
-    .active {
-      position: relative;
-      &::before {
-        width: 100%;
-        height: 2px;
-        color: $main-color;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        content: "";
-        background:$main-color;
+    right: 0;
+    z-index: 66;
+    left: 0;
+    background: #fff;
+    background: #fff;
+    ul {
+      width: 60%;
+      margin: 0 auto;
+      @include box-sizing;
+      @include display-flex;
+      @include align-items-center;
+      @include text-align;
+      @include justify-content-between;
+      li {
+        font-size: 0.32rem;
+        float: left;
+        color: $pgh-color;
+        padding: 0.3rem 0;
+        cursor: pointer;
+      }
+      .active {
+        position: relative;
+        &::before {
+          width: 100%;
+          height: 2px;
+          color: $main-color;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          content: "";
+          background: $main-color;
+        }
       }
     }
   }
 }
-}
-
 </style>
 

src/pages/main/dialysis/InspectionItemTable.vue

 <template>
   <div>
-
     <div class="blueBorder"></div>
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      finished-text="  "
-      @load="onLoad"
-    >
+    <van-list v-model="loading" :finished="finished" finished-text="  " @load="onLoad">
       <table class="table">
         <tr>
           <th width="20%">检查项目</th>
           <td width="10%">{{item.unit}}</td>
         </tr>
 
-        <tr v-if="items.isExpand" class="table" v-for="(item,index) in items.inspection_hide_item" :key="index">
+        <tr
+          v-if="items.isExpand"
+          class="table"
+          v-for="(item,index) in items.inspection_hide_item"
+          :key="index"
+        >
           <td width="20%">{{item.item_name}}</td>
           <td width="10%">{{item.value}}</td>
           <td width="10%">{{item.range_min}} ~ {{item.range_max}}</td>
         </tr>
         <tr>
           <td width="20%"></td>
-          <td width="10%" style="color:#409EFF;" @click="expandTable(indexs)" v-model="isExpand">{{items.expandName}}</td>
+          <td
+            width="10%"
+            style="color:#409EFF;"
+            @click="expandTable(indexs)"
+            v-model="isExpand"
+          >{{items.expandName}}</td>
           <td width="10%"></td>
           <td width="10%"></td>
         </tr>
       </table>
 
-
-      <div class="NoData" v-show="inspections_item.length == 0"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></div>
+      <div class="NoData" v-show="inspections_item.length == 0">
+        <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
+      </div>
     </van-list>
-
-
   </div>
 </template>
 
       @include align-items-center;
       @include text-align;
       @include justify-content-between;
-    padding: 0.16rem 0;
-      
+      padding: 0.16rem 0;
+
       .iconfont {
         margin: 0 0.1rem;
       }
     }
   }
 }
-.van-list{
+.van-list {
   background: #fff;
   min-height: calc(100vh - 178px);
-  margin-top: 105px; 
+  margin-top: 76px;
+  @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: 768px) and (max-width: 1023px) {
+    margin-top: 114px !important;
+  }
+  @media only screen and (min-width: 1024px) {
+    margin-top: 96px !important;
+  }
+}
+</style>
+
+<style lang="scss">
+.van-ellipsis {
+  font-size: 0.34rem;
+}
+
+.van-tabs__line {
+  background: #409eff !important;
 }
 </style>
 

src/pages/main/dialysis/MissionTable.vue

 <template>
-    <div>
-        <div class="choice">
-          <ul>
-            <li>日期查询：
-              <div @click="openStartPicker" class="">{{parseTime(startTime.getTime()/1000, "{y}-{m}-{d}")}}<span class="iconfont">&#xe74a;</span> </div>
-              <span class="line">  </span>
-              <div @click="openEndPicker" class="">{{parseTime(endTime.getTime()/1000, "{y}-{m}-{d}")}}<span class="iconfont">&#xe74a;</span> </div>
-            </li>
-          </ul>
-        </div>
-        <div class="blueBorder"></div>
-      <van-list
-        width="100%"
-        v-model="loading"
-        :finished="finished"
-        @load="onLoad"
-      >
-           <div class="tableTit " >
-                <ul>
-                    <li style="width:10%;">序号</li>
-                    <li style="width:15%;">日期</li>
-                    <li style="width:75%;">宣教内容</li>
-                </ul>
-            </div>
-            <div class="tableDate" >
-                <ul v-for="(item,index) in tableDate" :key="index" :value="item.value">
-                    <li style="width:10%;">{{index+1}}</li>
-                    <li style="width:15%;">{{parseTime(item.assessment_date, "{y}-{m}-{d}")}}</li>
-                    <li style="width:75%;">{{item.mission}}</li>
-                </ul>
-         </div>
-          <!--<div class="NoData" v-show="tableDate.length == 0"><img src="@/assets/login/data.jpg" alt=""></div>-->
-        <div class="NoData" v-show="tableDate.length == 0"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></div>
-
-      </van-list>
-
-
-
-      <mt-datetime-picker
-        ref="start_date_picker"
-        type="date"
-        @confirm="handleStartDateConfirm"
-        :endDate="new Date()"
-        v-model="startTime">
-      </mt-datetime-picker>
-
-      <mt-datetime-picker
-        ref="end_date_picker"
-        type="date"
-        @confirm="handleEndDateConfirm"
-        :endDate="new Date()"
-        v-model="endTime">
-      </mt-datetime-picker>
+  <div>
+    <div class="choice">
+      <ul>
+        <li>
+          日期查询：
+          <div @click="openStartPicker" class>
+            {{parseTime(startTime.getTime()/1000, "{y}-{m}-{d}")}}
+            <span class="iconfont">&#xe74a;</span>
+          </div>
+          <span class="line"></span>
+          <div @click="openEndPicker" class>
+            {{parseTime(endTime.getTime()/1000, "{y}-{m}-{d}")}}
+            <span class="iconfont">&#xe74a;</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="blueBorder"></div>
+    <van-list width="100%" v-model="loading" :finished="finished" @load="onLoad">
+      <div class="tableTit">
+        <ul>
+          <li style="width:10%;">序号</li>
+          <li style="width:15%;">日期</li>
+          <li style="width:75%;">宣教内容</li>
+        </ul>
+      </div>
+      <div class="tableDate">
+        <ul v-for="(item,index) in tableDate" :key="index" :value="item.value">
+          <li style="width:10%;">{{index+1}}</li>
+          <li style="width:15%;">{{parseTime(item.assessment_date, "{y}-{m}-{d}")}}</li>
+          <li style="width:75%;">{{item.mission}}</li>
+        </ul>
+      </div>
+      <!--<div class="NoData" v-show="tableDate.length == 0"><img src="@/assets/login/data.jpg" alt=""></div>-->
+      <div class="NoData" v-show="tableDate.length == 0">
+        <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
+      </div>
+    </van-list>
 
+    <mt-datetime-picker
+      ref="start_date_picker"
+      type="date"
+      @confirm="handleStartDateConfirm"
+      :endDate="new Date()"
+      v-model="startTime"
+    ></mt-datetime-picker>
 
-    </div>
+    <mt-datetime-picker
+      ref="end_date_picker"
+      type="date"
+      @confirm="handleEndDateConfirm"
+      :endDate="new Date()"
+      v-model="endTime"
+    ></mt-datetime-picker>
+  </div>
 </template>
 
 <script>
-  import {parseTime} from "@/utils"
-  import {getAllEducationList} from '@/api/patient';
+import { parseTime } from "@/utils";
+import { getAllEducationList } from "@/api/patient";
 
-  import { Popover } from "vux";
+import { Popover } from "vux";
 export default {
   name: "LongTable",
-  created(){
-    this.tableDate=[]
+  created() {
+    this.tableDate = [];
 
+    this.queryParams.start_time = this.parseTime(
+      new Date().getTime() / 1000,
+      "{y}-{m}-{d}"
+    );
+    this.queryParams.end_time = this.parseTime(
+      new Date().getTime() / 1000,
+      "{y}-{m}-{d}"
+    );
+    this.queryParams.patient_id = this.$route.query.patient_id;
+    this.queryParams.page = this.queryParams.page + 1;
+    this.queryParams.limit = 15;
+    this.tableDate = [];
 
-    this.queryParams.start_time = this.parseTime(new Date().getTime() / 1000, "{y}-{m}-{d}")
-    this.queryParams.end_time = this.parseTime(new Date().getTime() / 1000, "{y}-{m}-{d}")
-    this.queryParams.patient_id = this.$route.query.patient_id
-    this.queryParams.page = this.queryParams.page + 1
-    this.queryParams.limit = 15
-    this.tableDate=[]
-
-    getAllEducationList(this.queryParams).then(response =>{
-      if(response.data.state == 0){
+    getAllEducationList(this.queryParams).then(response => {
+      if (response.data.state == 0) {
         return false;
-      }else{
-        if(response.data.data.total == 0){
-        }else{
-          for(let i = 0; i < response.data.data.edus.length;i++){
-            this.tableDate.push(response.data.data.edus[i])
+      } else {
+        if (response.data.data.total == 0) {
+        } else {
+          for (let i = 0; i < response.data.data.edus.length; i++) {
+            this.tableDate.push(response.data.data.edus[i]);
           }
         }
       }
     });
-
   },
   data() {
     return {
       endTime: new Date(),
 
       queryParams: {
-        mode_id: '',
+        mode_id: "",
         start_time: "",
         end_time: "",
         page: 0,
         patient_id: 0,
-        limit: 15,
-      },
-
+        limit: 15
+      }
     };
-  },  methods: {
+  },
+  methods: {
     parseTime(time, layout) {
-      return parseTime(time, layout)
-    },onLoad() {
-      this.queryParams.start_time = this.parseTime(this.startTime.getTime()/1000, "{y}-{m}-{d}")
-      this.queryParams.end_time = this.parseTime(this.endTime.getTime()/1000, "{y}-{m}-{d}")
-      this.queryParams.patient_id = this.$route.query.patient_id
-      this.queryParams.page = this.queryParams.page + 1
-      this.queryParams.limit = 15
+      return parseTime(time, layout);
+    },
+    onLoad() {
+      this.queryParams.start_time = this.parseTime(
+        this.startTime.getTime() / 1000,
+        "{y}-{m}-{d}"
+      );
+      this.queryParams.end_time = this.parseTime(
+        this.endTime.getTime() / 1000,
+        "{y}-{m}-{d}"
+      );
+      this.queryParams.patient_id = this.$route.query.patient_id;
+      this.queryParams.page = this.queryParams.page + 1;
+      this.queryParams.limit = 15;
 
-      getAllEducationList(params).then(response =>{
-        if(response.data.state == 0){
+      getAllEducationList(params).then(response => {
+        if (response.data.state == 0) {
           this.finished = true;
           this.loading = false;
           return false;
-        }else{
-          if(response.data.data.edus.length == 0){
+        } else {
+          if (response.data.data.edus.length == 0) {
             this.finished = true;
             this.loading = false;
-
-          }else{
-            for(let i = 0; i < response.data.data.edus.length;i++){
-              this.tableDate.push(response.data.data.edus[i])
+          } else {
+            for (let i = 0; i < response.data.data.edus.length; i++) {
+              this.tableDate.push(response.data.data.edus[i]);
             }
             this.loading = false;
           }
         }
       });
-
-
     },
-    handleStartDateConfirm: function (val) {
-      this.queryParams.start_time = this.parseTime(this.startTime / 1000, "{y}-{m}-{d}")
-      this.queryParams.end_time = this.parseTime(this.endTime / 1000, "{y}-{m}-{d}")
-      this.queryParams.page =  1
-      this.queryParams.limit = 15
-
-      this.getRecordList(this.queryParams)
-
+    handleStartDateConfirm: function(val) {
+      this.queryParams.start_time = this.parseTime(
+        this.startTime / 1000,
+        "{y}-{m}-{d}"
+      );
+      this.queryParams.end_time = this.parseTime(
+        this.endTime / 1000,
+        "{y}-{m}-{d}"
+      );
+      this.queryParams.page = 1;
+      this.queryParams.limit = 15;
 
+      this.getRecordList(this.queryParams);
     },
-    handleEndDateConfirm: function (val) {
-      this.queryParams.start_time = this.parseTime(this.startTime / 1000, "{y}-{m}-{d}")
-      this.queryParams.end_time = this.parseTime(this.endTime / 1000, "{y}-{m}-{d}")
-      this.queryParams.page =  1
-      this.queryParams.limit = 15
-      this.getRecordList(this.queryParams)
-
-    },openStartPicker: function () {
+    handleEndDateConfirm: function(val) {
+      this.queryParams.start_time = this.parseTime(
+        this.startTime / 1000,
+        "{y}-{m}-{d}"
+      );
+      this.queryParams.end_time = this.parseTime(
+        this.endTime / 1000,
+        "{y}-{m}-{d}"
+      );
+      this.queryParams.page = 1;
+      this.queryParams.limit = 15;
+      this.getRecordList(this.queryParams);
+    },
+    openStartPicker: function() {
       this.$refs.start_date_picker.open();
     },
-    openEndPicker: function () {
+    openEndPicker: function() {
       this.$refs.end_date_picker.open();
-    },getRecordList: function (val) {
-      this.tableDate=[]
-      getAllEducationList(val).then(response =>{
-        if(response.data.state == 0){
+    },
+    getRecordList: function(val) {
+      this.tableDate = [];
+      getAllEducationList(val).then(response => {
+        if (response.data.state == 0) {
           return false;
-        }else{
-          if(response.data.data.edus.length == 0){
-          }else{
-            for(let i = 0; i < response.data.data.edus.length;i++){
-              this.tableDate.push(response.data.data.edus[i])
+        } else {
+          if (response.data.data.edus.length == 0) {
+          } else {
+            for (let i = 0; i < response.data.data.edus.length; i++) {
+              this.tableDate.push(response.data.data.edus[i]);
             }
           }
         }
       });
-
     }
   },
 
     @include align-items-center;
     @include text-align;
     @include justify-content-between;
-    width: 40%;
+    width: 58%;
     margin: 0 auto;
     font-size: 0.32rem;
     color: $pgh-color;
       @include align-items-center;
       @include text-align;
       @include justify-content-between;
-    padding: 0.3rem 0;
+      padding: 0.3rem 0;
 
       .iconfont {
         margin: 0 0.1rem;
         @media only screen and (max-width: 812px) {
-        font-size: 12px !important;
+          font-size: 12px !important;
         }
       }
-      .line{
+      .line {
         background: #a8b3ba;
         width: 0.2rem;
         height: 1px;
     @include text-align;
     @include justify-content-center;
     li {
-       border-right: 2px #fff solid;
+      border-right: 2px #fff solid;
       font-size: 0.3rem;
       height: 0.88rem;
       line-height: 0.88rem;
   @include box-sizing;
   ul {
     @include display-flex;
-      @include align-items-center;
-      @include text-align;
-      @include justify-content-center;
+    @include align-items-center;
+    @include text-align;
+    @include justify-content-center;
     li {
       font-size: 0.3rem;
-      padding:0.16rem 0;
+      padding: 0.16rem 0;
       line-height: 0.5rem;
       border-right: 2px #fff solid;
       span {

src/pages/main/dialysis/RecordTable.vue

 <template>
   <div>
-    <van-list
-      width="100%"
-      v-model="loading"
-      :finished="finished"
-      @load="onLoad"
-    >
+    <van-list width="100%" v-model="loading" :finished="finished" @load="onLoad">
       <div class="choice">
         <ul>
-          <li>透析时间：
-            <div @click="openStartPicker" class="">{{parseTime(startTime.getTime()/1000, "{y}-{m}-{d}")}}<span
-              class="iconfont">&#xe74a;</span></div>
+          <li>
+            透析时间：
+            <div @click="openStartPicker" class>
+              {{parseTime(startTime.getTime()/1000, "{y}-{m}-{d}")}}
+              <span class="iconfont">&#xe74a;</span>
+            </div>
             <span class="line"></span>
-            <div @click="openEndPicker" class="">{{parseTime(endTime.getTime()/1000, "{y}-{m}-{d}")}}<span
-              class="iconfont">&#xe74a;</span></div>
+            <div @click="openEndPicker" class>
+              {{parseTime(endTime.getTime()/1000, "{y}-{m}-{d}")}}
+              <span class="iconfont">&#xe74a;</span>
+            </div>
           </li>
 
           <!-- <popover placement="bottom">
               </ul>
             </div>
             <li>透析模式:{{modeNameOther(mode_id)}}<span class="iconfont">&#xe74a;</span></li>
-          </popover> -->
-
-          <el-popover
-                placement="bottom"
-                trigger="click">
-                <li slot="reference">透析模式：{{modeNameOther(mode_id)}}<span class="iconfont">&#xe74a;</span></li>
-                <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>
-                </div>
-              </el-popover>
+          </popover>-->
 
+          <el-popover placement="bottom" trigger="click">
+            <li slot="reference">
+              透析模式：{{modeNameOther(mode_id)}}
+              <span class="iconfont">&#xe74a;</span>
+            </li>
+            <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>
+            </div>
+          </el-popover>
         </ul>
       </div>
       <div class="blueBorder"></div>
       <div style="width:100%;overflow:hildden;overflow-x:auto;" class="RecordTable">
-        <table class="table" style="">
+        <table class="table" style>
           <tr>
             <th width="124px">透析日期</th>
             <th width="72px">班次</th>
             <th width="92px">治疗护士</th>
             <th width="92px">治疗医生</th>
           </tr>
-          <tr v-for="(item,index) in tableDate" :key="index" :value="item.value" @click="jump(item)">
+          <tr
+            v-for="(item,index) in tableDate"
+            :key="index"
+            :value="item.value"
+            @click="jump(item)"
+          >
             <td>{{parseTime(item.dialysis_date, "{y}-{m}-{d}")}}</td>
             <td>{{scheduleType(item.schedule_type)}}</td>
             <td>{{item.partition_name}} - {{item.device_number}}</td>
           </tr>
         </table>
         <!--<div class="NoData" v-show="tableDate.length == 0"><img src="@/assets/login/data.jpg" alt=""></div>-->
-        <div class="NoData" v-show="tableDate.length == 0"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></div>
-
+        <div class="NoData" v-show="tableDate.length == 0">
+          <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
+        </div>
       </div>
     </van-list>
 
       type="date"
       @confirm="handleStartDateConfirm"
       :endDate="new Date()"
-      v-model="startTime">
-    </mt-datetime-picker>
+      v-model="startTime"
+    ></mt-datetime-picker>
 
     <mt-datetime-picker
       ref="end_date_picker"
       type="date"
       @confirm="handleEndDateConfirm"
       :endDate="new Date()"
-      v-model="endTime">
-    </mt-datetime-picker>
-
+      v-model="endTime"
+    ></mt-datetime-picker>
   </div>
 </template>
 
       return typeName;
     },
     setAnticoagulantsConfit: function(prescription) {
-
-
       if (
         typeof this.anticoagulantsConfit[prescription.anticoagulant] ==
         "undefined"
       ) {
         return "";
       } else {
-
         if (this.anticoagulantsConfit[prescription.anticoagulant].shouji != 1) {
           return this.anticoagulantsConfit[prescription.anticoagulant].name;
         } else {
     @include align-items-center;
     @include text-align;
     @include justify-content-between;
-    width: 70%;
+    width: 88%;
     margin: 0 auto;
     font-size: 0.32rem;
     color: $pgh-color;
       padding: 0.3rem 0;
       .iconfont {
         margin: 0 0.1rem;
-  @media only screen and (max-width: 812px) {
-  font-size: 12px !important;
-  }
+        @media only screen and (max-width: 812px) {
+          font-size: 12px !important;
+        }
       }
       .line {
         background: #a8b3ba;
     }
   }
 }
-.RecordTable{
-  padding-top:0;
+.RecordTable {
+  padding-top: 0;
   background: #fff;
   min-height: calc(100vh - 180px);
 }
-.popover-demo-content{
+.popover-demo-content {
   max-height: 400px;
   overflow-y: scroll;
 }

src/pages/main/index.vue

 <template>
-
   <div class="mainBox">
-    <div>
-    <side-bar :active_index="0" :total_read_dot="readNum"></side-bar>
-    <div class="mainContent">
-      <record-page :un_read_wait_num="unReadWaitNum" :un_read_dialysis_num="unReadDialysisNum"></record-page>
-    </div>
+    <div class="newBox">
+      <div class="mainContent">
+        <record-page :un_read_wait_num="unReadWaitNum" :un_read_dialysis_num="unReadDialysisNum"></record-page>
+      </div>
+      <side-bar :active_index="0" :total_read_dot="readNum"></side-bar>
     </div>
-
   </div>
 </template>
 
 
 <script>
-  import RecordPage from './RecordPage'
-  import SideBar from '@/pages/layout/SideBar'
-  import {getDialysisScheduals, getWaitingScheduals} from '@/api/dialysis'
-  import {parseTime} from '@/utils/index'
-
-  export default {
-    name: 'Main',
-    data () {
-      return {
-        timer:null,
-        scheduals: [],
-        advice_groups: [],
-        unReadWaitNum: 0,
-        unReadDialysisNum: 0,
-      }
-    },
-    components: {
-      RecordPage,
-      SideBar,
-    },
-    created () {
-      this.requestScheduals()
-      this.requestDialysisScheduals()
+import RecordPage from "./RecordPage";
+import SideBar from "@/pages/layout/SideBar";
+import { getDialysisScheduals, getWaitingScheduals } from "@/api/dialysis";
+import { parseTime } from "@/utils/index";
+
+export default {
+  name: "Main",
+  data() {
+    return {
+      timer: null,
+      scheduals: [],
+      advice_groups: [],
+      unReadWaitNum: 0,
+      unReadDialysisNum: 0
+    };
+  },
+  components: {
+    RecordPage,
+    SideBar
+  },
+  created() {
+    this.requestScheduals();
+    this.requestDialysisScheduals();
+  },
+  methods: {
+    requestScheduals() {
+      var date = parseTime(Date.parse(new Date()), "{y}-{m}-{d}");
+      getWaitingScheduals({ date: date }).then(rs => {
+        var resp = rs.data;
+        // console.log(resp);
+        if (resp.state == 1) {
+          var scheduals = resp.data.scheduals;
+          this.scheduals = scheduals;
+          console.log(this.scheduals);
+          let doctorAdvice = [];
+          for (let i = 0; i < this.scheduals.length; i++) {
+            for (let y = 0; y < this.scheduals[i].doctor_advice.length; y++) {
+              if (this.scheduals[i].doctor_advice[y].execution_state == 2) {
+                doctorAdvice.push(this.scheduals[i].doctor_advice[y]);
+              }
+            }
+          }
 
+          const sorted = this.groupBy(doctorAdvice, function(item) {
+            return [item.groupno];
+          });
+
+          this.unReadWaitNum = sorted.length;
+        } else {
+          this.$toast({
+            message: resp.msg
+          });
+        }
+      });
     },
-    methods: {
-
-      requestScheduals () {
-        var date = parseTime(Date.parse(new Date()), '{y}-{m}-{d}')
-        getWaitingScheduals({date: date}).then(rs => {
-          var resp = rs.data
-          // console.log(resp);
+    requestDialysisScheduals() {
+      var date = this.$store.getters.app.dialysis_area.schedule_date;
+      var type = 0;
+      getDialysisScheduals({ type: type, date: parseTime(date, "{y}-{m}-{d}") })
+        .then(rs => {
+          var resp = rs.data;
           if (resp.state == 1) {
-            var scheduals = resp.data.scheduals
-            this.scheduals = scheduals
-            console.log(this.scheduals)
-            let doctorAdvice = []
-            for (let i = 0; i < this.scheduals.length; i++) {
-              for (let y = 0; y < this.scheduals[i].doctor_advice.length; y++) {
-                if (this.scheduals[i].doctor_advice[y].execution_state == 2) {
-                  doctorAdvice.push(this.scheduals[i].doctor_advice[y])
+            var scheduals = resp.data.scheduals;
+            let doctorAdvice = [];
+            for (let index = 0; index < scheduals.length; index++) {
+              const schedual = scheduals[index];
+              if (schedual.dialysis_order == null) {
+                continue;
+              }
+              for (let y = 0; y < schedual.doctor_advice.length; y++) {
+                if (schedual.doctor_advice[y].execution_state == 2) {
+                  doctorAdvice.push(schedual.doctor_advice[y]);
                 }
               }
             }
 
-            const sorted = this.groupBy(doctorAdvice, function (item) {
-              return [item.groupno]
-            })
-
-            this.unReadWaitNum = sorted.length
+            const sorted = this.groupBy(doctorAdvice, function(item) {
+              return [item.groupno];
+            });
 
+            this.unReadDialysisNum = sorted.length;
           } else {
             this.$toast({
               message: resp.msg
-            })
+            });
           }
         })
-      },
-      requestDialysisScheduals () {
-        var date = this.$store.getters.app.dialysis_area.schedule_date
-        var type = 0
-        getDialysisScheduals({type: type, date: parseTime(date, '{y}-{m}-{d}')})
-          .then(rs => {
-            var resp = rs.data
-            if (resp.state == 1) {
-              var scheduals = resp.data.scheduals
-              let doctorAdvice = []
-              for (let index = 0; index < scheduals.length; index++) {
-                const schedual = scheduals[index]
-                if (schedual.dialysis_order == null) {
-                  continue
-                }
-                for (let y = 0; y < schedual.doctor_advice.length; y++) {
-                  if (schedual.doctor_advice[y].execution_state == 2) {
-                    doctorAdvice.push(schedual.doctor_advice[y])
-                  }
-                }
-              }
-
-              const sorted = this.groupBy(doctorAdvice, function (item) {
-                return [item.groupno]
-              })
-
-              this.unReadDialysisNum = sorted.length
-
-            } else {
-              this.$toast({
-                message: resp.msg
-              })
-            }
-          })
-          .catch(v => {
-          })
-      }, groupBy (array, f) {
-        const groups = {}
-        array.forEach(function (o) {
-          const group = JSON.stringify(f(o))
-          groups[group] = groups[group] || []
-          groups[group].push(o)
-        })
-        return Object.keys(groups).map(function (group) {
-          return groups[group]
-        })
-      },getData(){
-        console.log("111111")
-        // this.requestScheduals()
-        // this.requestDialysisScheduals()
-      }
-
+        .catch(v => {});
     },
-    computed: {
-      readNum: function () {
-        return this.unReadWaitNum + this.unReadDialysisNum
-
-      }
-
-    }, mounted(){
-      this.timer =   window.setInterval(() => {
-        setTimeout(this.getData(), 0)
-      }, 30000)
-
-
-    },beforeDestroy() {
-      clearInterval(this.timer);
-      this.timer = null;
+    groupBy(array, f) {
+      const groups = {};
+      array.forEach(function(o) {
+        const group = JSON.stringify(f(o));
+        groups[group] = groups[group] || [];
+        groups[group].push(o);
+      });
+      return Object.keys(groups).map(function(group) {
+        return groups[group];
+      });
     },
-
+    getData() {
+      console.log("111111");
+      // this.requestScheduals()
+      // this.requestDialysisScheduals()
+    }
+  },
+  computed: {
+    readNum: function() {
+      return this.unReadWaitNum + this.unReadDialysisNum;
+    }
+  },
+  mounted() {
+    this.timer = window.setInterval(() => {
+      setTimeout(this.getData(), 0);
+    }, 30000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    this.timer = null;
   }
+};
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>
-  html,
-  body {
+html,
+body {
   height: 100%;
-  }
-  .mainBox {
+}
+.mainBox {
   height: 100%;
-  font-size:0.3rem;
+  font-size: 0.3rem;
   .sideColumn {
-  .column {
-  .head {
-  @include display-flex;
-  @include align-items-center;
-  @include flex-direction;
-  @include text-align;
-  @include justify-content-center;
-  margin: 0.5rem 0 0.5rem 0;
-  img {
-  width: 100%;
-  height: 100%;
-  border-radius: 0.5rem;
-  width: 0.7rem;
-  height: 0.7rem;
-  }
-  }
-  .sidebar {
-  @include display-flex;
-  @include align-items-center;
-  @include flex-direction;
-  @include text-align;
-  padding: 0;
-  li {
-  padding: 0 0 0.8rem 0;
-  a {
-  color: #a8b3ba;
-  display: inline-block;
-  padding: 0;
-  margin: 0;
-  p {
-  font-size: 0.24rem;
-  margin-top: 0.2rem;
-  }
-  .iconfont {
-  font-size: 0.5rem;
-  display: inline-block;
-  }
-  }
-  &.active {
-  a {
-  color: #409eff;
-  }
-  }
-  }
-  }
-  }
-  }
+    .column {
+      .head {
+        @include display-flex;
+        @include align-items-center;
+        @include flex-direction;
+        @include text-align;
+        @include justify-content-center;
+        margin: 0.5rem 0 0.5rem 0;
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 0.5rem;
+          width: 0.7rem;
+          height: 0.7rem;
+        }
+      }
+      .sidebar {
+        @include display-flex;
+        @include align-items-center;
+        @include flex-direction;
+        @include text-align;
+        padding: 0;
+        li {
+          padding: 0 0 0.8rem 0;
+          a {
+            color: #a8b3ba;
+            display: inline-block;
+            padding: 0;
+            margin: 0;
+            p {
+              font-size: 0.24rem;
+              margin-top: 0.2rem;
+            }
+            .iconfont {
+              font-size: 0.5rem;
+              display: inline-block;
+            }
+          }
+          &.active {
+            a {
+              color: #409eff;
+            }
+          }
+        }
+      }
+    }
   }
-  .mainContent{
-  margin: 0 0 0 1.58rem;
+}
+.mainContent {
+  // margin: 0 0 0 1.58rem;
+}
+.newBox {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  > :first-child {
+    flex: 1;
+    overflow: auto;
   }
-
+}
 </style>

src/pages/main/records/CaseHistory.vue

 <template>
   <div>
     <div class="nav">
-      <ul style="width: 30%">
+      <ul style="width: 50%">
         <li
           v-for="(item, i) in ['基本信息', '检验检查', '医嘱']"
           :key="i"
           :class="index == i ? 'active' : ''"
           @click="ClickTab(i, item)"
-        >
-          {{ item }}
-        </li>
+        >{{ item }}</li>
       </ul>
     </div>
 
   top: 63px;
   right: 0;
   z-index: 66;
-  left: 1.58rem;
+  left: 0;
   background: #fff;
   background: #fff;
   @media only screen and (max-width: 812px) {
     top: 45px !important;
   }
+  @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: 768px) and (max-width: 1024px) {
+    top: 67px;
+  }
+  @media only screen and (min-width: 737px) and (max-width: 768px) {
+    padding-top: 20px;
+  }
   ul {
     width: 60%;
     margin: 0 auto;

src/pages/main/records/RecordsTab.vue

   width: 100%;
   padding-top:62px; 
   min-height: calc(100vh - 130px);
+  @media only screen and (min-width: 737px) and (max-width: 768px) {
+    padding-top: 100px;
+  }
   .data {
     width: 11rem;
     margin: 0 auto;

src/pages/main/today/acceptsAssessment.vue

 <template>
   <div class="plate-box">
-    <h2 class="title"><span class="line"></span><p>{{title}}</p><span class="line"></span> </h2>
-    <div class="plate " >
+    <h2 class="title">
+      <span class="line"></span>
+      <p>{{title}}</p>
+      <span class="line"></span>
+    </h2>
+    <div class="plate">
       <ul>
-        <li style="height: 0.6rem;" v-if="isShow('入室方式')">
-          <label>入室方式 : </label>
+        <li v-if="isShow('入室方式')">
+          <label>入室方式 :</label>
           <span class="content">{{way}}</span>
         </li>
-        <li style="height: 0.6rem;" v-if="isShow('病人情况')">
-          <label>病人情况 : </label>
+        <li v-if="isShow('病人情况')">
+          <label>病人情况 :</label>
           <span class="content">{{condition}}</span>
         </li>
-        <li style="height: 0.6rem;" v-if="isShow('病人意识')">
-          <label>病人意识 : </label>
+        <li v-if="isShow('病人意识')">
+          <label>病人意识 :</label>
           <span class="content">{{consciousness}}</span>
         </li>
-        <li style="height: 0.6rem;" v-if="isShow('体位')">
-          <label>体位 : </label>
+        <li v-if="isShow('体位')">
+          <label>体位 :</label>
           <span class="content">{{posture}}</span>
         </li>
-      <!-- </ul>
+        <!-- </ul>
 
-      <ul> -->
-        <li style="height: 0.6rem;" v-if="isShow('病人食欲')">
-          <label>病人食欲 : </label>
+        <ul>-->
+        <li v-if="isShow('病人食欲')">
+          <label>病人食欲 :</label>
           <span class="content">{{appetite}}</span>
         </li>
-        <li style="height: 0.6rem;" v-if="isShow('病情')">
-          <label>病情 </label>
-          <span class="content">{{sickCondition}} </span>
+        <li v-if="isShow('病情')">
+          <label>病情</label>
+          <span class="content">{{sickCondition}}</span>
         </li>
 
-        <li style="height: 0.6rem;" v-if="isShow('跌倒风险评估评分')">
+        <li v-if="isShow('跌倒风险评估评分')">
           <label>跌倒风险评估评分:</label>
           <span class="content">{{this.record.score}}分</span>
         </li>
-        <li style="height: 0.6rem;" v-if="isShow('风险程度')">
+        <li v-if="isShow('风险程度')">
           <label>风险程度:</label>
           <span class="content">{{dangerLevel}}</span>
         </li>
 
-        <li style="height: 0.6rem;" v-if="isShow('跌倒风险预防措施')">
+        <li v-if="isShow('跌倒风险预防措施')">
           <label>跌倒风险预防措施:</label>
           <span class="content">{{precautions}}</span>
         </li>
 
-        <li style="height: 0.6rem;" v-if="isShow('其他跌倒风险预防措施')">
+        <li v-if="isShow('其他跌倒风险预防措施')">
           <label>其他跌倒风险预防措施:</label>
           <span class="content">{{this.record.precaution_other}}</span>
         </li>
 
-        <li style="height: 0.6rem;" v-if="isShow('其他病情')">
-          <label>其他病情 </label>
-          <span class="content">{{this.record.sick_condition_other}} </span>
+        <li v-if="isShow('其他病情')">
+          <label>其他病情</label>
+          <span class="content">{{this.record.sick_condition_other}}</span>
         </li>
 
-
-
-        <li style="height: 0.6rem;"  v-if="isShow('摄入量')">
+        <li v-if="isShow('摄入量')">
           <label>摄入量:</label>
           <span class="content">{{intakes}}</span>
         </li>
 
-      <!-- </ul>
+        <!-- </ul>
 
 
-      <ul > -->
-        <li style="height: 0.6rem;" v-if="isShow('营养状况')">
+        <ul >-->
+        <li v-if="isShow('营养状况')">
           <label>营养状况:</label>
           <span class="content">{{nutritions}}</span>
         </li>
-        <li style="height: 0.6rem;" v-if="isShow('心理评估')">
-          <label> 心理评估</label>
+        <li v-if="isShow('心理评估')">
+          <label>心理评估</label>
           <span class="content">{{psychologicalAssessment}}</span>
         </li>
-        <li style="height: 0.6rem;" v-if="isShow('心理评估异常原因')&&this.record.psychological_assessment == 2 ">
+        <li v-if="isShow('心理评估异常原因')&&this.record.psychological_assessment == 2 ">
           <label>心理评估异常原因:</label>
           <span class="content">{{this.record.psychological_assessment_other}}</span>
         </li>
-        <li style="height: 0.6rem;" v-if="isShow('其他心理评估') ">
+        <li v-if="isShow('其他心理评估') ">
           <label>其他心理评估:</label>
           <span class="content">{{this.record.psychological_other}}</span>
         </li>
-
       </ul>
-
-
     </div>
   </div>
 </template>
         "1": "步行",
         "2": "扶行",
         "3": "轮椅",
-        "4": "平车",
+        "4": "平车"
       },
       conditions: {
         "1": "住院",
         "2": "门诊",
-        "3": "手术期",
+        "3": "手术期"
       },
       consciousnesses: {
         "1": "清醒",
         "2": "嗜睡",
-        "3": "昏迷",
+        "3": "昏迷"
       },
       appetites: {
         "1": "正常",
         "2": "减退",
         "3": "恶心",
         "4": "呕吐",
-        "5": "腹泻",
+        "5": "腹泻"
       },
       postures: {
         "1": "自动体位",
         "2": "平卧位",
         "3": "半卧位",
         "4": "端坐位",
-        "5": "躁动不安",
-      }, sick_condition: {
+        "5": "躁动不安"
+      },
+      sick_condition: {
         "1": "一般",
         "2": "重",
-        "3": "危",
-      }, danger_level: {
+        "3": "危"
+      },
+      danger_level: {
         "1": "无",
         "2": "低风险",
         "3": "中度风险",
-        "4": "高风险",
-
-      }, intake: {
+        "4": "高风险"
+      },
+      intake: {
         "1": "正常",
-        "2": "减少",
-      },nutrition: {
+        "2": "减少"
+      },
+      nutrition: {
         "1": "正常",
-        "2": "营养不良",
-      },psychological_assessment: {
+        "2": "营养不良"
+      },
+      psychological_assessment: {
         "1": "正常",
-        "2": "异常",
-      },precautionss: {
+        "2": "异常"
+      },
+      precautionss: {
         "1": "镇定剂",
         "2": "约束带",
         "3": "床栏",
-        "4": "加强宣教",
+        "4": "加强宣教"
       }
     };
   },
     }
   },
   computed: {
-
     way: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.ways[this.record.way] == undefined ? "" : (this.ways[this.record.way] + "")
+        return this.ways[this.record.way] == undefined
+          ? ""
+          : this.ways[this.record.way] + "";
       }
     },
     condition: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.conditions[this.record.condition] == undefined ? "" : this.conditions[this.record.condition] + ""
+        return this.conditions[this.record.condition] == undefined
+          ? ""
+          : this.conditions[this.record.condition] + "";
       }
     },
     consciousness: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.consciousnesses[this.record.consciousness] == undefined ? "" : this.consciousnesses[this.record.consciousness] + ""
+        return this.consciousnesses[this.record.consciousness] == undefined
+          ? ""
+          : this.consciousnesses[this.record.consciousness] + "";
       }
     },
     appetite: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.appetites[this.record.appetite] == undefined ? "" : this.appetites[this.record.appetite] + ""
+        return this.appetites[this.record.appetite] == undefined
+          ? ""
+          : this.appetites[this.record.appetite] + "";
       }
     },
     posture: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.postures[this.record.posture] == undefined ? "" : this.postures[this.record.posture] + ""
+        return this.postures[this.record.posture] == undefined
+          ? ""
+          : this.postures[this.record.posture] + "";
       }
-    },sickCondition: function() {
+    },
+    sickCondition: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.sick_condition[this.record.sick_condition] == undefined ? "" : this.sick_condition[this.record.sick_condition] + ""
+        return this.sick_condition[this.record.sick_condition] == undefined
+          ? ""
+          : this.sick_condition[this.record.sick_condition] + "";
       }
-    },dangerLevel: function() {
+    },
+    dangerLevel: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.danger_level[this.record.danger_level] == undefined ? "" : this.danger_level[this.record.danger_level] + ""
+        return this.danger_level[this.record.danger_level] == undefined
+          ? ""
+          : this.danger_level[this.record.danger_level] + "";
       }
-    },precautions: function() {
+    },
+    precautions: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.precautionss[this.record.precaution] == undefined ? "" : this.precautionss[this.record.precaution] + ""
+        return this.precautionss[this.record.precaution] == undefined
+          ? ""
+          : this.precautionss[this.record.precaution] + "";
       }
-    },intakes: function() {
+    },
+    intakes: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.intake[this.record.intake] == undefined ? "" : this.intake[this.record.intake] + ""
+        return this.intake[this.record.intake] == undefined
+          ? ""
+          : this.intake[this.record.intake] + "";
       }
-    },nutritions: function() {
+    },
+    nutritions: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.nutrition[this.record.nutrition] == undefined ? "" : this.nutrition[this.record.nutrition] + ""
+        return this.nutrition[this.record.nutrition] == undefined
+          ? ""
+          : this.nutrition[this.record.nutrition] + "";
       }
-    },psychologicalAssessment: function() {
+    },
+    psychologicalAssessment: function() {
       if (this.record == null || this.record.id == "") {
-        return ""
+        return "";
       } else {
-        return this.psychological_assessment[this.record.psychological_assessment] == undefined ? "" : this.psychological_assessment[this.record.psychological_assessment] + ""
+        return this.psychological_assessment[
+          this.record.psychological_assessment
+        ] == undefined
+          ? ""
+          : this.psychological_assessment[
+              this.record.psychological_assessment
+            ] + "";
       }
     }
   },
   methods: {
-    isShow(name){
-      var filedList = this.$store.getters.user.fileds
+    isShow(name) {
+      var filedList = this.$store.getters.user.fileds;
 
-      for (let i = 0; i < filedList.length; i++){
-        if(filedList[i].module == 2 && filedList[i].filed_name_cn == name&&filedList[i].is_show == 1){
-          return true
+      for (let i = 0; i < filedList.length; i++) {
+        if (
+          filedList[i].module == 2 &&
+          filedList[i].filed_name_cn == name &&
+          filedList[i].is_show == 1
+        ) {
+          return true;
         }
       }
-      return false
-    },
-
+      return false;
+    }
   }
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 </style>
 
 

src/pages/main/today/detailsInfo.vue

 x<template>
-  <div class="info ">
-    <h2 class="plateTitle"><span class="line"></span><p>基本信息</p><span class="line"></span> </h2>
+  <div class="info">
+    <h2 class="plateTitle">
+      <span class="line"></span>
+      <p>基本信息</p>
+      <span class="line"></span>
+    </h2>
 
     <div class="ui-step clearfix">
       <ul class="ui-step-ul">
-        <li v-for="(item, index) in step_data" :key="index" class="ui-step-done" >
-          <div class="ui-step-number" :style="item.value==1?'':'background:#fff;border: 1px $main-color solid;'"><i :style="item.value==1?'':'border:0;'" /></div>
+        <li v-for="(item, index) in step_data" :key="index" class="ui-step-done">
+          <div
+            class="ui-step-number"
+            :style="item.value==1?'':'background:#fff;border: 1px $main-color solid;'"
+          >
+            <i :style="item.value==1?'':'border:0;'" />
+          </div>
           <div class="ui-step-title">{{ item.title }}</div>
         </li>
       </ul>
     </div>
 
-    <ul class="clearfix">
+    <ul class="clearfix newWidth">
       <li>
-        <label>姓名 : </label>
+        <label>姓名 :</label>
         <span>{{patient.name}}</span>
       </li>
       <li>
-        <label>性别 : </label>
+        <label>性别 :</label>
         <span>{{patient.gender == 1 ? "男" : "女"}}</span>
       </li>
       <li>
-        <label>年龄 : </label>
+        <label>年龄 :</label>
         <span>{{age}}</span>
       </li>
       <li>
-        <label>透析号 : </label>
+        <label>透析号 :</label>
         <span>{{patient.dialysis_no}}</span>
       </li>
       <li>
-        <label>床位号 : </label>
+        <label>床位号 :</label>
         <span>{{device_number}}</span>
       </li>
       <li>
-        <label>来源 : </label>
+        <label>来源 :</label>
         <span>{{source}}</span>
       </li>
       <li>
-        <label>住院号 : </label>
+        <label>住院号 :</label>
         <span>{{patient.admission_number}}</span>
       </li>
       <li>
-        <label>透析日期 : </label>
+        <label>透析日期 :</label>
         <span>{{dialysis_date}}</span>
       </li>
     </ul>
 
 <script>
 import { parseTime } from "@/utils";
-import { jsGetAge } from '@/utils/tools'
+import { jsGetAge } from "@/utils/tools";
 
 export default {
   name: "DetailsInfo",
     }
   },
   computed: {
-    dialysis_date:function(){
+    dialysis_date: function() {
       return parseTime(this.$route.query.date, "{y}/{m}/{d}");
-
     },
     age: function() {
-      if (this.patient.age == 0){
-        return jsGetAge(parseTime(this.patient.birthday, '{y}-{m}-{d}'), '-')
-      }else{
-        return this.patient.age
+      if (this.patient.age == 0) {
+        return jsGetAge(parseTime(this.patient.birthday, "{y}-{m}-{d}"), "-");
+      } else {
+        return this.patient.age;
       }
     },
     source: function() {
     li {
       float: left;
       width: 25%;
-      font-size:0.34rem;
+      font-size: 0.34rem;
       height: 0.53rem;
     }
   }
   .ui-step {
-    margin: 0 6px 0.6rem 6px;
+    margin: 0 0 0.8rem 0;
     padding: 0.1rem 0 0 0;
     zoom: 1;
     background: #fff;
         }
         .ui-step-title {
           color: #34495e;
-          font-size: 0.3rem;
+          font-size: 0.34rem;
           font-weight: normal;
+          width: 1rem;
         }
         .ui-step-number {
           position: relative;
           i {
             position: absolute;
             left: 0.09rem;
-            top: 0.10rem;
+            top: 0.1rem;
             width: 0.26rem;
             height: 0.14rem;
             border: 2px #fff solid;
     }
   }
 }
+.newWidth {
+  li {
+    @media only screen and (min-width: 375px) {
+      width: 33.3% !important;
+    }
+    @media only screen and (min-width: 667px) {
+      width: 25% !important;
+    }
+  }
+}
 </style>
 

src/pages/main/today/dialysisComputer.vue

 <template>
   <div class="plate-box">
-    <h2 class="title"><span class="line"></span>
-      <p>{{title}}</p><span class="line"></span></h2>
-    <div class="plate ">
+    <h2 class="title">
+      <span class="line"></span>
+      <p>{{title}}</p>
+      <span class="line"></span>
+    </h2>
+    <div class="plate">
       <ul>
         <li>
-          <label>上机床位 : </label>
+          <label>上机床位 :</label>
           <span class="content">{{device_number}}</span>
         </li>
         <li>
-          <label>上机护士 : </label>
+          <label>上机护士 :</label>
           <span class="content">{{nurse}}</span>
         </li>
 
         <li>
-          <label>穿刺者 : </label>
+          <label>穿刺者 :</label>
           <span class="content">{{puncture_nurse}}</span>
         </li>
 
         <li>
-          <label>上机时间 : </label>
-          <span class="content" style="font-size: 15px">{{start_time}}</span>
+          <label>上机时间 :</label>
+          <span class="content" style="font-size: 0.34rem">{{start_time}}</span>
         </li>
 
         <li>
-          <label>状态 : </label>
+          <label>状态 :</label>
           <span class="content">{{stage}}</span>
         </li>
-
       </ul>
-
-
     </div>
     <!-- <div class="note">处方医生 : {{doctor}}</div> -->
   </div>
 </template>
 
 <script>
-  import {parseTime} from '@/utils'
+import { parseTime } from "@/utils";
 
-  export default {
-    name: 'DialysisComputer',
-    data () {
-      return {
-        title: '透析上机 ',
+export default {
+  name: "DialysisComputer",
+  data() {
+    return {
+      title: "透析上机 "
+    };
+  },
+  props: {
+    record: {
+      type: Object
+    },
+    admin_map: {
+      type: Object
+    },
+    device_number_map: {
+      type: Object
+    }
+  },
+  computed: {
+    device_number: function() {
+      if (this.record == null || this.record.id == "") {
+        return "-";
       }
+      return this.device_number_map[this.record.bed_id] == null
+        ? ""
+        : this.device_number_map[this.record.bed_id].number;
     },
-    props: {
-      record: {
-        type: Object,
-      },
-      admin_map: {
-        type: Object,
-      },
-      device_number_map: {
-        type: Object,
+    nurse: function() {
+      if (this.record == null || this.record.id == "") {
+        return "-";
       }
+      return this.admin_map[this.record.start_nurse] == null
+        ? ""
+        : this.admin_map[this.record.start_nurse].name;
     },
-    computed: {
-      device_number: function () {
-        if (this.record == null || this.record.id == '') {
-          return '-'
-        }
-        return this.device_number_map[this.record.bed_id] == null ? '' : this.device_number_map[this.record.bed_id].number
-      },
-      nurse: function () {
-        if (this.record == null || this.record.id == '') {
-          return '-'
-        }
-        return this.admin_map[this.record.start_nurse] == null ? '' : this.admin_map[this.record.start_nurse].name
-      },
-      stage: function () {
-        if (this.record == null || this.record.id == '') {
-          return '未上机'
-        }
-        return this.record.stage == 1 ? '已上机' : '已下机'
-      }, start_time: function () {
-        if (this.record == null || this.record.id == '') {
-          return '-'
-        }
-        return parseTime(this.record.start_time, '{y}年{m}月{d}日 {h}时{i}分')
-
-      },puncture_nurse:function () {
-        if (this.record == null || this.record.id == '') {
-          return '-'
-        }
-        return this.admin_map[this.record.puncture_nurse] == null ? '' : this.admin_map[this.record.puncture_nurse].name
-
+    stage: function() {
+      if (this.record == null || this.record.id == "") {
+        return "未上机";
       }
+      return this.record.stage == 1 ? "已上机" : "已下机";
     },
-    methods: {}
-  }
+    start_time: function() {
+      if (this.record == null || this.record.id == "") {
+        return "-";
+      }
+      return parseTime(this.record.start_time, "{y}年{m}月{d}日 {h}时{i}分");
+    },
+    puncture_nurse: function() {
+      if (this.record == null || this.record.id == "") {
+        return "-";
+      }
+      return this.admin_map[this.record.puncture_nurse] == null
+        ? ""
+        : this.admin_map[this.record.puncture_nurse].name;
+    }
+  },
+  methods: {}
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>

src/pages/main/today/dialysisOff.vue

 <template>
-   <div class="plate-box">
-    <h2 class="title"><span class="line"></span><p>{{title}}</p><span class="line"></span> </h2>
+  <div class="plate-box">
+    <h2 class="title">
+      <span class="line"></span>
+      <p>{{title}}</p>
+      <span class="line"></span>
+    </h2>
     <div class="plate">
       <ul>
         <li>
-          <label>下机护士 : </label>
+          <label>下机护士 :</label>
           <span class="content">{{nurse}}</span>
         </li>
         <li>
-          <label>状态 : </label>
+          <label>状态 :</label>
           <span class="content">{{stage}}</span>
         </li>
         <li>
-          <label>下机时间 : </label>
-          <span class="content" style="font-size: 15px">{{end_time}}</span>
+          <label>下机时间 :</label>
+          <span class="content" style="font-size: 0.34rem">{{end_time}}</span>
         </li>
       </ul>
     </div>
 </template>
 
 <script>
-  import { parseTime } from "@/utils";
+import { parseTime } from "@/utils";
 
-  export default {
+export default {
   name: "DialysisComputer",
   data() {
     return {
-      title: "透析下机 ",
+      title: "透析下机 "
     };
   },
   props: {
       type: Object
     },
     admin_map: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   computed: {
     stage: function() {
       if (this.record == null || this.record.id == "") {
-        return "未上机"
+        return "未上机";
       }
-      return this.record.stage == 1 ? "未下机" : "已下机"
+      return this.record.stage == 1 ? "未下机" : "已下机";
     },
     nurse: function() {
-      if (this.record == null || this.record.id == '') {
-        return "-"
+      if (this.record == null || this.record.id == "") {
+        return "-";
       } else if (this.record.stage == 1) {
-        return "-"
+        return "-";
       } else {
-        return this.admin_map[this.record.finish_nurse] == null ? "" : this.admin_map[this.record.finish_nurse].name
+        return this.admin_map[this.record.finish_nurse] == null
+          ? ""
+          : this.admin_map[this.record.finish_nurse].name;
       }
-    },end_time:function () {
-      if (this.record == null || this.record.id == '') {
-        return "-"
+    },
+    end_time: function() {
+      if (this.record == null || this.record.id == "") {
+        return "-";
       } else if (this.record.stage == 1) {
-        return "-"
+        return "-";
       } else {
         return parseTime(this.record.end_time, "{y}年{m}月{d}日 {h}时{i}分");
-
       }
-    },
+    }
   },
-  methods: {
-
-  }
+  methods: {}
 };
 </script>
 

src/pages/main/today/statOrder.vue

       <p>{{title}}</p>
       <span class="line"></span>
     </h2>
-    <table class="table">
-      <tr>
-        <th width="12%">开嘱医生</th>
-        <th width="18%">开始时间</th>
-        <th width="31%">医嘱内容</th>
-        <th width="18.6%">执行时间</th>
-        <th width="10.5%">执行护士</th>
-        <th width="9.4%">核对护士</th>
-      </tr>
-      <template v-for="(group) in advice_groups">
-        <tr v-for="(advice, i) in group.advices" :key="advice.id">
-            <td v-if="i == 0" :rowspan="group.advices.length">{{doctor_map[advice.advice_doctor] != undefined ? doctor_map[advice.advice_doctor].name : ""}}</td>
+    <div class="newDiv">
+      <table class="table">
+        <tr>
+          <th width="12%">开嘱医生</th>
+          <th width="18%">开始时间</th>
+          <th width="31%">医嘱内容</th>
+          <th width="18.6%">执行时间</th>
+          <th width="10.5%">执行护士</th>
+          <th width="9.4%">核对护士</th>
+        </tr>
+        <template v-for="(group) in advice_groups">
+          <tr v-for="(advice, i) in group.advices" :key="advice.id">
+            <td
+              v-if="i == 0"
+              :rowspan="group.advices.length"
+            >{{doctor_map[advice.advice_doctor] != undefined ? doctor_map[advice.advice_doctor].name : ""}}</td>
 
-            <td v-if="i == 0" :rowspan="group.advices.length">{{parseTime(advice.start_time, "{m}-{d} {h}:{i}")}}</td>
+            <td
+              v-if="i == 0"
+              :rowspan="group.advices.length"
+            >{{parseTime(advice.start_time, "{m}-{d} {h}:{i}")}}</td>
 
             <td :class="advice.parent_id == 0 ? 'advice_content' : 'subadvice_content'">
               <span>{{advice.advice_name }}</span>
               <!-- <span>{{advice.drug_spec}}{{advice.drug_spec_unit}} * {{advice.prescribing_number}}{{advice.prescribing_number_unit}}</span> -->
               <span v-if="advice.drug_spec">{{advice.drug_spec}}{{advice.drug_spec_unit}}</span>
-              <span v-if="advice.prescribing_number">{{advice.prescribing_number}}{{advice.prescribing_number_unit}}</span>
+              <span
+                v-if="advice.prescribing_number"
+              >{{advice.prescribing_number}}{{advice.prescribing_number_unit}}</span>
               <span v-if="advice.single_dose">单次用量{{advice.single_dose}}{{advice.single_dose_unit}}</span>
               <span v-if="advice.parent_id == 0">{{advice.delivery_way}}</span>
               <span v-if="advice.parent_id == 0">{{advice.execution_frequency}}</span>
               <span v-if="advice.parent_id == 0&&advice.remark.length > 0">({{advice.remark}})</span>
-
             </td>
 
             <td>{{parseTime(advice.execution_time, "{m}-{d} {h}:{i}")}}</td>
             <td>{{advice.execution_staff != 0 ? (doctor_map[advice.execution_staff] != undefined ? doctor_map[advice.execution_staff].name : "") : ""}}</td>
 
             <td>{{advice.checker != 0 ? (doctor_map[advice.checker] != undefined ? doctor_map[advice.checker].name : "") : ""}}</td>
-        </tr>
-      </template>
-    </table>
-    <div class="NoData" v-show="advice_groups.length == 0">
-      <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt>
+          </tr>
+        </template>
+      </table>
+      <div class="NoData" v-show="advice_groups.length == 0">
+        <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
+      </div>
     </div>
   </div>
 </template>
   data() {
     return {
       title: "临时医嘱 ",
-      tableDate: [],
+      tableDate: []
     };
   },
   props: {
     advice_groups: {
       type: Array,
       default: () => {
-        return []
+        return [];
       }
     }
   },
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .table {
-  width: 100%;
+  width: 1000px;
   overflow: hidden;
   font-size: 0.34rem;
   text-align: center;
     }
   }
 }
+.newDiv {
+  width: 100%;
+  overflow-x: auto;
+}
 </style>
 
 

src/pages/monitoring/index.vue

 <template>
   <div class="mainBox">
-    <side-bar :active_index="1"></side-bar>
     <div class="mainContent">
       <div class="top">
         <div class="hospital" style="width:4.2rem;">
               type="info"
               style="border: none;"
               @click="searchWithKeyword(1)"
-              >搜索</van-button
-            >
+            >搜索</van-button>
           </van-field>
         </div>
       </div>
           <el-popover v-model="visible" placement="bottom" trigger="click">
             <li slot="reference">
               {{ partitionName(partition)
-              }}<span class="iconfont">&#xe74a;</span>
+              }}
+              <span class="iconfont">&#xe74a;</span>
             </li>
             <div class="popover-demo-content">
               <ul>
                   :key="item.id"
                   @click="itemClick(item.id)"
                   :class="partition == item.id ? 'tick' : ''"
-                >
-                  {{ item.name }}
-                </li>
+                >{{ item.name }}</li>
               </ul>
             </div>
           </el-popover>
           <li @click="openPicker">
             {{ parseTime(date.getTime() / 1000, "{y}-{m}-{d}")
-            }}<span class="iconfont">&#xe74a;</span>
+            }}
+            <span
+              class="iconfont"
+            >&#xe74a;</span>
           </li>
         </ul>
       </div>
-      <van-list
-        v-model="loading"
-        :finished="finished"
-        finished-text="  "
-        @load="onLoad"
-      >
+      <van-list v-model="loading" :finished="finished" finished-text="  " @load="onLoad">
         <div class="blueBorder"></div>
         <table class="table">
           <tr>
-            <th width="8%">机号</th>
             <th width="10%">姓名</th>
+            <th width="8%">机号</th>
             <th width="9%">透析号</th>
             <th width="13%">排班时间</th>
             <th width="10%">透析模式</th>
           </tr>
         </table>
 
-        <table
-          class="table"
-          v-for="(items, index) in dialysis_scheduals"
-          :key="index"
-        >
+        <table class="table" v-for="(items, index) in dialysis_scheduals" :key="index">
           <tr v-if="items.zone_name.length > 0">
             <td width="8%">{{ items.zone_name }}</td>
-            <td width="10%"></td>
+            <td width="8%"></td>
             <td width="9%"></td>
             <td width="13%"></td>
             <td width="10%"></td>
             <td width="14%"></td>
             <td width="27%"></td>
           </tr>
-          <tr
-            v-for="(item, index) in items.scheduals"
-            :key="index"
-            @click="clickfunction(item)"
-          >
+          <tr v-for="(item, index) in items.scheduals" :key="index" @click="clickfunction(item)">
+            <td width="10%" style="color:#409eff;">{{ item.patient.name }}</td>
             <td width="8%">
               {{
-                item.dialysis_order.device_number.number.length > 0
-                  ? item.dialysis_order.device_number.number
-                  : item.device_number.number
+              item.dialysis_order.device_number.number.length > 0
+              ? item.dialysis_order.device_number.number
+              : item.device_number.number
               }}
             </td>
-            <td width="10%" style="color:#409eff;">{{ item.patient.name }}</td>
+
             <td width="9%">{{ item.patient.dialysis_no }}</td>
-            <td width="13%">
-              {{ parseTime(item.schedule_date, "{y}-{m}-{d}") }}
-            </td>
+            <td width="13%">{{ parseTime(item.schedule_date, "{y}-{m}-{d}") }}</td>
             <td width="10%">{{ item.treatment_mode.name }}</td>
             <td width="9%">
               {{
-                item.prescription.dewater_amount
-                  ? item.prescription.dewater_amount
-                  : ""
+              item.prescription.dewater_amount
+              ? item.prescription.dewater_amount
+              : ""
               }}
             </td>
             <td width="14%">
               {{
-                item.assessment_before_dislysis.weight_before
-                  ? item.assessment_before_dislysis.weight_before
-                  : ""
+              item.assessment_before_dislysis.weight_before
+              ? item.assessment_before_dislysis.weight_before
+              : ""
               }}/{{
-                item.assessment_after_dislysis.weight_after
-                  ? item.assessment_after_dislysis.weight_after
-                  : ""
+              item.assessment_after_dislysis.weight_after
+              ? item.assessment_after_dislysis.weight_after
+              : ""
               }}
             </td>
             <td width="27%">
-              <span
-                v-if="monitorBloodPressureStatus(item.monitoring_record) == 1"
-                >低压</span
-              >
-              <span
-                v-if="monitorBloodPressureStatus(item.monitoring_record) == 2"
-                >正常</span
-              >
-              <span
-                v-if="monitorBloodPressureStatus(item.monitoring_record) == 3"
-                >高压</span
-              >
-              <span v-if="monitorRateStatus(item.monitoring_record) == 1"
-                >心率过缓</span
-              >
-              <span v-if="monitorRateStatus(item.monitoring_record) == 2"
-                >正常</span
-              >
-              <span v-if="monitorRateStatus(item.monitoring_record) == 3"
-                >心率过高</span
-              >
+              <span v-if="monitorBloodPressureStatus(item.monitoring_record) == 1">低压</span>
+              <span v-if="monitorBloodPressureStatus(item.monitoring_record) == 2">正常</span>
+              <span v-if="monitorBloodPressureStatus(item.monitoring_record) == 3">高压</span>
+              <span v-if="monitorRateStatus(item.monitoring_record) == 1">心率过缓</span>
+              <span v-if="monitorRateStatus(item.monitoring_record) == 2">正常</span>
+              <span v-if="monitorRateStatus(item.monitoring_record) == 3">心率过高</span>
             </td>
           </tr>
         </table>
 
         <div class="NoData" v-show="dialysis_scheduals.length == 0">
-          <img
-            style="margin-top: 50px; margin-bottom: 50px"
-            src="@/assets/login/data.jpg"
-            alt=""
-          />
+          <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
         </div>
       </van-list>
     </div>
+    <side-bar :active_index="1"></side-bar>
     <mt-datetime-picker
       ref="date_picker"
       type="date"
       @confirm="handleDateConfirm"
       :endDate="new Date()"
       v-model="date"
-    >
-    </mt-datetime-picker>
+    ></mt-datetime-picker>
   </div>
 </template>
 
   top: 63px;
   right: 0;
   z-index: 66;
-  left: 1.58rem;
+  left: 0;
   background: #fff;
-  @media only screen and (max-width: 812px) {
-    top: 43px !important;
+  @media only screen and (max-width: 415px) {
+    top: 39px !important;
+  }
+  @media only screen and (min-width: 376px) and (max-width: 737px) {
+    top: 45px !important;
   }
   ul {
     @include display-flex;
     @include align-items-center;
     @include text-align;
     @include justify-content-between;
-    width: 30%;
+    width: 45%;
     margin: 0 auto;
     font-size: 0.32rem;
     color: $pgh-color;
   width: 100%;
 }
 .van-list {
-  padding-top: 115px;
+  padding-top: 76px;
   background: #fff;
   min-height: calc(100vh - 1px);
-  @media only screen and (max-width: 812px) {
+  @media only screen and (min-width: 376px) and (max-width: 737px) {
     padding-top: 80px !important;
   }
+  @media only screen and (min-width: 768px) and (max-width: 1024px) {
+    padding-top: 116px !important;
+  }
+}
+.mainBox {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  > :first-child {
+    flex: 1;
+    overflow: auto;
+  }
 }
 </style>

src/pages/personal/ElectronicSignature.vue

 <template>
   <div class="mainBox">
-    <side-bar :active_index="3"></side-bar>
     <div class="mainContent">
       <h1 class="title">
         <div class="GoBack" @click="$router.go(-1)">
           ></canvas>
         </div>
         <div class="imagename" v-show="showpan == 'image'">
-          <img :src="electronicsignature" alt="" srcset="" />
+          <img :src="electronicsignature" alt srcset />
         </div>
         <div class="set">
           <el-row>
             <el-button @click="clearCanvas">重写签名</el-button>
-            <el-button
-              :disabled="nobeginAction"
-              type="primary"
-              @click="getImageAction"
-              >上传签名</el-button
-            >
+            <el-button :disabled="nobeginAction" type="primary" @click="getImageAction">上传签名</el-button>
           </el-row>
         </div>
       </div>
     </div>
+    <side-bar :active_index="3"></side-bar>
     <el-dialog
       title="提示"
       :visible.sync="centerDialogVisible"
       element-loading-spinner="el-icon-loading"
       center
     >
-      <vue-cropper
-        ref="cropper"
-        :src="imgUrl"
-        alt="Source Image"
-        :cropmove="cropImage"
-      >
-      </vue-cropper>
+      <vue-cropper ref="cropper" :src="imgUrl" alt="Source Image" :cropmove="cropImage"></vue-cropper>
       <span slot="footer" class="dialog-footer">
         <el-button @click="centerDialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="uploadImage">确 定</el-button>
     height: 200px !important;
   }
 }
+.mainBox {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  > :first-child {
+    flex: 1;
+    overflow: auto;
+  }
+}
 </style>

src/pages/personal/index.vue

 <template>
-    <div class="mainBox">
-        <side-bar :active_index="3"></side-bar>
-        <div class="mainContent">
-            <h1 class="title">我的</h1>
-            <div class="information">
-                <div class="blueBorder"></div>
-                <div class="name">
-                    <!--<router-link to="/EditPersonal">-->
-                        <div class="item">
-                            <div class="tx">
-                              <img :src="myinfo.avatar" alt="" v-if="myinfo.avatar != ''">
-                              <img :src="avatar" alt="" v-if="myinfo.avatar == ''">
-                            </div>
-                            <!--<span class="iconfont">&#xe6f9;</span>-->
-                        </div>
-                    <!--</router-link>-->
-                </div>
-                <div class="name">
-                    <router-link to="/ElectronicSignature">
-                        <div class="item">
-                            <div class="tx">
-                                <img :src="electronicsignature" alt="" v-if="electronicsignature">
-                                <h2>电子签名</h2>
-                            </div>
-                            <span class="iconfont">&#xe6f9;</span>
-                        </div>
-                    </router-link>
-                </div>
-                <div class="set" v-show="false">
-                   <div class="item">
-                       <div class="tx">
-                           <img src="@/assets/my/12.png" alt="">
-                           <h2>消息通知</h2>
-                       </div>
-                       <span class="iconfont">&#xe6f9;</span>
-                   </div>
-                   <div class="item">
-                       <div class="tx">
-                           <img src="@/assets/my/13.png" alt="">
-                           <h2>系统设置</h2>
-                       </div>
-                       <span class="iconfont">&#xe6f9;</span>
-                   </div>
-                   <div class="item">
-                       <div class="tx">
-                           <img src="@/assets/my/14.png" alt="">
-                           <h2>软件更新</h2>
-                       </div>
-                       <span class="iconfont">&#xe6f9;</span>
-                   </div>
-                   <div class="item">
-                       <div class="tx">
-                           <img src="@/assets/my/15.png" alt="">
-                           <h2>使用帮助</h2>
-                       </div>
-                       <span class="iconfont">&#xe6f9;</span>
-                   </div>
-                   <div class="item">
-                       <div class="tx">
-                           <img src="@/assets/my/16.png" alt="">
-                           <h2>关于我们</h2>
-                       </div>
-                       <span class="iconfont">&#xe6f9;</span>
-                   </div>
-                </div>
-                <div class="set">
-                    <span class="out" @click="logout">退出登录</span>
-                </div>
+  <div class="mainBox">
+    <div class="mainContent">
+      <h1 class="title">我的</h1>
+      <div class="information">
+        <div class="blueBorder"></div>
+        <div class="name">
+          <!--<router-link to="/EditPersonal">-->
+          <div class="item">
+            <div class="tx">
+              <img :src="myinfo.avatar" alt v-if="myinfo.avatar != ''" />
+              <img :src="avatar" alt v-if="myinfo.avatar == ''" />
             </div>
+            <!--<span class="iconfont">&#xe6f9;</span>-->
+          </div>
+          <!--</router-link>-->
         </div>
+        <div class="name">
+          <router-link to="/ElectronicSignature">
+            <div class="item">
+              <div class="tx">
+                <img :src="electronicsignature" alt v-if="electronicsignature" />
+                <h2>电子签名</h2>
+              </div>
+              <span class="iconfont">&#xe6f9;</span>
+            </div>
+          </router-link>
+        </div>
+        <!-- <div class="name"> 
+          <router-link to="/">
+            <div class="item">
+              <div class="tx">
+              <h2>修改密码</h2>
+              </div>
+              <span class="iconfont">&#xe6f9;</span>
+            </div>
+          </router-link>
+        </div> -->
+        <div class="set" v-show="false">
+          <div class="item">
+            <div class="tx">
+              <img src="@/assets/my/12.png" alt />
+              <h2>消息通知</h2>
+            </div>
+            <span class="iconfont">&#xe6f9;</span>
+          </div>
+          <div class="item">
+            <div class="tx">
+              <img src="@/assets/my/13.png" alt />
+              <h2>系统设置</h2>
+            </div>
+            <span class="iconfont">&#xe6f9;</span>
+          </div>
+          <div class="item">
+            <div class="tx">
+              <img src="@/assets/my/14.png" alt />
+              <h2>软件更新</h2>
+            </div>
+            <span class="iconfont">&#xe6f9;</span>
+          </div>
+          <div class="item">
+            <div class="tx">
+              <img src="@/assets/my/15.png" alt />
+              <h2>使用帮助</h2>
+            </div>
+            <span class="iconfont">&#xe6f9;</span>
+          </div>
+          <div class="item">
+            <div class="tx">
+              <img src="@/assets/my/16.png" alt />
+              <h2>关于我们</h2>
+            </div>
+            <span class="iconfont">&#xe6f9;</span>
+          </div>
+        </div>
+        <div class="set">
+          <span class="out" @click="logout">退出登录</span>
+        </div>
+      </div>
     </div>
+    <side-bar :active_index="3"></side-bar>
+  </div>
 </template>
 
 <script>
     return {
       electronicsignature: "",
       myinfo: {},
-      avatar:"@/assets/product/test.jpg"
+      avatar: "@/assets/product/test.jpg"
     };
   },
   created() {
 .mainContent {
   .title {
     font-size: 0.36rem;
-    padding: 0.30rem 0;
-    color: $title-color;
+    padding: 0.3rem 0;
+    // color: $title-color;
     text-align: center;
     position: fixed;
     top: 0;
-    left: 1.58rem;
+    left: 0;
     right: 0;
     z-index: 1000;
     background: #fff;
   .information {
     width: 100%;
     margin: 0 auto;
-    padding-top:63px;
+    padding-top: 63px;
     min-height: calc(100vh - 2px);
     .name {
       background: #fff;
         }
       }
       &:last-child {
-          border: none;
-        }
+        border: none;
+      }
     }
 
     .set {
 .el-collapse-item__header {
   font-size: 0.3rem !important;
 }
+.mainBox {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  > :first-child {
+    flex: 1;
+    overflow: auto;
+  }
+}
 </style>

src/styles/media.scss

-@media only screen and (max-width: 812px) {
+@media only screen and (max-width: 376px) {
   html {
-    font-size: 29px;
+    font-size: 30px;
+  }
+}
+@media only screen and (min-width: 376px) and (max-width: 737px) {
+  html {
+    font-size: 36px;
   }
 }
 

src/styles/style.scss

 .body {
   // background: $base-color;
 }
-
+html,
+body {
+  height: 100%;
+}
 #app {
   width: 100%;
   height: 100%;
         line-height: 0.62rem;
         float: left;
         width: 5.2rem;
+        @media only screen and (max-width: 415px) {
+          width: 4.2rem;
+        }
         .content {
           color: $main-color;
         }
 
 .mainBox {
   .mainContent {
-    margin: 0 0 0 1.58rem;
+    // margin: 0 0 0 1.58rem;
   }
 }
 
     height: 0 !important;
     background-color: transparent !important;
   }
+  @media only screen and (min-width: 768px) and (max-width: 1024px) {
+    width: 0 !important;
+  }
+  @media only screen and (min-width: 1024px) {
+    width: 0 !important;
+  }
 }
 
 ::-webkit-scrollbar-track {
 }
 
 .van-popup {
-  border-radius: 20px !important;
+  border-radius: 10px !important;
   .Dialog {
     font-size: 0.36rem;
-    width: 16.8rem;
+    width: 11.8rem;
+    @media only screen and (min-width: 376px) and (max-width: 737px) {
+      width: 16.8rem !important;
+    }
+    @media only screen and (min-width: 376px) and (max-width: 415px) {
+      width: 10.8rem !important;
+    }
+    @media only screen and (min-width: 769px) and (max-width: 1024px) {
+      width: 12.8rem !important;
+    }
+    @media only screen and (min-width: 1024px) {
+      width: 15.8rem !important;
+    }
     background: #ebf1f7;
     position: relative;
     .DialogTit {
       height: 8.8rem;
       overflow-y: scroll;
       background: #fff;
-      @media only screen and (max-width: 812px) {
-        height: 8.8rem !important;
+      @media only screen and (max-width: 415px) {
+        height: 14.8rem !important;
+      }
+      @media only screen and (min-width: 666px) and (max-width: 737px) {
+        height: 7.8rem;
+      }
+      @media only screen and (min-width: 737px) and (max-width: 768px) {
+        height: 14.8rem;
+      }
+      @media only screen and (min-width: 769px) and (max-width: 1024px) {
+        height: 11.8rem;
       }
       .item {
         padding: 0 0.32rem;
   float: right;
   font-size: 0.34rem;
   .field {
-    @media only screen and (max-width: 812px) {
-      margin-top: 6px;
-    }
+    // @media only screen and (max-width: 812px) {
+    //   margin-top: 6px;
+    // }
   }
   .iconfont {
     color: #a8b3ba;
   @include text-align;
   font-size: 0.36rem;
   .back {
-    color: $main-color;
+    // color: $main-color;
+    color: #fff;
     margin-right: 0.87rem;
     .iconfont {
-      color: $main-color;
+      // color: $main-color;
+      color: #fff;
       font-size: 0.42rem;
     }
   }
 .top_row {
   position: fixed !important;
   top: 0;
-  left: 1.58rem;
+  left: 0;
   right: 0;
   z-index: 1000;
   background: #fff;
 //   background: #fff;
 // }
 .stateBox {
-  padding-top: 115px;
+  padding-top: 180px;
   background: #fff;
   min-height: calc(100vh - 2px);
   padding-left: 0.45rem;