调整样式

src/views/outClinicalpathway.vue

@@ -2,7 +2,7 @@
  * @Author: wsq
  * @Date: 2022-04-22 15:20:58
  * @LastEditors: wsq
- * @LastEditTime: 2023-02-24 15:48:24
+ * @LastEditTime: 2023-02-24 16:51:31
  * @Description: 
 -->
 <template>
@@ -28,10 +28,35 @@
           </div>
         </div>
         <div class="outClinicalpathway_top_left_two">
-          <el-radio-group v-model="radio" @input="radiochange">
-            <el-radio :label="1">长期医嘱</el-radio>
-            <el-radio :label="2">临时医嘱</el-radio>
-          </el-radio-group>
+          <div class="outClinicalpathway_top_left_two_time">
+            <el-timeline style="display: flex; padding: 0">
+              <el-timeline-item
+                v-for="(activity, index) in activities"
+                :key="index"
+                :type="activity.type"
+                :color="activity.color"
+                :size="activity.size"
+                :hollow="activity.hollow"
+                :timestamp="activity.timestamp"
+              >
+                <span
+                  :class="
+                    timeindex == activity.inhosdays
+                      ? 'outClinicalpathway_table_left_timespan'
+                      : 'outClinicalpathway_table_left_timespan2'
+                  "
+                  @click="timeclick(activity)"
+                  >{{ activity.inhosdays }}</span
+                >
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+          <div class="outClinicalpathway_top_left_two_radio">
+            <el-radio-group v-model="radio" @input="radiochange">
+              <el-radio :label="1">长期医嘱</el-radio>
+              <el-radio :label="2">临时医嘱</el-radio>
+            </el-radio-group>
+          </div>
         </div>
       </div>
       <!-- 右侧按钮 -->
@@ -112,30 +137,6 @@
     <!--病情变异弹框结束  -->
     <!-- 表格 -->
     <div class="outClinicalpathway_table">
-      <!-- 时间线 -->
-      <div class="outClinicalpathway_table_left">
-        <el-timeline style="padding: 5px">
-          <el-timeline-item
-            v-for="(activity, index) in activities"
-            :key="index"
-            :type="activity.type"
-            :color="activity.color"
-            :size="activity.size"
-            :hollow="activity.hollow"
-            :timestamp="activity.timestamp"
-          >
-            <span
-              :class="
-                timeindex == activity.inhosdays
-                  ? 'outClinicalpathway_table_left_timespan'
-                  : 'outClinicalpathway_table_left_timespan2'
-              "
-              @click="timeclick(activity)"
-              >{{ activity.inhosdays }}</span
-            >
-          </el-timeline-item>
-        </el-timeline>
-      </div>
       <!-- 表格 -->
       <div class="outClinicalpathway_table_right">
         <el-table
@@ -151,21 +152,14 @@
           size="mini"
         >
           <el-table-column type="selection" width="55" />
-          <!-- <el-table-column label="医嘱类型" width="120">
-            <template #default="scope">{{ yztype[scope.row.type] }}</template>
-          </el-table-column> -->
+
           <el-table-column
             show-overflow-tooltip
             property="advice_name"
             label="路径名称"
             width="120"
           />
-          <!-- <el-table-column
-            show-overflow-tooltip
-            property="project_code"
-            label="医院项目编码"
-            width="120"
-          /> -->
+
           <el-table-column
             show-overflow-tooltip
             property="orderType"
@@ -219,6 +213,7 @@
             show-overflow-tooltip
             property="medicalPurpose"
             label="用药目的"
+            width="125"
           >
             <template #default="scope">
               <el-select
@@ -257,7 +252,7 @@
             show-overflow-tooltip
             property="medicUseMode"
             label="途径"
-            width="120"
+            width="110"
           >
             <template #default="scope">
               <el-select
@@ -330,7 +325,7 @@
             show-overflow-tooltip
             property="remark"
             label="嘱托"
-            width="170'"
+            width="90'"
           >
             <template #default="scope">
               <el-input
@@ -344,7 +339,7 @@
               <span v-else>{{ scope.row.remark }}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="chiefComplaint" label="主诉" width="120">
+          <el-table-column prop="chiefComplaint" label="主诉" width="90">
             <template #default="scope">
               <el-input
                 v-if="
