修改样式

src/views/outClinicalpathway.vue

@@ -2,7 +2,7 @@
  * @Author: wsq
  * @Date: 2022-04-22 15:20:58
  * @LastEditors: wsq
- * @LastEditTime: 2023-02-24 16:51:31
+ * @LastEditTime: 2023-02-27 14:15:11
  * @Description: 
 -->
 <template>
@@ -11,9 +11,9 @@
     <!-- 患者信息 -->
     <div class="outClinicalpathway_top">
       <!-- 左侧内容 -->
-      <div class="outClinicalpathway_top_left">
+      <!-- <div class="outClinicalpathway_top_left">
         <div class="outClinicalpathway_top_left_one">
-          <!-- <span><img src="../assets/img/peo.png" alt="" /></span> -->
+          <span><img src="../assets/img/peo.png" alt="" /></span>
           <div class="outClinicalpathway_top_left_one_t1">
             患者姓名:<span>{{ topdata.patientName }}</span>
           </div>
@@ -42,8 +42,8 @@
                 <span
                   :class="
                     timeindex == activity.inhosdays
-                      ? 'outClinicalpathway_table_left_timespan'
-                      : 'outClinicalpathway_table_left_timespan2'
+                      ? 'outClinicalpathway_top_left_two_time_timespan'
+                      : 'outClinicalpathway_top_left_two_time_timespan2'
                   "
                   @click="timeclick(activity)"
                   >{{ activity.inhosdays }}</span
@@ -58,21 +58,81 @@
             </el-radio-group>
           </div>
         </div>
-      </div>
+      </div> -->
+
       <!-- 右侧按钮 -->
-      <div class="outClinicalpathway_top_right">
+      <!-- <div class="outClinicalpathway_top_right">
         <div class="outClinicalpathway_top_right_btn">
           <el-button
+            icon="el-icon-user"
             style="background-color: #0283bb; color: #ffff"
             @click="joinorder()"
             >加入医嘱</el-button
           >
           <el-button
+            icon="el-icon-s-tools"
             style="background-color: #0283bb; color: #ffff"
             @click="variation()"
             >病情变异</el-button
           >
         </div>
