もうcssを書きたくない

src/renderer/src/App.vue

@@ -1,12 +1,6 @@
 <script lang="ts" setup>
 import { RouterView } from 'vue-router'
-import {
-  darkTheme,
-  NConfigProvider,
-  NDialogProvider,
-  NNotificationProvider,
-  NSpace
-} from 'naive-ui'
+import { darkTheme, NConfigProvider, NDialogProvider, NNotificationProvider } from 'naive-ui'
 import { computed, onMounted, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
@@ -75,26 +69,40 @@ const themeOverrides = {
     <n-notification-provider class="n-config-provider" placement="top">
       <n-dialog-provider>
         <div class="drag" />
-        <n-space class="background" justify="space-between" vertical>
+        <div class="background">
           <MyProgress />
-
-          <router-view v-slot="{ Component }">
-            <transition mode="out-in" name="fade">
-              <keep-alive>
-                <component :is="Component" />
-              </keep-alive>
-            </transition>
-          </router-view>
-
+          <div class="view">
+            <router-view v-slot="{ Component }">
+              <transition mode="out-in" name="custom-fade">
+                <keep-alive>
+                  <component :is="Component" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
           <bottom-navigation />
-        </n-space>
+        </div>
       </n-dialog-provider>
     </n-notification-provider>
     <n-global-style />
   </n-config-provider>
 </template>
 
 <style lang="scss" scoped>
+.custom-fade-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.custom-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.custom-fade-enter-from,
+.custom-fade-leave-to {
+  //transform: translateX(20px);
+  opacity: 0;
+}
+
 $global-color: v-bind(globalcolor);
 $buttom-bottom: 8px;
 
@@ -112,7 +120,13 @@ $buttom-bottom: 8px;
   width: 100%;
   height: 100%;
   background-color: $global-color;
-  padding-top: 30px;
+  //padding-top: 30px;
+  display: flex;
+  flex-direction: column;
+
+  .view {
+    flex: 1;
+  }
 }
 
 .drag {

src/renderer/src/components/bottomNavigation.vue

@@ -6,9 +6,7 @@ import MySetting from './MySetting.vue'
 
 <template>
   <div class="position">
-    <div class="divider">
-      <n-divider />
-    </div>
+      <n-divider class="n-divider"/>
     <n-space class="n-space" justify="space-between">
       <MySetting />
       <MyExternalLink />
@@ -27,8 +25,7 @@ import MySetting from './MySetting.vue'
   box-sizing: border-box;
   margin: 10px 20px 0 20px;
 }
-.divider {
-  width: 100%;
-  height: 1px;
+.n-divider {
+  margin: 0 !important;
 }
 </style>

src/renderer/src/views/Final2xHome.vue

@@ -99,11 +99,14 @@ function handleRemove(options: { file: UploadFileInfo; fileList: Array<UploadFil
 <style lang="scss" scoped>
 .for_file_drag {
   width: 100%;
-  max-height: calc(100vh - 210px);
+  height: 100%;
   padding: 0 12%;
   box-sizing: border-box;
   overflow: scroll;
   overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   .filr-drag-zone-logo-text {
     display: flex;
     flex-direction: column;