更改样式穿透问题

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,11 +103,12 @@ export default {
 };
 </script>
 <style lang="scss">
+/* 只针对详情对话框的样式 */
+.el-dialog.detail-rb-dialog {
   .templateBox {
     max-height: 88vh;
     overflow: auto;
     margin-bottom: 3px;
-}
     table {
       tr {
         page-break-inside: avoid;
@@ -121,10 +123,8 @@ table {
         text-align: center;
         padding: 0;
         margin: 0;
-    // ::v-deep .el-input__inner {
+      }
-    //   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,7 +1778,9 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
+/* 只针对模板维护对话框的样式 */
+.el-dialog.template-preserve-dialog {
   .templateBox {
     display: flex;
     .leftTemplate {
@@ -1787,6 +1789,29 @@ export default {
       overflow: auto;
       .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 {
@@ -1805,19 +1830,6 @@ export default {
         max-height: 85vh;
         overflow: auto;
         padding-bottom: 40px;
-    }
-  }
-}
-.clearfix{
-  height: 50px;
-}
-:deep(.el-card__header) {
-  border-bottom: none !important;
-  padding-bottom: 0 !important;
-}   
-:deep(.el-card__body){
-  padding-top: 0!important;
-}
         table {
           tr {
             page-break-inside: avoid;
@@ -1832,9 +1844,12 @@ table {
             text-align: center;
             padding: 0;
             margin: 0;
-    :deep(.el-input__inner) {
+          }
-      max-width: 80%;
+        }
-      text-align: center;
+      }
+    }
+    .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>