特制一个自己的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…...
51_Lua面向对象编程
面向对象编程（Object Oriented Programming，OOP）是一种非常流行的计算机编程架构。像C++、Java、Objective-C、Smalltalk、C#、Ruby等编程语言都支持面向对象编程。 1.面向对象编程特性 面向对象编程是一种编程范式，它使用“对象”来设计软件。对象是数据和行为的封装单元…...
Kafka——两种集群搭建详解 k8s
1、简介 Kafka是一个能够支持高并发以及流式消息处理的消息中间件，并且Kafka天生就是支持集群的，今天就主要来介绍一下如何搭建Kafka集群。 Kafka目前支持使用Zookeeper模式搭建集群以及KRaft模式（即无Zookeeper）模式这两种模式搭…...
OPT: Open Pre-trained Transformer语言模型
摘要 大规模语言模型通常需要数十万计算日的训练时间，展现了在零样本和小样本学习中的显著能力。鉴于其计算成本之高，这些模型在没有大量资本投入的情况下难以复现。对于那些通过API提供的少数模型，研究者无法获取完整的模型权重，…...
开源模型应用落地-LangChain高阶-记忆组件-RedisChatMessageHistory正确使用（八）
一、前言 LangChain 的记忆组件发挥着至关重要的作用，其旨在协助大语言模型（LLM）有效地留存历史对话信息。通过这一功能，使得大语言模型在对话过程中能够更出色地维持上下文的连贯性和一致性，进而能够像人类的记忆运作方式那样，进行更为自然、流畅且智能化的交互。 它仿佛…...
http和https有哪些不同
http和https有哪些不同 1.数据传输的安全性：http非加密，https加密 2.端口号：http默认80端口，https默认443端口 3.性能：http基于tcp三次握手建立连接，https在tcp三次握手后还有TLS协议的四次握手确认加密…...
UML系列之Rational Rose笔记七：状态图
一、新建状态图 依旧是新建statechart diagram； 二、工作台介绍 接着就是一个状态的开始：开始黑点依旧可以从左边进行拖动放置： 这就是状态的开始，和活动图泳道图是一样的；只能有一个开始，但是可以有多个…...
一个使用 Golang 编写的新一代网络爬虫框架，支持JS动态内容爬取
大家好，今天给大家分享一个由ProjectDiscovery组织开发的开源“下一代爬虫框架”Katana，旨在提供高效、灵活且功能丰富的网络爬取体验，适用于各种自动化管道和数据收集任务。 项目介绍 Katana 是 ProjectDiscovery 精心打造的命令行界面&…...
mycat介绍与操作步骤
文章目录 1.分库分表2.mycat 入门2.1 概述2.2 案例：水平分表1）准备工作2）配置3）启动并测试 3.mycat 配置详解3.1 schema.xml3.2 rule.xml3.3 server.xml 4.mycat 分片：垂直拆分1）准备工作2）配置…...
【Go】：图片上添加水印的全面指南——从基础到高级特性
前言 在数字内容日益重要的今天，保护版权和标识来源变得关键。为图片添加水印有助于声明所有权、提升品牌认知度，并防止未经授权的使用。本文将介绍如何用Go语言实现图片水印，包括静态图片和带旋转、倾斜效果的文字水印，帮助您有…...
R语言的语法糖
R语言的语法糖 引言 在编程语言中，所谓的“语法糖”是指那些使得程序员能够以更简洁、直观的方式书写代码的语法形式。R语言作为一种用于统计分析和数据可视化的编程语言，具有丰富的功能和灵活的语法。本文将深入探讨R语言中的语法糖，帮助读…...
乙游的尽头是虚拟偶像吗？
眼花了，竟然看到二次元乙游男主角走红毯了。 12月20日，某国际知名奢侈品品牌宣布，《恋与深空》四位男主将受邀出席品牌在上海举办的TF戏瘾之夜活动，并公开了四位男主的红毯照片。 没有真人实体的乙游男主走红毯？这是…...
【源码+文档+调试讲解】农产品研究报告管理系统
摘 要 农产品研究报告管理系统是一个旨在收集、整理、存储和分析农产品相关研究数据的综合性平台。农产品研究报告管理系统通常包含一个强大的数据库，它能够处理大量的研究数据，并对这些数据进行有效的管理和备份。农产品研究报告管理系统是现代农业科学…...
SQL UNION 操作符
SQL UNION 操作符 SQL UNION 操作符用于合并两个或多个 SELECT 语句的结果集。它将多个结果集组合成一个单独的结果集，并去除重复的行。为了使用 UNION，每个 SELECT 语句必须具有相同的列数，并且对应列的数据类型必须兼容。 语法 SELECT c…...
springboot vue uniapp 仿小红书 1:1 还原 （含源码演示）
线上预览: 移动端 http://8.146.211.120:8081/ 管理端 http://8.146.211.120:8088/ 小红书凭借优秀的产品体验 和超高人气 目前成为笔记类产品佼佼者 此项目将详细介绍如何使用Vue.js和Spring Boot 集合uniapp 开发一个仿小红书应用，凭借uniapp 可以在h5 小程序 app…...
扩散模型学习
扩散模型学习 DDPM（参考1） DDIM（参考1，参考2）...
【面试】MySQL 最左匹配原则
MySQL的最左匹配原则是在使用联合索引时非常重要的概念，理解并合理运用该原则能显著提升查询性能。以下从多个方面详细介绍： 1. 联合索引结构基础 联合索引是对多个列创建的索引。在MySQL中，联合索引以多列值的组合形式，按照创建…...
Mac 删除ABC 输入法
参考链接：百度安全验证 Mac下删除系统自带输入法ABC，正解！_mac删除abc输入法-CSDN博客 ABC 输入法和搜狗输入法等 英文有冲突~~ 切换后还会在英文状态，可以删除 ；可能会对DNS 输入有影响，但是可以通过复…...
Nginx代理同域名前后端分离项目的完整步骤
前后端分离项目，前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。 以 vue php 项目为例。直接上 server 模块的 nginx 配置。 server{ listen 80; #listen [::]:80 default_server ipv6onlyon; server_name demo.com;#二配置项目域名 index index.ht…...
21、Transformer Masked loss原理精讲及其PyTorch逐行实现
1. Transformer结构图 2. python import torch import torch.nn as nn import torch.nn.functional as Ftorch.set_printoptions(precision3, sci_modeFalse)if __name__ "__main__":run_code 0batch_size 2seq_length 3vocab_size 4logits torch.randn(batch…...
CNN张量输入形状和特征图
CNN张量输入形状和特征图 这个是比较容易理解的张量的解释，比较直观 卷积神经网络 在这个神经网络编程系列中，我们正在逐步构建一个卷积神经网络（CNN），所以让我们看看CNN的张量输入。 在最后两篇文章中&…...
RK3399开发板Linux实时性改造
本次测试基于NanoPC-T4开发板（国产化处理器RK3399），4.19.111内核Xenomai实时性改造测试。 Xenomai下载网站：https://xenomai.org/downloads/ NanoPC-T4网站：https://wiki.friendlyarm.com/wiki/index.php/NanoPC-T4/z…...
ASP.NET Core 中的高效后台任务管理
一、引言 在当今快速发展的 Web 开发领域，ASP.NET Core 凭借其卓越的性能、强大的功能和高度的灵活性，已然成为众多开发者构建现代 Web 应用程序的首选框架。它不仅能够高效地处理各种复杂的业务逻辑，还为开发者提供了丰富多样的工具和功能&…...
Spring Boot 2 学习指南与资料分享
Spring Boot 2 学习资料 Spring Boot 2 学习资料 Spring Boot 2 学习资料 在当今竞争激烈的 Java 后端开发领域，Spring Boot 2 凭借其卓越的特性，为开发者们开辟了一条高效、便捷的开发之路。如果你渴望深入学习 Spring Boot 2，以下这份精心…...
知识追踪模型DKT,DLKT详解及代码复现
定义与应用 知识追踪是一种 教育技术领域的重要方法 ，旨在通过分析学生的学习行为和表现，预测其掌握特定知识点的程度。这种方法的核心在于建立能够反映学习者认知状态的动态模型，从而实现对学生学习进度的实时监控和个性化指导。 DKT模型 DKT模型 是最早的知识追踪模型之…...
一类特殊积分的计算
一类特殊积分的计算 前言一、第一个引理二、第二个引理三、积分的计算后记 前言 今天讨论的这类积分是十分有趣的，在 Mathematics Stack Exchange 看见后，便打算在此将其中的计算过程完善一下。在本篇文章中，我们重点考虑求解如下积分&#…...
VScode 配置 C语言环境
遇到的问题集合 mingw官方下载网站（https://sourceforge.net/projects/mingw-w64/files/）更新之后，与网上大多数教程上写的界面不同了。 网上大多数教程让下载这个： 但是现在找不到这个文件。 写hello.c文件时，报错&…...
spring mvc源码学习笔记之十一
pom.xml 内容如下 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/P…...
小结：路由器和交换机的指令对比
路由器和交换机的指令有一定的相似性，但也有明显的区别。以下是两者指令的对比和主要差异： 相似之处 基本操作 两者都支持类似的基本管理命令，比如： 进入系统视图：system-view查看当前配置：display current…...
ffmpeg7.0 aac转pcm
#pragma once #define __STDC_CONSTANT_MACROS #define _CRT_SECURE_NO_WARNINGSextern "C" { #include "libavcodec/avcodec.h" }//缓冲区大小（缓存5帧数据） #define AUDIO_INBUF_SIZE 40960 /*name depthu8 8s16 …...
C#读取本地网络配置信息全攻略
一、引言 在当今数字化时代，网络已深度融入我们生活与工作的方方面面。对于软件开发而言，掌握本地计算机的网络配置信息显得尤为关键。想象一下，你正在开发一款网络诊断工具，需要精准定位网络连接问题，此时 IP 地址、…...
解决aerich init -t xx 报错ModuleNotFoundError: No module named ‘tomli_w‘
今天在学习fastapi的时候，发现一款数据库迁移工具，通过这个工具可以根据模型类来对数据库做出改变。 随跟着学: 在执行 aerich init -t settings.TORTOISE_ORM的时候， 彼其娘之。。 报了一些错误： Traceback (most recent ca…...
python检测gitlab中某个标签在一个月内添加和移除了多少次
可以通过 Python 脚本和 GitLab API 检测一个标签在一个月内被添加和移除的次数。以下是实现的步骤和示例代码： 步骤 获取 GitLab API 访问令牌：在 GitLab 中生成一个 Personal Access Token。设置时间范围：确定一个月的时间范围。调用 Git…...
学习模板之一
学习目标： 提示：这里可以添加学习目标 例如： 一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 搭建 Java 开发环境掌握 Java 基本语法掌握条件语句掌握循环语句 学习时间&#x…...
2025-微服务—SpringCloud-1~3
2025-微服务—SpringCloud 第一章、从Boot和Cloud版本选型开始说起1、Springboot版本2、Springcloud版本3、Springcloud Alibaba4、本次讲解定稿版 第二章 关于Cloud各种组件的停更/升级/替换1、微服务介绍2、SpringCloud是什么？能干吗？产生背景…...
centos7.6 安装nginx 1.21.3与配置ssl
1 安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel2 下载Nginx wget http://nginx.org/download/nginx-1.21.3.tar.gz3 安装目录 mkdir -p /data/apps/nginx4 安装 4.1 创建用户 创建用户nginx使用的nginx用户。 #添加www组 # groupa…...
PL/SQL语言的数据库交互
PL/SQL语言的数据库交互 引言 在当今的信息化时代，数据库管理系统（DBMS）在各行各业中扮演着至关重要的角色。为了高效地与数据库进行交互，许多程序员、数据库管理员和系统分析师选择使用PL/SQL（Procedural Language/…...
ARP欺骗
文章目录 ARP协议ARP欺骗原理断网攻击ARP欺骗(不断网) ARP协议 在局域网中，网络传输的是帧，帧里面有目标主机的MAC地址。arp协议负责将IP地址解析成对应的MAC地址 ARP欺骗原理 即通过伪造IP地址和MAC地址实现ARP欺骗，能够在网络中产生大量…...
Genymotion配套VirtualBox所在地址
在 Genymotion打开虚拟机前需要先打开VirtualBox中的虚拟机 C:\Program Files\Oracle\VirtualBox\VirtualBox.exe 再开启genymotion中的虚拟机开关...
TPS61022 PFM的机制以及TPS61xxx转换器的PFM与PWM之间的负载阈值
引言 TI 的大多数 TPS61xxx 低压升压转换器都配备了 PSM（省电模式），以帮助提高轻负载效率。但是，当它处于重负载状态时，输出纹波通常会高于 PWM。此外，PSM 和 PWM 之间的负载电流阈值不会直观地写入数据表中…...
1. npm 常用命令详解
npm 常用命令详解 npm（Node Package Manager）是 Node.js 的包管理工具，用于安装和管理 Node.js 应用中的依赖库。下面是 npm 的一些常用命令及其详细解释和示例代码。 镜像源 # 查询当前使用的镜像源 npm get registry# 设置为淘宝镜像源 …...
黑马linux入门笔记（01）初始Linux Linux基础命令 用户和权限 实用操作
B站 黑马程序员 的视频 BV1n84y1i7td 黑马程序员新版Linux零基础快速入门到精通，全涵盖linux系统知识、常用软件环境部署、Shell脚本、云平台实践、大数据集群项目实战等 增强自控力 冥想慢呼吸绿色锻炼充分休息减少决策次数优先做重要的事情(早晨)融入强自控群控…...
Markdown中甘特图的使用
Markdown中甘特图的使用 1. 前言2. 语法详解2.1 甘特图语法 3. 使用场景及实例4. 小结5. 其他文章快来试试吧🖊️ Markdown中甘特图的使用 👈点击这里也可查看 1. 前言 Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可…...
Django创建数据表、模型、ORM操作
1、创建项目 django-admin startproject PersonInfosProject 2、创建项目应用，进入PersonInfosProject文件夹，新建index应用，使用命令 cd PersonInfosProject python manage.py startapp 新建完成之后的目录结构 3、新建数据模型…...
No. 31 笔记 | Web安全-SQL手工注入技术学习 Part 2
一、研究背景 背景介绍 SQL注入是一种常见且高危的Web安全漏洞。攻击者可以通过构造恶意SQL查询语句来绕过验证机制，执行未授权操作，如获取敏感信息、篡改数据库内容甚至控制服务器。 研究内容 本笔记探讨以下数据库的手工注入技术： MySQLAc…...
Spring Boot中的扫描注解如何使用
在 Spring Boot 中，扫描注解是指通过注解来告诉 Spring 框架应该扫描哪些包、哪些类或哪些特定的组件，并将其作为 Spring 容器中的 bean 进行管理。Spring Boot 主要通过以下几种注解来实现自动扫描： ComponentScanSpringBootApplicationCom…...
用 Python 从零开始创建神经网络（十九）：真实数据集
真实数据集 引言数据准备数据加载数据预处理数据洗牌批次（Batches）训练（Training）到目前为止的全部代码： 引言 在实践中，深度学习通常涉及庞大的数据集（通常以TB甚至更多为单位）&am…...
深入探讨 Vue.js 的动态组件渲染与性能优化
Vue.js 作为一款前端领域中备受欢迎的渐进式框架，以其简单优雅的 API 和灵活性受到开发者的喜爱。在开发复杂应用时，动态组件渲染是一项极其重要的技术，它能够在页面中动态地加载或切换组件，从而显著提升应用的灵活性与用户体验。…...
qml TextArea、TextEdit、TextField、TextInput的区别于联系
在 QML 中，TextArea、TextEdit、TextField 和 TextInput 都是用来接收用户输入的控件，但它们之间有一些区别和联系。 区别： TextArea：用于多行文本输入，可以接收多行文本输入。TextEdit：也用于多行文本输入…...
《探索 PC 端的开源神经网络多模态模型宝藏》
《探索 PC 端的开源神经网络多模态模型宝藏》 一、多模态模型：开启智能交互新纪元二、主流 PC 端开源多模态模型大赏1. Obsidian：轻量级多模态先锋2. GLM-Edge 系列：移动端与 PC 端的全能选手3. Minicpm-llama3-v2.6：紧凑高效的多…...