v1.0.0

package-lock.json

@@ -11,7 +11,8 @@
         "core-js": "^3.8.3",
         "jquery": "^3.7.1",
         "vue": "^3.2.13",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "vue3-flipbook": "^1.0.4"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -11381,6 +11382,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue3-flipbook": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/vue3-flipbook/-/vue3-flipbook-1.0.4.tgz",
+      "integrity": "sha512-H44vAvIFbqBWRf3haBMcpkC24ZstmGHZD5AqHOtrdET6ra3IMghBOfEqQfXbDq3xPp4N8gkNfML08q6wGL4tYQ==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/storybook",
+        "packages/Flipbook"
+      ]
+    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.2.tgz",

package.json

@@ -11,7 +11,8 @@
     "core-js": "^3.8.3",
     "jquery": "^3.7.1",
     "vue": "^3.2.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vue3-flipbook": "^1.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

public/index.html

@@ -4,6 +4,10 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="菜单" id="base_meta_title">
+    <meta name="apple-mobile-web-app-capable" content="no">
+
+
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/App.vue

@@ -1,14 +1,17 @@
 <template>
   <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
   <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
-  <router-view></router-view>
+  <!-- <router-view></router-view> -->
+   <FirstPage />
   <!-- <MenuList /> -->
 </template>
 
 <script>
+import { useRouter } from 'vue-router';
 // import HelloWorld from './components/HelloWorld.vue'
 // import coffeeIndex from './components/coffeeIndex.vue';
 // import MenuList from './components/MenuList.vue';
+import FirstPage from './components/FirstPage.vue';
 
 export default {
   name: 'App',
@@ -16,6 +19,16 @@ export default {
     // HelloWorld,
     // coffeeIndex
     // MenuList
+    FirstPage
+  },
+  setup() {
+    const goTo = () => {
+      console.log('go to first page');
+      useRouter().push('/first');
+    }
+    return {
+      goTo
+    }
   }
 }
 </script>
@@ -40,5 +53,7 @@ body {
   background-color: #f5f5f5;
   height: 100%;
   width: 100%;
+  overflow: hidden;
+
 }
 </style>

src/components/FirstPage.vue

@@ -0,0 +1,673 @@
+<template>
+    <div class="index">
+
+        <div id="page">
+            <img src="../assets/page1.png" 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">
+            <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>
+        <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(() => {
+            page1 = document.getElementsByClassName('page1')
+            page2 = document.getElementsByClassName('page2')
+            let hidden = document.querySelector('.hidden')
+            for (let i = 0; i < page1.length; i++) {
+                page1[i].addEventListener('click', () => {
+                    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', () => {
+                    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 = () => {
+            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) {
+                                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
+                            }
+                            // 翻页后触发
+                        },
+                        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 {
+    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%);
+}
+.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>

src/router/index.js

@@ -3,6 +3,7 @@
 import { createWebHashHistory , createRouter } from 'vue-router'
 import coffeeIndex from '@/components/coffeeIndex.vue'
 import HelloWorld from '@/components/HelloWorld.vue'
+import FirstPage from '@/components/FirstPage.vue'
 // import MenuItem from '@/view/MenuItem.vue'
 
 const router = createRouter({
@@ -14,6 +15,7 @@ const router = createRouter({
         },
         { path: '/coffee', component: coffeeIndex },
         { path: '/hello', component: HelloWorld },
+        { path: '/first', component: FirstPage },
     ]
 })
 export default router

src/utils/turn.js

@@ -16,8 +16,9 @@
  * benefit and not for any commercial purpose or for monetary gain.
  * 
  **/
+import jQuery from "jquery";
 
-(function($) {
+export default (function($) {
 
 'use strict';
 

vue.config.js

@@ -2,6 +2,7 @@ const { defineConfig } = require('@vue/cli-service')
 const webpack = require('webpack');
 
 module.exports = defineConfig({
+  publicPath:'./',
   transpileDependencies: true,
   lintOnSave : false,
   configureWebpack: {