feat: 10个登录页图标统一 — 蓝紫渐变(#3b82f6→#8b5cf6)+白色盾牌勾选,与favicon一致

This commit is contained in:
logan committed 2026-05-27 21:04:45 +08:00
1 parent e6b421574d
commit 41dab3deab
10 files changed
+18 -111

No files matched your search

+2 -15
View File
@@ -198,7 +198,7 @@ export default function AuroraView(): JSX.Element {
width: 44, width: 44,
height: 44, height: 44,
borderRadius: 12, borderRadius: 12,
background: 'linear-gradient(135deg, #7c3aed 0%, #059669 100%)', background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@@ -206,20 +206,7 @@ export default function AuroraView(): JSX.Element {
boxShadow: '0 4px 20px rgba(124, 58, 237, 0.3), 0 2px 10px rgba(5, 150, 105, 0.2)', boxShadow: '0 4px 20px rgba(124, 58, 237, 0.3), 0 2px 10px rgba(5, 150, 105, 0.2)',
}} }}
> >
<svg <svg width={22} height={22} viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
width={22}
height={22}
viewBox="0 0 24 24"
fill="none"
stroke="#fff"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
</svg>
</div> </div>
{/* 标题 */} {/* 标题 */}
+2 -12
View File
@@ -143,24 +143,14 @@ export default function CenteredCard() {
width: 44, width: 44,
height: 44, height: 44,
borderRadius: 12, borderRadius: 12,
background: 'linear-gradient(135deg, #fbbf24, #f59e0b)', background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
margin: '0 auto 24px', margin: '0 auto 24px',
}} }}
> >
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
<circle cx="12" cy="12" r="4" />
<line x1="12" y1="2" x2="12" y2="5" />
<line x1="12" y1="19" x2="12" y2="22" />
<line x1="4.93" y1="4.93" x2="7.05" y2="7.05" />
<line x1="16.95" y1="16.95" x2="19.07" y2="19.07" />
<line x1="2" y1="12" x2="5" y2="12" />
<line x1="19" y1="12" x2="22" y2="12" />
<line x1="4.93" y1="19.07" x2="7.05" y2="16.95" />
<line x1="16.95" y1="7.05" x2="19.07" y2="4.93" />
</svg>
</div> </div>
<h1 style={{ textAlign: 'center', fontSize: 22, fontWeight: 600, color: '#fef3c7', marginBottom: 6 }}> <h1 style={{ textAlign: 'center', fontSize: 22, fontWeight: 600, color: '#fef3c7', marginBottom: 6 }}>
+2 -6
View File
@@ -344,7 +344,7 @@ export default function CosmosView(): JSX.Element {
width: 44, width: 44,
height: 44, height: 44,
borderRadius: 14, borderRadius: 14,
background: 'linear-gradient(135deg, #1e3a8a, #7c3aed)', background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@@ -352,11 +352,7 @@ export default function CosmosView(): JSX.Element {
boxShadow: '0 4px 20px rgba(79,70,229,0.3), inset 0 1px 0 rgba(255,255,255,0.15)', boxShadow: '0 4px 20px rgba(79,70,229,0.3), inset 0 1px 0 rgba(255,255,255,0.15)',
}} }}
> >
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
</svg>
</div> </div>
<h1 <h1
style={{ style={{
+1 -5
View File
@@ -147,11 +147,7 @@ export default function FullImage() {
marginBottom: 18, marginBottom: 18,
}} }}
> >
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
</svg>
</div> </div>
<h1 style={{ fontSize: 20, fontWeight: 600, color: '#fff', marginBottom: 4, textAlign: 'center' }}> <h1 style={{ fontSize: 20, fontWeight: 600, color: '#fff', marginBottom: 4, textAlign: 'center' }}>
OpsxSQL OpsxSQL
@@ -194,7 +194,7 @@ export default function GradientMeshView(): React.JSX.Element {
width: 48, width: 48,
height: 48, height: 48,
borderRadius: 16, borderRadius: 16,
background: 'linear-gradient(135deg, #6366f1, #f43f5e)', background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@@ -202,20 +202,7 @@ export default function GradientMeshView(): React.JSX.Element {
boxShadow: '0 8px 24px rgba(99,102,241,0.25)', boxShadow: '0 8px 24px rgba(99,102,241,0.25)',
}} }}
> >
<svg <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
width={20}
height={20}
viewBox="0 0 24 24"
fill="none"
stroke="#fff"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
</svg>
</div> </div>
<h1 <h1
+2 -15
View File
@@ -255,7 +255,7 @@ export default function InkWashView(): JSX.Element {
width: 44, width: 44,
height: 44, height: 44,
borderRadius: 10, borderRadius: 10,
background: 'linear-gradient(135deg, #3a362e, #1f1d19)', background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@@ -263,20 +263,7 @@ export default function InkWashView(): JSX.Element {
boxShadow: '0 2px 8px rgba(0,0,0,0.12)', boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
}} }}
> >
<svg <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#c9a96e"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
</svg>
</div> </div>
{/* 标题 */} {/* 标题 */}
@@ -187,11 +187,7 @@ export default function MinimalDark() {
boxShadow: '0 4px 20px rgba(168,85,247,0.3)', boxShadow: '0 4px 20px rgba(168,85,247,0.3)',
}} }}
> >
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
</svg>
</div> </div>
{/* Brand name */} {/* Brand name */}
+3 -29
View File
@@ -268,7 +268,7 @@ export default function NeonCityView(): JSX.Element {
width: 44, width: 44,
height: 44, height: 44,
borderRadius: 12, borderRadius: 12,
background: 'linear-gradient(135deg, #ec4899, #06b6d4)', background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@@ -276,20 +276,7 @@ export default function NeonCityView(): JSX.Element {
boxShadow: '0 0 15px rgba(236, 72, 153, 0.5), 0 0 30px rgba(6, 182, 212, 0.3)', boxShadow: '0 0 15px rgba(236, 72, 153, 0.5), 0 0 30px rgba(6, 182, 212, 0.3)',
}} }}
> >
<svg <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="#fff"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
</svg>
</div> </div>
{/* Title */} {/* Title */}
@@ -464,20 +451,7 @@ export default function NeonCityView(): JSX.Element {
> >
{loading ? ( {loading ? (
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}> <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
<svg <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
style={{ animation: 'spin 1s linear infinite' }}
>
<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
登录中... 登录中...
</span> </span>
) : ( ) : (
+1 -1
View File
@@ -34,7 +34,7 @@ export default function SidePanel() {
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-3 mb-5"> <div className="flex items-center gap-3 mb-5">
<div className="w-11 h-11 rounded-xl dg-gradient-br flex items-center justify-center"> <div className="w-11 h-11 rounded-xl dg-gradient-br flex items-center justify-center">
<Shield className="w-6 h-6 text-white" /> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
</div> </div>
<h1 className="text-4xl font-bold dg-gradient-text"> <h1 className="text-4xl font-bold dg-gradient-text">
OpsxSQL OpsxSQL
+2 -8
View File
@@ -146,7 +146,7 @@ export default function SplitView() {
width: 48, width: 48,
height: 48, height: 48,
borderRadius: 12, borderRadius: 12,
background: 'linear-gradient(135deg, #00d4aa, #0ea5e9)', background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@@ -154,13 +154,7 @@ export default function SplitView() {
boxShadow: '0 4px 24px rgba(0,212,170,0.3)', boxShadow: '0 4px 24px rgba(0,212,170,0.3)',
}} }}
> >
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L20 6V11C20 16 16 19.5 12 22C8 19.5 4 16 4 11V6L12 2Z" /><path d="M9 12L11 14L15 10" /></svg>
<path d="M12 2L22 8.5V15.5L12 22L2 15.5V8.5L12 2Z" />
<path d="M12 22V15.5" />
<path d="M22 8.5L12 15.5L2 8.5" />
<path d="M2 15.5L12 8.5L22 15.5" />
<line x1="12" y1="2" x2="12" y2="8.5" />
</svg>
</div> </div>
<h1 style={{ fontSize: 36, fontWeight: 700, color: '#e2e8f0', marginBottom: 10, letterSpacing: '-0.5px', lineHeight: 1.2 }}> <h1 style={{ fontSize: 36, fontWeight: 700, color: '#e2e8f0', marginBottom: 10, letterSpacing: '-0.5px', lineHeight: 1.2 }}>