style(数据大屏): 调整大屏Tab组件设置样式 (#17433)

This commit is contained in:
王嘉豪
2025-11-17 16:14:03 +08:00
committed by GitHub
parent ec6ebf08dc
commit ff1b3dddaa
2 changed files with 25 additions and 5 deletions

View File

@@ -232,7 +232,7 @@ onMounted(() => {
v-model="element.style.borderActive"
@modelChange="val => onStyleAttrChange({ key: 'borderActive', value: val })"
:themes="themes"
:title="t('visualization.board') + '333'"
:title="t('visualization.board')"
name="borderSetting"
class="common-style-area"
>

View File

@@ -29,9 +29,13 @@ const onTitleBackgroundChange = (params, paramsName) => {
</script>
<template>
<div class="tab-title-background">
<el-tabs class="background-tabs" v-model="activeName" stretch>
<el-tab-pane :label="t('visualization.active_title_background')" name="activeBackground">
<div class="tab-title-background" :class="{ 'background-tabs-dark': themes === 'dark' }">
<el-tabs class="background-tabs" v-model="activeName" :effect="themes" stretch>
<el-tab-pane
:effect="themes"
:label="t('visualization.active_title_background')"
name="activeBackground"
>
<background-overall-common
:themes="themes"
edit-position="tab"
@@ -40,7 +44,11 @@ const onTitleBackgroundChange = (params, paramsName) => {
@onBackgroundChange="onTitleBackgroundChange($event, 'active')"
/>
</el-tab-pane>
<el-tab-pane :label="t('visualization.inactive_title_background')" name="inActiveBackground">
<el-tab-pane
:effect="themes"
:label="t('visualization.inactive_title_background')"
name="inActiveBackground"
>
<div class="background-label">
<span>
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
@@ -94,4 +102,16 @@ const onTitleBackgroundChange = (params, paramsName) => {
padding: 12px 0;
}
}
.background-tabs-dark {
:deep(.ed-tabs__item) {
&:hover {
color: var(--ed-color-primary);
}
color: #ebebeb;
}
:deep(.is-active) {
color: var(--ed-color-primary);
}
}
</style>