center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

style(仪表板): 边框样式修改

Browse Source
This commit is contained in:
wangjiahao 2022-08-18 18:15:51 +08:00
parent 6799914497
commit eb26062043
1 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/views/panel/edit/ComponentWaitItem.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div class="component-item"> <div class="component-item">
<div :style="commonStyle"> <mobile-check-bar v-if="mobileCheckBarShow" :element="config" />
<mobile-check-bar v-if="mobileCheckBarShow" :element="config" /> <div :style="commonStyle" class="inner-item">
<svg-icon v-if="svgInnerEnable" :style="{'color':this.config.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainSlotSvgInner" />
<de-out-widget <de-out-widget
v-if="config.type==='custom'" v-if="config.type==='custom'"
:id="'component' + config.id" :id="'component' + config.id"
@ -56,6 +57,17 @@ export default {
} }
}, },
computed: { computed: {
svgInnerEnable() {
return this.config.commonBackground.enable && this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string'
},
mainSlotSvgInner() {
if (this.svgInnerEnable) {
return this.config.commonBackground.innerImage.replace('board/', '').replace('.svg', '')
} else {
return null
}
},
commonStyle() { commonStyle() {
const style = { const style = {
width: '100%', width: '100%',
@ -69,13 +81,7 @@ export default {
colorRGBA = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha) colorRGBA = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha)
} }
if (this.config.commonBackground.enable) { if (this.config.commonBackground.enable) {
if (this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string') { if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
let innerImage = this.config.commonBackground.innerImage
if (this.screenShot) {
innerImage = innerImage.replace('svg', 'png')
}
style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}`
} else if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat ${colorRGBA}` style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat ${colorRGBA}`
} else { } else {
style['background-color'] = colorRGBA style['background-color'] = colorRGBA
@ -135,4 +141,15 @@ export default {
height: 200px!important; height: 200px!important;
position: relative; position: relative;
} }
.inner-item {
position: relative;
}
.svg-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style> </style>