v-deep调整

report-ui/src/assets/styles/screen.scss

@@ -335,7 +335,7 @@ li {
   float: left;
   padding: 12px 30px;
   color: #999;
-  font: bold 12px;
+  font-size: 12px;
   text-decoration: none;
 }
 

report-ui/src/assets/styles/screenDesigner.scss

@@ -28,7 +28,7 @@
       width: 300px;
     }
 
-    :deep() .el-tabs--border-card {
+    .el-tabs--border-card {
       border: 0;
       .el-tabs__header {
         background: transparent;

report-ui/src/components/AnjiPlus/anji-crud/anji-crud.vue

@@ -942,32 +942,32 @@ export default {
     position: relative;
   }
 }
-:deep().button {
+.button {
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08);
   border-radius: 6px;
 }
-:deep().el-table th > .cell {
+.el-table th > .cell {
   text-align: center;
 }
-:deep().el-table .cell {
+.el-table .cell {
   text-align: center;
 }
-:deep().elTable {
+.elTable {
   margin: 10px 0 50px;
 }
 .el-table {
   // 看这里！！！
   // 深度选择器，去除默认的padding
-  :deep() th {
+   th {
     padding: 0;
     height: 36px;
   }
-  :deep() td {
+   td {
     padding: 0;
     height: 36px;
   }
 }
-:deep().el-table--striped .el-table__body tr.el-table__row--striped td {
+.el-table--striped .el-table__body tr.el-table__row--striped td {
   background: #f9fbfd;
 }
 .screenFlex {
@@ -1029,7 +1029,7 @@ export default {
   &:hover {
     background: none !important;
   }
-  :deep().el-button--text:hover,
+  .el-button--text:hover,
   .el-button--text:focus {
     color: #799ffc !important;
     background-color: #ecf5ff !important;
@@ -1048,7 +1048,7 @@ export default {
     float: right;
   }
 }
-:deep().el-pagination.is-background .btn-prev,
+.el-pagination.is-background .btn-prev,
 .el-pagination.is-background .btn-next,
 .el-pagination.is-background .el-pager li {
   margin: 0 5px;
@@ -1058,7 +1058,7 @@ export default {
   min-width: 30px;
   border-radius: 2px;
 }
-:deep().el-pagination.is-background .el-pager li:not(.disabled).active {
+.el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #5887fb;
   color: #ffffff;
   border-radius: 4px;
@@ -1075,26 +1075,26 @@ export default {
   margin-bottom: 14px;
   margin-right: 20px;
 }
-.el-table :deep() .warning-row {
+.el-table .warning-row {
   color: red !important;
 }
-.el-table :deep() .bgColor {
+.el-table .bgColor {
   background: #d9ecff;
 }
-:deep().edit_button {
+.edit_button {
   width: 22px;
   height: 22px;
   padding: 0;
   margin: 0;
   margin-right: 5px;
-  :deep() i {
+  i {
     font-size: 30px;
   }
 }
 .el-form-item--mini.el-form-item {
   margin-bottom: 12px;
 }
-.el-table :deep() .success-row {
+.el-table .success-row {
   background: #f9fbfd !important;
 }
 

report-ui/src/components/AnjiPlus/anji-crud/edit.vue

@@ -393,7 +393,7 @@ export default {
 
 <style scoped lang="scss">
 .notfull-screen {
-  :deep().el-dialog__body {
+  ::v-deep.el-dialog__body {
     background-color: rgb(240, 242, 245);
     padding: 5px;
     max-height: 60vh;
@@ -401,7 +401,7 @@ export default {
   }
 }
 .full-screen {
-  :deep().el-dialog__body {
+  ::v-deep.el-dialog__body {
     background-color: rgb(240, 242, 245);
     padding: 5px;
     height: calc(100vh - 110px);

report-ui/src/components/AnjiPlus/anji-dialog.vue

@@ -156,9 +156,9 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .notfull-screen {
-  :deep().el-dialog__body {
+  .el-dialog__body {
     background-color: rgb(240, 242, 245);
     padding: 5px;
     max-height: 60vh;
@@ -166,7 +166,7 @@ export default {
   }
 }
 .full-screen {
-  :deep().el-dialog__body {
+  .el-dialog__body {
     background-color: rgb(240, 242, 245);
     padding: 5px;
     height: calc(100vh - 110px);
@@ -210,7 +210,7 @@ export default {
 .addForm {
   text-align: center;
 }
-.activeColor :deep().el-form-item__label {
+.activeColor .el-form-item__label {
   color: #5887fb;
 }
 </style>

report-ui/src/components/AnjiPlus/anji-input.vue

@@ -174,11 +174,11 @@ export default {
   },
 }
 </script>
-<style lang="less" scoped>
-:deep().el-input__suffix {
+<style lang="less">
+.el-input__suffix {
   padding: 0 6px;
 }
-.anji-input :deep() .el-input__inner {
+.anji-input .el-input__inner {
   padding-right: 0 !important;
 }
 </style>

report-ui/src/components/AnjiPlus/anji-upload.vue

@@ -177,7 +177,7 @@ export default {
   width: 60px;
   height: 60px;
 }
-.hide_box :deep().el-upload--picture-card {
+.hide_box .el-upload--picture-card {
   display: none;
 }
 .el-upload-list__item {

report-ui/src/components/MonacoEditor/index.vue

@@ -126,7 +126,7 @@ export default {
 </script>
 
 <style scoped>
-.main :deep() .view-lines * {
+.main .view-lines * {
   font-family: Consolas, "Courier New", monospace !important;
 }
 </style>

report-ui/src/components/eachForm.vue

@@ -185,17 +185,17 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.elForm :deep() .el-upload--picture-card{
+<style lang="scss">
+.elForm  .el-upload--picture-card{
   width: 80px;
   height: 80px;
   line-height: 83px;
 }
-.elForm :deep() .el-upload-list__item {
+.elForm  .el-upload-list__item {
   width: 80px;
   height: 80px;
 }
-.hide_box :deep() .el-upload--picture-card{
+.hide_box  .el-upload--picture-card{
   display: none;
 }
 </style>

report-ui/src/main.js

@@ -7,9 +7,8 @@ import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
 import 'normalize.css/normalize.css'// A modern alternative to CSS resets
 import '@/assets/styles/common.css'
 import '@/assets/styles/index.scss'// custome global css
-
 // app router vuex filter mixins
-import App from './App'
+import App from './App.vue'
 import router from './router'
 import store from './store'
 import * as filter from './filter'

report-ui/src/views/accessRole/components/RoleAuthority.vue

@@ -92,8 +92,8 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-:deep().el-dialog__body {
+<style lang="scss">
+.el-dialog__body {
   height: 400px;
   overflow-y: scroll;
 }

report-ui/src/views/bigscreenDesigner/designer/components/colorPicker.vue

@@ -69,9 +69,9 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-:deep().el-color-picker--mini,
-:deep().el-color-picker--mini .el-color-picker__trigger {
+<style scoped lang="scss">
+::v-deep.el-color-picker--mini,
+::v-deep.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }

report-ui/src/views/bigscreenDesigner/designer/components/componentLinkage.vue

@@ -229,7 +229,7 @@ export default {
   }
 }
 </script>
-<style lang='scss' scoped>
+<style lang='scss'>
 .component-linkage {
 
   .button-name {
@@ -250,25 +250,25 @@ export default {
     margin-left: 10px;
   }
 
-  :deep().el-table,
-  :deep().el-table__expanded-cell,
-  :deep().el-table th,
-  :deep().el-table tr {
+  .el-table,
+  .el-table__expanded-cell,
+  .el-table th,
+  .el-table tr {
     background-color: transparent !important;
     color: #859094 !important;
   }
-  :deep().el-table td,
-  :deep().el-table th.is-leaf {
+  .el-table td,
+  .el-table th.is-leaf {
     border-bottom: none;
     line-height: 26px;
   }
-  :deep().el-table tbody tr:hover > td {
+  .el-table tbody tr:hover > td {
     background-color: #263445 !important;
   }
-  :deep().el-table::before {
+  .el-table::before {
     height: 0;
   }
-  :deep().el-dialog {
+  .el-dialog {
     background: #1b1e25;
     .el-dialog__title {
       color: #fff;

report-ui/src/views/bigscreenDesigner/designer/components/contentMenu.vue

@@ -99,7 +99,7 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .contentmenu {
   width: 160px;
   position: fixed;

report-ui/src/views/bigscreenDesigner/designer/components/customColorComponents.vue

@@ -156,30 +156,30 @@ export default {
     flex-direction: row;
   }
 }
-:deep().el-table,
-:deep().el-table__expanded-cell,
-:deep().el-table th,
-:deep().el-table tr {
+::v-deep.el-table,
+::v-deep.el-table__expanded-cell,
+::v-deep.el-table th,
+::v-deep.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
 }
-:deep().el-table td,
-:deep().el-table th.is-leaf {
+::v-deep.el-table td,
+::v-deep.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-:deep().el-table tbody tr:hover > td {
+::v-deep.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-:deep().el-table::before {
+::v-deep.el-table::before {
   height: 0;
 }
-:deep().el-color-picker--mini,
-:deep().el-color-picker--mini .el-color-picker__trigger {
+::v-deep.el-color-picker--mini,
+::v-deep.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }
-:deep().el-dialog {
+::v-deep.el-dialog {
   background: #1b1e25;
   .el-dialog__title {
     color: #fff;

report-ui/src/views/bigscreenDesigner/designer/components/customNameComponents.vue

@@ -148,37 +148,37 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .color-box {
   .title {
     display: flex;
     flex-direction: row;
   }
 }
-:deep().el-table,
-:deep().el-table__expanded-cell,
-:deep().el-table th,
-:deep().el-table tr {
+.el-table,
+.el-table__expanded-cell,
+.el-table th,
+.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
 }
-:deep().el-table td,
-:deep().el-table th.is-leaf {
+.el-table td,
+.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-:deep().el-table tbody tr:hover > td {
+.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-:deep().el-table::before {
+.el-table::before {
   height: 0;
 }
-:deep().el-color-picker--mini,
-:deep().el-color-picker--mini .el-color-picker__trigger {
+.el-color-picker--mini,
+.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }
-:deep().el-dialog {
+.el-dialog {
   background: #1b1e25;
   .el-dialog__title {
     color: #fff;

report-ui/src/views/bigscreenDesigner/designer/components/customUpload.vue

@@ -81,7 +81,7 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .file {
   position: absolute;
   width: 100%;
@@ -90,8 +90,8 @@ export default {
   top: 0;
   opacity: 0;
 }
-:deep().el-input-group__append,
-:deep().el-input-group__prepend {
+.el-input-group__append,
+.el-input-group__prepend {
   padding: 0 10px !important;
   overflow: hidden;
 }

report-ui/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue

@@ -137,39 +137,39 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-:deep()::-webkit-scrollbar-track-piece {
+<style lang="scss">
+::-webkit-scrollbar-track-piece {
   background-color: transparent;
 }
-:deep() .el-table__body-wrapper::-webkit-scrollbar {
+ .el-table__body-wrapper::-webkit-scrollbar {
   width: 0; // 横向滚动条
   height: 8px; // 纵向滚动条 必写
 }
 // 滚动条的滑块
-:deep() .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ .el-table__body-wrapper::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: rgba(144, 146, 152, 0.3);
 }
-:deep().el-table,
-:deep().el-table__expanded-cell,
-:deep().el-table th,
-:deep().el-table tr {
+.el-table,
+.el-table__expanded-cell,
+.el-table th,
+.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
   font-size: 12px !important;
 }
-:deep().el-table td,
-:deep().el-table th.is-leaf {
+.el-table td,
+.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-:deep().el-table tbody tr:hover {
+.el-table tbody tr:hover {
   background-color: #263445 !important;
 }
-:deep().el-table tbody tr:hover > td {
+.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-:deep().el-table::before {
+.el-table::before {
   height: 0;
 }
 .button-group .el-button {

report-ui/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue

@@ -137,39 +137,39 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-:deep()::-webkit-scrollbar-track-piece {
+<style lang="scss">
+::-webkit-scrollbar-track-piece {
   background-color: transparent;
 }
-:deep() .el-table__body-wrapper::-webkit-scrollbar {
+ .el-table__body-wrapper::-webkit-scrollbar {
   width: 0; // 横向滚动条
   height: 8px; // 纵向滚动条 必写
 }
 // 滚动条的滑块
-:deep() .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ .el-table__body-wrapper::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: rgba(144, 146, 152, 0.3);
 }
-:deep().el-table,
-:deep().el-table__expanded-cell,
-:deep().el-table th,
-:deep().el-table tr {
+.el-table,
+.el-table__expanded-cell,
+.el-table th,
+.el-table tr {
   background-color: transparent !important;
   color: #859094 !important;
   font-size: 12px !important;
 }
-:deep().el-table td,
-:deep().el-table th.is-leaf {
+.el-table td,
+.el-table th.is-leaf {
   border-bottom: none;
   line-height: 26px;
 }
-:deep().el-table tbody tr:hover {
+.el-table tbody tr:hover {
   background-color: #263445 !important;
 }
-:deep().el-table tbody tr:hover > td {
+.el-table tbody tr:hover > td {
   background-color: #263445 !important;
 }
-:deep().el-table::before {
+.el-table::before {
   height: 0;
 }
 .button-group .el-button {

report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue

@@ -500,11 +500,11 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-:deep() .el-form-item {
+<style lang="scss">
+.el-form-item {
   margin-bottom: 5px;
 }
-:deep() .el-form-item__label {
+.el-form-item__label {
   font-size: 12px;
   color: #fff;
 }
@@ -516,7 +516,7 @@ export default {
   border-top: none;
   border-bottom: none;
 }
-:deep().el-collapse-item__header {
+.el-collapse-item__header {
   height: 40px;
   line-height: 40px;
   background: transparent;
@@ -525,11 +525,12 @@ export default {
   font-size: 12px;
   border-color: #282e3a;
 }
-:deep().el-collapse-item__wrap {
-  background: transparent;
+.el-collapse-item__wrap {
+  background: #282e3a;
   border: none;
 }
-:deep().el-collapse-item__content {
+.el-collapse-item__content {
+  background: transparent;
   padding-bottom: 0;
 }
 </style>

report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue

@@ -152,8 +152,8 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-:deep() .el-select {
+<style scoped lang="scss">
+ .el-select {
   height: 100%;
 
   .el-input {

report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetInput.vue

@@ -66,8 +66,8 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-:deep() .el-select {
+<style scoped lang="scss">
+ .el-select {
   height: 100%;
 
   .el-input {

report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue

@@ -114,8 +114,8 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-:deep() .el-select {
+<style scoped lang="scss">
+ .el-select {
   height: 100%;
 
   .el-input {

report-ui/src/views/bigscreenDesigner/index.vue

@@ -202,7 +202,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .main-layout {
   padding: 20px;
   position: relative;

report-ui/src/views/bigscreenDesigner/viewer/index.vue

@@ -107,7 +107,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .layout {
   width: 100%;
   height: 100%;

report-ui/src/views/excelreport/components/colorPicker.vue

@@ -69,9 +69,9 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-:deep().el-color-picker--mini,
-:deep().el-color-picker--mini .el-color-picker__trigger {
+<style lang="scss">
+.el-color-picker--mini,
+.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }

report-ui/src/views/resultset/components/EditDataSet.vue

@@ -955,9 +955,9 @@ public class DemoGroovyHandler implements IGroovyHandler {
   }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .code-mirror-form {
-  :deep() .el-form-item__content {
+   .el-form-item__content {
     height: 200px;
     overflow: hidden;
   }
@@ -1085,7 +1085,7 @@ public class DemoGroovyHandler implements IGroovyHandler {
   top: 15px;
 }
 
-.filterTextarea :deep() .el-textarea__inner {
+.filterTextarea  .el-textarea__inner {
   min-height: 300px !important;
 }
 
@@ -1094,7 +1094,7 @@ public class DemoGroovyHandler implements IGroovyHandler {
   margin-top: 4px;
 }
 
-.filterBox :deep() .el-input--suffix .el-input__inner {
+.filterBox  .el-input--suffix .el-input__inner {
   background: #f4f7ff;
   border-radius: 3px;
   border: 1px solid #b8caff;

report-ui/src/views/resultset/components/MonacoEditor.vue

@@ -133,8 +133,8 @@ export default {
 };
 </script>
 
-<style scoped>
-.main :deep() .view-lines * {
+<style lang="scss">
+.main .view-lines * {
   font-family: Consolas, "Courier New", monospace !important;
 }
 </style>

report-ui/src/views/resultset/index.vue

@@ -334,8 +334,8 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-:deep().el-dropdown {
+<style lang="scss">
+.el-dropdown {
   margin-right: 20px;
 }
 </style>

report-ui/src/views/screenDesigner/index.vue

@@ -254,6 +254,6 @@ export default {
   }
 };
 </script>
-<style scoped lang="scss">
+<style lang="scss">
 @import "../../assets/styles/screenDesigner.scss";
 </style>