<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自用UI组件库示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #4361ee;
--primary-dark: #3a56d4;
--secondary: #f72585;
--success: #4cc9f0;
--warning: #fca311;
--danger: #e63946;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--light-gray: #e9ecef;
--border-radius: 8px;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
header h1 {
color: var(--primary);
margin-bottom: 10px;
font-size: 2.5rem;
}
header p {
color: var(--gray);
max-width: 800px;
margin: 0 auto;
}
.section {
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 30px;
margin-bottom: 30px;
}
.section-title {
color: var(--primary);
border-bottom: 2px solid var(--light-gray);
padding-bottom: 15px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.component-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
.component-card {
background: white;
border-radius: var(--border-radius);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
padding: 20px;
transition: var(--transition);
border: 1px solid var(--light-gray);
}
.component-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.component-title {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--dark);
display: flex;
align-items: center;
gap: 10px;
}
.component-demo {
padding: 15px;
background: var(--light);
border-radius: var(--border-radius);
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.component-code {
background: #2d2d2d;
color: #f8f8f2;
border-radius: var(--border-radius);
padding: 15px;
font-family: monospace;
font-size: 14px;
overflow-x: auto;
}
/* Button组件样式 */
.btn {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: var(--border-radius);
background-color: var(--primary);
color: white;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
text-align: center;
font-size: 1rem;
}
.btn:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
}
.btn-secondary {
background-color: var(--secondary);
}
.btn-secondary:hover {
background-color: #d81b60;
}
.btn-success {
background-color: var(--success);
}
.btn-warning {
background-color: var(--warning);
}
.btn-danger {
background-color: var(--danger);
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background-color: var(--primary);
color: white;
}
/* Card组件样式 */
.card {
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
overflow: hidden;
width: 300px;
}
.card-img {
width: 100%;
height: 180px;
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
font-weight: bold;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 1.3rem;
margin-bottom: 10px;
color: var(--dark);
}
.card-text {
color: var(--gray);
margin-bottom: 20px;
}
/* Alert组件样式 */
.alert {
padding: 15px;
border-radius: var(--border-radius);
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert-info {
background-color: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.alert-warning {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
}
.alert-danger {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* Badge组件样式 */
.badge {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: bold;
}
.badge-primary {
background-color: var(--primary);
color: white;
}
.badge-secondary {
background-color: var(--secondary);
color: white;
}
.badge-success {
background-color: var(--success);
color: white;
}
/* Progress组件样式 */
.progress {
height: 10px;
background-color: var(--light-gray);
border-radius: 5px;
overflow: hidden;
margin: 15px 0;
}
.progress-bar {
height: 100%;
background-color: var(--primary);
border-radius: 5px;
transition: width 0.5s ease;
}
/* Toast组件样式 */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
padding: 15px 25px;
background-color: var(--dark);
color: white;
border-radius: var(--border-radius);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
gap: 10px;
z-index: 1000;
transform: translateX(120%);
transition: transform 0.3s ease;
}
.toast.show {
transform: translateX(0);
}
.toast-success {
background-color: var(--success);
}
.toast-error {
background-color: var(--danger);
}
/* Responsive Design */
@media (max-width: 768px) {
.component-grid {
grid-template-columns: 1fr;
}
.container {
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-cube"></i> 自用UI组件库</h1>
<p>从零开始构建自己的UI组件库，提高开发效率，保持设计一致性</p>
</header>
<div class="section">
<h2 class="section-title"><i class="fas fa-cog"></i> 组件库开发步骤</h2>
<div class="component-grid">
<div class="component-card">
<h3 class="component-title"><i class="fas fa-1"></i> 1. 规划组件</h3>
<p>确定需要哪些组件：按钮、卡片、表单元素、导航等。</p>
</div>
<div class="component-card">
<h3 class="component-title"><i class="fas fa-2"></i> 2. 设计规范</h3>
<p>定义颜色、间距、字体、阴影等设计规范。</p>
</div>
<div class="component-card">
<h3 class="component-title"><i class="fas fa-3"></i> 3. 创建基础组件</h3>
<p>从简单组件开始：按钮、文本、容器等。</p>
</div>
<div class="component-card">
<h3 class="component-title"><i class="fas fa-4"></i> 4. 构建复杂组件</h3>
<p>基于基础组件创建卡片、模态框、导航等。</p>
</div>
<div class="component-card">
<h3 class="component-title"><i class="fas fa-5"></i> 5. 添加交互功能</h3>
<p>使用JavaScript为组件添加交互行为。</p>
</div>
<div class="component-card">
<h3 class="component-title"><i class="fas fa-6"></i> 6. 文档与测试</h3>
<p>编写使用文档，测试组件兼容性和响应式。</p>
</div>
</div>
</div>
<div class="section">
<h2 class="section-title"><i class="fas fa-cubes"></i> 组件示例</h2>
<div class="component-grid">
<!-- 按钮组件 -->
<div class="component-card">
<h3 class="component-title"><i class="fas fa-hand-pointer"></i> 按钮 (Button)</h3>
<div class="component-demo">
<button class="btn">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-outline">轮廓按钮</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-danger">危险</button>
</div>
<div class="component-code">
<button class="btn">主要按钮</button><br>
<button class="btn btn-secondary">次要按钮</button><br>
<button class="btn btn-outline">轮廓按钮</button>
</div>
</div>
<!-- 卡片组件 -->
<div class="component-card">
<h3 class="component-title"><i class="far fa-credit-card"></i> 卡片 (Card)</h3>
<div class="component-demo">
<div class="card">
<div class="card-img">卡片图片</div>
<div class="card-content">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">这是一张卡片的内容描述，可以包含文本、图片和其他元素。</p>
<button class="btn">查看详情</button>
</div>
</div>
</div>
<div class="component-code">
<div class="card"><br>
<div class="card-img">卡片图片</div><br>
<div class="card-content"><br>
<h4 class="card-title">卡片标题</h4><br>
<p class="card-text">卡片内容</p><br>
<button class="btn">按钮</button><br>
</div><br>
</div>
</div>
</div>
<!-- 警告组件 -->
<div class="component-card">
<h3 class="component-title"><i class="fas fa-exclamation-triangle"></i> 警告 (Alert)</h3>
<div class="component-demo">
<div class="alert alert-success">
<i class="fas fa-check-circle"></i> 操作成功！数据已保存。
</div>
<div class="alert alert-info">
<i class="fas fa-info-circle"></i> 提示信息：系统将于今晚10点维护。
</div>
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle"></i> 警告：您有未保存的更改。
</div>
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 错误：无法连接到服务器。
</div>
</div>
<div class="component-code">
<div class="alert alert-success"><br>
<i class="fas fa-check-circle"></i> 操作成功！<br>
</div><br>
<div class="alert alert-danger"><br>
<i class="fas fa-exclamation-circle"></i> 错误信息<br>
</div>
</div>
</div>
<!-- 徽章和进度条 -->
<div class="component-card">
<h3 class="component-title"><i class="fas fa-tags"></i> 徽章与进度条</h3>
<div class="component-demo">
<div style="margin-bottom: 20px;">
<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
</div>
<div style="margin-top: 20px;">
<div style="margin-bottom: 5px;">默认进度条</div>
<div class="progress">
<div class="progress-bar" style="width: 30%;"></div>
</div>
<div style="margin: 15px 0 5px;">成功进度条</div>
<div class="progress">
<div class="progress-bar" style="width: 65%; background-color: var(--success);"></div>
</div>
</div>
</div>
<div class="component-code">
<!-- 徽章 --><br>
<span class="badge badge-primary">主要</span><br><br>
<!-- 进度条 --><br>
<div class="progress"><br>
<div class="progress-bar" style="width: 65%;"></div><br>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h2 class="section-title"><i class="fas fa-rocket"></i> 下一步计划</h2>
<div class="component-grid">
<div class="component-card">
<h3 class="component-title"><i class="fas fa-plus-circle"></i> 添加更多组件</h3>
<ul style="padding-left: 20px; margin-top: 10px;">
<li>导航栏</li>
<li>模态框</li>
<li>表单元素</li>
<li>下拉菜单</li>
<li>选项卡</li>
</ul>
</div>
<div class="component-card">
<h3 class="component-title"><i class="fas fa-mobile-alt"></i> 响应式优化</h3>
<p>确保所有组件在不同屏幕尺寸上表现良好</p>
</div>
<div class="component-card">
<h3 class="component-title"><i class="fas fa-book"></i> 编写文档</h3>
<p>创建组件使用文档和示例</p>
</div>
<div class="component-card">
<h3 class="component-title"><i class="fas fa-code-branch"></i> 版本管理</h3>
<p>使用Git进行版本控制，发布稳定版本</p>
</div>
</div>
</div>
</div>
<!-- Toast组件 -->
<div class="toast" id="toast">
<i class="fas fa-check-circle"></i>
<span>组件库加载完成！</span>
</div>
<script>
// 简单的Toast组件功能
document.addEventListener('DOMContentLoaded', function() {
const toast = document.getElementById('toast');
// 显示toast
toast.classList.add('show');
// 3秒后隐藏
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
});
</script>
</body>
</html>
浙公网安备 33010602011771号