点击弹出框

src/components/FirstPage.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="index">
+
         <div id="page">
             <img src="../assets/page1.png" alt="" class="pic">
             <!-- <img src="../assets/page1-1.png" alt="" class="pic">
@@ -8,43 +9,74 @@
         <img src="../assets/page2-2.jpg" alt="" class="pic"> -->
             <img src="../assets/page2.jpg" alt="" class="pic">
         </div>
-        <div class="nextPage" v-on:click="clickHandle()"></div>
-        <div class="nextPageIn"></div>
-        <div class="nextPageOut"></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 { ref, nextTick, onMounted } from 'vue'
+import { nextTick, onMounted } from 'vue'
 import turn from '../utils/turn.js'
 import $ from 'jquery'
 export default {
     components: {},
     setup() {
 
-        const imgList = ref([
-            { url: '../assets/page1-1.png' },
-            { url: '../assets/page1-2.png' },
-            { url: '../assets/page2-1.png' },
-            { url: '../assets/page2-2.png' },
-        ])
+        let nextPage = 2
+        let nowPage = 1
+        let activeDiv = null
         onMounted(() => {
-            document.querySelector('.nextPageIn').addEventListener('touchstart', () => {
-                console.log('touchstart')
 
-            })
-            document.querySelector('.nextPageOut').addEventListener('mouseup', () => {
-                console.log('mouseup')
-                alert('mouseup')   
-            })
+            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: 900, //高度
-                    width: 1500, //宽度
+                    height: 2048 / 2, //高度
+                    width: 2732 / 2, //宽度
                     display: 'single', //单页显示/双页显示  single/double
                     elevation: 50,
                     duration: 1000, //翻页速度(毫秒), 默认600ms
@@ -53,19 +85,35 @@ export default {
                     acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true
                     page: 1, //设置当前显示第几页
                     pages: 2, //总页数
-                    turnCorners: 'bl,br',
+                    turnCorners: 'bl,tr',
                     when: {
                         //监听事件
                         turning: function (e, page, view) {
-                            console.log(e, page, view)
+                            console.log("turning", e, page, view)
                             // 翻页前触发
                         },
                         turned: function (e, page) {
-                            console.log(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(e, pageObj)
+                            console.log("start", e, pageObj)
+                            nextPage = pageObj.next
+                            document.querySelector('.index').addEventListener('touchend', touchendHandle)
                             // 开始翻页时触发
                             // $('#page').turn("next")
                         }
@@ -77,10 +125,21 @@ export default {
         const clickHandle = () => {
             console.log('onclick')
         }
+        const touchendHandle = () => {
+            console.log('touchend')
+            if (nextPage === 2) {
+                $('#page').turn("next")
+            } else {
+                $('#page').turn("previous")
+            }
+        }
 
         return {
+            touchendHandle,
             clickHandle,
-            imgList,
+            nextPage,
+            nowPage,
+            activeDiv,
             onTurn
         }
     }
@@ -88,51 +147,233 @@ export default {
 
 </script>
 <style>
-.index {
-    width: 1500px;
-    height: 900px;
-    overflow: hidden;
+.lt,
+.lb,
+.rt,
+.rb {
+    position: absolute;
+    width: 10%;
+    height: 10%;
+    background-color: red;
+    /* z-index: 99; */
 }
 
-.nextPage {
-    width: 50px;
+.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%;
-    background-color: red;
-    position: absolute;
-    top: 0px;
-    right: 50%;
-    z-index: 99;
+    /* overflow: hidden; */
 }
 
 #page {
-
+    /* position: absolute;
+    top: 0%;
+    left: 0%; */
     width: 100%;
     height: 100%;
     /* background-image: url(../assets/page1.png); */
+    z-index: 6;
 }
-
-.nextPageIn {
-    width: 44%;
-    height: 50%;
-    background-color: red;
+.hidden{
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0, 0, 0);
     position: absolute;
-    top: 80%;
-    left: 70%;
-    /* z-index: 5; */
+    top: 0%;
+    left: 0%;
+    z-index: 0;
+    opacity: 0;   
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-timing-function: linear;
+    transition-delay: 0s;
 }
-
-.nextPageOut {
-    width: 44%;
-    height: 50%;
-    background-color: rgb(0, 4, 255);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 5;
+.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>