+      </div> -->
+      <div class="outClinicalpathway_top_bg"></div>
+      <div class="outClinicalpathway_top_coent">
+        <!--患者信息 -->
+        <div class="outClinicalpathway_top_coent_left">
+          <div class="outClinicalpathway_top_coent_left_one">
+            <span><img src="../assets/img/peo.png" alt="" /></span>
+            <div class="outClinicalpathway_top_coent_left_one_t1">
+              患者姓名:<span>{{ topdata.patientName }}</span>
+            </div>
+            <div class="outClinicalpathway_top_coent_left_one_t2">
+              住院号:<span>{{ topdata.regCode }}</span>
+            </div>
+            <div class="outClinicalpathway_top_coent_left_one_t3">
+              住院次数:<span>{{ topdata.inHosNum }}</span>
+            </div>
+            <div class="outClinicalpathway_top_coent_left_one_t4">
+              符合临床路径:<span>{{ topdata.clinical_route_name }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="outClinicalpathway_top_coent_right">
+          <div class="outClinicalpathway_top_coent_right_btn">
+            <el-button
+              icon="el-icon-user"
+              style="background-color: #0283bb; color: #ffff"
+              @click="joinorder()"
+              >加入医嘱</el-button
+            >
+            <el-button
+              icon="el-icon-s-tools"
+              style="background-color: #0283bb; color: #ffff"
+              @click="variation()"
+              >病情变异</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <div class="outClinicalpathway_top_time">
+        <el-timeline style="display: flex; width: 25%; padding: 0 10px">
+          <el-timeline-item
+            :class="
+              timeindex == activity.inhosdays
+                ? 'outClinicalpathway_top_time_timespan'
+                : 'outClinicalpathway_top_time_timespan2'
+            "
+            v-for="(activity, index) in activities"
+            :key="index"
+            :type="activity.type"
+            :color="activity.color"
+            :size="activity.size"
+            :hollow="activity.hollow"
+            :timestamp="activity.timestamp"
+          >
+            <span @click="timeclick(activity)">{{ activity.inhosdays }}</span>
+          </el-timeline-item>
+        </el-timeline>
       </div>
     </div>
     <!--病情变异弹框开始 -->
@@ -508,6 +568,7 @@ import { useRoute, useRouter } from "../utils/useVueRouter";
 import { setItem, getItem } from "../utils/auth";
 import { Loading } from "element-ui";
 import _ from "lodash";
+
 export default {
   name: "outClinicalpathway",
   setup() {
@@ -1029,31 +1090,40 @@ export default {
   position: relative;
   &_top {
     width: 100%;
-    height: 15%;
+    height: 12%;
     margin-bottom: 5px;
+    background-color: #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    &_bg {
+      width: 100%;
+      height: 15%;
+      background-color: #0283bb;
+    }
+    &_coent {
+      width: 100%;
+      height: 50%;
       background-color: #ffff;
-    padding: 10px;
       display: flex;
-    justify-content: space-between;
-    align-items: center;
+      margin-bottom: 5px;
       &_left {
         height: 100%;
-      width: 80%;
+        width: 100%;
         display: flex;
-      flex-direction: column;
         justify-content: center;
+        align-items: center;
         &_one {
-        width: 100%;
-        height: 40%;
-        background-color: #0283b9;
+          width: 98%;
+          height: 80%;
+          background-color: #f2fafd;
           margin-bottom: 10px;
           display: flex;
           align-items: center;
           justify-content: space-between;
+          margin-top: 10px;
           span {
             width: 3%;
             height: 100%;
-
             font-size: 14px;
             display: flex;
             justify-content: center;
@@ -1076,7 +1146,6 @@ export default {
               color: #181617;
               display: flex;
               justify-content: flex-start;
-
               align-items: center;
             }
           }
@@ -1096,7 +1165,6 @@ export default {
               color: #181617;
               display: flex;
               justify-content: flex-start;
-
               align-items: center;
             }
           }
@@ -1111,11 +1179,9 @@ export default {
             color: #acacac;
             font-weight: 400;
             padding-left: 20px;
-
             span {
               width: 80%;
               height: 80%;
-
               color: #181617;
               display: flex;
               justify-content: flex-start;
@@ -1132,11 +1198,9 @@ export default {
             color: #acacac;
             font-weight: 400;
             padding-left: 20px;
-
             span {
               width: 60%;
               height: 80%;
-
               color: #181617;
               display: flex;
               justify-content: flex-start;
@@ -1144,28 +1208,12 @@ export default {
             }
           }
         }
-      &_two {
-        height: 50%;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        &_time {
-          width: 100%;
-          height: 50%;
-        }
-        &_radio {
-          width: 100%;
-          height: 50%;
-          display: flex;
-          align-items: center;
-        }
-      }
       }
       &_right {
         height: 100%;
         width: 20%;
         display: flex;
-
+        align-items: center;
         justify-content: center;
         &_btn {
           height: 50%;
@@ -1176,8 +1224,33 @@ export default {
         }
       }
     }
+    &_time {
+      width: 100%;
+      height: 35%;
+      background: #ffff;
+      padding-left: 20px;
+      display: flex;
+      align-items: center;
+      &_timespan {
+        width: 100%;
+        height: 20px;
+        display: flex;
+        background-color: #0283bb;
+        border-radius: 20px;
+        margin-right: 10px;
+        span {
+          color: #ffff;
+        }
+      }
+      &_timespan2 {
+        width: 100%;
+        height: 20px;
+        display: flex;
+      }
+    }
+  }
   &_table {
-    height: 81%;
+    height: 84%;
     width: 100%;
     display: flex;
     // &_left {