64574 病历管理，编辑、详情页面去冒号，字折行了

src/views/medical-record-management/medical-edit.vue

@@ -38,7 +38,7 @@ color: #333333;"
           :model="detailInfo"
           :hide-required-asterisk="!isEdit"
           :rules="formRules"
-          class="registration-add-form"
+          class="medical-detail__form"
           label-width="81px"
           size="small"
         >
@@ -51,10 +51,13 @@ color: #333333;"
             >宠物信息
             </div>
           </div>
-          <!-- 内部信息 -->
-          <!--      宠物基本信息-->
+          <!--   1-- 宠物基本信息的页面--内部信息 -->
+          <div class="base-msg">
+            <div>
+              <!--基础信息右边的信息-->
+              <div class="base-inner">
                 <el-row>
-            <el-col :span="8">
+                  <el-col :span="8" class="form__left">
                     <el-form-item label="宠物昵称" prop="petNickname">
                       <el-input v-model="detailInfo.petNickname" :placeholder="'-'" disabled />
                     </el-form-item>
@@ -117,7 +120,7 @@ color: #333333;"
                   </el-col>
                 </el-row>
                 <el-row>
-            <el-col :span="8">
+                  <el-col :span="8" class="form__left">
                     <!--宠物性别-->
                     <el-form-item label="宠物性别" prop="petSex">
                       <el-select
@@ -172,7 +175,7 @@ color: #333333;"
                   </el-col>
                 </el-row>
                 <el-row>
-            <el-col :span="8">
+                  <el-col :span="8" class="form__left">
                     <!--宠物毛色-->
                     <el-form-item label="宠物毛色" prop="petColor">
                       <el-input
@@ -223,7 +226,7 @@ color: #333333;"
                   </el-col>
                 </el-row>
                 <el-row>
-            <el-col :span="8">
+                  <el-col :span="8" class="form__left">
                     <!--保险情况-->
                     <el-form-item label="宠物保险" prop="insure">
                       <el-select
@@ -243,6 +246,9 @@ color: #333333;"
                     </el-form-item>
                   </el-col>
                 </el-row>
+              </div>
+            </div>
+          </div>
           <!--3--宠主信息-->
           <div style="display: flex;margin-bottom: 20px;">
             <div class="tip-green" />
@@ -251,10 +257,13 @@ color: #333333;"
             >宠主信息
             </div>
           </div>
-          <!-- 内部信息 -->
-          <!--      宠主基本信息-->
+          <!--   1-- 宠物基本信息的页面--内部信息 -->
+          <div class="base-msg">
+            <div>
+              <!--基础信息右边的信息-->
+              <div class="base-inner">
                 <el-row>
-            <el-col :span="8">
+                  <el-col :span="8" class="form__left">
                     <el-form-item label="宠主姓名">
                       <el-input v-model="detailInfo.petOwnerBo.nickName" :placeholder="'-'" disabled />
                     </el-form-item>
@@ -271,7 +280,7 @@ color: #333333;"
                   </el-col>
                 </el-row>
                 <el-row>
-            <el-col v-if="deptLevel !== '1'" :span="8">
+                  <el-col v-if="deptLevel !== '1'" :span="8" class="form__left">
                     <el-form-item label="创建日期">
                       <span class="content-style">
                         <el-date-picker
@@ -313,8 +322,8 @@ color: #333333;"
                     </el-form-item>
                   </el-col>
                 </el-row>
-          <el-row v-if="deptLevel !== '1'">
-            <el-col v-if="deptLevel !== '1'" :span="8">
+                <el-row v-if="deptLevel !== '1'" align="middle">
+                  <el-col v-if="deptLevel !== '1'" :span="8" class="form__left">
                     <el-form-item label="状态">
                       <el-select v-model="detailInfo.petOwnerBo.status" :placeholder="'-'" disabled>
                         <el-option
@@ -327,11 +336,17 @@ color: #333333;"
                     </el-form-item>
                   </el-col>
                   <el-col v-if="deptLevel !== '1'" :span="8">
-              <el-form-item label="绑定宠物数量" :label-width="'100'">
+                    <el-form-item label="绑定宠物数量" :label-width="100">
+                      <div style="display: flex;align-items: center;">
                         <el-input v-model="detailInfo.petOwnerBo.petCount" :placeholder="'-'" disabled />
+                      </div>
                     </el-form-item>
                   </el-col>
+
                 </el-row>
+              </div>
+            </div>
+          </div>
           <!--4--兽医信息-->
           <div style="display: flex;margin-bottom: 20px;">
             <div class="tip-green" />
@@ -340,10 +355,13 @@ color: #333333;"
             >兽医信息
             </div>
           </div>
