diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 4d11ced659..307613ee69 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -30,7 +30,7 @@
]"
:style="mainSlotStyle"
>
-
+
-
{{ template.name }}
-
@@ -59,25 +57,25 @@ export default {
.testcase-template {
display: inline-block;
- margin: 10px 30px;
- width: 150px;
+ margin: 10px 0px;
+ width: 90px;
}
.demonstration {
display: block;
- font-size: 14px;
+ font-size: 8px;
color: gray;
text-align: center;
margin: 10px auto;
- width: 150px;
+ width: 130px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.template-img {
- height: 112px;
- width: 200px;
+ 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;
diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue
index d91dcd9809..9807d56b51 100644
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@@ -1,24 +1,75 @@
-
-
- {{ key }}
-
-
+
+
+ {{ $t('panel.choose_background') }}
+ {{ $t('commons.enable') }}
+
+ Tips:{{ $t('panel.choose_background_tips') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('panel.photo') }}
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+ 边框
+
+
+
+ {{ key }}
+
+
+
+
-
- {{ $t('commons.enable') }}
-
-
+
{{ $t('commons.cancel') }}
{{ $t('commons.confirm') }}
@@ -32,6 +83,7 @@ import BackgroundItem from '@/views/background/BackgroundItem'
import { mapState } from 'vuex'
import eventBus from '@/components/canvas/utils/eventBus'
import { deepCopy } from '@/components/canvas/utils/utils'
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
name: 'Background',
@@ -40,11 +92,19 @@ export default {
return {
BackgroundShowMap: {},
checked: false,
- backgroundOrigin: {}
-
+ backgroundOrigin: {},
+ fileList: [],
+ dialogImageUrl: '',
+ dialogVisible: false,
+ uploadDisabled: false,
+ panel: null,
+ predefineColors: COLOR_PANEL
}
},
mounted() {
+ if (this.curComponent.commonBackground.outerImage && typeof (this.curComponent.commonBackground.outerImage) === 'string') {
+ this.fileList.push({ url: this.curComponent.commonBackground.outerImage })
+ }
this.backgroundOrigin = deepCopy(this.curComponent.commonBackground)
this.queryBackground()
},
@@ -65,11 +125,44 @@ export default {
this.curComponent.commonBackground.color = this.backgroundOrigin.color
this.curComponent.commonBackground.innerImage = this.backgroundOrigin.innerImage
this.curComponent.commonBackground.outerImage = this.backgroundOrigin.outerImage
+ this.curComponent.commonBackground.alpha = this.backgroundOrigin.alpha
+ this.curComponent.commonBackground.borderRadius = this.backgroundOrigin.borderRadius
eventBus.$emit('backgroundSetClose')
},
save() {
this.$store.commit('recordSnapshot')
eventBus.$emit('backgroundSetClose')
+ },
+ commitStyle() {
+ const canvasStyleData = deepCopy(this.canvasStyleData)
+ canvasStyleData.panel = this.panel
+ this.$store.commit('setCanvasStyle', canvasStyleData)
+ this.$store.commit('recordSnapshot', 'commitStyle')
+ },
+ onChangeType() {
+ this.commitStyle()
+ },
+ handleRemove(file, fileList) {
+ this.uploadDisabled = false
+ this.panel.imageUrl = null
+ this.fileList = []
+ this.commitStyle()
+ },
+ handlePictureCardPreview(file) {
+ this.dialogImageUrl = file.url
+ this.dialogVisible = true
+ },
+ onChange(file, fileList) {
+ var _this = this
+ _this.uploadDisabled = true
+ const reader = new FileReader()
+ reader.onload = function() {
+ _this.curComponent.commonBackground.outerImage = reader.result
+ }
+ reader.readAsDataURL(file.raw)
+ },
+ upload(file) {
+ // console.log('this is upload')
}
}
@@ -85,7 +178,7 @@ export default {
}
.main-row{
- height: 60vh;
+ height: 40vh;
overflow-y: auto;
}
@@ -93,5 +186,44 @@ export default {
margin: 15px 0px 5px;
text-align: center;
}
+ .avatar-uploader>>>.el-upload {
+ width: 120px;
+ height: 80px;
+ line-height: 90px;
+ }
+ .avatar-uploader>>>.el-upload-list li{
+ width: 120px !important;
+ height: 80px !important;
+ }
+ .disabled>>>.el-upload--picture-card {
+ display: none;
+ }
+ .shape-item{
+ padding: 6px;
+ border: none;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .form-item-slider>>>.el-form-item__label{
+ font-size: 12px;
+ line-height: 38px;
+ }
+ .form-item>>>.el-form-item__label{
+ font-size: 12px;
+ }
+ .el-select-dropdown__item{
+ padding: 0 20px;
+ }
+ span{
+ font-size: 12px
+ }
+ .el-form-item{
+ margin-bottom: 6px;
+ }
+ .main-content{
+ border:1px solid #E6E6E6;
+ }