1.优化分类操作按钮

sws 2024-08-15

src/components/base/icon/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <i class="iconfont hover" :class="className" :style="'font-size:' + size + 'px;' + (props.color.indexOf('#') !== -1 ? 'color:' + props.color : '') + styles" @click="onClick">
+    <i class="iconfont" :class="className" :style="'font-size:' + size + 'px;' + (props.color.indexOf('#') !== -1 ? 'color:' + props.color : '') + styles" @click="onClick">
         <slot></slot>
     </i>
 </template>
@@ -15,10 +15,6 @@ const props = defineProps({
         type: String,
         default: '',
     },
-    hoverColor: {
-        type: String,
-        default: '',
-    },
     size: {
         type: String,
         default: '',
@@ -50,8 +46,5 @@ i.iconfont {
     &:hover {
         opacity: 0.8;
     }
-    &.hover:hover {
-        color: inherit;
-    }
 }
 </style>

src/components/common/upload/index.scss

@@ -6,6 +6,11 @@
         .el-tree {
             --el-tree-node-content-height: 40px;
         }
+        .category-oprate {
+            .icon:hover {
+                color: $cr-primary;
+            }
+        }
     }
     .right-content {
         position: relative;

src/components/common/upload/index.vue

@@ -26,10 +26,10 @@
                         <template #default="{ node, data }">
                             <div class="custom-tree-node flex-row jc-sb gap-10 align-c w pr-10">
                                 <div class="flex-1 flex-width text-line-1 block">{{ data.name }}</div>
-                                <div class="flex-row gap-10">
+                                <div class="flex-row gap-10 cr-9 category-oprate">
-                                    <icon v-if="data.pid == 0" name="add" size="12" color="primary" @click="append_type_event(data)"></icon>
+                                    <icon v-if="data.pid == 0" class="icon" name="add" size="12" @click="append_type_event(data)"></icon>
-                                    <icon name="edit" size="12" color="primary" @click="edit_type_event(data)"></icon>
+                                    <icon class="icon" name="edit" size="12" @click="edit_type_event(data)"></icon>
-                                    <icon name="del" size="12" color="primary" @click="remove_type_event(node, data)"></icon>
+                                    <icon class="icon" name="del" size="12" @click="remove_type_event(node, data)"></icon>
                                 </div>
                             </div>
                         </template>

src/styles/index.scss

@@ -73,8 +73,6 @@ div:focus {
 // 全局form表单样式
 :root {
     --el-font-size-base: 12px;
-    // input numberbox 颜色值整
-    --el-fill-color-light: #fff;
 }
 .el-form {
     --el-form-label-font-size: var(--el-font-size-base);
@@ -102,10 +100,12 @@ div:focus {
 // numberbox 数字输入框样式调整
 .el-input-number {
     &__decrease {
+        background-color: #fff;
         transition: all 0.3s ease-in-out;
         opacity: 0;
     }
     &__increase {
+        background-color: #fff;
         transition: all 0.3s ease-in-out;
         opacity: 0;
     }