746 lines
18 KiB
Vue
746 lines
18 KiB
Vue
<template>
|
||
<div class="index">
|
||
|
||
<div id="page">
|
||
<img src="../assets/两个菜单.jpg" alt="" class="pic">
|
||
<img src="../assets/两个菜单2.jpg" alt="" class="pic">
|
||
</div>
|
||
<div class="hidden"></div>
|
||
<!-- <div class="hidden hi"></div> -->
|
||
|
||
<div class="page1 i1-1">
|
||
<img class="itPic" src="../assets/冷萃咖啡.jpg" alt="">
|
||
</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/dirty.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>
|
||
<div class="lb"></div>
|
||
<div class="rt"></div>
|
||
<div class="rb"></div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
<script>
|
||
import { nextTick, onMounted } from 'vue'
|
||
import turn from '../utils/turn.js'
|
||
import $ from 'jquery'
|
||
export default {
|
||
components: {},
|
||
setup() {
|
||
|
||
let nextPage = 2
|
||
let nowPage = 1
|
||
let activeDiv = null
|
||
let isActived = false
|
||
let page1 = null
|
||
let page2 = null
|
||
onMounted(() => {
|
||
document.body.addEventListener('touchmove', (e) => {
|
||
console.log('touchmove',e)
|
||
e.preventDefault()
|
||
}, {
|
||
passive: false
|
||
})
|
||
document.body.addEventListener('touchmove', (e) => {
|
||
if (e._isScroller) return;
|
||
e.preventDefault()
|
||
}, {
|
||
passive: false
|
||
})
|
||
page1 = document.getElementsByClassName('page1')
|
||
page2 = document.getElementsByClassName('page2')
|
||
|
||
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')
|
||
|
||
activeDiv.classList.remove('parent')
|
||
activeDiv.children[0].classList.remove('child')
|
||
activeDiv.children[0].classList.add('zIndex10')
|
||
// hidden.classList.remove('hidding')
|
||
isActived = false
|
||
} else {
|
||
// 记录当前点击的div，改变样式
|
||
hidden.classList.add('hidding')
|
||
|
||
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++) {
|
||
page2[i].addEventListener('click', () => {
|
||
console.log('isActived', isActived)
|
||
if (isActived) {
|
||
// 回到主菜单
|
||
hidden.classList.remove('hidding')
|
||
|
||
activeDiv.classList.remove('parent')
|
||
activeDiv.children[0].classList.remove('child')
|
||
activeDiv.classList.add('zIndex10')
|
||
// hidden.classList.remove('hidding')
|
||
isActived = false
|
||
} else {
|
||
// 记录当前点击的div，改变样式
|
||
hidden.classList.add('hidding')
|
||
|
||
activeDiv = page2[i]
|
||
activeDiv.classList.remove('zIndex10')
|
||
activeDiv.classList.add('parent')
|
||
activeDiv.children[0].classList.add('child')
|
||
// hidden.classList.add('hidding')
|
||
isActived = true
|
||
}
|
||
})
|
||
|
||
}
|
||
// 点击回到主菜单
|
||
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 = () => {
|
||
nextTick(() => {
|
||
$('#page').turn({
|
||
autoCenter: true,
|
||
height: 1536 / 2, //高度 pro 2048 / 2
|
||
width: 2048 / 2, //宽度 pro 2732 / 2
|
||
display: 'single', //单页显示/双页显示 single/double
|
||
elevation: 50,
|
||
duration: 1000, //翻页速度(毫秒), 默认600ms
|
||
gradients: true, //翻页时的阴影渐变, 默认true
|
||
// autoCenter: true, //自动居中, 默认false
|
||
acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true
|
||
page: 1, //设置当前显示第几页
|
||
pages: 2, //总页数
|
||
turnCorners: 'bl,tr',
|
||
when: {
|
||
//监听事件
|
||
turning: function (e, page, view) {
|
||
// console.log("turning", e, page, view)
|
||
// 翻页前触发
|
||
isActived = false
|
||
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
|
||
document.querySelector('.lt').style.zIndex = 99
|
||
document.querySelector('.lb').style.zIndex = 99
|
||
}
|
||
},
|
||
turned: function (e, page) {
|
||
// console.log("turned", e, page)
|
||
|
||
// 翻页后触发
|
||
},
|
||
start: function (e, pageObj) {
|
||
// console.log("start", e, pageObj)
|
||
nextPage = pageObj.next
|
||
document.querySelector('.index').addEventListener('touchend', touchendHandle)
|
||
// 开始翻页时触发
|
||
// $('#page').turn("next")
|
||
}
|
||
},
|
||
})
|
||
})
|
||
|
||
}
|
||
const clickHandle = () => {
|
||
// console.log('onclick')
|
||
}
|
||
const touchendHandle = () => {
|
||
// console.log('touchend')
|
||
if (nextPage === 2) {
|
||
$('#page').turn("next")
|
||
} else {
|
||
$('#page').turn("previous")
|
||
}
|
||
}
|
||
|
||
return {
|
||
touchendHandle,
|
||
clickHandle,
|
||
nextPage,
|
||
nowPage,
|
||
activeDiv,
|
||
onTurn
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
<style>
|
||
.lt,
|
||
.lb,
|
||
.rt,
|
||
.rb {
|
||
position: absolute;
|
||
width: 10%;
|
||
height: 10%;
|
||
|
||
/* background-color: red; */
|
||
/* z-index: 99; */
|
||
}
|
||
|
||
.lt {
|
||
top: 0%;
|
||
left: 0%;
|
||
}
|
||
|
||
.lb {
|
||
bottom: 0%;
|
||
left: 0%;
|
||
}
|
||
|
||
.rt {
|
||
top: 0%;
|
||
right: 0%;
|
||
}
|
||
|
||
.rb {
|
||
bottom: 0%;
|
||
right: 0%;
|
||
}
|
||
|
||
.index {
|
||
width: 100%;
|
||
height: 100%;
|
||
/* overflow: hidden; */
|
||
}
|
||
|
||
#page {
|
||
/* position: absolute;
|
||
top: 0%;
|
||
left: 0%; */
|
||
width: 100%;
|
||
height: 100%;
|
||
/* background-image: url(../assets/page1.png); */
|
||
z-index: 6;
|
||
}
|
||
|
||
.hidden {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgb(0, 0, 0);
|
||
position: absolute;
|
||
top: 0%;
|
||
left: 0%;
|
||
z-index: 0;
|
||
opacity: 0;
|
||
transition-property: all;
|
||
transition-duration: 0.5s;
|
||
transition-timing-function: linear;
|
||
transition-delay: 0s;
|
||
}
|
||
|
||
.hidding {
|
||
z-index: 50 !important;
|
||
opacity: 0.5 !important;
|
||
}
|
||
|
||
|
||
.pic {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.itPic {
|
||
width: 0px;
|
||
height: 0px;
|
||
position: absolute;
|
||
top: 0%;
|
||
left: 0%;
|
||
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;
|
||
/* transform: translate(-50%, -50%); */
|
||
|
||
}
|
||
|
||
.parent {
|
||
/* width/2 - (width * 0.8 / 2) = width * 0.2*/
|
||
top: 10% !important;
|
||
left: 10% !important;
|
||
/* 683 */
|
||
/* width: 1092px !important; */
|
||
/* 512 */
|
||
/* height: 819px !important; */
|
||
width: 819px !important;
|
||
height: 614px !important;
|
||
z-index: 100 !important;
|
||
}
|
||
|
||
.child {
|
||
/* 0.8 */
|
||
width: 819px !important;
|
||
/* 0.8 */
|
||
height: 614px !important;
|
||
z-index: 100 !important;
|
||
opacity: 0.9 !important;
|
||
}
|
||
|
||
.center {
|
||
position: absolute;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
|
||
.zIndex10 {
|
||
z-index: 10 !important;
|
||
}
|
||
|
||
.zIndex0 {
|
||
z-index: 0 !important;
|
||
}
|
||
|
||
|
||
.page1 {
|
||
position: absolute;
|
||
|
||
border-style: solid;
|
||
border-width: 1px;
|
||
z-index: 10;
|
||
/* 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;
|
||
|
||
}
|
||
|
||
.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;
|
||
|
||
}
|
||
|
||
|
||
|
||
.i1-1 {
|
||
width: 10%;
|
||
height: 15%;
|
||
top: 17%;
|
||
left: 5%;
|
||
|
||
}
|
||
|
||
.i1-2 {
|
||
width: 10%;
|
||
height: 15%;
|
||
top: 17%;
|
||
left: 23%;
|
||
}
|
||
|
||
.i1-3 {
|
||
width: 20%;
|
||
height: 15%;
|
||
top: 17%;
|
||
left: 42%;
|
||
}
|
||
|
||
.i1-4 {
|
||
width: 20%;
|
||
height: 15%;
|
||
top: 17%;
|
||
left: 70%;
|
||
}
|
||
|
||
.i2-1 {
|
||
width: 20%;
|
||
height: 14%;
|
||
top: 35%;
|
||
left: 36%;
|
||
}
|
||
|
||
.i2-2 {
|
||
width: 20%;
|
||
height: 14%;
|
||
top: 35%;
|
||
left: 70%;
|
||
}
|
||
|
||
.i3-1 {
|
||
width: 15%;
|
||
height: 23%;
|
||
top: 42%;
|
||
left: 2%;
|
||
}
|
||
|
||
.i3-2 {
|
||
width: 20%;
|
||
height: 18%;
|
||
top: 49%;
|
||
left: 22%;
|
||
}
|
||
|
||
.i3-3 {
|
||
width: 20%;
|
||
height: 18%;
|
||
top: 52%;
|
||
left: 50%;
|
||
}
|
||
|
||
.i3-4 {
|
||
width: 15%;
|
||
height: 18%;
|
||
top: 55%;
|
||
left: 79%;
|
||
}
|
||
|
||
.i4-1 {
|
||
width: 13%;
|
||
height: 15%;
|
||
top: 78%;
|
||
left: 2%;
|
||
}
|
||
|
||
.i4-2 {
|
||
width: 13%;
|
||
height: 15%;
|
||
top: 78%;
|
||
left: 19%;
|
||
}
|
||
|
||
.i4-3 {
|
||
width: 13%;
|
||
height: 15%;
|
||
top: 78%;
|
||
left: 35%;
|
||
}
|
||
|
||
.i4-4 {
|
||
width: 23%;
|
||
height: 15%;
|
||
top: 78%;
|
||
left: 52.5%;
|
||
}
|
||
|
||
.i4-5 {
|
||
width: 13%;
|
||
height: 15%;
|
||
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> |