H5左侧边栏

src/components/ShareSetting.vue

@@ -19,8 +19,14 @@
           <div class="cover-title">更换封面</div>
         </div>
       </div>
-      <div class="qrcode-title">渠道二维码</div>
-      <div class="qrcode">
+      <div class="qrcode-title">渠道二维码
+        <div class="qrcode-copy" @click="save">
+          <img class="qrcode-copy-img" src="../assets/images/qrcode-copy.png" alt="">
+          复制链接
+        </div>
+      </div>
+
+      <!-- <div class="qrcode">
         <el-input v-model="input" placeholder="请输入内容"></el-input>
         <img class="qrcode-img" src="" alt="">
         <div class="qrcode-btn">
@@ -30,7 +36,7 @@
             复制链接</div>
         </div>
       </div>
-      <div class="qrcode-add">添加渠道</div>
+      <div class="qrcode-add">添加渠道</div> -->
       <div class="share-save" @click="save">确定</div>
     </div>
   </div>
@@ -152,6 +158,28 @@ export default {
       font-weight: 400;
       color: rgba(0, 0, 0, 1);
       line-height: 22px;
+      position: relative;
+      .qrcode-copy {
+        position: absolute;
+        top: -5px;
+        left: 100px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(78, 93, 255, 1);
+        line-height: 30px;
+        text-align: center;
+        width: 125px;
+        height: 30px;
+        background: rgba(230, 237, 255, 1);
+        border-radius: 15px;
+        cursor: pointer;
+        .qrcode-copy-img {
+          width: 16px;
+          height: 16px;
+          vertical-align: middle;
+        }
+      }
     }
     .qrcode {
       margin-left: 18px;
@@ -205,6 +233,7 @@ export default {
         }
       }
     }
