perf: 优化冗余的 css important

pany-ang · pany-ang · commit b8033dc89207 · 2024-11-21T11:03:40.000+08:00
diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
@@ -68,7 +68,7 @@ $transition-time: 0.35s;
 .sidebar-container {
   background-color: var(--v3-sidebar-menu-bg-color);
   transition: width $transition-time;
-  width: var(--v3-sidebar-width) !important;
+  width: var(--v3-sidebar-width);
   height: 100%;
   position: fixed;
   top: 0;
@@ -126,7 +126,7 @@ $transition-time: 0.35s;
 
 .hideSidebar {
   .sidebar-container {
-    width: var(--v3-sidebar-hide-width) !important;
+    width: var(--v3-sidebar-hide-width);
   }
   .main-container {
     margin-left: var(--v3-sidebar-hide-width);
@@ -140,7 +140,7 @@ $transition-time: 0.35s;
 .mobile {
   .sidebar-container {
     transition: transform $transition-time;
-    width: var(--v3-sidebar-width) !important;
+    width: var(--v3-sidebar-width);
   }
   .main-container {
     margin-left: 0px;
diff --git a/src/layouts/LeftTopMode.vue b/src/layouts/LeftTopMode.vue
@@ -75,7 +75,7 @@ $transition-time: 0.35s;
 .sidebar-container {
   background-color: var(--el-menu-bg-color);
   transition: width $transition-time;
-  width: var(--v3-sidebar-width) !important;
+  width: var(--v3-sidebar-width);
   height: 100%;
   position: fixed;
   left: 0;
@@ -95,7 +95,7 @@ $transition-time: 0.35s;
 
 .hideSidebar {
   .sidebar-container {
-    width: var(--v3-sidebar-hide-width) !important;
+    width: var(--v3-sidebar-hide-width);
   }
   .app-main {
     padding-left: var(--v3-sidebar-hide-width);
diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
@@ -104,7 +104,7 @@ function logout() {
     :deep(.el-sub-menu) {
       &.is-active {
         .el-sub-menu__title {
-          color: var(--el-color-primary) !important;
+          color: var(--el-color-primary);
         }
       }
     }
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
@@ -93,7 +93,7 @@ const tipLineWidth = computed(() => {
   height: 100%;
   :deep(.scrollbar-wrapper) {
     // 限制水平宽度
-    overflow-x: hidden !important;
+    overflow-x: hidden;
   }
   // 滚动条
   :deep(.el-scrollbar__bar) {
@@ -106,7 +106,7 @@ const tipLineWidth = computed(() => {
 
 .el-menu {
   border: none;
-  width: 100% !important;
+  width: 100%;
 }
 
 .el-menu--horizontal {
@@ -128,7 +128,7 @@ const tipLineWidth = computed(() => {
 :deep(.el-sub-menu) {
   &.is-active {
     > .el-sub-menu__title {
-      color: v-bind(activeTextColor) !important;
+      color: v-bind(activeTextColor);
     }
   }
 }
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
@@ -14,7 +14,7 @@
     .el-pagination__jump,
     .btn-prev,
     .btn-next {
-      display: none !important;
+      display: none;
     }
   }
 }
diff --git a/src/styles/theme/core/layouts.scss b/src/styles/theme/core/layouts.scss
@@ -21,7 +21,7 @@
     .el-sub-menu {
       &.is-active {
         > .el-sub-menu__title {
-          color: #ffffff !important;
+          color: #ffffff;
         }
       }
     }
diff --git a/src/styles/vxe-table.scss b/src/styles/vxe-table.scss
@@ -4,23 +4,23 @@
   // 表单
   &--form-wrapper {
     .vxe-form {
-      padding: 10px 20px !important;
-      margin-bottom: 20px !important;
+      padding: 10px 20px;
+      margin-bottom: 20px;
     }
   }
 
   // 工具栏
   &--toolbar-wrapper {
     .vxe-toolbar {
-      padding: 20px !important;
+      padding: 20px;
     }
   }
 
   // 分页
   &--pager-wrapper {
     .vxe-pager {
-      height: 70px !important;
-      padding: 0 20px !important;
+      height: 70px;
+      padding: 0 20px;
       &--wrapper {
         // 参考 Bootstrap 的响应式设计 WIDTH = 768
         @media screen and (max-width: 768px) {
@@ -29,7 +29,7 @@
           .vxe-pager--jump,
           .vxe-pager--jump-prev,
           .vxe-pager--jump-next {
-            display: none !important;
+            display: none;
           }
         }
       }

Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@ function logout() {`
`104`	`104`	`:deep(.el-sub-menu) {`
`105`	`105`	`&.is-active {`
`106`	`106`	`.el-sub-menu__title {`
`107`		`- color: var(--el-color-primary) !important;`
	`107`	`+ color: var(--el-color-primary);`
`108`	`108`	`}`
`109`	`109`	`}`
`110`	`110`	`}`
Original file line number	Diff line number	Diff line change
`@@ -93,7 +93,7 @@ const tipLineWidth = computed(() => {`
`93`	`93`	`height: 100%;`
`94`	`94`	`:deep(.scrollbar-wrapper) {`
`95`	`95`	`// 限制水平宽度`
`96`		`- overflow-x: hidden !important;`
	`96`	`+ overflow-x: hidden;`
`97`	`97`	`}`
`98`	`98`	`// 滚动条`
`99`	`99`	`:deep(.el-scrollbar__bar) {`
`@@ -106,7 +106,7 @@ const tipLineWidth = computed(() => {`
`106`	`106`
`107`	`107`	`.el-menu {`
`108`	`108`	`border: none;`
`109`		`- width: 100% !important;`
	`109`	`+ width: 100%;`
`110`	`110`	`}`
`111`	`111`
`112`	`112`	`.el-menu--horizontal {`
`@@ -128,7 +128,7 @@ const tipLineWidth = computed(() => {`
`128`	`128`	`:deep(.el-sub-menu) {`
`129`	`129`	`&.is-active {`
`130`	`130`	`> .el-sub-menu__title {`
`131`		`- color: v-bind(activeTextColor) !important;`
	`131`	`+ color: v-bind(activeTextColor);`
`132`	`132`	`}`
`133`	`133`	`}`
`134`	`134`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`.el-pagination__jump,`
`15`	`15`	`.btn-prev,`
`16`	`16`	`.btn-next {`
`17`		`- display: none !important;`
	`17`	`+ display: none;`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`.el-sub-menu {`
`22`	`22`	`&.is-active {`
`23`	`23`	`> .el-sub-menu__title {`
`24`		`- color: #ffffff !important;`
	`24`	`+ color: #ffffff;`
`25`	`25`	`}`
`26`	`26`	`}`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,23 +4,23 @@`
`4`	`4`	`// 表单`
`5`	`5`	`&--form-wrapper {`
`6`	`6`	`.vxe-form {`
`7`		`- padding: 10px 20px !important;`
`8`		`- margin-bottom: 20px !important;`
	`7`	`+ padding: 10px 20px;`
	`8`	`+ margin-bottom: 20px;`
`9`	`9`	`}`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`// 工具栏`
`13`	`13`	`&--toolbar-wrapper {`
`14`	`14`	`.vxe-toolbar {`
`15`		`- padding: 20px !important;`
	`15`	`+ padding: 20px;`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`// 分页`
`20`	`20`	`&--pager-wrapper {`
`21`	`21`	`.vxe-pager {`
`22`		`- height: 70px !important;`
`23`		`- padding: 0 20px !important;`
	`22`	`+ height: 70px;`
	`23`	`+ padding: 0 20px;`
`24`	`24`	`&--wrapper {`
`25`	`25`	`// 参考 Bootstrap 的响应式设计 WIDTH = 768`
`26`	`26`	`@media screen and (max-width: 768px) {`
`@@ -29,7 +29,7 @@`
`29`	`29`	`.vxe-pager--jump,`
`30`	`30`	`.vxe-pager--jump-prev,`
`31`	`31`	`.vxe-pager--jump-next {`
`32`		`- display: none !important;`
	`32`	`+ display: none;`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`	`}`