服务器卡片组件 - HTML5企业组件库

基础用法

基础的服务器卡片，展示服务器基本信息。

注意：当前展示的是静态组件示例。如需自定义样式，请使用AI编辑器进行修改。

Web服务器

在线

IP地址 192.168.1.100

系统 CentOS 8.4

运行时间 10天12小时

HTML

<div class="server-card">
    <div class="server-card-header">
        <div class="server-card-title">
            <i class="mdi mdi-server"></i>
            Web服务器
        </div>
        <div class="server-card-status">
            <span class="status-badge status-online"></span>
            在线
        </div>
    </div>
    <div class="server-card-body">
        <div class="server-info-item">
            <span class="server-info-label">IP地址</span>
            <span class="server-info-value">192.168.1.100</span>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">系统</span>
            <span class="server-info-value">CentOS 8.4</span>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">运行时间</span>
            <span class="server-info-value">10天12小时</span>
        </div>
    </div>
    <div class="server-card-footer">
        <button class="server-card-btn">查看详情</button>
        <button class="server-card-btn server-card-btn-primary">管理</button>
    </div>
</div>

不同尺寸

服务器卡片提供小、中、大三种不同尺寸，适应不同的布局需求。

小型服务器

IP地址 192.168.1.101

中型服务器

在线

IP地址 192.168.1.102

系统 Ubuntu 20.04

大型服务器

在线

IP地址 192.168.1.103

系统 Debian 11

运行时间 15天8小时

HTML

<div class="server-card server-card-sm">
    <div class="server-card-header">
        <div class="server-card-title">
            <i class="mdi mdi-server"></i>
            小型服务器
        </div>
        <div class="server-card-status">
            <span class="status-badge status-online"></span>
        </div>
    </div>
    <div class="server-card-body">
        <div class="server-info-item">
            <span class="server-info-label">IP地址</span>
            <span class="server-info-value">192.168.1.101</span>
        </div>
    </div>
</div>

<div class="server-card">
    <div class="server-card-header">
        <div class="server-card-title">
            <i class="mdi mdi-server"></i>
            中型服务器
        </div>
        <div class="server-card-status">
            <span class="status-badge status-online"></span>
            在线
        </div>
    </div>
    <div class="server-card-body">
        <div class="server-info-item">
            <span class="server-info-label">IP地址</span>
            <span class="server-info-value">192.168.1.102</span>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">系统</span>
            <span class="server-info-value">Ubuntu 20.04</span>
        </div>
    </div>
</div>

<div class="server-card server-card-lg">
    <div class="server-card-header">
        <div class="server-card-title">
            <i class="mdi mdi-server"></i>
            大型服务器
        </div>
        <div class="server-card-status">
            <span class="status-badge status-online"></span>
            在线
        </div>
    </div>
    <div class="server-card-body">
        <div class="server-info-item">
            <span class="server-info-label">IP地址</span>
            <span class="server-info-value">192.168.1.103</span>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">系统</span>
            <span class="server-info-value">Debian 11</span>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">运行时间</span>
            <span class="server-info-value">15天8小时</span>
        </div>
    </div>
    <div class="server-card-footer">
        <button class="server-card-btn">查看详情</button>
        <button class="server-card-btn">重启</button>
        <button class="server-card-btn server-card-btn-primary">管理</button>
    </div>
</div>

状态指示

服务器卡片可以通过不同的状态标识展示服务器的运行状态。

在线服务器

在线

IP地址 192.168.1.104

状态正常运行中

离线服务器

离线

IP地址 192.168.1.105

状态无法连接

维护服务器

维护中

IP地址 192.168.1.106

状态系统升级中

HTML

<div class="server-card">
    <div class="server-card-header">
        <div class="server-card-title">
            <i class="mdi mdi-server"></i>
            在线服务器
        </div>
        <div class="server-card-status">
            <span class="status-badge status-online"></span>
            在线
        </div>
    </div>
    <div class="server-card-body">
        <div class="server-info-item">
            <span class="server-info-label">IP地址</span>
            <span class="server-info-value">192.168.1.104</span>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">状态</span>
            <span class="server-info-value">正常运行中</span>
        </div>
    </div>
</div>

<div class="server-card">
    <div class="server-card-header">
        <div class="server-card-title">
            <i class="mdi mdi-server"></i>
            离线服务器
        </div>
        <div class="server-card-status">
            <span class="status-badge status-offline"></span>
            离线
        </div>
    </div>
    <div class="server-card-body">
        <div class="server-info-item">
            <span class="server-info-label">IP地址</span>
            <span class="server-info-value">192.168.1.105</span>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">状态</span>
            <span class="server-info-value">无法连接</span>
        </div>
    </div>
</div>

<div class="server-card">
    <div class="server-card-header">
        <div class="server-card-title">
            <i class="mdi mdi-server"></i>
            维护服务器
        </div>
        <div class="server-card-status">
            <span class="status-badge status-maintenance"></span>
            维护中
        </div>
    </div>
    <div class="server-card-body">
        <div class="server-info-item">
            <span class="server-info-label">IP地址</span>
            <span class="server-info-value">192.168.1.106</span>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">状态</span>
            <span class="server-info-value">系统升级中</span>
        </div>
    </div>
