评论
热门评论
全部评论0
本WIKI编辑权限开放，欢迎收藏起来防止迷路，也希望有爱的小伙伴和我们一起编辑哟~
有兴趣想参与WIKI建设的玩家可以加入交流群。赛尔计划WIKI交流群1：818743827
编辑帮助:目录 • BWIKI反馈留言板
本WIKI编辑权限开放，欢迎收藏起来防止迷路，也希望有爱的小伙伴和我们一起编辑哟~ 有兴趣想参与WIKI建设的玩家可以加入交流群。赛尔计划WIKI交流群1：818743827
全站通知：
Widget:沙盒236
刷
历
编
跳到导航
跳到搜索
<!DOCTYPE html> <html lang="en"> <head>
<link rel="stylesheet" href="https://s1.hdslb.com/bfs/templar/york-static/cc-iconfont-2.16.2.css"> <style> div#sidebar-menu { margin-top: 22px; font-size: 14px;
}
div#biliContributors {
display: none;
}
.about-site {
display: none;
}
div#siteNotice {
display: none;
}
div#flowthread {
display: none!important;
}
.sidebar-item-title-wrapper.active a {
color: #00a1d6 !important;
}
.nav-head {
display: none;
}
div#headBox {
display: none;
}
li#pt-notifications-alert {
display: none;
}
/* 游戏页面的样式 */
.bwiki.container {
position: relative;
background-size: cover;
background-position: center;
display: grid;
place-items: center;
padding: 20px;
}
/* 顶部导航栏样式 */
.bwiki-navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
.bwiki-navbar .navbar-left {
display: flex;
align-items: center;
gap: 1rem;
}
.bwiki-navbar .navbar-right {
float: right !important;
margin-right: 7px;
}
.bwiki-navbar a {
text-decoration: none;
color: #333;
}
.user-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.user-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #00a1d6;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8rem;
font-weight: bold;
}
/* 侧边栏样式 */
.sidebar {
width: 250px; /* 默认展开宽度 */
background-color: #ffffff;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
height: 100%;
position: fixed;
top: 31px;
left: 0;
overflow-y: auto;
transition: width 0.3s ease; /* 平滑过渡 */
}
.sidebar.collapsed {
width: 60px; /* 收起宽度 */
}
.sidebar-header {
padding: 1rem;
background-color: #00a1d6;
color: white;
text-align: center;
font-size: 1.5em;
font-weight: bold;
margin: 20px 0;
transition: display 0.3s ease; /* 平滑过渡 */
}
.sidebar.collapsed .sidebar-header {
display: none; /* 收起时隐藏标题 */
}
.sidebar-menu {
padding: 0;
margin: 0;
}
.sidebar-item {
padding: 1rem;
border-bottom: 1px solid #eee;
cursor: pointer;
position: relative;
transition: padding-left 0.3s ease; /* 平滑过渡 */
}
.sidebar.collapsed .sidebar-item {
padding-left: 0.5rem; /* 收起时左侧内边距 */
}
.sidebar-item:hover {
background-color: #f0f0f0;
}
.sidebar-item a {
text-decoration: none;
color: #333;
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
user-select: none;
margin-left: 15px;
}
.sidebar.collapsed .sidebar-item a > span {
display: none; /* 收起时隐藏标题 */
}
.submenu {
display: block; /* 始终展开二级菜单 */
padding-left: 2rem;
background-color: #f9f9f9;
transition: display 0.3s ease; /* 平滑过渡 */
}
.sidebar.collapsed .submenu {
display: none; /* 收起时隐藏二级菜单 */
}
.submenu-item {
padding: 0.5rem;
border-bottom: none;
}
.submenu-item a {
font-size: 14px;
text-decoration: none;
color: #666;
}
.main-content {
padding: 1rem;
flex: 1;
transition: margin-left 0.3s ease; /* 平滑过渡 */
width: 100%;
}
.sidebar.collapsed + .main-content {
}
.content-card {
display: none;
margin-top: 1rem;
padding: 1rem;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.content-title {
font-size: 1.5em;
font-weight: bold;
margin: 20px 0;
}
.content-card.active {
display: block;
}
/* 高亮样式 */
.sidebar-item.active,
.submenu-item.active {
color: #00a1d6;
background-color: #f0f0f0;
}
.sidebar-item.active a,
.submenu-item.active a {
color: #00a1d6 !important;
}
/* 展开/收起按钮样式 */
.toggle-sidebar-button {
position: fixed;
margin-left: 237px; /* 展开时按钮的位置 */
top: 50%;
transform: translateY(-50%);
background-color: #00a1d6;
color: white;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: margin-left 0.3s ease; /* 平滑过渡 */
z-index: 100;
}
.sidebar.collapsed + .toggle-sidebar-button {
margin-left: 46px; /* 收起时按钮的位置 */
}
</style>
</head> <body>
<nav class="bwiki-navbar">
</nav>
<aside class="sidebar">
<button class="toggle-sidebar-button" id="toggle-sidebar-button">
</button>
</aside>
<main class="main-content">
</main>
<script>
// 定义菜单数据
const menuData = [
{
id: "home",
title: "首页",
icon: "bcc-iconfont bcc-icon-ic_home_",
href: "#home",
content: "欢迎来到创作中心！",
submenu: []
},
{
id: "video-management",
title: "视频管理",
icon: "bcc-iconfont bcc-icon-ic_Content_",
href: "#video-management",
content: "这里是视频管理页面。",
submenu: [
{
id: "upload-video",
title: "上传视频",
href: "#upload-video",
content: `
`
},
{
id: "video-list",
title: "视频列表",
href: "#video-list",
content: "查看所有已上传的视频。"
},
{
id: "video-analytics",
title: "视频分析",
href: "#video-analytics",
content: "查看视频的播放量、点赞数等数据。"
}
]
},
{
id: "data-analytics",
title: "数据分析",
icon: "bcc-iconfont bcc-icon-ic_data_",
href: "#data-analytics",
content: "这里是数据分析页面。",
submenu: [
{
id: "playback-stats",
title: "播放量统计",
href: "#playback-stats",
content: `
<style>
.stats-container {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.stats-chart {
height: 300px;
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>
播放量统计
<script src="https://example.com/stats-script.js"><\/script> <script> console.log('播放量统计页面脚本已加载'); <\/script> ` }, { id: "user-growth", title: "用户增长", href: "#user-growth", content: "查看粉丝增长趋势。" }, { id: "revenue-analytics", title: "收益分析", href: "#revenue-analytics", content: "查看收益数据。" } ] }, { id: "fan-management", title: "粉丝管理", icon: "bcc-iconfont bcc-icon-ic_fans_", href: "#fan-management", content: "这里是粉丝管理页面。", submenu: [] }, { id: "settings", title: "设置", icon: "bcc-iconfont bcc-icon-ic_set_1", href: "#settings", content: "这里是设置页面。", submenu: [ { id: "account-settings", title: "账户设置", href: "#account-settings", content: "修改账户信息。" }, { id: "notification-settings", title: "通知设置", href: "#notification-settings", content: "管理通知偏好。" } ] } ];
// 动态生成菜单
const sidebarMenu = document.getElementById('sidebar-menu');
menuData.forEach(menu => {
// 创建一级菜单项的外层 div
const sidebarItem = document.createElement('div');
sidebarItem.className = 'sidebar-item';
// 创建标题部分的 wrapper
const titleWrapper = document.createElement('div');
titleWrapper.className = 'sidebar-item-title-wrapper';
const a = document.createElement('a');
a.href = menu.href;
a.innerHTML = ` ${menu.title}`;
titleWrapper.appendChild(a);
sidebarItem.appendChild(titleWrapper);
if (menu.submenu.length > 0) {
// 创建子菜单容器
const submenu = document.createElement('div');
submenu.className = 'submenu';
menu.submenu.forEach(submenuItem => {
const submenuItemDiv = document.createElement('div');
submenuItemDiv.className = 'submenu-item';
const suba = document.createElement('a');
suba.href = submenuItem.href;
suba.textContent = submenuItem.title;
submenuItemDiv.appendChild(suba);
submenu.appendChild(submenuItemDiv);
});
sidebarItem.appendChild(submenu);
}
sidebarMenu.appendChild(sidebarItem);
});
// 动态生成内容卡片
const mainContent = document.querySelector('.main-content');
menuData.forEach(menu => {
const contentCard = document.createElement('div');
contentCard.className = 'content-card';
contentCard.id = menu.id;
// 处理content中的style和script标签
const contentHTML = menu.content;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = contentHTML;
// 提取并动态加载style标签
const styleElements = tempDiv.getElementsByTagName('style');
for (let i = 0; i < styleElements.length; i++) {
const style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(styleElements[i].innerHTML));
document.head.appendChild(style);
}
// 提取并动态加载script标签
const scriptElements = tempDiv.getElementsByTagName('script');
const scriptURLs = [];
for (let i = 0; i < scriptElements.length; i++) {
const script = scriptElements[i];
if (script.src) {
scriptURLs.push(script.src);
}
}
// 加载script
scriptURLs.forEach(url => {
const script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
document.head.appendChild(script);
});
// 将contentHTML插入到卡片中
contentCard.innerHTML = `
${menu.title}
${contentHTML}
`;
mainContent.appendChild(contentCard);
if (menu.submenu.length > 0) {
menu.submenu.forEach(submenuItem => {
const subContentCard = document.createElement('div');
subContentCard.className = 'content-card';
subContentCard.id = submenuItem.id;
// 处理子菜单的content中的style和script标签
const subContentHTML = submenuItem.content;
const subTempDiv = document.createElement('div');
subTempDiv.innerHTML = subContentHTML;
// 提取并动态加载style标签
const subStyleElements = subTempDiv.getElementsByTagName('style');
for (let i = 0; i < subStyleElements.length; i++) {
const style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(subStyleElements[i].innerHTML));
document.head.appendChild(style);
}
// 提取并动态加载script标签
const subScriptElements = subTempDiv.getElementsByTagName('script');
const subScriptURLs = [];
for (let i = 0; i < subScriptElements.length; i++) {
const script = subScriptElements[i];
if (script.src) {
subScriptURLs.push(script.src);
}
}
// 加载script
subScriptURLs.forEach(url => {
const script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
document.head.appendChild(script);
});
// 将contentHTML插入到卡片中
subContentCard.innerHTML = `
${submenuItem.title}
${subContentHTML}
`;
mainContent.appendChild(subContentCard);
});
}
});
// 获取展开/收起按钮
const toggleSidebarButton = document.getElementById('toggle-sidebar-button');
// 处理展开/收起按钮点击事件
toggleSidebarButton.addEventListener('click', () => {
const sidebar = document.querySelector('.sidebar');
sidebar.classList.toggle('collapsed');
// 更新按钮位置
if (sidebar.classList.contains('collapsed')) {
toggleSidebarButton.style.marginLeft = '46px';
} else {
toggleSidebarButton.style.marginLeft = '237px';
}
});
// 默认显示首页内容
document.getElementById('home').classList.add('active');
document.querySelector('.sidebar-menu > .sidebar-item:nth-child(1) .sidebar-item-title-wrapper').classList.add('active');
// 隐藏所有内容卡片
function hideAllContent() {
document.querySelectorAll('.content-card').forEach(card => card.classList.remove('active'));
}
// 处理一级菜单点击事件
document.querySelectorAll('.sidebar-item-title-wrapper').forEach(titleWrapper => {
titleWrapper.addEventListener('click', e => {
e.preventDefault();
const a = titleWrapper.querySelector('a');
const href = a.getAttribute('href');
const targetId = href.slice(1);
// 如果是无子菜单的菜单项，直接切换内容
if (!titleWrapper.closest('.sidebar-item').querySelector('.submenu')) {
hideAllContent();
document.getElementById(targetId)?.classList.add('active');
} else if (targetId !== 'toggle-sidebar') {
// 如果是一级菜单且有子菜单，则显示第一个子菜单项的内容
const submenu = titleWrapper.closest('.sidebar-item').querySelector('.submenu');
const firstSubMenu = submenu.querySelector('.submenu-item a');
if (firstSubMenu) {
const firstSubMenuHref = firstSubMenu.getAttribute('href');
const firstSubMenuId = firstSubMenuHref.slice(1);
hideAllContent();
document.getElementById(firstSubMenuId)?.classList.add('active');
}
}
// 更新选中状态
document.querySelectorAll('.sidebar-item-title-wrapper').forEach(w => w.classList.remove('active'));
document.querySelectorAll('.submenu-item').forEach(li => li.classList.remove('active'));
titleWrapper.classList.add('active');
});
});
// 处理子菜单点击事件
document.querySelectorAll('.submenu-item a').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
const href = a.getAttribute('href');
const targetId = href.slice(1);
hideAllContent();
document.getElementById(targetId)?.classList.add('active');
// 更新选中状态
const currentSubItem = a.closest('.submenu-item');
document.querySelectorAll('.submenu-item').forEach(li => li.classList.remove('active'));
currentSubItem.classList.add('active');
// 更新父级菜单的选中状态
const parentMenuItemTitleWrapper = currentSubItem.closest('.sidebar-item').querySelector('.sidebar-item-title-wrapper');
document.querySelectorAll('.sidebar-item-title-wrapper').forEach(w => w.classList.remove('active'));
parentMenuItemTitleWrapper.classList.add('active');
});
});
</script>
</body> </html>
沪公网安备 31011002002714 号