特制一个自己的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：使用运算符实现简单的逻辑判断…...
《Playwright：微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT，橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版：职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生，小白用户，想学习知识的 有点基础，想要通过项…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...
Sklearn 机器学习 缺失值处理 获取填充失值的统计值
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...