From 0ae83a895e80a4b9777a27f613d721a7e5e2ac18 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期二, 03 九月 2024 10:18:27 +0800
Subject: [PATCH] 整体样式修改
---
energy_management_ui/src/components/IconSelect/index.vue | 81 ++++++++++++++++++++++++----------------
1 files changed, 48 insertions(+), 33 deletions(-)
diff --git a/energy_management_ui/src/components/IconSelect/index.vue b/energy_management_ui/src/components/IconSelect/index.vue
index 0611dc5..53d93e6 100644
--- a/energy_management_ui/src/components/IconSelect/index.vue
+++ b/energy_management_ui/src/components/IconSelect/index.vue
@@ -1,11 +1,22 @@
<!-- @author zhengjie -->
<template>
<div class="icon-body">
- <el-input v-model="name" style="position: relative;" clearable placeholder="璇疯緭鍏ュ浘鏍囧悕绉�" @clear="filterIcons" @input.native="filterIcons">
+ <el-input
+ v-model="name"
+ style="position: relative;color: #333;"
+ clearable
+ placeholder="璇疯緭鍏ュ浘鏍囧悕绉�"
+ @clear="filterIcons"
+ @input.native="filterIcons"
+ >
<i slot="suffix" class="el-icon-search el-input__icon" />
</el-input>
<div class="icon-list">
- <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
+ <div
+ v-for="(item, index) in iconList"
+ :key="index"
+ @click="selectedIcon(item)"
+ >
<svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
<span>{{ item }}</span>
</div>
@@ -14,56 +25,60 @@
</template>
<script>
-import icons from './requireIcons'
+import icons from "./requireIcons";
export default {
- name: 'IconSelect',
+ name: "IconSelect",
data() {
return {
- name: '',
+ name: "",
iconList: icons
- }
+ };
},
methods: {
filterIcons() {
if (this.name) {
- this.iconList = this.iconList.filter(item => item.includes(this.name))
+ this.iconList = this.iconList.filter(item => item.includes(this.name));
} else {
- this.iconList = icons
+ this.iconList = icons;
}
},
selectedIcon(name) {
- this.$emit('selected', name)
- document.body.click()
+ this.$emit("selected", name);
+ document.body.click();
},
reset() {
- this.name = ''
- this.iconList = icons
+ this.name = "";
+ this.iconList = icons;
}
}
-}
+};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
- .icon-body {
- width: 100%;
- padding: 10px;
- .icon-list {
- height: 200px;
- overflow-y: scroll;
- div {
- height: 30px;
- line-height: 30px;
- margin-bottom: -5px;
- cursor: pointer;
- width: 33%;
- float: left;
- }
- span {
- display: inline-block;
- vertical-align: -0.15em;
- fill: currentColor;
- overflow: hidden;
- }
+.icon-body {
+ width: 100%;
+ padding: 10px;
+ z-index: 999;
+ .icon-list {
+ height: 200px;
+ overflow-y: scroll;
+ div {
+ height: 30px;
+ line-height: 30px;
+ margin-bottom: -5px;
+ cursor: pointer;
+ width: 33%;
+ float: left;
+ }
+ span {
+ display: inline-block;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ overflow: hidden;
}
}
+ .el-input__inner {
+ color: #333;
+ }
+}
</style>
--
Gitblit v1.9.3