基本功能完成
This commit is contained in:
parent
6401758ab2
commit
c2c58c0961
@ -3,30 +3,114 @@
|
||||
|
||||
<div id="page">
|
||||
<img src="../assets/page1.png" alt="" class="pic">
|
||||
<!-- <img src="../assets/page1-1.png" alt="" class="pic">
|
||||
<img src="../assets/page1-2.png" alt="" class="pic"> -->
|
||||
<!-- <img src="../assets/page2-1.jpg" alt="" class="pic">
|
||||
<img src="../assets/page2-2.jpg" alt="" class="pic"> -->
|
||||
<img src="../assets/page2.jpg" alt="" class="pic">
|
||||
</div>
|
||||
<div class="page1 i1-1">
|
||||
<img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
|
||||
</div>
|
||||
<div class="hidden"></div>
|
||||
<div class="page1 i1-2"></div>
|
||||
<div class="page1 i1-3"></div>
|
||||
<div class="page1 i1-4"></div>
|
||||
<div class="page1 i2-1"></div>
|
||||
<div class="page1 i2-2"></div>
|
||||
<div class="page1 i3-1"></div>
|
||||
<div class="page1 i3-2"></div>
|
||||
<div class="page1 i3-3"></div>
|
||||
<div class="page1 i3-4"></div>
|
||||
<div class="page1 i4-1"></div>
|
||||
<div class="page1 i4-2"></div>
|
||||
<div class="page1 i4-3"></div>
|
||||
<div class="page1 i4-4"></div>
|
||||
<div class="page1 i4-5"></div>
|
||||
<div class="page1 i1-2">
|
||||
<img class="itPic" src="../assets/蔓越莓冷萃.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i1-3">
|
||||
<img class="itPic" src="../assets/鸳鸯拿铁.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i1-4">
|
||||
<img class="itPic" src="../assets/拿铁.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i2-1">
|
||||
<img class="itPic" src="../assets/澳白.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i2-2">
|
||||
<img class="itPic" src="../assets/摩卡.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i3-1">
|
||||
<img class="itPic" src="../assets/手冲咖啡.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i3-2">
|
||||
<img class="itPic" src="../assets/水仙.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i3-3">
|
||||
<img class="itPic" src="../assets/燕麦拿铁.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i3-4">
|
||||
<img class="itPic" src="../assets/黄油啤酒.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i4-1">
|
||||
<img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i4-2">
|
||||
<img class="itPic" src="../assets/咸dirty.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i4-3">
|
||||
<img class="itPic" src="../assets/青提抹茶.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i4-4">
|
||||
<img class="itPic" src="../assets/手打抹茶.jpg" alt="">
|
||||
</div>
|
||||
<div class="page1 i4-5">
|
||||
<img class="itPic" src="../assets/梅子起泡酒.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<!-- page2 -->
|
||||
<div class="page2 l1-1">
|
||||
<img class="itPic" src="../assets/美式.jpg" alt="">
|
||||
</div>
|
||||
<div class="hidden"></div>
|
||||
<div class="page2 l1-2">
|
||||
<img class="itPic" src="../assets/茉莉莓.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l1-3">
|
||||
<img class="itPic" src="../assets/对象气泡美式.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l1-4">
|
||||
<img class="itPic" src="../assets/肉橙气泡美式.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l2-1">
|
||||
<img class="itPic" src="../assets/菠萝冰美式.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l2-2">
|
||||
<img class="itPic" src="../assets/蔓越莓气泡美式.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l2-3">
|
||||
<img class="itPic" src="../assets/百香果.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l2-4">
|
||||
<img class="itPic" src="../assets/柠檬气泡水.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l2-5">
|
||||
<img class="itPic" src="../assets/乌梅气泡美式.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l3-1">
|
||||
<img class="itPic" src="../assets/宝矿力.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l3-2">
|
||||
<img class="itPic" src="../assets/脉动.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l3-3">
|
||||
<img class="itPic" src="../assets/泰象气泡水.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l3-4">
|
||||
<img class="itPic" src="../assets/乌龙茶.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l3-5">
|
||||
<img class="itPic" src="../assets/橙汁.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l4-1">
|
||||
<img class="itPic" src="../assets/冰博克.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l4-2">
|
||||
<img class="itPic" src="../assets/燕麦奶.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l4-3">
|
||||
<img class="itPic" src="../assets/水牛奶.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l4-4">
|
||||
<img class="itPic" src="../assets/希腊橙汁.jpg" alt="">
|
||||
</div>
|
||||
<div class="page2 l4-5">
|
||||
<img class="itPic" src="../assets/希腊蔓越莓汁.jpg" alt="">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="lt"></div>
|
||||
@ -48,27 +132,47 @@ export default {
|
||||
let nextPage = 2
|
||||
let nowPage = 1
|
||||
let activeDiv = null
|
||||
let isActived = false
|
||||
let page1 = null
|
||||
let page2 = null
|
||||
onMounted(() => {
|
||||
|
||||
let pageList = document.getElementsByClassName('page1')
|
||||
page1 = document.getElementsByClassName('page1')
|
||||
page2 = document.getElementsByClassName('page2')
|
||||
let hidden = document.querySelector('.hidden')
|
||||
for (let i = 0; i < pageList.length; i++) {
|
||||
pageList[i].addEventListener('click', () => {
|
||||
for (let i = 0; i < page1.length; i++) {
|
||||
page1[i].addEventListener('click', () => {
|
||||
isActived = true
|
||||
hidden.classList.add('hidding')
|
||||
// 记录当前点击的div，改变样式
|
||||
activeDiv = pageList[i]
|
||||
|
||||
activeDiv = page1[i]
|
||||
activeDiv.classList.remove('zIndex10')
|
||||
activeDiv.classList.add('parent')
|
||||
activeDiv.children[0].classList.add('child')
|
||||
document.querySelector('#page').addEventListener('click', () => {
|
||||
console.log('click')
|
||||
|
||||
})
|
||||
|
||||
// pageList[i].style.transform = 'translate(-50%, -50%)'
|
||||
// pageList[i].classList.add('center')
|
||||
})
|
||||
}
|
||||
for (let i = 0; i < page2.length; i++) {
|
||||
page2[i].addEventListener('click', () => {
|
||||
isActived = true
|
||||
hidden.classList.add('hidding')
|
||||
// 记录当前点击的div，改变样式
|
||||
activeDiv = page2[i]
|
||||
activeDiv.classList.add('parent')
|
||||
activeDiv.children[0].classList.add('child')
|
||||
activeDiv.classList.remove('zIndex10')
|
||||
})
|
||||
}
|
||||
// 点击回到主菜单
|
||||
document.querySelector('.hidden').addEventListener('click', () => {
|
||||
// console.log('click')
|
||||
if (isActived) {
|
||||
activeDiv.classList.remove('parent')
|
||||
activeDiv.children[0].classList.remove('child')
|
||||
activeDiv.children[0].classList.add('zIndex10')
|
||||
hidden.classList.remove('hidding')
|
||||
isActived = false
|
||||
}
|
||||
|
||||
})
|
||||
onTurn()
|
||||
})
|
||||
const onTurn = () => {
|
||||
@ -89,19 +193,37 @@ export default {
|
||||
when: {
|
||||
//监听事件
|
||||
turning: function (e, page, view) {
|
||||
console.log("turning", e, page, view)
|
||||
// console.log("turning", e, page, view)
|
||||
// 翻页前触发
|
||||
},
|
||||
turned: function (e, page) {
|
||||
console.log("turned", e, page)
|
||||
// console.log("turned", e, page)
|
||||
document.querySelector('.index').removeEventListener('touchend', touchendHandle)
|
||||
if (page === 2) {
|
||||
for (let i = 0; i < page1.length; i++) {
|
||||
page1[i].classList.remove('zIndex10')
|
||||
page1[i].classList.add('zIndex0')
|
||||
}
|
||||
for (let i = 0; i < page2.length; i++) {
|
||||
page2[i].classList.remove('zIndex0')
|
||||
page2[i].classList.add('zIndex10')
|
||||
}
|
||||
nowPage = 2
|
||||
document.querySelector('.rb').style.zIndex = 99
|
||||
document.querySelector('.rt').style.zIndex = 99
|
||||
document.querySelector('.lt').style.zIndex = 0
|
||||
document.querySelector('.lb').style.zIndex = 0
|
||||
} else {
|
||||
for (let i = 0; i < page2.length; i++) {
|
||||
page2[i].classList.remove('zIndex10')
|
||||
|
||||
page2[i].classList.add('zIndex0')
|
||||
}
|
||||
for (let i = 0; i < page1.length; i++) {
|
||||
page1[i].classList.remove('zIndex0')
|
||||
|
||||
page1[i].classList.add('zIndex10')
|
||||
}
|
||||
nowPage = 1
|
||||
document.querySelector('.rb').style.zIndex = 0
|
||||
document.querySelector('.rt').style.zIndex = 0
|
||||
@ -111,7 +233,7 @@ export default {
|
||||
// 翻页后触发
|
||||
},
|
||||
start: function (e, pageObj) {
|
||||
console.log("start", e, pageObj)
|
||||
// console.log("start", e, pageObj)
|
||||
nextPage = pageObj.next
|
||||
document.querySelector('.index').addEventListener('touchend', touchendHandle)
|
||||
// 开始翻页时触发
|
||||
@ -123,10 +245,10 @@ export default {
|
||||
|
||||
}
|
||||
const clickHandle = () => {
|
||||
console.log('onclick')
|
||||
// console.log('onclick')
|
||||
}
|
||||
const touchendHandle = () => {
|
||||
console.log('touchend')
|
||||
// console.log('touchend')
|
||||
if (nextPage === 2) {
|
||||
$('#page').turn("next")
|
||||
} else {
|
||||
@ -193,7 +315,8 @@ export default {
|
||||
/* background-image: url(../assets/page1.png); */
|
||||
z-index: 6;
|
||||
}
|
||||
.hidden{
|
||||
|
||||
.hidden {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(0, 0, 0);
|
||||
@ -201,13 +324,14 @@ export default {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
transition-property: all;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: linear;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.hidding{
|
||||
|
||||
.hidding {
|
||||
z-index: 50 !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
@ -227,6 +351,11 @@ export default {
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: linear;
|
||||
transition-delay: 0s;
|
||||
|
||||
-webkit-transition-property: all;
|
||||
-webkit-transition-duration: 0.5s;
|
||||
-webkit-transition-timing-function: linear;
|
||||
-webkit-transition-delay: 0s;
|
||||
/* transform: translate(-50%, -50%); */
|
||||
|
||||
}
|
||||
@ -254,6 +383,13 @@ export default {
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.zIndex10 {
|
||||
z-index: 10 !important;
|
||||
}
|
||||
.zIndex0 {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.page1 {
|
||||
position: absolute;
|
||||
@ -267,6 +403,30 @@ export default {
|
||||
transition-timing-function: linear;
|
||||
transition-delay: 0s;
|
||||
|
||||
-webkit-transition-property: all;
|
||||
-webkit-transition-duration: 0.5s;
|
||||
-webkit-transition-timing-function: linear;
|
||||
-webkit-transition-delay: 0s;
|
||||
|
||||
}
|
||||
|
||||
.page2 {
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
z-index: 0;
|
||||
/* transform: translate(-50%, -50%); */
|
||||
/* background-color: saddlebrown; */
|
||||
transition-property: all;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: linear;
|
||||
transition-delay: 0s;
|
||||
|
||||
-webkit-transition-property: all;
|
||||
-webkit-transition-duration: 0.5s;
|
||||
-webkit-transition-timing-function: linear;
|
||||
-webkit-transition-delay: 0s;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -376,4 +536,138 @@ export default {
|
||||
top: 77%;
|
||||
left: 80%;
|
||||
}
|
||||
|
||||
/* 第二页 */
|
||||
.l1-1 {
|
||||
width: 10%;
|
||||
height: 15%;
|
||||
top: 21%;
|
||||
left: 9%;
|
||||
}
|
||||
|
||||
.l1-2 {
|
||||
width: 13%;
|
||||
height: 16%;
|
||||
top: 20%;
|
||||
left: 28%;
|
||||
}
|
||||
|
||||
.l1-3 {
|
||||
width: 17%;
|
||||
height: 15%;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.l1-4 {
|
||||
width: 16%;
|
||||
height: 15%;
|
||||
top: 20%;
|
||||
left: 73%;
|
||||
}
|
||||
|
||||
.l2-1 {
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
top: 38%;
|
||||
left: 3%;
|
||||
}
|
||||
|
||||
.l2-2 {
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
top: 39%;
|
||||
left: 23%;
|
||||
}
|
||||
|
||||
.l2-3 {
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
top: 39%;
|
||||
left: 43%;
|
||||
}
|
||||
|
||||
.l2-4 {
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
top: 39%;
|
||||
left: 60%;
|
||||
}
|
||||
|
||||
.l2-5 {
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
top: 39%;
|
||||
left: 78%;
|
||||
}
|
||||
|
||||
.l3-1 {
|
||||
width: 12%;
|
||||
height: 15%;
|
||||
top: 62%;
|
||||
left: 9%;
|
||||
}
|
||||
|
||||
.l3-2 {
|
||||
width: 12%;
|
||||
height: 15%;
|
||||
top: 62%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.l3-3 {
|
||||
width: 12%;
|
||||
height: 15%;
|
||||
top: 62%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.l3-4 {
|
||||
width: 12%;
|
||||
height: 15%;
|
||||
top: 62%;
|
||||
left: 60%;
|
||||
}
|
||||
|
||||
.l3-5 {
|
||||
width: 12%;
|
||||
height: 15%;
|
||||
top: 62%;
|
||||
left: 79%;
|
||||
}
|
||||
|
||||
.l4-1 {
|
||||
width: 12%;
|
||||
height: 15%;
|
||||
top: 80%;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.l4-2 {
|
||||
width: 12%;
|
||||
height: 15%;
|
||||
top: 80%;
|
||||
left: 35%;
|
||||
}
|
||||
|
||||
.l4-3 {
|
||||
width: 12%;
|
||||
height: 15%;
|
||||
top: 80%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.l4-4 {
|
||||
width: 12%;
|
||||
height: 15%;
|
||||
top: 80%;
|
||||
left: 65%;
|
||||
}
|
||||
|
||||
.l4-5 {
|
||||
width: 13%;
|
||||
height: 15%;
|
||||
top: 80%;
|
||||
left: 80%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user