From 90d19c852ffb8266861b8dc20b99f44130e7a5d8 Mon Sep 17 00:00:00 2001
From: "guoqi.sun" <sun412926@gmail.com>
Date: Sun, 11 Feb 2024 05:06:59 +0800
Subject: [PATCH] :sparkles: feat: add style

---
 src/App.vue                   | 22 +++++++++++++---------
 src/assets/css/main.css       |  6 +++++-
 src/components/StarTrails.vue |  4 ++--
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 25f7fa2..3a18b7c 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 7e86790..9173d05 100644
--- a/src/assets/css/main.css
+++ b/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;
diff --git a/src/components/StarTrails.vue b/src/components/StarTrails.vue
index 3a788d0..31e2da3 100644
--- a/src/components/StarTrails.vue
+++ b/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>