forked from github/dataease
refactor(仪表板): 优化组件边框设置，设置时加上当前仪表板背景和和组件颜色
This commit is contained in:
wangjiahao
parent
f86d0c729c
commit
ed4a672627
@ -348,7 +348,7 @@ export default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2120,8 +2120,8 @@ export default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.drag-on-tab-collision {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
},
|
||||
'template-img'
|
||||
]"
|
||||
:style="itemStyle"
|
||||
@click.stop="setBoard"
|
||||
>
|
||||
<svg-icon
|
||||
@ -22,6 +23,7 @@
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { imgUrlTrans } from '@/components/canvas/utils/utils'
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
|
||||
export default {
|
||||
name: 'BackgroundItem',
|
||||
@ -34,6 +36,15 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
itemStyle() {
|
||||
if (this.curComponent.commonBackground.backgroundColorSelect) {
|
||||
return {
|
||||
'background-color': hexColorToRGBA(this.curComponent.commonBackground.color, this.curComponent.commonBackground.alpha)
|
||||
}
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
mainIconClass() {
|
||||
return this.template.url.replace('board/', '').replace('.svg', '')
|
||||
},
|
||||
@ -64,72 +75,73 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
|
||||
.testcase-template {
|
||||
display: inline-block;
|
||||
margin: 10px 0px;
|
||||
width: 90px;
|
||||
}
|
||||
.testcase-template {
|
||||
display: inline-block;
|
||||
margin: 10px 0px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.demonstration {
|
||||
display: block;
|
||||
font-size: 8px;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
width: 130px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.demonstration {
|
||||
display: block;
|
||||
font-size: 8px;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
width: 130px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.template-img {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
width: 130px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
|
||||
border: solid 2px #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.template-img {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
width: 130px;
|
||||
margin: 0 auto;
|
||||
/*box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);*/
|
||||
/*border: solid px #fff;*/
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.template-img:hover {
|
||||
border: solid 1px #4b8fdf;
|
||||
border-radius: 3px;
|
||||
color: deepskyblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
.template-img:hover {
|
||||
border: solid 1px #4b8fdf;
|
||||
border-radius: 3px;
|
||||
color: deepskyblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.template-img > i{
|
||||
display:none;
|
||||
float: right;
|
||||
color: gray;
|
||||
margin: 2px;
|
||||
}
|
||||
.template-img > i {
|
||||
display: none;
|
||||
float: right;
|
||||
color: gray;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.template-img > i:hover {
|
||||
color: red;
|
||||
}
|
||||
.template-img > i:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.template-img:hover > .el-icon-error {
|
||||
display: inline;
|
||||
}
|
||||
.template-img:hover > .el-icon-error {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.template-img:hover > .el-icon-edit {
|
||||
display: inline;
|
||||
}
|
||||
.template-img:hover > .el-icon-edit {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.template-img-active {
|
||||
border: solid 1px red;
|
||||
border-radius: 3px;
|
||||
color: deepskyblue;
|
||||
}
|
||||
.svg-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.template-img-active {
|
||||
border: solid 1px red;
|
||||
border-radius: 3px;
|
||||
color: deepskyblue;
|
||||
}
|
||||
|
||||
.svg-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -150,6 +150,7 @@
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="20"
|
||||
:style="customStyle"
|
||||
class="main-row"
|
||||
>
|
||||
<el-row
|
||||
@ -163,6 +164,7 @@
|
||||
:span="6"
|
||||
>
|
||||
<background-item
|
||||
:style="itemStyle"
|
||||
:template="item"
|
||||
/>
|
||||
</el-col>
|
||||
@ -278,8 +280,29 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
customStyle() {
|
||||
let style = {}
|
||||
if (this.canvasStyleData.openCommonStyle) {
|
||||
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
|
||||
style = {
|
||||
background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
|
||||
...style
|
||||
}
|
||||
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
|
||||
style = {
|
||||
background: this.canvasStyleData.panel.color,
|
||||
...style
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!style.background) {
|
||||
style.background = '#FFFFFF'
|
||||
}
|
||||
return style
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'canvasStyleData',
|
||||
'componentData'
|
||||
]),
|
||||
isFilterComponent() {
|
||||
@ -353,6 +376,7 @@ export default {
|
||||
}
|
||||
|
||||
.main-row {
|
||||
padding-left: 10px;
|
||||
height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -163,7 +163,7 @@ export default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user