|
|
@@ -2,10 +2,18 @@
|
|
|
<div class="overview">
|
|
|
<!-- 顶部tag -->
|
|
|
<div class="preview-tag">
|
|
|
- <div class="page-tag-btn tagPage" :class="{ active: viewState === 0 }" @click="function () { viewState = 0 }">
|
|
|
+ <div
|
|
|
+ class="page-tag-btn tagPage"
|
|
|
+ :class="{ active: viewState === 0 }"
|
|
|
+ @click="function () { viewState = 0 }"
|
|
|
+ >
|
|
|
<div class="page-tag-btn-tip">页面</div>
|
|
|
</div>
|
|
|
- <div class="page-tag-btn tagElement" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">
|
|
|
+ <div
|
|
|
+ class="page-tag-btn tagElement"
|
|
|
+ :class="{ active: viewState === 1 }"
|
|
|
+ @click="function () { viewState = 1 }"
|
|
|
+ >
|
|
|
<div class="page-tag-btn-tip">元素</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -13,35 +21,58 @@
|
|
|
<div class="page-preview" style="z-index: 1;">
|
|
|
<ul class="list custom-scrollbar">
|
|
|
<li class="cover">
|
|
|
- <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
|
|
|
+ <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt />
|
|
|
<div class="page_preview_tag_title">封面</div>
|
|
|
<div class="item-page" v-for="(page,index) in pages" v-show="index==0">
|
|
|
<span>1</span>
|
|
|
- <div class="page" :class="{ active: page === editingPage }"
|
|
|
+ <div
|
|
|
+ class="page"
|
|
|
+ :class="{ active: page === editingPage }"
|
|
|
:style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
|
|
|
- @click="setEditingPage(page,0)" @click.right="rightEvent()">
|
|
|
- <Page :isOverView="true" class="content" :hideFoot="true"
|
|
|
+ @click="setEditingPage(page,0)"
|
|
|
+ @click.right="rightEvent()"
|
|
|
+ >
|
|
|
+ <Page
|
|
|
+ :isOverView="true"
|
|
|
+ class="content"
|
|
|
+ :hideFoot="true"
|
|
|
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
|
|
|
- :elements="page.elements" type="see" />
|
|
|
+ :elements="page.elements"
|
|
|
+ type="see"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="cover">
|
|
|
- <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
|
|
|
+ <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt />
|
|
|
<div class="page_preview_tag_title">题目</div>
|
|
|
<div class="item-page" v-for="(page,index) in pages" v-show="isShow(index)">
|
|
|
<span>{{index + 1 }}</span>
|
|
|
- <div class="page" :class="{ active: page === editingPage }"
|
|
|
+ <div
|
|
|
+ class="page"
|
|
|
+ :class="{ active: page === editingPage }"
|
|
|
:style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
|
|
|
- @click="setEditingPage(page,index)">
|
|
|
- <Page :isOverView="true" class="content" :hideFoot="true"
|
|
|
+ @click="setEditingPage(page,index)"
|
|
|
+ >
|
|
|
+ <Page
|
|
|
+ :isOverView="true"
|
|
|
+ class="content"
|
|
|
+ :hideFoot="true"
|
|
|
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
|
|
|
- :elements="page.elements" type="see" />
|
|
|
+ :elements="page.elements"
|
|
|
+ type="see"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <el-dropdown placement="bottom" trigger="click" class="operation"
|
|
|
- @command="command=>operationCommand(command, page, index)">
|
|
|
+ <el-dropdown
|
|
|
+ placement="bottom"
|
|
|
+ trigger="click"
|
|
|
+ class="operation"
|
|
|
+ @command="command=>operationCommand(command, page, index)"
|
|
|
+ >
|
|
|
<div class="operation_img"></div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item command="insertBottom">向下插入新页面</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="insertTop">向上插入新页面</el-dropdown-item>
|
|
|
<el-dropdown-item command="del">删除</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
@@ -49,19 +80,31 @@
|
|
|
<div class="item-page-add" @click="addPage">添加题目页</div>
|
|
|
</li>
|
|
|
<li class="cover">
|
|
|
- <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt="">
|
|
|
+ <img class="page_preview_tag" src="../../assets/images/page_preview_tag.png" alt />
|
|
|
<div class="page_preview_tag_title">结论</div>
|
|
|
<div class="item-page" v-for="(page,index) in pages" v-show="isShowResult(index)">
|
|
|
<span>{{index + 1}}</span>
|
|
|
- <div class="page" :class="{ active: page === editingPage }"
|
|
|
+ <div
|
|
|
+ class="page"
|
|
|
+ :class="{ active: page === editingPage }"
|
|
|
:style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
|
|
|
- @click="setEditingPage(page,index)">
|
|
|
- <Page :isOverView="true" class="content" :hideFoot="true"
|
|
|
+ @click="setEditingPage(page,index)"
|
|
|
+ >
|
|
|
+ <Page
|
|
|
+ :isOverView="true"
|
|
|
+ class="content"
|
|
|
+ :hideFoot="true"
|
|
|
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
|
|
|
- :elements="page.elements" type="see" />
|
|
|
+ :elements="page.elements"
|
|
|
+ type="see"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <el-dropdown placement="bottom" trigger="click" class="operation"
|
|
|
- @command="command=>operationCommand(command, page, index)">
|
|
|
+ <el-dropdown
|
|
|
+ placement="bottom"
|
|
|
+ trigger="click"
|
|
|
+ class="operation"
|
|
|
+ @command="command=>operationCommand(command, page, index)"
|
|
|
+ >
|
|
|
<div class="operation_img"></div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item command="del">删除</el-dropdown-item>
|
|
|
@@ -73,32 +116,52 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!-- 图层 -->
|
|
|
- <div class="list custom-scrollbar" style="z-index: 2;" v-show="viewState === 1"
|
|
|
- :class="{ dragging: dragState === 1 }">
|
|
|
+ <div
|
|
|
+ class="list custom-scrollbar"
|
|
|
+ style="z-index: 2;"
|
|
|
+ v-show="viewState === 1"
|
|
|
+ :class="{ dragging: dragState === 1 }"
|
|
|
+ >
|
|
|
<ul>
|
|
|
<li v-for="(layer, index) in layersNoBg" :key="index">
|
|
|
- <div class="layer" :class="{ active: editingLayer === layer}" @mousedown="moveLayer($event,layer)">
|
|
|
- <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
|
|
|
+ <div
|
|
|
+ class="layer"
|
|
|
+ :class="{ active: editingLayer === layer}"
|
|
|
+ @mousedown="moveLayer($event,layer)"
|
|
|
+ >
|
|
|
+ <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>
|
|
|
+ {{ layer.type }}
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div v-for="(layer, index) in layersBg" :key="index" class="layer" :class="{ active: editingLayer === layer}"
|
|
|
- @click="setEditingLayer(layer)">
|
|
|
- <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
|
|
|
+ <div
|
|
|
+ v-for="(layer, index) in layersBg"
|
|
|
+ :key="index"
|
|
|
+ class="layer"
|
|
|
+ :class="{ active: editingLayer === layer}"
|
|
|
+ @click="setEditingLayer(layer)"
|
|
|
+ >
|
|
|
+ <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>
|
|
|
+ {{ layer.type }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 题目 -->
|
|
|
<div class="topic-list" v-if="isShowQuestion">
|
|
|
<div class="topic-top" @click="showTopic = !showTopic">
|
|
|
<span>题目列表</span>
|
|
|
- <img class="topic-top-arrow" :src="topicIcon" alt="">
|
|
|
+ <img class="topic-top-arrow" :src="topicIcon" alt />
|
|
|
</div>
|
|
|
<el-collapse-transition>
|
|
|
<div v-show="showTopic">
|
|
|
<div class="topic-group">
|
|
|
- <el-checkbox v-model="item.isChecked" v-for="(item, index) in questionList" :label="item.name" :key="index"
|
|
|
- @change="checked=>selectCheckbox(checked,item,index)" :disabled="isDisabled(index)">
|
|
|
- </el-checkbox>
|
|
|
+ <el-checkbox
|
|
|
+ v-model="item.isChecked"
|
|
|
+ v-for="(item, index) in questionList"
|
|
|
+ :label="item.name"
|
|
|
+ :key="index"
|
|
|
+ @change="checked=>selectCheckbox(checked,item,index)"
|
|
|
+ :disabled="isDisabled(index)"
|
|
|
+ ></el-checkbox>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-collapse-transition>
|
|
|
@@ -177,14 +240,34 @@ export default {
|
|
|
},
|
|
|
editingLayer() {
|
|
|
return this.vxEditor["editorElement"];
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
operationCommand(command, page, index) {
|
|
|
if (command == "del") {
|
|
|
console.log("删除", index);
|
|
|
this.deletePage(page, index);
|
|
|
+ } else if (command == "insertTop") {
|
|
|
+ console.log("插入", index);
|
|
|
+ this.insertPage(page, index, true);
|
|
|
+ } else if (command == "insertBottom") {
|
|
|
+ this.insertPage(page, index, false);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //插入题目页
|
|
|
+ insertPage(page, index, isTop) {
|
|
|
+ this.bodyBackgroundColor =
|
|
|
+ this.$store.state.editor.editorTheme.bodyBackgroundColor ||
|
|
|
+ "rgba(255,255,255,0)";
|
|
|
+ if (isTop) {
|
|
|
+ var position = index ;
|
|
|
+ } else {
|
|
|
+ var position = index + 1;
|
|
|
}
|
|
|
+ this.$store.dispatch("addPagePosition", position);
|
|
|
+ this.isShowQuestion = true;
|
|
|
+ this.selectQuestions.push([]);
|
|
|
+ this.currentPage += 1;
|
|
|
},
|
|
|
isChecked(index) {
|
|
|
var question = this.questionList[index].questionId;
|
|
|
@@ -475,7 +558,7 @@ export default {
|
|
|
this.$store.dispatch("sortElementsByZindex");
|
|
|
}
|
|
|
},
|
|
|
- components: { Page},
|
|
|
+ components: { Page },
|
|
|
watch: {
|
|
|
showTopic: function(val) {
|
|
|
if (val) {
|
