diff --git a/public/index.html b/public/index.html index cb68d79..3eae730 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,31 @@ - - - - - - + + + + + + + + + + + - - <%= htmlWebpackPlugin.options.title %> - - - -
- - - + + + <%= htmlWebpackPlugin.options.title %> + + + + + +
+ + + + \ No newline at end of file diff --git a/src/assets/两个菜单.jpg b/src/assets/两个菜单.jpg new file mode 100644 index 0000000..fc0c3df Binary files /dev/null and b/src/assets/两个菜单.jpg differ diff --git a/src/assets/两个菜单2.jpg b/src/assets/两个菜单2.jpg new file mode 100644 index 0000000..74e4afa Binary files /dev/null and b/src/assets/两个菜单2.jpg differ diff --git a/src/components/FirstPage.vue b/src/components/FirstPage.vue index 9feac57..25bff0c 100644 --- a/src/components/FirstPage.vue +++ b/src/components/FirstPage.vue @@ -2,17 +2,15 @@
- - + +
- - - - +
+
@@ -147,17 +145,15 @@ export default { page2 = document.getElementsByClassName('page2') let hidden = document.querySelector('.hidden') - let hiddenList = document.querySelectorAll('.hidden') + // let hiddenList = document.querySelectorAll('.hidden') // 给每个商品添加点击事件 for (let i = 0; i < page1.length; i++) { page1[i].addEventListener('click', () => { console.log('isActived', isActived) if (isActived) { // 回到主菜单 - // hidden.classList.remove('hidding') - hiddenList.forEach(item => { - item.classList.remove('hidding') - }) + hidden.classList.remove('hidding') + activeDiv.classList.remove('parent') activeDiv.children[0].classList.remove('child') activeDiv.children[0].classList.add('zIndex10') @@ -165,10 +161,8 @@ export default { isActived = false } else { // 记录当前点击的div，改变样式 - // hidden.classList.add('hidding') - hiddenList.forEach(item => { - item.classList.add('hidding') - }) + hidden.classList.add('hidding') + activeDiv = page1[i] activeDiv.classList.remove('zIndex10') activeDiv.classList.add('parent') @@ -190,17 +184,29 @@ export default { } for (let i = 0; i < page2.length; i++) { page2[i].addEventListener('click', () => { - isActived = true - // hidden.classList.add('hidding') - hiddenList.forEach(item => { - item.classList.add('hidding') - }) - // 记录当前点击的div，改变样式 - activeDiv = page2[i] - activeDiv.classList.add('parent') - activeDiv.children[0].classList.add('child') - activeDiv.classList.remove('zIndex10') + console.log('isActived', isActived) + if (isActived) { + // 回到主菜单 + hidden.classList.remove('hidding') + + activeDiv.classList.remove('parent') + activeDiv.children[0].classList.remove('child') + activeDiv.children[0].classList.add('zIndex10') + // hidden.classList.remove('hidding') + isActived = false + } else { + // 记录当前点击的div，改变样式 + hidden.classList.add('hidding') + + activeDiv = page2[i] + activeDiv.classList.remove('zIndex10') + activeDiv.classList.add('parent') + activeDiv.children[0].classList.add('child') + // hidden.classList.add('hidding') + isActived = true + } }) + } // 点击回到主菜单 document.querySelector('.hidden').addEventListener('click', () => { @@ -209,10 +215,8 @@ export default { activeDiv.classList.remove('parent') activeDiv.children[0].classList.remove('child') activeDiv.children[0].classList.add('zIndex10') - // hidden.classList.remove('hidding') - hiddenList.forEach(item => { - item.classList.remove('hidding') - }) + hidden.classList.remove('hidding') + isActived = false } @@ -239,9 +243,6 @@ export default { turning: function (e, page, view) { // console.log("turning", e, page, view) // 翻页前触发 - }, - turned: function (e, page) { - // console.log("turned", e, page) document.querySelector('.index').removeEventListener('touchend', touchendHandle) if (page === 2) { for (let i = 0; i < page1.length; i++) { @@ -274,6 +275,10 @@ export default { document.querySelector('.lt').style.zIndex = 99 document.querySelector('.lb').style.zIndex = 99 } + }, + turned: function (e, page) { + // console.log("turned", e, page) + // 翻页后触发 }, start: function (e, pageObj) { @@ -362,12 +367,12 @@ export default { } .hidden { - /* width: 100%; - height: 100%; */ + width: 100%; + height: 100%; background-color: rgb(0, 0, 0); - /* position: absolute; + position: absolute; top: 0%; - left: 0%; */ + left: 0%; z-index: 0; opacity: 0; transition-property: all; @@ -375,46 +380,12 @@ export default { transition-timing-function: linear; transition-delay: 0s; } -.hi{ - width: 100%; - height: 100%; - position: absolute; - top: 0%; - left: 0% -} .hidding { z-index: 50 !important; opacity: 0.5 !important; } -.hi1{ - position: absolute; - top: 10%; - left: 0%; -} -.hi2{ - position: absolute; - top: 10%; - right: 0%; -} -.hi3{ - position: absolute; - top: 0%; - left: 0%; -} -.hi4{ - position: absolute; - bottom: 0%; - left: 0%; -} -.hi1,.hi2{ - width: 137px; - height: 80%; -} -.hi3,.hi4{ - width: 1366px; - height: 10%; -} + .pic { width: 100%;