用户信息卡片组件

用户信息卡片用于展示用户个人信息和账户状态,适用于云服务平台的客户中心、管理控制台等场景,可以快速查看账户信息和进行相关操作。

展示组件 用户界面 云服务

基本用法

最基本的用户信息卡片,包含用户头像、姓名、ID、标识和操作按钮等基本信息。

JD
张三
客户ID: CUS-86721
VIP客户 已认证
5
活跃服务
¥1299
账户余额
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>

横向布局

横向布局的用户信息卡片,适用于需要在水平方向节省空间的场景。

JD
张三
CUS-86721
5
活跃服务
¥1299
账户余额
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>

云服务专属版

为云服务平台定制的用户信息卡片,包含更多云服务相关的信息和操作。

JD
张三
客户ID: CUS-86721
VIP客户 已认证
5
活跃服务
¥1299
账户余额
3
在用云主机
2
运行中数据库
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

事件与方法

用户信息卡片组件支持的事件和方法,用于实现交互功能。

JD
张三
客户ID: CUS-86721
VIP客户 已认证
5
活跃服务
¥1299
账户余额
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)';
    });
});

自定义主题

用户信息卡片支持自定义主题颜色,以适应不同的品牌风格和设计需求。

JD
张三
CUS-86721
JD
张三
CUS-86721
JD
张三
CUS-86721
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>