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

refactor(login): 登录界面样式优化

Browse Source
This commit is contained in:
Ray.Hao
2025-11-27 11:15:06 +08:00
parent dc79401c13 56b0f9dbca
commit e9ce5c3e3b
3 changed files with 509 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,71 +3,61 @@
<defs>
<style>
@media (prefers-color-scheme: dark) {
#bg-rect { fill: #101a29; }
#blueGlow-rect { fill: url(#blueGlowDark); }
#blueGlow2-rect { fill: url(#blueGlow2Dark); }
#pinkPurpleGlow-rect { fill: url(#pinkPurpleGlowDark); }
#bg-layer { fill: url(#bgDark); }
#soft-glow { fill: url(#glowDark); }
.accent-arc { stroke: rgba(118, 156, 255, 0.35); }
.accent-dot { fill: rgba(154, 188, 255, 0.45); }
}
</style>
<!-- 亮色主题渐变 -->
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#f9fcff" />
<stop offset="100%" stop-color="#f5f9fd" />
<linearGradient id="bgLight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f3f7ff" />
<stop offset="60%" stop-color="#e3edff" />
<stop offset="100%" stop-color="#d6e7ff" />
</linearGradient>
<!-- 中间区域淡蓝白光晕 -->
<radialGradient id="blueGlow" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
<stop offset="50%" stop-color="#f0f8ff" stop-opacity="0.5" />
<stop offset="100%" stop-color="#eef7fd" stop-opacity="0" />
</radialGradient>
<!-- 左上角蓝白光晕 -->
<radialGradient id="blueGlow2" cx="15%" cy="15%" r="40%" fx="15%" fy="15%">
<stop offset="0%" stop-color="#d9efff" stop-opacity="0.85" />
<stop offset="40%" stop-color="#e5f4fd" stop-opacity="0.6" />
<stop offset="100%" stop-color="#e9f5fd" stop-opacity="0" />
</radialGradient>
<!-- 右下角粉紫色光晕 -->
<radialGradient id="pinkPurpleGlow" cx="85%" cy="85%" r="40%" fx="85%" fy="85%">
<stop offset="0%" stop-color="#f7e6f9" stop-opacity="0.8" />
<stop offset="35%" stop-color="#f9edf8" stop-opacity="0.6" />
<stop offset="100%" stop-color="#f8f2f8" stop-opacity="0" />
<linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0b1324" />
<stop offset="60%" stop-color="#162135" />
<stop offset="100%" stop-color="#1e2c44" />
</linearGradient>
<radialGradient id="glowLight" cx="20%" cy="15%" r="60%">
<stop offset="0%" stop-color="rgba(64,128,255,0.35)" />
<stop offset="40%" stop-color="rgba(64,128,255,0.18)" />
<stop offset="100%" stop-color="rgba(64,128,255,0)" />
</radialGradient>
<!-- 暗色主题渐变 -->
<radialGradient id="blueGlowDark" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#1e3a5e" stop-opacity="0.6" />
<stop offset="50%" stop-color="#1c314e" stop-opacity="0.3" />
<stop offset="100%" stop-color="#1a2d47" stop-opacity="0" />
<radialGradient id="glowDark" cx="20%" cy="15%" r="60%">
<stop offset="0%" stop-color="rgba(98,142,255,0.4)" />
<stop offset="50%" stop-color="rgba(98,142,255,0.18)" />
<stop offset="100%" stop-color="rgba(98,142,255,0)" />
</radialGradient>
<!-- 左上角蓝白光晕 - 暗色模式 -->
<radialGradient id="blueGlow2Dark" cx="15%" cy="15%" r="40%" fx="15%" fy="15%">
<stop offset="0%" stop-color="#1e3858" stop-opacity="0.85" />
<stop offset="40%" stop-color="#1a304f" stop-opacity="0.6" />
<stop offset="100%" stop-color="#172b45" stop-opacity="0" />
</radialGradient>
<!-- 右下角粉紫色光晕 - 暗色模式 -->
<radialGradient id="pinkPurpleGlowDark" cx="85%" cy="85%" r="40%" fx="85%" fy="85%">
<stop offset="0%" stop-color="#2e2335" stop-opacity="0.85" />
<stop offset="35%" stop-color="#2a2035" stop-opacity="0.6" />
<stop offset="100%" stop-color="#2a202d" stop-opacity="0" />
<radialGradient id="glowSecondary" cx="80%" cy="70%" r="55%">
<stop offset="0%" stop-color="rgba(22,93,255,0.3)" />
<stop offset="50%" stop-color="rgba(22,93,255,0.12)" />
<stop offset="100%" stop-color="rgba(22,93,255,0)" />
</radialGradient>
<linearGradient id="meshLight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="rgba(255,255,255,0.6)" />
<stop offset="35%" stop-color="rgba(255,255,255,0.2)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</linearGradient>
</defs>
<!-- 背景层 -->
<rect id="bg-rect" width="100%" height="100%" fill="url(#bgGradient)" />
<!-- 中间淡蓝白光晕 -->
<rect id="blueGlow-rect" width="100%" height="100%" fill="url(#blueGlow)" />
<!-- 左上蓝白光晕 -->
<rect id="blueGlow2-rect" width="100%" height="100%" fill="url(#blueGlow2)" />
<!-- 右下粉紫光晕 -->
<rect id="pinkPurpleGlow-rect" width="100%" height="100%" fill="url(#pinkPurpleGlow)" />
</svg>
<rect id="bg-layer" width="100%" height="100%" fill="url(#bgLight)" />
<rect id="soft-glow" width="100%" height="100%" fill="url(#glowLight)" />
<rect width="100%" height="100%" fill="url(#glowSecondary)" />
<rect width="100%" height="100%" fill="url(#meshLight)" />
<!-- 柔和块面光影，替代明显线条 -->
<g opacity="0.45">
<rect x="-40" y="520" width="520" height="220" rx="180" fill="rgba(255,255,255,0.25)" />
<rect x="760" y="90" width="520" height="210" rx="180" fill="rgba(255,255,255,0.22)" />
<rect x="420" y="620" width="560" height="190" rx="180" fill="rgba(255,255,255,0.18)" />
</g>
<!-- 去掉点状噪声，仅保留大区域柔光 -->
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB