fix: 菜单图标选择

src/components/IconSelect/index.vue

@@ -4,9 +4,15 @@
 			<template #suffix><i class="el-icon-search el-input__icon" /></template>
 		</el-input>
 		<div class="icon-select__list">
-			<div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
-				<svg-icon color="#999" :icon-class="item" style="height: 30px; width: 16px; margin-right: 5px" />
-				<span>{{ item }}</span>
+			<div
+				v-for="(item, index) in iconList"
+				:key="index"
+				:title="item"
+				:class="`item ${item === iconName ? 'active' : ''}`"
+				@click="selectedIcon(item)"
+			>
+				<svg-icon class="local_icon" :icon-class="item" />
+				<span class="text text-overflow_ellipsis">{{ item }}</span>
 			</div>
 		</div>
 	</div>
@@ -53,26 +59,35 @@ defineExpose({
 <style lang="scss" scoped>
 .icon-select {
 	width: 100%;
-	padding: 10px;
+	//padding: 10px;
 
 	&__list {
+		margin-top: 8px;
 		height: 200px;
 		overflow-y: scroll;
 
-		div {
+		.item {
 			height: 30px;
 			line-height: 30px;
 			margin-bottom: -5px;
 			cursor: pointer;
-			width: 33%;
+			width: 33.33%;
 			float: left;
+			color: #999;
+			display: flex;
+			align-items: center;
+			//justify-content: ;
+			&.active {
+				color: var(--el-color-primary);
+			}
 		}
-
-		span {
-			display: inline-block;
-			vertical-align: -0.15em;
-			fill: currentColor;
-			overflow: hidden;
+		.local_icon {
+			height: 30px;
+			width: 16px;
+			margin-right: 5px;
+		}
+		.text {
+			flex: 1;
 		}
 	}
 }