From a2f0d916fb86c5267f4f911ffe3b344b28c0fc2d Mon Sep 17 00:00:00 2001
From: SmileXin <13622060635@163.com>
Date: Wed, 11 Dec 2024 07:22:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FirstPage.vue | 78 ++++++++++++++++++++++++++++++------
 1 file changed, 66 insertions(+), 12 deletions(-)

diff --git a/src/components/FirstPage.vue b/src/components/FirstPage.vue
index 16f7e76..9feac57 100644
--- a/src/components/FirstPage.vue
+++ b/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%;
-    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;
@@ -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,17 +444,16 @@ 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;
 }
 
 .child {
     /* 0.8 */
-    width: 1092px !important; 
+    width: 1092px !important;
     /* 0.8 */
     height: 819px !important;
     z-index: 100 !important;