diff --git a/public/index.html b/public/index.html index 3eae730..9d385db 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,7 @@ + diff --git a/src/App.vue b/src/App.vue index 11728b4..6c1d6f1 100644 --- a/src/App.vue +++ b/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; } diff --git a/src/components/FirstPage.vue b/src/components/FirstPage.vue index 25bff0c..44f76aa 100644 --- a/src/components/FirstPage.vue +++ b/src/components/FirstPage.vue @@ -10,7 +10,6 @@
-
@@ -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; */