更改样式穿透问题

src/views/qualityManagement/inspectionArchiving/rbFilePreserve/detailRb2.vue

@@ -2,10 +2,11 @@
   <el-dialog
     title="详情"
     :modelValue="detailOpenshow"
-    append-to-body
     v-if="detailOpenshow"
     @close="cancel"
     fullscreen
+    append-to-body
+    class="detail-rb-dialog"
   >
     <div class="templateBox">
       <table id="cus-table" cellspacing="0" style="width: 100%">
@@ -102,29 +103,28 @@ export default {
 };
 </script>
 <style lang="scss">
-.templateBox {
+/* 只针对详情对话框的样式 */
-  max-height: 88vh;
+.el-dialog.detail-rb-dialog {
-  overflow: auto;
+  .templateBox {
-  margin-bottom: 3px;
+    max-height: 88vh;
-}
+    overflow: auto;
-table {
+    margin-bottom: 3px;
-  tr {
+    table {
-    page-break-inside: avoid;
+      tr {
-  }
+        page-break-inside: avoid;
-  td {
+      }
-    width: 168px;
+      td {
-    height: 30px;
+        width: 168px;
-    border: 1px solid #000;
+        height: 30px;
-    background: transparent;
+        border: 1px solid #000;
-    color: #000;
+        background: transparent;
-    font-size: 14px;
+        color: #000;
-    text-align: center;
+        font-size: 14px;
-    padding: 0;
+        text-align: center;
-    margin: 0;
+        padding: 0;
-    // ::v-deep .el-input__inner {
+        margin: 0;
-    //   max-width: 80%;
+      }
-    //   text-align: center;
+    }
-    // }
   }
 }
 </style>

src/views/qualityManagement/inspectionArchiving/rbFilePreserve/templatePreserve2.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-drag title="电子档案模板维护" append-to-body :modelValue="templateOpenShow" :before-close="cancel" fullscreen @opened="open">
+  <el-dialog v-drag title="电子档案模板维护" :modelValue="templateOpenShow" :before-close="cancel" fullscreen @opened="open" append-to-body class="template-preserve-dialog">
     <div class="templateBox">
       <div class="leftTemplate">
         <el-card class="box-card" v-for="(template, index) in 20" :key="index">
@@ -360,7 +360,7 @@
                       <el-input v-model="item.ask" />
                     </td>
                     <td colspan="2">
-                      <el-switch v-model="item.qualified" disabled style="display: block" active-color="#13ce66" inactive-color="#ff4949" active-text="合格" inactive-text="不合格" />
+                      <el-switch v-model="item.qualified" disabled style="display: flex; justify-content: center;" active-color="#13ce66" inactive-color="#ff4949" active-text="合格" inactive-text="不合格" />
                     </td>
                     <td>
                       <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
@@ -1778,63 +1778,78 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
-.templateBox {
+/* 只针对模板维护对话框的样式 */
-  display: flex;
+.el-dialog.template-preserve-dialog {
-  .leftTemplate {
+  .templateBox {
-    width: 34%;
+    display: flex;
-    max-height: 88vh;
+    .leftTemplate {
-    overflow: auto;
+      width: 34%;
-    .box-card {
+      max-height: 88vh;
-      margin-bottom: 10px;
-    }
-  }
-  .rightPage {
-    width: 65%;
-    margin-left: 1%;
-    max-height: 80vh;
-    position: relative;
-    .submitClass {
-      position: absolute;
-      right: 4px;
-      top: 4px;
-      height: 28px;
-    }
-    .cusTable {
-      margin-top: 40px;
-      max-height: 85vh;
       overflow: auto;
-      padding-bottom: 40px;
+      .box-card {
+        margin-bottom: 10px;
+        .el-card__header {
+          border-bottom: none !important;
+          padding-bottom: 0 !important;
+        }
+        .el-card__body {
+          padding-top: 0 !important;
+        }
+      }
+      table {
+        tr {
+          page-break-inside: avoid;
+        }
+        td {
+          width: 168px;
+          height: 30px;
+          border: 1px solid #000;
+          background: transparent;
+          color: #000;
+          font-size: 14px;
+          text-align: center;
+          padding: 0;
+          margin: 0;
+        }
+      }
     }
-  }
+    .rightPage {
-}
+      width: 65%;
-.clearfix{
+      margin-left: 1%;
-  height: 50px;
+      max-height: 80vh;
-}
+      position: relative;
-:deep(.el-card__header) {
+      .submitClass {
-  border-bottom: none !important;
+        position: absolute;
-  padding-bottom: 0 !important;
+        right: 4px;
-}   
+        top: 4px;
-:deep(.el-card__body){
+        height: 28px;
-  padding-top: 0!important;
+      }
-}
+      .cusTable {
-table {
+        margin-top: 40px;
-  tr {
+        max-height: 85vh;
-    page-break-inside: avoid;
+        overflow: auto;
-  }
+        padding-bottom: 40px;
-  td {
+        table {
-    width: 168px;
+          tr {
-    height: 30px;
+            page-break-inside: avoid;
-    border: 1px solid #000;
+          }
-    background: transparent;
+          td {
-    color: #000;
+            width: 168px;
-    font-size: 14px;
+            height: 30px;
-    text-align: center;
+            border: 1px solid #000;
-    padding: 0;
+            background: transparent;
-    margin: 0;
+            color: #000;
-    :deep(.el-input__inner) {
+            font-size: 14px;
-      max-width: 80%;
+            text-align: center;
-      text-align: center;
+            padding: 0;
+            margin: 0;
+          }
+        }
+      }
+    }
+    .clearfix {
+      height: 50px;
     }
   }
 }

src/views/qualityTemplate/Template10.vue

@@ -20,7 +20,7 @@
     <td ></td>
     <td ></td>
     <td >
-                  <el-switch v-model="switchData" style="display: block" active-color="#13ce66" inactive-color="#ff4949" active-text="合格" inactive-text="不合格" />
+                  <el-switch v-model="switchData" style="display: flex; justify-content: center;" active-color="#13ce66" inactive-color="#ff4949" active-text="合格" inactive-text="不合格" />
                 </td>
     
   </tr>