coffee/src/components/FirstPage.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>