fix bug

src/App.vue

@@ -61,6 +61,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   text-align: center;
   color: #2c3e50;
   color: #2c3e50;
+  min-height: 100%;
 }
 }
 #nav {
 #nav {
   padding: 30px;
   padding: 30px;
@@ -77,6 +78,10 @@ export default {
   -webkit-overflow-scrolling: touch;
   -webkit-overflow-scrolling: touch;
   position: absolute;
   position: absolute;
   width: 100%;
   width: 100%;
+  min-height: 100vh;
+}
+html, body {
+  min-height: 100vh;
 }
 }
 .slide-left-enter,
 .slide-left-enter,
 .slide-right-leave-active {
 .slide-right-leave-active {

src/views/tempaltes/editMore.vue

@@ -129,7 +129,10 @@
       </g>
       </g>
     </svg>
     </svg>
     <div class="content" v-show="gifloaded">
     <div class="content" v-show="gifloaded">
-      <div class="content-left" :class="{'content-left-v': templateData.templateShow === 'VERTICAL' }">
+      <div
+        class="content-left"
+        :class="{'content-left-v': templateData.templateShow === 'VERTICAL' }"
+      >
         <div class="content-left-top">
         <div class="content-left-top">
           <div class="page-manager" @click="showSheet = true">
           <div class="page-manager" @click="showSheet = true">
             <img src="../../assets/img//manager.png" alt />
             <img src="../../assets/img//manager.png" alt />
@@ -138,12 +141,19 @@
           <div class="page-count">
           <div class="page-count">
             <div class="count">{{ currentPage + 1 + '/' + templateData.listData.length}}</div>
             <div class="count">{{ currentPage + 1 + '/' + templateData.listData.length}}</div>
           </div>
           </div>
-          <div class="page-preview" @click="preview">预览 <img src="../../assets/img/right-arrow.png" alt=""></div>
+          <div class="page-preview" @click="preview">
+            预览
+            <img src="../../assets/img/right-arrow.png" alt />
+          </div>
           <!-- <van-button size="mini" @click="createPage(currentPage)">新增此页</van-button>
           <!-- <van-button size="mini" @click="createPage(currentPage)">新增此页</van-button>
           <van-button size="mini" @click="deletePage(currentPage)">删除此页</van-button>-->
           <van-button size="mini" @click="deletePage(currentPage)">删除此页</van-button>-->
           <!-- <van-button size="mini" @click="pageShow">页面排序</van-button> -->
           <!-- <van-button size="mini" @click="pageShow">页面排序</van-button> -->
           <!-- <van-button size="mini" @click="preview">预览</van-button> -->
           <!-- <van-button size="mini" @click="preview">预览</van-button> -->
         </div>
         </div>
+        <div
+          class="iframe-container"
+          :class="{'iframe-container2': templateData.templateShow === 'VERTICAL' }"
+        >
           <iframe
           <iframe
             class="iframe"
             class="iframe"
             v-if="loaded"
             v-if="loaded"
@@ -154,6 +164,8 @@
             :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + time"
             :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + time"
             frameborder="0"
             frameborder="0"
           ></iframe>
           ></iframe>
+        </div>
+
         <iframe
         <iframe
           style="height: 0px;width: 100%;"
           style="height: 0px;width: 100%;"
           v-show="false"
           v-show="false"
@@ -714,8 +726,12 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .edit-container {
 .edit-container {
   overflow-x: hidden;
   overflow-x: hidden;
+  min-height: 100%;
   min-height: 100vh;
   min-height: 100vh;
   box-sizing: border-box;
   box-sizing: border-box;
+  padding-bottom: 80px;
+  position: relative;
+
   .page-content-tips {
   .page-content-tips {
     text-align: center;
     text-align: center;
     font-size: 13px;
     font-size: 13px;
@@ -887,16 +903,32 @@ export default {
           }
           }
         }
         }
       }
       }
+      .iframe-container {
+        box-sizing: border-box;
+        // display: flex;
+        // justify-content: center;
+        padding: 0 calc((100vw - 343px) / 2);
+      }
+      .iframe-container2 {
+        box-sizing: border-box;
+        // display: flex;
+        // justify-content: center;
+        padding: 0 calc((100vw - 193px) / 2);
+      }
       .iframe {
       .iframe {
         width: 343px;
         width: 343px;
         margin: 0 auto;
         margin: 0 auto;
+        // margin-left: 16px;
         height: 193px;
         height: 193px;
         display: block;
         display: block;
         box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
         box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
+        position: relative;
       }
       }
       .viframe {
       .viframe {
+        position: relative;
         width: 193px !important;
         width: 193px !important;
         margin: 0 auto;
         margin: 0 auto;
+        // margin-left: 91px;
         height: 343px;
         height: 343px;
       }
       }
     }
     }
@@ -1155,17 +1187,15 @@ export default {
     letter-spacing: 2px;
     letter-spacing: 2px;
     text-align: center;
     text-align: center;
   }
   }
-  padding-bottom: 50px;
   .createBtn {
   .createBtn {
-    // position: fixed;
+    position: fixed;
     bottom: 0;
     bottom: 0;
     left: 0;
     left: 0;
     right: 0;
     right: 0;
-    padding-bottom: 30px;
-    padding: 40px;
-    padding-top: 0;
+    padding: 20px 40px;
+    padding-bottom: 20px;
     display: flex;
     display: flex;
-    z-index: 100;
+    z-index: 1000;
     justify-content: space-between;
     justify-content: space-between;
     background: white;
     background: white;
     box-sizing: border-box;
     box-sizing: border-box;