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

改成全屏样式

Browse Source
This commit is contained in:
Smile-Xin 2024-12-10 16:26:47 +08:00
parent c2c58c0961
commit edf2a1e8ca
1 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/FirstPage.vue
View File

@ -8,7 +8,7 @@
<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 +37,7 @@
<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,9 +138,29 @@ 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', () => {
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 isActived = true
hidden.classList.add('hidding') hidden.classList.add('hidding')
// 记录当前点击的div，改变样式 // 记录当前点击的div，改变样式
@ -148,6 +168,7 @@ export default {
activeDiv.classList.remove('zIndex10') activeDiv.classList.remove('zIndex10')
activeDiv.classList.add('parent') activeDiv.classList.add('parent')
activeDiv.children[0].classList.add('child') activeDiv.children[0].classList.add('child')
}
}) })
} }
for (let i = 0; i < page2.length; i++) { for (let i = 0; i < page2.length; i++) {
@ -276,7 +297,7 @@ 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 +385,18 @@ 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: 1366px !important;
/* 683 */ /* 683 */
height: 512px !important; height: 1024px !important;
/* 512 */ /* 512 */
z-index: 100 !important; z-index: 100 !important;
} }
.child { .child {
width: 683px !important; width: 1366px !important;
height: 512px !important; height: 1024px !important;
z-index: 100 !important; z-index: 100 !important;
opacity: 0.7 !important;
} }
.center { .center {
@ -383,9 +405,11 @@ 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 +417,8 @@ export default {
.page1 { .page1 {
position: absolute; position: absolute;
border-style: solid; /* border-style: solid;
border-width: 1px; 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 +436,8 @@ export default {
.page2 { .page2 {
position: absolute; position: absolute;
border-style: solid; /* border-style: solid;
border-width: 1px; border-width: 1px; */
z-index: 0; z-index: 0;
/* transform: translate(-50%, -50%); */ /* transform: translate(-50%, -50%); */
/* background-color: saddlebrown; */ /* background-color: saddlebrown; */