diff --git a/package-lock.json b/package-lock.json
index 4682c5f..a08f3a5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index c28abf7..f13dc89 100644
--- a/package.json
+++ b/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",
diff --git a/public/index.html b/public/index.html
index 3e5a139..cb68d79 100644
--- a/public/index.html
+++ b/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>
diff --git a/src/App.vue b/src/App.vue
index 0c6cd37..11728b4 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/assets/dirty.jpg b/src/assets/dirty.jpg
new file mode 100644
index 0000000..fb46395
Binary files /dev/null and b/src/assets/dirty.jpg differ
diff --git a/src/assets/page1-1.png b/src/assets/page1-1.png
new file mode 100644
index 0000000..f2f8b29
Binary files /dev/null and b/src/assets/page1-1.png differ
diff --git a/src/assets/page1-2.png b/src/assets/page1-2.png
new file mode 100644
index 0000000..ab6a825
Binary files /dev/null and b/src/assets/page1-2.png differ
diff --git a/src/assets/page1.png b/src/assets/page1.png
new file mode 100644
index 0000000..3d8774a
Binary files /dev/null and b/src/assets/page1.png differ
diff --git a/src/assets/page2-1.jpg b/src/assets/page2-1.jpg
new file mode 100644
index 0000000..a8dfd24
Binary files /dev/null and b/src/assets/page2-1.jpg differ
diff --git a/src/assets/page2-2.jpg b/src/assets/page2-2.jpg
new file mode 100644
index 0000000..8164be5
Binary files /dev/null and b/src/assets/page2-2.jpg differ
diff --git a/src/assets/page2.jpg b/src/assets/page2.jpg
new file mode 100644
index 0000000..3898a5e
Binary files /dev/null and b/src/assets/page2.jpg differ
diff --git a/src/assets/乌梅气泡美式.jpg b/src/assets/乌梅气泡美式.jpg
new file mode 100644
index 0000000..a8cd9c8
Binary files /dev/null and b/src/assets/乌梅气泡美式.jpg differ
diff --git a/src/assets/乌龙茶.jpg b/src/assets/乌龙茶.jpg
new file mode 100644
index 0000000..5ecc683
Binary files /dev/null and b/src/assets/乌龙茶.jpg differ
diff --git a/src/assets/冰博克.jpg b/src/assets/冰博克.jpg
new file mode 100644
index 0000000..c61bcb3
Binary files /dev/null and b/src/assets/冰博克.jpg differ
diff --git a/src/assets/冷萃咖啡.jpg b/src/assets/冷萃咖啡.jpg
new file mode 100644
index 0000000..2c3e766
Binary files /dev/null and b/src/assets/冷萃咖啡.jpg differ
diff --git a/src/assets/咸dirty.jpg b/src/assets/咸dirty.jpg
new file mode 100644
index 0000000..ade4a79
Binary files /dev/null and b/src/assets/咸dirty.jpg differ
diff --git a/src/assets/宝矿力.jpg b/src/assets/宝矿力.jpg
new file mode 100644
index 0000000..178123e
Binary files /dev/null and b/src/assets/宝矿力.jpg differ
diff --git a/src/assets/对象气泡美式.jpg b/src/assets/对象气泡美式.jpg
new file mode 100644
index 0000000..3fbf10b
Binary files /dev/null and b/src/assets/对象气泡美式.jpg differ
diff --git a/src/assets/希腊橙汁.jpg b/src/assets/希腊橙汁.jpg
new file mode 100644
index 0000000..b7b0ed0
Binary files /dev/null and b/src/assets/希腊橙汁.jpg differ
diff --git a/src/assets/希腊蔓越莓汁.jpg b/src/assets/希腊蔓越莓汁.jpg
new file mode 100644
index 0000000..7f5828a
Binary files /dev/null and b/src/assets/希腊蔓越莓汁.jpg differ
diff --git a/src/assets/手冲咖啡.jpg b/src/assets/手冲咖啡.jpg
new file mode 100644
index 0000000..0f3f0b5
Binary files /dev/null and b/src/assets/手冲咖啡.jpg differ
diff --git a/src/assets/手打抹茶.jpg b/src/assets/手打抹茶.jpg
new file mode 100644
index 0000000..ae63c6b
Binary files /dev/null and b/src/assets/手打抹茶.jpg differ
diff --git a/src/assets/拿铁.jpg b/src/assets/拿铁.jpg
new file mode 100644
index 0000000..bfa1d6f
Binary files /dev/null and b/src/assets/拿铁.jpg differ
diff --git a/src/assets/摩卡.jpg b/src/assets/摩卡.jpg
new file mode 100644
index 0000000..b64b617
Binary files /dev/null and b/src/assets/摩卡.jpg differ
diff --git a/src/assets/柠檬气泡水.jpg b/src/assets/柠檬气泡水.jpg
new file mode 100644
index 0000000..7bd0755
Binary files /dev/null and b/src/assets/柠檬气泡水.jpg differ
diff --git a/src/assets/梅子起泡酒.jpg b/src/assets/梅子起泡酒.jpg
new file mode 100644
index 0000000..d28f06e
Binary files /dev/null and b/src/assets/梅子起泡酒.jpg differ
diff --git a/src/assets/橙汁.jpg b/src/assets/橙汁.jpg
new file mode 100644
index 0000000..18922ef
Binary files /dev/null and b/src/assets/橙汁.jpg differ
diff --git a/src/assets/水仙.jpg b/src/assets/水仙.jpg
new file mode 100644
index 0000000..d0e99a6
Binary files /dev/null and b/src/assets/水仙.jpg differ
diff --git a/src/assets/水牛奶.jpg b/src/assets/水牛奶.jpg
new file mode 100644
index 0000000..c817b42
Binary files /dev/null and b/src/assets/水牛奶.jpg differ
diff --git a/src/assets/泰象气泡水.jpg b/src/assets/泰象气泡水.jpg
new file mode 100644
index 0000000..0a13d35
Binary files /dev/null and b/src/assets/泰象气泡水.jpg differ
diff --git a/src/assets/澳白.jpg b/src/assets/澳白.jpg
new file mode 100644
index 0000000..cbfc451
Binary files /dev/null and b/src/assets/澳白.jpg differ
diff --git a/src/assets/燕麦奶.jpg b/src/assets/燕麦奶.jpg
new file mode 100644
index 0000000..08701d3
Binary files /dev/null and b/src/assets/燕麦奶.jpg differ
diff --git a/src/assets/燕麦拿铁.jpg b/src/assets/燕麦拿铁.jpg
new file mode 100644
index 0000000..fd9cfba
Binary files /dev/null and b/src/assets/燕麦拿铁.jpg differ
diff --git a/src/assets/百香果.jpg b/src/assets/百香果.jpg
new file mode 100644
index 0000000..f4ab2f4
Binary files /dev/null and b/src/assets/百香果.jpg differ
diff --git a/src/assets/美式.jpg b/src/assets/美式.jpg
new file mode 100644
index 0000000..cb34d03
Binary files /dev/null and b/src/assets/美式.jpg differ
diff --git a/src/assets/肉橙气泡美式.jpg b/src/assets/肉橙气泡美式.jpg
new file mode 100644
index 0000000..554943c
Binary files /dev/null and b/src/assets/肉橙气泡美式.jpg differ
diff --git a/src/assets/脉动.jpg b/src/assets/脉动.jpg
new file mode 100644
index 0000000..ae23a80
Binary files /dev/null and b/src/assets/脉动.jpg differ
diff --git a/src/assets/茉莉莓.jpg b/src/assets/茉莉莓.jpg
new file mode 100644
index 0000000..13b8924
Binary files /dev/null and b/src/assets/茉莉莓.jpg differ
diff --git a/src/assets/菠萝冰美式.jpg b/src/assets/菠萝冰美式.jpg
new file mode 100644
index 0000000..b9bd943
Binary files /dev/null and b/src/assets/菠萝冰美式.jpg differ
diff --git a/src/assets/蔓越莓冷萃.jpg b/src/assets/蔓越莓冷萃.jpg
new file mode 100644
index 0000000..7a800b3
Binary files /dev/null and b/src/assets/蔓越莓冷萃.jpg differ
diff --git a/src/assets/蔓越莓气泡美式.jpg b/src/assets/蔓越莓气泡美式.jpg
new file mode 100644
index 0000000..d0287c9
Binary files /dev/null and b/src/assets/蔓越莓气泡美式.jpg differ
diff --git a/src/assets/青提抹茶.jpg b/src/assets/青提抹茶.jpg
new file mode 100644
index 0000000..51bac43
Binary files /dev/null and b/src/assets/青提抹茶.jpg differ
diff --git a/src/assets/鸳鸯拿铁.jpg b/src/assets/鸳鸯拿铁.jpg
new file mode 100644
index 0000000..54ae071
Binary files /dev/null and b/src/assets/鸳鸯拿铁.jpg differ
diff --git a/src/assets/黄油啤酒.jpg b/src/assets/黄油啤酒.jpg
new file mode 100644
index 0000000..5a0bdc2
Binary files /dev/null and b/src/assets/黄油啤酒.jpg differ
diff --git a/src/components/FirstPage.vue b/src/components/FirstPage.vue
new file mode 100644
index 0000000..2fe81bf
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/page.vue b/src/components/page.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/router/index.js b/src/router/index.js
index 552b701..8277d09 100644
--- a/src/router/index.js
+++ b/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
diff --git a/src/utils/turn.js b/src/utils/turn.js
index d6feac9..447ea4d 100644
--- a/src/utils/turn.js
+++ b/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';
 
diff --git a/vue.config.js b/vue.config.js
index 3b90d1b..ae4ae41 100644
--- a/vue.config.js
+++ b/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: {