diff --git a/src/components/FirstPage.vue b/src/components/FirstPage.vue index 1de1581..2fe81bf 100644 --- a/src/components/FirstPage.vue +++ b/src/components/FirstPage.vue @@ -3,30 +3,114 @@
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
@@ -48,27 +132,47 @@ export default { let nextPage = 2 let nowPage = 1 let activeDiv = null + let isActived = false + let page1 = null + let page2 = null onMounted(() => { - - let pageList = document.getElementsByClassName('page1') + page1 = document.getElementsByClassName('page1') + page2 = document.getElementsByClassName('page2') let hidden = document.querySelector('.hidden') - for (let i = 0; i < pageList.length; i++) { - pageList[i].addEventListener('click', () => { + for (let i = 0; i < page1.length; i++) { + page1[i].addEventListener('click', () => { + isActived = true hidden.classList.add('hidding') // 记录当前点击的div，改变样式 - activeDiv = pageList[i] - + activeDiv = page1[i] + activeDiv.classList.remove('zIndex10') activeDiv.classList.add('parent') activeDiv.children[0].classList.add('child') - document.querySelector('#page').addEventListener('click', () => { - console.log('click') - - }) - - // pageList[i].style.transform = 'translate(-50%, -50%)' - // pageList[i].classList.add('center') }) } + for (let i = 0; i < page2.length; i++) { + page2[i].addEventListener('click', () => { + isActived = true + hidden.classList.add('hidding') + // 记录当前点击的div，改变样式 + activeDiv = page2[i] + activeDiv.classList.add('parent') + activeDiv.children[0].classList.add('child') + activeDiv.classList.remove('zIndex10') + }) + } + // 点击回到主菜单 + document.querySelector('.hidden').addEventListener('click', () => { + // console.log('click') + if (isActived) { + activeDiv.classList.remove('parent') + activeDiv.children[0].classList.remove('child') + activeDiv.children[0].classList.add('zIndex10') + hidden.classList.remove('hidding') + isActived = false + } + + }) onTurn() }) const onTurn = () => { @@ -89,19 +193,37 @@ export default { when: { //监听事件 turning: function (e, page, view) { - console.log("turning", e, page, view) + // console.log("turning", e, page, view) // 翻页前触发 }, turned: function (e, page) { - console.log("turned", e, page) + // console.log("turned", e, page) document.querySelector('.index').removeEventListener('touchend', touchendHandle) if (page === 2) { + for (let i = 0; i < page1.length; i++) { + page1[i].classList.remove('zIndex10') + page1[i].classList.add('zIndex0') + } + for (let i = 0; i < page2.length; i++) { + page2[i].classList.remove('zIndex0') + page2[i].classList.add('zIndex10') + } nowPage = 2 document.querySelector('.rb').style.zIndex = 99 document.querySelector('.rt').style.zIndex = 99 document.querySelector('.lt').style.zIndex = 0 document.querySelector('.lb').style.zIndex = 0 } else { + for (let i = 0; i < page2.length; i++) { + page2[i].classList.remove('zIndex10') + + page2[i].classList.add('zIndex0') + } + for (let i = 0; i < page1.length; i++) { + page1[i].classList.remove('zIndex0') + + page1[i].classList.add('zIndex10') + } nowPage = 1 document.querySelector('.rb').style.zIndex = 0 document.querySelector('.rt').style.zIndex = 0 @@ -111,7 +233,7 @@ export default { // 翻页后触发 }, start: function (e, pageObj) { - console.log("start", e, pageObj) + // console.log("start", e, pageObj) nextPage = pageObj.next document.querySelector('.index').addEventListener('touchend', touchendHandle) // 开始翻页时触发 @@ -123,10 +245,10 @@ export default { } const clickHandle = () => { - console.log('onclick') + // console.log('onclick') } const touchendHandle = () => { - console.log('touchend') + // console.log('touchend') if (nextPage === 2) { $('#page').turn("next") } else { @@ -193,7 +315,8 @@ export default { /* background-image: url(../assets/page1.png); */ z-index: 6; } -.hidden{ + +.hidden { width: 100%; height: 100%; background-color: rgb(0, 0, 0); @@ -201,13 +324,14 @@ export default { top: 0%; left: 0%; z-index: 0; - opacity: 0; + opacity: 0; transition-property: all; transition-duration: 0.5s; transition-timing-function: linear; transition-delay: 0s; } -.hidding{ + +.hidding { z-index: 50 !important; opacity: 0.5 !important; } @@ -227,6 +351,11 @@ export default { transition-duration: 0.5s; transition-timing-function: linear; transition-delay: 0s; + + -webkit-transition-property: all; + -webkit-transition-duration: 0.5s; + -webkit-transition-timing-function: linear; + -webkit-transition-delay: 0s; /* transform: translate(-50%, -50%); */ } @@ -254,6 +383,13 @@ export default { left: 50% !important; transform: translate(-50%, -50%); } +.zIndex10 { + z-index: 10 !important; +} +.zIndex0 { + z-index: 0 !important; +} + .page1 { position: absolute; @@ -267,6 +403,30 @@ export default { transition-timing-function: linear; transition-delay: 0s; + -webkit-transition-property: all; + -webkit-transition-duration: 0.5s; + -webkit-transition-timing-function: linear; + -webkit-transition-delay: 0s; + +} + +.page2 { + position: absolute; + border-style: solid; + border-width: 1px; + z-index: 0; + /* transform: translate(-50%, -50%); */ + /* background-color: saddlebrown; */ + transition-property: all; + transition-duration: 0.5s; + transition-timing-function: linear; + transition-delay: 0s; + + -webkit-transition-property: all; + -webkit-transition-duration: 0.5s; + -webkit-transition-timing-function: linear; + -webkit-transition-delay: 0s; + } @@ -376,4 +536,138 @@ export default { top: 77%; left: 80%; } + +/* 第二页 */ +.l1-1 { + width: 10%; + height: 15%; + top: 21%; + left: 9%; +} + +.l1-2 { + width: 13%; + height: 16%; + top: 20%; + left: 28%; +} + +.l1-3 { + width: 17%; + height: 15%; + top: 20%; + left: 50%; +} + +.l1-4 { + width: 16%; + height: 15%; + top: 20%; + left: 73%; +} + +.l2-1 { + width: 15%; + height: 15%; + top: 38%; + left: 3%; +} + +.l2-2 { + width: 15%; + height: 15%; + top: 39%; + left: 23%; +} + +.l2-3 { + width: 15%; + height: 15%; + top: 39%; + left: 43%; +} + +.l2-4 { + width: 15%; + height: 15%; + top: 39%; + left: 60%; +} + +.l2-5 { + width: 15%; + height: 15%; + top: 39%; + left: 78%; +} + +.l3-1 { + width: 12%; + height: 15%; + top: 62%; + left: 9%; +} + +.l3-2 { + width: 12%; + height: 15%; + top: 62%; + left: 25%; +} + +.l3-3 { + width: 12%; + height: 15%; + top: 62%; + left: 42%; +} + +.l3-4 { + width: 12%; + height: 15%; + top: 62%; + left: 60%; +} + +.l3-5 { + width: 12%; + height: 15%; + top: 62%; + left: 79%; +} + +.l4-1 { + width: 12%; + height: 15%; + top: 80%; + left: 15%; +} + +.l4-2 { + width: 12%; + height: 15%; + top: 80%; + left: 35%; +} + +.l4-3 { + width: 12%; + height: 15%; + top: 80%; + left: 50%; +} + +.l4-4 { + width: 12%; + height: 15%; + top: 80%; + left: 65%; +} + +.l4-5 { + width: 13%; + height: 15%; + top: 80%; + left: 80%; +} \ No newline at end of file