tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 登录页样式优化

Browse Source
This commit is contained in:
Ray.Hao
2025-05-20 16:24:17 +08:00
parent 94509a577c
commit 1914657ce1
2 changed files with 113 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/assets/images/login-bg.svg
View File

@@ -1,71 +1,95 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800"> <?xml version="1.0" encoding="UTF-8"?>
<style> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1400 800">
:root { <defs>
--blue: rgba(64, 158, 255, 0.08); <style>
--grey: rgba(144, 147, 153, 0.05); @media (prefers-color-scheme: dark) {
--orange: rgba(230, 162, 60, 0.06); #bg-rect { fill: #101a29; }
--green: rgba(144, 238, 144, 0.06); #blueGlow-rect { fill: url(#blueGlowDark); }
} #blueGlow2-rect { fill: url(#blueGlow2Dark); }
#purpleGlow-rect { fill: url(#purpleGlowDark); }
@media (prefers-color-scheme: dark) { #pinkGlow-rect { fill: url(#pinkGlowDark); }
:root { #pinkPurpleGlow-rect { fill: url(#pinkPurpleGlowDark); }
--blue: rgba(64, 158, 255, 0.04);
--grey: rgba(144, 147, 153, 0.03);
--orange: rgba(230, 162, 60, 0.04);
--green: rgba(144, 238, 144, 0.04);
} }
} </style>
</style>
<!-- 左侧波浪 --> <!-- 亮色主题渐变 -->
<path d="M-50 550 Q200 500 450 550 T950 530" <linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
fill="none" <stop offset="0%" stop-color="#f7fbfe" />
stroke="#409EFF" <stop offset="100%" stop-color="#f2f7fc" />
stroke-width="1.5" </linearGradient>
stroke-opacity="0.05"
stroke-linecap="round"> <!-- 主蓝白光晕 - 中间区域 -->
</path> <radialGradient id="blueGlow" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
<stop offset="0%" stop-color="#eef7fd" stop-opacity="0.6" />
<stop offset="100%" stop-color="#eef7fd" stop-opacity="0" />
</radialGradient>
<!-- 左上角蓝白光晕 - 增强优雅感 -->
<radialGradient id="blueGlow2" cx="12%" cy="12%" r="45%" fx="12%" fy="12%">
<stop offset="0%" stop-color="#e0f2fe" stop-opacity="0.75" />
<stop offset="40%" stop-color="#e9f5fd" stop-opacity="0.5" />
<stop offset="100%" stop-color="#e9f5fd" stop-opacity="0" />
</radialGradient>
<!-- 右上角紫色光晕 - 保留但更淡 -->
<radialGradient id="purpleGlow" cx="85%" cy="20%" r="50%" fx="85%" fy="20%">
<stop offset="0%" stop-color="#f5f0fa" stop-opacity="0.6" />
<stop offset="100%" stop-color="#f5f0fa" stop-opacity="0" />
</radialGradient>
<!-- 左下角粉色光晕 - 保留但更淡 -->
<radialGradient id="pinkGlow" cx="15%" cy="80%" r="45%" fx="15%" fy="80%">
<stop offset="0%" stop-color="#fdf1f5" stop-opacity="0.55" />
<stop offset="100%" stop-color="#fdf1f5" stop-opacity="0" />
</radialGradient>
<!-- 右下角粉紫色光晕 - 增强效果 -->
<radialGradient id="pinkPurpleGlow" cx="88%" cy="78%" r="50%" fx="88%" fy="78%">
<stop offset="0%" stop-color="#f9eaf8" stop-opacity="0.7" />
<stop offset="35%" stop-color="#f8f0f8" stop-opacity="0.5" />
<stop offset="100%" stop-color="#f8f2f8" stop-opacity="0" />
</radialGradient>
<!-- 右侧波浪 --> <!-- 暗色主题渐变 -->
<path d="M450 650 Q800 620 1150 660 T1550 630" <radialGradient id="blueGlowDark" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
fill="none" <stop offset="0%" stop-color="#1c314e" stop-opacity="0.7" />
stroke="#909399" <stop offset="100%" stop-color="#1a2d47" stop-opacity="0" />
stroke-width="1" </radialGradient>
stroke-opacity="0.03"
stroke-linecap="round"> <!-- 左上角蓝白光晕 - 暗色模式 -->
</path> <radialGradient id="blueGlow2Dark" cx="12%" cy="12%" r="45%" fx="12%" fy="12%">
<stop offset="0%" stop-color="#1e3554" stop-opacity="0.8" />
<!-- 右下方圆形 --> <stop offset="40%" stop-color="#172b45" stop-opacity="0.5" />
<circle cx="950" cy="400" r="70" <stop offset="100%" stop-color="#172b45" stop-opacity="0" />
fill="var(--blue)" </radialGradient>
stroke="#409EFF"
stroke-width="1" <radialGradient id="purpleGlowDark" cx="85%" cy="20%" r="50%" fx="85%" fy="20%">
stroke-opacity="0.05"> <stop offset="0%" stop-color="#2a243a" stop-opacity="0.65" />
</circle> <stop offset="100%" stop-color="#292236" stop-opacity="0" />
</radialGradient>
<!-- 左上方半球形 -->
<g transform="rotate(-10, 300, 180)"> <radialGradient id="pinkGlowDark" cx="15%" cy="80%" r="45%" fx="15%" fy="80%">
<path d="M 180 180 A 120 120 0 1 1 420 180 Q420 195 405 195 L 310 195 L 195 195 Q180 195 180 180" <stop offset="0%" stop-color="#2f1c27" stop-opacity="0.55" />
fill="var(--orange)" <stop offset="100%" stop-color="#2d1a24" stop-opacity="0" />
stroke="#E6A23C" </radialGradient>
stroke-width="1"
stroke-opacity="0.05"> <!-- 右下角粉紫色光晕 - 暗色模式 -->
</path> <radialGradient id="pinkPurpleGlowDark" cx="88%" cy="78%" r="50%" fx="88%" fy="78%">
</g> <stop offset="0%" stop-color="#2e2335" stop-opacity="0.8" />
<stop offset="35%" stop-color="#2a202d" stop-opacity="0.5" />
<!-- 左下方三角形 --> <stop offset="100%" stop-color="#2a202d" stop-opacity="0" />
<path d="M300 600 L380 520 L420 650 Z" </radialGradient>
fill="var(--green)" </defs>
stroke="#909399"
stroke-width="1" <!-- 背景层 -->
stroke-opacity="0.04"> <rect id="bg-rect" width="100%" height="100%" fill="url(#bgGradient)" />
</path>
<!-- 渐变光晕层 - 中间主要是蓝白色系 -->
<!-- 旋转方块 --> <rect id="blueGlow-rect" width="100%" height="100%" fill="url(#blueGlow)" />
<rect x="1000" y="420" rx="10" ry="10" width="60" height="60" fill="rgba(169, 174, 184, 0.1)" stroke="rgba(169, 174, 184, 0.2)" stroke-width="1" opacity="0.5"> <rect id="blueGlow2-rect" width="100%" height="100%" fill="url(#blueGlow2)" />
<animateTransform attributeType="XML" attributeName="transform"
begin="0s" dur="30s" type="rotate" <!-- 边缘保留淡粉紫色 -->
from="0 1450 550" to="360 1450 550" <rect id="purpleGlow-rect" width="100%" height="100%" fill="url(#purpleGlow)" />
repeatCount="indefinite"/> <rect id="pinkGlow-rect" width="100%" height="100%" fill="url(#pinkGlow)" />
</rect> <rect id="pinkPurpleGlow-rect" width="100%" height="100%" fill="url(#pinkPurpleGlow)" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

