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-05-05 18:11:08 +08:00
parent 633cf54f28
commit 68d4aa7fac
14 changed files with 328 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
View File

@ -185,6 +185,7 @@ const saveSelfSubject = () => {
top: 4px; top: 4px;
right: 4px; right: 4px;
font-size: 12px; font-size: 12px;
color: #0089ff;
} }
} }

27
core/core-frontend/src/components/dashboard/DbToolbar.vue
View File

@ -696,6 +696,7 @@ const initOpenHandler = newWindow => {
@click="saveCanvasWithCheck()" @click="saveCanvasWithCheck()"
style="float: right; margin-right: 12px" style="float: right; margin-right: 12px"
type="primary" type="primary"
class="savebtn"
> >
{{ t('data_set.save') }} {{ t('data_set.save') }}
</el-button> </el-button>
@ -813,10 +814,11 @@ const initOpenHandler = newWindow => {
height: @top-bar-height; height: @top-bar-height;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
background: #050e21; background: #252626;
color: #ffffff; color: #ffffff;
display: flex; display: flex;
transition: 0.5s; transition: 0.5s;
box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
.back-icon { .back-icon {
margin-left: 20px; margin-left: 20px;
margin-top: 22px; margin-top: 22px;
@ -893,16 +895,18 @@ const initOpenHandler = newWindow => {
.preview-button { .preview-button {
border-color: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.3);
color: #ffffff; color: #ffffff;
background-color: #050e21; // background-color: #050e21;
background-color: transparent;
border-color: rgba(255, 255, 255, 0.3);
&:hover, &:hover,
&:focus { &:focus {
background-color: #121a2c; // background-color: #121a2c;
border-color: #595f6b; // border-color: #595f6b;
} }
&:active { &:active {
border-color: #616774; // border-color: #616774;
background-color: #1e2637; // background-color: #1e2637;
} }
} }
.custom-normal-button { .custom-normal-button {
@ -929,4 +933,15 @@ const initOpenHandler = newWindow => {
font-weight: 400; font-weight: 400;
padding-top: 14px; padding-top: 14px;
} }
.savebtn {
background: #0089ff;
border: 1px solid #0089ff;
}
.ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover {
color: #fff;
cursor: not-allowed;
background-image: none;
background-color: #99b8ff;
border-color: #99b8ff;
}
</style> </style>

2
core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
View File

@ -179,7 +179,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
font-size: 12px !important; font-size: 12px !important;
font-weight: 400 !important; font-weight: 400 !important;
line-height: 20px; line-height: 20px;
color: #646a73 !important; color: #A6A6A6 !important;
} }
:deep(.ed-radio) { :deep(.ed-radio) {

15
core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
View File

@ -14,7 +14,7 @@
:src="imgUrlTrans(subjectItem.coverUrl)" :src="imgUrlTrans(subjectItem.coverUrl)"
alt="" alt=""
width="172" width="172"
height="79" height="77"
/> />
<Icon v-else name="dv-no-img" <Icon v-else name="dv-no-img"
><dvNoImg class="svg-icon" style="width: 172px; height: 79px" ><dvNoImg class="svg-icon" style="width: 172px; height: 79px"
@ -130,14 +130,14 @@ onMounted(() => {
width: 182px; width: 182px;
height: 116px; height: 116px;
margin: 4px; margin: 4px;
border: 1px solid #dee0e3; border: 1px solid #676767;
border-radius: 5px; border-radius: 5px;
} }
.subject-template:hover { .subject-template:hover {
color: deepskyblue; color: #0089ff;
cursor: pointer; cursor: pointer;
border-color: var(--ed-color-primary-99, rgba(51, 112, 255, 0.6)); border-color: #0089ff;
} }
.demonstration { .demonstration {
@ -159,6 +159,7 @@ onMounted(() => {
//inset: 0 0 30px; //inset: 0 0 30px;
box-sizing: border-box; box-sizing: border-box;
background-size: contain; background-size: contain;
// margin-bottom: 1px;
} }
.vertical-layout > i { .vertical-layout > i {
@ -188,7 +189,7 @@ onMounted(() => {
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
color: #1f2329; color: #fff;
text-align: left; text-align: left;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: pre; white-space: pre;
@ -220,7 +221,7 @@ onMounted(() => {
.title-main { .title-main {
height: 31px; height: 31px;
display: flex; display: flex;
border-top: 1px solid #dee0e3; border-top: 1px solid #5f5f5f;
width: 180px; width: 180px;
} }
@ -245,7 +246,7 @@ onMounted(() => {
.m-custom-icon { .m-custom-icon {
display: none; display: none;
color: #646a73; color: #fff;
&:hover { &:hover {
background: rgba(31, 35, 41, 0.1) !important; background: rgba(31, 35, 41, 0.1) !important;

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

@ -257,10 +257,10 @@ const menuOpt = optName => {
} }
.aside-area-light { .aside-area-light {
color: @canvas-main-font-color-light; color: #ebebeb;
background-color: #fff; background-color: #1a1a1a;
:deep(.title) { :deep(.title) {
border-bottom: #d5d6d8 1px solid !important; border-bottom: rgba(255, 255, 255, 0.15) 1px solid !important;
} }
} }
.dv-aside { .dv-aside {
@ -279,7 +279,7 @@ const menuOpt = optName => {
.title-light { .title-light {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
border-bottom: #d5d6d8 1px solid; border-bottom: rgba(255, 255, 255, 0.15) 1px solid;
height: 45px; height: 45px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -396,7 +396,6 @@ const menuOpt = optName => {
} }
} }
</style> </style>
<style> <style>
.ed-popper.is-light { .ed-popper.is-light {
@ -410,4 +409,143 @@ const menuOpt = optName => {
background: rgba(41, 41, 41, 1); background: rgba(41, 41, 41, 1);
border: 1px solid #434343; border: 1px solid #434343;
} }
.ed-collapse-item.ed-collapse--light .ed-collapse-item__header{
background-color: #1a1a1a;
color: #fff;
}
.ed-collapse-item__header{
border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
.ed-collapse-item__wrap{
background-color: #292929;
}
.ed-collapse-item__wrap .ed-form--default.ed-form--label-top .ed-form-item .ed-form-item__label{
color: #a6a6a6;
}
.ed-collapse-item__wrap .ed-radio .ed-radio__label{
color: #fff;
}
.ed-collapse-item__wrap .ed-radio .ed-radio__input.is-checked + .ed-radio__label{
color: #0089ff !important;
}
.ed-collapse-item__wrap .ed-input.is-disabled .ed-input__wrapper{
background-color: #373737;
box-shadow: 0 0 0 1px #5f5f5f inset;
}
.ed-collapse-item__wrap .ed-input--light .ed-input-group__append .ed-select.ed-select--disabled .ed-input__wrapper {
background: #373737 !important;
box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
}
.ed-collapse-item__wrap .ed-input--dark .ed-input-group__append .ed-select .ed-input__wrapper {
background: #373737 !important;
box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
}
.ed-collapse-item__wrap .ed-input-group__append, .ed-input-group__prepend{
background: #373737 !important;
}
.ed-collapse-item__wrap .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled) .ed-input .ed-input__wrapper{
box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
}
.ed-collapse-item__wrap .image-hint{
color:#757575 !important;
}
.ed-collapse-item__wrap .avatar-uploader .ed-upload--picture-card {
background: #373737 !important;
border: 1px dashed #373737 !important;
}
.ed-collapse-item__wrap .indented-container .indented-item.disabled .img-area_light .ed-upload--picture-card .ed-icon {
color: #5f5f5f !important;
}
.ed-collapse-item__wrap .avatar-uploader .ed-upload--picture-card .ed-icon{
color: #ebebeb !important;
}
.ed-collapse-item__wrap .ed-input-number__decrease, .ed-input-number__increase{
background-color: #434343 !important;
color:#ffffff;
}
.ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__increase{
border-bottom: 1px solid #5f5f5f !important;
border-left: 1px solid #5f5f5f !important;
}
.ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__decrease{
border-left: 1px solid #5f5f5f !important;
}
.ed-collapse-item__wrap .ed-input.is-disabled .ed-select__prefix--light{
border-color: #5f5f5f;
}
.ed-collapse-item__wrap .ed-color-picker.is-custom.is-disabled .ed-color-picker__trigger{
border-color: #5f5f5f;
}
.ed-collapse-item__wrap .ed-select .ed-input.is-disabled:not(.ed-input--dark) .ed-input__wrapper:hover{
box-shadow: 0 0 0 1px #5f5f5f;
}
.ed-collapse-item__wrap .custom-color-setting-btn{
border: 1px solid #5f5f5f !important;
color: #fff !important;
}
.ed-collapse-item__wrap .ed-form-item__label{
color: #A6A6A6 !important;
}
.ed-collapse-item__wrap .custom-color-extend-setting{
color: #A6A6A6 !important;
}
.ed-collapse-item.ed-collapse--light .ed-collapse-item__content{
color: #A6A6A6 ;
}
.ed-collapse-item__wrap .m-divider{
border-color: rgba(233, 236, 241, 0.15) !important;
}
.ed-collapse-item__wrap .icon-btn{
color: #ffffff !important;
}
.ed-collapse-item__wrap .icon-btn.active{
color: #0089ff !important;
}
.ed-collapse-item__wrap .color-button-outer{
border-color: rgba(233, 236, 241, 0.15) !important;
}
.ed-collapse-item__wrap .text-area{
color: #fff !important;
}
.ed-collapse-item__wrap .ed-radio__input.is-disabled.is-checked .ed-radio__inner {
background-color: #5f5f5f;
border: 1px solid #5f5f5f;
}
.ed-collapse-item__wrap .ed-radio__input.is-disabled.is-checked .ed-radio__inner::after {
background-color: #212121;
}
.ed-collapse-item__wrap .ed-radio .ed-radio__input.is-disabled.is-checked + .ed-radio__label {
color: #bbbfc4 !important;
}
.editor-light .editor-title{
color: #ebebeb;
}
.editor-dark {
border-left: solid 1px rgba(235, 235, 235, 0.15) !important;
}
.content-area {
border-left: solid 1px rgba(235, 235, 235, 0.15) !important;
}
.editor-light .dataset-main {
border-left: 1px solid rgba(235, 235, 235, 0.15) !important;
}
.collapse-title{
color: #ebebeb !important;
}
.editor-light .ed-tabs__header {
border-top: 1px solid #363636 !important;
}
.de-chart-editor .tab-header .ed-tabs__nav-wrap::after{
background-color: rgba(235, 235, 235, 0.15) !important;
}
.de-chart-editor .tab-header .ed-tabs__item{
color: #A6A6A6 !important;
}
.de-chart-editor .drag-block-style{
border: 1px dashed #5f5f5f !important;
background-color: rgba(235, 235, 235, 0.05) !important;
}
.editor-light .item-span-style{
color: #fff !important;
}
</style> </style>

4
core/core-frontend/src/custom-component/component-group/DragComponent.vue
View File

@ -47,10 +47,10 @@ const { icon, name, label, dragInfo, themes } = toRefs(props)
<style lang="less" scoped> <style lang="less" scoped>
.drag-light { .drag-light {
:deep(.icon-content) { :deep(.icon-content) {
background-color: #f5f6f7 !important; background-color: #1a1a1a !important;
} }
:deep(.label-content) { :deep(.label-content) {
color: #646a73 !important; color: #A6A6A6 !important;
} }
} }
.drag-component { .drag-component {

8
core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
View File

@ -177,13 +177,13 @@ const loadPluginCategory = data => {
border-left: 1px solid @side-outline-border-color-light!important; border-left: 1px solid @side-outline-border-color-light!important;
} }
:deep(.item-top) { :deep(.item-top) {
background-color: #f5f6f7 !important; background-color: #1a1a1a !important;
} }
:deep(.ul-custom) { :deep(.ul-custom) {
color: @chart-change-font-color-light!important; color: @chart-change-font-color-light!important;
} }
:deep(.li-custom) { :deep(.li-custom) {
color: #646a73 !important; color: #a6a6a6 !important;
&.li-custom-active { &.li-custom-active {
color: var(--ed-color-primary) !important; color: var(--ed-color-primary) !important;
} }
@ -192,10 +192,10 @@ const loadPluginCategory = data => {
} }
} }
:deep(.item-bottom) { :deep(.item-bottom) {
color: @chart-change-font-color-light!important; color: @chart-change-font-color-light ;
} }
:deep(.item-top-icon) { :deep(.item-top-icon) {
color: @chart-change-font-color-light!important; color: @chart-change-font-color-light;
} }
:deep(.group-title) { :deep(.group-title) {
color: #1f2329; color: #1f2329;

6
core/core-frontend/src/style/index.less
View File

@ -212,9 +212,9 @@ body {
.custom-popover-light { .custom-popover-light {
min-width: 50px !important; min-width: 50px !important;
background: @side-content-background-light !important; background: @side-content-background-light;
padding: 0px 4px 0 4px !important; padding: 0px 4px 0 4px !important;
border: 1px solid @side-outline-border-color-light !important; border: 1px solid @side-outline-border-color-light;
} }
.custom-row { .custom-row {
@ -585,7 +585,7 @@ strong {
.preview-content-inner-width-first { .preview-content-inner-width-first {
width: 100%; width: 100%;
height: auto; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }

4
core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
View File

@ -136,10 +136,10 @@ const groupActiveChange = category => {
color: @chart-change-font-color-light!important; color: @chart-change-font-color-light!important;
} }
:deep(.item-bottom) { :deep(.item-bottom) {
color: @chart-change-font-color-light!important; color: @chart-change-font-color-light;
} }
:deep(.item-top-icon) { :deep(.item-top-icon) {
color: @chart-change-font-color-light!important; color: @chart-change-font-color-light;
} }
} }
.group { .group {

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

@ -258,14 +258,14 @@ const onStyleAttrChange = params => {
font-weight: 500 !important; font-weight: 500 !important;
&.is-active { &.is-active {
color: #1f2329; color: #ffffff;
} }
.ed-collapse-item__arrow { .ed-collapse-item__arrow {
margin: 0 6px 0 8px; margin: 0 6px 0 8px;
&.is-active { &.is-active {
color: #646a73; color: #A6A6A6;
} }
} }
} }

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

@ -4111,11 +4111,11 @@ const deleteChartFieldItem = id => {
} }
.editor-light { .editor-light {
border-left: solid 1px @side-outline-border-color-light !important; border-left: solid 1px @side-outline-border-color-light;
color: @canvas-main-font-color-light!important; color: @canvas-main-font-color-light;
background-color: @side-area-background-light!important; background-color: @side-area-background-light;
:deep(.ed-tabs__header) { :deep(.ed-tabs__header) {
border-top: solid 1px @side-outline-border-color-light !important; border-top: solid 1px @side-outline-border-color-light;
} }
:deep(.drag_main_area) { :deep(.drag_main_area) {
border-top: solid 1px @side-outline-border-color-light !important; border-top: solid 1px @side-outline-border-color-light !important;
@ -4130,7 +4130,7 @@ const deleteChartFieldItem = id => {
border-top: 1px solid @side-outline-border-color-light !important; border-top: 1px solid @side-outline-border-color-light !important;
} }
:deep(.dataset-main) { :deep(.dataset-main) {
border-left: 1px solid @side-outline-border-color-light !important; border-left: 1px solid @side-outline-border-color-light;
} }
:deep(input) { :deep(input) {
font-size: 12px; font-size: 12px;
@ -4140,14 +4140,14 @@ const deleteChartFieldItem = id => {
background-color: @side-outline-border-color-light !important; background-color: @side-outline-border-color-light !important;
} }
:deep(.item-span-style) { :deep(.item-span-style) {
color: @canvas-main-font-color-light!important; color: @canvas-main-font-color-light;
} }
:deep(.editor-title) { :deep(.editor-title) {
color: #1f2329 !important; color: #1f2329;
} }
:deep(.collapse-title) { :deep(.collapse-title) {
color: #1f2329 !important; color: #1f2329;
} }
:deep(.collapse-icon) { :deep(.collapse-icon) {
color: #646a73 !important; color: #646a73 !important;
@ -4214,7 +4214,7 @@ const deleteChartFieldItem = id => {
// editor form 全局样式 // editor form 全局样式
.editor-dark { .editor-dark {
border-left: solid 1px @main-collapse-border-dark !important; border-left: solid 1px @main-collapse-border-dark;
.dataset-selector { .dataset-selector {
:deep(.ed-input__inner), :deep(.ed-input__inner),
:deep(.ed-input__wrapper), :deep(.ed-input__wrapper),
@ -4324,14 +4324,14 @@ span {
&.is-active { &.is-active {
border-bottom-color: var(--ed-collapse-border-color); border-bottom-color: var(--ed-collapse-border-color);
color: #1f2329; color: #ffffff;
} }
.ed-collapse-item__arrow { .ed-collapse-item__arrow {
margin: 0 6px 0 8px; margin: 0 6px 0 8px;
&.is-active { &.is-active {
color: #646a73; color: #A6A6A6;
} }
} }
} }
@ -4805,6 +4805,7 @@ span {
height: 40px; height: 40px;
width: 100%; width: 100%;
border-radius: 0; border-radius: 0;
background-color: #0089ff;
} }
.switch-chart-dark { .switch-chart-dark {
@ -4828,7 +4829,7 @@ span {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
color: #1f2329; color: #fff;
font-weight: 500; font-weight: 500;
&.dark { &.dark {
@ -5118,7 +5119,7 @@ span {
.field-setting { .field-setting {
position: absolute; position: absolute;
right: 8px; right: 8px;
color: #646a73; color: #a6a6a6;
&.remove-icon--dark { &.remove-icon--dark {
color: #a6a6a6; color: #a6a6a6;
} }
@ -5287,4 +5288,83 @@ span {
.ed-tree{ .ed-tree{
background:transparent background:transparent
} }
.ed-button.is-secondary{
background: rgba(235, 235, 235, 0.05);
border-color: #5f5f5f;
color: #CCCCCC;
}
.ed-button.is-secondary:focus, .ed-button.is-secondary:hover{
background: rgba(235, 235, 235, 0.05);
}
.de-chart-editor .result-style-input .result-count-label{
color: #fff !important;
}
.de-chart-editor .ed-input.is-disabled .ed-input__wrapper {
box-shadow: 0 0 0 1px #5f5f5f inset;
background-color: #373737;
}
.de-chart-editor .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled):hover .ed-input__wrapper{
box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
}
.de-chart-editor .ed-input-group__append, .ed-input-group__prepend{
background: #373737 !important;
}
.de-chart-editor .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled) .ed-input .ed-input__wrapper{
box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
}
.de-chart-editor .view-panel-row .ed-collapse-item__header.is-active{
color: #fff !important;
}
.de-chart-editor .ed-input-group__append{
box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
}
.remark-label{
color: #A6A6A6 !important;
}
.de-chart-editor .dataset-search-input .ed-input__wrapper{
border-bottom: 1px solid hsla(0, 0%, 100%, 0.15) !important;
background-color: #1a1a1a !important;
}
.de-chart-editor .dataset-search-input .ed-input__inner{
background-color: #1a1a1a !important;
color: #ffffff !important;
}
.de-chart-editor .field-height label{
color: #A6A6A6 !important;
}
.de-chart-editor .field-height .divider{
background-color: rgba(255, 255, 255, 0.15) !important;
}
.customDatasetSelect .ed-container .ed-main .ed-tree.dark .ed-tree-node__content:hover{
background: rgba(235, 235, 235, 0.1);
}
.ed-tree-node__content:hover{
background: rgba(235, 235, 235, 0.1);
}
.de-chart-editor .field-name{
color: #A6A6A6 !important;
}
.de-chart-editor .field-search-icon-btn{
color: #A6A6A6 !important;
}
.right-dimension .item .items:hover{
background: rgba(235, 235, 235, 0.1) !important;
}
.ed-collapse-item.ed-collapse--light .ed-collapse-item__header .ed-collapse-item__arrow{
color: #A6A6A6 !important;
}
.ed-input .ed-select__prefix--light{
color: #8d9199;
border-right: 1px solid #5f5f5f;
}
.config-hidden .wrapper-inner-adaptor {
background: transparent !important;
border-color: #5f5f5f !important;
}
.select-to-dashboard .ed-icon{
color: #0099ff;
}
.config-hidden .wrapper-inner-adaptor:hover{
border-color: #0089ff !important;
}
</style> </style>

54
core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
View File

@ -297,7 +297,7 @@ const save = () => {
<Icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></Icon> <Icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></Icon>
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
<el-button type="primary" @click="save">保存</el-button> <el-button type="primary" style="background-color: #0089ff;border-color: #0089ff;" @click="save">保存</el-button>
</div> </div>
</div> </div>
<div class="mobile-canvas" :style="mobileStyle" v-if="mobileStyle"> <div class="mobile-canvas" :style="mobileStyle" v-if="mobileStyle">
@ -373,15 +373,14 @@ const save = () => {
width: 100vw; width: 100vw;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #f5f6f7;
.top-bar { .top-bar {
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
background: #050e21; background: #252626;
box-shadow: 0px 2px 4px 0px #1f23291f; box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
height: 64px; height: 64px;
padding: 0 24px 0 20px; padding: 0 24px 0 20px;
display: flex; display: flex;
@ -392,6 +391,7 @@ const save = () => {
display: flex; display: flex;
align-items: center; align-items: center;
.switch-pc { .switch-pc {
color: #A6A6A6;
&::after { &::after {
content: ''; content: '';
border-radius: 4px; border-radius: 4px;
@ -504,7 +504,7 @@ const save = () => {
.mobile-com-list { .mobile-com-list {
float: right; float: right;
width: 420px; width: 420px;
background-color: #fff; background-color: #1a1a1a;
position: relative; position: relative;
border-left: rgba(31, 35, 41, 0.15) 1px solid; border-left: rgba(31, 35, 41, 0.15) 1px solid;
height: calc(100% - 64px); height: calc(100% - 64px);
@ -516,11 +516,11 @@ const save = () => {
& > :deep(.ed-tabs) { & > :deep(.ed-tabs) {
--ed-tabs-header-height: 36px; --ed-tabs-header-height: 36px;
border-top: 1px solid #1f232926; border-top: 1px solid #363636;
position: sticky; position: sticky;
top: 38px; top: 38px;
left: 0; left: 0;
background: #fff; background: #1a1a1a;
z-index: 25; z-index: 25;
.ed-tabs__header { .ed-tabs__header {
padding-left: 8px; padding-left: 8px;
@ -541,7 +541,7 @@ const save = () => {
} }
:deep(.ed-tabs__item):not(.is-active) { :deep(.ed-tabs__item):not(.is-active) {
color: #646a73; color: #A6A6A6;
} }
.config-mobile-sidebar { .config-mobile-sidebar {
@ -552,7 +552,8 @@ const save = () => {
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
background: #fff; background: #1a1a1a;
color: #ffffff;
z-index: 25; z-index: 25;
} }
@ -635,4 +636,39 @@ const save = () => {
width: 90% !important; width: 90% !important;
} }
} }
.ed-tabs__nav-wrap::after{
background-color: rgba(235, 235, 235, 0.15) !important;
}
.ed-checkbox__input.is-disabled .ed-checkbox__inner{
background-color: #373737;
border-color: #5f5f5f;
}
.ed-color-picker.is-custom.is-disabled .ed-color-picker__trigger{
border-color: #5f5f5f;
}
.mobile-background-selector .avatar-uploader .ed-upload--picture-card {
background: #373737 !important;
border: 1px dashed #373737 !important;
}
.mobile-background-selector .avatar-uploader .ed-upload--picture-card .ed-icon{
color: #ebebeb !important;
}
.ed-message-box{
background: #212121;
}
.ed-message-box__content{
color: #ffffff;
}
.ed-message-box__btns .ed-button--primary{
background: #0089ff;
border-color: #0089ff;
}
.ed-message-box__btns .ed-button.is-secondary{
color: #F2F4F5 !important;
background-color: #212121 !important;
border: 1px solid #434343 !important;
}
.custom-popover-light{
border: 1px solid#363636 !important;
}
</style> </style>

6
core/core-frontend/src/viewsnew/application/module/index.vue
View File

@ -6,6 +6,7 @@ import Rightmenu from './Rightmenu/index.vue'
import { findApplicationById } from "@/api/application/application"; import { findApplicationById } from "@/api/application/application";
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue' import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils' import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
@ -68,7 +69,7 @@ function getInit() {
const loadCanvasData = (dvId, weight?, ext?) => { const loadCanvasData = (dvId, weight?, ext?) => {
// const initMethod = props.showPosition === 'multiplexing' ? initCanvasDataPrepare : initCanvasData // const initMethod = props.showPosition === 'multiplexing' ? initCanvasDataPrepare : initCanvasData
const initMethod = initCanvasData const initMethod = initCanvasData
dataInitState.value = false dataInitState.value = false
initMethod( initMethod(
dvId, dvId,
@ -109,7 +110,6 @@ function handleNodeClick(e){
loadCanvasData(e.id,9,0) loadCanvasData(e.id,9,0)
} }
onBeforeMount(() => { onBeforeMount(() => {
dvMainStore.canvasDataInit() dvMainStore.canvasDataInit()
}) })
</script> </script>
@ -128,7 +128,7 @@ onBeforeMount(() => {
:dv-info="state.dvInfo" :dv-info="state.dvInfo"
:cur-preview-gap="state.curPreviewGap" :cur-preview-gap="state.curPreviewGap"
:download-status="downloadStatus" :download-status="downloadStatus"
></dv-preview> ></dv-preview>
</div> </div>
</div> </div>
</template> </template>

1
core/core-frontend/src/viewsnew/data-visualization/DvPreview.vue
View File

@ -41,7 +41,6 @@ const props = defineProps({
default: false default: false
} }
}) })
console.log(props)
const restore = () => { const restore = () => {
dePreviewRef.value.restore() dePreviewRef.value.restore()
} }