From e986861e7263416c54ff8ca6db9ced46605baf20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Thu, 14 May 2026 13:01:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=AE=E9=A1=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 |   6 ++-
 src/components/back-top.vue |  92 +++++++++++++++++++++++++++++++++
 src/pages/ContactView.vue   | 100 ++++++++++++++++++++++++++++++++++++
 3 files changed, 196 insertions(+), 2 deletions(-)
 create mode 100644 src/components/back-top.vue

diff --git a/src/App.vue b/src/App.vue
index a43d49c..90c6c65 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,9 @@
 <template>
-  <RouterView />
+	<RouterView />
+	<BackTop />
 </template>
 
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+	import { RouterView } from "vue-router";
+	import BackTop from "./components/back-top.vue";
 </script>
diff --git a/src/components/back-top.vue b/src/components/back-top.vue
new file mode 100644
index 0000000..e2de364
--- /dev/null
+++ b/src/components/back-top.vue
@@ -0,0 +1,92 @@
+<template>
+	<div
+		class="back-top"
+		@click="handleClick"
+		:class="{ active: progress > 0, hidden: progress === 0 }"
+	>
+		<svg width="100%" height="100%" viewBox="-1 -1 102 102">
+			<path
+				d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
+				:style="{
+					transition: 'stroke-dashoffset 10ms linear',
+					strokeDasharray: `${progress}, ${max}`,
+					stroke: '#222',
+					strokeWidth: 4,
+				}"
+				fill="none"
+			></path>
+		</svg>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted, onUnmounted, h } from "vue";
+	const max = ref(98 * Math.PI);
+	const progress = ref(0);
+	const handleScroll = () => {
+		const el = document.documentElement;
+		const num = el.scrollTop / (el.scrollHeight - el.clientHeight);
+		progress.value = max.value * num;
+	};
+	const handleClick = () => {
+		document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
+	};
+	onMounted(() => {
+		handleScroll();
+		document.addEventListener("scroll", handleScroll);
+	});
+	onUnmounted(() => {
+		document.removeEventListener("scroll", handleScroll);
+	});
+</script>
+<style scoped>
+	.back-top {
+		position: fixed;
+		right: 30px;
+		bottom: 30px;
+		width: 46px;
+		height: 46px;
+		cursor: pointer;
+		color: #222;
+		background-color: #fff;
+		border-radius: 50%;
+		-webkit-box-shadow: inset 0 0 0 1px #e1e1e1;
+		box-shadow: inset 0 0 0 1px #e1e1e1;
+		z-index: 999;
+	}
+	.back-top svg {
+		width: 100%;
+		height: 100%;
+	}
+	.back-top path {
+		transition: stroke-dashoffset 10ms linear;
+	}
+	.back-top.active {
+		animation: active 0.2s linear both;
+	}
+	.back-top.hidden {
+		animation: hidden 0.2s linear both;
+	}
+	@keyframes active {
+		0% {
+			display: none;
+			opacity: 0;
+			transform: translateY(50px);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	@keyframes hidden {
+		0% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		100% {
+			opacity: 0;
+			transform: translateY(50px);
+			display: none;
+		}
+	}
+</style>
diff --git a/src/pages/ContactView.vue b/src/pages/ContactView.vue
index 6db5842..012dc0c 100644
--- a/src/pages/ContactView.vue
+++ b/src/pages/ContactView.vue
@@ -9,6 +9,106 @@
       route by Vite SSG.
     </p>
     <a href="/">Back home</a>
+	<div>1</div>
+	<div>2</div>
+	<div>3</div>
+	<div>4</div>
+	<div>5</div>
+	<div>6</div>
+	<div>7</div>
+	<div>8</div>
+	<div>9</div>
+	<div>10</div>
+	<div>11</div>
+	<div>12</div>
+	<div>13</div>
+	<div>14</div>
+	<div>15</div>
+	<div>16</div>
+	<div>17</div>
+	<div>18</div>
+	<div>19</div>
+	<div>20</div>
+	<div>21</div>
+	<div>22</div>
+	<div>23</div>
+	<div>24</div>
+	<div>25</div>
+	<div>26</div>
+	<div>27</div>
+	<div>28</div>
+	<div>29</div>
+	<div>30</div>
+	<div>31</div>
+	<div>32</div>
+	<div>33</div>
+	<div>34</div>
+	<div>35</div>
+	<div>36</div>
+	<div>37</div>
+	<div>38</div>
+	<div>39</div>
+	<div>40</div>
+	<div>41</div>
+	<div>42</div>
+	<div>43</div>
+	<div>44</div>
+	<div>45</div>
+	<div>46</div>
+	<div>47</div>
+	<div>48</div>
+	<div>49</div>
+	<div>50</div>
+	<div>51</div>
+	<div>52</div>
+	<div>53</div>
+	<div>54</div>
+	<div>55</div>
+	<div>56</div>
+	<div>57</div>
+	<div>58</div>
+	<div>59</div>
+	<div>60</div>
+	<div>61</div>
+	<div>62</div>
+	<div>63</div>
+	<div>64</div>
+	<div>65</div>
+	<div>66</div>
+	<div>67</div>
+	<div>68</div>
+	<div>69</div>
+	<div>70</div>
+	<div>71</div>
+	<div>72</div>
+	<div>73</div>
+	<div>74</div>
+	<div>75</div>
+	<div>76</div>
+	<div>77</div>
+	<div>78</div>
+	<div>79</div>
+	<div>80</div>
+	<div>81</div>
+	<div>82</div>
+	<div>83</div>
+	<div>84</div>
+	<div>85</div>
+	<div>86</div>
+	<div>87</div>
+	<div>88</div>
+	<div>89</div>
+	<div>90</div>
+	<div>91</div>
+	<div>92</div>
+	<div>93</div>
+	<div>94</div>
+	<div>95</div>
+	<div>96</div>
+	<div>97</div>
+	<div>98</div>
+	<div>99</div>
+	<div>100</div>
   </main>
 </template>