|
|
@@ -270,14 +270,109 @@
|
|
|
</div>
|
|
|
<!-- 添加按钮 4 -->
|
|
|
<div class="panel panel-element clearfix" v-if="panelState === 4">
|
|
|
- <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton="true" />
|
|
|
+ <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton="true"
|
|
|
+ :showSelectedPicOrUnSelectedPic="uploadSelectedPicOrUnSelectedPic" />
|
|
|
</div>
|
|
|
<!-- 图层编辑面板 -->
|
|
|
- <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10" />
|
|
|
+ <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10"
|
|
|
+ :showSelectedPicOrUnSelectedPic="uploadSelectedPicOrUnSelectedPic" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<PreView :itemId="itemId" @hideView="showPreView=false" v-if="showPreView" />
|
|
|
+ <div v-show="dialogVisible" class="dialog">
|
|
|
+ <div style="width:560px;height: 353px;background:rgba(255,255,255,1);
|
|
|
+ box-shadow:0px 5px 11px 0px rgba(78,93,255,0.42); margin:0 auto; margin-top:10%;
|
|
|
+ border-radius:6px;">
|
|
|
+ <div style="width:560px;
|
|
|
+ height:34px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background:rgba(78,93,255,1);
|
|
|
+ border-radius:6px 6px 0px 0px;">
|
|
|
+
|
|
|
+ <span style="font-size:16px;
|
|
|
+ font-family:PingFangSC;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(255,255,255,1); margin-left:20px;
|
|
|
+ line-height:34px;">上传按钮样式</span>
|
|
|
+
|
|
|
+ <img src="../../assets/images/close-icon.png"
|
|
|
+ style="width: 16px; height: 16px; margin-right: 10px; cursor: pointer;" @click="dialogVisible=false"></img>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;flex-direction: row; justify-content: center;margin-top:42px;margin-bottom:40px;">
|
|
|
+ <div style="width:130px; display: flex;
|
|
|
+ flex-direction: column; align-items: center;
|
|
|
+ ">
|
|
|
+ <span style="font-size:14px;
|
|
|
+ font-family:MicrosoftYaHei;display:block;
|
|
|
+ color:rgba(51,51,51,1); margin-bottom:14px;
|
|
|
+ line-height:19px;">默认状态</span>
|
|
|
+ <label class="lable">
|
|
|
+ <div style="width:100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height:100%;
|
|
|
+ border:1px dashed rgba(100,107,129,1);">
|
|
|
+ <img style="width:16px;
|
|
|
+ height:16px;" src="../../assets/images/add-ele.png" />
|
|
|
+ <span style="font-size:12px;
|
|
|
+ font-family:PingFangSC-Regular;
|
|
|
+ font-weight:400;
|
|
|
+ margin-top: 6px;
|
|
|
+ color:rgba(51,51,51,1);
|
|
|
+ line-height:17px;">上传素材</span>
|
|
|
+ </div>
|
|
|
+ <input style="display: none;" type="file" multiple="false">
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="width:130px; display: flex;
|
|
|
+ flex-direction: column; align-items: center;
|
|
|
+ margin-left:70px;">
|
|
|
+ <span style="font-size:14px;
|
|
|
+ font-family:MicrosoftYaHei;display:block;
|
|
|
+ color:rgba(51,51,51,1);margin-bottom:14px;
|
|
|
+ line-height:19px;">选中状态</span>
|
|
|
+ <label class="lable">
|
|
|
+ <div style="width:100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height:100%;
|
|
|
+ border:1px dashed rgba(100,107,129,1);">
|
|
|
+ <img style="width:16px;
|
|
|
+ height:16px;" src="../../assets/images/add-ele.png" />
|
|
|
+ <span style="font-size:12px;
|
|
|
+ font-family:PingFangSC-Regular;
|
|
|
+ font-weight:400;
|
|
|
+ margin-top: 6px;
|
|
|
+ color:rgba(51,51,51,1);
|
|
|
+ line-height:17px;">上传素材</span>
|
|
|
+ </div>
|
|
|
+ <input style="display: none;" type="file" multiple="false">
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="width:105px;
|
|
|
+ height:34px;margin:0 auto;
|
|
|
+ background:rgba(78,93,255,1);
|
|
|
+ border-radius:19px;font-size:14px;
|
|
|
+ font-family:PingFangSC;
|
|
|
+ font-weight:500; text-align: center;
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
+ line-height:34px;cursor: pointer;">确定</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -348,7 +443,8 @@ export default {
|
|
|
],
|
|
|
animatedNameBackgroundGlobal: "",
|
|
|
animatedBackgroundCustom: false,
|
|
|
- globalAnimatedBackgroundTag: false
|
|
|
+ globalAnimatedBackgroundTag: false,
|
|
|
+ dialogVisible: false
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -425,7 +521,6 @@ export default {
|
|
|
this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal || "";
|
|
|
this.title = this.$store.state.editor.editorTheme.title;
|
|
|
this.gridTempField = this.$store.state.editor.gridTempField;
|
|
|
-
|
|
|
var pages = this.$store.state.editor.editorTheme.pages || [];
|
|
|
console.log("每页数据", pages);
|
|
|
this.questions = [];
|
|
|
@@ -441,7 +536,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
console.log("拼接数据", this.questions);
|
|
|
-
|
|
|
return this.$store.state.editor.editorPage;
|
|
|
},
|
|
|
element() {
|
|
|
@@ -801,6 +895,16 @@ export default {
|
|
|
complexEditorElement.forEach(ele => {
|
|
|
ele.top = max - ele.height;
|
|
|
});
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm("确认关闭？")
|
|
|
+ .then(_ => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch(_ => {});
|
|
|
+ },
|
|
|
+ uploadSelectedPicOrUnSelectedPic() {
|
|
|
+ this.dialogVisible = true;
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -827,6 +931,7 @@ export default {
|
|
|
if (!this.pages) {
|
|
|
this.$store.dispatch("getPageByThemeId", this.itemId);
|
|
|
}
|
|
|
+
|
|
|
// this.getPicList(this.itemId);
|
|
|
} else {
|
|
|
this.$store.dispatch("createTheme");
|
|
|
@@ -844,6 +949,22 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.lable {
|
|
|
+ display: block;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 130px;
|
|
|
+ height: 130px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+
|
|
|
.tagPage {
|
|
|
position: relative;
|
|
|
}
|
