Browse Source

优化 按钮图标、菜单图标,修复图标线条模糊

夜鹰 7 tháng trước cách đây
mục cha
commit
11449d33fc

+ 3 - 3
Web/src/layout/navMenu/subItem.vue

@@ -2,7 +2,7 @@
 	<template v-for="val in chils">
 	<template v-for="val in chils">
 		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 			<template #title>
 			<template #title>
-				<SvgIcon :name="val.meta.icon" />
+				<SvgIcon :name="val.meta.icon" style="font-size: 16px" />
 				<span>{{ $t(val.meta.title) }}</span>
 				<span>{{ $t(val.meta.title) }}</span>
 			</template>
 			</template>
 			<sub-item :chil="val.children" />
 			<sub-item :chil="val.children" />
@@ -10,12 +10,12 @@
 		<template v-else>
 		<template v-else>
 			<el-menu-item :index="val.path" :key="val.path">
 			<el-menu-item :index="val.path" :key="val.path">
 				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-					<SvgIcon :name="val.meta.icon" />
+					<SvgIcon :name="val.meta.icon" style="font-size: 16px" />
 					<span>{{ $t(val.meta.title) }}</span>
 					<span>{{ $t(val.meta.title) }}</span>
 				</template>
 				</template>
 				<template v-else>
 				<template v-else>
 					<a class="w100" @click.prevent="onALinkClick(val)">
 					<a class="w100" @click.prevent="onALinkClick(val)">
-						<SvgIcon :name="val.meta.icon" />
+						<SvgIcon :name="val.meta.icon" style="font-size: 16px" />
 						{{ $t(val.meta.title) }}
 						{{ $t(val.meta.title) }}
 					</a>
 					</a>
 				</template>
 				</template>

+ 19 - 14
Web/src/theme/element.scss

@@ -5,21 +5,26 @@
 .el-button {
 .el-button {
     font-family: var(--el-font-family);
     font-family: var(--el-font-family);
 }
 }
-// 第三方字体图标大小
-.el-button:not(.is-circle) i.el-icon,
-.el-button i.iconfont,
-.el-button i.fa,
-.el-button--default i.iconfont,
-.el-button--default i.fa {
-	font-size: 14px !important;
-	margin-right: 5px;
+.el-button.is-text {
+    .el-icon {
+        font-size: var(--el-font-size-medium);
+    }
 }
 }
+// 第三方字体图标大小
+// .el-button:not(.is-circle) i.el-icon,
+// .el-button i.iconfont,
+// .el-button i.fa,
+// .el-button--default i.iconfont,
+// .el-button--default i.fa {
+// 	font-size: 14px !important;
+// 	margin-right: 5px;
+// }
 
 
-.el-button--small i.iconfont,
-.el-button--small i.fa {
-	font-size: 12px !important;
-	margin-right: 5px;
-}
+// .el-button--small i.iconfont,
+// .el-button--small i.fa {
+// 	font-size: 12px !important;
+// 	margin-right: 5px;
+// }
 
 
 /* Input 输入框、InputNumber 计数器
 /* Input 输入框、InputNumber 计数器
 ------------------------------- */
 ------------------------------- */
@@ -554,7 +559,7 @@
         height: 28px;
         height: 28px;
     }
     }
     .el-button [class*=el-icon]+span{
     .el-button [class*=el-icon]+span{
-        margin-left: 0;
+        margin-left: 4px;
     }
     }
 }
 }
 .el-table [class*=el-table__row--level] .el-table__expand-icon {
 .el-table [class*=el-table__row--level] .el-table__expand-icon {