特制一个自己的UI库，只用CSS、图标、emoji图 日后慢用！！！
图片：
emoji图标库 --emoji.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Emoji 库</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; color: #333; background-color: #f8f9fa; } .my-navbar { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; display: flex; align-items: center; position: sticky; top: 0; z-index: 1000; } .my-navbar__brand { font-size: 1.25rem; font-weight: bold; color: #333; text-decoration: none; margin-right: 2rem; } .my-navbar__search { position: relative; flex: 1; max-width: 500px; } .my-navbar__search-input { width: 100%; padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; outline: none; } .my-navbar__search-input:focus { border-color: #007bff; } .category-filter { padding: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; background-color: #fff; margin: 1rem; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .category-btn { padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; cursor: pointer; font-size: 0.875rem; transition: all 0.2s; } .category-btn:hover { background-color: #f8f9fa; } .category-btn.active { background-color: #007bff; color: #fff; border-color: #007bff; } .emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; padding: 1rem; margin: 1rem; background-color: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .emoji-item { display: flex; flex-direction: column; align-items: center; padding: 1rem; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .emoji-item:hover { background-color: #f8f9fa; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .emoji-symbol { font-size: 2rem; margin-bottom: 0.5rem; } .emoji-name { font-size: 0.75rem; color: #666; text-align: center; word-break: break-all; } .copy-tooltip { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.875rem; opacity: 0; transition: opacity 0.2s; } .copy-tooltip.show { opacity: 1; } @media (max-width: 768px) { .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } } </style> </head> <body> <nav class="my-navbar"> <a href="index.html" class="my-navbar__brand">Emoji 库</a> <div class="my-navbar__search"> <input type="text" class="my-navbar__search-input" id="searchInput" placeholder="搜索 Emoji..."> </div> </nav> <div class="category-filter" id="categoryFilter"> <!-- 分类按钮将通过 JavaScript 动态添加 --> </div> <div class="emoji-grid" id="emojiGrid"> <!-- Emoji 将通过 JavaScript 动态添加 --> </div> <div class="copy-tooltip" id="copyTooltip">已复制到剪贴板！</div> <script> // Emoji 数据 const emojis = [ // 表情符号 { symbol: '😀', name: '笑脸', category: '表情' }, { symbol: '😃', name: '大笑', category: '表情' }, { symbol: '😄', name: '开心', category: '表情' }, { symbol: '😁', name: '露齿笑', category: '表情' }, { symbol: '😅', name: '尴尬笑', category: '表情' }, { symbol: '😂', name: '笑哭', category: '表情' }, { symbol: '🤣', name: '笑倒', category: '表情' }, { symbol: '😊', name: '害羞', category: '表情' }, // 手势 { symbol: '👍', name: '点赞', category: '手势' }, { symbol: '👎', name: '踩', category: '手势' }, { symbol: '👌', name: '好的', category: '手势' }, { symbol: '✌️', name: '胜利', category: '手势' }, { symbol: '🤞', name: '祝好运', category: '手势' }, { symbol: '🤝', name: '握手', category: '手势' }, { symbol: '👋', name: '挥手', category: '手势' }, { symbol: '✋', name: '举手', category: '手势' }, // 动物 { symbol: '🐱', name: '猫', category: '动物' }, { symbol: '🐶', name: '狗', category: '动物' }, { symbol: '🐼', name: '熊猫', category: '动物' }, { symbol: '🐨', name: '考拉', category: '动物' }, { symbol: '🦁', name: '狮子', category: '动物' }, { symbol: '🐯', name: '老虎', category: '动物' }, { symbol: '🦊', name: '狐狸', category: '动物' }, { symbol: '🐮', name: '牛', category: '动物' }, // 食物 { symbol: '🍎', name: '苹果', category: '食物' }, { symbol: '🍐', name: '梨', category: '食物' }, { symbol: '🍊', name: '橘子', category: '食物' }, { symbol: '🍋', name: '柠檬', category: '食物' }, { symbol: '🍌', name: '香蕉', category: '食物' }, { symbol: '🍉', name: '西瓜', category: '食物' }, { symbol: '🍇', name: '葡萄', category: '食物' }, { symbol: '🍓', name: '草莓', category: '食物' }, // 自然 { symbol: '🌞', name: '太阳', category: '自然' }, { symbol: '🌙', name: '月亮', category: '自然' }, { symbol: '⭐', name: '星星', category: '自然' }, { symbol: '🌈', name: '彩虹', category: '自然' }, { symbol: '☁️', name: '云', category: '自然' }, { symbol: '🌧️', name: '下雨', category: '自然' }, { symbol: '❄️', name: '雪花', category: '自然' }, { symbol: '🌸', name: '花', category: '自然' }, // 电脑科技 { symbol: '💻', name: '笔记本电脑', category: '电脑科技' }, { symbol: '🖥️', name: '台式电脑', category: '电脑科技' }, { symbol: '⌨️', name: '键盘', category: '电脑科技' }, { symbol: '🖱️', name: '鼠标', category: '电脑科技' }, { symbol: '🖨️', name: '打印机', category: '电脑科技' }, { symbol: '📱', name: '手机', category: '电脑科技' }, { symbol: '📲', name: '手机振动', category: '电脑科技' }, { symbol: '☎️', name: '电话', category: '电脑科技' }, { symbol: '📞', name: '电话听筒', category: '电脑科技' }, { symbol: '🔋', name: '电池', category: '电脑科技' }, { symbol: '🔌', name: '电源插头', category: '电脑科技' }, { symbol: '💾', name: '软盘', category: '电脑科技' }, { symbol: '💿', name: '光盘', category: '电脑科技' }, { symbol: '📀', name: 'DVD', category: '电脑科技' }, { symbol: '🎮', name: '游戏手柄', category: '电脑科技' }, { symbol: '🕹️', name: '游戏摇杆', category: '电脑科技' }, { symbol: '📷', name: '相机', category: '电脑科技' }, { symbol: '📸', name: '闪光相机', category: '电脑科技' }, { symbol: '📹', name: '摄像机', category: '电脑科技' }, { symbol: '🎥', name: '电影摄像机', category: '电脑科技' }, { symbol: '📺', name: '电视', category: '电脑科技' }, { symbol: '📻', name: '收音机', category: '电脑科技' }, { symbol: '🎙️', name: '录音麦克风', category: '电脑科技' }, { symbol: '🎚️', name: '音量滑块', category: '电脑科技' }, // 软件工程 { symbol: '⚙️', name: '齿轮', category: '软件工程' }, { symbol: '🔧', name: '扳手', category: '软件工程' }, { symbol: '🔨', name: '锤子', category: '软件工程' }, { symbol: '⚡', name: '闪电', category: '软件工程' }, { symbol: '🔍', name: '搜索', category: '软件工程' }, { symbol: '📊', name: '数据图表', category: '软件工程' }, { symbol: '📈', name: '上升趋势', category: '软件工程' }, { symbol: '📉', name: '下降趋势', category: '软件工程' }, { symbol: '📋', name: '剪贴板', category: '软件工程' }, { symbol: '📝', name: '备忘录', category: '软件工程' }, { symbol: '✏️', name: '铅笔', category: '软件工程' }, { symbol: '❌', name: '错误', category: '软件工程' }, { symbol: '✅', name: '正确', category: '软件工程' }, { symbol: '⚠️', name: '警告', category: '软件工程' }, { symbol: '🔒', name: '锁定', category: '软件工程' }, { symbol: '🔓', name: '解锁', category: '软件工程' }, { symbol: '🔑', name: '密钥', category: '软件工程' }, { symbol: '🔄', name: '同步', category: '软件工程' }, { symbol: '📦', name: '包', category: '软件工程' }, { symbol: '🗂️', name: '文件夹', category: '软件工程' }, { symbol: '⏱️', name: '计时器', category: '软件工程' }, { symbol: '🔗', name: '链接', category: '软件工程' }, { symbol: '🔌', name: '插件', category: '软件工程' }, { symbol: '🎯', name: '目标', category: '软件工程' }, // 进销存 { symbol: '📦', name: '包裹', category: '进销存' }, { symbol: '🏭', name: '工厂', category: '进销存' }, { symbol: '🏪', name: '商店', category: '进销存' }, { symbol: '🏬', name: '百货商场', category: '进销存' }, { symbol: '🏢', name: '仓库', category: '进销存' }, { symbol: '🚚', name: '货车', category: '进销存' }, { symbol: '🚛', name: '卡车', category: '进销存' }, { symbol: '📥', name: '收货', category: '进销存' }, { symbol: '📤', name: '发货', category: '进销存' }, { symbol: '🏷️', name: '标签', category: '进销存' }, { symbol: '💰', name: '钱袋', category: '进销存' }, { symbol: '💵', name: '纸币', category: '进销存' }, { symbol: '🧾', name: '收据', category: '进销存' }, { symbol: '📃', name: '单据', category: '进销存' }, { symbol: '📋', name: '清单', category: '进销存' }, { symbol: '📊', name: '统计图', category: '进销存' }, { symbol: '📈', name: '增长图', category: '进销存' }, { symbol: '📉', name: '下降图', category: '进销存' }, { symbol: '⚖️', name: '天平', category: '进销存' }, { symbol: '🔍', name: '查询', category: '进销存' }, { symbol: '📱', name: '手机端', category: '进销存' }, { symbol: '💻', name: '电脑端', category: '进销存' }, { symbol: '🔐', name: '安全锁', category: '进销存' }, { symbol: '⏰', name: '定时', category: '进销存' }, // 文件操作 { symbol: '📁', name: '文件夹', category: '文件操作' }, { symbol: '📂', name: '打开的文件夹', category: '文件操作' }, { symbol: '📄', name: '文档', category: '文件操作' }, { symbol: '📃', name: '卷曲的文档', category: '文件操作' }, { symbol: '📑', name: '书签标签', category: '文件操作' }, { symbol: '🔖', name: '书签', category: '文件操作' }, { symbol: '📎', name: '回形针', category: '文件操作' }, { symbol: '📏', name: '直尺', category: '文件操作' }, { symbol: '✂️', name: '剪刀', category: '文件操作' }, { symbol: '📌', name: '图钉', category: '文件操作' }, { symbol: '📍', name: '圆形图钉', category: '文件操作' }, { symbol: '✏️', name: '铅笔', category: '文件操作' }, { symbol: '✒️', name: '钢笔', category: '文件操作' }, { symbol: '📝', name: '记事本', category: '文件操作' }, { symbol: '💼', name: '公文包', category: '文件操作' }, { symbol: '📥', name: '收件箱', category: '文件操作' }, { symbol: '📤', name: '发件箱', category: '文件操作' }, { symbol: '📨', name: '来信', category: '文件操作' }, { symbol: '📩', name: '带箭头的信封', category: '文件操作' }, { symbol: '🗑️', name: '垃圾桶', category: '文件操作' }, { symbol: '🔒', name: '锁定', category: '文件操作' }, { symbol: '🔓', name: '解锁', category: '文件操作' }, { symbol: '🔍', name: '搜索', category: '文件操作' }, { symbol: '📋', name: '剪贴板', category: '文件操作' }, // 设计软件 { symbol: '🎨', name: '调色板', category: '设计软件' }, { symbol: '🖌️', name: '画笔', category: '设计软件' }, { symbol: '✏️', name: '铅笔', category: '设计软件' }, { symbol: '📐', name: '三角尺', category: '设计软件' }, { symbol: '📏', name: '直尺', category: '设计软件' }, { symbol: '⭕', name: '圆形', category: '设计软件' }, { symbol: '🔲', name: '方形', category: '设计软件' }, { symbol: '🔳', name: '白色方形', category: '设计软件' }, { symbol: '📍', name: '定位点', category: '设计软件' }, { symbol: '🔍', name: '放大', category: '设计软件' }, { symbol: '🔎', name: '缩小', category: '设计软件' }, { symbol: '🖼️', name: '图片框', category: '设计软件' }, { symbol: '🎞️', name: '图层', category: '设计软件' }, { symbol: '✂️', name: '剪刀', category: '设计软件' }, { symbol: '📋', name: '剪贴板', category: '设计软件' }, { symbol: '🔄', name: '旋转', category: '设计软件' }, { symbol: '↔️', name: '水平调整', category: '设计软件' }, { symbol: '↕️', name: '垂直调整', category: '设计软件' }, { symbol: '⚡', name: '效果', category: '设计软件' }, { symbol: '💫', name: '滤镜', category: '设计软件' }, { symbol: '🌈', name: '颜色', category: '设计软件' }, { symbol: '⚪', name: '白色', category: '设计软件' }, { symbol: '⚫', name: '黑色', category: '设计软件' }, { symbol: '💭', name: '画布', category: '设计软件' }, // 短视频 { symbol: '📱', name: '手机拍摄', category: '短视频' }, { symbol: '📹', name: '摄像机', category: '短视频' }, { symbol: '🎥', name: '电影机', category: '短视频' }, { symbol: '🎬', name: '场记板', category: '短视频' }, { symbol: '🎭', name: '表演', category: '短视频' }, { symbol: '🎵', name: '音乐', category: '短视频' }, { symbol: '🎶', name: '音符', category: '短视频' }, { symbol: '🎙️', name: '麦克风', category: '短视频' }, { symbol: '🎚️', name: '音量调节', category: '短视频' }, { symbol: '✂️', name: '剪辑', category: '短视频' }, { symbol: '💫', name: '特效', category: '短视频' }, { symbol: '🌟', name: '滤镜', category: '短视频' }, { symbol: '📺', name: '播放', category: '短视频' }, { symbol: '▶️', name: '开始', category: '短视频' }, { symbol: '⏸️', name: '暂停', category: '短视频' }, { symbol: '👥', name: '用户', category: '短视频' }, { symbol: '❤️', name: '点赞', category: '短视频' }, { symbol: '💬', name: '评论', category: '短视频' }, { symbol: '🔄', name: '转发', category: '短视频' }, { symbol: '📢', name: '推广', category: '短视频' }, { symbol: '🏷️', name: '标签', category: '短视频' }, { symbol: '#️⃣', name: '话题', category: '短视频' }, { symbol: '🔥', name: '热门', category: '短视频' }, { symbol: '📈', name: '趋势', category: '短视频' }, // 社交 { symbol: '💬', name: '聊天', category: '社交' }, { symbol: '💭', name: '对话框', category: '社交' }, { symbol: '👥', name: '用户群', category: '社交' }, { symbol: '👤', name: '个人', category: '社交' }, { symbol: '🤝', name: '握手', category: '社交' }, { symbol: '👋', name: '打招呼', category: '社交' }, { symbol: '❤️', name: '喜欢', category: '社交' }, { symbol: '👍', name: '点赞', category: '社交' }, { symbol: '🔔', name: '通知', category: '社交' }, { symbol: '📱', name: '手机', category: '社交' }, { symbol: '💻', name: '电脑', category: '社交' }, { symbol: '📲', name: '消息提醒', category: '社交' }, { symbol: '🔄', name: '刷新', category: '社交' }, { symbol: '🔍', name: '搜索', category: '社交' }, { symbol: '📷', name: '拍照', category: '社交' }, { symbol: '🎵', name: '音乐', category: '社交' }, { symbol: '🎮', name: '游戏', category: '社交' }, { symbol: '🎯', name: '发现', category: '社交' }, { symbol: '📍', name: '位置', category: '社交' }, { symbol: '🌐', name: '全球', category: '社交' }, { symbol: '🔐', name: '隐私', category: '社交' }, { symbol: '⭐', name: '收藏', category: '社交' }, { symbol: '🔗', name: '链接', category: '社交' }, { symbol: '📢', name: '公告', category: '社交' }, // 社交平台 { symbol: '💚', name: '微信', category: '社交平台' }, { symbol: '💙', name: 'QQ', category: '社交平台' }, { symbol: '💜', name: '抖音', category: '社交平台' }, { symbol: '❤️', name: '微博', category: '社交平台' }, { symbol: '🧡', name: '淘宝', category: '社交平台' }, { symbol: '💛', name: '支付宝', category: '社交平台' }, { symbol: '💗', name: '小红书', category: '社交平台' }, { symbol: '💌', name: '邮箱', category: '社交平台' }, { symbol: '📞', name: '电话', category: '社交平台' }, { symbol: '🌐', name: '浏览器', category: '社交平台' }, { symbol: '📱', name: 'APP', category: '社交平台' }, { symbol: '💻', name: '网页', category: '社交平台' } ]; // 初始化页面 function initializePage() { const emojiGrid = document.getElementById('emojiGrid'); const categoryFilter = document.getElementById('categoryFilter'); const searchInput = document.getElementById('searchInput'); const copyTooltip = document.getElementById('copyTooltip'); // 获取所有唯一的分类 const categories = ['全部', ...new Set(emojis.map(emoji => emoji.category))]; // 添加分类按钮 categories.forEach(category => { const button = document.createElement('button'); button.className = 'category-btn'; button.textContent = category; button.addEventListener('click', () => { document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active')); button.classList.add('active'); filterEmojis(); }); if (category === '全部') button.classList.add('active'); categoryFilter.appendChild(button); }); // 搜索输入事件 searchInput.addEventListener('input', filterEmojis); // 渲染 Emoji function renderEmojis(filteredEmojis) { emojiGrid.innerHTML = ''; filteredEmojis.forEach(emoji => { const div = document.createElement('div'); div.className = 'emoji-item'; div.innerHTML = ` <span class="emoji-symbol">${emoji.symbol}</span> <span class="emoji-name">${emoji.name}</span> `; div.addEventListener('click', () => { navigator.clipboard.writeText(emoji.symbol); copyTooltip.classList.add('show'); setTimeout(() => copyTooltip.classList.remove('show'), 2000); }); emojiGrid.appendChild(div); }); } // 筛选 Emoji function filterEmojis() { const searchText = searchInput.value.toLowerCase(); const selectedCategory = document.querySelector('.category-btn.active').textContent; const filteredEmojis = emojis.filter(emoji => { const matchesSearch = emoji.name.toLowerCase().includes(searchText); const matchesCategory = selectedCategory === '全部' || emoji.category === selectedCategory; return matchesSearch && matchesCategory; }); renderEmojis(filteredEmojis); } // 初始渲染 filterEmojis(); } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', initializePage); </script> </body> </html>
icon图标库
icons\icons.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Icons 图标库</title> <link rel="stylesheet" href="../styles/base.css"> <link rel="stylesheet" href="../styles/navbar.css"> <link rel="stylesheet" href="../styles/input.css"> <link rel="stylesheet" href="bootstrap-icons.css"> <style> .icon-container { padding: 20px; max-width: 1200px; margin: 0 auto; } .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; margin-top: 20px; } .icon-item { display: flex; flex-direction: column; align-items: center; padding: 16px; border: 1px solid var(--border-color-light); border-radius: 4px; cursor: pointer; transition: all 0.3s; } .icon-item:hover { background-color: var(--background-color-light); transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .icon-display { font-size: 24px; margin-bottom: 8px; color: var(--text-primary); } .icon-name { font-size: 12px; color: var(--text-regular); text-align: center; word-break: break-all; } .search-container { max-width: 500px; margin: 20px auto; } .category-filter { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; } .category-btn { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 16px; cursor: pointer; transition: all 0.3s; background: none; color: var(--text-regular); } .category-btn.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } .copy-tooltip { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 8px 16px; background-color: var(--text-primary); color: white; border-radius: 4px; display: none; z-index: 1000; } @media screen and (max-width: 768px) { .icon-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } } </style> </head> <body> <nav class="my-navbar"> <a href="../index.html" class="my-navbar__brand">My UI</a> <div class="my-navbar__search"> <input type="text" class="my-navbar__search-input" id="searchInput" placeholder="搜索图标..."> <i class="bi bi-search my-navbar__search-icon"></i> </div> </nav> <div class="icon-container"> <div class="category-filter" id="categoryFilter"> <!-- 分类按钮将通过 JavaScript 动态添加 --> </div> <div class="icon-grid" id="iconGrid"> <!-- 图标将通过 JavaScript 动态添加 --> </div> </div> <div class="copy-tooltip" id="copyTooltip">已复制到剪贴板！</div> <script> // 图标数据 const icons = [ // 基础图标 { name: 'check', category: '基础' }, { name: 'x', category: '基础' }, { name: 'plus', category: '基础' }, { name: 'dash', category: '基础' }, { name: 'asterisk', category: '基础' }, { name: 'question', category: '基础' }, { name: 'exclamation', category: '基础' }, { name: 'info', category: '基础' }, // 方向图标 { name: 'arrow-up', category: '方向' }, { name: 'arrow-down', category: '方向' }, { name: 'arrow-left', category: '方向' }, { name: 'arrow-right', category: '方向' }, { name: 'chevron-up', category: '方向' }, { name: 'chevron-down', category: '方向' }, { name: 'chevron-left', category: '方向' }, { name: 'chevron-right', category: '方向' }, // 文件图标 { name: 'file', category: '文件' }, { name: 'file-text', category: '文件' }, { name: 'file-pdf', category: '文件' }, { name: 'file-excel', category: '文件' }, { name: 'file-word', category: '文件' }, { name: 'file-zip', category: '文件' }, { name: 'folder', category: '文件' }, { name: 'folder-open', category: '文件' }, // 媒体图标 { name: 'image', category: '媒体' }, { name: 'camera', category: '媒体' }, { name: 'video', category: '媒体' }, { name: 'music-note', category: '媒体' }, { name: 'play', category: '媒体' }, { name: 'pause', category: '媒体' }, { name: 'stop', category: '媒体' }, { name: 'volume-up', category: '媒体' }, // 设备图标 { name: 'phone', category: '设备' }, { name: 'laptop', category: '设备' }, { name: 'tablet', category: '设备' }, { name: 'tv', category: '设备' }, { name: 'printer', category: '设备' }, { name: 'mouse', category: '设备' }, { name: 'keyboard', category: '设备' }, { name: 'bluetooth', category: '设备' }, // 社交图标 { name: 'wechat', category: '社交' }, { name: 'tencent-qq', category: '社交' }, { name: 'alipay', category: '社交' }, { name: 'facebook', category: '社交' }, { name: 'twitter', category: '社交' }, { name: 'instagram', category: '社交' }, { name: 'linkedin', category: '社交' }, { name: 'github', category: '社交' }, { name: 'youtube', category: '社交' }, { name: 'whatsapp', category: '社交' }, { name: 'telegram', category: '社交' }, { name: 'tiktok', category: '社交' }, // 用户界面 { name: 'search', category: 'UI' }, { name: 'gear', category: 'UI' }, { name: 'bell', category: 'UI' }, { name: 'bookmark', category: 'UI' }, { name: 'heart', category: 'UI' }, { name: 'star', category: 'UI' }, { name: 'trash', category: 'UI' }, { name: 'pencil', category: 'UI' }, // 天气图标 { name: 'sun', category: '天气' }, { name: 'moon', category: '天气' }, { name: 'cloud', category: '天气' }, { name: 'cloud-rain', category: '天气' }, { name: 'cloud-snow', category: '天气' }, { name: 'wind', category: '天气' }, { name: 'thermometer', category: '天气' }, { name: 'umbrella', category: '天气' }, // 商务图标 { name: 'cart', category: '商务' }, { name: 'bag', category: '商务' }, { name: 'credit-card', category: '商务' }, { name: 'cash', category: '商务' }, { name: 'gift', category: '商务' }, { name: 'tag', category: '商务' }, { name: 'receipt', category: '商务' }, { name: 'shop', category: '商务' } ]; // 添加办公图标 const officeIcons = [ { name: 'calendar', category: '办公' }, { name: 'calendar-event', category: '办公' }, { name: 'calendar-date', category: '办公' }, { name: 'clock', category: '办公' }, { name: 'alarm', category: '办公' }, { name: 'paperclip', category: '办公' }, { name: 'clipboard', category: '办公' }, { name: 'clipboard-check', category: '办公' }, { name: 'clipboard-data', category: '办公' }, { name: 'sticky', category: '办公' }, { name: 'pin', category: '办公' }, { name: 'pen', category: '办公' }, { name: 'marker', category: '办公' }, { name: 'highlighter', category: '办公' }, { name: 'scissors', category: '办公' }, { name: 'printer', category: '办公' }, { name: 'briefcase', category: '办公' }, { name: 'building', category: '办公' }, { name: 'telephone', category: '办公' }, { name: 'envelope', category: '办公' } ]; // 合并所有图标 icons.push(...officeIcons); // 添加软件操作图标 const softwareIcons = [ { name: 'window', category: '软件操作' }, { name: 'window-dock', category: '软件操作' }, { name: 'window-sidebar', category: '软件操作' }, { name: 'window-split', category: '软件操作' }, { name: 'arrows-fullscreen', category: '软件操作' }, { name: 'arrows-collapse', category: '软件操作' }, { name: 'arrows-expand', category: '软件操作' }, { name: 'download', category: '软件操作' }, { name: 'upload', category: '软件操作' }, { name: 'refresh', category: '软件操作' }, { name: 'arrow-repeat', category: '软件操作' }, { name: 'arrow-clockwise', category: '软件操作' }, { name: 'arrow-counterclockwise', category: '软件操作' }, { name: 'zoom-in', category: '软件操作' }, { name: 'zoom-out', category: '软件操作' }, { name: 'list', category: '软件操作' }, { name: 'grid', category: '软件操作' }, { name: 'columns', category: '软件操作' }, { name: 'filter', category: '软件操作' }, { name: 'sort-down', category: '软件操作' }, { name: 'sort-up', category: '软件操作' }, { name: 'sort-alpha-down', category: '软件操作' }, { name: 'sort-alpha-up', category: '软件操作' }, { name: 'sort-numeric-down', category: '软件操作' }, { name: 'sort-numeric-up', category: '软件操作' }, { name: 'plus-circle', category: '软件操作' }, { name: 'plus-square', category: '软件操作' }, { name: 'dash-circle', category: '软件操作' }, { name: 'dash-square', category: '软件操作' }, { name: 'x-circle', category: '软件操作' }, { name: 'x-square', category: '软件操作' }, { name: 'trash', category: '软件操作' }, { name: 'trash2', category: '软件操作' }, { name: 'pencil', category: '软件操作' }, { name: 'pencil-square', category: '软件操作' }, { name: 'save', category: '软件操作' }, { name: 'save2', category: '软件操作' }, { name: 'check-circle', category: '软件操作' }, { name: 'check-square', category: '软件操作' }, { name: 'eye', category: '软件操作' }, { name: 'eye-slash', category: '软件操作' }, { name: 'lock', category: '软件操作' }, { name: 'unlock', category: '软件操作' } ]; // 合并所有图标 icons.push(...softwareIcons); // 初始化页面 function initializePage() { const iconGrid = document.getElementById('iconGrid'); const categoryFilter = document.getElementById('categoryFilter'); const searchInput = document.getElementById('searchInput'); const copyTooltip = document.getElementById('copyTooltip'); // 获取所有唯一的分类 const categories = ['全部', ...new Set(icons.map(icon => icon.category))]; // 添加分类按钮 categories.forEach(category => { const button = document.createElement('button'); button.className = 'category-btn' + (category === '全部' ? ' active' : ''); button.textContent = category; button.addEventListener('click', () => filterByCategory(category)); categoryFilter.appendChild(button); }); // 渲染图标 function renderIcons(filteredIcons = icons) { iconGrid.innerHTML = ''; filteredIcons.forEach(icon => { const div = document.createElement('div'); div.className = 'icon-item'; div.innerHTML = ` <i class="bi bi-${icon.name} icon-display"></i> <span class="icon-name">bi-${icon.name}</span> `; div.addEventListener('click', () => copyIconName(`bi bi-${icon.name}`)); iconGrid.appendChild(div); }); } // 复制图标名称 function copyIconName(iconName) { navigator.clipboard.writeText(iconName).then(() => { copyTooltip.style.display = 'block'; setTimeout(() => { copyTooltip.style.display = 'none'; }, 2000); }); } // 分类过滤 function filterByCategory(category) { document.querySelectorAll('.category-btn').forEach(btn => { btn.classList.toggle('active', btn.textContent === category); }); const filteredIcons = category === '全部' ? icons : icons.filter(icon => icon.category === category); renderIcons(filteredIcons); } // 搜索功能 searchInput.addEventListener('input', (e) => { const searchTerm = e.target.value.toLowerCase(); const filteredIcons = icons.filter(icon => icon.name.toLowerCase().includes(searchTerm) || icon.category.toLowerCase().includes(searchTerm) ); renderIcons(filteredIcons); }); // 初始渲染 renderIcons(); } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', initializePage); </script> </body> </html>bootstrap-icons.css
主页
index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My UI Library</title> <link rel="stylesheet" href="styles/base.css"> <link rel="stylesheet" href="styles/button.css"> <link rel="stylesheet" href="styles/input.css"> <link rel="stylesheet" href="styles/card.css"> <link rel="stylesheet" href="styles/navbar.css"> <link rel="stylesheet" href="styles/footer.css"> <link rel="stylesheet" href="styles/table.css"> <link rel="stylesheet" href="styles/pagination.css"> <link rel="stylesheet" href="styles/datepicker.css"> <link rel="stylesheet" href="styles/number-input.css"> <link rel="stylesheet" href="styles/dialog.css"> <!-- 添加图标库 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"> <style> body { margin: 0; padding-top: 0; } .demo-section { padding: 20px; border-bottom: 1px solid var(--border-color); } .demo-section h2 { margin-bottom: 20px; color: var(--text-primary); } .demo-item { margin: 10px 0; } .demo-item > * { margin-right: 10px; margin-bottom: 10px; } .demo-card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 10px; } /* 卡片图片样式 */ .my-card__image { width: 100%; height: 200px; object-fit: cover; } /* 卡片列表样式 */ .my-card__list { list-style: none; padding: 0; margin: 0; } .my-card__list-item { padding: 12px 20px; border-bottom: 1px solid var(--border-color-light); } .my-card__list-item:last-child { border-bottom: none; } /* 卡片页脚样式 */ .my-card__footer { padding: 12px 20px; background-color: var(--background-color-light); border-top: 1px solid var(--border-color-light); } /* 卡片文本样式 */ .my-card__text { margin-bottom: 15px; line-height: 1.5; } .my-card__subtitle { color: var(--text-secondary); font-size: 14px; margin-top: 5px; } </style> </head> <body> <!-- 导航栏 --> <nav class="my-navbar"> <a href="#" class="my-navbar__brand">My UI</a> <ul class="my-navbar__nav"> <li class="my-navbar__item is-active">首页</li> <li class="my-navbar__item my-navbar__dropdown"> 组件 <div class="my-navbar__dropdown-menu"> <div class="my-navbar__dropdown-item"><a href="#buttons" style="text-decoration: none; color: inherit;">按钮</a></div> <div class="my-navbar__dropdown-item"><a href="#input" style="text-decoration: none; color: inherit;">输入框</a></div> <div class="my-navbar__dropdown-item"><a href="#card" style="text-decoration: none; color: inherit;">卡片</a></div> <div class="my-navbar__dropdown-item"><a href="#dialog" style="text-decoration: none; color: inherit;">弹出框</a></div> <div class="my-navbar__dropdown-item"><a href="#navbar" style="text-decoration: none; color: inherit;">导航栏</a></div> <div class="my-navbar__dropdown-item"><a href="#table" style="text-decoration: none; color: inherit;">表格</a></div> <div class="my-navbar__dropdown-item"><a href="#pagination" style="text-decoration: none; color: inherit;">分页</a></div> <div class="my-navbar__dropdown-item"><a href="#datepicker" style="text-decoration: none; color: inherit;">日期选择器</a></div> <div class="my-navbar__dropdown-item"><a href="#number-input" style="text-decoration: none; color: inherit;">数字输入框</a></div> <!-- 底部 --> <div class="my-navbar__dropdown-item"><a href="#footer" style="text-decoration: none; color: inherit;">底部</a></div> </div> </li> <li class="my-navbar__item"><a href="emoji.html" style="text-decoration: none; color: inherit;">🌞Emoji 图标库</a></li> <li class="my-navbar__item"><a href="icons/icons.html" style="text-decoration: none; color: inherit;">🎭Icons 图标库</a></li> <li class="my-navbar__item">关于</li> </ul> <div class="my-navbar__search"> <input type="text" class="my-navbar__search-input" placeholder="搜索..."> <i class="bi bi-search my-navbar__search-icon"></i> </div> <div class="my-navbar__right"> <div class="my-navbar__item"> <i class="bi bi-github"></i> </div> <div class="my-navbar__item my-navbar__dropdown"> <i class="bi bi-person-circle"></i> <div class="my-navbar__dropdown-menu"> <div class="my-navbar__dropdown-item">个人中心</div> <div class="my-navbar__dropdown-item">设置</div> <div class="my-navbar__dropdown-item" style="color: var(--danger-color);">退出登录</div> </div> </div> </div> <div class="my-navbar__toggle"> <i class="bi bi-list"></i> </div> </nav> <div class="demo-section" id="buttons"> <h2>按钮 Buttons</h2> <!-- 基础按钮 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">基础按钮</div> </div> <div class="my-card__body"> <div class="demo-item"> <button class="my-button">默认按钮</button> <button class="my-button my-button--primary">主要按钮</button> <button class="my-button my-button--success">成功按钮</button> <button class="my-button my-button--warning">警告按钮</button> <button class="my-button my-button--danger">危险按钮</button> </div> </div> </div> <!-- 按钮组 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">按钮组</div> </div> <div class="my-card__body"> <!-- 基础按钮组 --> <div class="demo-item"> <div class="my-button-group"> <button class="my-button">左边</button> <button class="my-button">中间</button> <button class="my-button">右边</button> </div> </div> <!-- 不同颜色的按钮组 --> <div class="demo-item"> <div class="my-button-group"> <button class="my-button my-button--primary">编辑</button> <button class="my-button my-button--success">保存</button> <button class="my-button my-button--danger">删除</button> </div> </div> <!-- 带图标的按钮组 --> <div class="demo-item"> <div class="my-button-group"> <button class="my-button"> <i class="bi bi-arrow-left"></i> 上一页 </button> <button class="my-button"> 下一页 <i class="bi bi-arrow-right"></i> </button> </div> </div> <!-- 工具栏按钮组 --> <div class="demo-item"> <div class="my-button-group"> <button class="my-button"><i class="bi bi-type-bold"></i></button> <button class="my-button"><i class="bi bi-type-italic"></i></button> <button class="my-button"><i class="bi bi-type-underline"></i></button> <button class="my-button"><i class="bi bi-type-strikethrough"></i></button> </div> <div class="my-button-group" style="margin-left: 10px;"> <button class="my-button"><i class="bi bi-text-left"></i></button> <button class="my-button"><i class="bi bi-text-center"></i></button> <button class="my-button"><i class="bi bi-text-right"></i></button> </div> </div> <!-- 不同尺寸的按钮组 --> <div class="demo-item"> <div class="my-button-group"> <button class="my-button my-button--large">大型</button> <button class="my-button my-button--large">按钮</button> </div> <div class="my-button-group" style="margin: 0 10px;"> <button class="my-button">默认</button> <button class="my-button">按钮</button> </div> <div class="my-button-group"> <button class="my-button my-button--small">小型</button> <button class="my-button my-button--small">按钮</button> </div> </div> <!-- 圆角按钮组 --> <div class="demo-item"> <div class="my-button-group my-button-group--round"> <button class="my-button my-button--primary">选项1</button> <button class="my-button my-button--primary">选项2</button> <button class="my-button my-button--primary">选项3</button> </div> </div> <!-- 垂直按钮组 --> <div class="demo-item"> <div class="my-button-group my-button-group--vertical"> <button class="my-button">上传<i class="bi bi-upload" style="margin-left: 5px;"></i></button> <button class="my-button">下载<i class="bi bi-download" style="margin-left: 5px;"></i></button> <button class="my-button">分享<i class="bi bi-share" style="margin-left: 5px;"></i></button> </div> </div> </div> </div> <!-- 其他按钮样式 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">其他按钮样式</div> </div> <div class="my-card__body"> <div class="demo-item"> <button class="my-button my-button--primary my-button--round">圆角按钮</button> <button class="my-button my-button--primary is-disabled">禁用按钮</button> </div> <div class="demo-item"> <button class="my-button my-button--primary my-button--large">大型按钮</button> <button class="my-button my-button--primary">默认按钮</button> <button class="my-button my-button--primary my-button--small">小型按钮</button> </div> </div> </div> </div> <div class="demo-section" id="input"> <h2>输入框 Input</h2> <div class="demo-item" style="max-width: 300px;"> <div class="my-input"> <input type="text" class="my-input__inner" placeholder="请输入内容"> </div> </div> <div class="demo-item" style="max-width: 300px;"> <div class="my-input is-disabled"> <input type="text" class="my-input__inner" placeholder="禁用状态" disabled> </div> </div> <div class="demo-item" style="max-width: 300px;"> <div class="my-input my-input--large"> <input type="text" class="my-input__inner" placeholder="大型输入框"> </div> </div> <div class="demo-item" style="max-width: 300px;"> <div class="my-input my-input--small"> <input type="text" class="my-input__inner" placeholder="小型输入框"> </div> </div> </div> <div class="demo-section" id="card"> <h2>卡片 Card</h2> <div class="demo-card-container"> <!-- 基础卡片 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">基础卡片</div> </div> <div class="my-card__body"> 这是一个基础卡片的内容区域。你可以在这里放置任何内容。 </div> </div> <!-- 简单卡片 --> <div class="my-card my-card--simple"> <div class="my-card__body"> 这是一个没有标题的简单卡片。适合展示简单的内容。 </div> </div> <!-- 无边框卡片 --> <div class="my-card my-card--borderless"> <div class="my-card__header"> <div class="my-card__title">无边框卡片</div> </div> <div class="my-card__body"> 这是一个无边框卡片，默认具有阴影效果。 </div> </div> <!-- 悬浮效果卡片 --> <div class="my-card my-card--hover"> <div class="my-card__header"> <div class="my-card__title">悬浮效果卡片</div> </div> <div class="my-card__body"> 鼠标悬浮时会有上浮动画效果和更明显的阴影。 </div> </div> <!-- 图文卡片 --> <div class="my-card my-card--hover"> <img src="https://picsum.photos/300/200" class="my-card__image" alt="卡片图片"> <div class="my-card__body"> <div class="my-card__title">图文卡片</div> <p class="my-card__text">这是一个包含图片和文字的卡片示例，适合用于展示产品或文章。</p> <div class="my-card__meta"> <span><i class="bi bi-eye"></i> 1,234</span> <span><i class="bi bi-heart"></i> 56</span> <span><i class="bi bi-chat"></i> 23</span> </div> </div> </div> <!-- 文章卡片 --> <div class="my-card my-card--hover"> <div class="my-card__body"> <div class="my-card__title">深入理解CSS布局</div> <div class="my-card__subtitle">前端开发 · 5分钟阅读</div> <p class="my-card__text">CSS布局是前端开发中最基础也是最重要的部分之一。本文将介绍常见的CSS布局方式，包括Flexbox和Grid布局...</p> <div class="my-card__meta"> <img src="https://picsum.photos/30/30" alt="作者头像" style="width: 30px; height: 30px; border-radius: 50%;"> <span>张三</span> <span>2024-01-20</span> </div> </div> </div> <!-- 商品卡片 --> <div class="my-card my-card--hover"> <div class="my-card__badge">热销</div> <img src="https://picsum.photos/300/300" class="my-card__image" alt="商品图片"> <div class="my-card__body"> <div class="my-card__title">商品名称</div> <div class="my-card__price"> <span class="my-card__price-current">¥299</span> <span class="my-card__price-original">¥399</span> </div> <div class="my-card__tags"> <span class="my-card__tag">包邮</span> <span class="my-card__tag">赠品</span> </div> <button class="my-button my-button--primary" style="width: 100%; margin-top: 10px;"> <i class="bi bi-cart-plus"></i> 加入购物车 </button> </div> </div> <!-- 用户资料卡片 --> <div class="my-card my-card--hover"> <div class="my-card__body" style="text-align: center;"> <img src="https://picsum.photos/100/100" alt="用户头像" style="width: 100px; height: 100px; border-radius: 50%; margin-bottom: 15px;"> <div class="my-card__title">张三</div> <div class="my-card__subtitle">前端开发工程师</div> <div class="my-card__stats" style="display: flex; justify-content: space-around; margin: 15px 0;"> <div> <div style="font-weight: bold;">256</div> <div style="color: #909399; font-size: 12px;">文章</div> </div> <div> <div style="font-weight: bold;">1.2k</div> <div style="color: #909399; font-size: 12px;">粉丝</div> </div> <div> <div style="font-weight: bold;">345</div> <div style="color: #909399; font-size: 12px;">关注</div> </div> </div> <button class="my-button my-button--primary" style="width: 100%;"> <i class="bi bi-person-plus"></i> 关注 </button> </div> </div> <!-- 任务卡片 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">待办任务</div> <button class="my-button my-button--small my-button--primary"> <i class="bi bi-plus"></i> 新建 </button> </div> <div class="my-card__body" style="padding: 0;"> <div style="padding: 15px; border-bottom: 1px solid var(--border-color-light);"> <div style="display: flex; align-items: center;"> <input type="checkbox" style="margin-right: 10px;"> <div style="flex: 1;"> <div>完成首页设计</div> <div style="font-size: 12px; color: #909399;">截止日期：2024-01-25</div> </div> <span class="my-button my-button--small my-button--success">进行中</span> </div> </div> <div style="padding: 15px; border-bottom: 1px solid var(--border-color-light);"> <div style="display: flex; align-items: center;"> <input type="checkbox" style="margin-right: 10px;"> <div style="flex: 1;"> <div>优化性能</div> <div style="font-size: 12px; color: #909399;">截止日期：2024-01-30</div> </div> <span class="my-button my-button--small my-button--warning">待处理</span> </div> </div> <div style="padding: 15px;"> <div style="display: flex; align-items: center;"> <input type="checkbox" style="margin-right: 10px;" checked disabled> <div style="flex: 1;"> <div style="text-decoration: line-through; color: #909399;">修复Bug</div> <div style="font-size: 12px; color: #909399;">完成时间：2024-01-15</div> </div> <span class="my-button my-button--small is-disabled">已完成</span> </div> </div> </div> </div> <!-- 统计卡片 --> <div class="my-card my-card--hover"> <div class="my-card__body"> <div style="display: flex; align-items: center; margin-bottom: 20px;"> <i class="bi bi-graph-up" style="font-size: 24px; color: var(--primary-color); margin-right: 10px;"></i> <div> <div class="my-card__title" style="margin: 0;">访问统计</div> <div class="my-card__subtitle">最近7天</div> </div> </div> <div style="font-size: 36px; font-weight: bold; color: var(--primary-color);">123,456</div> <div style="color: var(--success-color); margin: 10px 0;"> <i class="bi bi-arrow-up"></i> 15% 同比增长 </div> <div style="display: flex; justify-content: space-between; margin-top: 20px;"> <div> <div style="color: #909399;">日均访问</div> <div style="font-weight: bold;">17.6k</div> </div> <div> <div style="color: #909399;">转化率</div> <div style="font-weight: bold;">28%</div> </div> </div> </div> </div> <!-- 通知卡片 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">系统通知</div> <button class="my-button my-button--small"> <i class="bi bi-three-dots"></i> </button> </div> <div class="my-card__body" style="padding: 0;"> <div style="padding: 15px; border-bottom: 1px solid var(--border-color-light); display: flex; align-items: flex-start;"> <i class="bi bi-bell" style="color: var(--warning-color); margin-right: 10px; margin-top: 3px;"></i> <div> <div>系统将于今晚22:00进行升级维护</div> <div style="font-size: 12px; color: #909399;">2分钟前</div> </div> </div> <div style="padding: 15px; border-bottom: 1px solid var(--border-color-light); display: flex; align-items: flex-start;"> <i class="bi bi-shield-check" style="color: var(--success-color); margin-right: 10px; margin-top: 3px;"></i> <div> <div>您的账号已完成安全认证</div> <div style="font-size: 12px; color: #909399;">1小时前</div> </div> </div> <div style="padding: 15px; display: flex; align-items: flex-start;"> <i class="bi bi-gift" style="color: var(--primary-color); margin-right: 10px; margin-top: 3px;"></i> <div> <div>您收到一个新的礼物</div> <div style="font-size: 12px; color: #909399;">2小时前</div> </div> </div> </div> </div> </div> </div> <div class="demo-section"> <h2>Bootstrap风格卡片 Bootstrap-style Cards</h2> <div class="demo-card-container"> <!-- 图片卡片 --> <div class="my-card my-card--hover"> <img src="https://picsum.photos/300/200" class="my-card__image" alt="卡片图片"> <div class="my-card__body"> <div class="my-card__title">图片卡片</div> <div class="my-card__subtitle">副标题</div> <p class="my-card__text">这是一个带有图片的卡片示例。图片会自动适应卡片宽度，并保持适当的比例。</p> <button class="my-button my-button--primary">查看详情</button> </div> </div> <!-- 列表卡片 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">特色列表</div> </div> <ul class="my-card__list"> <li class="my-card__list-item">响应式布局设计</li> <li class="my-card__list-item">现代化的交互效果</li> <li class="my-card__list-item">统一的设计风格</li> <li class="my-card__list-item">丰富的组件类型</li> </ul> </div> <!-- 带页脚的卡片 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">项目介绍</div> </div> <div class="my-card__body"> <p class="my-card__text">这是一个模仿Element Plus设计的UI组件库，采用现代化的设计理念，提供了丰富的组件和样式选项。</p> <button class="my-button">取消</button> <button class="my-button my-button--primary">确定</button> </div> <div class="my-card__footer"> 最后更新于 2024-01-20 </div> </div> <!-- 引用卡片 --> <div class="my-card my-card--borderless"> <div class="my-card__body"> <blockquote style="margin: 0; padding-left: 1em; border-left: 4px solid var(--primary-color);"> <p class="my-card__text" style="font-style: italic;">"设计是一种创造性的过程，而不仅仅是装饰。"</p> </blockquote> <div class="my-card__subtitle" style="text-align: right;">— 设计师语录</div> </div> </div> <!-- 带标签的卡片 --> <div class="my-card"> <div class="my-card__header" style="display: flex; justify-content: space-between; align-items: center;"> <div class="my-card__title">产品动态</div> <span class="my-button my-button--small my-button--success">新功能</span> </div> <div class="my-card__body"> <p class="my-card__text">我们最新发布了卡片组件，支持多种样式和交互效果，让您的界面更加生动活泼。</p> <div style="display: flex; gap: 10px;"> <button class="my-button my-button--small">了解更多</button> <button class="my-button my-button--small my-button--primary">立即使用</button> </div> </div> </div> <!-- 统计卡片 --> <div class="my-card my-card--hover" style="text-align: center;"> <div class="my-card__body"> <div style="font-size: 36px; color: var(--primary-color); font-weight: bold;">1,234</div> <div class="my-card__subtitle">活跃用户</div> <div class="my-card__text" style="color: var(--success-color);">↑ 15% 增长</div> </div> </div> </div> </div> <div class="demo-section" id="navbar"> <h2>导航栏 Navbar</h2> <div class="my-card"> <div class="my-card__body"> <p class="my-card__text">导航栏支持以下特性：</p> <ul class="my-card__list"> <li class="my-card__list-item">响应式设计，在移动端自动切换为汉堡菜单</li> <li class="my-card__list-item">支持下拉菜单</li> <li class="my-card__list-item">可以添加品牌标识</li> <li class="my-card__list-item">支持右侧菜单</li> <li class="my-card__list-item">集成图标支持</li> </ul> </div> </div> </div> <!-- 添加表格部分 --> <div class="demo-section" id="table"> <h2>表格 Table</h2> <!-- 基础表格 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">基础表格</div> </div> <div class="my-card__body"> <table class="my-table"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>职位</th> <th>部门</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>前端工程师</td> <td>技术部</td> <td> <button class="my-button my-button--small my-button--primary">编辑</button> <button class="my-button my-button--small my-button--danger">删除</button> </td> </tr> <tr> <td>2</td> <td>李四</td> <td>UI设计师</td> <td>设计部</td> <td> <button class="my-button my-button--small my-button--primary">编辑</button> <button class="my-button my-button--small my-button--danger">删除</button> </td> </tr> <tr> <td>3</td> <td>王五</td> <td>产品经理</td> <td>产品部</td> <td> <button class="my-button my-button--small my-button--primary">编辑</button> <button class="my-button my-button--small my-button--danger">删除</button> </td> </tr> </tbody> </table> </div> </div> <!-- 斑马纹表格 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">斑马纹表格</div> </div> <div class="my-card__body"> <table class="my-table my-table--striped"> <thead> <tr> <th>订单号</th> <th>商品名称</th> <th>价格</th> <th>状态</th> <th>下单时间</th> </tr> </thead> <tbody> <tr class="my-table__row--success"> <td>2024010101</td> <td>商品A</td> <td>¥199.00</td> <td>已完成</td> <td>2024-01-01 10:00</td> </tr> <tr class="my-table__row--warning"> <td>2024010102</td> <td>商品B</td> <td>¥299.00</td> <td>处理中</td> <td>2024-01-01 11:00</td> </tr> <tr class="my-table__row--danger"> <td>2024010103</td> <td>商品C</td> <td>¥399.00</td> <td>已取消</td> <td>2024-01-01 12:00</td> </tr> <tr> <td>2024010104</td> <td>商品D</td> <td>¥499.00</td> <td>待付款</td> <td>2024-01-01 13:00</td> </tr> </tbody> </table> </div> </div> <!-- 带边框的表格 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">带边框的表格</div> </div> <div class="my-card__body"> <table class="my-table my-table--bordered"> <thead> <tr> <th>项目</th> <th>完成度</th> <th>负责人</th> <th>截止日期</th> </tr> </thead> <tbody> <tr> <td>UI设计</td> <td>90%</td> <td>张三</td> <td>2024-02-01</td> </tr> <tr> <td>前端开发</td> <td>70%</td> <td>李四</td> <td>2024-02-15</td> </tr> <tr> <td>后端开发</td> <td>60%</td> <td>王五</td> <td>2024-03-01</td> </tr> </tbody> </table> </div> </div> <!-- 固定表头 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">固定表头</div> </div> <div class="my-card__body"> <div class="my-table-wrapper"> <table class="my-table my-table--fixed-header"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>城市</th> </tr> </thead> <tbody> <!-- 重复多行数据以展示滚动效果 --> <tr> <td>1</td> <td>张三</td> <td>25</td> <td>男</td> <td>北京</td> </tr> <tr> <td>2</td> <td>李四</td> <td>28</td> <td>女</td> <td>上海</td> </tr> <tr> <td>3</td> <td>王五</td> <td>30</td> <td>男</td> <td>广州</td> </tr> <tr> <td>4</td> <td>赵六</td> <td>22</td> <td>女</td> <td>深圳</td> </tr> <tr> <td>5</td> <td>钱七</td> <td>35</td> <td>男</td> <td>杭州</td> </tr> <tr> <td>6</td> <td>孙八</td> <td>27</td> <td>女</td> <td>成都</td> </tr> <tr> <td>7</td> <td>周九</td> <td>29</td> <td>男</td> <td>武汉</td> </tr> <tr> <td>8</td> <td>吴十</td> <td>31</td> <td>女</td> <td>南京</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- 添加分页部分 --> <div class="demo-section" id="pagination"> <h2>分页 Pagination</h2> <!-- 基础分页 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">基础分页</div> </div> <div class="my-card__body"> <div class="my-pagination"> <div class="my-pagination__item my-pagination__item--prev is-disabled"> <i class="bi bi-chevron-left"></i> </div> <div class="my-pagination__item is-active">1</div> <div class="my-pagination__item">2</div> <div class="my-pagination__item">3</div> <div class="my-pagination__item">4</div> <div class="my-pagination__item">5</div> <div class="my-pagination__item my-pagination__item--next"> <i class="bi bi-chevron-right"></i> </div> </div> </div> </div> <!-- 带省略号的分页 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">带省略号的分页</div> </div> <div class="my-card__body"> <div class="my-pagination"> <div class="my-pagination__item my-pagination__item--prev"> <i class="bi bi-chevron-left"></i> </div> <div class="my-pagination__item">1</div> <div class="my-pagination__item my-pagination__item--more">...</div> <div class="my-pagination__item">4</div> <div class="my-pagination__item is-active">5</div> <div class="my-pagination__item">6</div> <div class="my-pagination__item my-pagination__item--more">...</div> <div class="my-pagination__item">10</div> <div class="my-pagination__item my-pagination__item--next"> <i class="bi bi-chevron-right"></i> </div> </div> </div> </div> <!-- 禁用状态 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">禁用状态</div> </div> <div class="my-card__body"> <div class="my-pagination"> <div class="my-pagination__item my-pagination__item--prev is-disabled"> <i class="bi bi-chevron-left"></i> </div> <div class="my-pagination__item is-disabled">1</div> <div class="my-pagination__item is-disabled">2</div> <div class="my-pagination__item is-disabled">3</div> <div class="my-pagination__item my-pagination__item--next is-disabled"> <i class="bi bi-chevron-right"></i> </div> </div> </div> </div> </div> <!-- 添加日期选择器部分 --> <div class="demo-section" id="datepicker"> <h2>日期选择器 DatePicker</h2> <!-- 基础日期选择器 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">基础日期选择器</div> </div> <div class="my-card__body"> <div class="my-datepicker"> <input type="text" class="my-datepicker__input" placeholder="选择日期" readonly> <i class="bi bi-calendar3 my-datepicker__icon"></i> </div> <div class="my-datepicker__panel" style="position: static; margin-top: 20px;"> <div class="my-datepicker__header"> <div class="my-datepicker__arrow"> <i class="bi bi-chevron-left"></i> </div> <div class="my-datepicker__current-month">2024年1月</div> <div class="my-datepicker__arrow"> <i class="bi bi-chevron-right"></i> </div> </div> <div class="my-datepicker__weekdays"> <div class="my-datepicker__weekday">日</div> <div class="my-datepicker__weekday">一</div> <div class="my-datepicker__weekday">二</div> <div class="my-datepicker__weekday">三</div> <div class="my-datepicker__weekday">四</div> <div class="my-datepicker__weekday">五</div> <div class="my-datepicker__weekday">六</div> </div> <div class="my-datepicker__days"> <div class="my-datepicker__day is-other-month">31</div> <div class="my-datepicker__day">1</div> <div class="my-datepicker__day">2</div> <div class="my-datepicker__day">3</div> <div class="my-datepicker__day">4</div> <div class="my-datepicker__day">5</div> <div class="my-datepicker__day">6</div> <div class="my-datepicker__day">7</div> <div class="my-datepicker__day">8</div> <div class="my-datepicker__day">9</div> <div class="my-datepicker__day is-today">10</div> <div class="my-datepicker__day">11</div> <div class="my-datepicker__day">12</div> <div class="my-datepicker__day">13</div> <div class="my-datepicker__day">14</div> <div class="my-datepicker__day is-selected">15</div> <div class="my-datepicker__day">16</div> <div class="my-datepicker__day">17</div> <div class="my-datepicker__day">18</div> <div class="my-datepicker__day">19</div> <div class="my-datepicker__day">20</div> <div class="my-datepicker__day">21</div> <div class="my-datepicker__day">22</div> <div class="my-datepicker__day">23</div> <div class="my-datepicker__day">24</div> <div class="my-datepicker__day">25</div> <div class="my-datepicker__day">26</div> <div class="my-datepicker__day">27</div> <div class="my-datepicker__day">28</div> <div class="my-datepicker__day">29</div> <div class="my-datepicker__day">30</div> <div class="my-datepicker__day">31</div> <div class="my-datepicker__day is-other-month">1</div> <div class="my-datepicker__day is-other-month">2</div> <div class="my-datepicker__day is-other-month">3</div> </div> <div class="my-datepicker__footer"> <button class="my-datepicker__btn">取消</button> <button class="my-datepicker__btn my-datepicker__btn--primary">确定</button> </div> </div> </div> </div> <!-- 禁用状态 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">禁用状态</div> </div> <div class="my-card__body"> <div class="my-datepicker"> <input type="text" class="my-datepicker__input" placeholder="选择日期" readonly disabled> <i class="bi bi-calendar3 my-datepicker__icon"></i> </div> </div> </div> </div> <!-- 添加数字输入框部分 --> <div class="demo-section" id="number-input"> <h2>数字输入框 NumberInput</h2> <!-- 基础数字输入框 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">基础数字输入框</div> </div> <div class="my-card__body"> <div class="my-number-input"> <input type="number" class="my-number-input__inner" value="1" min="0" max="100"> <div class="my-number-input__controls"> <div class="my-number-input__up"> <i class="bi bi-chevron-up my-number-input__icon"></i> </div> <div class="my-number-input__down"> <i class="bi bi-chevron-down my-number-input__icon"></i> </div> </div> </div> </div> </div> <!-- 禁用状态 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">禁用状态</div> </div> <div class="my-card__body"> <div class="my-number-input is-disabled"> <input type="number" class="my-number-input__inner" value="1" disabled> <div class="my-number-input__controls"> <div class="my-number-input__up"> <i class="bi bi-chevron-up my-number-input__icon"></i> </div> <div class="my-number-input__down"> <i class="bi bi-chevron-down my-number-input__icon"></i> </div> </div> </div> </div> </div> <!-- 不同尺寸 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">不同尺寸</div> </div> <div class="my-card__body"> <div style="display: flex; gap: 20px; align-items: center;"> <div class="my-number-input my-number-input--large"> <input type="number" class="my-number-input__inner" value="1"> <div class="my-number-input__controls"> <div class="my-number-input__up"> <i class="bi bi-chevron-up my-number-input__icon"></i> </div> <div class="my-number-input__down"> <i class="bi bi-chevron-down my-number-input__icon"></i> </div> </div> </div> <div class="my-number-input"> <input type="number" class="my-number-input__inner" value="1"> <div class="my-number-input__controls"> <div class="my-number-input__up"> <i class="bi bi-chevron-up my-number-input__icon"></i> </div> <div class="my-number-input__down"> <i class="bi bi-chevron-down my-number-input__icon"></i> </div> </div> </div> <div class="my-number-input my-number-input--small"> <input type="number" class="my-number-input__inner" value="1"> <div class="my-number-input__controls"> <div class="my-number-input__up"> <i class="bi bi-chevron-up my-number-input__icon"></i> </div> <div class="my-number-input__down"> <i class="bi bi-chevron-down my-number-input__icon"></i> </div> </div> </div> </div> </div> </div> </div> <!-- 添加弹出框部分 --> <div class="demo-section" id="dialog"> <h2>弹出框 Dialog</h2> <!-- 基础弹出框 --> <div class="my-card"> <div class="my-card__header"> <div class="my-card__title">基础弹出框</div> </div> <div class="my-card__body"> <button class="my-button my-button--primary" onclick="document.getElementById('basicDialog').style.display='flex'"> 打开弹出框 </button> <!-- 基础弹出框 --> <div class="my-dialog__wrapper" id="basicDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('basicDialog').style.display='none'"></div> <div class="my-dialog"> <div class="my-dialog__header"> <span class="my-dialog__title">提示</span> <button class="my-dialog__close" onclick="document.getElementById('basicDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> 这是一个基础弹出框的内容区域。 </div> <div class="my-dialog__footer"> <button class="my-button" onclick="document.getElementById('basicDialog').style.display='none'">取消</button> <button class="my-button my-button--primary" onclick="document.getElementById('basicDialog').style.display='none'">确定</button> </div> </div> </div> </div> </div> <!-- 不同尺寸 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">不同尺寸</div> </div> <div class="my-card__body"> <button class="my-button" onclick="document.getElementById('smallDialog').style.display='flex'"> 小型弹出框 </button> <button class="my-button" onclick="document.getElementById('largeDialog').style.display='flex'" style="margin-left: 10px;"> 大型弹出框 </button> <!-- 小型弹出框 --> <div class="my-dialog__wrapper" id="smallDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('smallDialog').style.display='none'"></div> <div class="my-dialog my-dialog--small"> <div class="my-dialog__header"> <span class="my-dialog__title">小型弹出框</span> <button class="my-dialog__close" onclick="document.getElementById('smallDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> 这是一个小型弹出框的内容。 </div> <div class="my-dialog__footer"> <button class="my-button" onclick="document.getElementById('smallDialog').style.display='none'">取消</button> <button class="my-button my-button--primary" onclick="document.getElementById('smallDialog').style.display='none'">确定</button> </div> </div> </div> <!-- 大型弹出框 --> <div class="my-dialog__wrapper" id="largeDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('largeDialog').style.display='none'"></div> <div class="my-dialog my-dialog--large"> <div class="my-dialog__header"> <span class="my-dialog__title">大型弹出框</span> <button class="my-dialog__close" onclick="document.getElementById('largeDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> <p>这是一个大型弹出框的内容区域。可以放置更多的内容。</p> <p>比如：表单、图表、列表等。</p> <p>弹出框会自动调整高度来适应内容。</p> </div> <div class="my-dialog__footer"> <button class="my-button" onclick="document.getElementById('largeDialog').style.display='none'">取消</button> <button class="my-button my-button--primary" onclick="document.getElementById('largeDialog').style.display='none'">确定</button> </div> </div> </div> </div> </div> <!-- 自定义内容 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">自定义内容</div> </div> <div class="my-card__body"> <button class="my-button my-button--primary" onclick="document.getElementById('customDialog').style.display='flex'"> 打开表单弹出框 </button> <!-- 自定义内容弹出框 --> <div class="my-dialog__wrapper" id="customDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('customDialog').style.display='none'"></div> <div class="my-dialog"> <div class="my-dialog__header"> <span class="my-dialog__title">用户信息</span> <button class="my-dialog__close" onclick="document.getElementById('customDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> <div style="margin-bottom: 20px;"> <label style="display: block; margin-bottom: 8px;">用户名</label> <div class="my-input"> <input type="text" class="my-input__inner" placeholder="请输入用户名"> </div> </div> <div style="margin-bottom: 20px;"> <label style="display: block; margin-bottom: 8px;">邮箱</label> <div class="my-input"> <input type="email" class="my-input__inner" placeholder="请输入邮箱"> </div> </div> <div> <label style="display: block; margin-bottom: 8px;">年龄</label> <div class="my-number-input"> <input type="number" class="my-number-input__inner" value="18" min="1" max="100"> <div class="my-number-input__controls"> <div class="my-number-input__up"> <i class="bi bi-chevron-up my-number-input__icon"></i> </div> <div class="my-number-input__down"> <i class="bi bi-chevron-down my-number-input__icon"></i> </div> </div> </div> </div> </div> <div class="my-dialog__footer"> <button class="my-button" onclick="document.getElementById('customDialog').style.display='none'">取消</button> <button class="my-button my-button--primary" onclick="document.getElementById('customDialog').style.display='none'">提交</button> </div> </div> </div> </div> </div> <!-- 不同方向的弹出框 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">不同方向的弹出框</div> </div> <div class="my-card__body"> <button class="my-button" onclick="document.getElementById('topDialog').style.display='flex'"> 顶部弹出 </button> <button class="my-button" onclick="document.getElementById('bottomDialog').style.display='flex'" style="margin-left: 10px;"> 底部弹出 </button> <button class="my-button" onclick="document.getElementById('leftDialog').style.display='flex'" style="margin-left: 10px;"> 左侧弹出 </button> <button class="my-button" onclick="document.getElementById('rightDialog').style.display='flex'" style="margin-left: 10px;"> 右侧弹出 </button> <!-- 顶部弹出框 --> <div class="my-dialog__wrapper" id="topDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('topDialog').style.display='none'"></div> <div class="my-dialog my-dialog--top"> <div class="my-dialog__header"> <span class="my-dialog__title">顶部弹出框</span> <button class="my-dialog__close" onclick="document.getElementById('topDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> 这是一个从顶部弹出的对话框。 </div> <div class="my-dialog__footer"> <button class="my-button" onclick="document.getElementById('topDialog').style.display='none'">关闭</button> </div> </div> </div> <!-- 底部弹出框 --> <div class="my-dialog__wrapper" id="bottomDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('bottomDialog').style.display='none'"></div> <div class="my-dialog my-dialog--bottom"> <div class="my-dialog__header"> <span class="my-dialog__title">底部弹出框</span> <button class="my-dialog__close" onclick="document.getElementById('bottomDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> 这是一个从底部弹出的对话框。 </div> <div class="my-dialog__footer"> <button class="my-button" onclick="document.getElementById('bottomDialog').style.display='none'">关闭</button> </div> </div> </div> <!-- 左侧弹出框 --> <div class="my-dialog__wrapper" id="leftDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('leftDialog').style.display='none'"></div> <div class="my-dialog my-dialog--left"> <div class="my-dialog__header"> <span class="my-dialog__title">左侧弹出框</span> <button class="my-dialog__close" onclick="document.getElementById('leftDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> 这是一个从左侧弹出的对话框。 <br><br> 左右侧弹出框默认占据整个视口高度，适合展示导航菜单或详细信息。 </div> <div class="my-dialog__footer"> <button class="my-button" onclick="document.getElementById('leftDialog').style.display='none'">关闭</button> </div> </div> </div> <!-- 右侧弹出框 --> <div class="my-dialog__wrapper" id="rightDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('rightDialog').style.display='none'"></div> <div class="my-dialog my-dialog--right"> <div class="my-dialog__header"> <span class="my-dialog__title">右侧弹出框</span> <button class="my-dialog__close" onclick="document.getElementById('rightDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> 这是一个从右侧弹出的对话框。 <br><br> 左右侧弹出框默认占据整个视口高度，适合展示导航菜单或详细信息。 </div> <div class="my-dialog__footer"> <button class="my-button" onclick="document.getElementById('rightDialog').style.display='none'">关闭</button> </div> </div> </div> </div> </div> <!-- 登录弹窗示例 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">登录弹窗</div> </div> <div class="my-card__body"> <button class="my-button my-button--primary" onclick="document.getElementById('loginDialog').style.display='flex'"> 打开登录弹窗 </button> <!-- 登录弹窗 --> <div class="my-dialog__wrapper" id="loginDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('loginDialog').style.display='none'"></div> <div class="my-dialog my-dialog--small"> <div class="my-dialog__header"> <span class="my-dialog__title">用户登录</span> <button class="my-dialog__close" onclick="document.getElementById('loginDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> <div style="text-align: center; margin-bottom: 20px;"> <i class="bi bi-person-circle" style="font-size: 48px; color: var(--primary-color);"></i> </div> <div style="margin-bottom: 20px;"> <label style="display: block; margin-bottom: 8px;">用户名</label> <div class="my-input"> <input type="text" class="my-input__inner" placeholder="请输入用户名"> </div> </div> <div style="margin-bottom: 20px;"> <label style="display: block; margin-bottom: 8px;">密码</label> <div class="my-input"> <input type="password" class="my-input__inner" placeholder="请输入密码"> </div> </div> <div style="display: flex; justify-content: space-between; margin-bottom: 20px;"> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="checkbox" style="margin-right: 8px;"> 记住我 </label> <a href="#" style="color: var(--primary-color); text-decoration: none;">忘记密码？</a> </div> <button class="my-button my-button--primary" style="width: 100%; margin-bottom: 15px;">登录</button> <div style="text-align: center;"> <span style="color: #909399;">还没有账号？</span> <a href="#" style="color: var(--primary-color); text-decoration: none;">立即注册</a> </div> <div style="margin-top: 20px; text-align: center;"> <div style="color: #909399; margin-bottom: 10px;">其他登录方式</div> <div style="display: flex; justify-content: center; gap: 20px;"> <a href="#" style="color: #1DA1F2; font-size: 24px;"><i class="bi bi-twitter"></i></a> <a href="#" style="color: #4267B2; font-size: 24px;"><i class="bi bi-facebook"></i></a> <a href="#" style="color: #25D366; font-size: 24px;"><i class="bi bi-wechat"></i></a> <a href="#" style="color: #DB4437; font-size: 24px;"><i class="bi bi-google"></i></a> </div> </div> </div> </div> </div> </div> </div> <!-- 注册弹窗示例 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">注册弹窗</div> </div> <div class="my-card__body"> <button class="my-button my-button--primary" onclick="document.getElementById('registerDialog').style.display='flex'"> 打开注册弹窗 </button> <!-- 注册弹窗 --> <div class="my-dialog__wrapper" id="registerDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('registerDialog').style.display='none'"></div> <div class="my-dialog"> <div class="my-dialog__header"> <span class="my-dialog__title">用户注册</span> <button class="my-dialog__close" onclick="document.getElementById('registerDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;"> <div> <label style="display: block; margin-bottom: 8px;">姓氏</label> <div class="my-input"> <input type="text" class="my-input__inner" placeholder="请输入姓氏"> </div> </div> <div> <label style="display: block; margin-bottom: 8px;">名字</label> <div class="my-input"> <input type="text" class="my-input__inner" placeholder="请输入名字"> </div> </div> </div> <div style="margin: 20px 0;"> <label style="display: block; margin-bottom: 8px;">电子邮箱</label> <div class="my-input"> <input type="email" class="my-input__inner" placeholder="请输入电子邮箱"> </div> </div> <div style="margin-bottom: 20px;"> <label style="display: block; margin-bottom: 8px;">手机号码</label> <div class="my-input"> <input type="tel" class="my-input__inner" placeholder="请输入手机号码"> </div> </div> <div style="margin-bottom: 20px;"> <label style="display: block; margin-bottom: 8px;">设置密码</label> <div class="my-input"> <input type="password" class="my-input__inner" placeholder="请设置密码"> </div> </div> <div style="margin-bottom: 20px;"> <label style="display: block; margin-bottom: 8px;">确认密码</label> <div class="my-input"> <input type="password" class="my-input__inner" placeholder="请确认密码"> </div> </div> <div style="margin-bottom: 20px;"> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="checkbox" style="margin-right: 8px;"> 我已阅读并同意<a href="#" style="color: var(--primary-color); text-decoration: none; margin: 0 4px;">服务条款</a>和<a href="#" style="color: var(--primary-color); text-decoration: none; margin: 0 4px;">隐私政策</a> </label> </div> <button class="my-button my-button--primary" style="width: 100%;">注册</button> <div style="text-align: center; margin-top: 15px;"> <span style="color: #909399;">已有账号？</span> <a href="#" style="color: var(--primary-color); text-decoration: none;">立即登录</a> </div> </div> </div> </div> </div> </div> <!-- 找回密码弹窗示例 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">找回密码弹窗</div> </div> <div class="my-card__body"> <button class="my-button my-button--primary" onclick="document.getElementById('resetPasswordDialog').style.display='flex'"> 打开找回密码弹窗 </button> <!-- 找回密码弹窗 --> <div class="my-dialog__wrapper" id="resetPasswordDialog" style="display: none;"> <div class="my-dialog__mask" onclick="document.getElementById('resetPasswordDialog').style.display='none'"></div> <div class="my-dialog my-dialog--small"> <div class="my-dialog__header"> <span class="my-dialog__title">找回密码</span> <button class="my-dialog__close" onclick="document.getElementById('resetPasswordDialog').style.display='none'"> <i class="bi bi-x"></i> </button> </div> <div class="my-dialog__body"> <div style="text-align: center; margin-bottom: 20px;"> <i class="bi bi-shield-lock" style="font-size: 48px; color: var(--primary-color);"></i> </div> <p style="text-align: center; color: #606266; margin-bottom: 20px;"> 请输入您注册时使用的电子邮箱，我们将向该邮箱发送重置密码的链接。 </p> <div style="margin-bottom: 20px;"> <label style="display: block; margin-bottom: 8px;">电子邮箱</label> <div class="my-input"> <input type="email" class="my-input__inner" placeholder="请输入电子邮箱"> </div> </div> <button class="my-button my-button--primary" style="width: 100%; margin-bottom: 15px;">发送重置链接</button> <div style="text-align: center;"> <a href="#" style="color: var(--primary-color); text-decoration: none;">返回登录</a> </div> </div> </div> </div> </div> </div> </div> <!-- 添加底部 --> <footer class="my-footer" id="footer"> <div class="my-footer__container"> <div class="my-footer__section"> <h3 class="my-footer__title">关于我们</h3> <ul class="my-footer__list"> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-building my-footer__icon"></i> 公司简介 </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-people my-footer__icon"></i> 团队介绍 </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-briefcase my-footer__icon"></i> 工作机会 </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-newspaper my-footer__icon"></i> 新闻动态 </a> </li> </ul> </div> <div class="my-footer__section"> <h3 class="my-footer__title">帮助中心</h3> <ul class="my-footer__list"> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-book my-footer__icon"></i> 使用文档 </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-question-circle my-footer__icon"></i> 常见问题 </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-chat-dots my-footer__icon"></i> 技术支持 </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-shield-check my-footer__icon"></i> 安全中心 </a> </li> </ul> </div> <div class="my-footer__section"> <h3 class="my-footer__title">开发者</h3> <ul class="my-footer__list"> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-code-square my-footer__icon"></i> API文档 </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-download my-footer__icon"></i> 下载中心 </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-github my-footer__icon"></i> GitHub </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-bug my-footer__icon"></i> 问题反馈 </a> </li> </ul> </div> <div class="my-footer__section"> <h3 class="my-footer__title">联系我们</h3> <ul class="my-footer__list"> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-envelope my-footer__icon"></i> contact@myui.com </a> </li> <li class="my-footer__item"> <a href="#" class="my-footer__link"> <i class="bi bi-telephone my-footer__icon"></i> 400-123-4567 </a> </li> </ul> <div class="my-footer__social" style="margin-top: 20px;"> <a href="#" class="my-footer__social-link"> <i class="bi bi-twitter"></i> </a> <a href="#" class="my-footer__social-link"> <i class="bi bi-facebook"></i> </a> <a href="#" class="my-footer__social-link"> <i class="bi bi-linkedin"></i> </a> <a href="#" class="my-footer__social-link"> <i class="bi bi-instagram"></i> </a> </div> </div> </div> <div class="my-footer__bottom"> <p>© 2024 My UI Library. All rights reserved.</p> </div> </footer> <script> // 处理导航栏响应式切换 document.querySelector('.my-navbar__toggle').addEventListener('click', function() { document.querySelector('.my-navbar').classList.toggle('is-active'); }); // 点击导航项时关闭移动端菜单 document.querySelectorAll('.my-navbar__item').forEach(item => { item.addEventListener('click', function() { if (window.innerWidth <= 768) { document.querySelector('.my-navbar').classList.remove('is-active'); } }); }); </script> <div class="demo-section"> <h2>左右布局卡片 Horizontal Cards</h2> <div class="demo-card-container" style="grid-template-columns: 1fr;"> <!-- 基础左右布局卡片 --> <div class="my-card" style="display: flex; align-items: stretch;"> <img src="https://picsum.photos/300/300" style="width: 300px; height: auto; object-fit: cover;" alt="卡片图片"> <div style="flex: 1; display: flex; flex-direction: column;"> <div class="my-card__header"> <div class="my-card__title">左右布局卡片</div> <div class="my-card__subtitle">适合新闻、博客等内容展示</div> </div> <div class="my-card__body" style="flex: 1;"> <p class="my-card__text">这是一个基础的左右布局卡片示例。左侧是图片，右侧是内容。这种布局特别适合展示新闻、博客文章、产品介绍等内容。</p> <div style="margin-top: auto;"> <button class="my-button my-button--primary"></button> </div> </div> </div> </div> <!-- 新闻类左右布局卡片 --> <div class="my-card" style="display: flex; align-items: stretch; margin-top: 20px;"> <img src="https://picsum.photos/400/300" style="width: 400px; height: auto; object-fit: cover;" alt="新闻图片"> <div style="flex: 1; display: flex; flex-direction: column;"> <div class="my-card__body" style="flex: 1; display: flex; flex-direction: column;"> <div> <span class="my-button my-button--small my-button--primary" style="margin-bottom: 10px;">科技</span> <div class="my-card__title" style="font-size: 24px; margin: 10px 0;">人工智能技术最新突破：自然语言处理能力大幅提升</div> <div class="my-card__subtitle" style="margin-bottom: 15px;">发布于 2024-01-20 · 阅读时间 8分钟</div> <p class="my-card__text">最新研究表明，通过深度学习和神经网络的创新应用，AI在自然语言处理领域取得重大突破。这项技术将为人机交互带来革命性的改变...</p> </div> <div style="margin-top: auto; display: flex; justify-content: space-between; align-items: center;"> <div style="display: flex; align-items: center;"> <img src="https://picsum.photos/40/40" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;" alt="作者头像"> <div> <div style="font-weight: bold;">张三</div> <div style="font-size: 12px; color: var(--text-secondary);">AI研究员</div> </div> </div> <div> <button class="my-button my-button--small"> <i class="bi bi-bookmark"></i> 收藏 </button> <button class="my-button my-button--small"> <i class="bi bi-share"></i> 分享 </button> </div> </div> </div> </div> </div> <!-- 产品介绍左右布局卡片 --> <div class="my-card" style="display: flex; align-items: stretch; margin-top: 20px;"> <div style="flex: 1; display: flex; flex-direction: column; padding: 30px;"> <div style="margin-bottom: 20px;"> <span class="my-button my-button--small my-button--warning">限时特惠</span> </div> <div class="my-card__title" style="font-size: 28px; margin-bottom: 10px;">新一代智能手表</div> <div class="my-card__subtitle" style="font-size: 16px; margin-bottom: 20px;">科技与时尚的完美结合</div> <p class="my-card__text">这款智能手表采用最新的健康监测技术，支持心率、血氧、睡眠等多项指标监测。超长续航能力，一次充电可使用7天。</p> <div class="my-card__price" style="margin: 20px 0;"> <span style="font-size: 32px; color: var(--danger-color); font-weight: bold;">¥1,999</span> <span style="text-decoration: line-through; color: var(--text-secondary); margin-left: 10px;">¥2,499</span> </div> <div style="margin-top: auto;"> <button class="my-button my-button--large my-button--primary" style="margin-right: 10px;"> <i class="bi bi-cart-plus"></i> 立即购买 </button> <button class="my-button my-button--large"> <i class="bi bi-heart"></i> 加入收藏 </button> </div> </div> <img src="https://picsum.photos/500/400" style="width: 500px; height: auto; object-fit: cover;" alt="产品图片"> </div> <!-- 活动介绍左右布局卡片 --> <div class="my-card" style="display: flex; align-items: stretch; margin-top: 20px;"> <img src="https://picsum.photos/400/300" style="width: 400px; height: auto; object-fit: cover;" alt="活动图片"> <div style="flex: 1; display: flex; flex-direction: column; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white;"> <div class="my-card__body" style="flex: 1; display: flex; flex-direction: column;"> <div> <div style="font-size: 32px; font-weight: bold; margin-bottom: 15px;">2024技术峰会</div> <div style="font-size: 18px; margin-bottom: 20px;">探索技术的未来</div> <p style="line-height: 1.6; margin-bottom: 20px;">加入我们的年度技术盛会，与行业专家面对面交流，探讨最新技术趋势，参与精彩的技术分享和工作坊。</p> <div style="display: flex; gap: 20px; margin-bottom: 30px;"> <div> <i class="bi bi-calendar-event" style="margin-right: 8px;"></i> 2024年3月15日 </div> <div> <i class="bi bi-geo-alt" style="margin-right: 8px;"></i> 上海国际会议中心 </div> </div> </div> <div style="margin-top: auto; display: flex; justify-content: space-between; align-items: center;"> <div> <span style="font-size: 24px; font-weight: bold;">¥1,288</span> <span style="margin-left: 10px;">早鸟票</span> </div> <button class="my-button my-button--large" style="background: white; color: #6366f1;"> 立即报名 </button> </div> </div> </div> </div> <!-- 团队成员左右布局卡片 --> <div class="my-card" style="display: flex; align-items: stretch; margin-top: 20px;"> <img src="https://picsum.photos/300/400" style="width: 300px; height: auto; object-fit: cover;" alt="团队成员照片"> <div style="flex: 1; display: flex; flex-direction: column;"> <div class="my-card__body" style="flex: 1; display: flex; flex-direction: column;"> <div> <div class="my-card__title" style="font-size: 24px;">张三</div> <div class="my-card__subtitle" style="margin: 10px 0;">首席技术官 / 技术专家</div> <p class="my-card__text">拥有10年以上技术开发经验，专注于人工智能和大数据领域。曾主导多个大型项目的技术架构设计和实施。</p> <div style="margin: 20px 0;"> <div style="margin-bottom: 15px;"> <div style="font-weight: bold; margin-bottom: 5px;">专业技能</div> <div style="display: flex; gap: 10px; flex-wrap: wrap;"> <span class="my-button my-button--small">人工智能</span> <span class="my-button my-button--small">机器学习</span> <span class="my-button my-button--small">Python</span> <span class="my-button my-button--small">数据分析</span> </div> </div> <div> <div style="font-weight: bold; margin-bottom: 5px;">联系方式</div> <div style="display: flex; gap: 20px;"> <span><i class="bi bi-envelope"></i> zhang@example.com</span> <span><i class="bi bi-telephone"></i> +86 123 4567 8901</span> </div> </div> </div> </div> <div style="margin-top: auto; display: flex; gap: 10px;"> <button class="my-button my-button--primary"> <i class="bi bi-person-plus"></i> 关注 </button> <button class="my-button"> <i class="bi bi-chat-dots"></i> 发送消息 </button> </div> </div> </div> </div> <!-- 商品详情多图左右布局卡片 --> <div class="my-card" style="display: flex; align-items: stretch; margin-top: 20px;"> <!-- 左侧图片展示区 --> <div style="width: 500px; padding: 20px;"> <!-- 主图展示 --> <div style="margin-bottom: 20px;"> <img src="https://picsum.photos/500/500" style="width: 100%; height: 400px; object-fit: cover; border-radius: 4px;" alt="商品主图"> </div> <!-- 缩略图列表 --> <div style="display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px;"> <img src="https://picsum.photos/500/500" style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid var(--primary-color);" alt="缩略图1"> <img src="https://picsum.photos/501/501" style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.7;" alt="缩略图2"> <img src="https://picsum.photos/502/502" style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.7;" alt="缩略图3"> <img src="https://picsum.photos/503/503" style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.7;" alt="缩略图4"> <img src="https://picsum.photos/504/504" style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.7;" alt="缩略图5"> </div> </div> <!-- 右侧商品信息 --> <div style="flex: 1; display: flex; flex-direction: column; padding: 30px; background-color: var(--background-color-light);"> <div style="margin-bottom: 20px;"> <span class="my-button my-button--small my-button--danger">热卖爆款</span> <span class="my-button my-button--small my-button--warning" style="margin-left: 10px;">限时优惠</span> </div> <div class="my-card__title" style="font-size: 24px; margin-bottom: 10px;">轻奢真皮休闲运动鞋</div> <div class="my-card__subtitle" style="margin-bottom: 20px;">意大利进口牛皮 · 专利减震科技</div> <!-- 价格信息 --> <div style="background: #fff5f5; padding: 15px; border-radius: 4px; margin-bottom: 20px;"> <div style="display: flex; align-items: baseline;"> <span style="font-size: 32px; color: var(--danger-color); font-weight: bold;">¥899</span> <span style="text-decoration: line-through; color: var(--text-secondary); margin-left: 10px;">¥1,299</span> <span class="my-button my-button--small my-button--danger" style="margin-left: 15px;">省¥400</span> </div> <div style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;"> <i class="bi bi-clock"></i> 优惠剩余 2天3小时15分 </div> </div> <!-- 商品属性 --> <div style="margin-bottom: 20px;"> <div style="margin-bottom: 15px;"> <div style="font-weight: bold; margin-bottom: 10px;">颜色</div> <div style="display: flex; gap: 10px;"> <div style="width: 40px; height: 40px; border-radius: 4px; background-color: #000; cursor: pointer; border: 2px solid var(--primary-color);"></div> <div style="width: 40px; height: 40px; border-radius: 4px; background-color: #fff; cursor: pointer; border: 1px solid var(--border-color);"></div> <div style="width: 40px; height: 40px; border-radius: 4px; background-color: #964B00; cursor: pointer; border: 1px solid var(--border-color);"></div> </div> </div> <div style="margin-bottom: 15px;"> <div style="font-weight: bold; margin-bottom: 10px;">尺码</div> <div style="display: flex; flex-wrap: wrap; gap: 10px;"> <button class="my-button my-button--small" style="width: 50px;">38</button> <button class="my-button my-button--small" style="width: 50px;">39</button> <button class="my-button my-button--small my-button--primary" style="width: 50px;">40</button> <button class="my-button my-button--small" style="width: 50px;">41</button> <button class="my-button my-button--small" style="width: 50px;">42</button> <button class="my-button my-button--small is-disabled" style="width: 50px;">43</button> </div> </div> <div style="margin-bottom: 15px;"> <div style="font-weight: bold; margin-bottom: 10px;">数量</div> <div class="my-number-input" style="width: 120px;"> <input type="number" class="my-number-input__inner" value="1" min="1" max="99"> <div class="my-number-input__controls"> <div class="my-number-input__up"> <i class="bi bi-chevron-up my-number-input__icon"></i> </div> <div class="my-number-input__down"> <i class="bi bi-chevron-down my-number-input__icon"></i> </div> </div> </div> </div> </div> <!-- 商品信息 --> <div style="margin-bottom: 20px;"> <div style="display: flex; justify-content: space-between; margin-bottom: 10px;"> <span style="color: var(--text-secondary);">商品编号</span> <span>SN8964527</span> </div> <div style="display: flex; justify-content: space-between; margin-bottom: 10px;"> <span style="color: var(--text-secondary);">库存</span> <span>仅剩 42 件</span> </div> <div style="display: flex; justify-content: space-between;"> <span style="color: var(--text-secondary);">运费</span> <span>免运费</span> </div> </div> <!-- 服务保障 --> <div style="display: flex; gap: 20px; padding: 15px; background: var(--background-color); border-radius: 4px; margin-bottom: 20px;"> <div style="display: flex; align-items: center;"> <i class="bi bi-shield-check" style="color: var(--success-color); margin-right: 5px;"></i> 正品保证 </div> <div style="display: flex; align-items: center;"> <i class="bi bi-arrow-repeat" style="color: var(--primary-color); margin-right: 5px;"></i> 七天退换 </div> <div style="display: flex; align-items: center;"> <i class="bi bi-lightning" style="color: var(--warning-color); margin-right: 5px;"></i> 极速发货 </div> </div> <!-- 按钮组 --> <div style="display: flex; gap: 15px; margin-top: auto;"> <button class="my-button my-button--large" style="flex: 1;"> <i class="bi bi-cart-plus"></i> 加入购物车 </button> <button class="my-button my-button--large my-button--primary" style="flex: 1;"> 立即购买 </button> </div> </div> </div> <!-- 商品详情多图展示卡片（横向滚动） --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">商品详情</div> </div> <div class="my-card__body" style="padding: 0;"> <!-- 选项卡 --> <div style="display: flex; border-bottom: 1px solid var(--border-color-light);"> <div style="padding: 15px 30px; border-bottom: 2px solid var(--primary-color); color: var(--primary-color); cursor: pointer;"> 商品详情 </div> <div style="padding: 15px 30px; cursor: pointer;"> 规格参数 </div> <div style="padding: 15px 30px; cursor: pointer;"> 用户评价(2.1万+) </div> </div> <!-- 图片展示区 --> <div style="padding: 20px;"> <img src="https://picsum.photos/800/600" style="width: 100%; margin-bottom: 20px;" alt="详情图1"> <img src="https://picsum.photos/800/601" style="width: 100%; margin-bottom: 20px;" alt="详情图2"> <img src="https://picsum.photos/800/602" style="width: 100%;" alt="详情图3"> </div> </div> </div> <!-- 商品推荐卡片组 --> <div class="my-card" style="margin-top: 20px;"> <div class="my-card__header"> <div class="my-card__title">相关推荐</div> </div> <div class="my-card__body" style="padding: 20px;"> <div style="display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px;"> <!-- 推荐商品1 --> <div style="min-width: 200px; background: var(--background-color-light); border-radius: 4px; overflow: hidden;"> <img src="https://picsum.photos/201/201" style="width: 100%; height: 150px; object-fit: cover;" alt="推荐商品1"> <div style="padding: 10px;"> <div style="font-size: 14px; margin-bottom: 5px;">轻便跑步鞋</div> <div style="color: var(--danger-color); font-weight: bold;">¥599</div> </div> </div> <!-- 推荐商品2 --> <div style="min-width: 200px; background: var(--background-color-light); border-radius: 4px; overflow: hidden;"> <img src="https://picsum.photos/202/202" style="width: 100%; height: 150px; object-fit: cover;" alt="推荐商品2"> <div style="padding: 10px;"> <div style="font-size: 14px; margin-bottom: 5px;">休闲板鞋</div> <div style="color: var(--danger-color); font-weight: bold;">¥459</div> </div> </div> <!-- 推荐商品3 --> <div style="min-width: 200px; background: var(--background-color-light); border-radius: 4px; overflow: hidden;"> <img src="https://picsum.photos/203/203" style="width: 100%; height: 150px; object-fit: cover;" alt="推荐商品3"> <div style="padding: 10px;"> <div style="font-size: 14px; margin-bottom: 5px;">商务皮鞋</div> <div style="color: var(--danger-color); font-weight: bold;">¥799</div> </div> </div> <!-- 推荐商品4 --> <div style="min-width: 200px; background: var(--background-color-light); border-radius: 4px; overflow: hidden;"> <img src="https://picsum.photos/204/204" style="width: 100%; height: 150px; object-fit: cover;" alt="推荐商品4"> <div style="padding: 10px;"> <div style="font-size: 14px; margin-bottom: 5px;">运动凉鞋</div> <div style="color: var(--danger-color); font-weight: bold;">¥299</div> </div> </div> <!-- 推荐商品5 --> <div style="min-width: 200px; background: var(--background-color-light); border-radius: 4px; overflow: hidden;"> <img src="https://picsum.photos/205/205" style="width: 100%; height: 150px; object-fit: cover;" alt="推荐商品5"> <div style="padding: 10px;"> <div style="font-size: 14px; margin-bottom: 5px;">帆布鞋</div> <div style="color: var(--danger-color); font-weight: bold;">¥199</div> </div> </div> </div> </div> </div> </div> </div> </body> </html>styles\base.css
:root { /* 主题色 */ --primary-color: #409eff; --success-color: #67c23a; --warning-color: #e6a23c; --danger-color: #f56c6c; --info-color: #909399; /* 文字颜色 */ --text-primary: #303133; --text-regular: #606266; --text-secondary: #909399; --text-placeholder: #c0c4cc; /* 边框颜色 */ --border-color: #dcdfe6; --border-color-light: #e4e7ed; --border-color-lighter: #ebeef5; /* 背景颜色 */ --background-color: #ffffff; --background-color-light: #f5f7fa; } /* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-size: 14px; color: var(--text-primary); -webkit-font-smoothing: antialiased; }styles\button.css
.my-button { display: inline-flex; justify-content: center; align-items: center; line-height: 1; height: 32px; white-space: nowrap; cursor: pointer; color: var(--text-regular); text-align: center; box-sizing: border-box; outline: none; transition: .1s; font-weight: 500; padding: 8px 15px; font-size: 14px; border-radius: 4px; border: 1px solid var(--border-color); background-color: var(--background-color); } .my-button:hover { color: var(--primary-color); border-color: var(--primary-color); background-color: var(--background-color-light); } /* 主要按钮 */ .my-button--primary { color: #fff; background-color: var(--primary-color); border-color: var(--primary-color); } .my-button--primary:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; opacity: 0.8; } /* 成功按钮 */ .my-button--success { color: #fff; background-color: var(--success-color); border-color: var(--success-color); } .my-button--success:hover { background: var(--success-color); border-color: var(--success-color); color: #fff; opacity: 0.8; } /* 警告按钮 */ .my-button--warning { color: #fff; background-color: var(--warning-color); border-color: var(--warning-color); } .my-button--warning:hover { background: var(--warning-color); border-color: var(--warning-color); color: #fff; opacity: 0.8; } /* 危险按钮 */ .my-button--danger { color: #fff; background-color: var(--danger-color); border-color: var(--danger-color); } .my-button--danger:hover { background: var(--danger-color); border-color: var(--danger-color); color: #fff; opacity: 0.8; } /* 禁用状态 */ .my-button.is-disabled { cursor: not-allowed; opacity: 0.5; } /* 按钮尺寸 */ .my-button--large { height: 40px; padding: 12px 19px; font-size: 14px; } .my-button--small { height: 24px; padding: 5px 11px; font-size: 12px; } /* 圆角按钮 */ .my-button--round { border-radius: 20px; } /* 按钮组样式 */ .my-button-group { display: inline-flex; vertical-align: middle; } /* 按钮组中的按钮样式 */ .my-button-group .my-button { position: relative; margin: 0; border-radius: 0; } /* 移除相邻按钮之间的边框重叠 */ .my-button-group .my-button:not(:first-child) { margin-left: -1px; } /* 第一个按钮的圆角 */ .my-button-group .my-button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } /* 最后一个按钮的圆角 */ .my-button-group .my-button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* 悬浮时提升层级，避免边框被遮挡 */ .my-button-group .my-button:hover { z-index: 1; } /* 圆角按钮组 */ .my-button-group--round .my-button:first-child { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .my-button-group--round .my-button:last-child { border-top-right-radius: 20px; border-bottom-right-radius: 20px; } /* 垂直按钮组 */ .my-button-group--vertical { display: inline-flex; flex-direction: column; vertical-align: middle; } .my-button-group--vertical .my-button { margin: 0; border-radius: 0; } .my-button-group--vertical .my-button:not(:first-child) { margin-top: -1px; margin-left: 0; } .my-button-group--vertical .my-button:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .my-button-group--vertical .my-button:last-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } /* 按钮组中的图标样式 */ .my-button-group .my-button i { font-size: 14px; vertical-align: middle; } .my-button-group .my-button i:first-child:not(:last-child) { margin-right: 5px; } .my-button-group .my-button i:last-child:not(:first-child) { margin-left: 5px; }styles\card.css
.my-card { border-radius: 4px; border: 1px solid var(--border-color-light); background-color: var(--background-color); overflow: hidden; color: var(--text-regular); transition: .3s; } .my-card:hover { box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); } .my-card__header { padding: 18px 20px; border-bottom: 1px solid var(--border-color-light); box-sizing: border-box; } .my-card__title { font-size: 16px; font-weight: bold; color: var(--text-primary); line-height: 1.5; } .my-card__body { padding: 20px; } /* 无边框卡片 */ .my-card--borderless { border: none; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); } /* 简单卡片 */ .my-card--simple { border: none; } /* 悬浮效果增强 */ .my-card--hover:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }styles\datepicker.css
styles\dialog.css
不能动了，去下载吧。。。