过滤器样式修改

This commit is contained in:
jingna 2025-04-18 14:17:24 +08:00
parent 68ed24e148
commit a58623970b
2 changed files with 44 additions and 11 deletions

View File

@ -95,19 +95,19 @@ defineExpose({
</div> </div>
</div> </div>
<template #footer> <template #footer>
<el-button secondary @click="closeFilter">{{ $t('chart.cancel') }} </el-button> <el-button class="cancelbtn" secondary @click="closeFilter">{{ $t('chart.cancel') }} </el-button>
<el-button type="primary" @click="submit">{{ $t('chart.confirm') }} </el-button> <el-button type="primary" @click="submit">{{ $t('chart.confirm') }} </el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<style lang="less"> <style lang="less" scoped>
.filter-tree-cont { .filter-tree-cont {
.tree-cont { .tree-cont {
min-height: 67px; min-height: 67px;
width: 100%; width: 100%;
padding: 16px; padding: 16px;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--deBorderBase, #dcdfe6); border: 1px solid var(--deBorderBase, #595f6b);
overflow: auto; overflow: auto;
max-height: 500px; max-height: 500px;
.content { .content {
@ -115,5 +115,14 @@ defineExpose({
width: 100%; width: 100%;
} }
} }
.ed-button.is-secondary{
color: #F2F4F5;
background-color: #212121;
border: 1px solid #434343;
}
.ed-button--primary{
background-color:#0089FF;
}
} }
</style> </style>

View File

@ -87,11 +87,11 @@ const del = (index, child) => {
<div class="logic" :style="marginLeft"> <div class="logic" :style="marginLeft">
<div class="logic-left"> <div class="logic-left">
<div class="operate-title"> <div class="operate-title">
<span style="color: #bfbfbf" class="mrg-title" v-if="x"> <span style="color: #bfbfbf;" class="mrg-title" v-if="x">
{{ logic === 'or' ? 'OR' : 'AND' }} {{ logic === 'or' ? 'OR' : 'AND' }}
</span> </span>
<el-dropdown @command="handleCommand" trigger="click" v-else> <el-dropdown @command="handleCommand" trigger="click" v-else>
<span style="color: rgba(0 0 0 / 65%)" class="mrg-title fir"> <span style="color:#F2F4F5" class="mrg-title fir">
{{ logic === 'or' ? 'OR' : 'AND' }} {{ logic === 'or' ? 'OR' : 'AND' }}
<el-icon> <el-icon>
<Icon name="icon_down_outlined"><icon_down_outlined class="svg-icon" /></Icon> <Icon name="icon_down_outlined"><icon_down_outlined class="svg-icon" /></Icon>
@ -159,18 +159,21 @@ const del = (index, child) => {
font-family: var(--de-custom_font, 'PingFang'); font-family: var(--de-custom_font, 'PingFang');
word-wrap: break-word; word-wrap: break-word;
box-sizing: border-box; box-sizing: border-box;
color: rgba(0, 0, 0, 0.65); // color: rgba(0, 0, 0, 0.65);
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 65px; width: 65px;
background-color: #f8f8fa; // background-color: #f8f8fa;
line-height: 28px; line-height: 28px;
position: relative; position: relative;
z-index: 1; z-index: 1;
height: 28px; height: 28px;
background-color: #212121;
border:1px solid #434343;
color: #F2F4F5;
border-radius: 2px;
.mrg-title { .mrg-title {
text-align: left; text-align: left;
box-sizing: border-box; box-sizing: border-box;
@ -237,11 +240,32 @@ const del = (index, child) => {
padding: 0 10px; padding: 0 10px;
margin-right: 10px; margin-right: 10px;
font-size: 14px; font-size: 14px;
color: #246dff; color: #0089FF;
background: #fff; background: transparent;
border: 1px solid #246dff; border: 1px solid #0089FF;
border-radius: 2px; border-radius: 2px;
} }
} }
}
.ed-dropdown__popper .ed-dropdown-menu{
background-color: #303133;
border: 1px solid #434343;
}
:deep(.ed-dropdown-menu__item) {
color: #F2F4F5;
}
</style>
<style>
.ed-dropdown__popper.ed-popper{
border-color: rgba(70, 70, 70, 1);
}
.ed-popper.is-light{
border:none;
background: transparent;
}
.ed-dropdown-menu__item:not(.is-disabled):hover{
background-color: rgba(83, 83, 83, 1);
} }
</style> </style>