修改样式

src/pages/layout/SideBar.vue

@@ -3,17 +3,15 @@
     <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' : ''"
-        >
+        <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>
+          <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">
@@ -68,13 +66,19 @@ export default {
   position: absolute;
   top: 3px;
   right: -16px;
-  @media only screen and (max-width: 767px) {
+  @media only screen and (max-width: 415px) {
     height: 16px;
     width: 16px;
     line-height: 16px;
     top: 1px;
     right: -8px;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    height: 20px;
+    width: 20px;
+    line-height: 21px;
+    font-size: 0.36rem;
+  }
 }
 .sideColumn {
   // float: left;

src/pages/main/PatientBox.vue

@@ -18,28 +18,24 @@
             "
             alt
           />
-          <span class="redpoint" v-if="getStatus(patient)">{{
+          <span class="redpoint" v-if="getStatus(patient)">
+            {{
             getUnReadNum(patient) > 99
-              ? getUnReadNum(patient) + "+"
-              : getUnReadNum(patient)
-          }}</span>
+            ? getUnReadNum(patient) + "+"
+            : getUnReadNum(patient)
+            }}
+          </span>
           <div class="right">
             <h3 class="name">
               {{ patient.patient.name }}
               <span class="yztx" v-if="getStatus(patient)">医嘱</span>
               <span class="yc" v-show="isAbnormal(patient)">异常</span>
             </h3>
-            <span class="num"
-              >{{ genderText(patient) }} | {{ age(patient) }}岁</span
-            >
+            <span class="num">{{ genderText(patient) }} | {{ age(patient) }}岁</span>
             <!-- 性别、年龄 -->
           </div>
         </div>
-        <div
-          class="online"
-          style="flex:1.1;"
-          v-show="computeState(patient) != 4"
-        >
+        <div class="online" style="flex:1;" v-show="computeState(patient) != 4">
           <p :class="stateColor(patient)">{{ stateText(patient) }}</p>
           <!-- <span class="time">剩余时间 : 90:08</span>     -->
         </div>
@@ -55,11 +51,11 @@
             <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
+            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>
@@ -298,9 +294,17 @@ export default {
   @media only screen and (max-width: 415px) {
     width: 96% !important;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    width: 48%;
+    margin: 0 1% 0.5rem 0;
+  }
   .function {
     padding: 0.3rem 0.32rem 0 0.32rem;
     color: #7b8a97;
+    @media only screen and (min-width: 415px) and (max-width: 767px) {
+      margin: 0;
+      padding: 0.3rem 0.1rem 0 0.1rem;
+    }
     ul {
       @include display-flex;
       @include align-items-center;
@@ -334,6 +338,9 @@ export default {
     @include justify-content-between;
     border-bottom: 1px #e5e5e5 solid;
     padding: 0 0 0.3rem 0.32rem;
+    @media only screen and (min-width: 415px) and (max-width: 767px) {
+      padding: 0 0 0.3rem 0.1rem;
+    }
     .tx {
       @include display-flex;
       @include align-items-center;
@@ -397,6 +404,10 @@ export default {
           font-size: 0.36rem;
           width: 1.7rem;
         }
+        @media only screen and (min-width: 415px) and (max-width: 767px) {
+          width: 1.3rem;
+          font-size: 0.36rem;
+        }
       }
       .blue {
         background: $main-color;
@@ -443,13 +454,21 @@ export default {
   top: -6px;
   left: 0.6rem;
   border: 1px solid #fff;
-  @media only screen and (max-width: 767px) {
+  @media only screen and (max-width: 415px) {
     height: 16px;
     width: 16px;
     line-height: 15px;
     top: -6px;
     left: 0.6rem;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    height: 20px;
+    width: 20px;
+    line-height: 19px;
+    top: -6px;
+    left: 0.6rem;
+    font-size: 0.36rem;
+  }
 }
 .yztx {
   margin: 0 5px;
@@ -461,5 +480,9 @@ export default {
   @media only screen and (max-width: 415px) {
     font-size: 0.34rem !important;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    margin: 0;
+    padding: 3px 3px;
+  }
 }
 </style>

src/pages/main/RecordPage.vue

@@ -76,9 +76,9 @@
               {{ "候诊区" }}
               <span class="redpoint" v-if="un_read_wait_num">
                 {{
-                  un_read_wait_num > 99
-                    ? un_read_wait_num + "+"
-                    : un_read_wait_num
+                un_read_wait_num > 99
+                ? un_read_wait_num + "+"
+                : un_read_wait_num
                 }}
               </span>
             </li>
@@ -90,9 +90,9 @@
               {{ "透析区" }}
               <span class="redpoint" v-if="un_read_dialysis_num">
                 {{
-                  un_read_dialysis_num > 99
-                    ? un_read_dialysis_num + "+"
-                    : un_read_dialysis_num
+                un_read_dialysis_num > 99
+                ? un_read_dialysis_num + "+"
+                : un_read_dialysis_num
                 }}
               </span>
             </li>
@@ -118,11 +118,7 @@
         <van-button size="small" type="info">临时排班</van-button>
     </div>-->
     <div class="area">
-      <waiting-area
-        v-show="index == 0"
-        title="候诊区"
-        :search_keyword="search_keyword"
-      ></waiting-area>
+      <waiting-area v-show="index == 0" title="候诊区" :search_keyword="search_keyword"></waiting-area>
       <dialysis-area
         v-show="index == 1"
         title="透析区"
@@ -284,6 +280,12 @@ export default {
     width: 16px;
     line-height: 15px;
   }
+  @media only screen and (min-width: 415px) and (max-width: 767px) {
+    height: 20px;
+    width: 20px;
+    line-height: 20px;
+    font-size: 0.36rem;
+  }
 }
 .box {
   height: 1rem;

src/styles/style.scss

@@ -922,6 +922,7 @@ body {
   }
   @media only screen and (min-width: 415px) and (max-width: 767px) {
     padding-top: 186px;
+    padding-left: 0.3rem;
   }
 }
 #app {