+
     .qrcode-add {
       margin-left: 18px;
       margin-top: 20px;
@@ -225,7 +254,7 @@ export default {
       height: 34px;
       background: rgba(78, 93, 255, 1);
       border-radius: 19px;
-      margin-top: 40px;
+      margin-top: 167px;
       margin-bottom: 94px;
       margin-left: 174px;
       font-weight: 500;

src/views/h5editor/index.vue

@@ -751,7 +751,7 @@ export default {
 
 <style lang="less" scoped>
 .editor {
-  background-color: #eaedef;
+  background-color: rgb(237, 239, 247);
   position: relative;
   height: 100%;
   overflow: hidden;
@@ -769,7 +769,7 @@ export default {
 .overview {
   position: absolute;
   left: 0;
-  width: 160px;
+  width: 225px;
   height: 100%;
   z-index: 10;
 }

src/views/h5editor/overview.vue

@@ -1,26 +1,57 @@
 <template>
   <div class="overview">
     <!-- 顶部tag -->
-    <div class="clearfix">
-      <span class="panel" :class="{ active: viewState === 0 }" @click="function () { viewState = 0 }">页面</span>
-      <span class="panel" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">图层</span>
+    <div class="preview-tag">
+      <div class="page-tag-btn tagPage" :class="{ active: viewState === 0 }" @click="function () { viewState = 0 }">
+      </div>
+      <div class="page-tag-btn tagElement" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">
+      </div>
     </div>
     <!-- 页面 -->
-    <ul class="list custom-scrollbar" style="z-index: 1;">
-      <li v-for="(page,index) in pages">
-        <div class="page" :class="{ active: page === editingPage }"
-          :style="{ width: 131 + 8 + 'px', height: (131 / canvasWidth) * canvasHeight + 34 + 'px' }"
-          @click="setEditingPage(page,index)">
-          <Page :isOverView="true" class="content" :hideFoot="index == (pages.length-1)?false:true"
-            :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 131 / canvasWidth +')',backgroundColor: bodyBackgroundColor }"
-            :elements="page.elements" type="see" />
-          <div class="icons clearfix">
-            <i class="icon el-icon-delete" @click="delPage(page)" v-show="index"></i>
-            <i class="icon el-icon-document" @click="copyPage(page)"></i>
+    <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>
+        </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="index > 0">{{index + 1 }}</span>
+            <div v-show="index > 0" 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>
-      </li>
-    </ul>
+          <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">
+            <span>1</span>
+            <div class="page" :class="{ active: page === editingPage }"
+              :style="{ width: 70 + 4 + 'px', height: (70 / canvasWidth) * canvasHeight + 4 + 'px' }">
+            </div>
+          </div>
+          <div class="item-page-add">添加结论页</div>
+        </li>
+      </ul>
+    </div>
     <!-- 图层 -->
     <div class="list custom-scrollbar" style="z-index: 2;" v-show="viewState === 1"
       :class="{ dragging: dragState === 1 }">
@@ -37,8 +68,6 @@
         <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
       </div>
     </div>
-    <!-- 添加按钮 -->
-    <button class="add el-icon-plus" @click="addPage"></button>
   </div>
 </template>
 <script>
@@ -175,9 +204,51 @@ export default {
 <style lang="less" scoped>
 .overview {
   position: relative;
-  border-right: 1px solid #d6d6d6;
-  background-color: #ececec;
+  background-color: rgb(196, 185, 185);
   height: 100%;
+  .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 {
+      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;
+      }
+    }
+    .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;
+        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;
@@ -190,13 +261,77 @@ export default {
     }
   }
   .list {
-    background-color: #ececec;
+    background-color: #fff;
     position: absolute;
-    top: 40px;
-    bottom: 50px;
+    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: "";
@@ -209,12 +344,12 @@ export default {
   }
   .page {
     position: relative;
-    border-color: transparent;
-    border-style: solid;
-    border-width: 4px 4px 30px;
-    margin: 10px;
+    margin-left: 10px;
+    border: 2px solid rgba(255, 255, 255, 1);
+    background: #fff;
     &.active {
-      border-color: #18ccc0;
+      border-color: rgba(78, 93, 255, 1);
+      box-shadow: 0px 2px 4px 0px rgba(78, 93, 255, 1);
       .icons {
         display: block;
       }

src/views/h5editor/overview1.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="overview">
+    <!-- 顶部tag -->
+    <div class="clearfix">
+      <div class="panel" :class="{ active: viewState === 0 }" @click="function () { viewState = 0 }">页面</div>
+      <div class="panel" :class="{ active: viewState === 1 }" @click="function () { viewState = 1 }">图层</div>
+    </div>
+    <!-- 页面 -->
+    <div class="page-preview">
+      <div class="item">
+        <div class="item-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>1</span>
+            <div class="preview-page">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="item-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="preview-page"></div>
+          </div>
+          <div class="item-page">
+            <span>1</span>
+            <div class="preview-page"></div>
+          </div>
+          <div class="item-page">
+            <span>1</span>
+            <div class="preview-page"></div>
+          </div>
+          <div class="item-page">
+            <span>1</span>
+            <div class="preview-page"></div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="item-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="preview-page"></div>
+          </div>
+        </div>
+      </div>
+    </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>
+    <!-- 添加按钮 -->
+    <!-- <button class="add el-icon-plus" @click="addPage"></button> -->
+  </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)"
+    };
+  },
+  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"];
+    }
+  },
+  methods: {
+    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);
+        }
+      };
+      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);
+      }
+    },
+    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");
+    },
+    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 }
+};
+</script>
+<style lang="less" scoped>
+.overview {
+  position: relative;
+  border-right: 1px solid #d6d6d6;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .clearfix {
+    width: 44px;
+    height: 100%;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 5px 0px 10px 0px rgba(62, 67, 116, 0.1);
+    position: absolute;
+    top: 0px;
+    left: 180px;
+    z-index: 1000;
+  }
+  .page-preview {
+    background-color: rgba(237, 239, 247, 1);
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    .item {
+      width: 225px;
+      background: #fff;
+      padding-top: 20px;
+      padding-bottom: 20px;
+      .item-cover {
+        margin-left: 16px;
+        width: 180px;
+        background: rgba(230, 237, 255, 1);
+        border-radius: 6px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        position: relative;
+        .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;
+          }
+        }
+      }
+      .list {
+      }
+    }
+  }
+  .panel {
+    float: left;
+    line-height: 40px;
+    width: 50%;
+    text-align: center;
+    background-color: #d6d6d6;
+    cursor: pointer;
+    &.active {
+      background-color: transparent;
+    }
+  }
+
+  .dragging:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+  }
+  .page {
+    position: relative;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 4px 4px 30px;
+    margin: 10px;
+    &.active {
+      border-color: #18ccc0;
+      .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;
+      position: absolute;
+      width: 100%;
+    }
+    &:hover {
+      background-color: #d6d6d6;
+    }
+    &.active {
+      background-color: #18ccc0;
+      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%;
+    left: 0;
+    background-color: #373f42;
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
+  }
+}
+</style>

src/views/spaeditor/overview.vue

@@ -6,8 +6,12 @@
     </div>
     <ul class="list custom-scrollbar" style="z-index: 1;">
       <li v-for="page in pages">
-        <div class="page" :class="{ active: page === editingPage }" :style="{ width: 131 + 8 + 'px', height: (131 / canvasWidth) * canvasHeight + 34 + 'px' }" @click="setEditingPage(page)">
-          <Page :isOverView="true" class="content" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 131 / canvasWidth +')' }" :elements="page.elements" type="see" />
+        <div class="page" :class="{ active: page === editingPage }"
+          :style="{ width: 131 + 8 + 'px', height: (131 / canvasWidth) * canvasHeight + 34 + 'px' }"
+          @click="setEditingPage(page)">
+          <Page :isOverView="true" class="content"
+            :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', transform: 'scale(' + 131 / canvasWidth +')' }"
+            :elements="page.elements" type="see" />
           <div class="icons clearfix">
             <i class="icon el-icon-delete" @click="delPage(page)"></i>
             <i class="icon el-icon-document" @click="copyPage(page)"></i>
