nav, title
<style>
.overview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 20px;
margin: 24px 0 48px;
}
.overview-card {
display: flex;
flex-direction: column;
border: 1px solid #e8e8e8;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
overflow: hidden;
}
.overview-card:hover {
border-color: #1890ff;
box-shadow: 0 4px 16px rgba(24, 144, 255, 0.15);
transform: translateY(-2px);
}
.overview-preview {
display: flex;
align-items: center;
justify-content: center;
padding: 28px 16px 20px;
background: #fafafa;
min-height: 80px;
border-bottom: 1px solid #f0f0f0;
flex-wrap: wrap;
gap: 8px;
}
.overview-info {
padding: 14px 16px;
}
.overview-title {
font-weight: 500;
font-size: 14px;
color: rgba(0, 0, 0, 0.88);
margin-bottom: 2px;
}
.overview-desc {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
line-height: 1.4;
}
/* Preview elements */
.prev-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 12px;
background: #fff;
font-weight: 500;
}
.prev-btn-primary { background: #1677ff; color: #fff; border-color: #1677ff; }
.prev-btn-danger { background: #ff4d4f; color: #fff; border-color: #ff4d4f; }
.prev-circle {
width: 32px; height: 32px; border-radius: 50%; background: #1677ff;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 16px; font-weight: 600;
box-shadow: 0 2px 8px rgba(22,119,255,0.3);
}
.prev-circle-green { background: #52c41a; }
.prev-circle-light {
width: 32px; height: 32px; border-radius: 50%; background: #f5f5f5;
border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center;
font-size: 14px;
}
.prev-icon { font-size: 22px; }
.prev-icon-blue { color: #1677ff; }
.prev-icon-gold { color: #faad14; }
.prev-icon-red { color: #ff4d4f; }
.prev-text { font-size: 14px; line-height: 1; }
.prev-label {
display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px;
}
.prev-label-blue { background: #e6f4ff; color: #1677ff; border: 1px solid #91caff; }
.prev-label-gray { background: #f5f5f5; color: #666; }
.prev-tag {
display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 500;
}
.prev-tag-blue { background: #e6f4ff; color: #1677ff; }
.prev-tag-green { background: #f6ffed; color: #52c41a; }
.prev-tag-red { background: #fff2f0; color: #ff4d4f; }
.prev-input {
border: 1px solid #d9d9d9; border-radius: 4px; padding: 4px 10px; font-size: 12px;
background: #fff; color: #999;
}
.prev-divider { width: 100%; border-top: 1px solid #e8e8e8; }
.prev-switch {
width: 32px; height: 18px; border-radius: 9px; background: #1677ff; position: relative;
}
.prev-switch::after {
content: ''; position: absolute; top: 2px; right: 2px;
width: 14px; height: 14px; border-radius: 50%; background: #fff;
}
.prev-avatar {
border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 600;
}
.prev-avatar-32 { width: 32px; height: 32px; font-size: 13px; }
.prev-avatar-blue { background: #1677ff; }
.prev-avatar-green { background: #52c41a; }
.prev-avatar-gray { background: #bfbfbf; }
.prev-rate { color: #faad14; font-size: 16px; letter-spacing: 2px; }
.prev-slider {
width: 100px; height: 4px; background: #e8e8e8; border-radius: 2px; position: relative;
}
.prev-slider::after {
content: ''; position: absolute; left: 30%; top: -4px;
width: 12px; height: 12px; border-radius: 50%; background: #1677ff;
border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.prev-radio {
width: 14px; height: 14px; border-radius: 50%; border: 2px solid #1677ff;
display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
.prev-radio::after {
content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1677ff;
}
.prev-check {
width: 14px; height: 14px; border-radius: 3px; border: 2px solid #1677ff;
background: #1677ff; display: inline-flex; align-items: center; justify-content: center;
vertical-align: middle; color: #fff; font-size: 10px;
}
.prev-progress { width: 100%; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.prev-progress-bar { height: 100%; background: #1677ff; border-radius: 3px; }
.prev-alert {
width: 100%; padding: 6px 12px; border-radius: 6px; font-size: 12px;
display: flex; align-items: center; gap: 6px;
}
.prev-alert-success { background: #f6ffed; border: 1px solid #b7eb8f; color: #52c41a; }
.prev-alert-info { background: #e6f4ff; border: 1px solid #91caff; color: #1677ff; }
.prev-spin {
width: 20px; height: 20px; border: 2px solid #f0f0f0;
border-top: 2px solid #1677ff; border-radius: 50%;
animation: prev-spin 1s linear infinite;
}
@keyframes prev-spin { to { transform: rotate(360deg); } }
.prev-result { text-align: center; padding: 4px 0; }
.prev-result-icon {
width: 36px; height: 36px; border-radius: 50%; display: inline-flex;
align-items: center; justify-content: center; font-size: 18px; margin-bottom: 4px;
}
.prev-result-success { background: #f6ffed; color: #52c41a; }
.prev-skeleton-line { height: 10px; background: #f0f0f0; border-radius: 3px; margin-bottom: 4px; }
.prev-stat { font-size: 22px; font-weight: 600; color: #1677ff; line-height: 1; }
.prev-stat-label { font-size: 11px; color: #999; margin-top: 2px; }
.prev-breadcrumb { font-size: 12px; color: #999; }
.prev-breadcrumb .current { color: rgba(0,0,0,0.65); }
.prev-step { display: flex; gap: 4px; align-items: center; font-size: 11px; }
.prev-step-dot {
width: 18px; height: 18px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 10px;
}
.prev-step-dot-done { background: #1677ff; color: #fff; }
.prev-step-dot-active { background: #1677ff; color: #fff; }
.prev-step-dot-pending { background: #f0f0f0; color: #999; }
.prev-step-line { width: 20px; height: 1px; background: #e8e8e8; }
.prev-step-line-done { background: #1677ff; }
.prev-tab-bar { display: flex; gap: 0; border-bottom: 1px solid #f0f0f0; }
.prev-tab-item { padding: 4px 12px; font-size: 12px; }
.prev-tab-active { color: #1677ff; border-bottom: 2px solid #1677ff; }
.prev-tab-inactive { color: #999; }
.prev-pagination { display: flex; gap: 2px; align-items: center; font-size: 11px; }
.prev-page {
min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
border-radius: 4px; border: 1px solid #d9d9d9;
}
.prev-page-active { background: #1677ff; color: #fff; border-color: #1677ff; }
.prev-dropdown {
display: flex; align-items: center; gap: 4px; padding: 4px 10px;
border: 1px solid #d9d9d9; border-radius: 4px; font-size: 12px;
}
.prev-menu-item { padding: 2px 8px; font-size: 12px; border-radius: 3px; }
.prev-menu-active { background: #e6f4ff; color: #1677ff; }
.prev-split {
display: flex; width: 100%; height: 34px; border-radius: 4px;
overflow: hidden; border: 1px solid #e8e8e8;
}
.prev-split-handle { width: 4px; background: #1677ff; }
.prev-card-mini {
width: 100%; border: 1px solid #f0f0f0; border-radius: 6px; overflow: hidden;
}
.prev-card-header {
padding: 6px 10px; background: #fafafa; font-size: 12px; font-weight: 500;
border-bottom: 1px solid #f0f0f0;
}
.prev-card-body { padding: 6px 10px; font-size: 11px; color: #666; }
.prev-collapse { width: 100%; }
.prev-collapse-item { border: 1px solid #f0f0f0; border-radius: 4px; overflow: hidden; margin-bottom: 2px; }
.prev-collapse-header {
padding: 4px 10px; background: #fafafa; font-size: 12px;
display: flex; justify-content: space-between;
}
.prev-collapse-content { padding: 4px 10px; font-size: 11px; color: #666; }
.prev-timeline { font-size: 12px; padding-left: 12px; border-left: 2px solid #1677ff; }
.prev-timeline-item { padding: 2px 0 2px 12px; position: relative; }
.prev-timeline-item::before {
content: ''; position: absolute; left: -18px; top: 7px;
width: 6px; height: 6px; border-radius: 50%; background: #1677ff;
}
.prev-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.prev-table th {
padding: 3px 8px; text-align: left; border-bottom: 1px solid #f0f0f0;
color: #999; font-weight: 500;
}
.prev-table td { padding: 3px 8px; border-bottom: 1px solid #fafafa; }
.prev-tree { padding-left: 8px; font-size: 12px; line-height: 1.8; }
.prev-tree-item { color: #666; }
.prev-tree-item::before { content: '├ '; color: #d9d9d9; }
.prev-tree-item.prev-tree-root::before { content: ''; }
.prev-modal {
width: 100%; border: 1px solid #d9d9d9; border-radius: 6px; overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.prev-modal-header {
padding: 6px 12px; border-bottom: 1px solid #f0f0f0; font-size: 12px; font-weight: 500;
}
.prev-modal-body { padding: 8px 12px; font-size: 11px; color: #666; }
.prev-modal-footer {
padding: 6px 12px; border-top: 1px solid #f0f0f0; text-align: right; font-size: 11px;
}
.prev-drawer {
width: 100%; height: 36px; background: #fafafa; border: 1px solid #e8e8e8;
border-radius: 4px; position: relative; overflow: hidden;
}
.prev-drawer-panel {
position: absolute; right: 0; top: 0; width: 34px; height: 100%;
background: #fff; border-left: 1px solid #e8e8e8; border-radius: 0 4px 4px 0;
display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;
}
.prev-badge-wrap { position: relative; display: inline-block; }
.prev-badge-dot { position: absolute; top: -2px; right: -4px; }
.prev-badge-count {
background: #ff4d4f; color: #fff; border-radius: 10px; padding: 0 5px;
font-size: 10px; min-width: 16px; height: 16px; display: flex;
align-items: center; justify-content: center; box-shadow: 0 0 0 1px #fff;
}
.prev-calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; text-align: center; font-size: 11px; }
.prev-calendar-header { color: #1677ff; font-weight: 500; padding: 2px 0; }
.prev-calendar-day { padding: 1px 0; border-radius: 3px; }
.prev-calendar-today { background: #1677ff; color: #fff; }
.prev-masonry { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; width: 100%; }
.prev-masonry-item { border-radius: 2px; }
.prev-masonry-block-1 { height: 24px; background: #1677ff; }
.prev-masonry-block-2 { height: 32px; background: #69b1ff; }
.prev-masonry-block-3 { height: 20px; background: #91caff; }
.prev-segmented { display: flex; border: 1px solid #d9d9d9; border-radius: 4px; overflow: hidden; font-size: 12px; }
.prev-segmented-item { padding: 3px 10px; }
.prev-segmented-active { background: #1677ff; color: #fff; }
.prev-segmented-inactive { background: #fff; color: #666; border-right: 1px solid #f0f0f0; }
.prev-transfer-box { padding: 3px 10px; border: 1px solid #d9d9d9; border-radius: 3px; font-size: 11px; color: #666; min-width: 50px; text-align: center; }
.prev-tooltip-target { border-bottom: 1px dashed #1677ff; font-size: 12px; color: #1677ff; }
.prev-tooltip-bubble { background: #333; color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 10px; white-space: nowrap; }
.prev-popover-wrap { display: flex; align-items: flex-start; gap: 6px; }
.prev-popover-dot { width: 8px; height: 8px; border-radius: 50%; background: #1677ff; margin-top: 25px; flex-shrink: 0; }
.prev-popover-card { background: #fff; border: 1px solid #d9d9d9; border-radius: 6px; padding: 6px 10px; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.prev-empty { text-align: center; padding: 8px 0; }
.prev-empty-icon { font-size: 28px; color: #d9d9d9; margin-bottom: 4px; }
.prev-empty-text { font-size: 12px; color: #999; }
.prev-tour-steps { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.prev-tour-dot { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; }
.prev-tour-dot-active { background: #1677ff; color: #fff; }
.prev-tour-dot-pending { border: 1px solid #d9d9d9; color: #999; }
.prev-image-placeholder { width: 60px; height: 40px; background: #f5f5f5; border: 1px solid #e8e8e8; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 20px; }
.prev-qrcode { width: 48px; height: 48px; background: #000; display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; padding: 2px; border-radius: 3px; }
.prev-qrcode-w { background: #fff; }
.prev-qrcode-b { background: #000; }
.prev-list-item { padding: 3px 8px; border-bottom: 1px solid #fafafa; font-size: 12px; }
.prev-list-item:last-child { border-bottom: none; }
.prev-carousel-slide { height: 32px; background: linear-gradient(135deg, #1677ff, #69b1ff); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.prev-carousel-dots { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.prev-carousel-dot { width: 6px; height: 6px; border-radius: 50%; }
.prev-carousel-dot-active { background: #1677ff; }
.prev-carousel-dot-inactive { background: #d9d9d9; }
.prev-descriptions { font-size: 12px; width: 100%; }
.prev-descriptions-row { display: flex; gap: 8px; padding: 2px 0; border-bottom: 1px solid #fafafa; }
.prev-descriptions-label { color: #999; min-width: 40px; }
.prev-notification { width: 100%; background: #fff; border: 1px solid #d9d9d9; border-radius: 6px; padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.prev-notification-title { font-size: 12px; font-weight: 500; margin-bottom: 2px; }
.prev-notification-desc { font-size: 11px; color: #666; }
.prev-popconfirm { position: relative; }
.prev-popconfirm-trigger { padding: 4px 10px; border: 1px solid #ff4d4f; border-radius: 4px; font-size: 12px; color: #ff4d4f; }
.prev-popconfirm-bubble { position: absolute; top: -28px; left: 0; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; padding: 2px 8px; font-size: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); white-space: nowrap; }
</style>
组件总览
RustUI 提供了丰富的组件库，覆盖通用、布局、导航、数据录入、数据展示和反馈等场景。
通用 10 个组件
布局 8 个组件
导航 6 个组件
数据录入 19 个组件
数据展示 20 个组件
反馈 10 个组件
donghym