mini-starter/mini/src/components/NameAvatar/index.css

/* 姓氏头像组件样式 */

/* 基础样式 */
.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);
}