yushi

package.json

   "author": "Baozhangchao <3257874327@qq.com>",
   "private": true,
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
     "start": "npm run dev",
     "lint": "eslint --ext .js,.vue src",
     "build": "node build/build.js"

src/pages/AllPages.vue

   <div class="index-box">
     <img src="../../build/fourBoxes-image//1.jpg" class="bg-image" />
     <div class="index-FourBoxes">
-      <div class="index-FourBoxes-yushi test">
+      <div class="index-FourBoxes-yushi test" @click="goYuShi">
         <img src="../../build/fourBoxes-image/浴室.png" class="Four-image" />
-        <div style=" width: 108px; position: fixed; left: 10.8vw; top: 50vh;">
+        <div style=" width: 108px; position: absolute; left: 10.8vw; top: 35vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/浴室-2.png" />
         </div>
       </div>
       <div class="index-FourBoxes-yimao test">
         <img src="../../build/fourBoxes-image/衣帽间.png" class="Four-image" />
-        <div style=" width: 108px; position: fixed; left: 59.8vw; top: 50vh;">
+        <div style=" width: 108px; position: absolute; left: 59.8vw; top: 35vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/衣帽间-2.png" />
         </div>
       </div>
       <div class="index-FourBoxes-keting test">
         <img src="../../build/fourBoxes-image/客厅.png" class="Four-image" />
-        <div style=" width: 108px; position: fixed; left: 10.8vw; top: 92vh;">
+        <div style=" width: 108px; position: absolute; left: 10.8vw; top: 77vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/客厅-2.png" />
         </div>
       </div>
       <div class="index-FourBoxes-yangtai test">
         <img src="../../build/fourBoxes-image/阳台.png" class="Four-image" />
-        <div style=" width: 108px; position: fixed; left: 59.8vw; top: 92vh;">
+        <div style=" width: 108px; position: absolute; left: 59.8vw; top: 77vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/阳台-2.png" />
         </div>
       </div>
 </template>
 
 <script>
-export default {}
+export default {
+  methods: {
+    goYuShi() {
+      this.$router.push({ name: 'Test' })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/Test.vue

+<template>
+  <h1>222222</h1>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>

src/pages/index.vue

     height: 100%;
   }
   .bth-div {
-    position: fixed;
+    position: absolute;
     width: 184px;
     height: 49px;
     bottom: 18vh;

src/router/index.js

 import Router from 'vue-router'
 import ColmoIndex from '@/pages'
 import AllPages from '@/pages/AllPages'
+import Test from '@/pages/Test'
 
 Vue.use(Router)
 
       path: '/pages',
       name: 'AllPages',
       component: AllPages
-    }
+    },
+    {
+      path: '/pages',
+      name: 'Test',
+      component: Test
+    },
   ]
 })