完成

src/components/FirstPage.vue

@@ -5,11 +5,16 @@
             <img src="../assets/page1.png" alt="" class="pic">
             <img src="../assets/page2.jpg" alt="" class="pic">
         </div>
+        <div class="hidden hi1"></div>
+        <div class="hidden hi2"></div>
+        <div class="hidden hi3"></div>
+        <div class="hidden hi4"></div>
+        <!-- <div class="hidden hi"></div> -->
+
         <div class="page1 i1-1">
             <img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
         </div>
 
-        <!-- <div class="hidden"></div> -->
         <div class="page1 i1-2">
             <img class="itPic" src="../assets/蔓越莓冷萃.jpg" alt="">
         </div>
@@ -141,13 +146,18 @@ export default {
             page1 = document.getElementsByClassName('page1')
             page2 = document.getElementsByClassName('page2')
 
-            // let hidden = document.querySelector('.hidden')
+            let hidden = document.querySelector('.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')
+                        })
                         activeDiv.classList.remove('parent')
                         activeDiv.children[0].classList.remove('child')
                         activeDiv.children[0].classList.add('zIndex10')
@@ -155,6 +165,10 @@ export default {
                         isActived = false
                     } else {
                         // 记录当前点击的div，改变样式
+                        // hidden.classList.add('hidding')
+                        hiddenList.forEach(item => {
+                            item.classList.add('hidding')
+                        })
                         activeDiv = page1[i]
                         activeDiv.classList.remove('zIndex10')
                         activeDiv.classList.add('parent')
@@ -177,7 +191,10 @@ export default {
             for (let i = 0; i < page2.length; i++) {
                 page2[i].addEventListener('click', () => {
                     isActived = true
-                    hidden.classList.add('hidding')
+                    // hidden.classList.add('hidding')
+                    hiddenList.forEach(item => {
+                            item.classList.add('hidding')
+                        })
                     // 记录当前点击的div，改变样式
                     activeDiv = page2[i]
                     activeDiv.classList.add('parent')
@@ -192,7 +209,10 @@ export default {
                     activeDiv.classList.remove('parent')
                     activeDiv.children[0].classList.remove('child')
                     activeDiv.children[0].classList.add('zIndex10')
-                    hidden.classList.remove('hidding')
+                    // hidden.classList.remove('hidding')
+                    hiddenList.forEach(item => {
+                            item.classList.remove('hidding')
+                        })
                     isActived = false
                 }
 
@@ -342,12 +362,12 @@ export default {
 }
 
 .hidden {
-    width: 100%;
+    /* width: 100%;
-    height: 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;
@@ -355,11 +375,46 @@ 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%;
@@ -389,11 +444,10 @@ export default {
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%);
-
-    width: 1092px !important;
     /* 683 */
-    height: 819px !important;
+    width: 1092px !important;
     /* 512 */
+    height: 819px !important;
     z-index: 100 !important;
 }