From ff2e377e7d982feb41c13fc91652a037b2915194 Mon Sep 17 00:00:00 2001
From: Yifan Xiao <1993996310@qq.com>
Date: Wed, 20 Mar 2024 13:43:35 +0000
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-end/assets/css/app.css       | 1 -
 front-end/components/RSAppBar.vue  | 2 +-
 front-end/components/RSSideBar.vue | 2 +-
 front-end/layouts/default.vue      | 4 ++--
 front-end/pages/index.vue          | 9 ++-------
 front-end/tailwind.config.js       | 3 +++
 6 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/front-end/assets/css/app.css b/front-end/assets/css/app.css
index e170ce0..8f3d302 100644
--- a/front-end/assets/css/app.css
+++ b/front-end/assets/css/app.css
@@ -43,5 +43,4 @@ body {
 .page-enter-from,
 .page-leave-to {
   opacity: 0;
-  filter: blur(1rem);
 }
diff --git a/front-end/components/RSAppBar.vue b/front-end/components/RSAppBar.vue
index 69c51b9..6bf022b 100644
--- a/front-end/components/RSAppBar.vue
+++ b/front-end/components/RSAppBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-14">
+  <div class="h-14 backdrop-blur-2xl">
     <div class="flex justify-between items-center h-full px-4">
       <div>
         <NuxtLink
diff --git a/front-end/components/RSSideBar.vue b/front-end/components/RSSideBar.vue
index 3bae1cf..868cc7f 100644
--- a/front-end/components/RSSideBar.vue
+++ b/front-end/components/RSSideBar.vue
@@ -32,7 +32,7 @@ const menuList = ref<
 </script>
 
 <template>
-  <div class="h-full w-20 flex flex-col items-center">
+  <div class="h-full w-20 flex flex-col items-center backdrop-blur-2xl">
     <div class="flex-1 flex flex-col items-center gap-2 mt-4">
       <RSSideBarItem
         v-for="item in menuList"
diff --git a/front-end/layouts/default.vue b/front-end/layouts/default.vue
index 387caef..5f13cfc 100644
--- a/front-end/layouts/default.vue
+++ b/front-end/layouts/default.vue
@@ -6,13 +6,13 @@ const background = ref(defaultLauncherBackground);
 
 <template>
   <div
-    class="relative bg-cover bg-center"
+    class="bg-cover bg-center h-screen"
     :style="{
       backgroundImage: `url(${background})`,
     }"
   >
     <div
-      class="flex h-screen flex-col bg-bar-light dark:bg-bar-dark bg-opacity-50 dark:bg-opacity-50 backdrop-blur-2xl transition-colors duration-100"
+      class="flex h-screen z-20 flex-col bg-bar-light dark:bg-bar-dark bg-opacity-50 dark:bg-opacity-50 transition-colors duration-200 ease-in-out"
     >
       <RSAppBar />
       <div class="flex flex-1">
diff --git a/front-end/pages/index.vue b/front-end/pages/index.vue
index 4283fd6..9c01e0f 100644
--- a/front-end/pages/index.vue
+++ b/front-end/pages/index.vue
@@ -10,14 +10,9 @@ useHead({
 
 <template>
   <div
-    class="transition-all duration-300 ease-in-out h-full w-full relative bg-cover bg-fixed bg-center"
+    class="h-full w-full relative bg-cover bg-fixed bg-center origin-center"
     :style="{
       backgroundImage: `url(${background})`,
     }"
-  >
-    <!--Launcher-->
-    <div class="absolute bottom-4 left-1/2">
-      111
-    </div>
-  </div>
+  ></div>
 </template>
diff --git a/front-end/tailwind.config.js b/front-end/tailwind.config.js
index 9716ed6..85a7cda 100644
--- a/front-end/tailwind.config.js
+++ b/front-end/tailwind.config.js
@@ -42,6 +42,9 @@ export default {
         "page-light": "rgb(239 239 239)",
         "page-dark": "rgb(60 60 60)",
       },
+      backgroundImage: {
+        growing: "linear-gradient(135deg, #00dc82, #36e4da, #0047e1)",
+      },
       textShadow: {
         sm: "0 1px 2px var(--tw-shadow-color)",
         DEFAULT: "0 2px 4px var(--tw-shadow-color)",