诊疗档案详情样式调整

acupuncture-前台/src/views/medicalFile/details.vue

@@ -9,10 +9,11 @@
         </el-step>
       </el-steps>
     </div>
-    <div class="div-right" style="padding: 0 16px">
+    <div class="div-right" style="padding: 0 20px">
+      <el-card class="box-card">
         <a name="基本信息"></a>
         <div class="div-title1">基本信息</div>
-      <div class="div-border div-bot20">
+        <div>
           <el-descriptions class="margin-top" :column="3">
             <el-descriptions-item label="姓名">{{
               form.name
@@ -48,15 +49,15 @@
             </el-descriptions-item>
           </el-descriptions>
         </div>
+      </el-card>
 
       <!-- 档案详情-->
       <el-form ref="detailsForm" :model="detailsForm" class="formStep">
+        <!-- 主要诊断 -->
+        <el-card class="box-card">
           <a name="主要诊断"></a>
           <div class="div-title1">主要诊断</div>
-        <el-form-item
-          class="form-item-zd div-border div-pad20"
-          prop="JBXX_ZYZD"
-        >
+          <el-form-item prop="JBXX_ZYZD" style="margin-bottom: 0">
             <el-checkbox-group v-model="detailsForm['JBXX_ZYZD']">
               <el-checkbox
                 :disabled="form.status != 0 && form.status != 3"
@@ -65,14 +66,20 @@
               >
               </el-checkbox>
             </el-checkbox-group>
-          <el-input v-model="detailsForm['JBXX_ZYZD_QT']" placeholder="其他" />
+            <el-input
+              v-model="detailsForm['JBXX_ZYZD_QT']"
+              placeholder="其他"
+            />
           </el-form-item>
+        </el-card>
+        <!-- 病情评估 -->
+        <el-card class="box-card">
           <div>
             <a name="病情评估"></a>
             <div class="div-title1">病情评估</div>
             <div class="div-title2">人体成分</div>
           </div>
-        <div class="human-body div-border div-bot20">
+          <div class="human-body">
             <el-form-item label="体重" prop="PG_RTCF_TZ">
               <el-input
                 :disabled="form.status != 0 && form.status != 3"
@@ -194,10 +201,16 @@
               />
             </el-form-item>
           </div>
+        </el-card>
+        <el-card class="box-card">
           <a name="中医体质辨识"></a>
           <div class="div-title1">中医体质辨识</div>
-        <div class="div-border div-bot20">
-          <el-form-item prop="PG_TZBS_ZYTZ" label="主要体质">
+          <div>
+            <el-form-item
+              prop="PG_TZBS_ZYTZ"
+              label="主要体质"
+              style="margin-bottom: 0"
+            >
               <el-radio-group
                 :disabled="form.status != 0 && form.status != 3"
                 v-model="detailsForm['PG_TZBS_ZYTZ']"
@@ -214,6 +227,7 @@
               class="item-form-jjtz"
               prop="PG_TZBS_JJTZ"
               label="兼夹体质"
+              style="margin-bottom: 0"
             >
               <div style="width: 100%">
                 <el-checkbox-group
@@ -230,10 +244,12 @@
               </div>
             </el-form-item>
           </div>
+        </el-card>
         <!-- 体态评估 -->
+        <el-card class="box-card">
           <a name="体态评估"></a>
-        <div class="div-border div-bot20">
-          <div class="div-title2">体态评估</div>
+          <div>
+            <div class="div-title1">体态评估</div>
             <div class="human-body">
               <el-form-item label="" prop="PG_TT_TAPS_DF">
                 <template v-slot:label>
@@ -275,7 +291,10 @@
                   <span
                     class="foem-item-pg"
                     @click="
-                    handleComponents('PG_SM_PHQ-9_DF', '患者健康问卷（PHQ-9）')
+                      handleComponents(
+                        'PG_SM_PHQ-9_DF',
+                        '患者健康问卷（PHQ-9）'
+                      )
                     "
                   >
                     评估
@@ -292,7 +311,9 @@
                   <span>Epworth嗜睡评估得分(0-24分)</span>
                   <span
                     class="foem-item-pg"
-                  @click="handleComponents('PG_SM_EPSW_DF', 'Epworth嗜睡评估')"
+                    @click="
+                      handleComponents('PG_SM_EPSW_DF', 'Epworth嗜睡评估')
+                    "
                   >
                     评估
                   </span>
@@ -367,9 +388,12 @@
               </el-form-item>
             </div>
           </div>
+        </el-card>
+        <!-- 治疗类型 -->
+        <el-card class="box-card">
           <a name="治疗类型"></a>
           <div class="div-title1">治疗类型</div>
-        <el-form-item prop="ZLFA_ZLLX" class="div-border div-pad10">
+          <el-form-item prop="ZLFA_ZLLX" style="margin-bottom: 0">
             <el-radio-group
               :disabled="form.status != 0 && form.status != 3"
               v-model="detailsForm['ZLFA_ZLLX']"
@@ -378,16 +402,15 @@
               <el-radio label="单纯中医治疗"> </el-radio>
             </el-radio-group>
           </el-form-item>
+        </el-card>
+
+        <!-- 诊疗方法 -->
+        <el-card class="box-card">
           <a name="诊疗方法"></a>
           <div style="font-size: 22px; margin-bottom: 14px" class="div-title1">
             诊疗方法
           </div>
-        <div
-          class="div-border div-pad10"
-          style="margin-bottom: 14px"
-          v-for="(i, ind) in healType"
-          :key="ind"
-        >
+          <div v-for="(i, ind) in healType" :key="ind">
             <div class="div-title2">{{ i.title }}</div>
             <div v-for="(j, jnd) in i.list" :key="jnd">
               <div v-if="j.title != '针灸疗法'">
@@ -442,12 +465,14 @@
               </div>
             </div>
           </div>
-        <!--  -->
-        <div class="human-body"></div>
+        </el-card>
+
+        <!-- 治疗效果 -->
+        <el-card class="box-card">
           <a name="治疗效果"></a>
           <div class="div-title1">治疗效果</div>
-        <div class="div-border div-bot20">
-          <el-form-item prop="ZLFA_ZLXG" class="div-border div-pad10">
+          <div>
+            <el-form-item prop="ZLFA_ZLXG" style="margin-bottom: 0">
               <el-radio-group
                 :disabled="form.status != 0 && form.status != 3"
                 v-model="detailsForm['ZLFA_ZLXG']"
@@ -458,9 +483,18 @@
                 <el-radio label="无效"> </el-radio>
               </el-radio-group>
             </el-form-item>
+          </div>
+        </el-card>
+
+        <!-- 诊疗费用 -->
+        <el-card class="box-card">
           <a name="诊疗费用"></a>
           <div class="div-title2">诊疗费用</div>
-          <el-form-item label="总体费用按照区间进行选择" prop="ZLFA_ZTFY">
+          <el-form-item
+            label="总体费用按照区间进行选择"
+            prop="ZLFA_ZTFY"
+            style="margin-bottom: 0"
+          >
             <el-radio-group
               :disabled="form.status != 0 && form.status != 3"
               v-model="detailsForm['ZLFA_ZTFY']"
@@ -472,7 +506,11 @@
               <el-radio label=">5000元" value="<300元"> </el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="检查费用按照区间进行选择" prop="ZLFA_JCFY">
+          <el-form-item
+            label="检查费用按照区间进行选择"
+            prop="ZLFA_JCFY"
+            style="margin-bottom: 0"
+          >
             <el-radio-group
               :disabled="form.status != 0 && form.status != 3"
               v-model="detailsForm['ZLFA_JCFY']"
@@ -484,7 +522,11 @@
               <el-radio label=">5000元"> </el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="中医治疗费用按照区间进行选择" prop="ZLFA_ZYZLFY">
+          <el-form-item
+            label="中医治疗费用按照区间进行选择"
+            prop="ZLFA_ZYZLFY"
+            style="margin-bottom: 0"
+          >
             <el-radio-group
               :disabled="form.status != 0 && form.status != 3"
               v-model="detailsForm['ZLFA_ZYZLFY']"
@@ -496,7 +538,11 @@
               <el-radio label=">5000元"> </el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="药物费用按照区间进行选择" prop="ZLFA_YWFY">
+          <el-form-item
+            label="药物费用按照区间进行选择"
+            prop="ZLFA_YWFY"
+            style="margin-bottom: 0"
+          >
             <el-radio-group
               :disabled="form.status != 0 && form.status != 3"
               v-model="detailsForm['ZLFA_YWFY']"
@@ -508,6 +554,9 @@
               <el-radio label=">5000元"> </el-radio>
             </el-radio-group>
           </el-form-item>
+        </el-card>
+        <!-- 随访队列 -->
+        <el-card class="box-card">
           <a name="随访队列"></a>
           <div class="div-title2">随访队列</div>
           <el-select
@@ -524,7 +573,7 @@
             >
             </el-option>
           </el-select>
-        </div>
+        </el-card>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button
@@ -1206,8 +1255,11 @@ export default {
 };
 </script>
 <style scoped src="@/assets/styles/common.css"></style>
-
+<!-- box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); -->
 <style scoped>
+.box-card {
+  margin-bottom: 16px;
+}
 .status1 {
   color: orange;
 }
@@ -1250,7 +1302,6 @@ export default {
 }
 .app-container .div-left {
   width: 210px;
-  margin-right: 20px;
   flex-shrink: 0;
   border-right: 1px solid #d8d8d8;
 }
@@ -1278,6 +1329,8 @@ export default {
   font-size: 22px;
   font-weight: bold;
   margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #dcdfe6;
 }
 
 .div-title2 {