sx/coffee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新版本

Browse Source
This commit is contained in:
SmileXin 2024-12-10 18:44:48 +08:00
commit 1662d0d612
1 changed files with 53 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/FirstPage.vue
View File

@ -8,7 +8,8 @@
<div class="page1 i1-1"> <div class="page1 i1-1">
<img class="itPic" src="../assets/冷萃咖啡.jpg" alt=""> <img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
</div> </div>
<div class="hidden"></div>
<!-- <div class="hidden"></div> -->
<div class="page1 i1-2"> <div class="page1 i1-2">
<img class="itPic" src="../assets/蔓越莓冷萃.jpg" alt=""> <img class="itPic" src="../assets/蔓越莓冷萃.jpg" alt="">
</div> </div>
@ -37,7 +38,8 @@
<img class="itPic" src="../assets/黄油啤酒.jpg" alt=""> <img class="itPic" src="../assets/黄油啤酒.jpg" alt="">
</div> </div>
<div class="page1 i4-1"> <div class="page1 i4-1">
<img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
<img class="itPic" src="../assets/dirty.jpg" alt="">
</div> </div>
<div class="page1 i4-2"> <div class="page1 i4-2">
<img class="itPic" src="../assets/咸dirty.jpg" alt=""> <img class="itPic" src="../assets/咸dirty.jpg" alt="">
@ -138,16 +140,38 @@ export default {
onMounted(() => { onMounted(() => {
page1 = document.getElementsByClassName('page1') page1 = document.getElementsByClassName('page1')
page2 = document.getElementsByClassName('page2') page2 = document.getElementsByClassName('page2')
let hidden = document.querySelector('.hidden')
// let hidden = document.querySelector('.hidden')
// 给每个商品添加点击事件
for (let i = 0; i < page1.length; i++) { for (let i = 0; i < page1.length; i++) {
page1[i].addEventListener('click', () => { page1[i].addEventListener('click', () => {
isActived = true console.log('isActived', isActived)
hidden.classList.add('hidding') if (isActived) {
// 记录当前点击的div，改变样式 // 回到主菜单
activeDiv = page1[i] activeDiv.classList.remove('parent')
activeDiv.classList.remove('zIndex10') activeDiv.children[0].classList.remove('child')
activeDiv.classList.add('parent') activeDiv.children[0].classList.add('zIndex10')
activeDiv.children[0].classList.add('child') // 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++) { for (let i = 0; i < page2.length; i++) {
@ -276,7 +300,8 @@ export default {
position: absolute; position: absolute;
width: 10%; width: 10%;
height: 10%; height: 10%;
background-color: red;
/* background-color: red; */
/* z-index: 99; */ /* z-index: 99; */
} }
@ -364,17 +389,21 @@ export default {
top: 50% !important; top: 50% !important;
left: 50% !important; left: 50% !important;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 683px !important;
width: 1092px !important;
/* 683 */ /* 683 */
height: 512px !important; height: 819px !important;
/* 512 */ /* 512 */
z-index: 100 !important; z-index: 100 !important;
} }
.child { .child {
width: 683px !important; /* 0.8 */
height: 512px !important; width: 1092px !important;
/* 0.8 */
height: 819px !important;
z-index: 100 !important; z-index: 100 !important;
opacity: 0.9 !important;
} }
.center { .center {
@ -383,9 +412,12 @@ export default {
left: 50% !important; left: 50% !important;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.zIndex10 { .zIndex10 {
z-index: 10 !important; z-index: 10 !important;
} }
.zIndex0 { .zIndex0 {
z-index: 0 !important; z-index: 0 !important;
} }
@ -393,8 +425,9 @@ export default {
.page1 { .page1 {
position: absolute; position: absolute;
border-style: solid;
border-width: 1px; /* border-style: solid;
border-width: 1px; */
z-index: 10; z-index: 10;
/* transform: translate(-50%, -50%); */ /* transform: translate(-50%, -50%); */
/* background-color: saddlebrown; */ /* background-color: saddlebrown; */
@ -412,8 +445,9 @@ export default {
.page2 { .page2 {
position: absolute; position: absolute;
border-style: solid;
border-width: 1px; /* border-style: solid;
border-width: 1px; */
z-index: 0; z-index: 0;
/* transform: translate(-50%, -50%); */ /* transform: translate(-50%, -50%); */
/* background-color: saddlebrown; */ /* background-color: saddlebrown; */