From 5e61a8f30a59bf3fa258ceddeac313e67668abcc Mon Sep 17 00:00:00 2001
From: Dovahkinn <yanhao2110@gmail.com>
Date: Fri, 5 Aug 2022 18:24:27 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8D=20css=20?=
 =?UTF-8?q?=E4=B8=AD=E4=B8=8D=E5=86=8D=E6=94=AF=E6=8C=81=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=B7=B1=E5=BA=A6=E9=80=89=E6=8B=A9=E7=AC=A6=E5=8F=B7?=
 =?UTF-8?q?=20>>>=20=E5=AF=BC=E8=87=B4=E5=91=BD=E4=BB=A4=E8=A1=8C=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98=20(#2806)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 执行 eslint 命令, 修复代码

* fix(frontend): justify-content 不支持的值 start, end 改为 flex-start, flex-end

* Update format-utils.js

去掉注释

* fix(frontend): 修复 css 中不再支持的样式深度选择符号 >>> 导致命令行报错的问题， 替换为 ::v-deep

* Update DateFormat.vue

* Update FrameLinks.vue

* Update Hyperlinks.vue

* Update HyperlinksDialog.vue

* Update LinkageField.vue

* Update VideoLinks.vue

* Update DeNumberRange.vue

* Update DeSelectGrid.vue

* Update index.scss

* Update index.vue

* Update BackgroundColorSelector.vue

* Update LegendSelector.vue

* Update LegendSelectorAntV.vue

* Update SplitSelector.vue

* Update SplitSelectorAntV.vue

* Update TitleSelector.vue

* Update TitleSelectorAntV.vue

* Update XAxisSelector.vue

* Update XAxisSelectorAntV.vue

* Update YAxisExtSelector.vue

* Update YAxisExtSelectorAntV.vue

* Update YAxisSelector.vue

* Update YAxisSelectorAntV.vue

* Update QuotaFilterEditor.vue

* Update ResultFilterEditor.vue

* Update LabelNormal.vue

* Update LabelNormalText.vue

* Update AssistLine.vue

* Update FunctionCfg.vue

* Update ScrollCfg.vue

* Update Threshold.vue

* Update ColorSelector.vue

* Update LabelSelector.vue

* Update SizeSelector.vue

* Update TooltipSelector.vue

* Update TooltipSelectorAntV.vue

* Update TotalCfg.vue

* Update TableNormal.vue

* Update ChartStyle.vue

* Update AddCustom.vue

* Update AddExcel.vue

* Update DatasetChartDetail.vue

* Update DatasetGroupSelector.vue

* Update DatasetGroupSelectorTree.vue

* Update CalcFieldEdit.vue

* Update FieldEdit.vue

* Update TabDataPreview.vue

* Update UnionView.vue

* Update UpdateInfo.vue

* Update Group.vue

* Update all.vue

* Update readed.vue

* Update unread.vue

* Update index.vue

* Update index.vue

* Update index.vue

* Update PanelBackgroundColorSelector.vue

* Update PanelColorSelector.vue

* Update ViewAttribute.vue

* Update SubjectTemplateItem.vue

* Update multiplexing.vue

* Update filterDialog.vue

* Update PanelList.vue

* Update PanelMain.vue

* Update PanelDetailInfo.vue

* Update MapSettingLeft.vue

* Update index.vue

* Update DatasetTaskList.vue

* Update TaskRecord.vue

* Update dataset.vue

* Update personPwd.vue

* Update privateForm.vue

Co-authored-by: 王嘉豪 <42510293+ziyujiahao@users.noreply.github.com>
---
 .../canvas/components/Editor/DateFormat.vue   |  2 +-
 .../canvas/components/Editor/FrameLinks.vue   |  2 +-
 .../canvas/components/Editor/Hyperlinks.vue   |  2 +-
 .../components/Editor/HyperlinksDialog.vue    |  2 +-
 .../canvas/components/Editor/LinkageField.vue |  2 +-
 .../components/Editor/StreamMediaLinks.vue    |  2 +-
 .../canvas/components/Editor/VideoLinks.vue   |  2 +-
 .../canvas/custom-component/UserView.vue      |  2 +-
 .../src/components/dataease/DeContainer.vue   |  2 +-
 .../widget/DeWidget/DeNumberRange.vue         |  2 +-
 .../widget/DeWidget/DeSelectGrid.vue          |  2 +-
 frontend/src/styles/index.scss                |  2 +-
 frontend/src/views/background/index.vue       | 10 +++---
 .../chart/components/ChartComponentS2.vue     |  6 ++--
 .../chart/components/compare/CompareEdit.vue  |  6 ++--
 .../BackgroundColorSelector.vue               |  4 +--
 .../component-style/LegendSelector.vue        |  4 +--
 .../component-style/LegendSelectorAntV.vue    |  4 +--
 .../component-style/SplitSelector.vue         |  4 +--
 .../component-style/SplitSelectorAntV.vue     |  4 +--
 .../component-style/TitleSelector.vue         |  4 +--
 .../component-style/TitleSelectorAntV.vue     | 10 +++---
 .../component-style/XAxisSelector.vue         |  4 +--
 .../component-style/XAxisSelectorAntV.vue     |  4 +--
 .../component-style/YAxisExtSelector.vue      |  4 +--
 .../component-style/YAxisExtSelectorAntV.vue  |  4 +--
 .../component-style/YAxisSelector.vue         |  4 +--
 .../component-style/YAxisSelectorAntV.vue     |  4 +--
 .../filter/DimensionFilterEditor.vue          |  4 +--
 .../components/filter/QuotaFilterEditor.vue   |  4 +--
 .../components/filter/ResultFilterEditor.vue  |  4 +--
 .../chart/components/normal/LabelNormal.vue   |  2 +-
 .../components/normal/LabelNormalText.vue     |  2 +-
 .../chart/components/senior/AssistLine.vue    | 12 +++----
 .../chart/components/senior/FunctionCfg.vue   |  4 +--
 .../chart/components/senior/ScrollCfg.vue     |  6 ++--
 .../chart/components/senior/Threshold.vue     | 12 +++----
 .../senior/dialog/AssistLineEdit.vue          |  4 +--
 .../senior/dialog/TableThresholdEdit.vue      |  4 +--
 .../senior/dialog/TextThresholdEdit.vue       |  4 +--
 .../components/shape-attr/ColorSelector.vue   |  8 ++---
 .../shape-attr/ColorSelectorExt.vue           |  8 ++---
 .../components/shape-attr/LabelSelector.vue   |  4 +--
 .../shape-attr/LabelSelectorAntV.vue          |  4 +--
 .../components/shape-attr/SizeSelector.vue    |  6 ++--
 .../shape-attr/SizeSelectorAntV.vue           |  6 ++--
 .../components/shape-attr/TooltipSelector.vue |  4 +--
 .../shape-attr/TooltipSelectorAntV.vue        |  4 +--
 .../chart/components/shape-attr/TotalCfg.vue  |  6 ++--
 .../chart/components/table/TableNormal.vue    | 10 +++---
 .../value-formatter/ValueFormatterEdit.vue    |  6 ++--
 frontend/src/views/chart/group/Group.vue      | 14 ++++----
 .../views/chart/view/CalcChartFieldEdit.vue   | 10 +++---
 frontend/src/views/chart/view/ChartEdit.vue   | 34 +++++++++----------
 .../src/views/chart/view/ChartFieldEdit.vue   | 16 ++++-----
 frontend/src/views/chart/view/ChartStyle.vue  | 26 +++++++-------
 frontend/src/views/chart/view/DrillPath.vue   |  2 +-
 frontend/src/views/dataset/add/AddCustom.vue  |  4 +--
 frontend/src/views/dataset/add/AddExcel.vue   |  6 ++--
 frontend/src/views/dataset/add/AddSQL.vue     |  6 ++--
 frontend/src/views/dataset/add/AddUnion.vue   | 10 +++---
 .../src/views/dataset/add/union/NodeItem.vue  |  2 +-
 .../src/views/dataset/add/union/UnionNode.vue |  2 +-
 .../dataset/common/DatasetChartDetail.vue     |  2 +-
 .../dataset/common/DatasetGroupSelector.vue   |  2 +-
 .../common/DatasetGroupSelectorTree.vue       |  2 +-
 .../src/views/dataset/data/CalcFieldEdit.vue  | 10 +++---
 frontend/src/views/dataset/data/FieldEdit.vue | 16 ++++-----
 .../src/views/dataset/data/TabDataPreview.vue |  6 ++--
 frontend/src/views/dataset/data/UnionView.vue |  6 ++--
 .../src/views/dataset/data/UpdateInfo.vue     |  8 ++---
 frontend/src/views/dataset/group/Group.vue    |  4 +--
 frontend/src/views/msg/all.vue                |  4 +--
 frontend/src/views/msg/readed.vue             |  4 +--
 frontend/src/views/msg/unread.vue             |  4 +--
 .../src/views/panel/GrantAuth/dept/index.vue  |  8 ++---
 .../src/views/panel/GrantAuth/role/index.vue  |  8 ++---
 .../src/views/panel/GrantAuth/shareTree.vue   |  2 +-
 .../src/views/panel/GrantAuth/user/index.vue  |  8 ++---
 .../src/views/panel/LinkJumpSet/index.vue     | 10 +++---
 .../src/views/panel/OuterParamsSet/index.vue  |  8 ++---
 .../PanelStyle/ComponentGap.vue               | 10 +++---
 .../PanelStyle/PanelAidedDesign.vue           | 10 +++---
 .../PanelBackgroundColorSelector.vue          | 10 +++---
 .../PanelStyle/PanelColorSelector.vue         |  8 ++---
 .../PanelStyle/ViewAttribute.vue              |  2 +-
 .../SubjectSetting/PanelStyle/ViewResult.vue  | 14 ++++----
 .../PreSubjectHistory/SubjectTemplateItem.vue |  2 +-
 .../views/panel/ViewSelect/multiplexing.vue   |  6 ++--
 frontend/src/views/panel/edit/index.vue       |  2 +-
 .../src/views/panel/filter/filterDialog.vue   |  2 +-
 .../src/views/panel/list/EditPanel/index.vue  |  6 ++--
 frontend/src/views/panel/list/PanelList.vue   |  4 +--
 frontend/src/views/panel/list/PanelMain.vue   | 17 ++--------
 .../src/views/panel/list/SaveToTemplate.vue   |  6 ++--
 .../panel/list/common/PanelDetailInfo.vue     |  2 +-
 .../template/component/TemplateImport.vue     |  6 ++--
 .../SysParam/MapSetting/MapSettingLeft.vue    |  4 +--
 frontend/src/views/system/about/index.vue     | 10 +++---
 .../views/system/datasource/ApiVariable.vue   |  2 +-
 .../views/system/datasource/DriverForm.vue    | 10 +++---
 .../src/views/system/datasource/DsForm.vue    | 10 +++---
 .../src/views/system/datasource/DsTree.vue    | 10 +++---
 frontend/src/views/system/menu/index.vue      |  2 +-
 .../src/views/system/task/DatasetTaskList.vue |  8 ++---
 frontend/src/views/system/task/TaskRecord.vue |  6 ++--
 frontend/src/views/system/task/dataset.vue    |  4 +--
 frontend/src/views/system/user/personPwd.vue  |  2 +-
 .../src/views/system/user/privateForm.vue     |  2 +-
 109 files changed, 321 insertions(+), 332 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/DateFormat.vue b/frontend/src/components/canvas/components/Editor/DateFormat.vue
index 3c5b9642f8..d141b2eb27 100644
--- a/frontend/src/components/canvas/components/Editor/DateFormat.vue
+++ b/frontend/src/components/canvas/components/Editor/DateFormat.vue
@@ -198,7 +198,7 @@ export default {
     height: 35px;
     border-radius: 3px;
   }
-  >>>.el-popover{
+  ::v-deep .el-popover{
     height: 200px;
     overflow: auto;
   }
diff --git a/frontend/src/components/canvas/components/Editor/FrameLinks.vue b/frontend/src/components/canvas/components/Editor/FrameLinks.vue
index 390fbc773e..7893a1ba3e 100644
--- a/frontend/src/components/canvas/components/Editor/FrameLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/FrameLinks.vue
@@ -137,7 +137,7 @@ export default {
     height: 35px;
     border-radius: 3px;
   }
-  >>>.el-popover{
+  ::v-deep .el-popover{
     height: 200px;
     overflow: auto;
   }
diff --git a/frontend/src/components/canvas/components/Editor/Hyperlinks.vue b/frontend/src/components/canvas/components/Editor/Hyperlinks.vue
index f354ba2add..20f73f61da 100644
--- a/frontend/src/components/canvas/components/Editor/Hyperlinks.vue
+++ b/frontend/src/components/canvas/components/Editor/Hyperlinks.vue
@@ -115,7 +115,7 @@ export default {
     height: 35px;
     border-radius: 3px;
   }
-  >>>.el-popover{
+  ::v-deep .el-popover{
     height: 200px;
     overflow: auto;
   }
diff --git a/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue b/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
index 92de293ebe..13e97f8cf2 100644
--- a/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
+++ b/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
@@ -102,7 +102,7 @@ export default {
     height: 35px;
     border-radius: 3px;
   }
-  >>>.el-popover{
+  ::v-deep .el-popover{
     height: 200px;
     overflow: auto;
   }
diff --git a/frontend/src/components/canvas/components/Editor/LinkageField.vue b/frontend/src/components/canvas/components/Editor/LinkageField.vue
index 843475f2f3..6e5bb19ebb 100644
--- a/frontend/src/components/canvas/components/Editor/LinkageField.vue
+++ b/frontend/src/components/canvas/components/Editor/LinkageField.vue
@@ -196,7 +196,7 @@ export default {
     height: 35px;
     border-radius: 3px;
   }
-  >>>.el-popover{
+  ::v-deep .el-popover{
     height: 200px;
     overflow: auto;
   }
diff --git a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
index 82eb3526f8..f2b9061162 100644
--- a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
@@ -166,7 +166,7 @@ export default {
     border-radius: 3px;
   }
 
-  >>> .el-popover {
+  ::v-deep .el-popover {
     height: 200px;
     overflow: auto;
   }
diff --git a/frontend/src/components/canvas/components/Editor/VideoLinks.vue b/frontend/src/components/canvas/components/Editor/VideoLinks.vue
index 7620a293e6..c23b40eb5c 100644
--- a/frontend/src/components/canvas/components/Editor/VideoLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/VideoLinks.vue
@@ -154,7 +154,7 @@ export default {
     height: 35px;
     border-radius: 3px;
   }
-  >>>.el-popover{
+  ::v-deep .el-popover{
     height: 200px;
     overflow: auto;
   }
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index f757ade7c5..e22043f639 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -951,7 +951,7 @@ export default {
 
   }
 
-  .active > > > .icon-fangda {
+  .active ::v-deep .icon-fangda {
     z-index: 2;
     display: block !important;
   }
diff --git a/frontend/src/components/dataease/DeContainer.vue b/frontend/src/components/dataease/DeContainer.vue
index 9a4757eee2..730e53ce0b 100644
--- a/frontend/src/components/dataease/DeContainer.vue
+++ b/frontend/src/components/dataease/DeContainer.vue
@@ -14,7 +14,7 @@ export default {
 
 <style scoped>
 
-  .ms-container >>> span.title {
+  .ms-container ::v-deep span.title {
     font-size: 16px;
     font-weight: 500;
     margin-top: 0;
diff --git a/frontend/src/components/widget/DeWidget/DeNumberRange.vue b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
index 9e2dbb17e8..00774301b3 100644
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@@ -266,7 +266,7 @@ export default {
 .de-number-range-container {
   display: inline;
   max-height: 40px;
-  >>>div.el-form-item {
+  ::v-deep div.el-form-item {
     width: calc(50% - 10px) !important;
     display: inline-block;
     padding: 0 5px;
diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index af26d5ff20..8eff4f5b00 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -339,7 +339,7 @@ export default {
 
 <style lang="scss" scoped>
   .de-select-grid-search {
-    >>>input {
+    ::v-deep input {
       border-radius: 0px;
 
     }
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index e1f2fb562e..b4741d71da 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -680,7 +680,7 @@ div:focus {
   background-color: rgb(135 131 131 / 70%);
 }
 
-.blackTheme>>> ::-webkit-scrollbar-thumb {
+.blackTheme ::v-deep ::-webkit-scrollbar-thumb {
   background: #38393a !important;
 }
 
diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue
index df0ed3d101..c16c4cde9c 100644
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@@ -239,16 +239,16 @@ export default {
     margin: 15px 0px 5px;
     text-align: center;
   }
-  .avatar-uploader>>>.el-upload {
+  .avatar-uploader ::v-deep .el-upload {
     width: 120px;
     height: 80px;
     line-height: 90px;
   }
-  .avatar-uploader>>>.el-upload-list li{
+  .avatar-uploader ::v-deep .el-upload-list li{
     width: 120px !important;
     height: 80px !important;
   }
-  .disabled>>>.el-upload--picture-card {
+  .disabled ::v-deep .el-upload--picture-card {
     display: none;
   }
   .shape-item{
@@ -259,11 +259,11 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
-  .form-item-slider>>>.el-form-item__label{
+  .form-item-slider ::v-deep .el-form-item__label{
     font-size: 12px;
     line-height: 38px;
   }
-  .form-item>>>.el-form-item__label{
+  .form-item ::v-deep .el-form-item__label{
     font-size: 12px;
   }
   .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 23754d748e..951bc65cc1 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -447,13 +447,13 @@ export default {
   color: #606266;
   white-space:nowrap;
 }
-.page-style >>> .el-input__inner{
+.page-style ::v-deep .el-input__inner{
   height: 24px;
 }
-.page-style >>> button{
+.page-style ::v-deep button{
   background: transparent!important;
 }
-.page-style >>> li{
+.page-style ::v-deep li{
   background: transparent!important;
 }
 </style>
diff --git a/frontend/src/views/chart/components/compare/CompareEdit.vue b/frontend/src/views/chart/components/compare/CompareEdit.vue
index 0d9f1dfa7c..325f1fc1e5 100644
--- a/frontend/src/views/chart/components/compare/CompareEdit.vue
+++ b/frontend/src/views/chart/components/compare/CompareEdit.vue
@@ -108,15 +108,15 @@ export default {
 .el-form-item{
   margin-bottom: 10px!important;
 }
-.compare-form >>> .el-form-item__label{
+.compare-form ::v-deep .el-form-item__label{
   font-size: 12px!important;
   font-weight: 400!important;
 }
-.compare-form >>> .el-radio__label{
+.compare-form ::v-deep .el-radio__label{
   font-size: 12px!important;
   font-weight: 400!important;
 }
-.el-select-dropdown__item >>> span{
+.el-select-dropdown__item ::v-deep span{
   font-size: 12px!important;
 }
 .exp-style{
diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index d51a1ed91c..71b877d43a 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -79,11 +79,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index 924acb2d48..9a4d404e00 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -147,11 +147,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
index 642f42c542..ebdd1d9659 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
@@ -145,11 +145,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/SplitSelector.vue b/frontend/src/views/chart/components/component-style/SplitSelector.vue
index 446eb5a783..97ebbde9ad 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelector.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelector.vue
@@ -138,11 +138,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
index 48abc9b835..b522fddab8 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
@@ -115,11 +115,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index e7aef998dd..4f815ff82e 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -181,11 +181,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
index 4782f80922..9721a4ff36 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@@ -227,11 +227,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
@@ -254,15 +254,15 @@ span{
   z-index: 1003;
 }
 
-.dialog-css >>> .el-dialog__title {
+.dialog-css ::v-deep .el-dialog__title {
   font-size: 14px;
 }
 
-.dialog-css >>> .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 20px 20px 0;
 }
 
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 20px;
 }
 </style>
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index e491044c8c..34994eca40 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -243,11 +243,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
index 735b05c1e1..ca8088bc7e 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
@@ -240,11 +240,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
index ecfb2e951a..c4ece73047 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
@@ -246,11 +246,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
index b02a5f86a1..a8e2ff1fa3 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
@@ -242,11 +242,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index bee85fb6c0..90215ca196 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -243,11 +243,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
index 74d3334b0b..d082c0a8ad 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
@@ -239,11 +239,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/filter/DimensionFilterEditor.vue b/frontend/src/views/chart/components/filter/DimensionFilterEditor.vue
index cb409fbe72..305568457a 100644
--- a/frontend/src/views/chart/components/filter/DimensionFilterEditor.vue
+++ b/frontend/src/views/chart/components/filter/DimensionFilterEditor.vue
@@ -116,7 +116,7 @@ export default {
   align-items: center;
 }
 
-.form-item >>> .el-form-item__label {
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
@@ -124,7 +124,7 @@ span {
   font-size: 12px;
 }
 
-.value-item >>> .el-input {
+.value-item ::v-deep .el-input {
   position: relative;
   display: inline-block;
   width: 80px !important;
diff --git a/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue b/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
index 39c1a7f984..c5714a4c6a 100644
--- a/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
+++ b/frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
@@ -129,14 +129,14 @@ export default {
   justify-content: left;
   align-items: center;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
   span{
     font-size: 12px;
   }
 
-  .value-item>>>.el-input{
+  .value-item ::v-deep .el-input{
     position: relative;
     display: inline-block;
     width: 80px!important;
diff --git a/frontend/src/views/chart/components/filter/ResultFilterEditor.vue b/frontend/src/views/chart/components/filter/ResultFilterEditor.vue
index 39ace163e8..3f5912c5c4 100644
--- a/frontend/src/views/chart/components/filter/ResultFilterEditor.vue
+++ b/frontend/src/views/chart/components/filter/ResultFilterEditor.vue
@@ -287,14 +287,14 @@ export default {
     justify-content: left;
     align-items: center;
   }
-  .form-item>>>.el-form-item__label{
+  .form-item ::v-deep .el-form-item__label{
     font-size: 12px;
   }
   span{
     font-size: 12px;
   }
 
-  .value-item>>>.el-input{
+  .value-item ::v-deep .el-input{
     position: relative;
     display: inline-block;
     width: 80px!important;
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index e12dd21c57..1468ab3626 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -282,7 +282,7 @@ export default {
 </script>
 
 <style scoped>
-.table-class>>>.body--wrapper{
+.table-class ::v-deep .body--wrapper{
   background: rgba(1,1,1,0);
 }
 </style>
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index 12b6f485a7..e2332e7e12 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -282,7 +282,7 @@ export default {
 </script>
 
 <style scoped>
-.table-class>>>.body--wrapper{
+.table-class ::v-deep .body--wrapper{
   background: rgba(1,1,1,0);
 }
 </style>
diff --git a/frontend/src/views/chart/components/senior/AssistLine.vue b/frontend/src/views/chart/components/senior/AssistLine.vue
index 4ec45b1181..da7b7fdcfd 100644
--- a/frontend/src/views/chart/components/senior/AssistLine.vue
+++ b/frontend/src/views/chart/components/senior/AssistLine.vue
@@ -148,11 +148,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
@@ -178,7 +178,7 @@ span{
 .line-style{
 
 }
-.line-style >>> span{
+.line-style ::v-deep span{
   display: inline-block;
   width: 100%;
   white-space: nowrap;
@@ -187,15 +187,15 @@ span{
   padding: 0 10px;
 }
 
-.dialog-css >>> .el-dialog__title {
+.dialog-css ::v-deep .el-dialog__title {
   font-size: 14px;
 }
 
-.dialog-css >>> .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 20px 20px 0;
 }
 
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 20px;
 }
 </style>
diff --git a/frontend/src/views/chart/components/senior/FunctionCfg.vue b/frontend/src/views/chart/components/senior/FunctionCfg.vue
index d99773d66d..1ed5249cf0 100644
--- a/frontend/src/views/chart/components/senior/FunctionCfg.vue
+++ b/frontend/src/views/chart/components/senior/FunctionCfg.vue
@@ -72,11 +72,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/senior/ScrollCfg.vue b/frontend/src/views/chart/components/senior/ScrollCfg.vue
index ed657474c0..0e8edfb333 100644
--- a/frontend/src/views/chart/components/senior/ScrollCfg.vue
+++ b/frontend/src/views/chart/components/senior/ScrollCfg.vue
@@ -83,11 +83,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
@@ -110,7 +110,7 @@ span{
   z-index: 1003;
 }
 
-.scroll-style >>> .el-input-number--mini {
+.scroll-style ::v-deep .el-input-number--mini {
   width: 120px !important;
 }
 </style>
diff --git a/frontend/src/views/chart/components/senior/Threshold.vue b/frontend/src/views/chart/components/senior/Threshold.vue
index 267906fb85..dae3a65bb4 100644
--- a/frontend/src/views/chart/components/senior/Threshold.vue
+++ b/frontend/src/views/chart/components/senior/Threshold.vue
@@ -349,11 +349,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
@@ -376,7 +376,7 @@ span{
   z-index: 1003;
 }
 
-.line-style >>> span{
+.line-style ::v-deep span{
   display: inline-block;
   width: 100%;
   white-space: nowrap;
@@ -385,15 +385,15 @@ span{
   margin: 0 10px;
 }
 
-.dialog-css >>> .el-dialog__title {
+.dialog-css ::v-deep .el-dialog__title {
   font-size: 14px;
 }
 
-.dialog-css >>> .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 20px 20px 0;
 }
 
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 20px;
 }
 
diff --git a/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue b/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
index f249d3b5d3..489cd0ae27 100644
--- a/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
@@ -108,7 +108,7 @@ export default {
   align-items: center;
 }
 
-.form-item >>> .el-form-item__label {
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
@@ -141,7 +141,7 @@ span {
   margin-top: 6px;
 }
 
-.color-picker-style >>> .el-color-picker__trigger{
+.color-picker-style ::v-deep .el-color-picker__trigger{
   width: 28px;
   height: 28px;
 }
diff --git a/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue b/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
index 5bd2d2f710..82df8aa7f8 100644
--- a/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
@@ -339,7 +339,7 @@ export default {
   align-items: center;
 }
 
-.form-item >>> .el-form-item__label {
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
@@ -370,7 +370,7 @@ span {
   height: 28px;
 }
 
-.color-picker-style >>> .el-color-picker__trigger {
+.color-picker-style ::v-deep .el-color-picker__trigger {
   width: 28px;
   height: 28px;
 }
diff --git a/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue b/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
index 14299174ba..725d2182d2 100644
--- a/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
@@ -123,7 +123,7 @@ export default {
   align-items: center;
 }
 
-.form-item >>> .el-form-item__label {
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
@@ -156,7 +156,7 @@ span {
   margin-top: 6px;
 }
 
-.color-picker-style >>> .el-color-picker__trigger{
+.color-picker-style ::v-deep .el-color-picker__trigger{
   width: 28px;
   height: 28px;
 }
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index c79b2dcad9..685d93b27b 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -353,11 +353,11 @@ export default {
   justify-content: space-between;
   align-items: center
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
@@ -378,14 +378,14 @@ export default {
     width: 60px;
   }
 
-  .color-type>>>.el-radio__input{
+  .color-type ::v-deep .el-radio__input{
     display: none;
   }
   .el-radio{
     margin:0 2px 0 0!important;
     border: 1px solid transparent;
   }
-  .el-radio>>>.el-radio__label{
+  .el-radio ::v-deep .el-radio__label{
     padding-left: 0;
   }
 
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue b/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue
index 6e7c8b8bd4..24bf2fdd3e 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue
@@ -332,12 +332,12 @@ export default {
   align-items: center
 }
 
-.form-item-slider >>> .el-form-item__label {
+.form-item-slider ::v-deep .el-form-item__label {
   font-size: 12px;
   line-height: 38px;
 }
 
-.form-item >>> .el-form-item__label {
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
@@ -363,7 +363,7 @@ span {
   width: 60px;
 }
 
-.color-type >>> .el-radio__input {
+.color-type ::v-deep .el-radio__input {
   display: none;
 }
 
@@ -372,7 +372,7 @@ span {
   border: 1px solid transparent;
 }
 
-.el-radio >>> .el-radio__label {
+.el-radio ::v-deep .el-radio__label {
   padding-left: 0;
 }
 
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index af723a46e6..7883e7606b 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -194,11 +194,11 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
index 605e6aef24..94b983aea1 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
@@ -200,11 +200,11 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider::v-deep.el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item::v-deep.el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 80321a76bd..a07464f863 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -438,11 +438,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
@@ -456,7 +456,7 @@ export default {
 .el-divider--horizontal {
   margin: 10px 0
 }
-.divider-style>>>.el-divider__text{
+.divider-style ::v-deep .el-divider__text{
   color: #606266;
   font-size: 12px;
   font-weight: 400;
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index cc20bae49c..b7f5aeadfe 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -618,12 +618,12 @@ export default {
     align-items: center;
   }
 
-  .form-item-slider >>> .el-form-item__label {
+  .form-item-slider ::v-deep .el-form-item__label {
     font-size: 12px;
     line-height: 38px;
   }
 
-  .form-item >>> .el-form-item__label {
+  .form-item ::v-deep .el-form-item__label {
     font-size: 12px;
   }
 
@@ -643,7 +643,7 @@ export default {
     margin: 10px 0
   }
 
-  .divider-style >>> .el-divider__text {
+  .divider-style ::v-deep .el-divider__text {
     color: #606266;
     font-size: 12px;
     font-weight: 400;
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index be088de7c7..69ab214b83 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -142,11 +142,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
index ef786f90b9..d5085ef5af 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
@@ -114,11 +114,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
diff --git a/frontend/src/views/chart/components/shape-attr/TotalCfg.vue b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
index 93c12148fb..774111cc97 100644
--- a/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
+++ b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
@@ -166,11 +166,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
@@ -184,7 +184,7 @@ span{font-size: 12px}
 .el-divider--horizontal {
   margin: 10px 0
 }
-.divider-style>>>.el-divider__text{
+.divider-style ::v-deep .el-divider__text{
   color: #606266;
   font-size: 12px;
   font-weight: 400;
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 2f10327909..43c161e6d7 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -411,10 +411,10 @@ export default {
 </script>
 
 <style scoped>
-  .table-class>>>.body--wrapper{
+  .table-class ::v-deep .body--wrapper{
     background: rgba(1,1,1,0);
   }
-  .table-class>>>.elx-cell{
+  .table-class ::v-deep .elx-cell{
     max-height: none!important;
     line-height: normal!important;
   }
@@ -436,13 +436,13 @@ export default {
     color: #606266;
     white-space:nowrap;
   }
-  .page-style >>> .el-input__inner{
+  .page-style ::v-deep .el-input__inner{
     height: 24px;
   }
-  .page-style >>> button{
+  .page-style ::v-deep button{
     background: transparent!important;
   }
-  .page-style >>> li{
+  .page-style ::v-deep li{
     background: transparent!important;
   }
 </style>
diff --git a/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue b/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue
index ecc75a39c9..77b650e2eb 100644
--- a/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue
+++ b/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue
@@ -77,15 +77,15 @@ export default {
 .el-form-item{
   margin-bottom: 10px!important;
 }
-.formatter-form >>> .el-form-item__label{
+.formatter-form ::v-deep .el-form-item__label{
   font-size: 12px!important;
   font-weight: 400!important;
 }
-.formatter-form >>> .el-radio__label{
+.formatter-form ::v-deep .el-radio__label{
   font-size: 12px!important;
   font-weight: 400!important;
 }
-.el-select-dropdown__item >>> span{
+.el-select-dropdown__item ::v-deep span{
   font-size: 12px!important;
 }
 .exp-style{
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index e9ef18a481..103909acae 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -1058,7 +1058,7 @@ export default {
     padding: 0 8px;
   }
 
-  .tree-list >>> .el-tree-node__expand-icon.is-leaf {
+  .tree-list ::v-deep .el-tree-node__expand-icon.is-leaf {
     display: none;
   }
 
@@ -1082,15 +1082,15 @@ export default {
     line-height: 26px;
   }
 
-  .dialog-css >>> .el-dialog__header {
+  .dialog-css ::v-deep .el-dialog__header {
     padding: 20px 20px 0;
   }
 
-  .dialog-css >>> .el-dialog__body {
+  .dialog-css ::v-deep .el-dialog__body {
     padding: 10px 20px 20px;
   }
 
-  .form-item >>> .el-form-item__label {
+  .form-item ::v-deep .el-form-item__label {
     font-size: 12px;
   }
 
@@ -1132,16 +1132,16 @@ export default {
     line-height: 28px !important;
   }
 
-  .render-select >>> .el-input__suffix {
+  .render-select ::v-deep .el-input__suffix {
     width: 20px;
   }
 
-  .render-select >>> .el-input__inner {
+  .render-select ::v-deep .el-input__inner {
     padding-right: 10px;
     padding-left: 6px;
   }
 
-  .dialog-css >>> .el-step__title {
+  .dialog-css ::v-deep .el-step__title {
     font-weight: 400;
     font-size: 12px;
   }
diff --git a/frontend/src/views/chart/view/CalcChartFieldEdit.vue b/frontend/src/views/chart/view/CalcChartFieldEdit.vue
index ce6e3a49fb..7bd7604af3 100644
--- a/frontend/src/views/chart/view/CalcChartFieldEdit.vue
+++ b/frontend/src/views/chart/view/CalcChartFieldEdit.vue
@@ -488,15 +488,15 @@ export default {
 </script>
 
 <style scoped>
-.row-style >>> .el-form-item__label {
+.row-style ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
-.row-style >>> .el-form-item--mini.el-form-item {
+.row-style ::v-deep .el-form-item--mini.el-form-item {
   margin-bottom: 10px;
 }
 
-.row-style >>> .el-form-item__content {
+.row-style ::v-deep .el-form-item__content {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -508,7 +508,7 @@ export default {
   font-size: 12px;
 }
 
-.codemirror >>> .CodeMirror-scroll {
+.codemirror ::v-deep .CodeMirror-scroll {
   height: 300px;
   overflow-y: auto;
   font-size: 12px;
@@ -644,7 +644,7 @@ span {
   margin-top: 4px;
 }
 
-.function-pop >>> .el-popover {
+.function-pop ::v-deep .el-popover {
   padding: 6px !important;
 }
 
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 885a6758a1..ba32918aa9 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -2866,29 +2866,29 @@ span {
   font-size: 12px;
 }
 
-.tab-header > > > .el-tabs__header {
+.tab-header ::v-deep .el-tabs__header {
   border-top: solid 1px #eee;
   border-right: solid 1px #eee;
 }
 
-.tab-header > > > .el-tabs__item {
+.tab-header ::v-deep .el-tabs__item {
   font-size: 12px;
   padding: 0 20px !important;
 }
 
-.blackTheme .tab-header > > > .el-tabs__item {
+.blackTheme .tab-header ::v-deep .el-tabs__item {
   background-color: var(--MainBG);
 }
 
-.tab-header > > > .el-tabs__nav-scroll {
+.tab-header ::v-deep .el-tabs__nav-scroll {
   padding-left: 0 !important;
 }
 
-.tab-header > > > .el-tabs__header {
+.tab-header ::v-deep .el-tabs__header {
   margin: 0 !important;
 }
 
-.tab-header > > > .el-tabs__content {
+.tab-header ::v-deep .el-tabs__content {
   height: calc(100% - 40px);
 }
 
@@ -2907,7 +2907,7 @@ span {
   margin: 5px;
 }
 
-.el-radio > > > .el-radio__label {
+.el-radio ::v-deep .el-radio__label {
   padding-left: 0;
 }
 
@@ -2948,15 +2948,15 @@ span {
   height: calc(100% - 20px);
 }
 
-.dialog-css > > > .el-dialog__title {
+.dialog-css ::v-deep .el-dialog__title {
   font-size: 14px;
 }
 
-.dialog-css > > > .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 20px 20px 0;
 }
 
-.dialog-css > > > .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 20px;
 }
 
@@ -3000,7 +3000,7 @@ span {
 }
 
 .tree-select-span {
-  > > > div.vue-treeselect__control {
+  ::v-deep div.vue-treeselect__control {
     height: 32px !important;
     font-weight: normal !important;
   }
@@ -3066,11 +3066,11 @@ span {
   width: 50px;
 }
 
-.result-count > > > input {
+.result-count ::v-deep input {
   padding: 0 4px;
 }
 
-.radio-span > > > .el-radio__label {
+.radio-span ::v-deep .el-radio__label {
   margin-left: 4px;
 }
 
@@ -3110,11 +3110,11 @@ span {
   height: 100%;
 }
 
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider::v-deep.el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item::v-deep.el-form-item__label{
   font-size: 12px;
 }
 
@@ -3146,11 +3146,11 @@ span {
   height: calc(100% - 40px);
 }
 
-.field-split >>> .fu-split-pane__left{
+.field-split ::v-deep .fu-split-pane__left{
   padding-right: 0!important;
 }
 
-.field-split >>> .fu-split-pane__right{
+.field-split ::v-deep .fu-split-pane__right{
   padding-left: 0!important;
 }
 
diff --git a/frontend/src/views/chart/view/ChartFieldEdit.vue b/frontend/src/views/chart/view/ChartFieldEdit.vue
index 5724687d2a..c8f8fed098 100644
--- a/frontend/src/views/chart/view/ChartFieldEdit.vue
+++ b/frontend/src/views/chart/view/ChartFieldEdit.vue
@@ -522,11 +522,11 @@ span {
   font-size: 12px !important;
 }
 
-.el-select >>> input {
+.el-select ::v-deep input {
   padding-right: 10px;
 }
 
-.el-select >>> .el-input__suffix {
+.el-select ::v-deep .el-input__suffix {
   right: 0;
 }
 
@@ -534,13 +534,13 @@ span {
   margin-right: 10px !important;
 }
 
-.style-collapse >>> .el-collapse-item__header {
+.style-collapse ::v-deep .el-collapse-item__header {
   height: 40px;
   line-height: 40px;
   padding: 0 0 0 10px;
 }
 
-.style-collapse >>> .el-collapse-item__wrap {
+.style-collapse ::v-deep .el-collapse-item__wrap {
   border-bottom: 0 solid #e6ebf5 !important;
 }
 
@@ -552,19 +552,19 @@ span {
   margin-bottom: 6px;
 }
 
-.dialog-css >>> .el-dialog__title {
+.dialog-css ::v-deep .el-dialog__title {
   font-size: 14px;
 }
 
-.dialog-css >>> .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 20px 20px 0;
 }
 
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 20px;
 }
 
-.dialog-css >>> .el-dialog {
+.dialog-css ::v-deep .el-dialog {
   width: 800px !important;
 }
 
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index c21c820781..e93750a96e 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -471,29 +471,29 @@ export default {
     font-size: 12px;
   }
 
-  .tab-header > > > .el-tabs__header {
+  .tab-header ::v-deep .el-tabs__header {
     border-top: solid 1px #eee;
     border-right: solid 1px #eee;
   }
 
-  .tab-header > > > .el-tabs__item {
+  .tab-header ::v-deep .el-tabs__item {
     font-size: 12px;
     padding: 0 20px !important;
   }
 
-  .blackTheme .tab-header > > > .el-tabs__item {
+  .blackTheme .tab-header ::v-deep .el-tabs__item {
     background-color: var(--MainBG);
   }
 
-  .tab-header > > > .el-tabs__nav-scroll {
+  .tab-header ::v-deep .el-tabs__nav-scroll {
     padding-left: 0 !important;
   }
 
-  .tab-header > > > .el-tabs__header {
+  .tab-header ::v-deep .el-tabs__header {
     margin: 0 !important;
   }
 
-  .tab-header > > > .el-tabs__content {
+  .tab-header ::v-deep .el-tabs__content {
     height: calc(100% - 40px);
   }
 
@@ -506,7 +506,7 @@ export default {
     margin: 5px;
   }
 
-  .el-radio > > > .el-radio__label {
+  .el-radio ::v-deep .el-radio__label {
     padding-left: 0;
   }
 
@@ -533,15 +533,15 @@ export default {
     background-color: var(--MainBG)
   }
 
-  .dialog-css > > > .el-dialog__title {
+  .dialog-css ::v-deep .el-dialog__title {
     font-size: 14px;
   }
 
-  .dialog-css > > > .el-dialog__header {
+  .dialog-css ::v-deep .el-dialog__header {
     padding: 20px 20px 0;
   }
 
-  .dialog-css > > > .el-dialog__body {
+  .dialog-css ::v-deep .el-dialog__body {
     padding: 10px 20px 20px;
   }
 
@@ -567,7 +567,7 @@ export default {
     color: #cccccc;
   }
 
-  .radio-span > > > .el-radio__label {
+  .radio-span ::v-deep .el-radio__label {
     margin-left: 4px;
   }
 
@@ -607,11 +607,11 @@ export default {
     height: 100%;
   }
 
-  .form-item-slider>>>.el-form-item__label{
+  .form-item-slider ::v-deep .el-form-item__label{
     font-size: 12px;
     line-height: 38px;
   }
-  .form-item>>>.el-form-item__label{
+  .form-item ::v-deep .el-form-item__label{
     font-size: 12px;
   }
   </style>
diff --git a/frontend/src/views/chart/view/DrillPath.vue b/frontend/src/views/chart/view/DrillPath.vue
index 868ddf9b35..e1f8a70ba6 100644
--- a/frontend/src/views/chart/view/DrillPath.vue
+++ b/frontend/src/views/chart/view/DrillPath.vue
@@ -38,7 +38,7 @@ export default {
 .drill-style {
   font-size: 12px;
 }
-.drill-style >>> .el-breadcrumb__separator{
+.drill-style ::v-deep .el-breadcrumb__separator{
   margin: 0!important;
 }
 .drill-item{
diff --git a/frontend/src/views/dataset/add/AddCustom.vue b/frontend/src/views/dataset/add/AddCustom.vue
index 126f35dfab..44eafb981e 100644
--- a/frontend/src/views/dataset/add/AddCustom.vue
+++ b/frontend/src/views/dataset/add/AddCustom.vue
@@ -270,11 +270,11 @@ export default {
     margin-left: 0;
   }
 
-  .dataPreview>>>.el-card__header{
+  .dataPreview ::v-deep .el-card__header{
     padding: 0 8px 12px;
   }
 
-  .dataPreview>>>.el-card__body{
+  .dataPreview ::v-deep .el-card__body{
     padding:10px;
   }
 
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index 1680ecf276..859d2f575d 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -456,15 +456,15 @@ export default {
     font-size: 14px;
   }
 
-  .row-style>>>.el-form-item__label{
+  .row-style ::v-deep .el-form-item__label{
     font-size: 12px;
   }
 
-  .dataPreview>>>.el-card__header{
+  .dataPreview ::v-deep .el-card__header{
     padding: 6px 8px;
   }
 
-  .dataPreview>>>.el-card__body{
+  .dataPreview ::v-deep .el-card__body{
     padding:10px;
   }
 
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index e960d1e1d1..81f1de24ce 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -539,16 +539,16 @@ export default {
   overflow-y: auto;
 }
 
-.codemirror >>> .CodeMirror-scroll {
+.codemirror ::v-deep .CodeMirror-scroll {
   height: 160px;
   overflow-y: auto;
 }
 
-.dataPreview >>> .el-card__header {
+.dataPreview ::v-deep .el-card__header {
   padding: 6px 8px;
 }
 
-.dataPreview >>> .el-card__body {
+.dataPreview ::v-deep .el-card__body {
   padding: 10px;
 }
 
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index c0735caf31..4283b80f3b 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -331,21 +331,21 @@ export default {
 .form-item{
   margin-bottom: 10px!important;
 }
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 0 20px;
 }
-.preview-style >>> .el-drawer{
+.preview-style ::v-deep .el-drawer{
   height: 50%!important;
 }
-.preview-style >>> .el-drawer .el-drawer__header{
+.preview-style ::v-deep .el-drawer .el-drawer__header{
   margin-bottom: 10px!important;
   padding: 10px 16px 0!important;
   font-size: 14px;
 }
-.preview-style >>> .el-drawer .el-drawer__body{
+.preview-style ::v-deep .el-drawer .el-drawer__body{
   padding: 0 16px 10px!important;
 }
-.form-item >>> .el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px!important;
   font-weight: 400!important;
 }
diff --git a/frontend/src/views/dataset/add/union/NodeItem.vue b/frontend/src/views/dataset/add/union/NodeItem.vue
index 17e8e12313..a4dda00c21 100644
--- a/frontend/src/views/dataset/add/union/NodeItem.vue
+++ b/frontend/src/views/dataset/add/union/NodeItem.vue
@@ -249,7 +249,7 @@ export default {
   cursor: pointer;
   border: var(--Main,#2681ff) solid 1px;
 }
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 0 20px;
 }
 </style>
diff --git a/frontend/src/views/dataset/add/union/UnionNode.vue b/frontend/src/views/dataset/add/union/UnionNode.vue
index b26fe6f62c..9dba0696a0 100644
--- a/frontend/src/views/dataset/add/union/UnionNode.vue
+++ b/frontend/src/views/dataset/add/union/UnionNode.vue
@@ -251,7 +251,7 @@ export default {
   cursor: pointer;
   color: var(--Main,#2681ff);
 }
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 0 20px;
 }
 </style>
diff --git a/frontend/src/views/dataset/common/DatasetChartDetail.vue b/frontend/src/views/dataset/common/DatasetChartDetail.vue
index 969a01d8f0..ab378d5f82 100644
--- a/frontend/src/views/dataset/common/DatasetChartDetail.vue
+++ b/frontend/src/views/dataset/common/DatasetChartDetail.vue
@@ -169,7 +169,7 @@ export default {
 </script>
 
 <style scoped>
-  .info-tab>>>.el-tabs__item{
+  .info-tab ::v-deep .el-tabs__item{
     font-weight: 400;
     font-size: 12px;
   }
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelector.vue b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
index 619644f99b..54e76449e5 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@@ -398,7 +398,7 @@ export default {
     padding: 12px 0;
   }
 
-  .tree-list>>>.el-tree-node__expand-icon.is-leaf{
+  .tree-list ::v-deep .el-tree-node__expand-icon.is-leaf{
     display: none;
   }
 
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
index 728299c05e..874b27ceaa 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
@@ -372,7 +372,7 @@ export default {
 .search-input {
   padding: 12px 0;
 }
-.tree-list>>>.el-tree-node__expand-icon.is-leaf{
+.tree-list ::v-deep .el-tree-node__expand-icon.is-leaf{
   display: none;
 }
 .custom-tree-node {
diff --git a/frontend/src/views/dataset/data/CalcFieldEdit.vue b/frontend/src/views/dataset/data/CalcFieldEdit.vue
index 58c12bfdb3..a6d85bb8cb 100644
--- a/frontend/src/views/dataset/data/CalcFieldEdit.vue
+++ b/frontend/src/views/dataset/data/CalcFieldEdit.vue
@@ -425,13 +425,13 @@ export default {
 </script>
 
 <style scoped>
-  .row-style>>>.el-form-item__label{
+  .row-style ::v-deep .el-form-item__label{
     font-size: 12px;
   }
-  .row-style>>>.el-form-item--mini.el-form-item{
+  .row-style ::v-deep .el-form-item--mini.el-form-item{
     margin-bottom: 10px;
   }
-  .row-style>>>.el-form-item__content{
+  .row-style ::v-deep .el-form-item__content{
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -442,7 +442,7 @@ export default {
     overflow-y: auto;
     font-size: 12px;
   }
-  .codemirror >>> .CodeMirror-scroll {
+  .codemirror ::v-deep .CodeMirror-scroll {
     height: 300px;
     overflow-y: auto;
     font-size: 12px;
@@ -570,7 +570,7 @@ export default {
     overflow: auto;
     margin-top: 4px;
   }
-  .function-pop>>>.el-popover{
+  .function-pop ::v-deep .el-popover{
     padding: 6px!important;
   }
   .pop-title{
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index 29a2fb28ab..cbb85b8be1 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -452,21 +452,21 @@ export default {
   .field-class{
     font-size: 12px !important;
   }
-  .el-select>>>input{
+  .el-select ::v-deep input{
     padding-right: 10px;
   }
-  .el-select>>>.el-input__suffix{
+  .el-select ::v-deep .el-input__suffix{
     right: 0;
   }
   .el-radio{
     margin-right: 10px !important;
   }
-  .style-collapse>>>.el-collapse-item__header{
+  .style-collapse ::v-deep .el-collapse-item__header{
     height: 40px;
     line-height: 40px;
     padding: 0 0 0 10px;
   }
-  .style-collapse>>>.el-collapse-item__wrap{
+  .style-collapse ::v-deep .el-collapse-item__wrap{
     border-bottom: 0 solid #e6ebf5!important;
   }
   .style-collapse{
@@ -476,16 +476,16 @@ export default {
     margin-bottom: 6px;
   }
 
-  .dialog-css>>>.el-dialog__title {
+  .dialog-css ::v-deep .el-dialog__title {
     font-size: 14px;
   }
-  .dialog-css >>> .el-dialog__header {
+  .dialog-css ::v-deep .el-dialog__header {
     padding: 20px 20px 0;
   }
-  .dialog-css >>> .el-dialog__body {
+  .dialog-css ::v-deep .el-dialog__body {
     padding: 10px 20px 20px;
   }
-  .dialog-css>>>.el-dialog{
+  .dialog-css ::v-deep .el-dialog{
     width: 800px!important;
   }
 </style>
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index 3b4a425c35..a95e1656e8 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -167,13 +167,13 @@ export default {
 </script>
 
 <style scoped>
-  .row-style>>>.el-form-item__label{
+  .row-style ::v-deep .el-form-item__label{
     font-size: 12px;
   }
-  .row-style>>>.el-form-item--mini.el-form-item{
+  .row-style ::v-deep .el-form-item--mini.el-form-item{
     margin-bottom: 10px;
   }
-  .row-style>>>.el-form-item__content{
+  .row-style ::v-deep .el-form-item__content{
     display: flex;
     flex-direction: row;
     width: 250px;
diff --git a/frontend/src/views/dataset/data/UnionView.vue b/frontend/src/views/dataset/data/UnionView.vue
index 43c0925c05..912e03c4fc 100644
--- a/frontend/src/views/dataset/data/UnionView.vue
+++ b/frontend/src/views/dataset/data/UnionView.vue
@@ -339,13 +339,13 @@ export default {
     padding: 4px 10px;
   }
 
-  .dialog-css>>>.el-dialog__title {
+  .dialog-css ::v-deep .el-dialog__title {
     font-size: 14px;
   }
-  .dialog-css >>> .el-dialog__header {
+  .dialog-css ::v-deep .el-dialog__header {
     padding: 20px 20px 0;
   }
-  .dialog-css >>> .el-dialog__body {
+  .dialog-css ::v-deep .el-dialog__body {
     padding: 10px 20px 20px;
   }
 </style>
diff --git a/frontend/src/views/dataset/data/UpdateInfo.vue b/frontend/src/views/dataset/data/UpdateInfo.vue
index 9ed39d709e..20e45a4fd5 100644
--- a/frontend/src/views/dataset/data/UpdateInfo.vue
+++ b/frontend/src/views/dataset/data/UpdateInfo.vue
@@ -766,15 +766,15 @@ export default {
   .el-radio{
     margin-right: 10px;
   }
-  .el-radio>>>.el-radio__label{
+  .el-radio ::v-deep .el-radio__label{
     font-size: 12px;
   }
 
-  .dialog-css >>> .el-dialog__header {
+  .dialog-css ::v-deep .el-dialog__header {
     padding: 20px 20px 0;
   }
 
-  .dialog-css >>> .el-dialog__body {
+  .dialog-css ::v-deep .el-dialog__body {
     padding: 10px 20px 20px;
   }
 
@@ -786,7 +786,7 @@ export default {
     height: 100px;
     overflow-y: auto;
   }
-  .codemirror >>> .CodeMirror-scroll {
+  .codemirror ::v-deep .CodeMirror-scroll {
     height: 100px;
     overflow-y: auto;
   }
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 10d34fc7eb..b73f757717 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -753,7 +753,7 @@ export default {
     margin-top: 10px;
   }
 
-  .tree-list>>>.el-tree-node__expand-icon.is-leaf{
+  .tree-list ::v-deep .el-tree-node__expand-icon.is-leaf{
     display: none;
   }
 
@@ -813,7 +813,7 @@ export default {
     visibility: visible;
   }
 
-  .dialog-css >>> .el-dialog__body {
+  .dialog-css ::v-deep .el-dialog__body {
     padding: 10px 20px 20px;
   }
 
diff --git a/frontend/src/views/msg/all.vue b/frontend/src/views/msg/all.vue
index f446b85c9d..f656b804d0 100644
--- a/frontend/src/views/msg/all.vue
+++ b/frontend/src/views/msg/all.vue
@@ -167,13 +167,13 @@ export default {
 <style lang="scss" scoped>
 .de-msg-radio-class {
   padding: 0 5px;
-  >>>.el-radio-button__inner {
+  ::v-deep .el-radio-button__inner {
     border-radius: 4px 4px 4px 4px !important;
     border-left: 1px solid #dcdfe6 !important;
     padding: 10px 10px;
   }
 
-  >>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
     color: #fff;
     // background-color: #0a7be0;
     // border-color: #0a7be0;
diff --git a/frontend/src/views/msg/readed.vue b/frontend/src/views/msg/readed.vue
index 8630ef330c..156204fced 100644
--- a/frontend/src/views/msg/readed.vue
+++ b/frontend/src/views/msg/readed.vue
@@ -197,13 +197,13 @@ export default {
 <style lang="scss" scoped>
 .de-msg-radio-class {
   padding: 0 5px;
-  >>>.el-radio-button__inner {
+  ::v-deep .el-radio-button__inner {
     border-radius: 4px 4px 4px 4px !important;
     border-left: 1px solid #dcdfe6 !important;
     padding: 10px 10px;
   }
 
-  >>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
     color: #fff;
     /* background-color: #0a7be0;
     border-color: #0a7be0; */
diff --git a/frontend/src/views/msg/unread.vue b/frontend/src/views/msg/unread.vue
index 1ea88b3376..d36f650623 100644
--- a/frontend/src/views/msg/unread.vue
+++ b/frontend/src/views/msg/unread.vue
@@ -205,13 +205,13 @@ export default {
 <style lang="scss" scoped>
 .de-msg-radio-class {
   padding: 0 5px;
-  >>>.el-radio-button__inner {
+  ::v-deep .el-radio-button__inner {
     border-radius: 4px 4px 4px 4px !important;
     border-left: 1px solid #dcdfe6 !important;
     padding: 10px 10px;
   }
 
-  >>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
     color: #fff;
     /* background-color: #0a7be0;
     border-color: #0a7be0; */
diff --git a/frontend/src/views/panel/GrantAuth/dept/index.vue b/frontend/src/views/panel/GrantAuth/dept/index.vue
index 98ca2ee1a5..0c36067e71 100644
--- a/frontend/src/views/panel/GrantAuth/dept/index.vue
+++ b/frontend/src/views/panel/GrantAuth/dept/index.vue
@@ -279,21 +279,21 @@ export default {
     color: #faaa39 !important;
   }
 
-.my_table >>> .el-table__row>td{
+.my_table ::v-deep .el-table__row>td{
   /* 去除表格线 */
   border: none;
   padding: 0 0;
 }
-.my_table >>> .el-table th.is-leaf {
+.my_table ::v-deep .el-table th.is-leaf {
   /* 去除上边框 */
     border: none;
 }
-.my_table >>> .el-table::before{
+.my_table ::v-deep .el-table::before{
   /* 去除下边框 */
   height: 0;
 }
 
-.my_table>>>.el-table-column--selection .cell{
+.my_table::v-deep.el-table-column--selection .cell{
   text-align: center;
 }
 </style>
diff --git a/frontend/src/views/panel/GrantAuth/role/index.vue b/frontend/src/views/panel/GrantAuth/role/index.vue
index 4d41c625ed..21e5490f33 100644
--- a/frontend/src/views/panel/GrantAuth/role/index.vue
+++ b/frontend/src/views/panel/GrantAuth/role/index.vue
@@ -147,20 +147,20 @@ export default {
 
 <style scoped>
 
-.my_table >>> .el-table__row>td{
+.my_table ::v-deep .el-table__row>td{
   /* 去除表格线 */
   border: none;
   padding: 0 0;
 }
-.my_table >>> .el-table th.is-leaf {
+.my_table ::v-deep .el-table th.is-leaf {
   /* 去除上边框 */
     border: none;
 }
-.my_table >>> .el-table::before{
+.my_table ::v-deep .el-table::before{
   /* 去除下边框 */
   height: 0;
 }
-.my_table>>>.el-table-column--selection .cell{
+.my_table ::v-deep .el-table-column--selection .cell{
   text-align: center;
 }
 </style>
diff --git a/frontend/src/views/panel/GrantAuth/shareTree.vue b/frontend/src/views/panel/GrantAuth/shareTree.vue
index f1e8073b3d..f1fe250e54 100644
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@@ -213,7 +213,7 @@ export default {
   .msg-node-class {
     color: red;
 
-    > > > i {
+    ::v-deep i {
       color: red;
     }
   }
diff --git a/frontend/src/views/panel/GrantAuth/user/index.vue b/frontend/src/views/panel/GrantAuth/user/index.vue
index 3c7e277c38..8b95ad7da3 100644
--- a/frontend/src/views/panel/GrantAuth/user/index.vue
+++ b/frontend/src/views/panel/GrantAuth/user/index.vue
@@ -153,20 +153,20 @@ export default {
 
 <style scoped>
 
-.my_table >>> .el-table__row>td{
+.my_table ::v-deep .el-table__row>td{
   /* 去除表格线 */
   border: none;
   padding: 0 0;
 }
-.my_table >>> .el-table th.is-leaf {
+.my_table ::v-deep .el-table th.is-leaf {
   /* 去除上边框 */
     border: none;
 }
-.my_table >>> .el-table::before{
+.my_table ::v-deep .el-table::before{
   /* 去除下边框 */
   height: 0;
 }
-.my_table>>>.el-table-column--selection .cell{
+.my_table ::v-deep .el-table-column--selection .cell{
   text-align: center;
 }
 </style>
diff --git a/frontend/src/views/panel/LinkJumpSet/index.vue b/frontend/src/views/panel/LinkJumpSet/index.vue
index d9cb6eb372..f071a948b1 100644
--- a/frontend/src/views/panel/LinkJumpSet/index.vue
+++ b/frontend/src/views/panel/LinkJumpSet/index.vue
@@ -541,16 +541,16 @@ export default {
 
 <style scoped>
 
-.my_table >>> .el-table__row>td{
+.my_table ::v-deep .el-table__row>td{
   /* 去除表格线 */
   border: none;
   padding: 0 0;
 }
-.my_table >>> .el-table th.is-leaf {
+.my_table ::v-deep .el-table th.is-leaf {
   /* 去除上边框 */
     border: none;
 }
-.my_table >>> .el-table::before{
+.my_table ::v-deep .el-table::before{
   /* 去除下边框 */
   height: 0;
 }
@@ -613,7 +613,7 @@ export default {
   height: 35px;
   border-radius: 3px;
 }
->>>.el-popover{
+::v-deep .el-popover{
   height: 200px;
   overflow: auto;
 }
@@ -672,7 +672,7 @@ export default {
   font-size: 12px;
 }
 
-.codemirror >>> .CodeMirror-scroll {
+.codemirror ::v-deep .CodeMirror-scroll {
   height: 200px;
   overflow-y: auto;
   font-size: 12px;
diff --git a/frontend/src/views/panel/OuterParamsSet/index.vue b/frontend/src/views/panel/OuterParamsSet/index.vue
index a283df03f1..1dfbb3f020 100644
--- a/frontend/src/views/panel/OuterParamsSet/index.vue
+++ b/frontend/src/views/panel/OuterParamsSet/index.vue
@@ -355,18 +355,18 @@ export default {
 
 <style scoped>
 
-  .my_table >>> .el-table__row > td {
+  .my_table ::v-deep .el-table__row > td {
     /* 去除表格线 */
     border: none;
     padding: 0 0;
   }
 
-  .my_table >>> .el-table th.is-leaf {
+  .my_table ::v-deep .el-table th.is-leaf {
     /* 去除上边框 */
     border: none;
   }
 
-  .my_table >>> .el-table::before {
+  .my_table ::v-deep .el-table::before {
     /* 去除下边框 */
     height: 0;
   }
@@ -429,7 +429,7 @@ export default {
     border-radius: 3px;
   }
 
-  >>> .el-popover {
+  ::v-deep .el-popover {
     height: 200px;
     overflow: auto;
   }
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
index 095546bf46..c743cb7cac 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
@@ -50,18 +50,18 @@ export default {
 </script>
 
 <style scoped>
-  .avatar-uploader >>> .el-upload {
+  .avatar-uploader ::v-deep .el-upload {
     width: 100px;
     height: 60px;
     line-height: 70px;
   }
 
-  .avatar-uploader >>> .el-upload-list li {
+  .avatar-uploader ::v-deep .el-upload-list li {
     width: 100px !important;
     height: 60px !important;
   }
 
-  .disabled >>> .el-upload--picture-card {
+  .disabled ::v-deep .el-upload--picture-card {
     display: none;
   }
 
@@ -74,12 +74,12 @@ export default {
     align-items: center;
   }
 
-  .form-item-slider >>> .el-form-item__label {
+  .form-item-slider ::v-deep .el-form-item__label {
     font-size: 12px;
     line-height: 38px;
   }
 
-  .form-item >>> .el-form-item__label {
+  .form-item ::v-deep .el-form-item__label {
     font-size: 12px;
   }
 
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
index 7c78b5fc15..439aa35967 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
@@ -42,18 +42,18 @@ export default {
 </script>
 
 <style scoped>
-  .avatar-uploader >>> .el-upload {
+  .avatar-uploader ::v-deep .el-upload {
     width: 100px;
     height: 60px;
     line-height: 70px;
   }
 
-  .avatar-uploader >>> .el-upload-list li {
+  .avatar-uploader ::v-deep .el-upload-list li {
     width: 100px !important;
     height: 60px !important;
   }
 
-  .disabled >>> .el-upload--picture-card {
+  .disabled ::v-deep .el-upload--picture-card {
     display: none;
   }
 
@@ -66,12 +66,12 @@ export default {
     align-items: center;
   }
 
-  /*.form-item-slider >>> .el-form-item__label {*/
+  /*.form-item-slider ::v-deep .el-form-item__label {*/
   /*  font-size: 12px;*/
   /*  line-height: 38px;*/
   /*}*/
 
-  .form-item >>> .el-form-item__label {
+  .form-item ::v-deep .el-form-item__label {
     font-size: 12px;
   }
 
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue
index 1e6e1e162e..8996820fcf 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue
@@ -34,16 +34,16 @@ export default {
 </script>
 
 <style scoped>
-  .avatar-uploader>>>.el-upload {
+  .avatar-uploader ::v-deep .el-upload {
     width: 100px;
     height: 60px;
     line-height: 70px;
   }
-  .avatar-uploader>>>.el-upload-list li{
+  .avatar-uploader ::v-deep .el-upload-list li{
     width: 100px !important;
     height: 60px !important;
   }
-  .disabled>>>.el-upload--picture-card {
+  .disabled ::v-deep .el-upload--picture-card {
     display: none;
   }
   .shape-item{
@@ -54,11 +54,11 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
-  .form-item-slider>>>.el-form-item__label{
+  .form-item-slider ::v-deep .el-form-item__label{
     font-size: 12px;
     line-height: 38px;
   }
-  .form-item>>>.el-form-item__label{
+  .form-item ::v-deep .el-form-item__label{
     font-size: 12px;
   }
   .el-select-dropdown__item{
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
index 1d94308284..b0c1b8756c 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
@@ -246,11 +246,11 @@ export default {
   justify-content: space-between;
   align-items: center
 }
-.form-item-slider>>>.el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label{
   font-size: 12px;
   line-height: 38px;
 }
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 .el-select-dropdown__item{
@@ -271,14 +271,14 @@ span{
   width: 60px;
 }
 
-.color-type>>>.el-radio__input{
+.color-type ::v-deep .el-radio__input{
   display: none;
 }
 .el-radio{
   margin:0 2px 0 0!important;
   border: 1px solid transparent;
 }
-.el-radio>>>.el-radio__label{
+.el-radio ::v-deep .el-radio__label{
   padding-left: 0;
 }
 
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue
index 6d1077db9e..1ec75b1016 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewAttribute.vue
@@ -47,7 +47,7 @@ export default {
 
 <style scoped>
 
-.form-item>>>.el-form-item__label{
+.form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
 
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue
index faf0140f1b..1125f4b26d 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue
@@ -62,18 +62,18 @@ export default {
 </script>
 
 <style scoped>
-  .avatar-uploader >>> .el-upload {
+  .avatar-uploader ::v-deep .el-upload {
     width: 100px;
     height: 60px;
     line-height: 70px;
   }
 
-  .avatar-uploader >>> .el-upload-list li {
+  .avatar-uploader ::v-deep .el-upload-list li {
     width: 100px !important;
     height: 60px !important;
   }
 
-  .disabled >>> .el-upload--picture-card {
+  .disabled ::v-deep .el-upload--picture-card {
     display: none;
   }
 
@@ -86,12 +86,12 @@ export default {
     align-items: center;
   }
 
-  .form-item-slider >>> .el-form-item__label {
+  .form-item-slider ::v-deep .el-form-item__label {
     font-size: 12px;
     line-height: 38px;
   }
 
-  .form-item >>> .el-form-item__label {
+  .form-item ::v-deep .el-form-item__label {
     font-size: 12px;
   }
 
@@ -111,11 +111,11 @@ export default {
     margin-top: 10px;
   }
 
-  .radio-span >>> .el-radio__label {
+  .radio-span ::v-deep .el-radio__label {
     margin-left: 4px;
   }
 
-  .slider-area >>> .el-slider__runway {
+  .slider-area ::v-deep .el-slider__runway {
     display: none;
   }
 
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
index 81dbec9c25..b526fa7210 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
@@ -324,7 +324,7 @@ export default {
     z-index: 10;
     display:block;
   }
-  .vertical-layout>>>.el-icon-error {
+  .vertical-layout ::v-deep .el-icon-error {
     display:none
   }
   .theme-selected-icon {
diff --git a/frontend/src/views/panel/ViewSelect/multiplexing.vue b/frontend/src/views/panel/ViewSelect/multiplexing.vue
index b328154464..dfe3dd6d93 100644
--- a/frontend/src/views/panel/ViewSelect/multiplexing.vue
+++ b/frontend/src/views/panel/ViewSelect/multiplexing.vue
@@ -131,13 +131,13 @@ export default {
     height: 100%;
     overflow-y: auto;
   }
-  .tab-panel>>>.el-tabs__nav-wrap{
+  .tab-panel ::v-deep .el-tabs__nav-wrap{
     padding: 0 10px;
   }
-  .tab-panel>>>.el-tabs__nav-wrap::after {
+  .tab-panel ::v-deep .el-tabs__nav-wrap::after {
     height: 1px;
   }
-  .tab-panel>>>.el-tabs__item{
+  .tab-panel ::v-deep .el-tabs__item{
     /* width: 10px; */
     padding: 0 10px;
   }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 425028e499..9b2e24c949 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -1460,7 +1460,7 @@ export default {
     overflow-x: hidden;
   }
 
-  > > > .el-tabs__item {
+  ::v-deep .el-tabs__item {
     padding: 0 15px;
   }
   .view-selected-message-class {
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index 34e93bccf7..d0f11da9a4 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -787,7 +787,7 @@ export default {
     padding: 10px;
     height: 100%;
 
-    >>>div.el-tabs__content {
+    ::v-deep div.el-tabs__content {
       height: calc(100% - 55px);
     }
   }
diff --git a/frontend/src/views/panel/list/EditPanel/index.vue b/frontend/src/views/panel/list/EditPanel/index.vue
index fa2ba62f22..f4e8936305 100644
--- a/frontend/src/views/panel/list/EditPanel/index.vue
+++ b/frontend/src/views/panel/list/EditPanel/index.vue
@@ -208,16 +208,16 @@ export default {
 
 <style scoped>
 
-.my_table >>> .el-table__row>td{
+.my_table ::v-deep .el-table__row>td{
   /* 去除表格线 */
   border: none;
   padding: 0 0;
 }
-.my_table >>> .el-table th.is-leaf {
+.my_table ::v-deep .el-table th.is-leaf {
   /* 去除上边框 */
     border: none;
 }
-.my_table >>> .el-table::before{
+.my_table ::v-deep .el-table::before{
   /* 去除下边框 */
   height: 0;
 }
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index cb13e2b738..3d5235ac01 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -886,10 +886,10 @@ export default {
     padding:0 8px;
   }
 
-  .dialog-css>>>.el-dialog__body {
+  .dialog-css ::v-deep .el-dialog__body {
     padding: 15px 20px;
   }
-  .dialog-css >>>.el-dialog__body {
+  .dialog-css ::v-deep .el-dialog__body {
     padding: 10px 20px 20px;
   }
 
diff --git a/frontend/src/views/panel/list/PanelMain.vue b/frontend/src/views/panel/list/PanelMain.vue
index 7222818982..6db3d60ba8 100644
--- a/frontend/src/views/panel/list/PanelMain.vue
+++ b/frontend/src/views/panel/list/PanelMain.vue
@@ -135,28 +135,17 @@ export default {
     height: calc(100vh - 56px);
     padding: 0px;
   }
-
-  /*.tab-panel>>>.is-stretch{*/
-  /*  min-width: 80% !important;*/
-  /*}*/
-  /*.tab-panel>>>.el-tabs__nav-scroll {*/
-  /*  overflow: hidden;*/
-  /*  text-align: center;*/
-  /*  display: flex;*/
-  /*  align-items: center;*/
-  /*  justify-content: center;*/
-  /*}*/
   .tab-panel{
     height: 100%;
     overflow-y: auto;
   }
-  .tab-panel>>>.el-tabs__nav-wrap{
+  .tab-panel ::v-deep .el-tabs__nav-wrap{
     padding: 0 10px;
   }
-  .tab-panel>>>.el-tabs__nav-wrap::after {
+  .tab-panel ::v-deep .el-tabs__nav-wrap::after {
     height: 1px;
   }
-  .tab-panel>>>.el-tabs__item{
+  .tab-panel ::v-deep .el-tabs__item{
     /* width: 10px; */
     padding: 0 10px;
   }
diff --git a/frontend/src/views/panel/list/SaveToTemplate.vue b/frontend/src/views/panel/list/SaveToTemplate.vue
index 860bddde5c..38d1269137 100644
--- a/frontend/src/views/panel/list/SaveToTemplate.vue
+++ b/frontend/src/views/panel/list/SaveToTemplate.vue
@@ -129,16 +129,16 @@ export default {
     margin-top: 10px;
   }
 
-.my_table >>> .el-table__row>td{
+.my_table ::v-deep .el-table__row>td{
   /* 去除表格线 */
   border: none;
   padding: 0 0;
 }
-.my_table >>> .el-table th.is-leaf {
+.my_table ::v-deep .el-table th.is-leaf {
   /* 去除上边框 */
     border: none;
 }
-.my_table >>> .el-table::before{
+.my_table ::v-deep .el-table::before{
   /* 去除下边框 */
   height: 0;
 }
diff --git a/frontend/src/views/panel/list/common/PanelDetailInfo.vue b/frontend/src/views/panel/list/common/PanelDetailInfo.vue
index 1b3d4a4dde..0ee81f3c1a 100644
--- a/frontend/src/views/panel/list/common/PanelDetailInfo.vue
+++ b/frontend/src/views/panel/list/common/PanelDetailInfo.vue
@@ -65,7 +65,7 @@ export default {
 </script>
 
 <style scoped>
-  .info-tab>>>.el-tabs__item{
+  .info-tab ::v-deep .el-tabs__item{
     font-weight: 400;
     font-size: 12px;
   }
diff --git a/frontend/src/views/panel/template/component/TemplateImport.vue b/frontend/src/views/panel/template/component/TemplateImport.vue
index 4ae7ce5599..0b2dae2a86 100644
--- a/frontend/src/views/panel/template/component/TemplateImport.vue
+++ b/frontend/src/views/panel/template/component/TemplateImport.vue
@@ -136,16 +136,16 @@ export default {
 
 <style scoped>
 
-.my_table >>> .el-table__row>td{
+.my_table ::v-deep .el-table__row>td{
   /* 去除表格线 */
   border: none;
   padding: 0 0;
 }
-.my_table >>> .el-table th.is-leaf {
+.my_table ::v-deep .el-table th.is-leaf {
   /* 去除上边框 */
     border: none;
 }
-.my_table >>> .el-table::before{
+.my_table ::v-deep .el-table::before{
   /* 去除下边框 */
   height: 0;
 }
diff --git a/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue b/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
index b54f537ec1..003efd0eca 100644
--- a/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
+++ b/frontend/src/views/system/SysParam/MapSetting/MapSettingLeft.vue
@@ -193,7 +193,7 @@ export default {
     margin-top: 10px;
   }
 
-  .tree-list>>>.el-tree-node__expand-icon.is-leaf{
+  .tree-list ::v-deep .el-tree-node__expand-icon.is-leaf{
     display: none;
   }
 
@@ -253,7 +253,7 @@ export default {
     visibility: visible;
   }
 
-  .dialog-css >>> .el-dialog__body {
+  .dialog-css ::v-deep .el-dialog__body {
     padding: 10px 20px 20px;
   }
 
diff --git a/frontend/src/views/system/about/index.vue b/frontend/src/views/system/about/index.vue
index 6bdf838a1c..c25af35880 100644
--- a/frontend/src/views/system/about/index.vue
+++ b/frontend/src/views/system/about/index.vue
@@ -166,7 +166,7 @@ export default {
         min-width: 640px;
         height: 400px;
         position: relative;
-        >>>div.el-card__header {
+        ::v-deep div.el-card__header {
             padding: 0;
         }
     }
@@ -181,14 +181,14 @@ export default {
     .license-content {
         font-size: 16px;
         padding: 50px;
-        >>>table {
+        ::v-deep table {
             width: 100%;
         }
-        >>>th {
+        ::v-deep th {
             text-align: left;
             width: 45%;
         }
-        >>>td {
+        ::v-deep td {
             display: table-cell;
             vertical-align: inherit;
         }
@@ -205,7 +205,7 @@ export default {
         max-width: 100%;
         justify-content: space-between;
 
-        >>>a{
+        ::v-deep a{
             color: rgb(10,123,224);
             cursor: pointer;
         }
diff --git a/frontend/src/views/system/datasource/ApiVariable.vue b/frontend/src/views/system/datasource/ApiVariable.vue
index 0a0f00fc94..3e0f8a531b 100644
--- a/frontend/src/views/system/datasource/ApiVariable.vue
+++ b/frontend/src/views/system/datasource/ApiVariable.vue
@@ -265,7 +265,7 @@ export default {
   margin-right: 10px;
 }
 
-.advanced-item-value >>> .el-dialog__body {
+.advanced-item-value ::v-deep .el-dialog__body {
   padding: 15px 25px;
 }
 
diff --git a/frontend/src/views/system/datasource/DriverForm.vue b/frontend/src/views/system/datasource/DriverForm.vue
index 4a8f04b38a..966bc0c03e 100644
--- a/frontend/src/views/system/datasource/DriverForm.vue
+++ b/frontend/src/views/system/datasource/DriverForm.vue
@@ -275,23 +275,23 @@ export default {
   margin: 5px 5px 10px 5px;
 }
 
-.el-select >>> input {
+.el-select ::v-deep input {
   padding-right: 10px;
 }
 
-.el-select >>> .el-input__suffix {
+.el-select ::v-deep .el-input__suffix {
   right: 0;
 }
 
-.dialog-css >>> .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 10px 20px 0px;
 }
 
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 10px;
 }
 
-.dialog-footer >>> .el-dialog__footer {
+.dialog-footer ::v-deep .el-dialog__footer {
   padding: 10px 10px 10px;
 }
 
diff --git a/frontend/src/views/system/datasource/DsForm.vue b/frontend/src/views/system/datasource/DsForm.vue
index 9c35a18e28..ad60024787 100644
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
@@ -720,23 +720,23 @@ export default {
   margin: 5px 5px 10px 5px;
 }
 
-.el-select >>> input {
+.el-select ::v-deep input {
   padding-right: 10px;
 }
 
-.el-select >>> .el-input__suffix {
+.el-select ::v-deep .el-input__suffix {
   right: 0;
 }
 
-.dialog-css >>> .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 10px 20px 0px;
 }
 
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 10px;
 }
 
-.dialog-footer >>> .el-dialog__footer {
+.dialog-footer ::v-deep .el-dialog__footer {
   padding: 10px 10px 10px;
 }
 
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index 63cd782c36..4365b4b645 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -488,7 +488,7 @@ export default {
   padding: 0 8px;
 }
 
-.tree-list > > > .el-tree-node__expand-icon.is-leaf {
+.tree-list ::v-deep .el-tree-node__expand-icon.is-leaf {
   display: none;
 }
 
@@ -512,15 +512,15 @@ export default {
   line-height: 26px;
 }
 
-.dialog-css > > > .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 20px 20px 0;
 }
 
-.dialog-css > > > .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 20px;
 }
 
-.form-item > > > .el-form-item__label {
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
@@ -556,7 +556,7 @@ export default {
 .msg-node-class {
   color: red;
 
-  > > > i {
+  ::v-deep i {
     color: red;
   }
 }
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index 2df1d60289..a44d5ebe21 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -459,7 +459,7 @@ export default {
   width: 100%;
 }
 
-.dialog-css >>> .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 0;
 }
 ::v-deep .el-input-number .el-input__inner {
diff --git a/frontend/src/views/system/task/DatasetTaskList.vue b/frontend/src/views/system/task/DatasetTaskList.vue
index ebe3c1978b..4b41592eb4 100644
--- a/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/frontend/src/views/system/task/DatasetTaskList.vue
@@ -683,15 +683,15 @@ export default {
 .el-radio{
   margin-right: 10px;
 }
-.el-radio>>>.el-radio__label{
+.el-radio ::v-deep .el-radio__label{
   font-size: 12px;
 }
 
-.dialog-css >>> .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 20px 20px 0;
 }
 
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 20px;
 }
 
@@ -703,7 +703,7 @@ export default {
   height: 100px;
   overflow-y: auto;
 }
-.codemirror >>> .CodeMirror-scroll {
+.codemirror ::v-deep .CodeMirror-scroll {
   height: 100px;
   overflow-y: auto;
 }
diff --git a/frontend/src/views/system/task/TaskRecord.vue b/frontend/src/views/system/task/TaskRecord.vue
index 96045fc3ed..067b5bb6aa 100644
--- a/frontend/src/views/system/task/TaskRecord.vue
+++ b/frontend/src/views/system/task/TaskRecord.vue
@@ -224,15 +224,15 @@ export default {
 .el-radio{
   margin-right: 10px;
 }
-.el-radio>>>.el-radio__label{
+.el-radio ::v-deep .el-radio__label{
   font-size: 12px;
 }
 
-.dialog-css >>> .el-dialog__header {
+.dialog-css ::v-deep .el-dialog__header {
   padding: 20px 20px 0;
 }
 
-.dialog-css >>> .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 20px;
 }
 
diff --git a/frontend/src/views/system/task/dataset.vue b/frontend/src/views/system/task/dataset.vue
index 12d424225e..65b21c7399 100644
--- a/frontend/src/views/system/task/dataset.vue
+++ b/frontend/src/views/system/task/dataset.vue
@@ -113,13 +113,13 @@ export default {
 <style lang="scss" scoped>
 .de-msg-radio-class {
   padding: 0 5px;
-  >>>.el-radio-button__inner {
+  ::v-deep .el-radio-button__inner {
     border-radius: 4px 4px 4px 4px !important;
     border-left: 1px solid #dcdfe6 !important;
     padding: 10px 10px;
   }
 
-  >>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
     color: #fff;
     background-color: #0a7be0;
     border-color: #0a7be0;
diff --git a/frontend/src/views/system/user/personPwd.vue b/frontend/src/views/system/user/personPwd.vue
index 55bd3735b8..a29ff33b13 100644
--- a/frontend/src/views/system/user/personPwd.vue
+++ b/frontend/src/views/system/user/personPwd.vue
@@ -108,7 +108,7 @@ export default {
   min-width: 640px;
   height: auto;
   position: relative;
-  >>>div.el-card__header {
+  ::v-deep div.el-card__header {
     padding: 0;
   }
 }
diff --git a/frontend/src/views/system/user/privateForm.vue b/frontend/src/views/system/user/privateForm.vue
index 39e3df7661..6c6f732b4e 100644
--- a/frontend/src/views/system/user/privateForm.vue
+++ b/frontend/src/views/system/user/privateForm.vue
@@ -286,7 +286,7 @@ export default {
   min-width: 640px;
   height: auto;
   position: relative;
-  >>>div.el-card__header {
+  ::v-deep div.el-card__header {
     padding: 0;
   }
 }