forked from github/dataease
Merge pull request #12061 from dataease/pr@dev-v2_st
fix(仪表板): 图标hover样式不对，hover背景和icon的上下左右间距为4px，圆角为4px
This commit is contained in:
dataeaseShu
GitHub
commit
5c072a6103
@ -271,6 +271,66 @@ body {
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
.circle-button_icon {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ed-icon {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: #5f5f5f;
|
||||
cursor: not-allowed;
|
||||
&::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
display: block;
|
||||
background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&::after {
|
||||
display: block;
|
||||
background: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
|
||||
}
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
transition: 0.1s;
|
||||
user-select: none;
|
||||
outline: 0;
|
||||
color: var(--ed-color-primary);
|
||||
border: 0 solid transparent;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ed-table-v2__empty {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
@ -333,38 +333,29 @@ const removeJumpSenior = () => {
|
||||
<span class="set-text-info" :class="{ 'set-text-info-dark': themes === 'dark' }">
|
||||
已设置
|
||||
</span>
|
||||
<el-button
|
||||
class="circle-button font14"
|
||||
<button
|
||||
class="circle-button_icon"
|
||||
:title="t('chart.delete')"
|
||||
:class="'label-' + props.themes"
|
||||
text
|
||||
size="small"
|
||||
:style="{ width: '14px', margin: '0 8px' }"
|
||||
:style="{ margin: '0 8px' }"
|
||||
@click="removeLinkageSenior"
|
||||
>
|
||||
<template #icon>
|
||||
<el-icon size="14px">
|
||||
<Icon name="icon_delete-trash_outlined" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-icon>
|
||||
<Icon name="icon_delete-trash_outlined" />
|
||||
</el-icon>
|
||||
</button>
|
||||
</template>
|
||||
<el-button
|
||||
class="circle-button font14"
|
||||
<button
|
||||
class="circle-button_icon"
|
||||
:title="t('chart.edit')"
|
||||
:class="'label-' + props.themes"
|
||||
text
|
||||
size="small"
|
||||
:style="{ width: '14px', margin: '0' }"
|
||||
@click="linkageSetOpen"
|
||||
:disabled="!chart.linkageActive"
|
||||
>
|
||||
<template #icon>
|
||||
<el-icon size="14px">
|
||||
<Icon name="icon_edit_outlined" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-icon>
|
||||
<Icon name="icon_edit_outlined" />
|
||||
</el-icon>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</collapse-switch-item>
|
||||
@ -383,38 +374,29 @@ const removeJumpSenior = () => {
|
||||
<span class="set-text-info" :class="{ 'set-text-info-dark': themes === 'dark' }">
|
||||
已设置
|
||||
</span>
|
||||
<el-button
|
||||
class="circle-button font14"
|
||||
<button
|
||||
class="circle-button_icon"
|
||||
:title="t('chart.delete')"
|
||||
:class="'label-' + props.themes"
|
||||
text
|
||||
size="small"
|
||||
:style="{ width: '14px', margin: '0 8px' }"
|
||||
:style="{ margin: '0 8px' }"
|
||||
@click="removeJumpSenior"
|
||||
>
|
||||
<template #icon>
|
||||
<el-icon size="14px">
|
||||
<Icon name="icon_delete-trash_outlined" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-icon>
|
||||
<Icon name="icon_delete-trash_outlined" />
|
||||
</el-icon>
|
||||
</button>
|
||||
</template>
|
||||
<el-button
|
||||
class="circle-button font14"
|
||||
<button
|
||||
class="circle-button_icon"
|
||||
:title="t('chart.edit')"
|
||||
:class="'label-' + props.themes"
|
||||
text
|
||||
size="small"
|
||||
:style="{ width: '14px', margin: 0 }"
|
||||
@click="linkJumpSetOpen"
|
||||
:disabled="!chart.jumpActive"
|
||||
>
|
||||
<template #icon>
|
||||
<el-icon size="14px">
|
||||
<Icon name="icon_edit_outlined" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-icon>
|
||||
<Icon name="icon_edit_outlined" />
|
||||
</el-icon>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</collapse-switch-item>
|
||||
@ -495,18 +477,6 @@ span {
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #a6a6a6 !important;
|
||||
&.ed-button {
|
||||
color: var(--ed-color-primary) !important;
|
||||
}
|
||||
&.is-disabled {
|
||||
color: #5f5f5f !important;
|
||||
}
|
||||
}
|
||||
|
||||
.font14 {
|
||||
:deep(.ed-icon) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.inner-container {
|
||||
|
||||
@ -156,21 +156,17 @@ onMounted(() => {
|
||||
>
|
||||
已设置
|
||||
</span>
|
||||
<el-button
|
||||
<button
|
||||
:class="'label-' + props.themes"
|
||||
:style="{ width: '24px', marginLeft: '6px' }"
|
||||
:style="{ marginLeft: '6px' }"
|
||||
:disabled="!state.assistLineCfg.enable"
|
||||
class="circle-button font14"
|
||||
text
|
||||
size="small"
|
||||
class="circle-button_icon"
|
||||
@click="editLine"
|
||||
>
|
||||
<template #icon>
|
||||
<el-icon size="14px">
|
||||
<Icon name="icon_edit_outlined" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-icon>
|
||||
<Icon name="icon_edit_outlined" />
|
||||
</el-icon>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user