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

refactor: 界面重构美化

Browse Source
This commit is contained in:
Ray.Hao
2026-05-11 11:54:22 +08:00
parent 66615279eb
commit fe0775fbdb
31 changed files with 2836 additions and 2172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/assets/images/login/bg-dark.svg
View File

@@ -1,67 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1400 800">
<defs>
<!-- 原背景色保持不变 -->
<linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0b1324" />
<stop offset="58%" stop-color="#162135" />
<stop offset="100%" stop-color="#1e2c44" />
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0a0f1a" />
<stop offset="50%" stop-color="#0d1424" />
<stop offset="100%" stop-color="#111a2e" />
</linearGradient>
<radialGradient id="glowPrimary" cx="18%" cy="14%" r="62%">
<stop offset="0%" stop-color="rgba(98,142,255,0.42)" />
<stop offset="46%" stop-color="rgba(98,142,255,0.18)" />
<stop offset="100%" stop-color="rgba(98,142,255,0)" />
<radialGradient id="glow1" cx="15%" cy="18%" r="55%">
<stop offset="0%" stop-color="rgba(22,119,255,0.15)" />
<stop offset="45%" stop-color="rgba(22,119,255,0.05)" />
<stop offset="100%" stop-color="rgba(22,119,255,0)" />
</radialGradient>
<radialGradient id="glowSecondary" cx="82%" cy="70%" r="56%">
<stop offset="0%" stop-color="rgba(59,108,224,0.28)" />
<stop offset="48%" stop-color="rgba(59,108,224,0.14)" />
<stop offset="100%" stop-color="rgba(59,108,224,0)" />
<radialGradient id="glow2" cx="85%" cy="72%" r="50%">
<stop offset="0%" stop-color="rgba(99,102,241,0.1)" />
<stop offset="45%" stop-color="rgba(99,102,241,0.03)" />
<stop offset="100%" stop-color="rgba(99,102,241,0)" />
</radialGradient>
<linearGradient id="meshDark" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="rgba(255,255,255,0.1)" />
<stop offset="35%" stop-color="rgba(255,255,255,0.04)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</linearGradient>
</defs>
<!-- 基础背景 -->
<rect width="100%" height="100%" fill="url(#bgDark)" />
<rect width="100%" height="100%" fill="url(#glowPrimary)" />
<rect width="100%" height="100%" fill="url(#glowSecondary)" />
<rect width="100%" height="100%" fill="url(#meshDark)" />
<g opacity="0.8">
<circle cx="280" cy="190" r="120" fill="rgba(98,142,255,0.03)" />
<circle cx="280" cy="190" r="120" fill="none" stroke="rgba(98,142,255,0.11)" stroke-width="1" />
<circle cx="280" cy="190" r="170" fill="none" stroke="rgba(98,142,255,0.06)" stroke-width="0.8" />
<g transform="rotate(-12, 1120, 600)">
<path d="M900 620 C 980 520, 1120 520, 1240 580 C 1320 620, 1340 680, 1290 720 C 1200 790, 980 760, 900 690 Z" fill="rgba(98,142,255,0.018)" />
<path d="M900 620 C 980 520, 1120 520, 1240 580 C 1320 620, 1340 680, 1290 720 C 1200 790, 980 760, 900 690 Z" fill="none" stroke="rgba(98,142,255,0.08)" stroke-width="1" />
</g>
</g>
<!-- 节点圆点 -->
<g fill="rgba(98,142,255,0.5)">
<circle cx="300" cy="150" r="3" />
<circle cx="760" cy="220" r="3" />
<circle cx="1180" cy="560" r="3" />
</g>
<!-- 节点光晕 -->
<g fill="rgba(98,142,255,0.08)">
<circle cx="300" cy="150" r="10" />
<circle cx="760" cy="220" r="12" />
<circle cx="1180" cy="560" r="10" />
</g>
<!-- 右上角装饰圆弧 -->
<g fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5">
<circle cx="1400" cy="0" r="400" />
<circle cx="1400" cy="0" r="650" />
</g>
</svg>
<rect width="100%" height="100%" fill="url(#bg)" />
<rect width="100%" height="100%" fill="url(#glow1)" />
<rect width="100%" height="100%" fill="url(#glow2)" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

51
src/assets/images/login/bg.svg
View File

@@ -1,42 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1400 800">
<defs>
<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 id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f0f4ff" />
<stop offset="50%" stop-color="#f5f8ff" />
<stop offset="100%" stop-color="#edf2fe" />
</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 id="glow1" cx="15%" cy="20%" r="55%">
<stop offset="0%" stop-color="rgba(22,119,255,0.12)" />
<stop offset="50%" stop-color="rgba(22,119,255,0.04)" />
<stop offset="100%" stop-color="rgba(22,119,255,0)" />
</radialGradient>
<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 id="glow2" cx="85%" cy="75%" r="50%">
<stop offset="0%" stop-color="rgba(99,102,241,0.08)" />
<stop offset="50%" stop-color="rgba(99,102,241,0.02)" />
<stop offset="100%" stop-color="rgba(99,102,241,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-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>
<rect width="100%" height="100%" fill="url(#bg)" />
<rect width="100%" height="100%" fill="url(#glow1)" />
<rect width="100%" height="100%" fill="url(#glow2)" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB