diff --git a/yudao-ui-admin/src/components/HeaderSearch/index.vue b/yudao-ui-admin/src/components/HeaderSearch/index.vue
index ce9f305f9..44280555c 100644
--- a/yudao-ui-admin/src/components/HeaderSearch/index.vue
+++ b/yudao-ui-admin/src/components/HeaderSearch/index.vue
@@ -167,7 +167,7 @@ export default {
     display: inline-block;
     vertical-align: middle;
 
-    ::v-deep .el-input__inner {
+    :deep(.el-input__inner) {
       border-radius: 0;
       border: 0;
       padding-left: 0;
diff --git a/yudao-ui-admin/src/components/ImagePreview/index.vue b/yudao-ui-admin/src/components/ImagePreview/index.vue
index 743d8d51d..a88fdab55 100644
--- a/yudao-ui-admin/src/components/ImagePreview/index.vue
+++ b/yudao-ui-admin/src/components/ImagePreview/index.vue
@@ -64,14 +64,14 @@ export default {
   border-radius: 5px;
   background-color: #ebeef5;
   box-shadow: 0 0 5px 1px #ccc;
-  ::v-deep .el-image__inner {
+  :deep(.el-image__inner) {
     transition: all 0.3s;
     cursor: pointer;
     &:hover {
       transform: scale(1.2);
     }
   }
-  ::v-deep .image-slot {
+  :deep(.image-slot) {
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/yudao-ui-admin/src/components/ImageUpload/index.vue b/yudao-ui-admin/src/components/ImageUpload/index.vue
index 08ff0f8fe..dc64e8dcd 100644
--- a/yudao-ui-admin/src/components/ImageUpload/index.vue
+++ b/yudao-ui-admin/src/components/ImageUpload/index.vue
@@ -141,8 +141,7 @@ export default {
         }
         isImg = this.fileType.some(type => {
           if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
+          return !!(fileExtension && fileExtension.indexOf(type) > -1);
         });
       } else {
         isImg = file.type.indexOf("image") > -1;
@@ -190,16 +189,15 @@ export default {
 </script>
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
-::v-deep.hide .el-upload--picture-card {
+:deep(.hide .el-upload--picture-card) {
   display: none;
 }
 // 去掉动画效果
-::v-deep .el-list-enter-active,
-::v-deep .el-list-leave-active {
+:deep(.el-list-enter-active, .el-list-leave-active) {
   transition: all 0s;
 }
 
-::v-deep .el-list-enter, .el-list-leave-active {
+:deep(.el-list-enter, .el-list-leave-active) {
   opacity: 0;
   transform: translateY(0);
 }
diff --git a/yudao-ui-admin/src/components/RightToolbar/index.vue b/yudao-ui-admin/src/components/RightToolbar/index.vue
index e3e1286f8..a6cd871e2 100644
--- a/yudao-ui-admin/src/components/RightToolbar/index.vue
+++ b/yudao-ui-admin/src/components/RightToolbar/index.vue
@@ -75,13 +75,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .el-transfer__button {
+:deep(.el-transfer__button) {
   border-radius: 50%;
   padding: 12px;
   display: block;
-  margin-left: 0px;
+  margin-left: 0;
 }
-::v-deep .el-transfer__button:first-child {
+:deep(.el-transfer__button:first-child) {
   margin-bottom: 10px;
 }
 </style>
diff --git a/yudao-ui-admin/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/yudao-ui-admin/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index 7b5d0f82e..de1a693f9 100644
--- a/yudao-ui-admin/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/yudao-ui-admin/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -346,13 +346,13 @@ export default {
   fill-opacity: 0.2 !important;
 }
 
-/deep/.highlight-todo.djs-connection > .djs-visual > path {
+:deep(.highlight-todo.djs-connection > .djs-visual > path) {
   stroke: #1890ff !important;
   stroke-dasharray: 4px !important;
   fill-opacity: 0.2 !important;
   marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
 }
-/deep/.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
+:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
   fill: #1890ff !important;
   stroke: #1890ff !important;
   stroke-dasharray: 4px !important;
@@ -381,20 +381,20 @@ export default {
   fill: green !important; /* color elements as green */
 }
 
-/deep/.highlight.djs-shape .djs-visual > :nth-child(1) {
+:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
   fill: green !important;
   stroke: green !important;
   fill-opacity: 0.2 !important;
 }
-/deep/.highlight.djs-shape .djs-visual > :nth-child(2) {
+:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
   fill: green !important;
 }
-/deep/.highlight.djs-shape .djs-visual > path {
+:deep(.highlight.djs-shape .djs-visual > path) {
   fill: green !important;
   fill-opacity: 0.2 !important;
   stroke: green !important;
 }
-/deep/.highlight.djs-connection > .djs-visual > path {
+:deep(.highlight.djs-connection > .djs-visual > path) {
   stroke: green !important;
 }
 
@@ -420,20 +420,20 @@ export default {
   fill: red !important; /* color elements as green */
 }
 
-/deep/.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
   fill: red !important;
   stroke: red !important;
   fill-opacity: 0.2 !important;
 }
-/deep/.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
   fill: red !important;
 }
-/deep/.highlight-reject.djs-shape .djs-visual > path {
+:deep(.highlight-reject.djs-shape .djs-visual > path) {
   fill: red !important;
   fill-opacity: 0.2 !important;
   stroke: red !important;
 }
-/deep/.highlight-reject.djs-connection > .djs-visual > path {
+:deep(.highlight-reject.djs-connection > .djs-visual > path) {
   stroke: red !important;
 }
 
@@ -459,20 +459,20 @@ export default {
   fill: grey !important; /* color elements as green */
 }
 
-/deep/.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
   fill: grey !important;
   stroke: grey !important;
   fill-opacity: 0.2 !important;
 }
-/deep/.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
   fill: grey !important;
 }
-/deep/.highlight-cancel.djs-shape .djs-visual > path {
+:deep(.highlight-cancel.djs-shape .djs-visual > path) {
   fill: grey !important;
   fill-opacity: 0.2 !important;
   stroke: grey !important;
 }
-/deep/.highlight-cancel.djs-connection > .djs-visual > path {
+:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
   stroke: grey !important;
 }
 
@@ -484,4 +484,4 @@ export default {
   color: #fafafa;
   width: 200px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/yudao-ui-admin/src/layout/components/TagsView/ScrollPane.vue b/yudao-ui-admin/src/layout/components/TagsView/ScrollPane.vue
index bb753a124..72a304438 100644
--- a/yudao-ui-admin/src/layout/components/TagsView/ScrollPane.vue
+++ b/yudao-ui-admin/src/layout/components/TagsView/ScrollPane.vue
@@ -82,13 +82,11 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-  ::v-deep {
-    .el-scrollbar__bar {
-      bottom: 0px;
+  :deep(.el-scrollbar__bar) {
+      bottom: 0;
     }
-    .el-scrollbar__wrap {
+  :deep(.el-scrollbar__wrap) {
       height: 49px;
     }
-  }
 }
 </style>
diff --git a/yudao-ui-admin/src/views/infra/build/FormDrawer.vue b/yudao-ui-admin/src/views/infra/build/FormDrawer.vue
index ef17ba5c5..8c3c30592 100644
--- a/yudao-ui-admin/src/views/infra/build/FormDrawer.vue
+++ b/yudao-ui-admin/src/views/infra/build/FormDrawer.vue
@@ -84,7 +84,7 @@ import {
 } from '@/components/generator/html'
 import { makeUpJs } from '@/components/generator/js'
 import { makeUpCss } from '@/components/generator/css'
-import { exportDefault, beautifierConf, titleCase } from '@/utils/index'
+import { exportDefault, beautifierConf } from '@/utils'
 import ResourceDialog from './ResourceDialog'
 import loadMonaco from '@/utils/loadMonaco'
 import loadBeautifier from '@/utils/loadBeautifier'
@@ -325,7 +325,7 @@ export default {
   }
 }
 @include action-bar;
-::v-deep .el-drawer__header {
+:deep(.el-drawer__header) {
   display: none;
 }
 </style>
diff --git a/yudao-ui-admin/src/views/infra/build/IconsDialog.vue b/yudao-ui-admin/src/views/infra/build/IconsDialog.vue
index 5b7eb18f0..ae4b2e801 100644
--- a/yudao-ui-admin/src/views/infra/build/IconsDialog.vue
+++ b/yudao-ui-admin/src/views/infra/build/IconsDialog.vue
@@ -101,7 +101,7 @@ export default {
   }
 }
 .icon-dialog {
-  ::v-deep .el-dialog {
+  :deep(.el-dialog) {
     border-radius: 8px;
     margin-bottom: 0;
     margin-top: 4vh !important;
diff --git a/yudao-ui-admin/src/views/infra/build/JsonDrawer.vue b/yudao-ui-admin/src/views/infra/build/JsonDrawer.vue
index 8a4378d99..07dfbf9c0 100644
--- a/yudao-ui-admin/src/views/infra/build/JsonDrawer.vue
+++ b/yudao-ui-admin/src/views/infra/build/JsonDrawer.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import { beautifierConf } from '@/utils/index'
+import { beautifierConf } from '@/utils'
 import ClipboardJS from 'clipboard'
 import { saveAs } from 'file-saver'
 import loadMonaco from '@/utils/loadMonaco'
@@ -133,7 +133,7 @@ export default {
 <style lang="scss" scoped>
 @import '@/styles/mixin.scss';
 
-::v-deep .el-drawer__header {
+:deep(.el-drawer__header) {
   display: none;
 }
 @include action-bar;
diff --git a/yudao-ui-admin/src/views/infra/build/RightPanel.vue b/yudao-ui-admin/src/views/infra/build/RightPanel.vue
index 0ebf3e9dd..e194eaa0d 100644
--- a/yudao-ui-admin/src/views/infra/build/RightPanel.vue
+++ b/yudao-ui-admin/src/views/infra/build/RightPanel.vue
@@ -1021,7 +1021,7 @@ export default {
   .el-date-editor {
     width: 227px;
   }
-  ::v-deep .el-icon-time {
+  :deep(.el-icon-time) {
     display: none;
   }
 }