更新版本

src/components/FirstPage.vue

@@ -8,7 +8,8 @@
         <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 +38,8 @@
             <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,9 +140,30 @@ 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', () => {
+                    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，改变样式
@@ -148,6 +171,7 @@ export default {
                         activeDiv.classList.remove('zIndex10')
                         activeDiv.classList.add('parent')
                         activeDiv.children[0].classList.add('child')
+                    }
                 })
             }
             for (let i = 0; i < page2.length; i++) {
@@ -276,7 +300,8 @@ export default {
     position: absolute;
     width: 10%;
     height: 10%;
-    background-color: red;
+
+    /* background-color: red; */
     /* z-index: 99; */
 }
 
@@ -364,17 +389,21 @@ export default {
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%);
-    width: 683px !important;
+
+    width: 1092px !important;
     /* 683 */
-    height: 512px !important;
+    height: 819px !important;
     /* 512 */
     z-index: 100 !important;
 }
 
 .child {
-    width: 683px !important;
-    height: 512px !important;
+    /* 0.8 */
+    width: 1092px !important; 
+    /* 0.8 */
+    height: 819px !important;
     z-index: 100 !important;
+    opacity: 0.9 !important;
 }
 
 .center {
@@ -383,9 +412,12 @@ export default {
     left: 50% !important;
     transform: translate(-50%, -50%);
 }
+
+
 .zIndex10 {
     z-index: 10 !important;
 }
+
 .zIndex0 {
     z-index: 0 !important;
 }
@@ -393,8 +425,9 @@ 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 +445,9 @@ 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; */