调整页面样式

redstone-skin · Mar 20, 2024 · ff2e377 · ff2e377
1 parent c0fe3a6
commit ff2e377
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)",