@@ -15,21 +19,32 @@
         </div>
       </li>
     </ul>
-    <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">{{layer.des===undefined?layer.des=layer.type:''}}{{layer.locked===undefined?layer.locked=false:''}}
-          <div class="layer" :class="{ active: editingLayer === layer}" @click="setEditingLayer($event, layer)" @mousedown="moveLayer">
+        <li v-for="(layer,index) in layersNoBg">
+          {{layer.des===undefined?layer.des=layer.type:''}}{{layer.locked===undefined?layer.locked=false:''}}
+          <div class="layer" :class="{ active: editingLayer === layer}" @click="setEditingLayer($event, layer)"
+            @mousedown="moveLayer">
             <!--<span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}-->
-            <img v-if="layer.locked" src="../../../static/img/unLocked.png" alt="" @mousedown.stop="1" @click.stop="layer.locked=false;setEditingLayer($event, null)"  style="width: 20px;height: 20px;display: inline-block">
-            <img v-else src="../../../static/img/locked.png" alt="" @mousedown.stop="1" @click.stop="layer.locked=true;setEditingLayer($event, null)"  style="width: 20px;height: 20px;display: inline-block;">
+            <img v-if="layer.locked" src="../../../static/img/unLocked.png" alt="" @mousedown.stop="1"
+              @click.stop="layer.locked=false;setEditingLayer($event, null)"
+              style="width: 20px;height: 20px;display: inline-block">
+            <img v-else src="../../../static/img/locked.png" alt="" @mousedown.stop="1"
+              @click.stop="layer.locked=true;setEditingLayer($event, null)"
+              style="width: 20px;height: 20px;display: inline-block;">
             <span @mousedown.stop="1" class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>
-            <div @mousedown.stop="1" style="display:inline-block;width: 50%;height: 26px;"  @dblclick="editflag=index">
-              <el-input v-model="layer.des" :title="layer.des" @blur="editflag=''" :disabled="editflag!==index" :class="{ active: editingLayer === layer}" placeholder="请输入" style="width: 100%;height: 100%;"></el-input>
+            <div @mousedown.stop="1" style="display:inline-block;width: 50%;height: 26px;" @dblclick="editflag=index">
+              <el-input v-model="layer.des" :title="layer.des" @blur="editflag=''" :disabled="editflag!==index"
+                :class="{ active: editingLayer === layer}" placeholder="请输入" style="width: 100%;height: 100%;">
+              </el-input>
             </div>
           </div>
         </li>
       </ul>
-      <div v-for="layer in layersBg" class="layer" :class="{ active: editingLayer === layer}" @click="setEditingLayer($event, layer)">{{layer.des===undefined?layer.des=layer.type:''}}{{layer.locked===undefined?layer.locked=false:''}}
+      <div v-for="layer in layersBg" class="layer" :class="{ active: editingLayer === layer}"
+        @click="setEditingLayer($event, layer)">
+        {{layer.des===undefined?layer.des=layer.type:''}}{{layer.locked===undefined?layer.locked=false:''}}
         <span class="thumb" :style="{ backgroundImage: 'url(' + layer.imgSrc + ')' }"></span>{{ layer.type }}
       </div>
     </div>
@@ -37,238 +52,247 @@
   </div>
 </template>
 <script>
-  import Page from './../../components/Page'
-  import AppConst from '../../util/appConst'
-  export default {
-    data () {
-      return {
-        editflag:"",
-        viewState: 1,
-        dragState: 0,
-        http: AppConst.BACKEND_DOMAIN
-      }
+import Page from "./../../components/Page";
+import AppConst from "../../util/appConst";
+export default {
+  data() {
+    return {
+      editflag: "",
+      viewState: 1,
+      dragState: 0,
+      http: AppConst.BACKEND_DOMAIN
+    };
+  },
+  computed: {
+    vxEditor() {
+      return this.$store.state["editor"];
     },
-    computed: {
-      vxEditor () {
-        return this.$store.state['editor']
-      },
-      canvasWidth () {
-        return this.vxEditor['canvasWidth']
-      },
-      canvasHeight () {
-        return this.vxEditor['canvasHeight']
-      },
-      pages () {
-        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']
-      }
+    canvasWidth() {
+      return this.vxEditor["canvasWidth"];
     },
-    methods: {
-      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)
-          }
-        }
-        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()
+    canvasHeight() {
+      return this.vxEditor["canvasHeight"];
+    },
+    pages() {
+      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"];
+    }
+  },
+  methods: {
+    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)]
+            );
           }