-          <!-- 内部信息 -->
-          <!--      宠主基本信息-->
+          <!--   1-- 宠物基本信息的页面--内部信息 -->
+          <div class="base-msg">
+            <div>
+              <!--基础信息右边的信息-->
+              <div class="base-inner">
                 <el-row>
-            <el-col :span="8">
+                  <el-col :span="8" class="form__left">
                     <el-form-item label="医生姓名" prop="doctorName">
                       <el-input v-model="detailInfo.doctorName" :placeholder="'-'" disabled />
                     </el-form-item>
@@ -358,7 +376,7 @@ color: #333333;"
                       <el-input v-model="detailInfo.doctorPhone" :placeholder="'-'" disabled />
                     </el-form-item>
                   </el-col>
-            <el-col :span="8">
+                  <el-col :span="8" class="form__left">
                     <el-form-item label="所属医院" prop="hospitalName">
                       <el-input v-model="detailInfo.hospitalName" :placeholder="'-'" disabled />
                     </el-form-item>
@@ -374,6 +392,9 @@ color: #333333;"
                     </el-form-item>
                   </el-col>
                 </el-row>
+              </div>
+            </div>
+          </div>
           <!--5--进度信息-->
           <schedule-info :schedule-key="scheduleKey" />
           <!--6--就诊信息-->
@@ -387,7 +408,7 @@ color: #333333;"
           <!-- 内部信息 -->
           <!--      宠主基本信息-->
           <el-row>
-            <el-col :span="8">
+            <el-col :span="8" class="form__left">
               <el-form-item label="病历号">
                 <el-input
                   v-model="detailInfo.medicalRecordNo"
@@ -424,7 +445,7 @@ color: #333333;"
                   :placeholder="isEdit? '请输入主诉' : '-'"
                   type="textarea"
                   show-word-limit
-                  style="width: 85% !important"
+                  style="width: 90% !important"
                 />
               </el-form-item>
             </el-col>
@@ -437,7 +458,7 @@ color: #333333;"
                   maxlength="400"
                   :placeholder="isEdit? '请输入医嘱' : '-'"
                   type="textarea"
-                  style="width: 85% !important"
+                  style="width: 90% !important"
                 />
               </el-form-item>
             </el-col>
@@ -448,7 +469,7 @@ color: #333333;"
                   :disabled="!isEdit"
                   maxlength="20"
                   :placeholder="isEdit? '请输入诊断结果' : '-'"
-                  style="width: 85% !important"
+                  style="width: 90% !important"
                 />
               </el-form-item>
             </el-col>
@@ -1291,7 +1312,7 @@ color: #333333;"
                 show-word-limit
                 :placeholder="isEdit? '请输入回访情况' : '-'"
                 type="textarea"
-                style="width: 85% !important"
+                style="width: 90% !important"
               />
             </el-form-item>
           </el-col>
@@ -2413,24 +2434,6 @@ export default {
     //height:150px;
   }
 
-  //1--基本信息--模块内信息整体样式
-  .base-msg {
-    //display: grid !important;
-    //grid-template-columns: repeat(2, auto);
-    color: #666666;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    //margin-left: 5%;
-    //margin-right: 5%;
-    //基础信息右边的信息样式
-    .base-inner {
-      //display: grid !important;
-      //grid-template-columns: repeat(3, auto);
-      //与头像左边距
-      //padding-left: 10%;
-    }
-  }
-
   //2--宠物保险--模块内信息整体样式
   .table-content {
     margin: 35px 1% 20px;
@@ -2439,11 +2442,8 @@ export default {
   //3--主人信息--模块内信息整体样式
   .ownerMsg-inner {
     color: #666666;
-    //display: grid !important;
-    //grid-template-columns: repeat(2, auto);
     margin-top: 20px;
     margin-bottom: 20px;
-    //margin-right: 5%;
   }
 
   //模块tip样式--绿色
@@ -2607,4 +2607,47 @@ export default {
   }
 }
 
+/*全部的回显框宽度限制*/
+.medical-detail__form {
+  .el-form-item {
+    margin-right: 0 !important;
+
+    &__content {
+      .el-input, .el-select {
+        width: 100% !important;
+      }
+
+      .el-select ::v-deep .el-input {
+        width: 100% !important;
+      }
+
+      .half {
+        width: 50% !important;
+      }
+
+      .half__-5px {
+        width: calc(50% - 5px) !important;
+      }
+    }
+  }
+}
+
+//1--基本信息--模块内信息整体样式
+.base-msg {
+  color: #666666;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.el-col-8 {
+  padding-left: 41px;
+}
+
+.form__left {
+  margin-left: -40px;
+}
+
+.base-inner {
+  padding-left: 10px;
+}
 </style>