修改冲突合并代码

src/components/EditPanel.vue

@@ -250,7 +250,7 @@
             </el-checkbox>
           </div>
 
-          <div style="display: inline-flex; padding: 12px 0" v-show="panelState == 12||panelState == 15">
+          <div style="display: inline-flex; padding: 12px 0" v-show="panelState == 12||panelState == 12">
             <div>
               <img style="width:100px; height:100px" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png"
                 alt="">

src/components/HeaderEdit.vue

@@ -1,13 +1,27 @@
 <template>
-  <header class="header">
-    <button class="reset-btn" @click="goback"><i class="el-icon-arrow-left"></i>返回作品</button>
-    <div class="next_return">
-      <span class="return" title="撤销" @click="revocation" :style="`opacity:${operationList.length>1?'1':'.3'}`"></span>
-      <span class="next" title="恢复" @click="recover" :style="`opacity:${nextList.length>0?'1':'.3'}`"></span>
-    </div>
-    <el-button @click="grid" class="preview " type="primary" style="margin-left: 50px;">网格参考线</el-button>
-    <div class="right-panel">
-      <el-button @click="deploy" class="preview" type="primary" :loading="loading">预览</el-button>
+    <header class="header">
+      <button class="reset-btn" @click="goback"><i class="el-icon-arrow-left"></i>返回作品</button>
+      <div class="next_return">
+        <div class="return" title="撤销" @click="revocation" :style="`opacity:${operationList.length>1?'1':'.3'}`">
+          <img class="retutn_icon" src="../assets/images/button_return.png" alt="">
+          <span>撤销</span>
+        </div>
+        <div class="return" title="恢复" @click="recover" :style="`opacity:${nextList.length>0?'1':'.3'}`">
+          <img class="retutn_icon" src="../assets/images/button_next.png" alt="">
+          <span>恢复</span>
+        </div>
+        <div class="return" title="分享设置" @click="shareSetting">
+          <img class="retutn_icon" src="../assets/images/share_setting_edit_nor.png" alt="">
+          <span>分享设置</span>
+        </div>
+        <div class="return" title="保存" @click="save">
+          <img class="retutn_icon" src="../assets/images/save_edit_nor.png" alt="">
+          <span>保存</span>
+        </div>
+      </div>
+      <!-- <el-button @click="grid" class="preview " type="primary" style="margin-left: 50px;">网格参考线</el-button> -->
+      <!-- <div class="right-panel">
+        <el-button @click="deploy" class="preview" type="primary" :loading="loading">预览</el-button> -->
       <!--<el-button @click="psd"-->
       <!--class="preview"-->
       <!--type="primary"-->
@@ -20,261 +34,269 @@
       <!--<el-button size="small" type="primary">psd文件导入</el-button>-->
       <!--<div slot="tip" class="el-upload__tip">只能上传psd文件</div>-->
       <!--</el-upload>-->
