fix: fix the global css conflicts between index.vue and zhuBeiDong.vue

packages/manage/router/index.vue

@@ -155,7 +155,9 @@ body {
   padding: 0px;
   margin: 0px;
 }
+</style>
 
+<style lang="scss" scoped>
 .app-main {
   box-shadow: 2px 2px 5px 3px #e5e6eb;
   border-radius: 4px;
@@ -170,7 +172,6 @@ body {
   padding: 0;
 }
 
-#app,
 #container,
 .app-main {
   background-color: v-bind("state.style.bodyBg");
@@ -203,39 +204,37 @@ body {
   }
 }
 
-#app {
-  .el-input,
-  .el-textarea,
-  .el-date-editor,
-  .el-input__wrapper {
-    --el-input-bg-color: v-bind("state.style.itemBg") !important;
-    --el-fill-color-blank: v-bind("state.style.itemBg") !important;
-    --el-input-text-color: v-bind("state.style.color") !important;
-  }
+:deep(.el-input),
+:deep(.el-textarea),
+:deep(.el-date-editor),
+:deep(.el-input__wrapper) {
+  --el-input-bg-color: v-bind("state.style.itemBg") !important;
+  --el-fill-color-blank: v-bind("state.style.itemBg") !important;
+  --el-input-text-color: v-bind("state.style.color") !important;
+}
 
-  .el-popper {
-    --el-bg-color-overlay: v-bind("state.style.itemBg") !important;
-    --el-fill-color-light: v-bind("state.style.bodyBg") !important;
-    text-align: left;
-  }
+:deep(.el-popper) {
+  --el-bg-color-overlay: v-bind("state.style.itemBg") !important;
+  --el-fill-color-light: v-bind("state.style.bodyBg") !important;
+  text-align: left;
+}
 
-  .el-dialog {
-    --el-dialog-bg-color: v-bind("state.style.bodyBg") !important;
-  }
+:deep(.el-dialog) {
+  --el-dialog-bg-color: v-bind("state.style.bodyBg") !important;
+}
 
-  .el-drawer {
-    --el-drawer-bg-color: v-bind("state.style.bodyBg") !important;
-  }
+:deep(.el-drawer) {
+  --el-drawer-bg-color: v-bind("state.style.bodyBg") !important;
+}
 
-  * {
-    --el-text-color-regular: v-bind("state.style.color") !important;
-    --el-text-color-primary: v-bind("state.style.color") !important;
-    --el-disabled-bg-color: v-bind("state.style.itemBg") !important;
-  }
+:deep(*) {
+  --el-text-color-regular: v-bind("state.style.color") !important;
+  --el-text-color-primary: v-bind("state.style.color") !important;
+  --el-disabled-bg-color: v-bind("state.style.itemBg") !important;
+}
 
-  *::selection {
-    background-color: v-bind("state.style.selectionBg");
-    color: v-bind("state.style.selectionColor");
-  }
+:deep(*::selection) {
+  background-color: v-bind("state.style.selectionBg");
+  color: v-bind("state.style.selectionColor");
 }
 </style>

packages/manage/router/zhuBeiDong.vue

@@ -148,7 +148,9 @@ body {
   padding: 0px;
   margin: 0px;
 }
+</style>
 
+<style lang="scss" scoped>
 .app-main {
   box-shadow: 2px 2px 5px 3px #e5e6eb;
   border-radius: 4px;
@@ -163,7 +165,6 @@ body {
   padding: 0;
 }
 
-#app,
 #container,
 .app-main {
   background-color: v-bind("state.style.bodyBg");
@@ -196,39 +197,37 @@ body {
   }
 }
 
-#app {
-  .el-input,
-  .el-textarea,
-  .el-date-editor,
-  .el-input__wrapper {
-    --el-input-bg-color: v-bind("state.style.itemBg") !important;
-    --el-fill-color-blank: v-bind("state.style.itemBg") !important;
-    --el-input-text-color: v-bind("state.style.color") !important;
-  }
+:deep(.el-input),
+:deep(.el-textarea),
+:deep(.el-date-editor),
+:deep(.el-input__wrapper) {
+  --el-input-bg-color: v-bind("state.style.itemBg") !important;
+  --el-fill-color-blank: v-bind("state.style.itemBg") !important;
+  --el-input-text-color: v-bind("state.style.color") !important;
+}
 
-  .el-popper {
-    --el-bg-color-overlay: v-bind("state.style.itemBg") !important;
-    --el-fill-color-light: v-bind("state.style.bodyBg") !important;
-    text-align: left;
-  }
+:deep(.el-popper) {
+  --el-bg-color-overlay: v-bind("state.style.itemBg") !important;
+  --el-fill-color-light: v-bind("state.style.bodyBg") !important;
+  text-align: left;
+}
 
-  .el-dialog {
-    --el-dialog-bg-color: v-bind("state.style.bodyBg") !important;
-  }
+:deep(.el-dialog) {
+  --el-dialog-bg-color: v-bind("state.style.bodyBg") !important;
+}
 
-  .el-drawer {
-    --el-drawer-bg-color: v-bind("state.style.bodyBg") !important;
-  }
+:deep(.el-drawer) {
+  --el-drawer-bg-color: v-bind("state.style.bodyBg") !important;
+}
 
-  * {
-    --el-text-color-regular: v-bind("state.style.color") !important;
-    --el-text-color-primary: v-bind("state.style.color") !important;
-    --el-disabled-bg-color: v-bind("state.style.itemBg") !important;
-  }
+:deep(*) {
+  --el-text-color-regular: v-bind("state.style.color") !important;
+  --el-text-color-primary: v-bind("state.style.color") !important;
+  --el-disabled-bg-color: v-bind("state.style.itemBg") !important;
+}
 
-  *::selection {
-    background-color: v-bind("state.style.selectionBg");
-    color: v-bind("state.style.selectionColor");
-  }
+:deep(*::selection) {
+  background-color: v-bind("state.style.selectionBg");
+  color: v-bind("state.style.selectionColor");
 }
 </style>