/* 姓氏头像组件样式 */ /* 基础样式 */ .name-avatar { display: flex; align-items: center; justify-content: center; border-radius: 9999px; } /* 文字样式 */ .name-avatar-text { color: #ffffff; font-weight: 600; } /* 尺寸变体 */ .name-avatar-sm { width: 32px; height: 32px; } .name-avatar-sm .name-avatar-text { font-size: 14px; } .name-avatar-md { width: 40px; height: 40px; } .name-avatar-md .name-avatar-text { font-size: 16px; } .name-avatar-lg { width: 64px; height: 64px; } .name-avatar-lg .name-avatar-text { font-size: 24px; } /* 颜色变体 - 渐变背景 */ .name-avatar-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .name-avatar-green { background: linear-gradient(135deg, #10b981, #059669); } .name-avatar-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } .name-avatar-orange { background: linear-gradient(135deg, #f59e0b, #d97706); } .name-avatar-red { background: linear-gradient(135deg, #ef4444, #dc2626); } .name-avatar-teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }