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; */