diff --git a/package.json b/package.json
index ea14a42..d54d8c1 100644
--- a/package.json
+++ b/package.json
@@ -73,8 +73,8 @@
     "eslint": "^5.15.3",
     "html-webpack-plugin": "3.2.0",
     "mockjs": "1.0.1-beta3",
-    "node-sass": "^4.9.0",
     "runjs": "^4.3.2",
+    "sass": "^1.52.1",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
diff --git a/src/components/Breadcrumb/BreadcrumbFilePath.vue b/src/components/Breadcrumb/BreadcrumbFilePath.vue
index 0db9c50..a431535 100644
--- a/src/components/Breadcrumb/BreadcrumbFilePath.vue
+++ b/src/components/Breadcrumb/BreadcrumbFilePath.vue
@@ -102,7 +102,7 @@
     margin-right: 10px;
   }
 
-  /deep/ .el-breadcrumb__separator {
+  >>> .el-breadcrumb__separator {
     margin: 0 0;
     font-weight: 700;
     color: #C0C4CC;
diff --git a/src/components/Cropper/dialog.vue b/src/components/Cropper/dialog.vue
index a7c99e4..3087077 100644
--- a/src/components/Cropper/dialog.vue
+++ b/src/components/Cropper/dialog.vue
@@ -187,11 +187,11 @@
       margin-top: 15px;
     }
   }
-  /deep/.el-divider--vertical {
+  >>>.el-divider--vertical {
     height: 450px;
     margin: 0 20px;
   }
-  /deep/.el-loading-spinner {
+  >>>.el-loading-spinner {
      top: 0;
      margin-top: 0;
   }
diff --git a/src/components/FancyTree/index.vue b/src/components/FancyTree/index.vue
index 233469b..542e924 100644
--- a/src/components/FancyTree/index.vue
+++ b/src/components/FancyTree/index.vue
@@ -540,10 +540,10 @@
       margin-left: 0;
     }
   }
