From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 27 五月 2025 17:52:03 +0800
Subject: [PATCH] 页面样式修改
---
src/views/tool/build/IconsDialog.vue | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 115 insertions(+), 0 deletions(-)
diff --git a/src/views/tool/build/IconsDialog.vue b/src/views/tool/build/IconsDialog.vue
new file mode 100644
index 0000000..98d9c13
--- /dev/null
+++ b/src/views/tool/build/IconsDialog.vue
@@ -0,0 +1,115 @@
+<template>
+ <div class="icon-dialog">
+ <el-dialog v-model="value" width="980px" :close-on-click-modal="false" :modal-append-to-body="false" @open="onOpen"
+ @close="onClose">
+ <template #header="{ close, titleId, titleClass }">
+ 閫夋嫨鍥炬爣
+ <el-input v-model="key" size="small" :style="{ width: '260px' }" placeholder="璇疯緭鍏ュ浘鏍囧悕绉�" prefix-icon="Search"
+ clearable />
+ </template>
+ <ul class="icon-ul">
+ <li v-for="icon in iconList" :key="icon" :class="active === icon ? 'active-item' : ''" @click="onSelect(icon)">
+ <div>
+ <el-icon :size="30">
+ <component :is="icon" />
+ </el-icon>
+ <div>{{ icon }}</div>
+ </div>
+ </li>
+ </ul>
+ </el-dialog>
+ </div>
+</template>
+<script setup>
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { watch } from 'vue'
+
+const iconList = ref([])
+const originList = []
+const key = ref('')
+const active = ref('')
+const emit = defineEmits(['select'])
+const value = defineModel()
+for (const [key] of Object.entries(ElementPlusIconsVue)) {
+ iconList.value.push(key)
+ originList.push(key)
+}
+
+function onOpen() { }
+function onClose() { }
+function onSelect(icon) {
+ active.value = icon
+ emit('select', icon)
+ value.value = false
+}
+
+watch(key, (val) => {
+ if (val) {
+ iconList.value = originList.filter(name => name.indexOf(val) > -1)
+ } else {
+ iconList.value = originList
+ }
+})
+</script>
+<style lang="scss" scoped>
+.icon-ul {
+ margin: 0;
+ padding: 0;
+ font-size: 0;
+
+ li {
+ list-style-type: none;
+ text-align: center;
+ font-size: 14px;
+ display: inline-flex;
+ width: 16.66%;
+ box-sizing: border-box;
+ height: 108px;
+ padding: 6px 6px 6px 6px;
+ cursor: pointer;
+ overflow: hidden;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ background: #f2f2f2;
+ }
+
+ &.active-item {
+ background: #e1f3fb;
+ color: #7a6df0
+ }
+
+ i {
+ font-size: 30px;
+ line-height: 50px;
+ margin-bottom: 10px;
+ }
+ }
+}
+
+.icon-dialog {
+ :deep() {
+ .el-dialog {
+ border-radius: 8px;
+ margin-bottom: 0;
+ margin-top: 4vh !important;
+ display: flex;
+ flex-direction: column;
+ max-height: 92vh;
+ overflow: hidden;
+ box-sizing: border-box;
+
+ .el-dialog__header {
+ padding-top: 14px;
+ }
+
+ .el-dialog__body {
+ margin: 0 20px 20px 20px;
+ padding: 0;
+ overflow: auto;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3