冯杨

基础提交

... ... @@ -45,11 +45,12 @@
/* 切换按钮样式 */
#sidebar-toggle {
position: absolute;
bottom: 15px;
left: -18px;
width: 36px;
height: 36px;
position: fixed;
top: 50%;
left: -24px;
transform: translateY(-50%);
width: 48px;
height: 48px;
background-color: #4285f4;
color: white;
border: none;
... ... @@ -59,19 +60,18 @@
justify-content: center;
cursor: pointer;
z-index: 100;
font-size: 16px;
font-size: 20px;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
#sidebar-toggle:hover {
background-color: #3367d6;
transform: scale(1.05);
#sidebar-toggle {
left: 0;
}
/* 收缩状态下的切换按钮位置调整 */
#sidebar.collapsed #sidebar-toggle {
left: -18px;
left: 0;
background-color: #4285f4;
}
... ... @@ -91,77 +91,8 @@
min-height: 100vh; /* 确保至少有足够的高度 */
}
/* 悬浮展开按钮样式 */
#expand-sidebar {
position: fixed;
bottom: 15px;
left: 15px;
width: 36px;
height: 36px;
background-color: #4285f4;
color: white;
border: none;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 40;
font-size: 16px;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
#expand-sidebar:hover {
background-color: #3367d6;
transform: scale(1.05);
}
/* 侧边栏收缩时显示展开按钮 */
#sidebar.collapsed ~ #main-content #expand-sidebar {
display: flex;
}
/* 确保侧边栏收缩时视频容器仍然可见 */
#sidebar.collapsed ~ #main-content #media {
display: block !important;
width: auto;
height: auto;
max-height: 90vh;
max-width: 90vw;
aspect-ratio: 9/16; /* 保持竖屏比例 */
z-index: 1000;
visibility: visible !important;
position: relative;
opacity: 1 !important;
}
/* 侧边栏收缩时主内容区域的调整 */
#sidebar.collapsed + #main-content {
margin-left: 0;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
padding: 20px; /* 添加内边距 */
width: 100%; /* 确保占满整个宽度 */
height: 100vh; /* 确保占满整个高度 */
overflow: visible; /* 防止内容被裁剪 */
}
/* 侧边栏收缩时媒体容器的调整 */
#sidebar.collapsed + #main-content #media,
#sidebar.collapsed ~ #main-content #media {
width: auto;
height: auto;
max-height: 90vh;
max-width: 90vw;
aspect-ratio: 9/16; /* 保持竖屏比例 */
display: block !important; /* 确保显示 */
z-index: 1000; /* 进一步提高z-index确保在最上层 */
position: relative;
visibility: visible !important;
opacity: 1 !important;
}
/* 按钮样式 */
button {
... ... @@ -313,7 +244,6 @@
<!-- 主内容区域 -->
<div id="main-content">
<button id="expand-sidebar"></button>
<div id="media">
<h2>艺云展陈</h2>
<audio id="audio" autoplay="true"></audio>
... ...