27
src/views/login/index.vue
View File

@@ -1,13 +1,13 @@
<template> <template>
<div class="wh-full flex-center flex-col login"> <div class="wh-full flex-center flex-col login">
<!-- 右侧切换主题、语言按钮 --> <!-- 右侧切换主题、语言按钮 -->
<div class="flex flex-col gap-4px fixed top-40px right-40px text-lg"> <div class="fixed flex-center gap-8px text-lg responsive-toggles">
<el-tooltip :content="t('login.themeToggle')" placement="left"> <el-tooltip :content="t('login.themeToggle')" placement="bottom">
<CommonWrapper> <CommonWrapper>
<DarkModeSwitch /> <DarkModeSwitch />
</CommonWrapper> </CommonWrapper>
</el-tooltip> </el-tooltip>
<el-tooltip :content="t('login.languageToggle')" placement="left"> <el-tooltip :content="t('login.languageToggle')" placement="bottom">
<CommonWrapper> <CommonWrapper>
<LangSelect size="text-20px" /> <LangSelect size="text-20px" />
</CommonWrapper> </CommonWrapper>
@@ -16,7 +16,7 @@
<!-- 登录页主体 --> <!-- 登录页主体 -->
<div flex-1 flex-center> <div flex-1 flex-center>
<div <div
class="p-4xl h-full w-full sm:w-450px border-rd-10px sm:h-680px shadow-[var(--el-box-shadow-light)] backdrop-blur-3px" class="p-4xl w-full h-auto sm:w-450px border-rd-10px sm:h-680px shadow-[var(--el-box-shadow-light)] backdrop-blur-3px"
> >
<div w-full flex flex-col items-center> <div w-full flex flex-col items-center>
<!-- logo --> <!-- logo -->
@@ -68,6 +68,23 @@ const formComponents = {
background-size: cover; background-size: cover;
} }
.responsive-toggles {
top: 10px;
right: 10px;
z-index: 10;
@media (max-width: 480px) {
top: 10px;
right: auto;
left: 10px;
}
@media (min-width: 640px) {
top: 40px;
right: 40px;
}
}
/* fade-slide */ /* fade-slide */
.fade-slide-leave-active, .fade-slide-leave-active,
.fade-slide-enter-active { .fade-slide-enter-active {