-      <form id="upload" enctype='multipart/form-data'>
-        <input type="hidden" id="itemId" />
-        <input type="file" id="psdFile" name="image" @change="uploadFn">
-
-      </form>
-    </div>
-  </header>
-</template>
-
-<script>
-import tools from "../util/tools";
-import api from "../api/editor";
-var time = null;
-export default {
-  props: {
-    goback: Function
-  },
-  data() {
-    return {
-      loading: false,
-      operationList: [],
-      nextList: []
-    };
-  },
-  beforeCreate() {
-    window.revocationFlag = false;
-  },
-  destroyed() {
-    this.operationList = [];
-    this.nextList = [];
-  },
-  mounted: function() {
-    var that = this;
-    /*var fn=function(e) {
-      if (90 == e.keyCode && e.ctrlKey)
-      {
-        that.revocation()
-
-      }
-      if(88 == e.keyCode && e.ctrlKey){
-        that.recover()
-      }
-    }
-    document.removeEventListener("keydown",fn)
-    document.addEventListener("keydown",fn)*/
-  },
-  computed: {
-    obj: function() {
-      return JSON.stringify(this.$store.state.editor.editorPage);
+      <!-- <form id="upload" enctype='multipart/form-data'>
+          <input type="hidden" id="itemId" />
+          <input type="file" id="psdFile" name="image" @change="uploadFn">
+        </form> -->
+      <!-- </div> -->
+    </header>
+  </template>
+  
+  <script>
+  import tools from "../util/tools";
+  import api from "../api/editor";
+  var time = null;
+  export default {
+    props: {
+      goback: Function
     },
-    operationFlag: function() {
-      return this.$store.state.user.operationFlag;
-    }
-  },
-  watch: {
-    obj: function(v) {
+    data() {
+      return {
+        loading: false,
+        operationList: [],
+        nextList: []
+      };
+    },
+    beforeCreate() {
+      window.revocationFlag = false;
+    },
+    destroyed() {
+      this.operationList = [];
+      this.nextList = [];
+    },
+    mounted: function() {
       var that = this;
-      if (!revocationFlag) {
-        if (that.operationList.length == 0) {
-          that.operationList.push(v);
+      /*var fn=function(e) {
+        if (90 == e.keyCode && e.ctrlKey)
+        {
+          that.revocation()
+  
         }
-        return;
-      }
-      window.hasSaveFlag = false;
-      clearTimeout(time);
-      time = setTimeout(function() {
-        if (that.operationFlag) {
-          that.nextList = [];
-          that.operationList.push(v);
-        }
-      }, 500);
-    }
-  },
-  methods: {
-    notempty(arrays) {
-      for (var i = 0; i < arrays.length; i++) {
-        if (
-          arrays[i] == "" ||
-          arrays[i] == null ||
-          typeof arrays[i] == "undefined"
-        ) {
-          arrays.splice(i, 1);
-          i--;
-        } else {
-          this.$store.dispatch("addElement", arrays[i]);
+        if(88 == e.keyCode && e.ctrlKey){
+          that.recover()
         }
       }
-      return arrays;
+      document.removeEventListener("keydown",fn)
+      document.addEventListener("keydown",fn)*/
     },
-    uploadFn(e) {
-      var that = this;
-      var form = document.getElementById("upload"),
-        formData = new FormData(form);
-      document.getElementById("itemId").innerText = this.$route.query.itemId;
-      // this.$store.dispatch('uploadPsd', formData)
-      const loading = this.$loading({
-        lock: true,
-        text: "psd解析中...",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)"
-      });
-      try {
-        api
-          .uploadPsd(formData)
-          .then(function(res) {
-            loading.close();
-            var res = res;
-            that.$store.state.editor.editorPage.elements = [];
-            that.notempty(res["pages"][0].elements);
-            // that.$store.state.editor.editorPage.elements=res['pages'][0].elements
-            that.$store.state.editor.editorTheme.title = res["title"];
-            that.$store.state.editor.editorTheme.description =
-              res["description"];
-            that.$store.state.editor.editorTheme.canvasHeight = Number(
-              res["canvasHeight"]
-            );
-            that.$store.state.editor.editorTheme.canvasWidth =
-              res["canvasWidth"];
-          })
-          .catch(function(err) {
-            loading.close();
-            that.$message.error("psd文件解析失败");
-          });
-      } catch (e) {
-        loading.close();
-        that.$message.error("psd文件解析失败");
+    computed: {
+      obj: function() {
+        return JSON.stringify(this.$store.state.editor.editorPage);
+      },
+      operationFlag: function() {
+        return this.$store.state.user.operationFlag;
       }
-      form.reset();
     },
-    // 撤销
-    revocation() {
-      if (this.operationList.length < 2) {
-        return false;
-      }
-      if (!revocationFlag) {
-        return false;
-      }
-      revocationFlag = false;
-      var str = this.operationList.splice(this.operationList.length - 1, 1);
-      this.nextList.push(str[0]);
-      this.$store.state.editor.editorPage.elements = JSON.parse(
-        this.operationList[this.operationList.length - 1]
-      ).elements;
-      setTimeout(function() {
-        revocationFlag = true;
-      }, 400);
-    }, //撤销
-    // 恢复
-    recover() {
-      if (this.nextList.length == 0) {
-        return false;
-      }
-      if (!revocationFlag) {
-        return false;
-      }
-      revocationFlag = false;
-      this.$store.state.editor.editorPage.elements = JSON.parse(
-        this.nextList[this.nextList.length - 1]
-      ).elements;
-      this.operationList.push(
-        this.nextList.splice(this.nextList.length - 1, 1)[0]
-      );
-      setTimeout(function() {
-        revocationFlag = true;
-      }, 400);
-    }, //恢复
-    // 预览
-    deploy() {
-      // this.loading = true
-      /*this.$store.dispatch('saveTheme', tools.vue2json(this.$store.state.editor.editorTheme)).then(() => {
-        // setTimeout(() => {
-        //   this.$emit('saveThemeSuccess')
-        //   this.loading = false
-        // }, 1000)
-        this.$emit('saveThemeSuccess')
-        this.loading = false
-      })*/
-
-      if (!window.hasSaveFlag) {
-        this.$confirm("您确定不保存直接预览吗？", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            window.hasSaveFlag = false;
-            this.$emit("saveThemeSuccess");
-          })
-          .catch(() => {});
-      } else {
-        this.$emit("saveThemeSuccess");
+    watch: {
+      obj: function(v) {
+        var that = this;
+        if (!revocationFlag) {
+          if (that.operationList.length == 0) {
+            that.operationList.push(v);
+          }
+          return;
+        }
+        window.hasSaveFlag = false;
+        clearTimeout(time);
+        time = setTimeout(function() {
+          if (that.operationFlag) {
+            that.nextList = [];
+            that.operationList.push(v);
+          }
+        }, 500);
       }
     },
-    grid() {
-      //网格
-      if (!this.$store.state.editor.gridTempField) {
-        this.$store.state.editor.gridTempField = true;
-      } else {
-        this.$store.state.editor.gridTempField = false;
+    methods: {
+      notempty(arrays) {
+        for (var i = 0; i < arrays.length; i++) {
+          if (
+            arrays[i] == "" ||
+            arrays[i] == null ||
+            typeof arrays[i] == "undefined"
+          ) {
+            arrays.splice(i, 1);
+            i--;
+          } else {
+            this.$store.dispatch("addElement", arrays[i]);
+          }
+        }
+        return arrays;
+      },
+      uploadFn(e) {
+        var that = this;
+        var form = document.getElementById("upload"),
+          formData = new FormData(form);
+        document.getElementById("itemId").innerText = this.$route.query.itemId;
+        // this.$store.dispatch('uploadPsd', formData)
+        const loading = this.$loading({
+          lock: true,
+          text: "psd解析中...",
+          spinner: "el-icon-loading",
+          background: "rgba(0, 0, 0, 0.7)"
+        });
+        try {
+          api
+            .uploadPsd(formData)
+            .then(function(res) {
+              loading.close();
+              var res = res;
+              that.$store.state.editor.editorPage.elements = [];
+              that.notempty(res["pages"][0].elements);
+              // that.$store.state.editor.editorPage.elements=res['pages'][0].elements
+              that.$store.state.editor.editorTheme.title = res["title"];
+              that.$store.state.editor.editorTheme.description =
+                res["description"];
+              that.$store.state.editor.editorTheme.canvasHeight = Number(
+                res["canvasHeight"]
+              );
+              that.$store.state.editor.editorTheme.canvasWidth =
+                res["canvasWidth"];
+            })
+            .catch(function(err) {
+              loading.close();
+              that.$message.error("psd文件解析失败");
+            });
+        } catch (e) {
+          loading.close();
+          that.$message.error("psd文件解析失败");
+        }
+        form.reset();
+      },
+      // 撤销
+      revocation() {
+        if (this.operationList.length < 2) {
+          return false;
+        }
+        if (!revocationFlag) {
+          return false;
+        }
+        revocationFlag = false;
+        var str = this.operationList.splice(this.operationList.length - 1, 1);
+        this.nextList.push(str[0]);
+        this.$store.state.editor.editorPage.elements = JSON.parse(
+          this.operationList[this.operationList.length - 1]
+        ).elements;
+        setTimeout(function() {
+          revocationFlag = true;
+        }, 400);
+      }, //撤销
+      // 恢复
+      recover() {
+        if (this.nextList.length == 0) {
+          return false;
+        }
+        if (!revocationFlag) {
+          return false;
+        }
+        revocationFlag = false;
+        this.$store.state.editor.editorPage.elements = JSON.parse(
+          this.nextList[this.nextList.length - 1]
+        ).elements;
+        this.operationList.push(
+          this.nextList.splice(this.nextList.length - 1, 1)[0]
+        );
+        setTimeout(function() {
+          revocationFlag = true;
+        }, 400);
+      }, //恢复
+      // 预览
+      deploy() {
+        // this.loading = true
+        /*this.$store.dispatch('saveTheme', tools.vue2json(this.$store.state.editor.editorTheme)).then(() => {
+          // setTimeout(() => {
+          //   this.$emit('saveThemeSuccess')
+          //   this.loading = false
+          // }, 1000)
+          this.$emit('saveThemeSuccess')
+          this.loading = false
+        })*/
+  
+        if (!window.hasSaveFlag) {
+          this.$confirm("您确定不保存直接预览吗？", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+            .then(() => {
+              window.hasSaveFlag = false;
+              this.$emit("saveThemeSuccess");
+            })
+            .catch(() => {});
+        } else {
+          this.$emit("saveThemeSuccess");
+        }
+      },
+      grid() {
+        //网格
+        if (!this.$store.state.editor.gridTempField) {
+          this.$store.state.editor.gridTempField = true;
+        } else {
+          this.$store.state.editor.gridTempField = false;
+        }
+      },
+      psd() {
+        var that = this;
+        axios.get("../../static/json.json").then(function(res) {
+          var res = res.data;
+          that.$store.state.editor.editorTheme.title = res["title"];
+          that.$store.state.editor.editorTheme.description = res["description"];
+          that.$store.state.editor.editorTheme.canvasHeight = res["canvasHeight"];
+          that.$store.state.editor.editorTheme.canvasWidth = res["canvasWidth"];
+          that.$store.state.editor.editorPage.elements = res["pages"][0].elements;
+        });
       }
-    },
-    psd() {
-      var that = this;
-      axios.get("../../static/json.json").then(function(res) {
-        var res = res.data;
-        that.$store.state.editor.editorTheme.title = res["title"];
-        that.$store.state.editor.editorTheme.description = res["description"];
-        that.$store.state.editor.editorTheme.canvasHeight = res["canvasHeight"];
-        that.$store.state.editor.editorTheme.canvasWidth = res["canvasWidth"];
-        that.$store.state.editor.editorPage.elements = res["pages"][0].elements;
-      });
     }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.header {
-  height: 60px;
-  background-color: #373f42;
-  color: #fff;
-  .reset-btn {
-    height: 100%;
-    padding: 0 20px;
-    cursor: pointer;
-  }
-  .el-icon-arrow-left {
-    margin-right: 20px;
-  }
-  .right-panel {
-    float: right;
-    height: 100%;
-    width: 100px;
-    display: flex;
-    align-items: center;
-    padding-right: 15px;
-    flex-direction: row-reverse;
-  }
-  .next_return {
-    display: inline-block;
-    margin-left: 33%;
-    span {
-      display: inline-block;
-      width: 30px;
-      height: 24px;
+  };
+  </script>
+  
+  <style lang="less" scoped>
+  .header {
+    height: 60px;
+    background-color: #fff;
+    color: #646b81;
+    margin-top: 60px;
+    .reset-btn {
+      height: 100%;
+      padding: 0 20px;
+      cursor: pointer;
+    }
+    .el-icon-arrow-left {
+      margin-right: 20px;
     }
-    .return {
-      background: url("../../static/img/button_return.png") no-repeat center
-        center / 100% 100%;
+    .right-panel {
+      float: right;
+      height: 100%;
+      width: 100px;
+      display: flex;
+      align-items: center;
+      padding-right: 15px;
+      flex-direction: row-reverse;
     }
-    .next {
-      margin-left: 50px;
-      background: url("../../static/img/button_next.png") no-repeat center
-        center / 100% 100%;
+    .next_return {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      top: -60px;
+      height: 60px;
+      width: 400px;
+      margin: 0 auto;
+      .return {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-left: 16px;
+        padding-right: 16px;
+        font-size: 16px;
+        color: rgba(100, 107, 129, 1);
+        .retutn_icon {
+          width: 24px;
+          height: 21px;
+          margin-bottom: 5px;
+        }
+      }
     }
   }
-}
-</style>
+  </style>
+  

src/views/h5editor/overview.vue

@@ -1,466 +1,564 @@
 <template>
-  <div class="overview">
-    <!-- 顶部tag -->
-    <div class="preview-tag">
-      <div class="page-tag-btn tagPage" :class="{ active: viewState === 0 }" @click="function () { viewState = 0 }">
+    <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-tip">页面</div>
+        </div>
+        <div class="page-tag-btn tagElement" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">
+          <div class="page-tag-btn-tip">元素</div>
+        </div>
       </div>
-      <div class="page-tag-btn tagElement" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">
-      </div>
-    </div>
-    <!-- 页面 -->
-    <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="">
-          <div class="page_preview_tag_title">封面</div>
-          <div class="item-page">
-            <span>1</span>
-            <div class="page" :class="{ active: pages[0] === editingPage }"
-              :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
-              @click="setEditingPage(pages[0],0)">
-              <Page :isOverView="true" class="content" :hideFoot="true"
-                :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
-                :elements="pages[0].elements" type="see" />
+      <!-- 页面 -->
+      <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="">
+            <div class="page_preview_tag_title">封面</div>
+            <div class="item-page">
+              <span>1</span>
+              <div class="page" :class="{ active: pages[0] === editingPage }"
+                :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
+                @click="setEditingPage(pages[0],0)">
+                <Page :isOverView="true" class="content" :hideFoot="true"
+                  :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
+                  :elements="pages[0].elements" type="see" />
+              </div>
             </div>
-          </div>
-        </li>
-        <li class="cover">
-          <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">
-            <span v-show="isShow(index)">{{index + 1 }}</span>
-            <div v-show="isShow(index)" 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"
-                :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
-                :elements="page.elements" type="see" />
+          </li>
+          <li class="cover">
+            <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 }"
+                :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }"
+                @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" />
+              </div>
             </div>
-          </div>
-          <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="">
-          <div class="page_preview_tag_title">结论</div>
-          <div class="item-page" v-for="(page,index) in pages">
-            <span v-show="isShowResult(index)">1</span>
-            <div v-show="isShowResult(index)" 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"
-                :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
-                :elements="page.elements" type="see" />
+            <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="">
+            <div class="page_preview_tag_title">结论</div>
+            <div class="item-page" v-for="(page,index) in pages" v-show="isShowResult(index)">
+              <span>1</span>
+              <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"
+                  :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 70 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
+                  :elements="page.elements" type="see" />
+              </div>
             </div>
+            <div class="item-page-add" @click="addResultPage">添加结论页</div>
+          </li>
+        </ul>
+      </div>
+      <!-- 图层 -->
+      <div class="list custom-scrollbar" style="z-index: 2;" v-show="viewState === 1"
+        :class="{ dragging: dragState === 1 }">
+        <ul>
+          <li v-for="layer in layersNoBg">
+            <div class="layer" :class="{ active: editingLayer === layer}" @click="setEditingLayer($event, layer)"
+              @mousedown="moveLayer">
+              <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
+            </div>
+          </li>
+        </ul>
+        <div v-for="layer in layersBg" class="layer" :class="{ active: editingLayer === layer}"
+          @click="setEditingLayer($event, layer)">
+          <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
+        </div>
+      </div>
+      <!-- 题目 -->
+      <div class="topic-list">
+        <div class="topic-top" @click="showTopic = !showTopic">
+          <span>题目列表</span>
+          <img class="topic-top-arrow" :src="topicIcon" alt="">
+        </div>
+        <el-collapse-transition>
+          <div v-show="showTopic">
+            <el-checkbox-group v-model="checkList" class="topic-group">
+              <el-checkbox label="1.复选框 A复选框 A复选框 A复选框 A复选框 A复选框 A复选框 A"></el-checkbox>
+              <el-checkbox label="2.复选框 B"></el-checkbox>
+              <el-checkbox label="3.复选框 C"></el-checkbox>
+              <el-checkbox label="4.选中且禁用" disabled></el-checkbox>
+            </el-checkbox-group>
           </div>
-          <div class="item-page-add" @click="addResultPage">添加结论页</div>
-        </li>
-      </ul>
-    </div>
-    <!-- 图层 -->
-    <div class="list custom-scrollbar" style="z-index: 2;" v-show="viewState === 1"
-      :class="{ dragging: dragState === 1 }">
-      <ul>
-        <li v-for="layer in layersNoBg">
-          <div class="layer" :class="{ active: editingLayer === layer}" @click="setEditingLayer($event, layer)"
-            @mousedown="moveLayer">
-            <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
-          </div>
-        </li>
-      </ul>
-      <div v-for="layer in layersBg" class="layer" :class="{ active: editingLayer === layer}"
-        @click="setEditingLayer($event, layer)">
-        <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
+        </el-collapse-transition>
       </div>
     </div>
-  </div>
-</template>
-<script>
-import Page from "./../../components/Page";
-import AppConst from "../../util/appConst";
-export default {
-  data() {
-    return {
-      viewState: 0,
-      dragState: 0,
-      http: AppConst.BACKEND_DOMAIN,
-      canvasWidth: 750,
-      canvasHeight: 1334,
-      bodyBackgroundColor: "rgba(255,255,255,0)",
-      questionPages: [],
-      resultPageCount: 0,
-      resultPages: []
-    };
-  },
-  computed: {
-    vxEditor() {
-      return this.$store.state["editor"];
-    },
-    pages() {
-      this.bodyBackgroundColor =
-        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
-        "rgba(255,255,255,0)";
-      return this.vxEditor["editorTheme"]["pages"];
-    },
-    editingPage() {
-      return this.vxEditor["editorPage"];
-    },
-    layers() {
-      return this.editingPage["elements"];
-    },
-    layersNoBg() {
-      return (
-        this.layers && this.layers.filter(v => v["type"] !== "bg").reverse()
-      );
+  </template>
+  <script>
+  import Page from "./../../components/Page";
+  import AppConst from "../../util/appConst";
+  export default {
+    data() {
+      return {
+        viewState: 0,
+        dragState: 0,
+        http: AppConst.BACKEND_DOMAIN,
+        canvasWidth: 750,
+        canvasHeight: 1334,
+        bodyBackgroundColor: "rgba(255,255,255,0)",
+        questionPages: [],
+        resultPageCount: 0,
+        resultPages: [],
+        checkList: ["选中且禁用"],
+        showTopic: true,
+        topicIcon: "../../static/img/up-arrow.png"
+      };
     },
-    layersBg() {
-      return this.layers && this.layers.filter(v => v["type"] === "bg");
+    computed: {
+      vxEditor() {
+        return this.$store.state["editor"];
+      },
+      pages() {
+        this.bodyBackgroundColor =
+          this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+          "rgba(255,255,255,0)";
+        return this.vxEditor["editorTheme"]["pages"];
+      },
+      editingPage() {
+        return this.vxEditor["editorPage"];
+      },
+      layers() {
+        return this.editingPage["elements"];
+      },
+      layersNoBg() {
+        return (
+          this.layers && this.layers.filter(v => v["type"] !== "bg").reverse()
+        );
+      },
+      layersBg() {
+        return this.layers && this.layers.filter(v => v["type"] === "bg");
+      },
+      editingLayer() {
+        return this.vxEditor["editorElement"];
+      }
     },
-    editingLayer() {
-      return this.vxEditor["editorElement"];
-    }
-  },
-  methods: {
-    isShow: function(index) {
-      var result = false;
-      if (index > 0) {
+    methods: {
+      isShow: function(index) {
+        var result = false;
+        if (index > 0) {
+          console.log(this.pages.length, index, this.resultPageCount);
+          if (this.pages.length - index > this.resultPageCount) {
+            result = true;
+          }
+        }
+        return result;
+      },
+      isShowResult(index) {
+        var result = false;
         console.log(this.pages.length, index, this.resultPageCount);
-        if (this.pages.length - index > this.resultPageCount) {
+        if (
+          this.pages.length - index <= this.resultPageCount &&
+          this.resultPageCount > 0
+        ) {
           result = true;
         }
-      }
-      return result;
-    },
-    isShowResult(index) {
-      var result = false;
-      console.log(this.pages.length, index, this.resultPageCount);
-      if (
-        this.pages.length - index <= this.resultPageCount &&
-        this.resultPageCount > 0
-      ) {
-        result = true;
-      }
-      return result;
-    },
-    moveLayer(downEvent) {
-      let height = 30;
-      let timer = null;
-      let layer = downEvent.target;
-      let li = layer.parentNode;
-      let parent = li.parentNode;
-      let liLen = parent.childNodes.length;
-      let startTop = li.offsetTop;
-      let startIndex = Math.round(startTop / height);
-      let targetIndex = null;
-      let placeholder = document.createElement("li");
-      placeholder.style = "height: " + height + "px; background-color: #d6d6d6";
-      let move = moveEvent => {
-        if (!timer) {
-          // 被拖动的层
-          let top = moveEvent.clientY - downEvent.clientY + startTop;
-          layer.setAttribute("data-moving", true);
-          layer.style.top = top + "px";
-          this.dragState = 1;
-          // 占位层
-          let nowIndex = Math.round(top / height);
-          nowIndex =
-            nowIndex <= 0 ? 0 : nowIndex > liLen - 1 ? liLen - 1 : nowIndex;
-          if (targetIndex !== nowIndex) {
-            (targetIndex || targetIndex === 0) &&
-              parent.removeChild(placeholder);
-            targetIndex = nowIndex;
-            parent.insertBefore(
-              placeholder,
-              parent.childNodes[nowIndex + (startIndex >= targetIndex ? 0 : 1)]
-            );
+        return result;
+      },
+      moveLayer(downEvent) {
+        let height = 30;
+        let timer = null;
+        let layer = downEvent.target;
+        let li = layer.parentNode;
+        let parent = li.parentNode;
+        let liLen = parent.childNodes.length;
+        let startTop = li.offsetTop;
+        let startIndex = Math.round(startTop / height);
+        let targetIndex = null;
+        let placeholder = document.createElement("li");
+        placeholder.style = "height: " + height + "px; background-color: #d6d6d6";
+        let move = moveEvent => {
+          if (!timer) {
+            // 被拖动的层
+            let top = moveEvent.clientY - downEvent.clientY + startTop;
+            layer.setAttribute("data-moving", true);
+            layer.style.top = top + "px";
+            this.dragState = 1;
+            // 占位层
+            let nowIndex = Math.round(top / height);
+            nowIndex =
+              nowIndex <= 0 ? 0 : nowIndex > liLen - 1 ? liLen - 1 : nowIndex;
+            if (targetIndex !== nowIndex) {
+              (targetIndex || targetIndex === 0) &&
+                parent.removeChild(placeholder);
+              targetIndex = nowIndex;
+              parent.insertBefore(
+                placeholder,
+                parent.childNodes[nowIndex + (startIndex >= targetIndex ? 0 : 1)]
+              );
+            }
+            // timer负责减少onmousemove对客户端的负担
+            timer = setTimeout(() => {
+              timer = null;
+            }, 20);
           }
-          // timer负责减少onmousemove对客户端的负担
-          timer = setTimeout(() => {
-            timer = null;
-          }, 20);
-        }
-      };
-      let up = upEvent => {
-        if (layer.getAttribute("data-moving")) {
-          layer.removeAttribute("data-moving");
-          layer.style.top = "";
-          parent.removeChild(placeholder);
-          this.layersNoBg[startIndex]["zindex"] =
-            this.layersNoBg[targetIndex]["zindex"] +
-            (targetIndex > startIndex ? -0.5 : 0.5);
-          this.updateLayersSort();
+        };
+        let up = upEvent => {
+          if (layer.getAttribute("data-moving")) {
+            layer.removeAttribute("data-moving");
+            layer.style.top = "";
+            parent.removeChild(placeholder);
+            this.layersNoBg[startIndex]["zindex"] =
+              this.layersNoBg[targetIndex]["zindex"] +
+              (targetIndex > startIndex ? -0.5 : 0.5);
+            this.updateLayersSort();
+          }
+          document.removeEventListener("mousemove", move);
+          document.removeEventListener("mouseup", up);
+          this.dragState = 0;
+        };
+        if (liLen > 1) {
+          document.addEventListener("mousemove", move);
+          document.addEventListener("mouseup", up);
         }
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", up);
-        this.dragState = 0;
-      };
-      if (liLen > 1) {
-        document.addEventListener("mousemove", move);
-        document.addEventListener("mouseup", up);
+      },
+      copyPage(page) {
+        this.bodyBackgroundColor =
+          this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+          "rgba(255,255,255,0)";
+        this.$store.dispatch("copyPage", page);
+      },
+      delPage(page) {
+        this.$store.dispatch("delPage", page);
+      },
+      addPage() {
+        this.bodyBackgroundColor =
+          this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+          "rgba(255,255,255,0)";
+        this.$store.dispatch("addPage");
+      },
+      addResultPage() {
+        this.bodyBackgroundColor =
+          this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+          "rgba(255,255,255,0)";
+        this.$store.dispatch("addPage");
+        this.resultPageCount += 1;
+      },
+      setEditingPage(page) {
+        this.bodyBackgroundColor =
+          this.$store.state.editor.editorTheme.bodyBackgroundColor ||
+          "rgba(255,255,255,0)";
+        this.$store.dispatch("setEditorPage", page);
+      },
+      setEditingLayer(event, layer) {
+        this.$store.dispatch("setEditorElement", layer);
+      },
+      updateLayersSort() {
+        this.$store.dispatch("sortElementsByZindex");
       }
     },
-    copyPage(page) {
-      this.bodyBackgroundColor =
-        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
-        "rgba(255,255,255,0)";
-      this.$store.dispatch("copyPage", page);
-    },
-    delPage(page) {
-      this.$store.dispatch("delPage", page);
-    },
-    addPage() {
-      this.bodyBackgroundColor =
-        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
-        "rgba(255,255,255,0)";
-      this.$store.dispatch("addPage");
-    },
-    addResultPage() {
-      this.bodyBackgroundColor =
-        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
-        "rgba(255,255,255,0)";
-      this.$store.dispatch("addPage");
-      this.resultPageCount += 1;
-    },
-    setEditingPage(page) {
-      this.bodyBackgroundColor =
-        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
-        "rgba(255,255,255,0)";
-      this.$store.dispatch("setEditorPage", page);
-    },
-    setEditingLayer(event, layer) {
-      this.$store.dispatch("setEditorElement", layer);
-    },
-    updateLayersSort() {
-      this.$store.dispatch("sortElementsByZindex");
+    components: { Page },
+    watch: {
+      showTopic: function(val) {
+        if (val) {
+          this.topicIcon = "../../static/img/up-arrow.png";
+        } else {
+          this.topicIcon = "../../static/img/down-arrow.png";
+        }
+      }
     }
-  },
-  components: { Page }
-};
-</script>
-<style lang="less" scoped>
-.overview {
-  position: relative;
-  background-color: rgb(196, 185, 185);
-  height: 100%;
-  .preview-tag {
-    width: 44px;
+  };
+  </script>
+  <style lang="less" scoped>
+  .overview {
+    position: relative;
+    background-color: rgb(196, 185, 185);
     height: 100%;
-    background: #fff;
-    box-shadow: 5px 0px 10px 0px rgba(62, 67, 116, 0.1);
-    position: absolute;
-    top: 0px;
-    left: 226px;
-    z-index: 3;
-    padding-top: 10px;
-    .page-tag-btn {
-      margin-top: 10px;
-      margin-left: 5px;
-      width: 34px;
-      height: 34px;
-    }
-    .tagPage {
-      background: url(../../assets/images/page-tag.png) center no-repeat;
-      background-size: cover;
-      &.active {
-        background: url(../../assets/images/page-tag-sel.png) center no-repeat;
-        background-size: cover;
+    .preview-tag {
+      width: 44px;
+      height: 100%;
+      background: #fff;
+      box-shadow: 5px 0px 10px 0px rgba(62, 67, 116, 0.1);
+      position: absolute;
+      top: 0px;
+      left: 226px;
+      z-index: 3;
+      padding-top: 10px;
+      .page-tag-btn {
+        margin-top: 10px;
+        margin-left: 5px;
+        width: 34px;
+        height: 34px;
       }
-    }
-    .tagPage:hover {
-      background: url(../../assets/images/page-tag-hover.png) center no-repeat;
-      background-size: cover;
-    }
-    .tagElement {
-      background: url(../../assets/images/element-tag.png) center no-repeat;
-      background-size: cover;
-      &.active {
-        background: url(../../assets/images/element-tag-sel.png) center
-          no-repeat;
+      .tagPage {
+        background: url(../../assets/images/page-tag.png) center no-repeat;
         background-size: cover;
+        &.active {
+          background: url(../../assets/images/page-tag-sel.png) center no-repeat;
+          background-size: cover;
+        }
       }
-    }
-    .tagElement:hover {
-      background: url(../../assets/images/element-tag-hover.png) center
-        no-repeat;
-      background-size: cover;
-    }
-  }
-  .panel {
-    float: left;
-    line-height: 40px;
-    width: 50%;
-    text-align: center;
-    background-color: #d6d6d6;
-    cursor: pointer;
-    &.active {
-      background-color: transparent;
-    }
-  }
-  .list {
-    background-color: #fff;
-    position: absolute;
-    top: 0px;
-    bottom: 0px;
-    width: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-top: 10px;
-    padding-bottom: 20px;
-    .cover {
-      margin-left: 16px;
-      width: 180px;
-      background: rgba(230, 237, 255, 1);
-      border-radius: 6px;
-      padding-top: 10px;
-      padding-bottom: 10px;
-      position: relative;
-      margin-top: 16px;
-      .page_preview_tag {
-        position: absolute;
-        top: 6px;
-        left: 0px;
-        width: 49px;
-        height: 22px;
+      .tagPage:hover {
+        background: url(../../assets/images/page-tag-hover.png) center no-repeat;
+        background-size: cover;
       }
-      .page_preview_tag_title {
-        position: absolute;
-        top: 6px;
-        left: 0px;
-        line-height: 22px;
-        margin-left: 10px;
-        font-size: 12px;
-        color: rgba(255, 255, 255, 1);
+      .tagPage:hover div {
+        display: block;
       }
-      .item-page {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        margin-top: 20px;
-        margin-bottom: 20px;
-        font-size: 14px;
-        font-weight: 500;
-        color: rgba(100, 107, 129, 1);
-        .preview-page {
-          margin-left: 10px;
-          width: 70px;
-          height: 114px;
-          box-shadow: 0px 2px 4px 0px rgba(78, 93, 255, 1);
-          border: 2px solid rgba(255, 255, 255, 1);
-          background: #fff;
+      .tagElement {
+        background: url(../../assets/images/element-tag.png) center no-repeat;
+        background-size: cover;
+        &.active {
+          background: url(../../assets/images/element-tag-sel.png) center
+            no-repeat;
+          background-size: cover;
         }
       }
-      .item-page-add {
-        width: 70px;
-        height: 114px;
-        margin-left: 64px;
-        margin-bottom: 30px;
-        font-size: 12px;
-        color: rgba(100, 107, 129, 1);
-        line-height: 154px;
-        text-align: center;
-        background: url(../../assets/images/item-page-add.png) center no-repeat;
+      .tagElement:hover {
+        background: url(../../assets/images/element-tag-hover.png) center
+          no-repeat;
         background-size: cover;
       }
-      .item-page-add:hover {
-        color: rgba(51, 51, 51, 1);
-        background: url(../../assets/images/item-page-add-hover.png) center
-          no-repeat;
+      .tagElement:hover div {
+        display: block;
+      }
+      .page-tag-btn-tip {
+        width: 80px;
+        height: 26px;
+        position: relative;
+        top: 5px;
+        left: -80px;
+        display: none;
+        text-align: center;
+        line-height: 26px;
+        font-size: 14px;
+        color: #fff;
+        background: url(../../assets/images/page_tag_btn_tip.png) center no-repeat;
         background-size: cover;
       }
     }
-  }
-  .dragging:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10;
-  }
-  .page {
-    position: relative;
-    margin-left: 10px;
-    border: 2px solid rgba(255, 255, 255, 1);
-    background: #fff;
-    &.active {
-      border-color: rgba(78, 93, 255, 1);
-      box-shadow: 0px 2px 4px 0px rgba(78, 93, 255, 1);
-      .icons {
-        display: block;
+    .panel {
+      float: left;
+      line-height: 40px;
+      width: 50%;
+      text-align: center;
+      background-color: #d6d6d6;
+      cursor: pointer;
+      &.active {
+        background-color: transparent;
       }
     }
-    &:before {
+    .list {
+      background-color: #fff;
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      width: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding-top: 10px;
+      padding-bottom: 20px;
+      .cover {
+        margin-left: 16px;
+        width: 180px;
+        background: rgba(230, 237, 255, 1);
+        border-radius: 6px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        position: relative;
+        margin-top: 16px;
+        .page_preview_tag {
+          position: absolute;
+          top: 6px;
+          left: 0px;
+          width: 49px;
+          height: 22px;
+        }
+        .page_preview_tag_title {
+          position: absolute;
+          top: 6px;
+          left: 0px;
+          line-height: 22px;
+          margin-left: 10px;
+          font-size: 12px;
+          color: rgba(255, 255, 255, 1);
+        }
+        .item-page {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          margin-top: 20px;
+          margin-bottom: 20px;
+          font-size: 14px;
+          font-weight: 500;
+          color: rgba(100, 107, 129, 1);
+          .preview-page {
+            margin-left: 10px;
+            width: 70px;
+            height: 114px;
+            box-shadow: 0px 2px 4px 0px rgba(78, 93, 255, 1);
+            border: 2px solid rgba(255, 255, 255, 1);
+            background: #fff;
+          }
+        }
+        .item-page-add {
+          width: 70px;
+          height: 114px;
+          margin-left: 64px;
+          margin-bottom: 30px;
+          font-size: 12px;
+          color: rgba(100, 107, 129, 1);
+          line-height: 154px;
+          text-align: center;
+          background: url(../../assets/images/item-page-add.png) center no-repeat;
+          background-size: cover;
+        }
+        .item-page-add:hover {
+          color: rgba(51, 51, 51, 1);
+          background: url(../../assets/images/item-page-add-hover.png) center
+            no-repeat;
+          background-size: cover;
+        }
+      }
+    }
+    .dragging:before {
       content: "";
       position: absolute;
       top: 0;
-      left: 0;
-      bottom: 0;
       right: 0;
-      z-index: 2;
+      bottom: 0;
+      left: 0;
+      z-index: 10;
     }
-    .content {
-      transform-origin: left top;
-      background-color: #fff;
-      overflow: hidden;
+    .page {
       position: relative;
-    }
-    .icons {
-      position: absolute;
-      bottom: -1.5em;
-      right: 0.5em;
-      display: none;
-      width: 100%;
-      color: #fff;
-      .icon {
-        float: right;
-        margin-left: 1em;
-        opacity: 0.5;
-        cursor: pointer;
-        &:hover {
-          opacity: 1;
+      margin-left: 10px;
+      border: 2px solid rgba(255, 255, 255, 1);
+      background: #fff;
+      &.active {
+        border-color: rgba(78, 93, 255, 1);
+        box-shadow: 0px 2px 4px 0px rgba(78, 93, 255, 1);
+        .icons {
+          display: block;
+        }
+      }
+      &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 2;
+      }
+      .content {
+        transform-origin: left top;
+        background-color: #fff;
+        overflow: hidden;
+        position: relative;
+      }
+      .icons {
+        position: absolute;
+        bottom: -1.5em;
+        right: 0.5em;
+        display: none;
+        width: 100%;
+        color: #fff;
+        .icon {
+          float: right;
+          margin-left: 1em;
+          opacity: 0.5;
+          cursor: pointer;
+          &:hover {
+            opacity: 1;
+          }
         }
       }
     }
-  }
-  .layer {
-    padding-left: 20px;
-    height: 30px;
-    line-height: 30px;
-    border-bottom: 1px solid #d6d6d6;
-    cursor: pointer;
-    &[data-moving] {
-      background-color: #d6d6d6;
+    .layer {
+      padding-left: 20px;
+      height: 34px;
+      line-height: 34px;
+      cursor: pointer;
+      color: rgba(51, 51, 51, 1);
+      &[data-moving] {
+        background-color: #d6d6d6;
+        position: absolute;
+        width: 100%;
+      }
+      &:hover {
+        background: rgba(230, 237, 255, 1);
+      }
+      &.active {
+        background: rgba(78, 93, 255, 1);
+        color: #fff;
+      }
+      .thumb {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        margin-right: 1em;
+        background: white center no-repeat;
+        background-size: cover;
+      }
+    }
+    .add {
+      border: none;
       position: absolute;
+      bottom: 0;
+      height: 50px;
+      line-height: 50px;
       width: 100%;
-    }
-    &:hover {
-      background-color: #d6d6d6;
-    }
-    &.active {
-      background-color: #18ccc0;
+      left: 0;
+      background-color: #373f42;
+      text-align: center;
       color: #fff;
+      cursor: pointer;
     }
-    .thumb {
-      display: inline-block;
-      width: 15px;
-      height: 15px;
-      margin-right: 1em;
-      background: white center no-repeat;
-      background-size: cover;
+  
+    .topic-list {
+      position: absolute;
+      top: 10px;
+      left: 280px;
+      width: 345px;
+      background: rgba(255, 255, 255, 1);
+      border-radius: 6px;
+      z-index: 4;
+      .topic-top {
+        width: 100%;
+        height: 34px;
+        background: rgba(78, 93, 255, 1);
+        color: #fff;
+        border-radius: 6px 6px 0px 0px;
+        line-height: 34px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding-left: 10px;
+        padding-right: 10px;
+        .topic-top-arrow {
+          width: 13px;
+          height: 12px;
+        }
+      }
+      .topic-group {
+        display: flex;
+        flex-direction: column;
+        margin-left: 24px;
+        .el-checkbox {
+          padding-top: 10px;
+          padding-bottom: 10px;
+          border-bottom: 1px solid #e2e4ee;
+          display: flex;
+          position: relative;
+          white-space: pre-line;
+          align-items: center;
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(51, 51, 51, 1);
+          line-height: 19px;
+        }
+      }
     }
   }
-  .add {
-    border: none;
-    position: absolute;
-    bottom: 0;
-    height: 50px;
-    line-height: 50px;
-    width: 100%;
-    left: 0;
-    background-color: #373f42;
-    text-align: center;
-    color: #fff;
-    cursor: pointer;
-  }
-}
-</style>
+  </style>
+