✨ feat: add style

src/App.vue

@@ -3,19 +3,23 @@ import StarTrails from './components/StarTrails.vue'
 </script>
 
 <template>
-  <StarTrails />
-  <!-- <div f-c-c absolute h-100vh w-full left-0 top-0>
-    <div text-18 text-white>
-      小孙同学
-    </div>
-  </div> -->
-  <div bg-black f-c-c h-100vh>
+  <div absolute wh-full left-0 top-0>
+    <!-- 渐变 -->
+    <div to-black-500 absolute h-80vh w-full class="bottom-[-30vh]" left-0 from-black bg-gradient-to-t />
+    <!-- 星轨 -->
+    <StarTrails />
+    <!-- 拖底 -->
+    <div bg-black h-45vh />
+  </div>
+
+  <div bg-black bg-transparent f-c-c absolute h-100vh w-full top-0>
     <div text-white>
-      正在开发中...
+      <div>
+        正在开发中...
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-
 </style>

src/assets/css/main.css

@@ -4,7 +4,11 @@
 }
 
 body {
-  font-family: pingfang sc, helvetica, arial, sans-serif;
+  font-family:
+    pingfang sc,
+    helvetica,
+    arial,
+    sans-serif;
   font-size: 16px;
   line-height: 1.6;
   color: #333;

src/components/StarTrails.vue

@@ -91,7 +91,7 @@ onMounted(() => {
   drawStar()
 
   // 根据比例调整圆心
-  if (showWidth < showHeight * 1.5)
+  if (showWidth < showHeight)
     showContext.translate(showWidth, showHeight)
   else
     showContext.translate(showWidth, 0)
@@ -116,7 +116,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div h-100vh>
+  <div h-130vh>
     <canvas id="trails" wh-full />
   </div>
 </template>