From 2e69b2e9a03e2fc79ae180392c4d6d4e8cdffefc Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Sun, 6 Jul 2025 22:48:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(login):=20=E9=87=8D=E6=9E=84=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E4=B8=BA=E5=B7=A6=E5=8F=B3=E5=88=86?=
 =?UTF-8?q?=E6=A0=8F=E7=8E=B0=E4=BB=A3=E5=8C=96=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 采用左右分栏布局，左侧展示产品介绍，右侧为登录表单
- 新增精美的3D等距风格图标，包含平台基座、圆形中心和装饰旗帜
- 添加渐变背景和浮动粒子效果，提升视觉体验
- 实现动态主题色系统，所有视觉元素跟随系统主题色变化
- 保持响应式设计，小屏幕设备自动隐藏左侧介绍区域
---
 src/views/login/index.vue | 198 +++++++++++++++++++++++++++++++++-----
 1 file changed, 173 insertions(+), 25 deletions(-)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 8b1c6e3..8a4415d 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Login, Register, ResetPwd } from './components'
+import { useAppStore } from '@/store'
 
-  type IformType = 'login' | 'register' | 'resetPwd'
+type IformType = 'login' | 'register' | 'resetPwd'
 const formType: Ref<IformType> = ref('login')
 const formComponets = {
   login: Login,
@@ -9,35 +10,182 @@ const formComponets = {
   resetPwd: ResetPwd,
 }
 
-const appName = import.meta.env.VITE_APP_NAME
+const appStore = useAppStore()
+
+// 获取主题色
+const primaryColor = computed(() => appStore.primaryColor)
+const primaryColorHover = computed(() => appStore.theme.common.primaryColorHover)
+const primaryColorPressed = computed(() => appStore.theme.common.primaryColorPressed)
 </script>
 
 <template>
-  <n-el class="wh-full flex-center" style="background-color: var(--body-color);">
-    <div class="fixed top-40px right-40px text-lg">
+  <div class="h-screen w-screen overflow-hidden">
+    <!-- 全局设置按钮 -->
+    <div class="fixed top-6 right-6 z-50 text-lg">
       <DarkModeSwitch />
       <LangsSwitch />
     </div>
-    <n-el
-      class="p-4xl h-full w-full sm:w-450px sm:h-unset"
-      style="background: var(--card-color);box-shadow: var(--box-shadow-1);"
-    >
-      <div class="w-full flex flex-col items-center">
-        <SvgIconsLogo class="text-6em" />
-        <n-h3>{{ appName }} </n-h3>
-        <transition
-          name="fade-slide"
-          mode="out-in"
-        >
-          <component
-            :is="formComponets[formType]"
-            v-model="formType"
-            class="w-85%"
-          />
-        </transition>
-      </div>
-    </n-el>
 
-    <div />
-  </n-el>
+    <div class="h-full w-full flex">
+      <!-- 左侧介绍区域 -->
+      <div
+        class="hidden lg:flex lg:w-1/2 xl:w-3/5 relative"
+        :style="{
+          background: `linear-gradient(135deg, ${primaryColor}, ${primaryColorPressed})`,
+        }"
+      >
+        <div
+          class="absolute inset-0"
+          :style="{
+            background: `linear-gradient(135deg, ${primaryColor}33, ${primaryColorHover}33)`,
+          }"
+        />
+
+        <!-- 装饰性图案 -->
+        <div class="absolute top-20 left-20 w-32 h-32 bg-white/10 rounded-full blur-xl" />
+        <div class="absolute bottom-40 right-20 w-24 h-24 bg-white/10 rounded-full blur-lg" />
+        <div class="absolute top-1/2 left-10 w-16 h-16 bg-white/10 rounded-full blur-md" />
+
+        <div class="relative z-10 flex flex-col justify-center items-center w-full px-16 text-white">
+          <!-- 3D等距图标区域 -->
+          <div class="mb-12">
+            <div class="relative w-80 h-80 flex items-center justify-center">
+              <!-- 主要3D平台 -->
+              <div class="relative">
+                <!-- 平台基座 -->
+                <div
+                  class="w-64 h-20 rounded-lg transform perspective-1000 rotate-x-60 shadow-2xl relative overflow-hidden"
+                  :style="{
+                    background: `linear-gradient(90deg, ${primaryColorHover}, ${primaryColor})`,
+                  }"
+                >
+                  <!-- 平台表面纹理 -->
+                  <div
+                    class="absolute inset-0"
+                    :style="{
+                      background: `linear-gradient(90deg, ${primaryColorHover}4D, ${primaryColorPressed}4D)`,
+                    }"
+                  />
+                  <!-- 网格纹理 -->
+                  <div class="absolute inset-0 opacity-20" style="background-image: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.1) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.1) 75%); background-size: 20px 20px;" />
+                </div>
+
+                <!-- 中央圆形平台 -->
+                <div
+                  class="absolute top-[-40px] left-1/2 transform -translate-x-1/2 w-32 h-32 rounded-full shadow-xl border-4"
+                  :style="{
+                    background: `linear-gradient(180deg, ${primaryColor}, ${primaryColorHover})`,
+                    borderColor: `${primaryColorHover}80`,
+                  }"
+                >
+                  <!-- 内圈发光效果 -->
+                  <div
+                    class="absolute inset-2 rounded-full"
+                    :style="{
+                      background: `linear-gradient(180deg, ${primaryColorHover}, ${primaryColorPressed})`,
+                    }"
+                  />
+                  <div
+                    class="absolute inset-4 rounded-full animate-pulse"
+                    :style="{
+                      background: `linear-gradient(180deg, ${primaryColorHover}, rgba(255,255,255,0.9))`,
+                    }"
+                  />
+                </div>
+
+                <!-- 左侧旗帜 -->
+                <div
+                  class="absolute top-[-80px] left-8 w-2 h-20 rounded-full shadow-lg"
+                  :style="{
+                    background: `linear-gradient(180deg, ${primaryColorPressed}, ${primaryColorHover})`,
+                  }"
+                >
+                  <div
+                    class="absolute top-0 left-2 w-12 h-8 rounded-r transform -skew-y-12 shadow-md"
+                    :style="{
+                      background: `linear-gradient(90deg, ${primaryColorHover}, ${primaryColor})`,
+                    }"
+                  />
+                </div>
+
+                <!-- 右侧旗帜 -->
+                <div
+                  class="absolute top-[-70px] right-12 w-2 h-16 rounded-full shadow-lg"
+                  :style="{
+                    background: `linear-gradient(180deg, ${primaryColorPressed}, ${primaryColorHover})`,
+                  }"
+                >
+                  <div
+                    class="absolute top-0 right-2 w-10 h-6 rounded-l transform skew-y-12 shadow-md"
+                    :style="{
+                      background: `linear-gradient(90deg, ${primaryColor}, ${primaryColorHover})`,
+                    }"
+                  />
+                </div>
+
+                <!-- 装饰性云朵 -->
+                <div class="absolute top-[-60px] left-[-20px] w-8 h-8 bg-white/30 rounded-full" />
+                <div class="absolute top-[-50px] left-[-15px] w-6 h-6 bg-white/20 rounded-full" />
+                <div class="absolute top-[-70px] right-[-10px] w-6 h-6 bg-white/25 rounded-full" />
+              </div>
+
+              <!-- 浮动粒子效果 -->
+              <div class="absolute top-10 left-10 w-2 h-2 bg-white/60 rounded-full animate-bounce" style="animation-delay: 0s; animation-duration: 2s;" />
+              <div class="absolute top-20 right-16 w-1.5 h-1.5 bg-white/40 rounded-full animate-bounce" style="animation-delay: 0.5s; animation-duration: 2.5s;" />
+              <div class="absolute bottom-20 left-20 w-1 h-1 bg-white/50 rounded-full animate-bounce" style="animation-delay: 1s; animation-duration: 3s;" />
+              <div class="absolute bottom-16 right-8 w-2 h-2 bg-white/30 rounded-full animate-bounce" style="animation-delay: 1.5s; animation-duration: 2s;" />
+            </div>
+          </div>
+
+          <!-- 文字内容 -->
+          <div class="text-center">
+            <h1 class="text-4xl font-bold mb-4 leading-tight">
+              开箱即用的大型中后台管理系统
+            </h1>
+            <p class="text-xl text-blue-100 max-w-md leading-relaxed">
+              工程化、高可拓、高性能的前端模板
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧登录区域 -->
+      <div class="w-full lg:w-1/2 xl:w-2/5 bg-white dark:bg-gray-900 flex items-center justify-center p-8">
+        <div class="w-full max-w-md">
+          <transition name="fade-slide" mode="out-in">
+            <component
+              :is="formComponets[formType]"
+              v-model="formType"
+              class="w-full"
+            />
+          </transition>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.perspective-1000 {
+  perspective: 1000px;
+}
+
+.rotate-x-60 {
+  transform: rotateX(60deg);
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>