github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 03:22:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(图表): 指标卡条件样式弹窗样式调整

Browse Source
This commit is contained in:
wisonic 2025-01-15 17:55:26 +08:00 committed by wisonic-s
parent 094096ed21
commit c1c95031a8
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue
View File

@ -103,12 +103,7 @@ init()
<template>
<el-col>
<el-button class="circle-button" circle style="margin-bottom: 10px" @click="addThreshold">
<template #icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
</el-button>
<div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
<div @keydown.stop @keyup.stop class="threshold-editor">
<el-row
v-for="(item, index) in state.thresholdArr"
:key="index"
@ -190,33 +185,43 @@ init()
@change="changeThreshold"
/>
</div>
<div style="display: flex; align-items: center; justify-content: center; margin-left: 8px">
<div style="display: flex; align-items: center; justify-content: center; margin-left: 12px">
<el-button
class="circle-button"
class="circle-button m-icon-btn"
type="text"
circle
style="float: right"
text
@click="removeThreshold(index)"
>
<template #icon>
<el-icon size="20px" style="color: #646a73">
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
</template>
</el-icon>
</el-button>
</div>
</el-row>
</div>
<el-button class="circle-button" text style="margin-top: 10px" @click="addThreshold">
<template #icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
</template>
{{ t('chart.add_style') }}
</el-button>
</el-col>
</template>
<style lang="less" scoped>
.threshold-editor {
max-height: 50vh;
overflow-y: auto;
background: #f5f6f7;
border-radius: 4px;
}
.line-item {
width: 100%;
border-radius: 4px;
border: 1px solid #dcdfe6;
padding: 4px 14px;
margin-bottom: 10px;
margin: 8px 0;
display: flex;
justify-content: left;
align-items: center;
@ -282,4 +287,15 @@ span {
font-size: 12px;
}
}
.m-icon-btn {
&:hover {
background: rgba(31, 35, 41, 0.1) !important;
}
&:focus {
background: rgba(31, 35, 41, 0.1) !important;
}
&:active {
background: rgba(31, 35, 41, 0.2) !important;
}
}
</style>