feat: 播放控制移入页眉 + 媒体铺满智能裁切
页眉播放控制（仅媒体轮播页）： - 新增 MediaHeaderControls：播放/暂停、上一段/下一段、序号、当前文件名（点击进后台）、声音解锁 - 新增 mediaControl 共享状态桥：媒体页同步播放状态，页眉订阅渲染并下发指令 - 移除媒体页底部控制区，媒体区保持纯净全屏 媒体展示： - .ms-media 改为 object-fit: cover，填满整个容器并智能居中裁切（原 contain 留黑边） 修复： - MediaScreen useEffect 依赖数组引用后声明函数导致的 TDZ 崩溃 - 清理 MediaScreen 中不再使用的 Icon/cleanName/togglePlayPause
This commit is contained in:
Pine
@@ -2461,3 +2461,96 @@
|
||||
.bd-cell-jobs { grid-column: 5; }
|
||||
|
||||
/* 底部园区概览（见 .bd-strip 区块） */
|
||||
|
||||
/* ============ 页眉媒体播放控制（仅媒体轮播页） ============ */
|
||||
.bd-hd-media {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(47, 107, 255, 0.14);
|
||||
border-radius: 9px;
|
||||
flex-shrink: 0;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
.bd-hd-media-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--bd-blue);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.bd-hd-media-btn:hover {
|
||||
background: rgba(47, 107, 255, 0.12);
|
||||
}
|
||||
.bd-hd-media-btn.primary {
|
||||
color: #fff;
|
||||
background: linear-gradient(140deg, var(--bd-blue), var(--bd-cyan));
|
||||
box-shadow: 0 3px 8px rgba(47, 107, 255, 0.3);
|
||||
}
|
||||
.bd-hd-media-btn.warn {
|
||||
color: var(--bd-orange);
|
||||
}
|
||||
.bd-hd-media-num {
|
||||
font-family: "JetBrains Mono", "Oswald", monospace;
|
||||
font-size: 11px;
|
||||
color: var(--bd-sub);
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 2px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.bd-hd-media-num b {
|
||||
font-size: 12px;
|
||||
color: var(--bd-ink);
|
||||
}
|
||||
.bd-hd-media-num em {
|
||||
font-style: normal;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bd-hd-media-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
max-width: 160px;
|
||||
padding: 3px 8px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
color: var(--bd-sub);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bd-hd-media-name > span:last-child {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.bd-hd-media-name:hover {
|
||||
background: rgba(47, 107, 255, 0.08);
|
||||
color: var(--bd-ink);
|
||||
}
|
||||
.bd-hd-media-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--bd-green);
|
||||
box-shadow: 0 0 6px rgba(23, 178, 106, 0.8);
|
||||
animation: bdPulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
/* 窄屏：页眉控制区收起名称，保留核心按钮 */
|
||||
@media (max-width: 1280px) {
|
||||
.bd-hd-media-name { display: none; }
|
||||
}
|
||||
|
||||
+4
-123
@@ -67,13 +67,14 @@
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
/* 媒体播放器（铺满媒体区，等比适配） */
|
||||
/* 媒体播放器（填满整个媒体区，等比裁切铺满） */
|
||||
.ms-media {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -109,127 +110,7 @@
|
||||
border-bottom: 1px solid rgba(47, 107, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 右下角轻量播放控制（弱化悬浮） */
|
||||
.ms-controls {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 14px;
|
||||
left: auto;
|
||||
transform: none;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
border: 1px solid rgba(120, 160, 220, 0.16);
|
||||
border-radius: 30px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: 0 6px 22px rgba(56, 100, 170, 0.12);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.ms-controls.visible { opacity: 1; }
|
||||
|
||||
.ms-play {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(140deg, var(--bd-blue, #2f6bff), var(--bd-cyan, #4cc2ff));
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.ms-play:hover { transform: scale(1.08); }
|
||||
|
||||
.ms-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.ms-nav button {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(47, 107, 255, 0.18);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
color: var(--bd-blue, #2f6bff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.ms-nav button:hover {
|
||||
background: rgba(47, 107, 255, 0.12);
|
||||
border-color: rgba(47, 107, 255, 0.5);
|
||||
}
|
||||
.ms-nav-num {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 3px;
|
||||
font-family: "JetBrains Mono", "Oswald", monospace;
|
||||
}
|
||||
.ms-nav-num b {
|
||||
font-size: 13px;
|
||||
color: var(--bd-ink, #1d2c44);
|
||||
}
|
||||
.ms-nav-num em {
|
||||
font-style: normal;
|
||||
font-size: 10.5px;
|
||||
color: var(--bd-sub, #7d8fa9);
|
||||
}
|
||||
|
||||
.ms-now {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid rgba(47, 107, 255, 0.12);
|
||||
}
|
||||
.ms-now-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--bd-green, #17b26a);
|
||||
box-shadow: 0 0 8px rgba(23, 178, 106, 0.8);
|
||||
animation: msPulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes msPulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.75); }
|
||||
}
|
||||
.ms-now-name {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--bd-sub, #7d8fa9);
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 声音提示 */
|
||||
.ms-sound {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 11px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #4a5b76;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border: 1px solid rgba(47, 107, 255, 0.14);
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ms-sound .appica-ico { color: var(--bd-blue, #2f6bff); }
|
||||
/* 播放控制已上移页眉（见 datascreen.css .bd-hd-media） */
|
||||
|
||||
/* 页脚 */
|
||||
.ms-page .bd-strip { z-index: 10; position: relative; }
|
||||
|
||||
Reference in New Issue
Block a user