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 {
+:deep(.el-input),
-  .el-input,
+:deep(.el-textarea),
-  .el-textarea,
+:deep(.el-date-editor),
-  .el-date-editor,
+:deep(.el-input__wrapper) {
-  .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 {
+: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 {
+:deep(.el-dialog) {
   --el-dialog-bg-color: v-bind("state.style.bodyBg") !important;
-  }
+}
 
-  .el-drawer {
+:deep(.el-drawer) {
   --el-drawer-bg-color: v-bind("state.style.bodyBg") !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 {
+: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 {
+:deep(.el-input),
-  .el-input,
+:deep(.el-textarea),
-  .el-textarea,
+:deep(.el-date-editor),
-  .el-date-editor,
+:deep(.el-input__wrapper) {
-  .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 {
+: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 {
+:deep(.el-dialog) {
   --el-dialog-bg-color: v-bind("state.style.bodyBg") !important;
-  }
+}
 
-  .el-drawer {
+:deep(.el-drawer) {
   --el-drawer-bg-color: v-bind("state.style.bodyBg") !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 {
+:deep(*::selection) {
   background-color: v-bind("state.style.selectionBg");
   color: v-bind("state.style.selectionColor");
-  }
 }
 </style>