fix bug

src/views/tempaltes/editMore.vue

@@ -191,13 +191,24 @@
           </div>
         </slider>
       </div>
+      <div class="group-menu" v-if="templateData.listData[currentPage]">
+        <slider :list="templateData.listData[currentPage].itemList">
+          <div
+            class="group-menu-item"
+            :class="itemListIndex===scope.index? 'group-menu-item-active': ''"
+            @click="setItemListIndex(scope.index)"
+            slot-scope="scope"
+          >{{scope.slider.name}}</div>
+        </slider>
+      </div>
       <div class="content-right">
-        <div class="title">编辑栏</div>
+        <!-- <div class="title">编辑栏</div> -->
         <div class="edit-area">
           <div v-if="templateData.listData[currentPage]">
             <editMenu
               v-if="loaded "
               :itemList="templateData.listData[currentPage].itemList"
+              :item="templateData.listData[currentPage].itemList[itemListIndex]"
               :schemaData="templateData.listData[currentPage].schemaData"
               :frameUrl="templateData.frameUrl"
               @setList="setList"
@@ -298,6 +309,7 @@ export default {
       pageViews: false,
       isPreview: false,
       currentPage: 0,
+      itemListIndex: 0,
       deviceList: [
         {
           clientId: "maxrocky",
@@ -403,6 +415,9 @@ export default {
           document.body.appendChild(newImg);
         });
     },
+    setItemListIndex(index) {
+      this.itemListIndex = index;
+    },
     onSheetSelect(item) {
       this.showSheet = false;
       if (item.action === "createPage") {
@@ -656,6 +671,7 @@ export default {
       window.wx.miniProgram.navigateTo({
         url: `/pages/home/film/schedule_add/components/device/index?fId=${filmId}`
       });
+      this.$toast.clear()
     },
     getFilmId() {
       const filmId =
@@ -663,6 +679,11 @@ export default {
       return filmId;
     },
     enterSubmit() {
+      this.$toast.loading({
+        overlay: true,
+        message: "加载中...",
+        forbidClick: true
+      });
       this.message({
         type: "getList"
       });
@@ -802,6 +823,66 @@ export default {
         background: lightblue;
       }
     }
+    .group-menu {
+      // box-shadow:0px -1px 0px 0px rgba(0,0,0,0.1);
+      border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
+      display: flex;
+      // height: calc(100vh - 96px);
+      background: #fff;
+      padding: 0px 10px;
+      padding-right: 10px;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: auto;
+      .swiper-slide {
+        width: auto;
+      }
+
+      .group-menu-item {
+        position: relative;
+        // width: 80px;
+        height: 40px;
+        line-height: 40px;
+        img {
+          border: 1px dashed #666;
+          width: 100%;
+          box-sizing: border-box;
+        }
+        // line-height: 65px;
+        margin: 0 20px;
+        font-size: 15px;
+        color: rgba(153, 153, 153, 1);
+        .close {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+      .group-menu-item-active {
+        color: rgba(255, 145, 16, 1);
+        font-size: 16px;
+        position: relative;
+        &::after {
+          content: "";
+          position: absolute;
+          width: 19px;
+          height: 4px;
+          background: rgba(255, 145, 16, 1);
+          box-shadow: 0px 1px 4px 1px rgba(233, 145, 42, 0.43);
+          border-radius: 2px;
+          left: calc(50% - 9.5px);
+          bottom: 0;
+        }
+      }
+      .activePage {
+        img {
+          border: 2px solid red;
+        }
+      }
+      .sortable-chosen {
+        background: lightblue;
+      }
+    }
     .content-left {
       // padding-top: 10px;
       flex: 1;
@@ -907,29 +988,36 @@ export default {
         box-sizing: border-box;
         // display: flex;
         // justify-content: center;
-        padding: 0 calc((100vw - 343px) / 2);
+        position: relative;
+        width: 344px;
+        margin: 0 auto;
       }
       .iframe-container2 {
         box-sizing: border-box;
         // display: flex;
         // justify-content: center;
-        padding: 0 calc((100vw - 193px) / 2);
+
+        width: 194px !important;
+        margin: 0 auto;
       }
       .iframe {
-        width: 343px;
+        width: 100%;
         margin: 0 auto;
         // margin-left: 16px;
-        height: 193px;
+        height: 194px;
         display: block;
         box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
-        position: relative;
+        // position: absolute;
+        overflow: hidden;
+        transform: translate3d(0, 0, 0) scale(1);
       }
       .viframe {
-        position: relative;
-        width: 193px !important;
+        overflow: hidden;
+        // position: absolute;
+        width: 100% !important;
         margin: 0 auto;
         // margin-left: 91px;
-        height: 343px;
+        height: 344px;
       }
     }
     .content-left-v {
@@ -1192,8 +1280,8 @@ export default {
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 20px 40px;
-    padding-bottom: 20px;
+    padding: 10px 40px;
+    padding-bottom: 10px;
     display: flex;
     z-index: 1000;
     justify-content: space-between;