用户信息卡片组件
用户信息卡片用于展示用户个人信息和账户状态,适用于云服务平台的客户中心、管理控制台等场景,可以快速查看账户信息和进行相关操作。
基本用法
最基本的用户信息卡片,包含用户头像、姓名、ID、标识和操作按钮等基本信息。
HTML
<div class="user-card">
<div class="user-card-header">
<div class="user-avatar">JD</div>
<div class="user-name">张三</div>
<div class="user-id">客户ID: CUS-86721</div>
<div class="user-badges">
<span class="user-badge">VIP客户</span>
<span class="user-badge verified">已认证</span>
</div>
</div>
<div class="user-stats">
<div class="user-stat">
<div class="user-stat-value">5</div>
<div class="user-stat-label">活跃服务</div>
</div>
<div class="user-stat">
<div class="user-stat-value">¥1299</div>
<div class="user-stat-label">账户余额</div>
</div>
</div>
<div class="user-actions">
<a href="javascript:void(0)" class="user-action-btn">个人资料</a>
<a href="javascript:void(0)" class="user-action-btn primary">账户管理</a>
</div>
</div>
横向布局
横向布局的用户信息卡片,适用于需要在水平方向节省空间的场景。
HTML
<div class="user-card user-card-horizontal">
<div class="user-card-header">
<div class="user-avatar">JD</div>
<div class="user-name">张三</div>
<div class="user-id">CUS-86721</div>
</div>
<div class="user-content">
<div class="user-stats">
<div class="user-stat">
<div class="user-stat-value">5</div>
<div class="user-stat-label">活跃服务</div>
</div>
<div class="user-stat">
<div class="user-stat-value">¥1299</div>
<div class="user-stat-label">账户余额</div>
</div>
</div>
<div class="user-actions">
<a href="javascript:void(0)" class="user-action-btn">个人资料</a>
<a href="javascript:void(0)" class="user-action-btn primary">账户管理</a>
</div>
</div>
</div>
简洁版
简洁版的用户信息卡片,仅显示最基本的用户信息,适用于空间有限的场景。
JD
管理
HTML
<div class="user-card user-card-minimal">
<div class="user-avatar">JD</div>
<div class="user-info">
<div class="user-name">张三</div>
<div class="user-id">客户ID: CUS-86721</div>
</div>
<a href="javascript:void(0)" class="user-action-btn primary" style="padding: 5px 15px;">
管理
</a>
</div>
云服务专属版
为云服务平台定制的用户信息卡片,包含更多云服务相关的信息和操作。
HTML
<div class="user-card" style="width: 340px;">
<div class="user-card-header">
<div class="user-avatar">JD</div>
<div class="user-name">张三</div>
<div class="user-id">客户ID: CUS-86721</div>
<div class="user-badges">
<span class="user-badge">VIP客户</span>
<span class="user-badge verified">已认证</span>
</div>
</div>
<div class="user-stats" style="flex-wrap: wrap;">
<div class="user-stat" style="width: 50%; border-bottom: 1px solid #f0f0f0;">
<div class="user-stat-value">5</div>
<div class="user-stat-label">活跃服务</div>
</div>
<div class="user-stat" style="width: 50%; border-bottom: 1px solid #f0f0f0;">
<div class="user-stat-value">¥1299</div>
<div class="user-stat-label">账户余额</div>
</div>
<div class="user-stat" style="width: 50%;">
<div class="user-stat-value">3</div>
<div class="user-stat-label">在用云主机</div>
</div>
<div class="user-stat" style="width: 50%;">
<div class="user-stat-value">2</div>
<div class="user-stat-label">运行中数据库</div>
</div>
</div>
<div class="user-actions">
<a href="javascript:void(0)" class="user-action-btn">控制台</a>
<a href="javascript:void(0)" class="user-action-btn">充值</a>
<a href="javascript:void(0)" class="user-action-btn primary">账户管理</a>
</div>
</div>
API 文档
用户信息卡片组件的属性、类名和方法的详细说明。
CSS 类名
类名 | 描述 | 默认值 |
---|---|---|
user-card | 用户信息卡片的容器 | - |
user-card-header | 用户卡片的头部区域 | - |
user-avatar | 用户头像容器 | - |
user-name | 用户名称 | - |
user-id | 用户ID或其他标识 | - |
user-badges | 用户标识/徽章容器 | - |
user-badge | 单个用户标识/徽章 | - |
user-badge.verified | 已认证标识样式 | - |
user-stats | 用户统计数据容器 | - |
user-stat | 单个统计项容器 | - |
user-stat-value | 统计项的数值 | - |
user-stat-label | 统计项的标签 | - |
user-actions | 用户操作按钮容器 | - |
user-action-btn | 操作按钮 | - |
user-action-btn.primary | 主要操作按钮样式 | - |
user-card-horizontal | 横向布局的用户卡片 | - |
user-content | 横向布局中右侧内容区 | - |
user-card-minimal | 简洁版用户卡片 | - |
user-info | 简洁版用户信息区 | - |
用户卡片配置选项
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
avatarContent | 用户头像内容(文字或图片) | String | - |
userName | 用户名称 | String | - |
userId | 用户ID或标识 | String | - |
badges | 用户标识/徽章数组 | Array | [] |
statistics | 用户统计数据数组 | Array | [] |
actions | 用户操作按钮数组 | Array | [] |
layout | 卡片布局类型(vertical/horizontal/minimal) | String | vertical |
事件与方法
用户信息卡片组件支持的事件和方法,用于实现交互功能。
JavaScript
// 用户卡片交互示例
document.addEventListener('DOMContentLoaded', function() {
// 获取交互元素
const showProfileBtn = document.getElementById('show-profile');
const manageAccountBtn = document.getElementById('manage-account');
const actionResult = document.getElementById('action-result');
// 个人资料按钮点击事件
showProfileBtn.addEventListener('click', function() {
actionResult.textContent = '正在打开用户 "张三" 的个人资料页面...';
actionResult.style.display = 'block';
// 模拟API调用
setTimeout(function() {
actionResult.textContent = '已成功加载用户个人资料';
}, 1000);
});
// 账户管理按钮点击事件
manageAccountBtn.addEventListener('click', function() {
actionResult.textContent = '正在跳转至用户 "张三" 的账户管理页面...';
actionResult.style.display = 'block';
// 模拟API调用
setTimeout(function() {
actionResult.textContent = '已成功跳转至账户管理页面';
}, 1000);
});
// 用户卡片hover效果
const userCard = document.getElementById('interactive-card');
userCard.addEventListener('mouseenter', function() {
this.style.boxShadow = '0 8px 30px rgba(36, 104, 242, 0.12)';
this.style.transform = 'translateY(-5px)';
this.style.transition = 'all 0.3s ease';
});
userCard.addEventListener('mouseleave', function() {
this.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.08)';
this.style.transform = 'translateY(0)';
});
});
自定义主题
用户信息卡片支持自定义主题颜色,以适应不同的品牌风格和设计需求。
HTML
<!-- 蓝色主题(默认) -->
<div class="user-card" style="width: 240px;">
<div class="user-card-header">
<div class="user-avatar">JD</div>
<div class="user-name">张三</div>
<div class="user-id">CUS-86721</div>
</div>
<div class="user-actions">
<a href="javascript:void(0)" class="user-action-btn primary">账户管理</a>
</div>
</div>
<!-- 绿色主题 -->
<div class="user-card" style="width: 240px;">
<div class="user-card-header" style="background: linear-gradient(135deg, #28a745, #5fd778);">
<div class="user-avatar" style="background: #28a745;">JD</div>
<div class="user-name">张三</div>
<div class="user-id">CUS-86721</div>
</div>
<div class="user-actions">
<a href="javascript:void(0)" class="user-action-btn" style="background: #28a745; color: white;">账户管理</a>
</div>
</div>
<!-- 橙色主题 -->
<div class="user-card" style="width: 240px;">
<div class="user-card-header" style="background: linear-gradient(135deg, #fd7e14, #ffb14d);">
<div class="user-avatar" style="background: #fd7e14;">JD</div>
<div class="user-name">张三</div>
<div class="user-id">CUS-86721</div>
</div>
<div class="user-actions">
<a href="javascript:void(0)" class="user-action-btn" style="background: #fd7e14; color: white;">账户管理</a>
</div>
</div>