特制一个自己的UI库，只用CSS、图标、emoji图 第二版
图：
代码：
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/main.css"><!-- 添加图标库 --><link rel="stylesheet" href="icons/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-container1 { /* 新增的容器类 */display: grid; /* 使用网格布局 */grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充，最小宽度300px，最大宽度1fr */gap: 20px; /* 设置网格项之间的间隙 */padding: 10px; /* 设置容器内边距 */}</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" >按钮</a></div><div class="my-navbar__dropdown-item"><a href="#input" >输入框</a></div><div class="my-navbar__dropdown-item"><a href="#card" >卡片</a></div><div class="my-navbar__dropdown-item"><a href="#dialog" >弹出框</a></div><div class="my-navbar__dropdown-item"><a href="#navbar" >导航栏</a></div><div class="my-navbar__dropdown-item"><a href="#table" >表格</a></div><div class="my-navbar__dropdown-item"><a href="#pagination" >分页</a></div><div class="my-navbar__dropdown-item"><a href="#datepicker" >日期选择器</a></div><div class="my-navbar__dropdown-item"><a href="#number-input" >数字输入框</a></div><!-- 底部 --><div class="my-navbar__dropdown-item"><a href="#footer" >底部</a></div></div></li><li class="my-navbar__item"><a href="emoji.html" >🌞Emoji 图标库</a></li><li class="my-navbar__item"><a href="icons/icons.html" >🎭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 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 class="my-navbar__item "><i class="bi bi-github"></i></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 class="code-block"><div class="code-block__header"><div class="code-block__title">基础按钮示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.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--primary {color: #fff;background-color: var(--primary-color);border-color: var(--primary-color);
}.my-button--success {color: #fff;background-color: var(--success-color);border-color: var(--success-color);
}.my-button--warning {color: #fff;background-color: var(--warning-color);border-color: var(--warning-color);
}.my-button--danger {color: #fff;background-color: var(--danger-color);border-color: var(--danger-color);
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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"><div class="my-button-group"><button class="my-button">左边</button><button class="my-button">中间</button><button class="my-button">右边</button></div></div><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">基础按钮组</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><div class="my-button-group"><button class="my-button">左边</button><button class="my-button">中间</button><button class="my-button">右边</button>
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.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;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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="code-block"><div class="code-block__header"><div class="code-block__title">不同颜色的按钮组</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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="code-block"><div class="code-block__header"><div class="code-block__title">带图标的按钮组</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.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;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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="code-block"><div class="code-block__header"><div class="code-block__title">圆角按钮组</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.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;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">垂直按钮组</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.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;
}.my-button-group--vertical .my-button:last-child {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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="code-block"><div class="code-block__header"><div class="code-block__title">圆角和禁用按钮</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><button class="my-button my-button--primary my-button--round">圆角按钮</button>
<button class="my-button my-button--primary is-disabled">禁用按钮</button></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 圆角按钮 */
.my-button--round {border-radius: 20px;
}/* 禁用状态 */
.my-button.is-disabled {cursor: not-allowed;opacity: 0.5;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</div></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 class="code-block"><div class="code-block__header"><div class="code-block__title">不同尺寸按钮</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 按钮尺寸 */
.my-button--large {height: 40px;padding: 12px 19px;font-size: 14px;
}.my-button {height: 32px;padding: 8px 15px;font-size: 14px;
}.my-button--small {height: 24px;padding: 5px 11px;font-size: 12px;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</div></div><!-- 带图标的按钮 --><div class="demo-item"><button class="my-button my-button--primary"><i class="bi bi-search" style="margin-right: 5px;"></i>搜索</button><button class="my-button my-button--success">上传<i class="bi bi-upload" style="margin-left: 5px;"></i></button><button class="my-button my-button--warning"><i class="bi bi-bell" style="margin-right: 5px;"></i>提醒</button></div><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">带图标的按钮</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><button class="my-button my-button--primary"><i class="bi bi-search" style="margin-right: 5px;"></i>搜索
</button>
<button class="my-button my-button--success">上传<i class="bi bi-upload" style="margin-left: 5px;"></i>
</button>
<button class="my-button my-button--warning"><i class="bi bi-bell" style="margin-right: 5px;"></i>提醒
</button></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-button {display: inline-flex;justify-content: center;align-items: center;
}.my-button i {font-size: 14px;line-height: 1;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</div></div></div></div></div><!-- 输入框 Input --><div class="demo-section" id="input"><h2>输入框 Input</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" style="max-width: 300px;"><div class="my-input"><input type="text" class="my-input__inner" placeholder="请输入内容"></div></div><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">基础输入框示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><div class="my-input"><input type="text" class="my-input__inner" placeholder="请输入内容">
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-input {position: relative;font-size: 14px;display: inline-block;width: 100%;
}.my-input__inner {background-color: var(--background-color);border-radius: 4px;border: 1px solid var(--border-color);box-sizing: border-box;color: var(--text-regular);display: inline-block;font-size: inherit;height: 32px;line-height: 32px;outline: none;padding: 0 15px;transition: border-color .2s;width: 100%;
}.my-input__inner:hover {border-color: var(--text-secondary);
}.my-input__inner:focus {border-color: var(--primary-color);outline: none;
}.my-input__inner::placeholder {color: var(--text-placeholder);
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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" style="max-width: 300px;"><div class="my-input is-disabled"><input type="text" class="my-input__inner" placeholder="禁用状态" disabled></div></div><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">禁用状态示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><div class="my-input is-disabled"><input type="text" class="my-input__inner" placeholder="禁用状态" disabled>
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 禁用状态 */
.my-input.is-disabled .my-input__inner {background-color: var(--background-color-light);border-color: var(--border-color);color: var(--text-placeholder);cursor: not-allowed;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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-input my-input--large" style="margin-bottom: 16px;"><input type="text" class="my-input__inner" placeholder="大型输入框"></div><div class="my-input" style="margin-bottom: 16px;"><input type="text" class="my-input__inner" placeholder="默认输入框"></div><div class="my-input my-input--small"><input type="text" class="my-input__inner" placeholder="小型输入框"></div></div><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">不同尺寸示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><div class="my-input my-input--large"><input type="text" class="my-input__inner" placeholder="大型输入框">
</div><div class="my-input"><input type="text" class="my-input__inner" placeholder="默认输入框">
</div><div class="my-input my-input--small"><input type="text" class="my-input__inner" placeholder="小型输入框">
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 尺寸 */
.my-input--large .my-input__inner {height: 40px;line-height: 40px;font-size: 14px;
}.my-input .my-input__inner {height: 32px;line-height: 32px;font-size: 14px;
}.my-input--small .my-input__inner {height: 24px;line-height: 24px;font-size: 12px;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</div></div></div></div></div><!-- 卡片 Card --><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><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">基础卡片示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><!-- 基础卡片 -->
<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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.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);
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</div></div><!-- Bootstrap风格卡片 --><h3 style="margin-top: 30px;">Bootstrap风格卡片</h3><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><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">Bootstrap风格卡片示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><!-- 图片卡片 -->
<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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 卡片图片样式 */
.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;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">基础表格示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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>...</tbody>
</table></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-table {width: 100%;border-collapse: collapse;background-color: var(--background-color);font-size: 14px;margin-bottom: 20px;
}.my-table th,
.my-table td {padding: 12px 15px;text-align: left;border-bottom: 1px solid var(--border-color-light);
}.my-table th {font-weight: bold;color: var(--text-primary);background-color: var(--background-color-light);
}.my-table tbody tr {transition: .3s;
}.my-table tbody tr:hover {background-color: var(--background-color-light);
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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"><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></tbody></table><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">斑马纹表格示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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>...</tbody>
</table></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 斑马纹表格 */
.my-table--striped tbody tr:nth-child(even) {background-color: var(--background-color-light);
}.my-table--striped tbody tr:hover {background-color: #f0f2f5;
}/* 状态样式 */
.my-table__row--success {background-color: rgba(103, 194, 58, 0.1);
}.my-table__row--warning {background-color: rgba(230, 162, 60, 0.1);
}.my-table__row--danger {background-color: rgba(245, 108, 108, 0.1);
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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"><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 class="code-block"><div class="code-block__header"><div class="code-block__title">带边框的表格示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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>...</tbody>
</table></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 带边框的表格 */
.my-table--bordered {border: 1px solid var(--border-color-light);
}.my-table--bordered th,
.my-table--bordered td {border: 1px solid var(--border-color-light);
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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-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></tbody></table></div><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">固定表头示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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>...</tbody></table>
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 固定表头 */
.my-table-wrapper {max-height: 400px;overflow: auto;
}.my-table--fixed-header {position: relative;
}.my-table--fixed-header thead th {position: sticky;top: 0;z-index: 1;background-color: var(--background-color-light);
}/* 响应式表格 */
@media screen and (max-width: 768px) {.my-table-wrapper {overflow-x: auto;}.my-table {min-width: 600px;}
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</div></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 class="code-block"><div class="code-block__header"><div class="code-block__title">基础分页示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-pagination {display: flex;align-items: center;justify-content: center;gap: 8px;margin: 20px 0;
}.my-pagination__item {min-width: 32px;height: 32px;padding: 0 4px;display: flex;align-items: center;justify-content: center;border: 1px solid var(--border-color);border-radius: 4px;background-color: #fff;color: var(--text-primary);font-size: 14px;cursor: pointer;transition: all 0.3s;user-select: none;
}.my-pagination__item:hover {color: var(--primary-color);border-color: var(--primary-color);
}.my-pagination__item.is-active {background-color: var(--primary-color);color: #fff;border-color: var(--primary-color);
}.my-pagination__item.is-disabled {cursor: not-allowed;color: var(--text-disabled);background-color: var(--background-color-light);border-color: var(--border-color);
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">带省略号的分页示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-pagination__item--prev,
.my-pagination__item--next {font-size: 12px;
}.my-pagination__item--more {border: none;background: none;cursor: default;
}.my-pagination__item--more:hover {color: var(--text-primary);border: none;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">禁用状态示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-pagination__item.is-disabled {cursor: not-allowed;color: var(--text-disabled);background-color: var(--background-color-light);border-color: var(--border-color);
}/* 响应式调整 */
@media (max-width: 768px) {.my-pagination {gap: 4px;}.my-pagination__item {min-width: 28px;height: 28px;font-size: 12px;}
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">基础日期选择器示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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"><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><div class="my-datepicker__footer"><button class="my-datepicker__btn">取消</button><button class="my-datepicker__btn my-datepicker__btn--primary">确定</button></div>
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-datepicker {position: relative;display: inline-block;
}.my-datepicker__input {width: 200px;height: 32px;padding: 0 30px 0 12px;border: 1px solid var(--border-color);border-radius: 4px;font-size: 14px;color: var(--text-primary);background-color: #fff;cursor: pointer;transition: all 0.3s;
}.my-datepicker__panel {position: absolute;top: calc(100% + 4px);left: 0;z-index: 1000;width: 280px;background-color: #fff;border: 1px solid var(--border-color);border-radius: 4px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);padding: 8px;
}.my-datepicker__day {height: 32px;display: flex;align-items: center;justify-content: center;font-size: 14px;cursor: pointer;border-radius: 4px;transition: all 0.3s;
}.my-datepicker__day.is-selected {background-color: var(--primary-color);color: #fff;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">禁用状态示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><div class="my-datepicker"><input type="text" class="my-datepicker__input" placeholder="选择日期" readonly disabled><i class="bi bi-calendar3 my-datepicker__icon"></i>
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-datepicker__input:disabled {background-color: var(--background-color-light);border-color: var(--border-color);color: var(--text-disabled);cursor: not-allowed;
}.my-datepicker__input:disabled + .my-datepicker__icon {color: var(--text-disabled);
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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-datepicker"><input type="text" class="my-datepicker__input my-datepicker__input--large" placeholder="大型日期选择器" readonly><i class="bi bi-calendar3 my-datepicker__icon"></i></div><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"><input type="text" class="my-datepicker__input my-datepicker__input--small" placeholder="小型日期选择器" readonly><i class="bi bi-calendar3 my-datepicker__icon"></i></div></div><!-- 代码展示 --><div class="code-block"><div class="code-block__header"><div class="code-block__title">不同尺寸示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><div class="my-datepicker"><input type="text" class="my-datepicker__input my-datepicker__input--large" placeholder="大型日期选择器" readonly><i class="bi bi-calendar3 my-datepicker__icon"></i>
</div><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"><input type="text" class="my-datepicker__input my-datepicker__input--small" placeholder="小型日期选择器" readonly><i class="bi bi-calendar3 my-datepicker__icon"></i>
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-datepicker__input--large {height: 40px;font-size: 16px;padding: 0 35px 0 15px;
}.my-datepicker__input {height: 32px;font-size: 14px;padding: 0 30px 0 12px;
}.my-datepicker__input--small {height: 24px;font-size: 12px;padding: 0 25px 0 8px;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</div></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 class="code-block"><div class="code-block__header"><div class="code-block__title">基础数字输入框示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-number-input {position: relative;display: inline-flex;width: 180px;border: 1px solid var(--border-color);border-radius: 4px;overflow: hidden;transition: all 0.3s;
}.my-number-input:hover {border-color: var(--primary-color);
}.my-number-input:focus-within {border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}.my-number-input__inner {flex: 1;width: 100%;height: 32px;padding: 0 8px;border: none;outline: none;font-size: 14px;color: var(--text-primary);text-align: center;
}.my-number-input__controls {display: flex;flex-direction: column;border-left: 1px solid var(--border-color);
}.my-number-input__up,
.my-number-input__down {display: flex;align-items: center;justify-content: center;width: 32px;height: 16px;cursor: pointer;background-color: var(--background-color-light);transition: all 0.3s;user-select: none;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">禁用状态示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 禁用状态 */
.my-number-input.is-disabled {background-color: var(--background-color-light);border-color: var(--border-color);cursor: not-allowed;
}.my-number-input.is-disabled .my-number-input__inner {background-color: var(--background-color-light);color: var(--text-disabled);cursor: not-allowed;
}.my-number-input.is-disabled .my-number-input__up,
.my-number-input.is-disabled .my-number-input__down {cursor: not-allowed;background-color: var(--background-color-light);
}.my-number-input.is-disabled .my-number-input__icon {color: var(--text-disabled);
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">不同尺寸示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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"><!-- 默认尺寸 -->
</div><div class="my-number-input my-number-input--small"><!-- 小型尺寸 -->
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 尺寸变体 */
.my-number-input--large {width: 200px;
}.my-number-input--large .my-number-input__inner {height: 40px;font-size: 16px;
}.my-number-input--large .my-number-input__up,
.my-number-input--large .my-number-input__down {width: 40px;height: 20px;
}.my-number-input--small {width: 130px;
}.my-number-input--small .my-number-input__inner {height: 24px;font-size: 12px;
}.my-number-input--small .my-number-input__up,
.my-number-input--small .my-number-input__down {width: 24px;height: 12px;
}.my-number-input--small .my-number-input__icon {font-size: 10px;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">基础弹出框示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><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></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-dialog__wrapper {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 2000;display: flex;align-items: center;justify-content: center;
}.my-dialog__mask {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 2001;
}.my-dialog {position: relative;background: #fff;border-radius: 4px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);margin: 0 auto;width: 50%;max-width: 600px;z-index: 2002;
}.my-dialog__header {padding: 20px;padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;
}.my-dialog__title {line-height: 24px;font-size: 18px;color: #303133;font-weight: 500;
}.my-dialog__close {border: none;background: transparent;padding: 0;cursor: pointer;font-size: 20px;color: #909399;
}.my-dialog__body {padding: 30px 20px;color: #606266;font-size: 14px;word-break: break-all;
}.my-dialog__footer {padding: 20px;padding-top: 10px;text-align: right;
}.my-dialog__footer .my-button + .my-button {margin-left: 10px;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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="code-block"><div class="code-block__header"><div class="code-block__title">不同尺寸示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><!-- 小型弹出框 -->
<div class="my-dialog my-dialog--small"><!-- 弹出框内容 -->
</div><!-- 大型弹出框 -->
<div class="my-dialog my-dialog--large"><!-- 弹出框内容 -->
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>.my-dialog--small {width: 30%;
}.my-dialog--large {width: 70%;
}/* 响应式布局 */
@media screen and (max-width: 768px) {.my-dialog,.my-dialog--small,.my-dialog--large {width: 90%;}
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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="code-block"><div class="code-block__header"><div class="code-block__title">不同方向的弹出框示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><!-- 顶部弹出框 -->
<div class="my-dialog my-dialog--top"><!-- 弹出框内容 -->
</div><!-- 底部弹出框 -->
<div class="my-dialog my-dialog--bottom"><!-- 弹出框内容 -->
</div><!-- 左侧弹出框 -->
<div class="my-dialog my-dialog--left"><!-- 弹出框内容 -->
</div><!-- 右侧弹出框 -->
<div class="my-dialog my-dialog--right"><!-- 弹出框内容 -->
</div></code></pre></div></div><div class="code-block__source"><div class="code-block__content"><pre><code>/* 不同方向的弹出框样式 */
.my-dialog--top {position: fixed;top: 0;left: 0;width: 100%;max-width: 100%;margin: 0;border-radius: 0 0 4px 4px;
}.my-dialog--bottom {position: fixed;bottom: 0;left: 0;width: 100%;max-width: 100%;margin: 0;border-radius: 4px 4px 0 0;
}.my-dialog--left {position: fixed;top: 0;left: 0;height: 100vh;margin: 0;border-radius: 0 4px 4px 0;
}.my-dialog--right {position: fixed;top: 0;right: 0;height: 100vh;margin: 0;border-radius: 4px 0 0 4px;
}/* 动画效果 */
.my-dialog__wrapper {animation: fadeIn 0.3s ease-in-out;
}/* 中间弹出 */
.my-dialog {animation: slideIn 0.3s ease-in-out;
}/* 顶部弹出 */
.my-dialog--top {animation: slideDown 0.3s ease-in-out;
}/* 底部弹出 */
.my-dialog--bottom {animation: slideUp 0.3s ease-in-out;
}/* 左侧弹出 */
.my-dialog--left {animation: slideRight 0.3s ease-in-out;
}/* 右侧弹出 */
.my-dialog--right {animation: slideLeft 0.3s ease-in-out;
}</code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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="code-block"><div class="code-block__header"><div class="code-block__title">自定义内容示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><div class="my-dialog__wrapper" id="customDialog"><div class="my-dialog__mask"></div><div class="my-dialog"><div class="my-dialog__header"><span class="my-dialog__title">用户信息</span><button class="my-dialog__close"><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">取消</button><button class="my-button my-button--primary">提交</button></div></div>
</div></code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">登录弹窗示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><div class="my-dialog__wrapper" id="loginDialog"><div class="my-dialog__mask"></div><div class="my-dialog my-dialog--small"><div class="my-dialog__header"><span class="my-dialog__title">用户登录</span><button class="my-dialog__close"><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></code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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 class="code-block"><div class="code-block__header"><div class="code-block__title">注册弹窗示例</div><div class="code-block__actions"><div class="code-block__switch-group"><button class="code-block__switch is-active" data-type="preview">预览</button><button class="code-block__switch" data-type="source">源代码</button></div><button class="code-block__button" onclick="copyCode(this)"><i class="bi bi-clipboard"></i>复制代码</button></div></div><div class="code-block__wrapper"><div class="code-block__preview is-visible"><div class="code-block__content"><pre><code><div class="my-dialog__wrapper" id="registerDialog"><div class="my-dialog__mask"></div><div class="my-dialog"><div class="my-dialog__header"><span class="my-dialog__title">用户注册</span><button class="my-dialog__close"><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></code></pre></div></div></div><div class="code-block__tooltip">复制成功！</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__dropdown').forEach(dropdown => {dropdown.addEventListener('click', function(e) {if (window.innerWidth <= 768) {e.preventDefault();this.classList.toggle('is-active');}});});// 点击导航项时关闭移动端菜单document.querySelectorAll('.my-navbar__item').forEach(item => {item.addEventListener('click', function(e) {if (window.innerWidth <= 768 && !this.classList.contains('my-navbar__dropdown')) {document.querySelector('.my-navbar').classList.remove('is-active');}});});// 点击下拉菜单项时关闭移动端菜单document.querySelectorAll('.my-navbar__dropdown-item').forEach(item => {item.addEventListener('click', function(e) {if (window.innerWidth <= 768) {document.querySelector('.my-navbar').classList.remove('is-active');}});});// 点击页面其他区域时关闭移动端菜单document.addEventListener('click', function(e) {if (window.innerWidth <= 768) {const navbar = document.querySelector('.my-navbar');const toggle = document.querySelector('.my-navbar__toggle');if (!navbar.contains(e.target) && navbar.classList.contains('is-active')) {navbar.classList.remove('is-active');}}});// 监听窗口大小变化，在切换到桌面版时重置状态window.addEventListener('resize', function() {if (window.innerWidth > 768) {document.querySelector('.my-navbar').classList.remove('is-active');document.querySelectorAll('.my-navbar__dropdown').forEach(dropdown => {dropdown.classList.remove('is-active');});}});// 代码块相关功能document.querySelectorAll('.code-block__switch').forEach(button => {button.addEventListener('click', function() {const type = this.dataset.type;const codeBlock = this.closest('.code-block');// 切换按钮状态codeBlock.querySelectorAll('.code-block__switch').forEach(btn => {btn.classList.remove('is-active');});this.classList.add('is-active');// 切换内容显示codeBlock.querySelectorAll('.code-block__preview, .code-block__source').forEach(content => {content.classList.remove('is-visible');});codeBlock.querySelector(`.code-block__${type}`).classList.add('is-visible');});});// 复制代码功能function copyCode(button) {const codeBlock = button.closest('.code-block');const code = codeBlock.querySelector('.code-block__content:not([style*="display: none"]) code').textContent;// 创建临时文本区域const textarea = document.createElement('textarea');textarea.value = code;document.body.appendChild(textarea);textarea.select();document.execCommand('copy');document.body.removeChild(textarea);// 显示提示const tooltip = codeBlock.querySelector('.code-block__tooltip');tooltip.classList.add('is-visible');setTimeout(() => {tooltip.classList.remove('is-visible');}, 2000);}// 初始化代码块展开/收起状态document.querySelectorAll('.code-block__wrapper').forEach(wrapper => {wrapper.classList.add('is-expanded');});</script>
</body>
</html> main.css
/* -----------base---------------------------------- */
: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;}a {text-decoration: none;color: inherit;}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;}
/* ---------------------my-button------------------------ */
.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;} /* ---------------------my-card------------------------ */.demo-card-container { /* 容器 */display: grid; /* 使用网格布局 */grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充，最小宽度为300px，最大宽度为1fr */gap: 20px; /* 项目之间的间距 */padding: 10px; /* 容器内边距 */
}.demo-card-horizontal-container { /* 水平布局容器 */display: grid; /* 使用网格布局 */grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* 自动填充，最小宽度为400px，最大宽度为1fr */gap: 20px; /* 项目之间的间距 */padding: 10px; /* 容器内边距 */
}.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); /* 添加阴影 */} /* 卡片图片样式 */.my-card__image { /* 卡片图片样式 */width: 100%; /* 宽度 */height: 200px; /* 高度 */object-fit: cover; /* 覆盖 */
}/* 卡片图片样式 */.my-card-left__image { /* 卡片图片样式 */width: 100%; /* 宽度 */height: 250px; /* 高度 */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; /* 顶部外边距 */
}/* -------------------my-datepicker-------------------------- */.my-datepicker {position: relative;display: inline-block;
}.my-datepicker__input {width: 200px;height: 32px;padding: 0 30px 0 12px;border: 1px solid var(--border-color);border-radius: 4px;font-size: 14px;color: var(--text-primary);background-color: #fff;cursor: pointer;transition: all 0.3s;
}.my-datepicker__input:hover {border-color: var(--primary-color);
}.my-datepicker__input:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}.my-datepicker__icon {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);color: var(--text-secondary);pointer-events: none;
}.my-datepicker__panel {position: absolute;top: calc(100% + 4px);left: 0;z-index: 1000;width: 280px;background-color: #fff;border: 1px solid var(--border-color);border-radius: 4px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);padding: 8px;
}.my-datepicker__header {display: flex;align-items: center;justify-content: space-between;padding: 8px;border-bottom: 1px solid var(--border-color-light);
}.my-datepicker__arrow {width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;cursor: pointer;border-radius: 4px;transition: all 0.3s;
}.my-datepicker__arrow:hover {background-color: var(--background-color-light);color: var(--primary-color);
}.my-datepicker__current-month {font-size: 14px;font-weight: 500;color: var(--text-primary);
}.my-datepicker__weekdays {display: grid;grid-template-columns: repeat(7, 1fr);padding: 8px 0;
}.my-datepicker__weekday {text-align: center;font-size: 12px;color: var(--text-secondary);
}.my-datepicker__days {display: grid;grid-template-columns: repeat(7, 1fr);gap: 2px;
}.my-datepicker__day {height: 32px;display: flex;align-items: center;justify-content: center;font-size: 14px;cursor: pointer;border-radius: 4px;transition: all 0.3s;
}.my-datepicker__day:hover {background-color: var(--background-color-light);
}.my-datepicker__day.is-today {color: var(--primary-color);font-weight: bold;
}.my-datepicker__day.is-selected {background-color: var(--primary-color);color: #fff;
}.my-datepicker__day.is-disabled {color: var(--text-disabled);cursor: not-allowed;background-color: transparent;
}.my-datepicker__day.is-other-month {color: var(--text-disabled);
}.my-datepicker__footer {padding: 8px;text-align: right;border-top: 1px solid var(--border-color-light);
}.my-datepicker__btn {padding: 4px 12px;font-size: 12px;border-radius: 4px;border: 1px solid var(--border-color);background-color: #fff;color: var(--text-primary);cursor: pointer;transition: all 0.3s;margin-left: 8px;
}.my-datepicker__btn:hover {color: var(--primary-color);border-color: var(--primary-color);
}.my-datepicker__btn--primary {background-color: var(--primary-color);border-color: var(--primary-color);color: #fff;
}.my-datepicker__btn--primary:hover {background-color: var(--primary-color-dark);border-color: var(--primary-color-dark);color: #fff;
} /* ----------------.my-dialog----------------------------- */
.my-dialog__wrapper {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 2000;display: flex;align-items: center;justify-content: center;
}.my-dialog__mask {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 2001;
}.my-dialog {position: relative;background: #fff;border-radius: 4px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);margin: 0 auto;width: 50%;max-width: 600px;z-index: 2002;
}/* 不同方向的弹出框样式 */
.my-dialog--top {position: fixed;top: 0;left: 0;width: 100%;max-width: 100%;margin: 0;border-radius: 0 0 4px 4px;
}.my-dialog--bottom {position: fixed;bottom: 0;left: 0;width: 100%;max-width: 100%;margin: 0;border-radius: 4px 4px 0 0;
}.my-dialog--left {position: fixed;top: 0;left: 0;height: 100vh;margin: 0;border-radius: 0 4px 4px 0;
}.my-dialog--right {position: fixed;top: 0;right: 0;height: 100vh;margin: 0;border-radius: 4px 0 0 4px;
}.my-dialog--small {width: 30%;
}.my-dialog--large {width: 70%;
}.my-dialog__header {padding: 20px;padding-bottom: 10px;display: flex;justify-content: space-between;align-items: center;
}.my-dialog__title {line-height: 24px;font-size: 18px;color: #303133;font-weight: 500;
}.my-dialog__close {border: none;background: transparent;padding: 0;cursor: pointer;font-size: 20px;color: #909399;
}.my-dialog__close:hover {color: var(--primary-color);
}.my-dialog__body {padding: 30px 20px;color: #606266;font-size: 14px;word-break: break-all;
}.my-dialog__footer {padding: 20px;padding-top: 10px;text-align: right;
}.my-dialog__footer .my-button + .my-button {margin-left: 10px;
}/* 响应式布局 */
@media screen and (max-width: 768px) {.my-dialog,.my-dialog--small,.my-dialog--large {width: 90%;}.my-dialog--left,.my-dialog--right {width: 80%;}
}/* 动画效果 */
.my-dialog__wrapper {animation: fadeIn 0.3s ease-in-out;
}/* 中间弹出 */
.my-dialog {animation: slideIn 0.3s ease-in-out;
}/* 顶部弹出 */
.my-dialog--top {animation: slideDown 0.3s ease-in-out;
}/* 底部弹出 */
.my-dialog--bottom {animation: slideUp 0.3s ease-in-out;
}/* 左侧弹出 */
.my-dialog--left {animation: slideRight 0.3s ease-in-out;
}/* 右侧弹出 */
.my-dialog--right {animation: slideLeft 0.3s ease-in-out;
}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}@keyframes slideIn {from {transform: translateY(-20px);opacity: 0;}to {transform: translateY(0);opacity: 1;}
}@keyframes slideDown {from {transform: translateY(-100%);}to {transform: translateY(0);}
}@keyframes slideUp {from {transform: translateY(100%);}to {transform: translateY(0);}
}@keyframes slideRight {from {transform: translateX(-100%);}to {transform: translateX(0);}
}@keyframes slideLeft {from {transform: translateX(100%);}to {transform: translateX(0);}
} /* -------------------my-footer-------------------------- */
.my-footer {background-color: var(--background-color);border-top: 1px solid var(--border-color);padding: 40px 0;color: var(--text-regular);}.my-footer__container {max-width: 1200px;margin: 0 auto;padding: 0 20px;display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;}.my-footer__section {display: flex;flex-direction: column;}.my-footer__title {font-size: 18px;font-weight: bold;color: var(--text-primary);margin-bottom: 20px;}.my-footer__list {list-style: none;padding: 0;margin: 0;}.my-footer__item {margin-bottom: 12px;}.my-footer__link {color: var(--text-regular);text-decoration: none;transition: .3s;display: inline-flex;align-items: center;}.my-footer__link:hover {color: var(--primary-color);}.my-footer__icon {margin-right: 8px;font-size: 16px;}.my-footer__social {display: flex;gap: 16px;}.my-footer__social-link {color: var(--text-regular);font-size: 20px;transition: .3s;}.my-footer__social-link:hover {color: var(--primary-color);}.my-footer__bottom {margin-top: 40px;padding-top: 20px;border-top: 1px solid var(--border-color);text-align: center;color: var(--text-secondary);font-size: 14px;}/* 响应式布局 */@media screen and (max-width: 992px) {.my-footer__container {grid-template-columns: repeat(2, 1fr);}}@media screen and (max-width: 576px) {.my-footer__container {grid-template-columns: 1fr;gap: 30px;}.my-footer {padding: 30px 0;}.my-footer__bottom {margin-top: 30px;}} /* ---------------my-input------------------------------ */.my-input {position: relative;font-size: 14px;display: inline-block;width: 100%;}.my-input__inner {background-color: var(--background-color);border-radius: 4px;border: 1px solid var(--border-color);box-sizing: border-box;color: var(--text-regular);display: inline-block;font-size: inherit;height: 32px;line-height: 32px;outline: none;padding: 0 15px;transition: border-color .2s;width: 100%;}.my-input__inner:hover {border-color: var(--text-secondary);}.my-input__inner:focus {border-color: var(--primary-color);outline: none;}.my-input__inner::placeholder {color: var(--text-placeholder);}/* 禁用状态 */.my-input.is-disabled .my-input__inner {background-color: var(--background-color-light);border-color: var(--border-color);color: var(--text-placeholder);cursor: not-allowed;}/* 尺寸 */.my-input--large .my-input__inner {height: 40px;line-height: 40px;font-size: 14px;}.my-input--small .my-input__inner {height: 24px;line-height: 24px;font-size: 12px;}/* 带图标的输入框 */.my-input--prefix .my-input__inner {padding-left: 30px;}.my-input--suffix .my-input__inner {padding-right: 30px;}.my-input__prefix,.my-input__suffix {position: absolute;height: 100%;top: 0;display: flex;align-items: center;color: var(--text-secondary);}.my-input__prefix {left: 5px;}.my-input__suffix {right: 5px;} /* ---------------my-navbar------------------------------ */.my-navbar {height: 60px;background-color: var(--background-color);border-bottom: 1px solid var(--border-color);display: flex;align-items: center;padding: 0 20px;position: sticky;top: 0;z-index: 100;box-shadow: 0 2px 4px rgba(0,0,0,.05);}.my-navbar__brand {font-size: 20px;font-weight: bold;color: var(--text-primary);text-decoration: none;margin-right: 40px;}.my-navbar__nav {display: flex;align-items: center;list-style: none;margin: 0;padding: 0;height: 100%;}.my-navbar__item {height: 100%;padding: 0 20px;display: flex;align-items: center;color: var(--text-regular);cursor: pointer;transition: .3s;position: relative;}.my-navbar__item:hover {color: var(--primary-color);}.my-navbar__item.is-active {color: var(--primary-color);}.my-navbar__item.is-active::after {content: '';position: absolute;bottom: 0;left: 20px;right: 20px;height: 2px;background-color: var(--primary-color);}/* 搜索框样式 */.my-navbar__search {position: relative;margin-left: 20px;margin-right: 20px;}.my-navbar__search-input {width: 200px;height: 32px;padding: 0 35px 0 15px;border-radius: 16px;border: 1px solid var(--border-color);background-color: var(--background-color-light);transition: all .3s;outline: none;font-size: 14px;color: var(--text-regular);}.my-navbar__search-input:focus {width: 250px;border-color: var(--primary-color);background-color: var(--background-color);}.my-navbar__search-input::placeholder {color: var(--text-placeholder);}.my-navbar__search-icon {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);color: var(--text-secondary);font-size: 14px;}/* 右侧导航项 */.my-navbar__right {margin-left: auto;display: flex;align-items: center;}/* 下拉菜单 */.my-navbar__dropdown {position: relative;}.my-navbar__dropdown-menu {position: absolute;top: 100%;left: 0;min-width: 150px;background-color: var(--background-color);border: 1px solid var(--border-color-light);border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);padding: 10px 0;display: none;}.my-navbar__dropdown:hover .my-navbar__dropdown-menu {display: block;}.my-navbar__dropdown-item {padding: 8px 20px;color: var(--text-regular);cursor: pointer;transition: .3s;}.my-navbar__dropdown-item:hover {background-color: var(--background-color-light);color: var(--primary-color);}/* 响应式菜单按钮 */.my-navbar__toggle {display: none;font-size: 24px;color: var(--text-regular);cursor: pointer;margin-left: auto;}/* 响应式布局 */@media screen and (max-width: 768px) { /* 根据需要调整断点 */.my-navbar__toggle { /* 显示菜单按钮 */display: block; /* 显示菜单按钮 */}.my-navbar__nav,.my-navbar__right { /* 隐藏导航栏和右侧内容 */display: none;}.my-navbar.is-active .my-navbar__nav,.my-navbar.is-active .my-navbar__right { /* 显示导航栏和右侧内容 */display: flex; /* 显示导航栏和右侧内容 */flex-direction: column; /* 垂直排列 */position: absolute; /* 绝对定位 */top: 60px; /* 菜单按钮的高度 */left: 0; /* 左对齐 */right: 0; /* 右对齐 */background-color: var(--background-color); /* 背景色 */border-bottom: 1px solid var(--border-color); /* 底部边框 */padding: 10px 0; /* 内边距 */}.my-navbar__item {height: 50px;width: 100%;}.my-navbar__dropdown-menu {position: static;box-shadow: none;border: none;background-color: var(--background-color-light);}.my-navbar__search {width: 100%;margin: 10px 20px;}.my-navbar__search-input {width: 100%;}.my-navbar__search-input:focus {width: 100%;}} /* ------------------my-number-input--------------------------- */.my-number-input {position: relative;display: inline-flex;width: 180px;border: 1px solid var(--border-color);border-radius: 4px;overflow: hidden;transition: all 0.3s;
}.my-number-input:hover {border-color: var(--primary-color);
}.my-number-input:focus-within {border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}.my-number-input__inner {flex: 1;width: 100%;height: 32px;padding: 0 8px;border: none;outline: none;font-size: 14px;color: var(--text-primary);text-align: center;
}.my-number-input__inner::-webkit-inner-spin-button,
.my-number-input__inner::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;
}.my-number-input__controls {display: flex;flex-direction: column;border-left: 1px solid var(--border-color);
}.my-number-input__up,
.my-number-input__down {display: flex;align-items: center;justify-content: center;width: 32px;height: 16px;cursor: pointer;background-color: var(--background-color-light);transition: all 0.3s;user-select: none;
}.my-number-input__up {border-bottom: 1px solid var(--border-color);
}.my-number-input__up:hover,
.my-number-input__down:hover {background-color: var(--border-color-light);color: var(--primary-color);
}.my-number-input__icon {font-size: 12px;color: var(--text-secondary);
}/* 禁用状态 */
.my-number-input.is-disabled {background-color: var(--background-color-light);border-color: var(--border-color);cursor: not-allowed;
}.my-number-input.is-disabled .my-number-input__inner {background-color: var(--background-color-light);color: var(--text-disabled);cursor: not-allowed;
}.my-number-input.is-disabled .my-number-input__up,
.my-number-input.is-disabled .my-number-input__down {cursor: not-allowed;background-color: var(--background-color-light);
}.my-number-input.is-disabled .my-number-input__icon {color: var(--text-disabled);
}/* 尺寸变体 */
.my-number-input--large {width: 200px;
}.my-number-input--large .my-number-input__inner {height: 40px;font-size: 16px;
}.my-number-input--large .my-number-input__up,
.my-number-input--large .my-number-input__down {width: 40px;height: 20px;
}.my-number-input--small {width: 130px;
}.my-number-input--small .my-number-input__inner {height: 24px;font-size: 12px;
}.my-number-input--small .my-number-input__up,
.my-number-input--small .my-number-input__down {width: 24px;height: 12px;
}.my-number-input--small .my-number-input__icon {font-size: 10px;
} /* -----------------my-pagination---------------------------- */
.my-pagination {display: flex;align-items: center;justify-content: center;gap: 8px;margin: 20px 0;
}.my-pagination__item {min-width: 32px;height: 32px;padding: 0 4px;display: flex;align-items: center;justify-content: center;border: 1px solid var(--border-color);border-radius: 4px;background-color: #fff;color: var(--text-primary);font-size: 14px;cursor: pointer;transition: all 0.3s;user-select: none;
}.my-pagination__item:hover {color: var(--primary-color);border-color: var(--primary-color);
}.my-pagination__item.is-active {background-color: var(--primary-color);color: #fff;border-color: var(--primary-color);
}.my-pagination__item.is-disabled {cursor: not-allowed;color: var(--text-disabled);background-color: var(--background-color-light);border-color: var(--border-color);
}.my-pagination__item--prev,
.my-pagination__item--next {font-size: 12px;
}.my-pagination__item--more {border: none;background: none;cursor: default;
}.my-pagination__item--more:hover {color: var(--text-primary);border: none;
}/* 响应式调整 */
@media (max-width: 768px) {.my-pagination {gap: 4px;}.my-pagination__item {min-width: 28px;height: 28px;font-size: 12px;}
} /* ---------------my-table------------------------------ */.my-table {width: 100%;border-collapse: collapse;background-color: var(--background-color);font-size: 14px;margin-bottom: 20px;}.my-table th,.my-table td {padding: 12px 15px;text-align: left;border-bottom: 1px solid var(--border-color-light);}.my-table th {font-weight: bold;color: var(--text-primary);background-color: var(--background-color-light);}.my-table tbody tr {transition: .3s;}.my-table tbody tr:hover {background-color: var(--background-color-light);}/* 斑马纹表格 */.my-table--striped tbody tr:nth-child(even) {background-color: var(--background-color-light);}.my-table--striped tbody tr:hover {background-color: #f0f2f5;}/* 带边框的表格 */.my-table--bordered {border: 1px solid var(--border-color-light);}.my-table--bordered th,.my-table--bordered td {border: 1px solid var(--border-color-light);}/* 紧凑型表格 */.my-table--small th,.my-table--small td {padding: 8px 12px;}/* 状态样式 */.my-table__row--success {background-color: rgba(103, 194, 58, 0.1);}.my-table__row--warning {background-color: rgba(230, 162, 60, 0.1);}.my-table__row--danger {background-color: rgba(245, 108, 108, 0.1);}/* 固定表头 */.my-table-wrapper {max-height: 400px;overflow: auto;}.my-table--fixed-header {position: relative;}.my-table--fixed-header thead th {position: sticky;top: 0;z-index: 1;background-color: var(--background-color-light);}/* 响应式表格 */@media screen and (max-width: 768px) {.my-table-wrapper {overflow-x: auto;}.my-table {min-width: 600px;}} /* 横向卡片样式 */
/* .my-card--horizontal {margin-bottom: 1rem;
} */.my-card__row {display: flex;flex-direction: row;
}.my-card__image-col {flex: 0 0 33.333333%;max-width: 33.333333%;
}.my-card-left__image-col {flex: 0 0 35%;max-width: 100%;
}.my-card__content-col {flex: 1;padding: 0 1rem;
}.my-card-left__content-col {padding: 0;margin: 0;
}.my-card__text--muted {color: #6c757d;
}/* 响应式布局 */
@media (max-width: 768px) {.my-card__row {flex-direction: column;}.my-card__image-col {max-width: 100%;}.my-card__content-col {padding: 1rem;}
} /* -----------code-block---------------------------------- */
.code-block {position: relative;background-color: #fafafa;border-radius: 4px;margin: 16px 0;
}.code-block__header {display: flex;align-items: center;justify-content: space-between;padding: 8px 16px;background-color: #f5f7fa;border-bottom: 1px solid var(--border-color-light);border-radius: 4px 4px 0 0;
}.code-block__title {font-size: 14px;color: var(--text-secondary);
}.code-block__actions {display: flex;align-items: center;gap: 8px;
}.code-block__button {padding: 4px 8px;font-size: 12px;color: var(--text-secondary);background: transparent;border: none;cursor: pointer;display: flex;align-items: center;gap: 4px;transition: all 0.3s;
}.code-block__button:hover {color: var(--primary-color);
}.code-block__content {padding: 16px;overflow-x: auto;
}.code-block pre {margin: 0;padding: 0;background: transparent;
}.code-block code {display: block;font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size: 14px;line-height: 1.5;color: var(--text-primary);
}/* 复制成功提示 */
.code-block__tooltip {position: absolute;top: 40px;right: 16px;padding: 6px 12px;background-color: var(--success-color);color: white;border-radius: 4px;font-size: 12px;opacity: 0;transform: translateY(-10px);transition: all 0.3s;
}.code-block__tooltip.is-visible {opacity: 1;transform: translateY(0);
}/* 源代码/渲染切换按钮组 */
.code-block__switch-group {display: inline-flex;border: 1px solid var(--border-color);border-radius: 4px;overflow: hidden;
}.code-block__switch {padding: 4px 12px;font-size: 12px;background: transparent;border: none;cursor: pointer;color: var(--text-regular);transition: all 0.3s;
}.code-block__switch.is-active {background-color: var(--primary-color);color: white;
}.code-block__switch:hover:not(.is-active) {background-color: var(--background-color-light);
}/* 展开/收起动画 */
.code-block__wrapper {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;
}.code-block__wrapper.is-expanded {max-height: 1000px;
}/* 源代码/预览切换 */
.code-block__preview,
.code-block__source {display: none;
}.code-block__preview.is-visible,
.code-block__source.is-visible {display: block;
}/* 响应式调整 */
@media screen and (max-width: 768px) {.code-block__header {flex-direction: column;align-items: flex-start;gap: 8px;}.code-block__actions {width: 100%;justify-content: flex-end;}
} 相关文章：
特制一个自己的UI库，只用CSS、图标、emoji图 第二版
图： 代码： index.html <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>M…...
Hologres 介绍
Hologres 是 阿里云 提供的一款 实时数据分析平台，它结合了数据仓库（Data Warehouse）和流式计算（Stream Processing）的优势，专为大规模数据分析和实时数据处理而设计。Hologres 基于 PostgreSQL 构建&#…...
oracle闪回表
文章目录 闪回表案例1：（未清理回收站时的闪回表--成功）案例2（清理回收站时的闪回表--失败）案例3：彻底删除表（不经过回收站--失败）案例4：闪回表之后重新命名新表总结1、删…...
蓝桥与力扣刷题（283 移动零）
题目：给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。 请注意 ，必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入: …...
每日学习30分轻松掌握CursorAI：Cursor AI自然语言编程入门
Cursor AI自然语言编程入门 1. 自然语言编程概述 自然语言编程是一种革命性的编程方式，让开发者能够使用日常语言描述需求，由AI将其转换为可执行的代码。让我们通过系统化的学习来掌握这项技能。 2. 自然语言编程基础 2.1 工作原理流程图 2.2 指令模…...
Ubuntu22.04 离线安装：gcc、make、dkms、build-essential
挂载启动U盘 查看U盘对应的设备名称 sudo fdisk -l 1 # 以下就是需要挂载的U盘 Disk /dev/sdc: 14.9 GiB, 15938355200 bytes, 31129600 sectors Units: sectors of 1 * 512 512 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/O size (minimum/optimal): …...
【竞技宝】CS2:HLTV2024选手排名TOP4-NiKo
北京时间2025年1月11日,HLTV年度选手排名正在持续公布中,今日凌晨正式公布了今年的TOP4选手为G2(目前已转为至Falcons)战队的NiKo。 选手简介 NiKo是一名来自波黑的CS职业选手,现年26岁。作为DOTA2饱负盛名的职业选手,NiKo在CS1.6时代就已经开始征战职业赛场。2012年,年仅15岁…...
Kali系统(Debian 10.3) 遇到的问题
目录 问题一：非问题 kali 基础官网与安装 问题二： 问题三： Kali系统 MySQL问题Cant connect to local MySQL server through socket /run/mysqld/mysqld.sock (2) 问题四：重新安装MySQL 也就是MariaDB(MariaDB 含 MySQL相关…...
【2025最新计算机毕业设计】基于SpringBoot+Vue奶茶点单系统（高质量源码，提供文档，免费部署到本地）
作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容：🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...
洛谷 P1873 [COCI 2011/2012 #5] EKO / 砍树 c语言
题目： P1873 [COCI 2011/2012 #5] EKO / 砍树 - 洛谷 | 计算机科学教育新生态 题目描述 伐木工人 Mirko 需要砍 M 米长的木材。对 Mirko 来说这是很简单的工作，因为他有一个漂亮的新伐木机，可以如野火一般砍伐森林。不过，Mirko…...
【神经网络中的激活函数如何选择？】
在神经网络中，激活函数的选择对于模型的性能和学习效率至关重要。以下是一些关于如何选择激活函数的建议： 一、隐藏层中的激活函数选择 ReLU及其变体： ReLU（Rectified Linear Unit，修正线性单元）ÿ…...
服务器多节点 Grafana、Prometheus 和 Node-Exporter Docker版本部署指南
要在多台服务器上部署 Grafana、Prometheus 和 Node-Exporter，并且其中一台服务器专门用于 Grafana 和 Prometheus 的部署 1. 准备工作 服务器信息： Server 1：用于部署 Grafana 和 Prometheus。 Server 2-n：用于部署 Node-Export…...
＜C++学习＞C++ Boost 算法集合操作教程
C Boost 算法集合操作教程 Boost 提供了一些非常强大的算法库，用于对集合进行高效的操作。这些集合算法库主要提供了便捷的接口，支持常见的集合运算（如并集、交集、差集等）、排列组合和更高级的容器操作。 1. Boost 算法库简介 …...
Jaeger UI使用、采集应用API排除特定路径
Jaeger使用 注： Jaeger服务端版本为：jaegertracing/all-in-one-1.6.0 OpenTracing版本为：0.33.0，最后一个版本，停留在May 06, 2019。最好升级到OpenTelemetry。 Jaeger客户端版本为：jaeger-client-1.3.2。…...
设计一个利用事务特性可以阻塞线程的排他锁，并且通过注解和 AOP 来实现
设计思路： 利用数据库表记录锁标识：通过唯一标识符（如方法名 参数），我们可以在数据库中插入一条记录，表示当前方法正在执行。这条记录需要记录插入时间。 注解：通过注解标识哪些方法需要加锁&a…...
【2024年华为OD机试】 (A卷,100分)- 对称美学（Java JS PythonC/C++）
一、问题描述 题目描述 对称就是最大的美学，现有一道关于对称字符串的美学。已知： 第1个字符串：R第2个字符串：BR第3个字符串：RBBR第4个字符串：BRRBRBBR第5个字符串：RBBRBRRBBRRBRBBR 相信你…...
【教程】数据可视化处理之2024年各省GDP排名预测！
过去的一年里，我国的综合实力显著提升，在新能源汽车、新一代战机、两栖攻击舰、航空航天、芯片电子、装备制造等领域位居全球前列。虽然全国各省市全年的经济数据公布还需要一段时间，但各地的工业发展数据，财政收入数据已大概揭晓…...
Java 将RTF文档转换为Word、PDF、HTML、图片
RTF文档因其跨平台兼容性而广泛使用，但有时在不同的应用场景可能需要特定的文档格式。例如，Word文档适合编辑和协作，PDF文档适合打印和分发，HTML文档适合在线展示，图片格式则适合社交媒体分享。因此我们可能会需要将RT…...
深度学习的原理和应用
一、深度学习的原理 深度学习是机器学习领域的一个重要分支，其原理基于多层神经网络结构和优化算法。以下是深度学习的核心原理： 多层神经网络结构：深度学习模型通常由多层神经元组成，这些神经元通过权重和偏置相互连接。输入数据…...
CAPL语法基础
CAPL语法基础 目录 CAPL语法基础1. 引言2. 数据类型、变量与常量2.1 数据类型2.2 变量2.3 常量2.4 案例1：使用变量和常量计算圆的面积 3. 运算符与表达式3.1 算术运算符3.2 关系运算符3.3 逻辑运算符3.4 位运算符3.5 案例2：使用运算符实现简单的逻辑判断…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。 请求方法 ： GET ：用于获取资源，…...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用： 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests：发送 …...
热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露，数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据，严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能，但SEMR…...
React从基础入门到高级实战：React 实战项目 - 项目五：微前端与模块化架构
React 实战项目：微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇！在前 29 篇文章中，我们从 React 的基础概念逐步深入到高级技巧，涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...
C# winform教程(二)----checkbox
一、作用 提供一个用户选择或者不选的状态，这是一个可以多选的控件。 二、属性 其实功能大差不差，除了特殊的几个外，与button基本相同，所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...