feat(coverpage): 添加 Mac 平台下载下拉菜单
- 在封面页添加下拉菜单组件，支持 Mac Intel 芯片和 Apple 芯片两种下载选项 - 实现下拉菜单的 JavaScript 交互功能，包括展开收起和点击事件处理 - 添加下拉菜单的 CSS 样式，包含悬停效果和响应式布局 - 在 index.html 中引入新的 dropdown.js 脚本文件 - 实现移动端适配，确保下拉菜单在不同屏幕尺寸下的正常显示
This commit is contained in:
parent
555b9e76f0
commit
4e2a7d7498
@ -212,6 +212,135 @@ background-color: #ccc;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/* 下拉框样式 */
|
||||
.cover-main .buttons .dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-toggle {
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 25px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
color: var(--theme-color);
|
||||
background: #fff;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
vertical-align: baseline;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-toggle:before,
|
||||
.cover-main .buttons .dropdown-toggle:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 2px solid var(--theme-color);
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-toggle:after {
|
||||
background: var(--theme-color);
|
||||
transform: translateX(-101%);
|
||||
transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-toggle:hover,
|
||||
.cover-main .buttons .dropdown.active .dropdown-toggle {
|
||||
color: white !important;
|
||||
box-shadow: 0 5px 16px rgba(229, 9, 20, 0.3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-toggle:hover:after,
|
||||
.cover-main .buttons .dropdown.active .dropdown-toggle:after {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-toggle span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
min-width: 200px;
|
||||
background: #fff;
|
||||
border: 2px solid var(--theme-color);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 16px rgba(229, 9, 20, 0.3);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown.active .dropdown-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-menu a {
|
||||
display: block;
|
||||
padding: 12px 20px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: var(--theme-color);
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-menu a:before,
|
||||
.cover-main .buttons .dropdown-menu a:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-menu a:hover {
|
||||
background: var(--theme-color);
|
||||
color: white !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-menu a:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-menu a:last-child {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-menu a:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(229, 9, 20, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/****** Sidebar ******/
|
||||
.sidebar .app-name-link img {
|
||||
@ -717,6 +846,20 @@ body .sidebar-toggle span:nth-child(3) {
|
||||
.buttons a {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-menu {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-bottom: 20%;
|
||||
padding: 0 2%;
|
||||
@ -739,6 +882,20 @@ body .sidebar-toggle span:nth-child(3) {
|
||||
margin: 0.2rem 1rem;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown {
|
||||
width: 50%;
|
||||
margin: 0.2rem 1rem;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cover-main .buttons .dropdown-menu {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.luckday-video {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
87
_config/js/dropdown.js
Normal file
87
_config/js/dropdown.js
Normal file
@ -0,0 +1,87 @@
|
||||
// 下拉框交互功能
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], function(hook) {
|
||||
let clickHandler = null;
|
||||
|
||||
// 使用事件委托的方式初始化下拉框
|
||||
function initDropdowns() {
|
||||
// 如果已经初始化过，先移除旧的事件监听器
|
||||
if (clickHandler) {
|
||||
document.removeEventListener('click', clickHandler, true);
|
||||
}
|
||||
|
||||
// 使用事件委托处理下拉框点击
|
||||
clickHandler = function(e) {
|
||||
// 检查是否点击了下拉按钮或其子元素
|
||||
const toggle = e.target.closest('.dropdown-toggle');
|
||||
if (toggle) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const dropdown = toggle.closest('.dropdown');
|
||||
if (!dropdown) return;
|
||||
|
||||
// 关闭其他打开的下拉框
|
||||
const allDropdowns = document.querySelectorAll('.dropdown');
|
||||
allDropdowns.forEach(function(otherDropdown) {
|
||||
if (otherDropdown !== dropdown) {
|
||||
otherDropdown.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 切换当前下拉框
|
||||
dropdown.classList.toggle('active');
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否点击了下拉菜单项或其子元素
|
||||
const menuItem = e.target.closest('.dropdown-menu a');
|
||||
if (menuItem) {
|
||||
const dropdown = menuItem.closest('.dropdown');
|
||||
if (dropdown) {
|
||||
// 关闭下拉框（但允许链接正常跳转）
|
||||
setTimeout(function() {
|
||||
dropdown.classList.remove('active');
|
||||
}, 100);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 点击页面其他地方时关闭所有下拉框
|
||||
if (!e.target.closest('.dropdown')) {
|
||||
const allDropdowns = document.querySelectorAll('.dropdown');
|
||||
allDropdowns.forEach(function(dropdown) {
|
||||
dropdown.classList.remove('active');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', clickHandler, true);
|
||||
}
|
||||
|
||||
// 在 ready 时初始化
|
||||
hook.ready(function() {
|
||||
// 延迟初始化，确保 coverpage 内容已渲染
|
||||
setTimeout(function() {
|
||||
const dropdowns = document.querySelectorAll('.dropdown');
|
||||
if (dropdowns.length > 0) {
|
||||
initDropdowns();
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// 监听 docsify 的内容更新（用于动态加载的内容）
|
||||
hook.doneEach(function() {
|
||||
// 延迟初始化，确保内容已渲染
|
||||
setTimeout(function() {
|
||||
const dropdowns = document.querySelectorAll('.dropdown');
|
||||
if (dropdowns.length > 0) {
|
||||
initDropdowns();
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
@ -98,7 +98,13 @@
|
||||
<div class="buttons">
|
||||
<a href="./_media/package/win-luckday-screen.zip" rel="noopener" target="_blank"><span>Win 下载</span>
|
||||
</a>
|
||||
<a href="./_media/package/mac-luckday-screen.zip" rel="noopener" target="_blank"><span>Mac 下载</span></a>
|
||||
<div class="dropdown">
|
||||
<a class="dropdown-toggle" href="javascript:void(0)"><span>Mac 下载</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="./_media/package/mac-luckday-screen.zip" rel="noopener" target="_blank"><span>Mac (Intel 芯片)</span></a>
|
||||
<a href="./_media/package/mac-arm64-luckday-screen.zip" rel="noopener" target="_blank"><span>Mac (Apple 芯片)</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="buttons">
|
||||
<a class="disabled" href="javascript:void(0)"><span>Win 下载</span></a>
|
||||
|
||||
@ -57,6 +57,7 @@
|
||||
<script src="./_config/js/prism-java.min.js"></script>
|
||||
<script src="./_config/js/prism-python.min.js"></script>
|
||||
<script src="./_config/js/header-scroll.js"></script>
|
||||
<script src="./_config/js/dropdown.js"></script>
|
||||
|
||||
<!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user