next page

@@ -33,8 +33,6 @@ router.afterEach(() => {
     window.scrollTo(0, 0);
     window.scrollTo(0, 0);
 });
 });
 
 
-
-
 new Vue({
 new Vue({
     el: '#app',
     el: '#app',
     router: router,
     router: router,

 <style scoped>
 <style scoped>
-.layout{
+.layout {
   background: #f5f7f9;
   background: #f5f7f9;
   position: relative;
   position: relative;
   overflow: hidden;
   overflow: hidden;
 }
 }
-.layout-logo{
+.layout-logo {
   width: 100px;
   width: 100px;
   height: 30px;
   height: 30px;
   background: #5b6270;
   background: #5b6270;
@@ -14,7 +14,7 @@
   top: 15px;
   top: 15px;
   left: 20px;
   left: 20px;
 }
 }
-.layout-nav{
+.layout-nav {
   width: 420px;
   width: 420px;
   margin: 0 auto;
   margin: 0 auto;
   margin-right: 20px;
   margin-right: 20px;
@@ -66,25 +66,17 @@
     </div>
     </div>
 </template>
 </template>
 <script>
 <script>
-    export default {
-
+export default {
   created() {
   created() {
-          this.$router.push({name: 'similar.list'})
+    this.$router.push({ name: "similar.list" });
   },
   },
   methods: {
   methods: {
     open(name) {
     open(name) {
-            this.$router.push({name})
+      this.$router.push({ name });
     },
     },
     goTop() {
     goTop() {
-            this.$refs.backtop.back()
-          },
-          goNext() {
-            this.$bus.emit('gonext')
-          },
-          goBack() {
-            this.$bus.emit('goback')
-          }
-
+      this.$refs.backtop.back();
     }
     }
   }
   }
+};
 </script>
 </script>

@@ -29,7 +29,7 @@
       </Form>
       </Form>
   </div>
   </div>
   <Table :columns="columns" :data="list"></Table>
   <Table :columns="columns" :data="list"></Table>
-  <Page :total="pager.rows" :current="pager.page" :page-size="pager.size" @on-change="onPageChange" show-elevator style="margin-top:20px;text-align: right;"></Page>
+  <Page ref="page" :total="pager.rows" :current="pager.page" :page-size="pager.size" @on-change="onPageChange" show-elevator style="margin-top:20px;text-align: right;"></Page>
 </div>
 </div>
 </template>
 </template>
 <script>
 <script>
@@ -53,7 +53,7 @@ export default {
               }
               }
             });
             });
           },
           },
-          className: 'top'
+          className: "top"
         },
         },
         {
         {
           title: "相似图",
           title: "相似图",
@@ -83,7 +83,7 @@ export default {
               </div>
               </div>
             );
             );
           },
           },
-          className: 'top'
+          className: "top"
         }
         }
       ],
       ],
       list: [],
       list: [],
@@ -107,6 +107,12 @@ export default {
     this.api = new ApiService();
     this.api = new ApiService();
     this.getList();
     this.getList();
   },
   },
+  mounted() {
+    document.addEventListener("keydown", this.keydown);
+  },
+  destroyed() {
+    document.removeEventListener("keydown", this.keydown);
+  },
   methods: {
   methods: {
     onPageChange(page) {
     onPageChange(page) {
       this.pager.page = page;
       this.pager.page = page;
@@ -160,7 +166,7 @@ export default {
           this.pager.size = result.size;
           this.pager.size = result.size;
 
 
           this.$nextTick(() => {
           this.$nextTick(() => {
-            this.$emit('backtop');
+            this.$emit("backtop");
           });
           });
 
 
           msg();
           msg();
@@ -169,6 +175,19 @@ export default {
           msg();
           msg();
           this.$Message.error("查询失败");
           this.$Message.error("查询失败");
         });
         });
+    },
+    keydown(evt) {
+      if (evt.code === "ArrowLeft") {
+        this.goBack();
+      } else if (evt.code === "ArrowRight") {
+        this.goNext();
+      }
+    },
+    goNext() {
+      this.$refs.page.next()
+    },
+    goBack() {
+      this.$refs.page.prev()
     }
     }
   },
   },
   components: {
   components: {