coffee/src/components/FirstPage.vue

<template>
    <div class="index">

        <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="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
        onMounted(() => {

            let pageList = document.getElementsByClassName('page1')
            let hidden = document.querySelector('.hidden')
            for (let i = 0; i < pageList.length; i++) {
                pageList[i].addEventListener('click', () => {
                    hidden.classList.add('hidding')
                    // 记录当前点击的div，改变样式
                    activeDiv = pageList[i]

                    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')
                })
            }
            onTurn()
        })
        const onTurn = () => {
            nextTick(() => {
                $('#page').turn({
                    autoCenter: true,
                    height: 2048 / 2, //高度
                    width: 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)
                            // 翻页前触发
                        },
                        turned: function (e, page) {
                            console.log("turned", e, page)
                            document.querySelector('.index').removeEventListener('touchend', touchendHandle)
                            if (page === 2) {
                                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 {
                                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
                            }
                            // 翻页后触发
                        },
                        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;
    /* transform: translate(-50%, -50%); */

}

.parent {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 683px !important;
    /* 683 */
    height: 512px !important;
    /* 512 */
    z-index: 100 !important;
}

.child {
    width: 683px !important;
    height: 512px !important;
    z-index: 100 !important;
}

.center {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

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

}



.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%;
}
</style>