refactor: 页眉由 App 统一注入（ScreenLayout），三页共用一致页眉
- 新增 ScreenLayout 布局路由：注入共享 PageHeader + 全局左右键循环导航 - PageHeader 无 props，按路由自动识别状态（数据实时/3D 实时/媒体播放） - DataScreen / DigitalTwin / MediaScreen 移除各自页眉，避免重复 - 页脚按页面按需保留（数据大屏 + 媒体轮播，数字孪生无） - 管理后台不参与导航循环；旧 /screen2 路由移除 - 补齐 MediaScreen 音量/播放/翻页图标与浅色主题样式
This commit is contained in:
Pine
@@ -0,0 +1,361 @@
|
||||
/* =========================================================
|
||||
MediaScreen —— 大屏媒体轮播（与数据大屏统一浅色科技风）
|
||||
配色沿用 datascreen 的 bd- 变量体系
|
||||
========================================================= */
|
||||
.ms-page {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--bd-ink, #1d2c44);
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* 背景网格（与主体一致） */
|
||||
.ms-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
background-image:
|
||||
repeating-linear-gradient(to right, rgba(47, 107, 255, 0.045) 0 1px, transparent 1px 52px),
|
||||
repeating-linear-gradient(to bottom, rgba(47, 107, 255, 0.045) 0 1px, transparent 1px 52px);
|
||||
}
|
||||
.ms-orb {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
filter: blur(90px);
|
||||
}
|
||||
.ms-orb.orb-1 {
|
||||
width: 420px; height: 420px;
|
||||
top: -120px; right: -100px;
|
||||
background: rgba(76, 194, 255, 0.14);
|
||||
}
|
||||
.ms-orb.orb-2 {
|
||||
width: 380px; height: 380px;
|
||||
bottom: -120px; left: -80px;
|
||||
background: rgba(47, 107, 255, 0.10);
|
||||
}
|
||||
|
||||
/* 顶栏与页脚沿用 datascreen 的 bd-header / bd-strip */
|
||||
.ms-page .bd-header { z-index: 10; }
|
||||
|
||||
/* 主体：媒体区 */
|
||||
.ms-main {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
z-index: 3;
|
||||
margin: clamp(10px, 1.4vw, 20px);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(120, 160, 220, 0.14);
|
||||
box-shadow:
|
||||
0 10px 30px rgba(56, 100, 170, 0.07),
|
||||
0 1px 0 rgba(255, 255, 255, 0.9) inset;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
/* 媒体播放器（铺满媒体区，等比适配） */
|
||||
.ms-media {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 加载中 */
|
||||
.ms-loader {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 26px;
|
||||
background: rgba(247, 251, 255, 0.6);
|
||||
}
|
||||
.ms-loader-ring {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(47, 107, 255, 0.2);
|
||||
border-top-color: var(--bd-blue, #2f6bff);
|
||||
animation: msSpin 1s linear infinite;
|
||||
box-shadow: 0 0 30px rgba(47, 107, 255, 0.15);
|
||||
}
|
||||
@keyframes msSpin { to { transform: rotate(360deg); } }
|
||||
.ms-loader-text {
|
||||
font-size: 13px;
|
||||
color: var(--bd-sub, #7d8fa9);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.ms-loader-text a {
|
||||
color: var(--bd-blue, #2f6bff);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(47, 107, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 中央播放控制层（悬浮） */
|
||||
.ms-controls {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 22px;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 18px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(120, 160, 220, 0.2);
|
||||
border-radius: 40px;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 12px 40px rgba(56, 100, 170, 0.18);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.ms-controls.visible { opacity: 1; }
|
||||
|
||||
.ms-play {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
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 6px 20px rgba(47, 107, 255, 0.4);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.ms-play:hover { transform: scale(1.08); }
|
||||
|
||||
.ms-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.ms-nav button {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(47, 107, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
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: 4px;
|
||||
font-family: "JetBrains Mono", "Oswald", monospace;
|
||||
}
|
||||
.ms-nav-num b {
|
||||
font-size: 16px;
|
||||
color: var(--bd-ink, #1d2c44);
|
||||
}
|
||||
.ms-nav-num em {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
color: var(--bd-sub, #7d8fa9);
|
||||
}
|
||||
|
||||
.ms-now {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid rgba(47, 107, 255, 0.14);
|
||||
}
|
||||
.ms-now-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--bd-green, #17b26a);
|
||||
box-shadow: 0 0 10px 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: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--bd-ink, #1d2c44);
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 声音提示 */
|
||||
.ms-sound {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: #4a5b76;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(47, 107, 255, 0.16);
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ms-sound .appica-ico { color: var(--bd-blue, #2f6bff); }
|
||||
|
||||
/* 页脚 */
|
||||
.ms-page .bd-strip { z-index: 10; position: relative; }
|
||||
|
||||
/* ============ 登录弹窗（浅色） ============ */
|
||||
.ms-login-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(29, 44, 68, 0.55);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
}
|
||||
.ms-login-overlay.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.ms-login-modal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
padding: 38px 34px 32px;
|
||||
background: linear-gradient(180deg, #ffffff, #f4f8fd);
|
||||
border: 1px solid rgba(120, 160, 220, 0.25);
|
||||
border-radius: 18px;
|
||||
text-align: center;
|
||||
box-shadow: 0 24px 80px rgba(29, 44, 68, 0.25);
|
||||
}
|
||||
.ms-login-close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(120, 160, 220, 0.2);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: #7d8fa9;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.ms-login-close:hover {
|
||||
background: rgba(47, 107, 255, 0.08);
|
||||
color: #2f6bff;
|
||||
}
|
||||
.ms-login-brand { margin-bottom: 26px; }
|
||||
.ms-login-brand h2 {
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
color: #1d2c44;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ms-login-brand p {
|
||||
font-size: 12.5px;
|
||||
color: #7d8fa9;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.ms-login-field {
|
||||
margin-bottom: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
.ms-login-field label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #7d8fa9;
|
||||
margin-bottom: 7px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.ms-login-field input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(47, 107, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
color: #1d2c44;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ms-login-field input::placeholder {
|
||||
color: rgba(125, 147, 169, 0.5);
|
||||
}
|
||||
.ms-login-field input:focus {
|
||||
border-color: rgba(47, 107, 255, 0.6);
|
||||
box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
|
||||
}
|
||||
.ms-login-error {
|
||||
font-size: 12.5px;
|
||||
color: #f04438;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.ms-login-btn {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
background: linear-gradient(140deg, #2f6bff, #4cc2ff);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 6px 20px rgba(47, 107, 255, 0.35);
|
||||
}
|
||||
.ms-login-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 28px rgba(47, 107, 255, 0.45);
|
||||
}
|
||||
.ms-login-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
Reference in New Issue
Block a user