浏览代码

调整 SCSS 导入使用 @use, 因为 sass 团队说他们最终会删除 @import 语法,@use也是官方建议的

夜鹰 9 月之前
父节点
当前提交
918a45c5e5

+ 5 - 0
Web/src/theme/app.scss

@@ -26,6 +26,11 @@
 	//--el-text-color-primary: rgba(0, 0, 0, .75) !important;
 	--el-text-color-regular: rgba(0, 0, 0, 0.99) !important;
 	//--el-text-color-secondary: var(--el-text-color-regular) !important;
+
+    // 导航菜单项高度,建议设置为偶数,否则图标与文本会在垂直位置上存在1px差
+    --el-menu-item-height-small: 34px;
+    --el-menu-item-height-default: 44px;
+    --el-menu-item-height-large: 50px;
 }
 
 html,

+ 9 - 8
Web/src/theme/element.scss

@@ -1,4 +1,4 @@
-@import 'mixins/index.scss';
+@use 'mixins/index.scss' as *;
 
 /* Button 按钮
 ------------------------------- */
@@ -119,8 +119,8 @@
 .el-menu-item,
 .el-sub-menu__title {
 	color: var(--next-bg-menuBarColor);
-	height: 44px !important;
-	line-height: 44px !important;
+	// height: 44px !important;
+	// line-height: 44px !important;
 }
 
 // 修复点击左侧菜单折叠再展开时,宽度不跟随问题
@@ -212,13 +212,13 @@
 
 		.el-menu-item,
 		.el-sub-menu {
-			height: 45px !important;
-			line-height: 45px !important;
+			// height: 45px !important;
+			// line-height: 45px !important;
 			color: var(--next-bg-topBarColor);
 
 			.el-sub-menu__title {
-				height: 45px !important;
-				line-height: 45px !important;
+				// height: 45px !important;
+				// line-height: 45px !important;
 				color: var(--next-bg-topBarColor);
 			}
 
@@ -256,7 +256,8 @@
 
 	.el-menu-item,
 	.el-sub-menu__title {
-		height: 50px !important;
+		height: 50px;
+        line-height: 50px;
 		color: var(--next-bg-topBarColor);
 	}
 

+ 10 - 10
Web/src/theme/index.scss

@@ -1,10 +1,10 @@
-@import 'element-plus/dist/index.css';
-@import './app.scss';
-@import 'common/transition.scss';
-@import './other.scss';
-@import './element.scss';
-@import './media/media.scss';
-@import './waves.scss';
-@import './dark.scss';
-@import './iconfont/font_2298093_rnp72ifj3ba.scss';
-@import './font-awesome/font-awesome.scss';
+@use 'element-plus/dist/index.css' as *;
+@use './app.scss' as *;
+@use 'common/transition.scss' as *;
+@use './other.scss' as *;
+@use './element.scss' as *;
+@use './media/media.scss' as *;
+@use './waves.scss' as *;
+@use './dark.scss' as *;
+@use './iconfont/font_2298093_rnp72ifj3ba.scss' as *;
+@use './font-awesome/font-awesome.scss' as *;

+ 1 - 1
Web/src/theme/media/chart.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于768px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/cityLinkage.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于576px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/date.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于768px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/dialog.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于800px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/error.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于768px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/form.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于576px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/home.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于768px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/layout.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于576px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/login.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于1200px
 ------------------------------- */

+ 13 - 13
Web/src/theme/media/media.scss

@@ -1,13 +1,13 @@
-@import './login.scss';
-@import './error.scss';
-@import './layout.scss';
-@import './personal.scss';
-@import './tagsView.scss';
-@import './home.scss';
-@import './chart.scss';
-@import './form.scss';
-@import './scrollbar.scss';
-@import './pagination.scss';
-@import './dialog.scss';
-@import './cityLinkage.scss';
-@import './date.scss';
+@use './login.scss' as *;
+@use './error.scss' as *;
+@use './layout.scss' as *;
+@use './personal.scss' as *;
+@use './tagsView.scss' as *;
+@use './home.scss' as *;
+@use './chart.scss' as *;
+@use './form.scss' as *;
+@use './scrollbar.scss' as *;
+@use './pagination.scss' as *;
+@use './dialog.scss' as *;
+@use './cityLinkage.scss' as *;
+@use './date.scss' as *;

+ 1 - 1
Web/src/theme/media/pagination.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于576px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/personal.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于768px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/scrollbar.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于768px
 ------------------------------- */

+ 1 - 1
Web/src/theme/media/tagsView.scss

@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as *;
 
 /* 页面宽度小于768px
 ------------------------------- */