ThbTech/gis-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式修改

Browse Source
This commit is contained in:
jingna 2025-04-23 18:15:30 +08:00
parent b792ca61e7
commit 277cd64c99
14 changed files with 153 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
core/core-frontend/src/components/data-visualization/DvToolbar.vue
View File

@ -655,18 +655,21 @@ const fullScreenPreview = () => {
background-color: transparent; background-color: transparent;
&:hover, &:hover,
&:focus { &:focus {
background-color: #121a2c; background-color: transparent;
border-color: #595f6b; border-color: rgba(255, 255, 255, 0.3);
} }
&:active { &:active {
border-color: #616774; border-color: rgba(255, 255, 255, 0.3);
background-color: #1e2637; background-color: transparent;
} }
} }
:deep(.ed-button--primary){
background: #0089ff;
border: 1px solid #0089ff;
}
.divider { .divider {
background: #ffffff4d; background: #ffffff;
width: 1px; width: 1px;
height: 18px; height: 18px;
margin-right: 20px; margin-right: 20px;

22
core/core-frontend/src/components/visualization/DvSidebar.vue
View File

@ -173,7 +173,7 @@ const menuOpt = optName => {
:id="'attr-slide-component-name' + slideIndex" :id="'attr-slide-component-name' + slideIndex"
v-if="!canvasCollapse[sideName]" v-if="!canvasCollapse[sideName]"
class="name-area-attr" class="name-area-attr"
style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap" style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap;"
:style="{ width: componentNameEdit ? '300px' : 'auto' }" :style="{ width: componentNameEdit ? '300px' : 'auto' }"
:class="{ 'component-name-dark': themeInfo === 'dark' }" :class="{ 'component-name-dark': themeInfo === 'dark' }"
@dblclick="editComponentName" @dblclick="editComponentName"
@ -191,7 +191,7 @@ const menuOpt = optName => {
<span> <span>
<el-icon <el-icon
v-show="element && element['id']" v-show="element && element['id']"
style="margin: 2px 0 0 4px; cursor: pointer" style="margin: 6px 0 0 4px; cursor: pointer"
><Icon><dvInfoSvg class="svg-icon" /></Icon ><Icon><dvInfoSvg class="svg-icon" /></Icon
></el-icon> ></el-icon>
</span> </span>
@ -366,6 +366,7 @@ const menuOpt = optName => {
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center;
input { input {
position: absolute; position: absolute;
left: 0; left: 0;
@ -391,5 +392,22 @@ const menuOpt = optName => {
padding: 0 4px; padding: 0 4px;
height: 100%; height: 100%;
} }
.ed-icon{
}
}
</style>
<style>
.ed-popper.is-light {
border: 1px solid #434343;
background: rgba(41, 41, 41, 1) !important;
}
.ed-popper[data-popper-placement^=bottom] .ed-popper__arrow::before {
background: rgba(41, 41, 41, 1) !important;
}
.ed-popover.ed-popper{
background: rgba(41, 41, 41, 1);
border: 1px solid #434343;
} }
</style> </style>

4
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue
View File

@ -300,7 +300,7 @@ init()
:style="{ float: 'right' }" :style="{ float: 'right' }"
@click="removeThreshold(fieldIndex)" @click="removeThreshold(fieldIndex)"
> >
<el-icon size="20px" style="color: #fff"> <el-icon size="20px" style="color: #979797">
<Icon name="icon_delete-trash_outlined" <Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon" ><icon_deleteTrash_outlined class="svg-icon"
/></Icon> /></Icon>
@ -440,7 +440,7 @@ init()
text text
@click="removeCondition(fieldItem, index)" @click="removeCondition(fieldItem, index)"
> >
<el-icon size="20px" style="color: #fff"> <el-icon size="20px" style="color: #979797">
<Icon name="icon_delete-trash_outlined" <Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon" ><icon_deleteTrash_outlined class="svg-icon"
/></Icon> /></Icon>

35
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
View File

@ -428,7 +428,7 @@ init()
:style="{ float: 'right' }" :style="{ float: 'right' }"
@click="removeThreshold(fieldIndex)" @click="removeThreshold(fieldIndex)"
> >
<el-icon size="20px" style="color: #646a73"> <el-icon size="20px" style="color: #979797">
<Icon name="icon_delete-trash_outlined" <Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon" ><icon_deleteTrash_outlined class="svg-icon"
/></Icon> /></Icon>
@ -436,7 +436,7 @@ init()
</el-button> </el-button>
</el-row> </el-row>
<el-row :style="{ marginTop: '16px', borderTop: '1px solid #d5d6d8' }"> <el-row :style="{ marginTop: '16px', borderTop: '1px solid #5f5f5f !important' }">
<el-row <el-row
v-for="(item, index) in fieldItem.conditions" v-for="(item, index) in fieldItem.conditions"
:key="index" :key="index"
@ -764,7 +764,7 @@ init()
text text
@click="removeCondition(fieldItem, index)" @click="removeCondition(fieldItem, index)"
> >
<el-icon size="20px" style="color: #646a73"> <el-icon size="20px" style="color: #979797">
<Icon name="icon_delete-trash_outlined" <Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon" ><icon_deleteTrash_outlined class="svg-icon"
/></Icon> /></Icon>
@ -811,7 +811,7 @@ init()
border-radius: 4px; border-radius: 4px;
padding: 10px 16px; padding: 10px 16px;
margin-top: 10px; margin-top: 10px;
background: #f5f6f7; background:#333333;
} }
.line-item { .line-item {
@ -879,7 +879,7 @@ span {
.tip { .tip {
font-size: 12px; font-size: 12px;
background: #d6e2ff; background: #333333;
border-radius: 4px; border-radius: 4px;
padding: 10px 20px; padding: 10px 20px;
display: flex; display: flex;
@ -914,4 +914,29 @@ span {
justify-content: flex-start; justify-content: flex-start;
padding: 0 11px; padding: 0 11px;
} }
:deep(.ed-input__wrapper){
background-color: #252424 ;
box-shadow: 0 0 0 1px #5f5f5f inset;
}
:deep(.ed-input__inner){
color: #fff;
}
:deep(.ed-select-dropdown__item){
color: #ffffff !important;
}
:deep(.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover){
background: rgb(61,61,61) !important;
}
.ed-select-dropdown__item{
color: #ffffff;
}
.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{
background: rgb(61,61,61);
}
.ed-select-dropdown__item.selected{
color: #0089ff;
}
:deep(.ed-color-picker__trigger){
border: 1px solid #5f5f5f ;
}
</style> </style>

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

@ -166,7 +166,7 @@ init()
</el-form-item> </el-form-item>
</el-space> </el-space>
</el-col> </el-col>
<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: 15px">
<div class="color-title">{{ t('chart.textColor') }}</div> <div class="color-title">{{ t('chart.textColor') }}</div>
<el-color-picker <el-color-picker
is-custom is-custom
@ -192,14 +192,14 @@ init()
</div> </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: 8px">
<el-button <el-button
class="circle-button" class="circle-button circle-buttons"
type="text" type="text"
circle circle
style="float: right" style="float: right"
@click="removeThreshold(index)" @click="removeThreshold(index)"
> >
<template #icon> <template #icon>
<Icon name="icon_delete-trash_outlined" <Icon name="icon_delete-trash_outlined" class=""
><icon_deleteTrash_outlined class="svg-icon" ><icon_deleteTrash_outlined class="svg-icon"
/></Icon> /></Icon>
</template> </template>
@ -214,7 +214,7 @@ init()
.line-item { .line-item {
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
border: 1px solid #dcdfe6; border: 1px solid #363636;
padding: 4px 14px; padding: 4px 14px;
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
@ -267,7 +267,7 @@ span {
} }
.color-title { .color-title {
color: #646a73; color: #ffffff;
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -282,4 +282,47 @@ span {
font-size: 12px; font-size: 12px;
} }
} }
.circle-button{
background: rgb(61,61,61);
color: #fff;
border: 1px solid rgb(61,61,61);
}
.circle-buttons{
background: transparent;
border: none;
}
:deep(.ed-input__wrapper){
background-color: #292929;
box-shadow: 0 0 0 1px #5f5f5f inset;
}
:deep(.ed-color-picker__trigger){
border-color: #5f5f5f;
}
:deep(.ed-input__inner){
color: #fff;
}
:deep(.ed-input-number__decrease){
background-color: #434343 !important;
color:#ffffff;
}
:deep(.ed-input-number__increase){
background-color: #434343 !important;
color:#ffffff;
}
:deep(.ed-input-number.is-controls-right .ed-input-number__increase){
border-bottom: 1px solid #5f5f5f;
border-left: 1px solid #5f5f5f;
}
:deep(.ed-input-number.is-controls-right .ed-input-number__decrease){
border-left: 1px solid #5f5f5f;
}
.ed-select-group__wrap:not(:last-of-type)::after{
background: #5f5f5f;
}
</style>
<style>
.ed-dialog__headerbtn{
color: #ffffff;
}
</style> </style>

9
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderGroupConfig.vue
View File

@ -556,5 +556,14 @@ class GroupMenu extends BaseTooltip {
.button-group { .button-group {
display: flex; display: flex;
justify-content: end; justify-content: end;
.ed-button{
color: #F2F4F5;
background-color: #212121;
border: 1px solid #434343;
}
.ed-button--primary{
background-color:#0089FF;
border: 1px solid #0089FF;
}
} }
</style> </style>

4
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
View File

@ -899,8 +899,8 @@ onMounted(() => {
.table-header-group-config-dialog { .table-header-group-config-dialog {
.ed-dialog__header, .ed-dialog__header,
.ed-dialog__body { .ed-dialog__body {
color: #a6a6a6; color: #ffffff;
background-color: #1a1a1a; background-color: rgb(33,33,33);
margin-right: 0; margin-right: 0;
} }
} }

4
core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue
View File

@ -107,7 +107,7 @@ defineExpose({
width: 100%; width: 100%;
padding: 16px; padding: 16px;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--deBorderBase, #595f6b); border: 1px solid var(--deBorderBase, #333333);
overflow: auto; overflow: auto;
max-height: 500px; max-height: 500px;
.content { .content {
@ -118,7 +118,7 @@ defineExpose({
.ed-button.is-secondary{ .ed-button.is-secondary{
color: #F2F4F5; color: #F2F4F5;
background-color: #212121; background-color: #212121;
border: 1px solid #434343; border: 1px solid #363636;
} }
.ed-button--primary{ .ed-button--primary{
background-color:#0089FF; background-color:#0089FF;

13
core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue
View File

@ -173,7 +173,7 @@ const del = (index, child) => {
background-color: #212121; background-color: #212121;
border:1px solid #434343; border:1px solid #434343;
color: #F2F4F5; color: #F2F4F5;
border-radius: 2px; // border-radius: 2px;
.mrg-title { .mrg-title {
text-align: left; text-align: left;
box-sizing: border-box; box-sizing: border-box;
@ -187,6 +187,10 @@ const del = (index, child) => {
} }
&:hover { &:hover {
.operate-title{
border-right: none;
}
.operate-icon { .operate-icon {
display: inline-block; display: inline-block;
} }
@ -202,10 +206,12 @@ const del = (index, child) => {
width: 40px; width: 40px;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
background-color: #f8f8fa; background-color: #212121;
z-index: 1; z-index: 1;
display: none; display: none;
border-right: 1px solid #434343;
border-top: 1px solid #434343;
border-bottom: 1px solid #434343;
i { i {
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@ -214,6 +220,7 @@ const del = (index, child) => {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
z-index: 10; z-index: 10;
color: #fff;
} }
} }
} }

23
core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue
View File

@ -734,7 +734,7 @@ const emits = defineEmits(['update:item', 'del'])
.filed-title { .filed-title {
word-wrap: break-word; word-wrap: break-word;
line-height: 28px; line-height: 28px;
color: #7e7e7e; color: #fff;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
@ -748,6 +748,7 @@ const emits = defineEmits(['update:item', 'del'])
font-size: 14px; font-size: 14px;
margin: 0 10px; margin: 0 10px;
cursor: pointer; cursor: pointer;
color: #ffffff;
} }
.ed-input { .ed-input {
@ -845,8 +846,8 @@ const emits = defineEmits(['update:item', 'del'])
} }
:deep(.ed-input__wrapper) { :deep(.ed-input__wrapper) {
background-color: #f8f8fa; background-color: #212121;
border: none; border: 1px solid #5f5f5f;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
height: 26px; height: 26px;
@ -878,7 +879,7 @@ const emits = defineEmits(['update:item', 'del'])
} }
} }
.filed:hover { .filed:hover {
background-color: #e9eaef; background-color: rgb(61,61,61);
:deep(.ed-input-number__decrease), :deep(.ed-input-number__decrease),
:deep(.ed-input-number__increase) { :deep(.ed-input-number__increase) {
display: flex; display: flex;
@ -935,10 +936,10 @@ const emits = defineEmits(['update:item', 'del'])
width: 100%; width: 100%;
height: 28px; height: 28px;
padding: 4px 7px; padding: 4px 7px;
color: rgba(0, 0, 0, 0.65); color: #fff;
font-size: 14px; font-size: 14px;
line-height: 28px; line-height: 28px;
background-color: #fff; // background-color: #212121;
background-image: none; background-image: none;
transition: all 0.3s; transition: all 0.3s;
touch-action: manipulation; touch-action: manipulation;
@ -952,9 +953,10 @@ const emits = defineEmits(['update:item', 'del'])
.ed-input__wrapper { .ed-input__wrapper {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #5f5f5f;
background-color: transparent;
&:focus { &:focus {
box-shadow: 0 0 0 2px rgb(46 116 255 / 20%); box-shadow: 0 0 0 2px rgb(61,61,61);
border-right-width: 1px !important; border-right-width: 1px !important;
outline: 0; outline: 0;
border-color: none; border-color: none;
@ -966,7 +968,7 @@ const emits = defineEmits(['update:item', 'del'])
font-family: var(--de-custom_font, 'PingFang'); font-family: var(--de-custom_font, 'PingFang');
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
color: rgba(0, 0, 0, 0.65); color: #fff;
font-size: 14px; font-size: 14px;
font-variant: tabular-nums; font-variant: tabular-nums;
line-height: 1.5; line-height: 1.5;
@ -978,6 +980,9 @@ const emits = defineEmits(['update:item', 'del'])
text-align: start; text-align: start;
padding: 0 6px; padding: 0 6px;
} }
.ed-input__inner{
color: #fff;
}
} }
.de-el-dropdown-menu-fixed { .de-el-dropdown-menu-fixed {

2
core/core-frontend/src/views/chart/components/editor/index.vue
View File

@ -4769,7 +4769,7 @@ span {
.result-style-dark { .result-style-dark {
:deep(.ed-button) { :deep(.ed-button) {
color: #ffffff; color: #ffffff;
background-color: var(--ed-color-primary, #3370ff); background-color: #0089ff !important;
border: none; border: none;
border-radius: 0; border-radius: 0;
} }

4
core/core-frontend/src/views/common/DeResourceTree.vue
View File

@ -940,12 +940,12 @@ background-color: rgb(41, 41, 41);
background-color: rgb(61, 61, 61); background-color: rgb(61, 61, 61);
} }
.ed-tree--highlight-current .ed-tree-node.is-current>.ed-tree-node__content{ .ed-tree--highlight-current .ed-tree-node.is-current>.ed-tree-node__content{
background-color: rgb(61, 61, 61); background-color: rgba(0, 137, 255, 0.3);
} }
.ed-tree-node__content.is-menu:hover{ .ed-tree-node__content.is-menu:hover{
background-color: rgb(61, 61, 61); background-color: rgb(61, 61, 61);
} }
.ed-tree-node.is-current.is-menu>:nth-child(1){ .ed-tree-node.is-current.is-menu>:nth-child(1){
color: #0089ff; color: #fff;
} }
</style> </style>

5
core/core-frontend/src/views/common/MultiplexingCanvas.vue
View File

@ -173,7 +173,7 @@ defineExpose({
.ed-drawer__footer { .ed-drawer__footer {
height: 64px !important; height: 64px !important;
padding: 0px !important; padding: 0px !important;
box-shadow: 0 -1px 0px #5f5f5f; box-shadow: 0 -1px 0px #3a3a3a;
} }
.ed-drawer__body { .ed-drawer__body {
@ -181,13 +181,14 @@ defineExpose({
} }
} }
.ed-select-dropdown__item{ .ed-select-dropdown__item{
color: #ffffff ; color: #ffffff;
} }
.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{ .ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{
background: rgb(61,61,61); background: rgb(61,61,61);
} }
.ed-drawer__header{ .ed-drawer__header{
color: #fff; color: #fff;
border-bottom: 1px solid #3a3a3a
} }
.ed-drawer__close-btn:hover{ .ed-drawer__close-btn:hover{
background:rgb(61,61,61) background:rgb(61,61,61)

2
core/core-frontend/src/views/data-visualization/PreviewShow.vue
View File

@ -338,7 +338,7 @@ onBeforeMount(() => {
width: 279px; width: 279px;
padding: 0; padding: 0;
overflow: visible; overflow: visible;
border-right: 1px solid #5f5f5f; border-right: 1px solid #3a3a3a;
&.retract { &.retract {
display: none; display: none;