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>
<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
v-if="config.type==='custom'"
:id="'component' + config.id"
@ -56,6 +57,17 @@ export default {
}
},
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() {
const style = {
width: '100%',
@ -69,13 +81,7 @@ export default {
colorRGBA = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha)
}
if (this.config.commonBackground.enable) {
if (this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === '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') {
if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat ${colorRGBA}`
} else {
style['background-color'] = colorRGBA
@ -135,4 +141,15 @@ export default {
height: 200px!important;
position: relative;
}
.inner-item {
position: relative;
}
.svg-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>