From edf2a1e8ca098243000a33d96503d653139b7ac1 Mon Sep 17 00:00:00 2001
From: Smile-Xin <13622060635@163.com>
Date: Tue, 10 Dec 2024 16:26:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E6=88=90=E5=85=A8=E5=B1=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FirstPage.vue | 62 +++++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 19 deletions(-)

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 @@
         <div class="page1 i1-1">
             <img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
         </div>
-        <div class="hidden"></div>
+        <!-- <div class="hidden"></div> -->
         <div class="page1 i1-2">
             <img class="itPic" src="../assets/蔓越莓冷萃.jpg" alt="">
         </div>
@@ -37,7 +37,7 @@
             <img class="itPic" src="../assets/黄油啤酒.jpg" alt="">
         </div>
         <div class="page1 i4-1">
-            <img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
+            <img class="itPic" src="../assets/dirty.jpg" alt="">
         </div>
         <div class="page1 i4-2">
             <img class="itPic" src="../assets/咸dirty.jpg" alt="">
@@ -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; */