主页框架

src/components/MainpageButton.svelte

@@ -52,4 +52,46 @@
   }
 </script>
 
-<button onclick={click}>没用的按钮 | {clicks + clicksPending}</button>
+<button class="useless-button" onclick={click}>
+  <span class="name">到此一游</span>
+  <span class="number">{clicks + clicksPending}</span>
+</button>
+
+<style>
+  .useless-button {
+    display: block;
+    background-color: var(--color-bg-n);
+    font-size: 1.25rem;
+    cursor: pointer;
+    border-radius: 1rem;
+
+    overflow: hidden;
+    transition: transform ease 0.1s;
+
+    &:hover {
+      transform: scale(1.02);
+    }
+
+    &:active {
+      transform: scale(0.97);
+    }
+
+    & > .name {
+      display: inline-block;
+      font-weight: 300;
+      padding-inline-start: 1rem;
+      padding-inline-end: 0.5rem;
+      padding-block: 0.5rem;
+    }
+
+    & > .number {
+      display: inline-block;
+      padding-inline-start: 0.75rem;
+      padding-inline-end: 0.75rem;
+      padding-block: 0.5rem;
+      background-color: var(--color-green);
+      color: var(--color-bg-n);
+      font-weight: 600;
+    }
+  }
+</style>