[+] Add scroll button

OvONeko · Nov 10, 2023 · 665adbd · 665adbd
1 parent d3437e1
commit 665adbd
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 3 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    GoToTop: typeof import('./src/components/GoToTop.vue')['default']
     JSONTable: typeof import('./src/components/JSONTable.vue')['default']
     Navigation: typeof import('./src/components/Navigation.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import Sidebar from "@/components/Sidebar.vue";
+import GoToTop from "./components/GoToTop.vue";
+import Navigation from "@/components/Navigation.vue";
 </script>
 
 <template>
     <Sidebar />
+    <GoToTop />
 </template>
 
 <style lang="sass">

diff --git a/src/components/GoToTop.vue b/src/components/GoToTop.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="gotoTop" v-on:click="onClick()">↑</div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+export default class GoToTop extends Vue {
+    onClick(): void {
+        window.scroll(0, 0);
+    }
+}
+</script>
+
+<style lang="sass">
+.gotoTop
+    position: fixed
+    bottom: 40px
+    right: 40px
+    z-index: 50
+    user-select: none
+    background-color: #efeff5
+    min-width: 50px
+    min-height: 50px
+    border-style: solid
+    border-color: #D9DADB
+    border-radius: 25px
+    font-size: 29px
+    text-align: center
+    box-shadow: 4px 4px 4px rgba(44, 45, 47, 0.2)
+
+.gotoTop:hover
+    border-color: #3052DD
+    box-shadow: 8px 8px 8px rgba(44, 45, 47, 0.6)
+</style>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -19,9 +19,12 @@ export default class Navigation extends Vue {}
 
 .nav
     display: block
-    width: 100vw
+    position: fixed
+    width: calc(100vw - 300px)
     height: 60px
-    background-color: #FEFEFE
+    right: 0px
+    top: 0px
+    background-color: #E0E1E2
 
 .user
     text-align: right
@@ -37,6 +40,6 @@ img
 
 p
     display: inline-block
-    font-size: xx-large
+    font-size: x-large
     font-family: 'Consolas'
 </style>
diff --git a/src/json/user.json b/src/json/user.json
@@ -10,5 +10,83 @@
         "description": "user2",
         "button1": "编辑",
         "button2": "删除"
+    },
+    {
+        "title": "user3",
+        "description": "user3",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user4",
+        "description": "user4",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user5",
+        "description": "user5",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user6",
+        "description": "user6",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user7",
+        "description": "user7",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user8",
+        "description": "user8",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "user9",
+        "description": "user9",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userA",
+        "description": "userA",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userB",
+        "description": "userB",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userC",
+        "description": "userC",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userD",
+        "description": "userD",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userE",
+        "description": "userE",
+        "button1": "编辑",
+        "button2": "删除"
+    },
+    {
+        "title": "userF",
+        "description": "userF",
+        "button1": "编辑",
+        "button2": "删除"
     }
 ]