diff --git a/src/assets/styles/screen.scss b/src/assets/styles/screen.scss
index b412dff..1a40ed6 100644
--- a/src/assets/styles/screen.scss
+++ b/src/assets/styles/screen.scss
@@ -226,7 +226,7 @@
     height: 100%;
   }
 
-  /deep/ .el-tabs--border-card {
+  ::v-deep .el-tabs--border-card {
     border: 0;
 
     .el-tabs__header {
@@ -416,11 +416,11 @@ li {
   padding: 5px;
 }
 
-/deep/ .vue-ruler-h {
+::v-deep .vue-ruler-h {
   opacity: 0.3;
 }
 
-/deep/ .vue-ruler-v {
+::v-deep .vue-ruler-v {
   opacity: 0.3;
 }
 
@@ -440,7 +440,7 @@ li {
       height: calc(100vh - 80px);
       text-align: center;
 
-      /deep/.el-tabs__header {
+      ::v-deep.el-tabs__header {
         width: 30%;
         margin-right: 0;
 
@@ -459,7 +459,7 @@ li {
         }
       }
 
-      /deep/.el-tabs__content {
+      ::v-deep.el-tabs__content {
         width: 70%;
       }
     }
@@ -495,7 +495,7 @@ li {
     }
   }
 
-  /deep/.el-tabs__content {
+  ::v-deep.el-tabs__content {
     padding: 0;
   }
 }
diff --git a/src/assets/styles/screenDesigner.scss b/src/assets/styles/screenDesigner.scss
index 75dbd57..d4221b5 100644
--- a/src/assets/styles/screenDesigner.scss
+++ b/src/assets/styles/screenDesigner.scss
@@ -28,7 +28,7 @@
       width: 300px;
     }
 
-    /deep/ .el-tabs--border-card {
+    ::v-deep .el-tabs--border-card {
       border: 0;
       .el-tabs__header {
         background: transparent;
diff --git a/src/components/AnjiPlus/anji-crud/anji-crud.vue b/src/components/AnjiPlus/anji-crud/anji-crud.vue
index 938372d..f938328 100644
--- a/src/components/AnjiPlus/anji-crud/anji-crud.vue
+++ b/src/components/AnjiPlus/anji-crud/anji-crud.vue
@@ -935,32 +935,32 @@ export default {
     position: relative;
   }
 }
-/deep/.button {
+::v-deep.button {
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08);
   border-radius: 6px;
 }
-/deep/.el-table th > .cell {
+::v-deep.el-table th > .cell {
   text-align: center;
 }
-/deep/.el-table .cell {
+::v-deep.el-table .cell {
   text-align: center;
 }
-/deep/.elTable {
+::v-deep.elTable {
   margin: 10px 0 50px;
 }
 .el-table {
   // 看这里！！！
   // 深度选择器，去除默认的padding
-  /deep/ th {
+  ::v-deep th {
     padding: 0;
     height: 36px;
   }
-  /deep/ td {
+  ::v-deep td {
     padding: 0;
     height: 36px;
   }
 }
-/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
+::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
   background: #f9fbfd;
 }
 .screenFlex {
@@ -1022,7 +1022,7 @@ export default {
   &:hover {
     background: none !important;
   }
-  /deep/.el-button--text:hover,
+  ::v-deep.el-button--text:hover,
   .el-button--text:focus {
     color: #799ffc !important;
     background-color: #ecf5ff !important;
@@ -1041,7 +1041,7 @@ export default {
     float: right;
   }
 }
-/deep/.el-pagination.is-background .btn-prev,
+::v-deep.el-pagination.is-background .btn-prev,
 .el-pagination.is-background .btn-next,
 .el-pagination.is-background .el-pager li {
   margin: 0 5px;
@@ -1051,7 +1051,7 @@ export default {
   min-width: 30px;
   border-radius: 2px;
 }
-/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #5887fb;
   color: #ffffff;
   border-radius: 4px;
@@ -1068,26 +1068,26 @@ export default {
   margin-bottom: 14px;
   margin-right: 20px;
 }
-.el-table /deep/ .warning-row {
+.el-table ::v-deep .warning-row {
   color: red !important;
 }
-.el-table /deep/ .bgColor {
+.el-table ::v-deep .bgColor {
   background: #d9ecff;
 }
-/deep/.edit_button {
+::v-deep.edit_button {
   width: 22px;
   height: 22px;
   padding: 0;
   margin: 0;
   margin-right: 5px;
-  /deep/ i {
+  ::v-deep i {
     font-size: 30px;
   }
 }
 .el-form-item--mini.el-form-item {
   margin-bottom: 12px;
 }
-.el-table /deep/ .success-row {
+.el-table ::v-deep .success-row {
   background: #f9fbfd !important;
 }
 
diff --git a/src/components/AnjiPlus/anji-crud/edit.vue b/src/components/AnjiPlus/anji-crud/edit.vue
index b334654..b161d03 100644
--- a/src/components/AnjiPlus/anji-crud/edit.vue
+++ b/src/components/AnjiPlus/anji-crud/edit.vue
@@ -386,7 +386,7 @@ export default {
 
 <style scoped lang="scss">
 .notfull-screen {
-  /deep/.el-dialog__body {
+  ::v-deep.el-dialog__body {
     background-color: rgb(240, 242, 245);
     padding: 5px;
     max-height: 60vh;
@@ -394,7 +394,7 @@ export default {
   }
 }
 .full-screen {
-  /deep/.el-dialog__body {
+  ::v-deep.el-dialog__body {
     background-color: rgb(240, 242, 245);
     padding: 5px;
     height: calc(100vh - 110px);
diff --git a/src/components/AnjiPlus/anji-dialog.vue b/src/components/AnjiPlus/anji-dialog.vue
index bf1fe63..40c2043 100644
--- a/src/components/AnjiPlus/anji-dialog.vue
+++ b/src/components/AnjiPlus/anji-dialog.vue
@@ -151,7 +151,7 @@ export default {
 
 <style scoped lang="scss">
 .notfull-screen {
-  /deep/.el-dialog__body {
+  ::v-deep.el-dialog__body {
     background-color: rgb(240, 242, 245);
     padding: 5px;
     max-height: 60vh;
@@ -159,7 +159,7 @@ export default {
   }
 }
 .full-screen {
-  /deep/.el-dialog__body {
+  ::v-deep.el-dialog__body {
     background-color: rgb(240, 242, 245);
     padding: 5px;
     height: calc(100vh - 110px);
@@ -203,7 +203,7 @@ export default {
 .addForm {
   text-align: center;
 }
-.activeColor /deep/.el-form-item__label {
+.activeColor ::v-deep.el-form-item__label {
   color: #5887fb;
 }
 </style>
diff --git a/src/components/AnjiPlus/anji-input.vue b/src/components/AnjiPlus/anji-input.vue
index 036d86c..bff3550 100644
--- a/src/components/AnjiPlus/anji-input.vue
+++ b/src/components/AnjiPlus/anji-input.vue
@@ -168,10 +168,10 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-/deep/.el-input__suffix {
+::v-deep.el-input__suffix {
   padding: 0 6px;
 }
-.anji-input /deep/ .el-input__inner {
+.anji-input ::v-deep .el-input__inner {
   padding-right: 0 !important;
 }
 </style>
diff --git a/src/components/AnjiPlus/anji-upload.vue b/src/components/AnjiPlus/anji-upload.vue
index f07e9a4..8086e17 100644
--- a/src/components/AnjiPlus/anji-upload.vue
+++ b/src/components/AnjiPlus/anji-upload.vue
@@ -170,7 +170,7 @@ export default {
   width: 60px;
   height: 60px;
 }
-.hide_box /deep/.el-upload--picture-card {
+.hide_box ::v-deep.el-upload--picture-card {
   display: none;
 }
 .el-upload-list__item {
diff --git a/src/components/eachForm.vue b/src/components/eachForm.vue
index 8c915b8..548ad31 100644
--- a/src/components/eachForm.vue
+++ b/src/components/eachForm.vue
@@ -179,16 +179,16 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.elForm /deep/ .el-upload--picture-card{
+.elForm ::v-deep .el-upload--picture-card{
   width: 80px;
   height: 80px;
   line-height: 83px;
 }
-.elForm /deep/ .el-upload-list__item {
+.elForm ::v-deep .el-upload-list__item {
   width: 80px;
   height: 80px;
 }
-.hide_box /deep/ .el-upload--picture-card{
+.hide_box ::v-deep .el-upload--picture-card{
   display: none;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/accessRole/components/RoleAuthority.vue b/src/views/accessRole/components/RoleAuthority.vue
index 8886713..d9aab9b 100644
--- a/src/views/accessRole/components/RoleAuthority.vue
+++ b/src/views/accessRole/components/RoleAuthority.vue
@@ -85,7 +85,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/.el-dialog__body {
+::v-deep.el-dialog__body {
   height: 400px;
   overflow-y: scroll;
 }
diff --git a/src/views/bigscreenDesigner/designer/components/colorPicker.vue b/src/views/bigscreenDesigner/designer/components/colorPicker.vue
index 1d2877d..0de91f0 100644
--- a/src/views/bigscreenDesigner/designer/components/colorPicker.vue
+++ b/src/views/bigscreenDesigner/designer/components/colorPicker.vue
@@ -63,8 +63,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/.el-color-picker--mini,
-/deep/.el-color-picker--mini .el-color-picker__trigger {
+::v-deep.el-color-picker--mini,
+::v-deep.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }
diff --git a/src/views/bigscreenDesigner/designer/components/customColorComponents.vue b/src/views/bigscreenDesigner/designer/components/customColorComponents.vue
index 4647d2e..eb9374d 100644
--- a/src/views/bigscreenDesigner/designer/components/customColorComponents.vue
+++ b/src/views/bigscreenDesigner/designer/components/customColorComponents.vue
@@ -172,30 +172,30 @@ export default {
     flex-direction: row;
   }
 }
-/deep/.el-table,
-/deep/.el-table__expanded-cell,
-/deep/.el-table th,
-/deep/.el-table tr {
+::v-deep.el-table,
+::v-deep.el-table__expanded-cell,
+::v-deep.el-table th,
+::v-deep.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
 }
-/deep/.el-table td,
-/deep/.el-table th.is-leaf {
+::v-deep.el-table td,
+::v-deep.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-/deep/.el-table tbody tr:hover > td {
+::v-deep.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-/deep/.el-table::before {
+::v-deep.el-table::before {
   height: 0;
 }
-/deep/.el-color-picker--mini,
-/deep/.el-color-picker--mini .el-color-picker__trigger {
+::v-deep.el-color-picker--mini,
+::v-deep.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }
-/deep/.el-dialog {
+::v-deep.el-dialog {
   background: #1b1e25;
   .el-dialog__title {
     color: #fff;
diff --git a/src/views/bigscreenDesigner/designer/components/customUpload.vue b/src/views/bigscreenDesigner/designer/components/customUpload.vue
index 43c1b76..b5c3c24 100644
--- a/src/views/bigscreenDesigner/designer/components/customUpload.vue
+++ b/src/views/bigscreenDesigner/designer/components/customUpload.vue
@@ -90,8 +90,8 @@ export default {
   top: 0;
   opacity: 0;
 }
-/deep/.el-input-group__append,
-/deep/.el-input-group__prepend {
+::v-deep.el-input-group__append,
+::v-deep.el-input-group__prepend {
   padding: 0 10px !important;
   overflow: hidden;
 }
diff --git a/src/views/bigscreenDesigner/designer/components/customUploadMulti.vue b/src/views/bigscreenDesigner/designer/components/customUploadMulti.vue
index 014e565..da67598 100644
--- a/src/views/bigscreenDesigner/designer/components/customUploadMulti.vue
+++ b/src/views/bigscreenDesigner/designer/components/customUploadMulti.vue
@@ -142,8 +142,8 @@ export default {
   display: none;
 }
 
-/deep/.el-input-group__append,
-/deep/.el-input-group__prepend {
+::v-deep.el-input-group__append,
+::v-deep.el-input-group__prepend {
   padding: 0 10px !important;
   overflow: hidden;
 }
@@ -154,9 +154,9 @@ export default {
 }
 
 
-/deep/ .el-dialog .el-dialog__header,
-/deep/ .el-dialog__body,
-/deep/.el-dialog__footer {
+::v-deep .el-dialog .el-dialog__header,
+::v-deep .el-dialog__body,
+::v-deep.el-dialog__footer {
   background: #1b1e25;
 }
 
@@ -189,7 +189,7 @@ export default {
     padding: 0 0.5px 0 0.5px;
     min-height: 90px;
 
-    /deep/ .el-image__error {
+    ::v-deep .el-image__error {
       width: 100%;
       height: 100%;
       min-height: 90px;
diff --git a/src/views/bigscreenDesigner/designer/components/customUploadNew.vue b/src/views/bigscreenDesigner/designer/components/customUploadNew.vue
index ceb6c37..eb4bf88 100644
--- a/src/views/bigscreenDesigner/designer/components/customUploadNew.vue
+++ b/src/views/bigscreenDesigner/designer/components/customUploadNew.vue
@@ -115,8 +115,8 @@ export default {
   display: none;
 }
 
-/deep/.el-input-group__append,
-/deep/.el-input-group__prepend {
+::v-deep.el-input-group__append,
+::v-deep.el-input-group__prepend {
   padding: 0 10px !important;
   overflow: hidden;
 }
@@ -127,8 +127,8 @@ export default {
 }
 
 
-/deep/ .el-dialog .el-dialog__header,
-/deep/ .el-dialog__body {
+::v-deep .el-dialog .el-dialog__header,
+::v-deep .el-dialog__body {
   background: #1b1e25;
 }
 
@@ -161,7 +161,7 @@ export default {
     padding: 0 0.5px 0 0.5px;
     min-height: 90px;
 
-    /deep/ .el-image__error {
+    ::v-deep .el-image__error {
       width: 100%;
       height: 100%;
       min-height: 90px;
diff --git a/src/views/bigscreenDesigner/designer/components/dynamicAddPicAdress.vue b/src/views/bigscreenDesigner/designer/components/dynamicAddPicAdress.vue
index 73243a7..16c7293 100644
--- a/src/views/bigscreenDesigner/designer/components/dynamicAddPicAdress.vue
+++ b/src/views/bigscreenDesigner/designer/components/dynamicAddPicAdress.vue
@@ -137,38 +137,38 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/::-webkit-scrollbar-track-piece {
+::v-deep::-webkit-scrollbar-track-piece {
   background-color: transparent;
 }
-/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
   width: 0; // 横向滚动条
   height: 8px; // 纵向滚动条 必写
 }
 // 滚动条的滑块
-/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: rgba(144, 146, 152, 0.3);
 }
-/deep/.el-table,
-/deep/.el-table__expanded-cell,
-/deep/.el-table th,
-/deep/.el-table tr {
+::v-deep.el-table,
+::v-deep.el-table__expanded-cell,
+::v-deep.el-table th,
+::v-deep.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
   font-size: 12px !important;
 }
-/deep/.el-table td,
-/deep/.el-table th.is-leaf {
+::v-deep.el-table td,
+::v-deep.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-/deep/.el-table tbody tr:hover {
+::v-deep.el-table tbody tr:hover {
   background-color: #263445 !important;
 }
-/deep/.el-table tbody tr:hover > td {
+::v-deep.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-/deep/.el-table::before {
+::v-deep.el-table::before {
   height: 0;
 }
 .button-group .el-button {
diff --git a/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue b/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue
index 168dca4..fce9488 100644
--- a/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue
+++ b/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue
@@ -138,38 +138,38 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/::-webkit-scrollbar-track-piece {
+::v-deep::-webkit-scrollbar-track-piece {
   background-color: transparent;
 }
-/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
   width: 0; // 横向滚动条
   height: 8px; // 纵向滚动条 必写
 }
 // 滚动条的滑块
-/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: rgba(144, 146, 152, 0.3);
 }
-/deep/.el-table,
-/deep/.el-table__expanded-cell,
-/deep/.el-table th,
-/deep/.el-table tr {
+::v-deep.el-table,
+::v-deep.el-table__expanded-cell,
+::v-deep.el-table th,
+::v-deep.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
   font-size: 12px !important;
 }
-/deep/.el-table td,
-/deep/.el-table th.is-leaf {
+::v-deep.el-table td,
+::v-deep.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-/deep/.el-table tbody tr:hover {
+::v-deep.el-table tbody tr:hover {
   background-color: #263445 !important;
 }
-/deep/.el-table tbody tr:hover > td {
+::v-deep.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-/deep/.el-table::before {
+::v-deep.el-table::before {
   height: 0;
 }
 .button-group .el-button {
diff --git a/src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue b/src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue
index 77b0964..6b3cc80 100644
--- a/src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue
+++ b/src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue
@@ -137,38 +137,38 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/::-webkit-scrollbar-track-piece {
+::v-deep::-webkit-scrollbar-track-piece {
   background-color: transparent;
 }
-/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
   width: 0; // 横向滚动条
   height: 8px; // 纵向滚动条 必写
 }
 // 滚动条的滑块
-/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: rgba(144, 146, 152, 0.3);
 }
-/deep/.el-table,
-/deep/.el-table__expanded-cell,
-/deep/.el-table th,
-/deep/.el-table tr {
+::v-deep.el-table,
+::v-deep.el-table__expanded-cell,
+::v-deep.el-table th,
+::v-deep.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
   font-size: 12px !important;
 }
-/deep/.el-table td,
-/deep/.el-table th.is-leaf {
+::v-deep.el-table td,
+::v-deep.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-/deep/.el-table tbody tr:hover {
+::v-deep.el-table tbody tr:hover {
   background-color: #263445 !important;
 }
-/deep/.el-table tbody tr:hover > td {
+::v-deep.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-/deep/.el-table::before {
+::v-deep.el-table::before {
   height: 0;
 }
 .button-group .el-button {
diff --git a/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue b/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue
index 94b4a95..9488e45 100644
--- a/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue
+++ b/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue
@@ -181,38 +181,38 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/::-webkit-scrollbar-track-piece {
+::v-deep::-webkit-scrollbar-track-piece {
   background-color: transparent;
 }
-/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
   width: 0; // 横向滚动条
   height: 8px; // 纵向滚动条 必写
 }
 // 滚动条的滑块
-/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: rgba(144, 146, 152, 0.3);
 }
-/deep/.el-table,
-/deep/.el-table__expanded-cell,
-/deep/.el-table th,
-/deep/.el-table tr {
+::v-deep.el-table,
+::v-deep.el-table__expanded-cell,
+::v-deep.el-table th,
+::v-deep.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
   font-size: 12px !important;
 }
-/deep/.el-table td,
-/deep/.el-table th.is-leaf {
+::v-deep.el-table td,
+::v-deep.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-/deep/.el-table tbody tr:hover {
+::v-deep.el-table tbody tr:hover {
   background-color: #263445 !important;
 }
-/deep/.el-table tbody tr:hover > td {
+::v-deep.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-/deep/.el-table::before {
+::v-deep.el-table::before {
   height: 0;
 }
 .button-group .el-button {
diff --git a/src/views/bigscreenDesigner/designer/components/dynamicForm.vue b/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
index f53515e..b62c405 100644
--- a/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
+++ b/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
@@ -525,10 +525,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/deep/ .el-form-item {
+::v-deep .el-form-item {
   margin-bottom: 5px;
 }
-/deep/ .el-form-item__label {
+::v-deep .el-form-item__label {
   font-size: 12px;
   color: #fff;
 }
@@ -540,7 +540,7 @@ export default {
   border-top: none;
   border-bottom: none;
 }
-/deep/.el-collapse-item__header {
+::v-deep.el-collapse-item__header {
   height: 40px;
   line-height: 40px;
   background: transparent;
@@ -549,11 +549,11 @@ export default {
   font-size: 12px;
   border-color: #282e3a;
 }
-/deep/.el-collapse-item__wrap {
+::v-deep.el-collapse-item__wrap {
   background: transparent;
   border: none;
 }
-/deep/.el-collapse-item__content {
+::v-deep.el-collapse-item__content {
   padding-bottom: 0;
 }
 </style>
diff --git a/src/views/bigscreenDesigner/designer/components/dynamicHtmlSlider.vue b/src/views/bigscreenDesigner/designer/components/dynamicHtmlSlider.vue
index 285f412..456f993 100644
--- a/src/views/bigscreenDesigner/designer/components/dynamicHtmlSlider.vue
+++ b/src/views/bigscreenDesigner/designer/components/dynamicHtmlSlider.vue
@@ -150,38 +150,38 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/::-webkit-scrollbar-track-piece {
+::v-deep::-webkit-scrollbar-track-piece {
   background-color: transparent;
 }
-/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
   width: 0; // 横向滚动条
   height: 8px; // 纵向滚动条 必写
 }
 // 滚动条的滑块
-/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: rgba(144, 146, 152, 0.3);
 }
-/deep/.el-table,
-/deep/.el-table__expanded-cell,
-/deep/.el-table th,
-/deep/.el-table tr {
+::v-deep.el-table,
+::v-deep.el-table__expanded-cell,
+::v-deep.el-table th,
+::v-deep.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
   font-size: 12px !important;
 }
-/deep/.el-table td,
-/deep/.el-table th.is-leaf {
+::v-deep.el-table td,
+::v-deep.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-/deep/.el-table tbody tr:hover {
+::v-deep.el-table tbody tr:hover {
   background-color: #263445 !important;
 }
-/deep/.el-table tbody tr:hover > td {
+::v-deep.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-/deep/.el-table::before {
+::v-deep.el-table::before {
   height: 0;
 }
 .button-group .el-button {
diff --git a/src/views/bigscreenDesigner/designer/index.vue.bak b/src/views/bigscreenDesigner/designer/index.vue.bak
index 12c5727..b88e6d1 100644
--- a/src/views/bigscreenDesigner/designer/index.vue.bak
+++ b/src/views/bigscreenDesigner/designer/index.vue.bak
@@ -1427,7 +1427,7 @@ export default {
     height: 100%;
   }
 
-  /deep/ .el-tabs--border-card {
+  ::v-deep .el-tabs--border-card {
     border: 0;
 
     .el-tabs__header {
@@ -1618,11 +1618,11 @@ li {
   padding: 5px;
 }
 
-/deep/ .vue-ruler-h {
+::v-deep .vue-ruler-h {
   opacity: 0.3;
 }
 
-/deep/ .vue-ruler-v {
+::v-deep .vue-ruler-v {
   opacity: 0.3;
 }
 .layout-left {
@@ -1638,7 +1638,7 @@ li {
       width: 100%;
       height: calc(100vh - 80px);
       text-align: center;
-      /deep/.el-tabs__header {
+      ::v-deep.el-tabs__header {
         width: 30%;
         margin-right: 0;
         .el-tabs__nav-wrap {
@@ -1654,7 +1654,7 @@ li {
           }
         }
       }
-      /deep/.el-tabs__content {
+      ::v-deep.el-tabs__content {
         width: 70%;
       }
     }
@@ -1687,7 +1687,7 @@ li {
       font-size: 12px !important;
     }
   }
-  /deep/.el-tabs__content {
+  ::v-deep.el-tabs__content {
     padding: 0;
   }
 }
diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetSlider.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetSlider.vue
index 9ac3356..09dfe63 100644
--- a/src/views/bigscreenDesigner/designer/widget/div/widgetSlider.vue
+++ b/src/views/bigscreenDesigner/designer/widget/div/widgetSlider.vue
@@ -86,7 +86,7 @@ export default {
   object-fit: contain;
 }
 
-/deep/ .el-carousel__mask {
+::v-deep .el-carousel__mask {
   background: transparent;
 }
 </style>
diff --git a/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue b/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
index 66f2180..b84d7ae 100644
--- a/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
+++ b/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
@@ -160,16 +160,16 @@ export default {
     align-items: center;
     width: 100%;
 
-    /deep/ .el-progress-bar__outer {
+    ::v-deep .el-progress-bar__outer {
       background-color: var(--under-color, #EBEEF5);
     }
 
-    /deep/ .el-progress-bar__inner {
+    ::v-deep .el-progress-bar__inner {
       background: var(--line-gradient, initial);
     }
 
-    /deep/ .el-progress-bar__innerText,
-    /deep/ .el-progress__text {
+    ::v-deep .el-progress-bar__innerText,
+    ::v-deep .el-progress__text {
       font-size: var(--percent-font-size, initial) !important;
       color: var(--percent-color, initial);
     }
diff --git a/src/views/excelreport/components/colorPicker.vue b/src/views/excelreport/components/colorPicker.vue
index 1d2877d..0de91f0 100644
--- a/src/views/excelreport/components/colorPicker.vue
+++ b/src/views/excelreport/components/colorPicker.vue
@@ -63,8 +63,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/.el-color-picker--mini,
-/deep/.el-color-picker--mini .el-color-picker__trigger {
+::v-deep.el-color-picker--mini,
+::v-deep.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }
diff --git a/src/views/resultset/components/EditDataSet.vue b/src/views/resultset/components/EditDataSet.vue
index 25887cb..4551f14 100644
--- a/src/views/resultset/components/EditDataSet.vue
+++ b/src/views/resultset/components/EditDataSet.vue
@@ -966,7 +966,7 @@ public class DemoGroovyHandler implements IGroovyHandler {
 </script>
 <style lang="scss" scoped>
 .code-mirror-form {
-  /deep/ .el-form-item__content {
+  ::v-deep .el-form-item__content {
     height: 200px;
     overflow: hidden;
   }
@@ -1094,7 +1094,7 @@ public class DemoGroovyHandler implements IGroovyHandler {
   top: 15px;
 }
 
-.filterTextarea /deep/ .el-textarea__inner {
+.filterTextarea ::v-deep .el-textarea__inner {
   min-height: 300px !important;
 }
 
@@ -1103,7 +1103,7 @@ public class DemoGroovyHandler implements IGroovyHandler {
   margin-top: 4px;
 }
 
-.filterBox /deep/ .el-input--suffix .el-input__inner {
+.filterBox ::v-deep .el-input--suffix .el-input__inner {
   background: #f4f7ff;
   border-radius: 3px;
   border: 1px solid #b8caff;
diff --git a/src/views/resultset/components/MonacoEditor.vue b/src/views/resultset/components/MonacoEditor.vue
index 8f5325b..9a87933 100644
--- a/src/views/resultset/components/MonacoEditor.vue
+++ b/src/views/resultset/components/MonacoEditor.vue
@@ -126,7 +126,7 @@ export default {
 </script>
 
 <style scoped>
-.main /deep/ .view-lines * {
+.main ::v-deep .view-lines * {
   font-family: Consolas, "Courier New", monospace !important;
 }
 </style>
diff --git a/src/views/resultset/index.vue b/src/views/resultset/index.vue
index c9b7f0a..8aa5c88 100644
--- a/src/views/resultset/index.vue
+++ b/src/views/resultset/index.vue
@@ -308,7 +308,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/.el-dropdown {
+::v-deep.el-dropdown {
   margin-right: 20px;
 }
 </style>
diff --git a/src/views/screenDesigner/components/colorPicker.vue b/src/views/screenDesigner/components/colorPicker.vue
index 1d2877d..0de91f0 100644
--- a/src/views/screenDesigner/components/colorPicker.vue
+++ b/src/views/screenDesigner/components/colorPicker.vue
@@ -63,8 +63,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/.el-color-picker--mini,
-/deep/.el-color-picker--mini .el-color-picker__trigger {
+::v-deep.el-color-picker--mini,
+::v-deep.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }
diff --git a/src/views/screenDesigner/components/customColorComponents.vue b/src/views/screenDesigner/components/customColorComponents.vue
index da1ad74..e7951fc 100644
--- a/src/views/screenDesigner/components/customColorComponents.vue
+++ b/src/views/screenDesigner/components/customColorComponents.vue
@@ -149,30 +149,30 @@ export default {
     flex-direction: row;
   }
 }
-/deep/.el-table,
-/deep/.el-table__expanded-cell,
-/deep/.el-table th,
-/deep/.el-table tr {
+::v-deep.el-table,
+::v-deep.el-table__expanded-cell,
+::v-deep.el-table th,
+::v-deep.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
 }
-/deep/.el-table td,
-/deep/.el-table th.is-leaf {
+::v-deep.el-table td,
+::v-deep.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-/deep/.el-table tbody tr:hover > td {
+::v-deep.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-/deep/.el-table::before {
+::v-deep.el-table::before {
   height: 0;
 }
-/deep/.el-color-picker--mini,
-/deep/.el-color-picker--mini .el-color-picker__trigger {
+::v-deep.el-color-picker--mini,
+::v-deep.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }
-/deep/.el-dialog {
+::v-deep.el-dialog {
   background: #1b1e25;
   .el-dialog__title {
     color: #fff;
diff --git a/src/views/screenDesigner/components/customUpload.vue b/src/views/screenDesigner/components/customUpload.vue
index 43c1b76..b5c3c24 100644
--- a/src/views/screenDesigner/components/customUpload.vue
+++ b/src/views/screenDesigner/components/customUpload.vue
@@ -90,8 +90,8 @@ export default {
   top: 0;
   opacity: 0;
 }
-/deep/.el-input-group__append,
-/deep/.el-input-group__prepend {
+::v-deep.el-input-group__append,
+::v-deep.el-input-group__prepend {
   padding: 0 10px !important;
   overflow: hidden;
 }
diff --git a/src/views/screenDesigner/components/dynamicAddTable.vue b/src/views/screenDesigner/components/dynamicAddTable.vue
index 56e79a0..66acf0e 100644
--- a/src/views/screenDesigner/components/dynamicAddTable.vue
+++ b/src/views/screenDesigner/components/dynamicAddTable.vue
@@ -152,38 +152,38 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/::-webkit-scrollbar-track-piece {
+::v-deep::-webkit-scrollbar-track-piece {
   background-color: transparent;
 }
-/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
   width: 0; // 横向滚动条
   height: 8px; // 纵向滚动条 必写
 }
 // 滚动条的滑块
-/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: rgba(144, 146, 152, 0.3);
 }
-/deep/.el-table,
-/deep/.el-table__expanded-cell,
-/deep/.el-table th,
-/deep/.el-table tr {
+::v-deep.el-table,
+::v-deep.el-table__expanded-cell,
+::v-deep.el-table th,
+::v-deep.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
   font-size: 12px !important;
 }
-/deep/.el-table td,
-/deep/.el-table th.is-leaf {
+::v-deep.el-table td,
+::v-deep.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-/deep/.el-table tbody tr:hover {
+::v-deep.el-table tbody tr:hover {
   background-color: #263445 !important;
 }
-/deep/.el-table tbody tr:hover > td {
+::v-deep.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-/deep/.el-table::before {
+::v-deep.el-table::before {
   height: 0;
 }
 .button-group .el-button {
diff --git a/src/views/screenDesigner/components/dynamicForm.vue b/src/views/screenDesigner/components/dynamicForm.vue
index b93963f..4b2ea56 100644
--- a/src/views/screenDesigner/components/dynamicForm.vue
+++ b/src/views/screenDesigner/components/dynamicForm.vue
@@ -408,10 +408,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/deep/ .el-form-item {
+::v-deep .el-form-item {
   margin-bottom: 5px;
 }
-/deep/ .el-form-item__label {
+::v-deep .el-form-item__label {
   font-size: 12px;
   color: #fff;
 }
@@ -423,7 +423,7 @@ export default {
   border-top: none;
   border-bottom: none;
 }
-/deep/.el-collapse-item__header {
+::v-deep.el-collapse-item__header {
   height: 40px;
   line-height: 40px;
   background: transparent;
@@ -432,11 +432,11 @@ export default {
   font-size: 12px;
   border-color: #282e3a;
 }
-/deep/.el-collapse-item__wrap {
+::v-deep.el-collapse-item__wrap {
   background: transparent;
   border: none;
 }
-/deep/.el-collapse-item__content {
+::v-deep.el-collapse-item__content {
   padding-bottom: 0;
 }
 </style>
diff --git a/src/views/screenDesigner/layout/leftMenu.vue b/src/views/screenDesigner/layout/leftMenu.vue
index 3f1fbe4..c275bb8 100644
--- a/src/views/screenDesigner/layout/leftMenu.vue
+++ b/src/views/screenDesigner/layout/leftMenu.vue
@@ -74,7 +74,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/.el-dropdown-menu__item {
+::v-deep.el-dropdown-menu__item {
   max-width: none;
 }
 .layout-left {
@@ -90,7 +90,7 @@ export default {
       width: 100%;
       height: calc(100vh - 80px);
       text-align: center;
-      /deep/.el-tabs__header {
+      ::v-deep.el-tabs__header {
         width: 30%;
         margin-right: 0;
         .el-tabs__nav-wrap {
@@ -105,7 +105,7 @@ export default {
           }
         }
       }
-      /deep/.el-tabs__content {
+      ::v-deep.el-tabs__content {
         width: 70%;
       }
     }
@@ -137,7 +137,7 @@ export default {
     .tools-item-text {
     }
   }
-  /deep/.el-tabs__content {
+  ::v-deep.el-tabs__content {
     padding: 0;
   }
 }