-  /deep/ul.fancytree-container {
+  >>>ul.fancytree-container {
     border: unset;
   }
-  /deep/.tree-icon{
+  >>>.tree-icon{
     position: relative;
     width: 20px;
     height: 20px;
diff --git a/src/components/ShowFile/SelectFile.vue b/src/components/ShowFile/SelectFile.vue
index 1dd58ad..f1b4611 100644
--- a/src/components/ShowFile/SelectFile.vue
+++ b/src/components/ShowFile/SelectFile.vue
@@ -94,11 +94,11 @@ export default {
     background: linear-gradient(rgba(255,255,255,0), #fff);
   }
 }
-/deep/ .share-empty {
+>>> .share-empty {
   padding-bottom: 20%;
 }
 @media screen and (max-width: 768px) {
-  /deep/ .el-dialog {
+  >>> .el-dialog {
     width: 100% !important;
   }
 }
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index c7450c2..764a1ad 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -3154,15 +3154,15 @@ export default {
   height: 100%;
 }
 
-/deep/ .app-wrapper {
+>>> .app-wrapper {
   overflow-y: hidden;
 }
 
-/deep/ :focus {
+>>> :focus {
   outline: 0;
 }
 
-/deep/ .el-drawer__header {
+>>> .el-drawer__header {
   color: #000000;
 
   span {
@@ -3175,17 +3175,17 @@ export default {
 .details-form {
   margin: 20px 10px 0 20px;
 
-  /deep/ .el-form-item__content {
+  >>> .el-form-item__content {
     white-space: normal;
     word-break: break-all;
     word-wrap: break-word;
   }
 
-  /deep/ .el-form-item {
+  >>> .el-form-item {
     margin-bottom: 0;
   }
 
-  /deep/ .details-position {
+  >>> .details-position {
     margin: 10px 0;
 
     .el-form-item__content {
@@ -3206,7 +3206,7 @@ export default {
   text-align: center;
 }
 
-.drawer-icon-font /deep/ .svg-icon {
+.drawer-icon-font >>> .svg-icon {
   font-size: 8rem;
 }
 
@@ -3218,7 +3218,7 @@ export default {
   cursor: default;
 }
 
-/deep/ .plTableBox .el-table .el-table__header {
+>>> .plTableBox .el-table .el-table__header {
   th {
     background-color: #FFFFFF;
   }
@@ -3228,12 +3228,12 @@ export default {
   }
 }
 
-/deep/ table {
+>>> table {
   border-collapse: separate;
   border-spacing: 0 1px;
 }
 
-/deep/ .el-table td {
+>>> .el-table td {
   padding: 0;
   height: 50px !important;
   border: 0;
@@ -3261,11 +3261,11 @@ export default {
   }
 }
 
-/deep/ .el-input-tree {
+>>> .el-input-tree {
   width: 50% !important;
 }
 
-/deep/ .el-input-tree-button {
+>>> .el-input-tree-button {
   margin-left: 5px !important;
 }
 
@@ -3362,17 +3362,17 @@ export default {
   }
 }
 
-/deep/ .el-table--enable-row-hover {
+>>> .el-table--enable-row-hover {
   .el-table__body tr:hover > td {
     background-color: #e0f3fc !important;
   }
 }
 
-/deep/ .el-table::before {
+>>> .el-table::before {
   height: 0;
 }
 
-/deep/ .el-table {
+>>> .el-table {
   th.gutter {
     display: table-cell !important;
   }
diff --git a/src/components/SimpleUploader/globalUploader.vue b/src/components/SimpleUploader/globalUploader.vue
index bc22309..2c66451 100755
--- a/src/components/SimpleUploader/globalUploader.vue
+++ b/src/components/SimpleUploader/globalUploader.vue
@@ -725,7 +725,7 @@
       font-size: 16px;
     }
 
-    /deep/.uploader-file-icon {
+    >>>.uploader-file-icon {
       &:before {
         content: '' !important;
       }
@@ -747,19 +747,19 @@
       }
     }
 
-    /deep/.uploader-file-actions > span {
+    >>>.uploader-file-actions > span {
       margin-right: 6px;
     }
   }
 
-  /deep/.uploader-file-status {
+  >>>.uploader-file-status {
     width: 32%;
     text-indent: 20px;
   }
-  /deep/.uploader-file-meta {
+  >>>.uploader-file-meta {
     width: 0;
   }
-  /deep/.uploader-file-icon {
+  >>>.uploader-file-icon {
     width: 32px;
     height: 32px;
     display: inline-block;
@@ -767,7 +767,7 @@
     margin-top: 8px;
     margin-right: 8px;
   }
-  /deep/.uploader-file-actions>span {
+  >>>.uploader-file-actions>span {
     margin-right: 6px;
     margin-left: 8px;
   }
diff --git a/src/components/input/UploadImageInput.vue b/src/components/input/UploadImageInput.vue
index 5ebbbe9..386e889 100644
--- a/src/components/input/UploadImageInput.vue
+++ b/src/components/input/UploadImageInput.vue
@@ -273,7 +273,7 @@ export default {
     padding: 4px 10px 4px 0;
   }
 }
-/deep/ .el-checkbox {
+>>> .el-checkbox {
   font-size: 13px;
   padding: 0 10px;
   .el-checkbox__label {
@@ -281,7 +281,7 @@ export default {
     font-size: 13px;
   }
 }
-/deep/ .el-upload-list--picture {
+>>> .el-upload-list--picture {
   .el-upload-list__item-thumbnail {
     width: unset;
     height: 90px;
@@ -295,7 +295,7 @@ export default {
     line-height: 90px;
   }
 }
-/deep/ .el-upload-list__item-name {
+>>> .el-upload-list__item-name {
   margin-right: 10px;
 }
 </style>
diff --git a/src/components/popover/MenuPopover.vue b/src/components/popover/MenuPopover.vue
index d64792f..dfdbc3d 100644
--- a/src/components/popover/MenuPopover.vue
+++ b/src/components/popover/MenuPopover.vue
@@ -111,7 +111,7 @@ export default {
     cursor: pointer;
     font-size: 20px;
   }
-   /deep/ .el-popover {
+   >>> .el-popover {
     padding: 0;
   }
 </style>
diff --git a/src/components/preview/AudioPreview.vue b/src/components/preview/AudioPreview.vue
index 3b16ddc..6f91922 100644
--- a/src/components/preview/AudioPreview.vue
+++ b/src/components/preview/AudioPreview.vue
@@ -178,7 +178,7 @@ export default {
     right: 13px;
 }
 @media screen and (max-width: 768px) {
-  /deep/.aplayer {
+  >>>.aplayer {
     z-index: 2;
   }
   .close-bar {
@@ -189,7 +189,7 @@ export default {
     z-index: 1;
     transform: rotate(135deg);
     border-color: #ff000075;
-    /deep/.audio-player-close {
+    >>>.audio-player-close {
       top: -7px;
       right: -7px;
     }
diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue
index 7c00472..61fead5 100644
--- a/src/components/preview/SimTextPreview.vue
+++ b/src/components/preview/SimTextPreview.vue
@@ -887,7 +887,7 @@
     }
   }
 
-  /deep/.el-dialog {
+  >>>.el-dialog {
     /*width: 1035px;*/
     margin: 0 !important;
     overflow: hidden;
diff --git a/src/components/select/icon.vue b/src/components/select/icon.vue
index 35db771..21bf234 100644
--- a/src/components/select/icon.vue
+++ b/src/components/select/icon.vue
@@ -99,20 +99,20 @@ export default {
 
 <style lang="scss" scoped>
 .al-icon-picker {
-  /deep/ .el-input:not(.is-disabled) {
+  >>> .el-input:not(.is-disabled) {
     cursor: pointer;
     .el-input__inner {
       cursor: pointer;
     }
   }
-  /deep/ .el-input__suffix {
+  >>> .el-input__suffix {
     .el-icon-arrow-down {
       transition: transform .3s;
     }
   }
 }
 .al-icon-picker-open {
-  /deep/ .el-input__suffix {
+  >>> .el-input__suffix {
     .el-icon-arrow-down {
       transform: rotate(-180deg);
     }
diff --git a/src/components/table/TableList.vue b/src/components/table/TableList.vue
index c6f0793..f4bf25f 100644
--- a/src/components/table/TableList.vue
+++ b/src/components/table/TableList.vue
@@ -197,7 +197,7 @@ export default {
 
 <style lang="scss" scoped>
 .table-temp {
-  /deep/.el-table {
+  >>>.el-table {
     thead {
       color: #262626;
     }
@@ -226,7 +226,7 @@ export default {
       //}
     }
   }
-  /deep/.el-pagination {
+  >>>.el-pagination {
     margin-top: 15px;
     text-align: center;
   }
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 115def8..5fdf48c 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -212,10 +212,10 @@ export default {
     }
   }
 }
-/deep/ .user-dropdown {
+>>> .user-dropdown {
   top: 50px;
 }
-/deep/ .el-menu--horizontal {
+>>> .el-menu--horizontal {
   padding: 0 15px;
   .el-menu-item {
     height: 50px;
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 7a2e191..062bc74 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -158,7 +158,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .sidebar-container.has-logo {
-  /deep/.el-scrollbar {
+  >>>.el-scrollbar {
     height: calc(100% - 132px) !important;
   }
 }
@@ -166,20 +166,20 @@ export default {
   font-size: 14px;
   height: 32px;
   line-height: 32px;
-  /deep/.el-progress-bar {
+  >>>.el-progress-bar {
     padding-right: 40px;
     margin-left: 20px;
   }
-  /deep/.el-progress__text {
+  >>>.el-progress__text {
     margin-left: 20px;
     font-size: 12px!important;
   }
   .collapse {
-    /deep/.el-progress-bar {
+    >>>.el-progress-bar {
       padding-right: 4px;
       margin-left: 2px;
     }
-    /deep/.el-progress__text {
+    >>>.el-progress__text {
       margin-left: 5px;
       display: block;
     }
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
index 46efaf5..64d806a 100644
--- a/src/styles/home-index.scss
+++ b/src/styles/home-index.scss
@@ -23,7 +23,7 @@
   margin-right: 10px;
 }
 
-/deep/ .el-breadcrumb__separator {
+>>> .el-breadcrumb__separator {
   margin: 0 0;
   font-weight: 700;
   color: #C0C4CC;
@@ -75,67 +75,67 @@
   cursor: pointer;
   font-size: 20px;
 }
-/deep/ .el-input-group__append /deep/ .el-loading-spinner {
+>>> .el-input-group__append >>> .el-loading-spinner {
   top: 0;
   margin-top: 0.75rem;
 }
-/deep/ .cell /deep/ .el-loading-spinner {
+>>> .cell >>> .el-loading-spinner {
   top: 0;
   margin-top: 0.54rem;
 }
-/deep/ .cell {
+>>> .cell {
   .el-button {
     padding: 6px 10px;
     margin-left: 10px;
   }
 }
-/deep/ .el-checkbox {
+>>> .el-checkbox {
   cursor: default;
 }
-/deep/ .el-checkbox__input {
+>>> .el-checkbox__input {
   cursor: default;
 }
 .el-button.is-circle {
   border-radius: 50%;
   padding: 9px;
 }
-/deep/.svg-icon {
+>>>.svg-icon {
   font-size: 28px;
 }
-/deep/.el-table thead {
+>>>.el-table thead {
   color: #4f4f50;
 }
-/deep/ .el-table thead .el-table-column--selection .cell {
+>>> .el-table thead .el-table-column--selection .cell {
   padding-left: 15px;
 }
-/deep/.el-table .cell {
+>>>.el-table .cell {
   padding-right: 5px;
 }
-/deep/.el-table th {
+>>>.el-table th {
   padding: 0 0;
 }
-/deep/.el-table td{
+>>>.el-table td{
   padding: 1px 0;
   height: 50px;
 }
-/deep/.el-table__header tr, .el-table__header th {
+>>>.el-table__header tr, .el-table__header th {
   height: 40px;
 }
-/deep/.el-avatar>img {
+>>>.el-avatar>img {
   display: inherit;
   vertical-align: inherit;
 }
-/deep/.el-avatar {
+>>>.el-avatar {
   background: #ffffff;
   margin: 7px 0 0 0;
 }
-/deep/.el-avatar {
+>>>.el-avatar {
   width: 35px;
   height: 35px;
   line-height: 35px;
 }
 
-/deep/ .ctx-menu-container {
+>>> .ctx-menu-container {
   border: 0 solid rgba(0, 0, 0, 0);
 }
 
@@ -181,12 +181,12 @@
   box-shadow: -1px -1px 1px #cccccc73;
 }
 /*解决合计不显示的问题*/
-/deep/
+>>>
 .el-table__footer-wrapper{
   position: fixed;
 }
 
-/deep/ .el-table__row /deep/.table-file-name:hover {
+>>> .el-table__row >>>.table-file-name:hover {
   cursor: pointer;
   color: #19ACF9
 }
@@ -218,25 +218,25 @@
   margin-top: 50px;
 }
 
-/deep/ .el-dialog__header {
+>>> .el-dialog__header {
   padding: 20px 20px 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/deep/ .el-dialog__title {
+>>> .el-dialog__title {
   font-size: 16px;
 }
-/deep/ .el-dialog__body {
+>>> .el-dialog__body {
   padding: 0 20px 0 20px;
 }
-/deep/ .el-tree-node__content {
+>>> .el-tree-node__content {
   height: 35px;
   /*border-bottom: 1px solid #ccc;*/
   position: relative;
 }
 
-/deep/ .custom-tree-node {
+>>> .custom-tree-node {
   flex: 1;
   display: flex;
   align-items: center;
@@ -244,12 +244,12 @@
   padding-right: 8px;
 }
 
-/deep/ .el-tree-node.is-expanded>.el-tree-node__children {
+>>> .el-tree-node.is-expanded>.el-tree-node__children {
   max-height: 500px;
   overflow: auto;
 }
 
-/deep/ .drag-parent-class {
+>>> .drag-parent-class {
   z-index: 999;
   position: fixed;
   right: 0;
@@ -261,15 +261,15 @@
   /*transition: all .1s ease-in-out 0s;*/
 }
 
-/deep/ .drag-parent-class .el-table {
+>>> .drag-parent-class .el-table {
   background-color: #66cc66;
 }
 
-/deep/ .drag-parent-class .el-table tr {
+>>> .drag-parent-class .el-table tr {
   background-color: #66cc66;
 }
 
-/deep/.van-grid-item__text {
+>>>.van-grid-item__text {
   text-align: center;
   color: #646566;
   font-size: 12px;
@@ -280,14 +280,14 @@
   white-space: nowrap;
 }
 
-/deep/ .van-grid {
+>>> .van-grid {
   padding: 20px 0 0 20px;
 }
 
-/deep/ .van-grid-item__content .svg-icon{
+>>> .van-grid-item__content .svg-icon{
   font-size: 5rem;
 }
-/deep/ .grid-item-text {
+>>> .grid-item-text {
   cursor: default;
   text-align: center;
   color: #606266;
@@ -305,23 +305,23 @@
     resize:none;
   }
 }
-/deep/ .grid-item-text-image {
+>>> .grid-item-text-image {
   position: absolute;
   top: 80%;
   color: #ffffff;
 }
-/deep/ .grid-item-text-image-size {
+>>> .grid-item-text-image-size {
   position: absolute;
   top: 70%;
   color: #ffffff;
 }
-/deep/ .grid-item-checkbox {
+>>> .grid-item-checkbox {
   position: absolute;
   top: 10px;
   left: 10px;
   z-index: 1;
 }
-/deep/ .grid-time {
+>>> .grid-time {
   border-radius: 5px;
   padding: 0 8px;
   border: solid 1px #ccc0;
@@ -343,7 +343,7 @@
     backdrop-filter: contrast(0.5);
   }
 }
-/deep/ .grid-time:hover {
+>>> .grid-time:hover {
   background-color: #e0f3fc;
 }
 .checkbox-group-header {
@@ -362,7 +362,7 @@
     margin: 0;
   }
 }
-/deep/ .grid-divider {
+>>> .grid-divider {
   display: block;
   height: 1px;
   width: 500px;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 15eea3c..d5b1bad 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -13,12 +13,12 @@ body {
   font-family: Menlo,Monaco,Consolas,"Courier New",monospace;;
 }
 
-/deep/::-webkit-scrollbar {
+>>>::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 12px;
   height: 12px;
 }
-/deep/::-webkit-scrollbar-thumb {
+>>>::-webkit-scrollbar-thumb {
   /*滚动条里面小方块*/
   height: 30px;
   background-color: #c0c0c0;
@@ -27,16 +27,16 @@ body {
   outline-offset: -2px;
   border: 2px solid #fff;
 }
-/deep/::-webkit-scrollbar-thumb:hover {
+>>>::-webkit-scrollbar-thumb:hover {
   background-color: #999;
 }
-/deep/::-webkit-scrollbar-track {
+>>>::-webkit-scrollbar-track {
   /*滚动条里面轨道*/
   /*box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);*/
   /*background   : #ffffff;*/
   /*border-radius: 10px;*/
 }
-/deep/::-webkit-scrollbar-track-piece {
+>>>::-webkit-scrollbar-track-piece {
   background-color: #fff;
   -webkit-border-radius: 3px;
 }
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index cc10a35..4226807 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -1,4 +1,4 @@
-/deep/:root {
+>>>:root {
   --font-color: #000;
   --night-font-color: #ddd;
   --primary: #b2fefa;
@@ -33,7 +33,7 @@
   margin-left: 0.25rem;
 }
 
-/deep/ #top {
+>>> #top {
   padding: .75rem 1rem;
   line-height: 2;
   text-align: center;
@@ -241,7 +241,7 @@
   align-items: stretch;
 }
 
-/deep/ .article-body {
+>>> .article-body {
   .note-update-date {
     padding: 0.75rem;
     border-left: 0.35rem solid;
@@ -284,7 +284,7 @@
 }
 
 
-/deep/ .right-bj {
+>>> .right-bj {
   //top: 70px;
   //background: rgba(255, 255, 255, 0.8);
   //z-index: 1;
@@ -298,7 +298,7 @@
   flex-direction: column;
 }
 
-/deep/ .slimScrollDiv {
+>>> .slimScrollDiv {
   border-right: 1px solid #e8e8e8;
   -webkit-transition: all .5s;
   transition: all .5s;
@@ -332,10 +332,10 @@
 
 
 @media only screen and (max-width: 768px){
-  /deep/ .right-bj {
+  >>> .right-bj {
     width: 240px;
   }
-  /deep/ .slimScrollDiv {
+  >>> .slimScrollDiv {
     position: fixed;
     max-height: 1000px;
     width: calc(100% - 2 * 16px);
@@ -348,94 +348,94 @@
 }
 
 @media only screen and (min-width: 768px){
-  /deep/ .right-bj {
+  >>> .right-bj {
     width: 240px;
   }
-  /deep/ .slimScrollDiv {
+  >>> .slimScrollDiv {
     width: 240px;
   }
 }
 
 @media only screen and (min-width: 992px){
-  /deep/ .right-bj {
+  >>> .right-bj {
     width: 240px;
   }
-  /deep/ .slimScrollDiv {
+  >>> .slimScrollDiv {
     width: 240px;
   }
 }
 
 @media only screen and (min-width: 1200px){
-  /deep/ .right-bj {
+  >>> .right-bj {
     width: 240px;
   }
-  /deep/ .slimScrollDiv {
+  >>> .slimScrollDiv {
     width: 240px;
   }
-  /deep/ .slimScrollDiv,.l_side {
+  >>> .slimScrollDiv,.l_side {
     transform: translateX(50px);
   }
-  /deep/ .article_l_main[content=show] {
+  >>> .article_l_main[content=show] {
     transform: translateX(50px);
   }
 }
 
 @media only screen and (min-width: 1240px){
-  /deep/ .slimScrollDiv,.l_side {
+  >>> .slimScrollDiv,.l_side {
     transform: translateX(80px);
   }
-  /deep/ .article_l_main[content=show] {
+  >>> .article_l_main[content=show] {
     transform: translateX(80px);
   }
 }
 
 @media only screen and (min-width: 1400px){
-  /deep/ .slimScrollDiv,.l_side {
+  >>> .slimScrollDiv,.l_side {
     transform: translateX(120px);
   }
-  /deep/ .article_l_main[content=show] {
+  >>> .article_l_main[content=show] {
     transform: translateX(120px);
   }
 }
 
 @media only screen and (min-width: 1920px){
-  /deep/ .right-bj {
+  >>> .right-bj {
     width: 240px;
   }
-  /deep/ .slimScrollDiv {
+  >>> .slimScrollDiv {
     width: 240px;
   }
 }
 
-/deep/ li {
+>>> li {
   list-style: none;
 }
 
-/deep/ .slimScrollBar {
+>>> .slimScrollBar {
   background: rgba(0, 0, 0, 0.3) !important;
 }
-/deep/ .right-menu {
+>>> .right-menu {
   width: 100%!important;
   display: flex;
   flex-direction: column;
 }
-/deep/ .right-menu .toc-header {
+>>> .right-menu .toc-header {
   padding: calc(11px - 2px);
   color: #2196f3;
   font-size: 1rem;
 }
-/deep/ .right-menu .toc-header span{
+>>> .right-menu .toc-header span{
   margin-left: 10px;
 }
 
-/deep/ .right-menu > div {
+>>> .right-menu > div {
   display: block;
   border-bottom: 1px dashed #cccccc;
 }
-/deep/ .right-menu > div ul {
+>>> .right-menu > div ul {
   display: block;
 }
-/deep/ .right-menu > div .menu li {
+>>> .right-menu > div .menu li {
   line-height: 40px;
   padding-left: 40px;
   margin-top: 4px;
@@ -444,23 +444,23 @@
   color: #777;
   position: relative;
 }
-/deep/ .right-menu > div .menu li a {
+>>> .right-menu > div .menu li a {
   color: #777;
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
-/deep/ .right-menu > div .menu li:hover a {
+>>> .right-menu > div .menu li:hover a {
   color: #13C2C2;
 }
-/deep/ .right-menu > div .menu li.current-menu-item {
+>>> .right-menu > div .menu li.current-menu-item {
   background: #e6f7ff;
 }
-/deep/ .right-menu > div .menu li.current-menu-item a {
+>>> .right-menu > div .menu li.current-menu-item a {
   color: #13C2C2;
 }
-/deep/ .right-menu > div .menu li.current-menu-item:before {
+>>> .right-menu > div .menu li.current-menu-item:before {
   content: "";
   position: absolute;
   right: 0;
@@ -469,10 +469,10 @@
   background: #13C2C2;
   height: 100%;
 }
-/deep/ .right-menu > div.titleList {
+>>> .right-menu > div.titleList {
   position: relative;
 }
-/deep/ .right-menu > div.titleList li {
+>>> .right-menu > div.titleList li {
   margin-bottom: 4px;
   cursor: pointer;
   padding-right: 16px;
@@ -485,7 +485,7 @@
   position: relative;
   transition: all 0.2s;
 }
-/deep/ .right-menu > div.titleList li a {
+>>> .right-menu > div.titleList li a {
   display: block;
   transition: all 0.2s;
   text-overflow: ellipsis;
@@ -494,13 +494,13 @@
   font-size: 14px;
   color: #333;
 }
-///deep/ .right-menu > div.titleList li.active a {
+//>>> .right-menu > div.titleList li.active a {
 //  color: #13C2C2;
 //}
-///deep/ .right-menu > div.titleList li:hover a {
+//>>> .right-menu > div.titleList li:hover a {
 //  color: #13C2C2;
 //}
-/deep/ .right-menu > div.titleList {
+>>> .right-menu > div.titleList {
   .h-1 {
     padding-left: 10px;
     font-size: 1.125rem;
@@ -527,7 +527,7 @@
     color: #6a737d;
   }
 }
-/deep/ .right-menu > div.titleList .j-bj {
+>>> .right-menu > div.titleList .j-bj {
   background: linear-gradient(to right, #5d9eea, #afcafd);
   position: absolute;
   left: 0;
@@ -537,7 +537,7 @@
   z-index: -1;
   transition: all 0.2s;
 }
-/deep/ .right-menu > div.titleList .j-bj:before {
+>>> .right-menu > div.titleList .j-bj:before {
   content: "";
   position: absolute;
   left: 0;
@@ -546,12 +546,12 @@
   background: #0070fd;
   height: 100%;
 }
-/deep/ .right-menu > div a {
+>>> .right-menu > div a {
   color: #444;
   font-size: 15px;
 }
 
-/deep/ mark {
+>>> mark {
   background: linear-gradient(to right, #FFEB3B, #ff0101a3);
   color: #000;
   overflow-wrap: break-word;
@@ -567,7 +567,7 @@
   box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
 }
 
-/deep/ .article-body {
+>>> .article-body {
   border-radius: 0.5rem;
   blockquote {
     padding: 0.8em 1em;
diff --git a/src/styles/setting.scss b/src/styles/setting.scss
index d15ccff..c3242da 100644
--- a/src/styles/setting.scss
+++ b/src/styles/setting.scss
@@ -15,7 +15,7 @@ a:hover {
 .container {
   padding: 20px;
 }
-/deep/.box-card {
+>>>.box-card {
   margin: 0 auto;
   max-width: 1240px;
   .clearfix {
@@ -30,14 +30,14 @@ a:hover {
     }
   }
 }
-/deep/.el-dialog__headerbtn {
+>>>.el-dialog__headerbtn {
   top: unset;
 }
-/deep/.el-card__body {
+>>>.el-card__body {
   padding: 15px;
 }
 .table-search-header{
-  /deep/.el-card__header {
+  >>>.el-card__header {
     padding: 18px 20px 0;
   }
 }
@@ -71,7 +71,7 @@ a:hover {
   float: right;
   margin-top: -32px;
 }
-/deep/ .el-collapse-item__content, /deep/.el-tab-pane {
+>>> .el-collapse-item__content, >>>.el-tab-pane {
   background-color: #fafafa;
   padding: 0 30px 20px;
 }
@@ -88,7 +88,7 @@ a:hover {
   .avatar-value{
     position: absolute;
     z-index: 1;
-    /deep/.el-icon-user-solid{
+    >>>.el-icon-user-solid{
       font-size: 50px;
       padding: 25px;
     }
@@ -106,22 +106,22 @@ a:hover {
     background: #2f2f2fa8;
   }
 }
-.form-item-avatar /deep/ .el-form-item__label{
+.form-item-avatar >>> .el-form-item__label{
   padding: 30px 12px;
 }
 .dialog-avatar {
-  /deep/.el-dialog {
+  >>>.el-dialog {
     min-width: 800px;
     margin-top: 5vh!important;
   }
 }
 .dialog-form {
-  /deep/ .el-dialog__body {
+  >>> .el-dialog__body {
     padding-bottom: 0;
     padding-top: 22px;
   }
 }
-/deep/ .el-dialog {
+>>> .el-dialog {
   border-radius: 4px;
   max-width: calc(100vw - 30px);
   .el-dialog__header {
@@ -181,13 +181,13 @@ a:hover {
   .search-form .el-form-actions {
     text-align: right;
   }
-  /deep/ .el-dialog {
+  >>> .el-dialog {
     min-width: 100px;
     width: 100%;
     margin-top: 10vh!important;
   }
   .dialog-avatar {
-    /deep/.el-dialog {
+    >>>.el-dialog {
       .container {
         display: block;
         .img-container {
diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue
index 05b80ca..a1e801d 100644
--- a/src/views/home/mobile/index.vue
+++ b/src/views/home/mobile/index.vue
@@ -1332,7 +1332,7 @@ input {
 
 }
 
-/deep/ .block {
+>>> .block {
   .audio-player-close {
     width: 1em;
     height: 1em;
@@ -1364,7 +1364,7 @@ input {
     margin-left: 5px;
   }
 
-  /deep/ .svg-icon {
+  >>> .svg-icon {
     width: 2.5em;
     height: 2.5em;
   }
@@ -1381,7 +1381,7 @@ input {
   background-color: #bfcbd930;
 }
 
-/deep/ .van-sticky {
+>>> .van-sticky {
   background: inherit;
   -webkit-backdrop-filter: saturate(180%) blur(10px);
   backdrop-filter: saturate(180%) blur(10px);
@@ -1393,7 +1393,7 @@ input {
   border: 0 solid rgba(255, 255, 255, 0.72);
 }
 
-/deep/ .van-sticky--fixed {
+>>> .van-sticky--fixed {
   z-index: 1;
 }
 
@@ -1455,7 +1455,7 @@ input {
   text-overflow: ellipsis;
 }
 
-.new-folder-input /deep/ .van-field__body {
+.new-folder-input >>> .van-field__body {
   height: 40px;
 }
 
@@ -1472,7 +1472,7 @@ input {
   padding: 1px 0;
 }
 
-/deep/ .menu-background::after {
+>>> .menu-background::after {
   background: inherit;
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   backdrop-filter: saturate(180%) blur(20px);
@@ -1531,7 +1531,7 @@ input {
   height: 1rem;
 }
 
-/deep/ .ctx-menu-container {
+>>> .ctx-menu-container {
   top: unset;
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 1rem;
@@ -1568,7 +1568,7 @@ input {
 .classification {
   padding: 1rem 0 0 0;
 
-  /deep/ .van-cell:active {
+  >>> .van-cell:active {
     background-color: #f8f8f8;
   }
 }
@@ -1641,7 +1641,7 @@ input {
   }
 }
 
-/deep/ .grid-item-text {
+>>> .grid-item-text {
   text-align: center;
   color: #606266;
   font-size: smaller;
@@ -1652,7 +1652,7 @@ input {
   white-space: nowrap;
 }
 
-/deep/ .van-grid-item__content {
+>>> .van-grid-item__content {
   padding: 0px;
 
   .grid-item-icon {
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index 0713e36..5fe1ec8 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -514,7 +514,7 @@ export default {
 <style lang="scss" scoped>
 @import "src/styles/setting";
 
-/deep/ .el-main {
+>>> .el-main {
   padding: 35px 20px 20px 20px;
 
   .v-note-wrapper {
@@ -522,15 +522,15 @@ export default {
   }
 }
 
-/deep/ .el-header {
+>>> .el-header {
   height: 43px !important;
 }
 
-/deep/ .el-input-group {
+>>> .el-input-group {
   width: unset;
 }
 
-/deep/ .header-item {
+>>> .header-item {
   line-height: 40px;
   padding: 5px 0 5px 0;
 
@@ -558,13 +558,13 @@ export default {
   }
 }
 
-/deep/ .el-drawer__body {
+>>> .el-drawer__body {
   .more-setting {
     padding: 15px;
   }
 }
 
-/deep/ .more-setting {
+>>> .more-setting {
   margin-top: 32px;
   padding-top: 15px;
 
@@ -608,12 +608,12 @@ export default {
 }
 
 .setting-tags {
-  /deep/ .el-tag {
+  >>> .el-tag {
     margin-left: 8px;
     margin-top: 8px;
   }
 
-  /deep/ .button-new-tag {
+  >>> .button-new-tag {
     margin-left: 8px;
     margin-top: 8px;
     height: 32px;
@@ -622,7 +622,7 @@ export default {
     padding-bottom: 0;
   }
 
-  /deep/ .input-new-tag {
+  >>> .input-new-tag {
     margin-left: 8px;
     margin-top: 8px;
     max-width: 94px;
@@ -634,7 +634,7 @@ export default {
   }
 }
 
-/deep/ .input-error {
+>>> .input-error {
   input {
     border-color: #f56c6c;
   }
@@ -649,7 +649,7 @@ export default {
   margin-left: 8px;
 }
 
-/deep/ .el-autocomplete-suggestion {
+>>> .el-autocomplete-suggestion {
   li {
     padding: 0;
     background-color: #ecf5ff;
@@ -668,7 +668,7 @@ export default {
   }
 }
 
-/deep/ .el-autocomplete-suggestion__wrap {
+>>> .el-autocomplete-suggestion__wrap {
   padding: 2px 0;
 }
 
@@ -678,7 +678,7 @@ export default {
   }
 }
 
-/deep/ .el-tree-node {
+>>> .el-tree-node {
   &:focus > .el-tree-node__content {
     background-color: unset;
   }
@@ -693,7 +693,7 @@ export default {
   overflow: auto;
 }
 
-/deep/ .url-slug {
+>>> .url-slug {
   display: flex;
   color: #aaaaaa;
 
@@ -712,11 +712,11 @@ export default {
   }
 }
 
-/deep/ .vditor-toolbar--pin {
+>>> .vditor-toolbar--pin {
   top: unset;
 }
 
-/deep/ .el-scrollbar__wrap {
+>>> .el-scrollbar__wrap {
   &::-webkit-scrollbar {
     width: 0;
     height: 0;
@@ -724,7 +724,7 @@ export default {
 }
 .view-icon {
   margin-left: 10px;
-  /deep/.svg-icon{
+  >>>.svg-icon{
     margin-right: 2px;
   }
 }
diff --git a/src/views/public/share/shareList.vue b/src/views/public/share/shareList.vue
index 03d0a2c..c7aadfd 100644
--- a/src/views/public/share/shareList.vue
+++ b/src/views/public/share/shareList.vue
@@ -981,7 +981,7 @@
       float: right;
       top: 10px;
       margin-top: -34px;
-      /deep/.el-avatar {
+      >>>.el-avatar {
         margin: 0 0 0 10px;
       }
       .user {
@@ -989,7 +989,7 @@
       }
     }
   }
-  /deep/.el-table{
+  >>>.el-table{
     &::before {
       width: auto;
     }
@@ -1001,9 +1001,9 @@
     height: 0;
     text-align: center;
     width: auto;
-    /deep/.el-divider__text {
+    >>>.el-divider__text {
     }
-    /deep/.el-divider__text.is-center {
+    >>>.el-divider__text.is-center {
       position: relative;
     }
   }
diff --git a/src/views/setting/articles/articleManager.vue b/src/views/setting/articles/articleManager.vue
index 53667b1..34f9908 100644
--- a/src/views/setting/articles/articleManager.vue
+++ b/src/views/setting/articles/articleManager.vue
@@ -484,18 +484,18 @@ export default {
 .wailian {
   margin-left: 8px;
 }
-/deep/ .el-dialog {
+>>> .el-dialog {
   max-width: 100vw !important;
 }
-/deep/ .el-dialog__body {
+>>> .el-dialog__body {
   padding: 0 15px;
 }
-/deep/ .el-table-alone-page {
+>>> .el-table-alone-page {
   tbody .el-table__row:hover {
     cursor: move;
   }
 }
-/deep/.el-pagination{
+>>>.el-pagination{
   padding: 15px 5px 0;
 }
 </style>
diff --git a/src/views/setting/articles/blogManager.vue b/src/views/setting/articles/blogManager.vue
index 0c336dc..b1dc6cf 100644
--- a/src/views/setting/articles/blogManager.vue
+++ b/src/views/setting/articles/blogManager.vue
@@ -250,14 +250,14 @@ export default {
 @import "src/styles/setting";
 @import "src/styles/markdown";
 
-/deep/ .el-collapse-item__header {
+>>> .el-collapse-item__header {
   font-size: 16px;
   padding-left: 20px;
 }
 .list-body {
   padding-bottom: 15px;
 }
-/deep/ .el-card__body {
+>>> .el-card__body {
   padding: 0;
 }
 
@@ -271,7 +271,7 @@ export default {
   backdrop-filter: blur(20px);
 }
 
-/deep/ .el-divider__text {
+>>> .el-divider__text {
   background-color: #fafafa;
 }
 
@@ -316,7 +316,7 @@ export default {
   }
 }
 
-/deep/ .el-tabs__header {
+>>> .el-tabs__header {
   margin: 0;
   @media screen and (min-width: 768px) {
     .el-tabs__nav {
diff --git a/src/views/setting/articles/categoryManager.vue b/src/views/setting/articles/categoryManager.vue
index 6f6af6c..f6fdc55 100644
--- a/src/views/setting/articles/categoryManager.vue
+++ b/src/views/setting/articles/categoryManager.vue
@@ -338,7 +338,7 @@ export default {
   font-size: 16px;
   font-weight: 600;
 }
-/deep/ .el-page-header {
+>>> .el-page-header {
   height: 32px;
   line-height: 32px;
 }
@@ -353,7 +353,7 @@ export default {
 .article-num:active {
   background-color: #ecf5ff;
 }
-/deep/ .el-form-item__content {
+>>> .el-form-item__content {
   line-height: 1.5;
 }
 </style>
diff --git a/src/views/setting/articles/tagManager.vue b/src/views/setting/articles/tagManager.vue
index 2a59ce8..bb6110a 100644
--- a/src/views/setting/articles/tagManager.vue
+++ b/src/views/setting/articles/tagManager.vue
@@ -236,11 +236,11 @@ export default {
   font-size: 16px;
   font-weight: 600;
 }
-/deep/ .el-page-header {
+>>> .el-page-header {
   height: 32px;
   line-height: 32px;
 }
-/deep/ .tag-checkbox {
+>>> .tag-checkbox {
   padding-left: 8px;
   .el-checkbox__inner {
     display: none;
@@ -249,37 +249,37 @@ export default {
     padding-left: 5px;
   }
 }
-/deep/ .el-checkbox {
+>>> .el-checkbox {
   margin-right: 0;
   margin-bottom: 16px;
 }
-/deep/ .el-checkbox.is-bordered {
+>>> .el-checkbox.is-bordered {
   background-color: #f4f4f5;
   border-color: #e9e9eb;
   color: #646568;
   font-weight: 400;
   padding: 6px 5px 5px 10px;
 }
-/deep/ .el-checkbox.is-bordered.is-checked {
+>>> .el-checkbox.is-bordered.is-checked {
   background-color: #ecf5ff;
   border-color: #40a9ff;
   color: #d9ecff;
 }
-/deep/ .el-icon-edit:hover {
+>>> .el-icon-edit:hover {
   color: #40a9ff;
 }
 .check-all {
   margin-right: 20px;
 }
-/deep/ .el-card__header {
-  /deep/ .el-checkbox {
+>>> .el-card__header {
+  >>> .el-checkbox {
     margin: 0;
   }
-  /deep/.el-button+.el-button {
+  >>>.el-button+.el-button {
     margin-left: 0;
   }
 }
-/deep/ .el-form-item__content {
+>>> .el-form-item__content {
   line-height: 1.5;
 }
 </style>
diff --git a/src/views/setting/authAPP.vue b/src/views/setting/authAPP.vue
index 4438f6f..c670a32 100644
--- a/src/views/setting/authAPP.vue
+++ b/src/views/setting/authAPP.vue
@@ -144,10 +144,10 @@ export default {
 
 <style lang="scss" scoped>
 @import "src/styles/setting";
-/deep/.el-divider--horizontal {
+>>>.el-divider--horizontal {
   margin: 0;
 }
-/deep/.el-alert {
+>>>.el-alert {
   margin-bottom: 15px;
   .el-alert__content {
     padding: 5px 8px;
diff --git a/src/views/setting/cloudManager.vue b/src/views/setting/cloudManager.vue
index bda6296..c6e8675 100644
--- a/src/views/setting/cloudManager.vue
+++ b/src/views/setting/cloudManager.vue
@@ -89,7 +89,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "src/styles/setting";
-/deep/ .el-textarea {
+>>> .el-textarea {
   max-width: 1080px;
 }
 </style>
diff --git a/src/views/setting/sys/cusomerInfo.vue b/src/views/setting/sys/cusomerInfo.vue
index 7a4a451..0b48d6f 100644
--- a/src/views/setting/sys/cusomerInfo.vue
+++ b/src/views/setting/sys/cusomerInfo.vue
@@ -338,7 +338,7 @@
     }
   }
   @media screen and (max-width: 768px) {
-    /deep/ .el-divider--vertical {
+    >>> .el-divider--vertical {
       display: none;
     }
     .avatar-preview {
diff --git a/src/views/setting/sys/cusomerManager.vue b/src/views/setting/sys/cusomerManager.vue
index 3093a97..444b510 100644
--- a/src/views/setting/sys/cusomerManager.vue
+++ b/src/views/setting/sys/cusomerManager.vue
@@ -366,10 +366,10 @@ export default {
 
 <style lang="scss" scoped>
 @import "src/styles/setting";
-/deep/ .el-input {
+>>> .el-input {
   width: 100%;
 }
-/deep/ .el-select {
+>>> .el-select {
   width: 100%;
 }
 </style>
diff --git a/src/views/setting/sys/logList.vue b/src/views/setting/sys/logList.vue
index be52cfb..f518ade 100644
--- a/src/views/setting/sys/logList.vue
+++ b/src/views/setting/sys/logList.vue
@@ -225,7 +225,7 @@ export default {
   max-width: 1440px;
 }
 
-/deep/ .el-range-editor--medium {
+>>> .el-range-editor--medium {
   width: 100%;
 }
 </style>
diff --git a/src/views/setting/sys/logOperation.vue b/src/views/setting/sys/logOperation.vue
index c8f528d..2150b63 100644
--- a/src/views/setting/sys/logOperation.vue
+++ b/src/views/setting/sys/logOperation.vue
@@ -128,19 +128,19 @@ export default {
 <style lang="scss" scoped>
 @import "src/styles/setting";
 
-/deep/ .box-card {
+>>> .box-card {
   max-width: 1440px;
 
-  /deep/ .el-form-item {
+  >>> .el-form-item {
     margin-bottom: 20px;
   }
 }
 
-/deep/ .el-form-item {
+>>> .el-form-item {
   margin-bottom: 0px;
 }
 
-/deep/ .el-divider--horizontal {
+>>> .el-divider--horizontal {
   margin: 10px 0;
 }
 </style>
diff --git a/src/views/setting/sys/menuManager.vue b/src/views/setting/sys/menuManager.vue
index c39121d..64e21d8 100644
--- a/src/views/setting/sys/menuManager.vue
+++ b/src/views/setting/sys/menuManager.vue
@@ -392,16 +392,16 @@ export default {
 
 <style lang="scss" scoped>
 @import "src/styles/setting";
-/deep/ .el-input {
+>>> .el-input {
   width: 100%;
 }
-/deep/ .el-input-number {
+>>> .el-input-number {
   width: unset;
 }
-/deep/ .el-select {
+>>> .el-select {
   width: 100%;
 }
-/deep/.box-card {
+>>>.box-card {
   max-width: 1440px;
 }
 </style>
diff --git a/src/views/setting/sys/roleManager.vue b/src/views/setting/sys/roleManager.vue
index 41c2a5d..b9547d5 100644
--- a/src/views/setting/sys/roleManager.vue
+++ b/src/views/setting/sys/roleManager.vue
@@ -340,10 +340,10 @@ export default {
 
 <style lang="scss" scoped>
 @import "src/styles/setting";
-/deep/ .el-input {
+>>> .el-input {
   width: 100%;
 }
-/deep/ .el-select {
+>>> .el-select {
   width: 100%;
 }
 </style>
diff --git a/src/views/share/index.vue b/src/views/share/index.vue
index 88be314..68f48b3 100644
--- a/src/views/share/index.vue
+++ b/src/views/share/index.vue
@@ -515,29 +515,29 @@
     font-size: 14px;
     font-weight: 500;
   }
-  /deep/.el-icon-my-export{
+  >>>.el-icon-my-export{
     background: url('~@/assets/img/cancel-share.png') center no-repeat;
     background-size: cover;
   }
-  /deep/.el-icon-my-export:before{
+  >>>.el-icon-my-export:before{
     content: "替";
     font-size: 16px;
     visibility: hidden;
   }
   //如果直接使用字体图片
   //直接在before属性设置对应的content就行
-  /deep/.el-icon-my-export{
+  >>>.el-icon-my-export{
     font-size: 16px;
   }
-  /deep/.el-icon-my-export:before{
+  >>>.el-icon-my-export:before{
     content: "\66ff";
     font-size: 16px;
     visibility: hidden;
   }
-  /deep/.plTableBox .el-table .el-table__header th {
+  >>>.plTableBox .el-table .el-table__header th {
     background-color: #FFFFFF;
   }
-  /deep/.el-table td {
+  >>>.el-table td {
     height: 50px!important;
   }
 </style>
diff --git a/src/views/upload/mobile/index.vue b/src/views/upload/mobile/index.vue
index 885e19d..308515e 100644
--- a/src/views/upload/mobile/index.vue
+++ b/src/views/upload/mobile/index.vue
@@ -53,13 +53,13 @@
   }
 </script>
 <style lang="scss" scoped>
-  /deep/ .uploader-file-info {
+  >>> .uploader-file-info {
     font-size: 14px;
   }
-  /deep/ .uploader-file-name {
+  >>> .uploader-file-name {
     width: 50%;
   }
-  /deep/ .uploader-file-status {
+  >>> .uploader-file-status {
     width: 30%;
     span {
       span {
@@ -70,13 +70,13 @@
       }
     }
   }
-  /deep/ .uploader-file-size {
+  >>> .uploader-file-size {
     display: none;
   }
-  /deep/ .uploader-file-meta {
+  >>> .uploader-file-meta {
     display: none;
   }
-  /deep/ .uploader-file-actions {
+  >>> .uploader-file-actions {
     width: 20%;
     span {
       padding: 10px;