@@ -360,11 +355,7 @@
               ></el-input>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="inspectionPurpose"
-            label="检查目的"
-            width="120"
-          >
+          <el-table-column prop="inspectionPurpose" label="检查目的" width="90">
             <template #default="scope">
               <el-input
                 v-if="
@@ -380,7 +371,7 @@
               ></el-input>
             </template>
           </el-table-column>
-          <el-table-column prop="symptom" label="症状及体征" width="120">
+          <el-table-column prop="symptom" label="症状及体征" width="100">
             <template #default="scope">
               <el-input
                 v-if="
@@ -396,7 +387,7 @@
               ></el-input>
             </template>
           </el-table-column>
-          <el-table-column prop="pastHistory" label="既往史" width="120">
+          <el-table-column prop="pastHistory" label="既往史" width="90">
             <template #default="scope">
               <el-input
                 v-if="
@@ -415,7 +406,7 @@
           <el-table-column
             prop="auxiliaryItems"
             label="其他辅助项目"
-            width="120"
+            width="110"
           >
             <template #default="scope">
               <el-input
@@ -432,7 +423,7 @@
               ></el-input>
             </template>
           </el-table-column>
-          <el-table-column prop="description" label="诊断描述" width="150">
+          <el-table-column prop="description" label="诊断描述" width="100">
             <template #default="scope">
               <div
                 style="
@@ -479,7 +470,7 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column prop="inspectRemarks" label="备注" width="150">
+          <el-table-column prop="inspectRemarks" label="备注" width="90">
             <template #default="scope">
               <el-input
                 size="mini"
@@ -967,7 +958,23 @@ export default {
 <style lang="scss" scoped>
 @import "../styles/mixin.scss";
 @import "../styles/media/components/outClinicalpathway.scss";
-
+//时间线样式
+::v-deep .el-timeline-item__tail {
+  left: 0 !important;
+  height: 0 !important;
+}
+::v-deep .el-timeline-item {
+  padding-bottom: 5px !important;
+  display: flex !important;
+  align-items: end !important;
+}
+::v-deep .el-timeline-item__wrapper {
+  padding-left: 15px !important;
+  margin-right: 30px !important;
+  top: 4px !important;
+  display: flex !important;
+  align-items: end !important;
+}
 //单选框
 ::v-deep .el-radio__input.is-checked .el-radio__inner {
   background-color: #0085ba !important;
@@ -1037,7 +1044,7 @@ export default {
       justify-content: center;
       &_one {
         width: 100%;
-        height: 30%;
+        height: 40%;
         background-color: #0283b9;
         margin-bottom: 10px;
         display: flex;
@@ -1140,7 +1147,18 @@ export default {
       &_two {
         height: 50%;
         display: flex;
-        align-items: end;
+        flex-direction: column;
+        justify-content: flex-start;
+        &_time {
+          width: 100%;
+          height: 50%;
+        }
+        &_radio {
+          width: 100%;
+          height: 50%;
+          display: flex;
+          align-items: center;
+        }
       }
     }
     &_right {
@@ -1162,27 +1180,27 @@ export default {
     height: 81%;
     width: 100%;
     display: flex;
-    &_left {
-      width: 8%;
-      height: 100%;
-      margin-right: 5px;
-      background-color: #ffff;
-      padding-top: 10px;
-      &_timespan {
-        width: 80%;
-        height: 20px;
-        display: flex;
-        background-color: #0283bb;
-        color: #ffff;
-      }
-      &_timespan2 {
-        width: 80%;
-        height: 20px;
-        display: flex;
-      }
-    }
+    // &_left {
+    //   width: 8%;
+    //   height: 100%;
+    //   margin-right: 5px;
+    //   background-color: #ffff;
+    //   padding-top: 10px;
+    //   &_timespan {
+    //     width: 80%;
+    //     height: 20px;
+    //     display: flex;
+    //     background-color: #0283bb;
+    //     color: #ffff;
+    //   }
+    //   &_timespan2 {
+    //     width: 80%;
+    //     height: 20px;
+    //     display: flex;
+    //   }
+    // }
     &_right {
-      width: 91%;
+      width: 100%;
       height: 100%;
     }
   }