修改bug

public/index.html

@@ -8,6 +8,7 @@
   <meta name="菜单" id="base_meta_title">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
   <!-- 自定义应用名称 -->
   <meta name="application-name" content="菜单">
    <!-- 自定义图标 -->

src/App.vue

@@ -42,6 +42,9 @@ export default {
   color: #2c3e50;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+
 }
 html{
   height: 100%;
@@ -54,6 +57,7 @@ body {
   height: 100%;
   width: 100%;
   overflow: hidden;
+  overscroll-behavior: none;
 
 }
 </style>

src/components/FirstPage.vue

@@ -10,7 +10,6 @@
 
         <div class="page1 i1-1">
             <img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
-            <img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
         </div>
 
         <div class="page1 i1-2">
@@ -141,6 +140,18 @@ export default {
         let page1 = null
         let page2 = null
         onMounted(() => {
+            document.body.addEventListener('touchmove', (e) => {
+                console.log('touchmove',e)
+                e.preventDefault()
+            }, {
+                passive: false
+            })
+            document.body.addEventListener('touchmove', (e) => {
+                if (e._isScroller) return;
+                e.preventDefault()
+            }, {
+                passive: false
+            })
             page1 = document.getElementsByClassName('page1')
             page2 = document.getElementsByClassName('page2')
 
@@ -191,7 +202,7 @@ export default {
 
                         activeDiv.classList.remove('parent')
                         activeDiv.children[0].classList.remove('child')
-                        activeDiv.children[0].classList.add('zIndex10')
+                        activeDiv.classList.add('zIndex10')
                         // hidden.classList.remove('hidding')
                         isActived = false
                     } else {
@@ -206,7 +217,7 @@ export default {
                         isActived = true
                     }
                 })
-                
+
             }
             // 点击回到主菜单
             document.querySelector('.hidden').addEventListener('click', () => {
@@ -227,8 +238,8 @@ export default {
             nextTick(() => {
                 $('#page').turn({
                     autoCenter: true,
-                    height: 2048 / 2, //高度
-                    width: 2732 / 2, //宽度
+                    height: 1536 / 2, //高度 pro 2048 / 2
+                    width: 2048 / 2, //宽度 pro 2732 / 2
                     display: 'single', //单页显示/双页显示  single/double
                     elevation: 50,
                     duration: 1000, //翻页速度(毫秒), 默认600ms
@@ -243,6 +254,7 @@ export default {
                         turning: function (e, page, view) {
                             // console.log("turning", e, page, view)
                             // 翻页前触发
+                            isActived = false
                             document.querySelector('.index').removeEventListener('touchend', touchendHandle)
                             if (page === 2) {
                                 for (let i = 0; i < page1.length; i++) {
@@ -278,7 +290,7 @@ export default {
                         },
                         turned: function (e, page) {
                             // console.log("turned", e, page)
-                            
+
                             // 翻页后触发
                         },
                         start: function (e, pageObj) {
@@ -412,21 +424,23 @@ export default {
 }
 
 .parent {
-    top: 50% !important;
-    left: 50% !important;
-    transform: translate(-50%, -50%);
+    /* width/2 - (width * 0.8 / 2) = width * 0.2*/
+    top: 10% !important;
+    left: 10% !important;
     /* 683 */
-    width: 1092px !important;
+    /* width: 1092px !important; */
     /* 512 */
-    height: 819px !important;
+    /* height: 819px !important; */
+    width: 819px !important;
+    height: 614px !important;
     z-index: 100 !important;
 }
 
 .child {
     /* 0.8 */
-    width: 1092px !important;
+    width: 819px !important;
     /* 0.8 */
-    height: 819px !important;
+    height: 614px !important;
     z-index: 100 !important;
     opacity: 0.9 !important;
 }
@@ -451,8 +465,8 @@ export default {
 .page1 {
     position: absolute;
 
-    /* border-style: solid;
-    border-width: 1px; */
+    border-style: solid;
+    border-width: 1px;
     z-index: 10;
     /* transform: translate(-50%, -50%); */
     /* background-color: saddlebrown; */
@@ -471,8 +485,8 @@ export default {
 .page2 {
     position: absolute;
 
-    /* border-style: solid;
-    border-width: 1px; */
+    border-style: solid;
+    border-width: 1px;
     z-index: 0;
     /* transform: translate(-50%, -50%); */
     /* background-color: saddlebrown; */