-          document.removeEventListener('mousemove', move)
-          document.removeEventListener('mouseup', up)
-          this.dragState = 0
+          // timer负责减少onmousemove对客户端的负担
+          timer = setTimeout(() => {
+            timer = null;
+          }, 20);
         }
-        if (liLen > 1) {
-          document.addEventListener('mousemove', move)
-          document.addEventListener('mouseup', up)
+      };
+      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();
         }
-      },
-      copyPage (page) {
-        this.$store.dispatch('copyPage', page)
-      },
-      delPage (page) {
-        this.$store.dispatch('delPage', page)
-      },
-      addPage () {
-        this.$store.dispatch('addPage')
-      },
-      setEditingPage (page) {
-        this.$store.dispatch('setEditorPage', page)
-      },
-      setEditingLayer (event, layer) {
-        this.$store.dispatch('setEditorElement', layer)
-      },
-      updateLayersSort () {
-        this.$store.dispatch('sortElementsByZindex')
+        document.removeEventListener("mousemove", move);
+        document.removeEventListener("mouseup", up);
+        this.dragState = 0;
+      };
+      if (liLen > 1) {
+        document.addEventListener("mousemove", move);
+        document.addEventListener("mouseup", up);
       }
     },
-    components: { Page }
-  }
+    copyPage(page) {
+      this.$store.dispatch("copyPage", page);
+    },
+    delPage(page) {
+      this.$store.dispatch("delPage", page);
+    },
+    addPage() {
+      this.$store.dispatch("addPage");
+    },
+    setEditingPage(page) {
+      this.$store.dispatch("setEditorPage", page);
+    },
+    setEditingLayer(event, layer) {
+      this.$store.dispatch("setEditorElement", layer);
+    },
+    updateLayersSort() {
+      this.$store.dispatch("sortElementsByZindex");
+    }
+  },
+  components: { Page }
+};
 </script>
 <style lang="less" scoped>
-  .overview {
-    position: relative;
-    border-right: 1px solid #d6d6d6;
+.overview {
+  position: relative;
+  border-right: 1px solid #d6d6d6;
+  background-color: #ececec;
+  height: 100%;
+  .panel {
+    float: left;
+    line-height: 40px;
+    width: 50%;
+    text-align: center;
+    background-color: #d6d6d6;
+    cursor: pointer;
+    &.active {
+      background-color: transparent;
+    }
+  }
+  .list {
     background-color: #ececec;
-    height: 100%;
-    .panel {
-      float: left;
-      line-height: 40px;
-      width: 50%;
-      text-align: center;
-      background-color: #d6d6d6;
-      cursor: pointer;
-      &.active {
-        background-color: transparent;
+    position: absolute;
+    top: 40px;
+    bottom: 0px;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .dragging:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+  }
+  .page {
+    position: relative;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 4px 4px 30px;
+    margin: 10px;
+    &.active {
+      border-color: #18ccc0;
+      .icons {
+        display: block;
       }
     }
-    .list {
-      background-color: #ececec;
-      position: absolute;
-      top: 40px;
-      bottom: 50px;
-      width: 100%;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-    .dragging:before {
+    &:before {
       content: "";
       position: absolute;
       top: 0;
-      right: 0;
-      bottom: 0;
       left: 0;
-      z-index: 10;
+      bottom: 0;
+      right: 0;
+      z-index: 2;
     }
-    .page {
+    .content {
+      transform-origin: left top;
+      background-color: #fff;
+      overflow: hidden;
       position: relative;
-      border-color: transparent;
-      border-style: solid;
-      border-width: 4px 4px 30px;
-      margin: 10px;
-      &.active {
-        border-color: #18ccc0;
-        .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;
-        position: absolute;
-        width: 100%;
-      }
-      &:hover {
-        background-color: #d6d6d6;
-      }
-      &.active {
-        background-color: #18ccc0;
-        color: #fff;
-      }
-      .thumb {
-        display: inline-block;
-        width: 15px;
-        height: 15px;
-        margin-right: 1em;
-        background: white center no-repeat;
-        background-size: cover;
+    .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;
+        }
       }
     }
-    .add {
-      border: none;
+  }
+  .layer {
+    /*padding-left: 20px;*/
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid #d6d6d6;
+    cursor: pointer;
+    &[data-moving] {
+      background-color: #d6d6d6;
       position: absolute;
-      bottom: 0;
-      height: 50px;
-      line-height: 50px;
       width: 100%;
-      left: 0;
-      background-color: #373f42;
-      text-align: center;
+    }
+    &:hover {
+      background-color: #d6d6d6;
+    }
+    &.active {
+      background-color: #18ccc0;
       color: #fff;
-      cursor: pointer;
     }
+    .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%;
+    left: 0;
+    background-color: #373f42;
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
   }
+}
 </style>