style(projects): 重构登录页样式

src/views/_builtin/login/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { getPaletteColorByNumber, mixColor } from '@sa/color';
 import { loginModuleRecord } from '@/constants/app';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
+import loginBackground from '@/assets/svg-icon/login-background.svg';
 import { $t } from '@/locales';
 import PwdLogin from './modules/pwd-login.vue';
 import CodeLogin from './modules/code-login.vue';
@@ -36,29 +36,23 @@ const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
 };
 
 const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);
-
-const bgThemeColor = computed(() =>
-  themeStore.darkMode ? getPaletteColorByNumber(themeStore.themeColor, 600) : themeStore.themeColor
-);
-
-const bgColor = computed(() => {
-  const COLOR_WHITE = '#ffffff';
-
-  const ratio = themeStore.darkMode ? 0.5 : 0.2;
-
-  return mixColor(COLOR_WHITE, themeStore.themeColor, ratio);
-});
 </script>
 
 <template>
-  <div class="relative size-full flex-center overflow-hidden" :style="{ backgroundColor: bgColor }">
-    <WaveBg :theme-color="bgThemeColor" />
-    <NCard :bordered="false" class="relative z-4 w-auto rd-12px">
-      <div class="w-400px lt-sm:w-300px">
+  <div class="relative size-full flex flex-wrap overflow-hidden">
+    <div class="hidden h-full w-50% bg-primary-100 lg:block dark:bg-primary-800">
+      <div class="size-full flex-center">
+        <img class="w-60% sm:w-80%" :src="loginBackground" />
+      </div>
+    </div>
+    <div class="w-full flex-col-center px-24px py-32px lg:w-50%">
+      <div class="mx-auto max-w-464px w-full">
         <header class="flex-y-center justify-between">
-          <SystemLogo class="text-58px text-primary lt-sm:text-52px" />
-          <h3 class="text-28px text-primary font-500 lt-sm:text-22px">{{ $t('system.title') }}</h3>
-          <div class="i-flex-col">
+          <div class="flex-y-center gap-16px">
+            <SystemLogo class="text-42px text-primary" />
+            <h3 class="text-32px text-primary font-500">{{ $t('system.title') }}</h3>
+          </div>
+          <div class="flex-y-center">
             <ThemeSchemaSwitch
               :theme-schema="themeStore.themeScheme"
               :show-tooltip="false"
@@ -75,15 +69,14 @@ const bgColor = computed(() => {
           </div>
         </header>
         <main class="pt-24px">
-          <h3 class="text-18px text-primary font-medium">{{ $t(activeModule.label) }}</h3>
-          <div class="pt-24px">
+          <div>
             <Transition :name="themeStore.page.animateMode" mode="out-in" appear>
               <component :is="activeModule.component" />
             </Transition>
           </div>
         </main>
       </div>
-    </NCard>
+    </div>
   </div>
 </template>