优化检查登记 两个界面

src/views/safetycheck/task/components/checkRegister.vue

@@ -95,7 +95,7 @@
                 检查内容
               </div>
               <div class="point_areaname">检查区域</div>
-              <div class="point_btn" style="text-align: center">检查结果</div>
+              <div class="point_btn_header" style="text-align: center">检查结果</div>
             </div>
           </div>
         </div>
@@ -186,17 +186,18 @@
                 </div>
               </div>
               <div class="point_areaname">
-                {{ point.areaName }}
+                 {{ point.areaName }}
               </div>
               <div class="point_btn">
-                <el-radio-group
+                <div style="display:flex">
+                  <el-radio-group
                   v-model="point.status"
-                  style="margin-left: 20px"
+                  style="margin-left: 20px;padding-top:10px"
                 >
                   <el-radio :label="0">正常</el-radio>
                   <el-radio :label="1">异常</el-radio>
                 </el-radio-group>
-                <div style="margin-top: -5px">
+                <div>
                   <el-button
                     type="danger"
                     size="mini"
@@ -206,6 +207,8 @@
                     >删除</el-button
                   >
                 </div>
+                </div>
+                
               </div>
             </div>
           </div>
@@ -455,24 +458,39 @@ export default {
 .app-container {
   background-color: white;
 }
+.el-row-button {
+  margin-top: 20px;
+}
 .content {
-  max-height: calc(100% - 300px);
+  max-height: calc(100% - 350px);
   overflow-y: auto;
   margin-bottom: 20px;
   margin-top: 20px;
+  flex-direction: column;
+}
+.itemDetail {
+  max-height: calc(100% - 300px);
+  overflow-y: auto;
+  margin-top: 20px;
 }
 .area_content {
   border: #b8bdc0 1px solid;
+  border-bottom: none;
   display: flex;
   flex-direction: row;
+  width: 100%;
 }
 
-.content > .area_content:first-child {
-  border-bottom: none;
+.area_content:last-child{
+  border-bottom: #b8bdc0 1px solid;
 }
 
+// .content > .area_content:first-child {
+//   border-bottom: none;
+// }
+
 .content > .area_content:last-child {
-  border-bottom: #b8bdc0 1px solid;
+  // border-bottom: #b8bdc0 1px solid;
 }
 
 .area_content > div:nth-child(1) {
@@ -485,12 +503,15 @@ export default {
   justify-content: center;
   text-align: center;
 }
-
 .area_content > div:nth-child(2) {
   width: calc(100% - 250px);
   // padding-left: 10px;
 }
 
+.area_content .safetycheck_item:last-child >div:last-child{
+  border-bottom: none;
+}
+
 .safetycheck_item {
   // margin: 10px;
   // padding-bottom: 20px;
@@ -500,9 +521,11 @@ export default {
   // padding-top: 10px;
   // padding-bottom: 10px;
 }
-.safetycheck_item > div:not(:last-child) {
+.safetycheck_item > div {
   border-bottom: #b8bdc0 1px solid;
 }
+
+
 .safetycheck_point {
   // padding-top: 8px;
   display: flex;
@@ -548,13 +571,22 @@ export default {
 }
 
 .point_areaname {
-  padding-top: 10px;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
   width: 150px;
   border-right: #b8bdc0 1px solid;
   text-align: center;
-  display: inline-block !important;
 }
+
 .point_btn {
+  flex-direction: column !important;
+  justify-content: center;
+  // padding-top:15px;
+  width: 450px;
+}
+
+.point_btn_header {
   // flex-direction: column !important;
   // justify-content: center;
   padding-top:10px;
@@ -585,4 +617,9 @@ export default {
   margin-top: 10px;
   margin-right: 10px;
 }
+.el-descriptions {
+  ::v-deep .el-descriptions__body {
+    background-color: transparent !important;
+  }
+}
 </style>

src/views/safetycheck/task/components/register.vue

@@ -57,7 +57,7 @@
                 检查内容
               </div>
               <div class="point_areaname">检查区域</div>
-              <div class="point_btn" style="text-align: center">检查结果</div>
+              <div class="point_btn_header" style="text-align: center">检查结果</div>
             </div>
           </div>
         </div>
@@ -111,7 +111,7 @@
                     <el-form-item label="情况描述" prop="remark">
                       <el-input
                         v-model="point.remark"
-                        style="width:250px"
+                        style="width: 250px"
                         placeholder="请输入情况描述"
                         maxlength="255"
                       ></el-input> </el-form-item
@@ -120,7 +120,7 @@
                       prop="rectificationDeadline"
                     >
                       <el-select
-                        style="width:250px"
+                        style="width: 250px"
                         v-model="point.rectificationDeadline"
                         placeholder="请选择整改期限"
                       >
@@ -148,17 +148,18 @@
                 </div>
               </div>
               <div class="point_areaname">
-                {{ point.areaName }}
+                 {{ point.areaName }}
               </div>
-              <div class="point_btn">               
+              <div class="point_btn">
+                <div style="display:flex">
                   <el-radio-group
                   v-model="point.status"
-                  style=" margin-left: 20px"
+                  style="margin-left: 20px;padding-top:10px"
                 >
                   <el-radio :label="0">正常</el-radio>
                   <el-radio :label="1">异常</el-radio>
                 </el-radio-group>
-                <div style="margin-top: -5px;">
+                <div>
                   <el-button
                     type="danger"
                     size="mini"
@@ -168,6 +169,8 @@
                     >删除</el-button
                   >
                 </div>
+                </div>
+                
               </div>
             </div>
           </div>
@@ -477,17 +480,22 @@ export default {
 }
 .area_content {
   border: #b8bdc0 1px solid;
+  border-bottom: none;
   display: flex;
   flex-direction: row;
   width: 100%;
 }
 
-.content > .area_content:first-child {
-  border-bottom: none;
+.area_content:last-child{
+  border-bottom: #b8bdc0 1px solid;
 }
 
+// .content > .area_content:first-child {
+//   border-bottom: none;
+// }
+
 .content > .area_content:last-child {
-  border-bottom: #b8bdc0 1px solid;
+  // border-bottom: #b8bdc0 1px solid;
 }
 
 .area_content > div:nth-child(1) {
@@ -505,6 +513,10 @@ export default {
   // padding-left: 10px;
 }
 
+.area_content .safetycheck_item:last-child >div:last-child{
+  border-bottom: none;
+}
+
 .safetycheck_item {
   // margin: 10px;
   // padding-bottom: 20px;
@@ -514,9 +526,11 @@ export default {
   // padding-top: 10px;
   // padding-bottom: 10px;
 }
-.safetycheck_item > div:not(:last-child) {
+.safetycheck_item > div {
   border-bottom: #b8bdc0 1px solid;
 }
+
+
 .safetycheck_point {
   // padding-top: 8px;
   display: flex;
@@ -562,13 +576,22 @@ export default {
 }
 
 .point_areaname {
-  padding-top: 10px;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
   width: 150px;
   border-right: #b8bdc0 1px solid;
   text-align: center;
-  display: inline-block !important;
 }
+
 .point_btn {
+  flex-direction: column !important;
+  justify-content: center;
+  // padding-top:15px;
+  width: 450px;
+}
+
+.point_btn_header {
   // flex-direction: column !important;
   // justify-content: center;
   padding-top:10px;