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-11 07:22:11 +08:00
parent 1662d0d612
commit a2f0d916fb
1 changed files with 66 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/FirstPage.vue
View File

@ -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;