</div>

资源使用率

展示服务器资源使用情况，包括CPU、内存和存储空间等指标。

资源监控

在线

CPU使用率 35%

内存使用率 68%

存储空间 92%

HTML

<div class="server-card">
    <div class="server-card-header">
        <div class="server-card-title">
            <i class="mdi mdi-server"></i>
            资源监控
        </div>
        <div class="server-card-status">
            <span class="status-badge status-online"></span>
            在线
        </div>
    </div>
    <div class="server-card-body">
        <div class="server-info-item">
            <span class="server-info-label">CPU使用率</span>
            <span class="server-info-value">35%</span>
            <div class="usage-bar">
                <div class="usage-progress" style="width: 35%"></div>
            </div>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">内存使用率</span>
            <span class="server-info-value">68%</span>
            <div class="usage-bar">
                <div class="usage-progress usage-medium" style="width: 68%"></div>
            </div>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">存储空间</span>
            <span class="server-info-value">92%</span>
            <div class="usage-bar">
                <div class="usage-progress usage-high" style="width: 92%"></div>
            </div>
        </div>
    </div>
</div>

操作按钮

提供各种操作按钮，如重启、关机、配置等功能。

可操作服务器

在线

IP地址 192.168.1.107

系统 Windows Server 2019

HTML

<div class="server-card">
    <div class="server-card-header">
        <div class="server-card-title">
            <i class="mdi mdi-server"></i>
            可操作服务器
        </div>
        <div class="server-card-status">
            <span class="status-badge status-online"></span>
            在线
        </div>
    </div>
    <div class="server-card-body">
        <div class="server-info-item">
            <span class="server-info-label">IP地址</span>
            <span class="server-info-value">192.168.1.107</span>
        </div>
        <div class="server-info-item">
            <span class="server-info-label">系统</span>
            <span class="server-info-value">Windows Server 2019</span>
        </div>
    </div>
    <div class="server-card-footer">
        <button class="server-card-btn">查看详情</button>
        <button class="server-card-btn">重启</button>
        <button class="server-card-btn">关机</button>
        <button class="server-card-btn">配置</button>
        <button class="server-card-btn server-card-btn-primary">管理</button>
    </div>
</div>

卡片组

多个服务器卡片组合展示。

Web服务器

IP地址 192.168.1.108

数据库服务器

IP地址 192.168.1.109

文件服务器

IP地址 192.168.1.110

邮件服务器

IP地址 192.168.1.111

HTML

<div class="server-card-group">
    <div class="server-card server-card-sm">
        <div class="server-card-header">
            <div class="server-card-title">
                <i class="mdi mdi-server"></i>
                Web服务器
            </div>
            <div class="server-card-status">
                <span class="status-badge status-online"></span>
            </div>
        </div>
        <div class="server-card-body">
            <div class="server-info-item">
                <span class="server-info-label">IP地址</span>
                <span class="server-info-value">192.168.1.108</span>
            </div>
        </div>
    </div>
    <div class="server-card server-card-sm">
        <div class="server-card-header">
            <div class="server-card-title">
                <i class="mdi mdi-database"></i>
                数据库服务器
            </div>
            <div class="server-card-status">
                <span class="status-badge status-online"></span>
            </div>
        </div>
        <div class="server-card-body">
            <div class="server-info-item">
                <span class="server-info-label">IP地址</span>
                <span class="server-info-value">192.168.1.109</span>
            </div>
        </div>
    </div>
    <div class="server-card server-card-sm">
        <div class="server-card-header">
            <div class="server-card-title">
                <i class="mdi mdi-file-document"></i>
                文件服务器
            </div>
            <div class="server-card-status">
                <span class="status-badge status-maintenance"></span>
            </div>
        </div>
        <div class="server-card-body">
            <div class="server-info-item">
                <span class="server-info-label">IP地址</span>
                <span class="server-info-value">192.168.1.110</span>
            </div>
        </div>
    </div>
    <div class="server-card server-card-sm">
        <div class="server-card-header">
            <div class="server-card-title">
                <i class="mdi mdi-email"></i>
                邮件服务器
            </div>
            <div class="server-card-status">
                <span class="status-badge status-offline"></span>
            </div>
        </div>
        <div class="server-card-body">
            <div class="server-info-item">
                <span class="server-info-label">IP地址</span>
                <span class="server-info-value">192.168.1.111</span>
            </div>
        </div>
    </div>
</div>

API

服务器卡片组件的属性和类。

属性	说明	类型	默认值
server-card	基础类，所有卡片都需要添加	string	-
server-card-sm	小尺寸卡片	string	-
server-card-lg	大尺寸卡片	string	-
server-card-header	卡片头部区域	string	-
server-card-body	卡片内容区域	string	-
server-card-footer	卡片底部区域	string	-
status-online	在线状态	string	-
status-offline	离线状态	string	-
status-maintenance	维护状态	string	-