diff --git a/src/components/FirstPage.vue b/src/components/FirstPage.vue index 2fe81bf..455a274 100644 --- a/src/components/FirstPage.vue +++ b/src/components/FirstPage.vue @@ -8,7 +8,7 @@
- +
@@ -37,7 +37,7 @@
- +
@@ -138,16 +138,37 @@ export default { onMounted(() => { page1 = document.getElementsByClassName('page1') page2 = document.getElementsByClassName('page2') - let hidden = document.querySelector('.hidden') + // let hidden = document.querySelector('.hidden') + // 给每个商品添加点击事件 for (let i = 0; i < page1.length; i++) { page1[i].addEventListener('click', () => { - isActived = true - hidden.classList.add('hidding') - // 记录当前点击的div,改变样式 - activeDiv = page1[i] - activeDiv.classList.remove('zIndex10') - activeDiv.classList.add('parent') - activeDiv.children[0].classList.add('child') + console.log('isActived', isActived) + if (isActived) { + // 回到主菜单 + activeDiv.classList.remove('parent') + activeDiv.children[0].classList.remove('child') + activeDiv.children[0].classList.add('zIndex10') + // hidden.classList.remove('hidding') + isActived = false + } else { + // 记录当前点击的div,改变样式 + activeDiv = page1[i] + activeDiv.classList.remove('zIndex10') + activeDiv.classList.add('parent') + activeDiv.children[0].classList.add('child') + // hidden.classList.add('hidding') + isActived = true + } + if (false) { + + isActived = true + hidden.classList.add('hidding') + // 记录当前点击的div,改变样式 + activeDiv = page1[i] + activeDiv.classList.remove('zIndex10') + activeDiv.classList.add('parent') + activeDiv.children[0].classList.add('child') + } }) } for (let i = 0; i < page2.length; i++) { @@ -276,7 +297,7 @@ export default { position: absolute; width: 10%; height: 10%; - background-color: red; + /* background-color: red; */ /* z-index: 99; */ } @@ -364,17 +385,18 @@ export default { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); - width: 683px !important; + width: 1366px !important; /* 683 */ - height: 512px !important; + height: 1024px !important; /* 512 */ z-index: 100 !important; } .child { - width: 683px !important; - height: 512px !important; + width: 1366px !important; + height: 1024px !important; z-index: 100 !important; + opacity: 0.7 !important; } .center { @@ -383,9 +405,11 @@ export default { left: 50% !important; transform: translate(-50%, -50%); } + .zIndex10 { z-index: 10 !important; } + .zIndex0 { z-index: 0 !important; } @@ -393,8 +417,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; */ @@ -412,8 +436,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; */