/* ============ 断点约定 ============
两档主断点：
- 桌面（含平板）：≥768px
- 手机：≤767px
备用轻量断点：max-width:900px（仅个别拥挤处微调，不破坏两档结构）
================================= */
/* ============ 基础重置 ============ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
*:active {
-webkit-tap-highlight-color: transparent;
}
/* ============ 登录页右上角信息按钮（伪装控制台入口） ============ */
.admin-entry-btn {
position: fixed;
top: 16px;
right: 16px;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: none;
border: none;
border-radius: 6px;
color: rgba(255, 255, 255, 0.35);
cursor: pointer;
text-decoration: none;
transition: color 0.2s;
font: inherit;
}
.admin-entry-btn:hover {
color: rgba(255, 255, 255, 0.7);
}
.admin-entry-btn:focus {
outline: none;
}
@media (max-width: 767px) {
.admin-entry-btn {
display: none !important;
}
}
/* ============ 管理控制台页面 ============ */
html, body {
overflow-y: auto !important;
}
.admin-body {
background: #f0f2f5;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.admin-content {
max-width: 900px;
margin: 24px auto;
padding: 0 24px;
padding-bottom: 40px;
}
/* 管理员登录页 */
.admin-login-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.admin-login-box {
background: #fff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
width: 380px;
}
.admin-login-box h1 {
text-align: center;
margin-bottom: 8px;
font-size: 22px;
color: #333;
}
.admin-login-box .subtitle {
text-align: center;
color: #999;
font-size: 14px;
margin-bottom: 28px;
}
/* 登录表单 - 紧凑布局 */
.login-field {
display: flex;
align-items: center;
margin-bottom: 14px;
gap: 8px;
}
.login-field label {
width: 48px;
flex-shrink: 0;
font-size: 14px;
color: #555;
}
.login-field input {
flex: 1;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.login-field input:focus {
border-color: #667eea;
}
.login-options {
margin-bottom: 14px;
}
.remember-me {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #666;
cursor: pointer;
user-select: none;
}
.remember-me input {
width: 14px;
height: 14px;
cursor: pointer;
accent-color: #667eea;
}
/* 控制台布局 */
.admin-header {
background: #fff;
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 100;
}
.admin-header-brand {
display: flex;
align-items: center;
gap: 8px;
}
.admin-header .logo {
font-size: 18px;
font-weight: 600;
color: #333;
}
.admin-header .title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.admin-header .actions {
display: flex;
align-items: center;
gap: 12px;
}
.admin-header .actions a {
color: #667eea;
text-decoration: none;
font-size: 13px;
}
.admin-header .actions a:hover { text-decoration: underline; }
.admin-tabs {
display: flex;
background: #fff;
padding: 0 24px;
border-bottom: 1px solid #e8e8e8;
overflow-x: auto;
}
.admin-tab {
padding: 12px 20px;
font-size: 14px;
color: #666;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
white-space: nowrap;
}
.admin-tab:hover { color: #667eea; }
.admin-tab.active {
color: #667eea;
border-bottom-color: #667eea;
font-weight: 600;
}
.admin-panel { display: none; }
.admin-panel.active { display: block; }
/* 配置卡片 */
.config-card {
background: #fff;
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.config-card h3 {
font-size: 16px;
color: #333;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.config-row {
display: flex;
align-items: center;
margin-bottom: 14px;
gap: 12px;
}
.config-row label {
width: 160px;
flex-shrink: 0;
font-size: 14px;
color: #555;
}
.config-row input,
.config-row select {
flex: 1;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.config-row input:focus,
.config-row select:focus {
border-color: #667eea;
}
.config-row .hint {
font-size: 12px;
color: #999;
}
/* 保存按钮 */
/* ============================================================
功能按钮统一变量 — 改一个变量 → 全平台功能按钮同步
适用：查询/导出/登录/保存/开始回放
============================================================ */
:root {
--btn-primary-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--btn-primary-color: #fff;
--btn-success-bg: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--btn-success-color: #fff;
--btn-radius: 6px;
--btn-font-size: 14px;
--btn-font-weight: 600;
--btn-padding-y: 9px;
--btn-padding-x: 18px;
--btn-transition: opacity 0.2s, transform 0.1s;
}
.btn-save {
padding: 10px 28px;
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
border: none;
border-radius: var(--btn-radius);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
cursor: pointer;
transition: all 0.2s;
}
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102,126,234,0.3); }
.btn-save:disabled { opacity: 0.6; cursor: not-allowed; }
/* 表格 */
.config-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.config-table th {
text-align: left;
padding: 10px 8px;
border-bottom: 2px solid #f0f0f0;
color: #888;
font-weight: 600;
}
.config-table td {
padding: 8px;
border-bottom: 1px solid #f5f5f5;
}
.config-table input,
.config-table select {
width: 100%;
padding: 6px 8px;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 13px;
outline: none;
}
.config-table input:focus,
.config-table select:focus { border-color: #667eea; }
.config-table .btn-del {
padding: 4px 10px;
background: #e74c3c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.config-table .btn-del:hover { background: #c0392b; }
.config-table .btn-add {
padding: 6px 14px;
background: #27ae60;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
margin-top: 8px;
}
/* Toast 消息 */
.admin-toast {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
padding: 12px 28px;
border-radius: 8px;
font-size: 14px;
color: #fff;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.admin-toast.show { opacity: 1; }
.admin-toast.success { background: #27ae60; }
.admin-toast.error { background: #e74c3c; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f0f2f5;
color: #333;
font-size: 14px;
}
/* ============ 登录页 ============ */
.login-body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
width: 100%;
max-width: 400px;
padding: 20px;
}
.login-box {
background: #fff;
border-radius: 12px;
padding: 40px 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header .logo {
font-size: 48px;
margin-bottom: 10px;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
min-height: 72px;
}
.login-header h1 {
font-size: 22px;
color: #1a1a2e;
margin-bottom: 8px;
}
.login-header p {
font-size: 13px;
color: #999;
}
.login-form .form-group {
margin-bottom: 20px;
}
.remember-group {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
.remember-group input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: #667eea;
}
.remember-group label {
font-size: 13px;
color: #666;
cursor: pointer;
user-select: none;
}
.login-form label {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: #555;
font-weight: 500;
}
.login-form input {
width: 100%;
padding: 12px 14px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 15px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.login-form input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* 账号下拉列表容器 */
.account-group {
position: relative;
}
.saved-accounts-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
max-height: 260px;
overflow-y: auto;
z-index: 1000;
margin-top: 4px;
}
.saved-account-item {
padding: 14px 16px;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
font-size: 15px;
color: #333;
transition: background-color 0.15s;
min-height: 48px;
display: flex;
align-items: center;
}
.saved-account-item:last-child {
border-bottom: none;
}
.saved-account-item:hover {
background-color: #f5f7ff;
}
.saved-account-item .account-name {
font-weight: 500;
flex: 1;
}
.saved-account-item .delete-account-btn {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #999;
font-size: 18px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
margin-left: 8px;
}
.saved-account-item .delete-account-btn:hover {
background-color: #ff4757;
color: #fff;
}
/* 滚动条美化 */
.saved-accounts-dropdown::-webkit-scrollbar {
width: 6px;
}
.saved-accounts-dropdown::-webkit-scrollbar-track {
background: #f5f5f5;
}
.saved-accounts-dropdown::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.saved-accounts-dropdown::-webkit-scrollbar-thumb:hover {
background: #999;
}
.btn-login {
width: 100%;
padding: 13px;
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
border: none;
border-radius: var(--btn-radius);
font-size: 16px;
font-weight: var(--btn-font-weight);
cursor: pointer;
transition: var(--btn-transition);
}
.btn-login:hover {
opacity: 0.9;
}
.btn-login:active {
transform: scale(0.98);
}
.btn-login:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ============ 登录页 QR 码区域 ============ */
.qr-codes-section {
margin-top: 24px;
padding-top: 20px;
border-top: 1px dashed #e0e0e0;
}
.qr-codes-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.qr-code-item {
text-align: center;
min-width: 100px;
max-width: 140px;
}
.qr-code-item .qr-image {
width: 90px;
height: 90px;
object-fit: contain;
border: 1px solid #eee;
border-radius: 6px;
background: #fff;
margin-bottom: 8px;
}
.qr-code-item .qr-title {
font-size: 13px;
color: #333;
font-weight: 500;
margin-bottom: 2px;
line-height: 1.3;
}
.qr-code-item .qr-desc {
font-size: 11px;
color: #888;
line-height: 1.3;
}
/* ============ 登录页底部备案信息 ============ */
.login-footer {
position: fixed;
bottom: 16px;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.login-footer .footer-content {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 6px 16px;
}
.login-footer .footer-company {
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
}
.login-footer .footer-beian {
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: color 0.2s;
}
.login-footer .footer-beian:hover {
color: #fff;
text-decoration: underline;
}
.error-msg {
background: #fff3f3;
color: #e74c3c;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 16px;
text-align: center;
}
/* ============ 登录页：注册入口 ============ */
.register-entry {
margin-top: 14px;
text-align: center;
font-size: 13px;
color: #666;
}
.register-entry > span,
.register-entry > .register-link-btn {
display: inline-block;
vertical-align: middle;
}
.register-entry > span {
margin: 0 2px;
}
.register-entry > .register-link-btn {
margin: 0 2px;
}
.register-link-btn {
background: none;
border: none;
color: #667eea;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 2px 8px;
border-radius: 6px;
text-decoration: underline;
text-underline-offset: 2px;
transition: background 0.2s, color 0.2s;
}
.register-link-btn:hover {
color: #5a6fd0;
background: rgba(255, 255, 255, 0.85);
}
/* ============ 注册弹窗 ============ */
.register-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
box-sizing: border-box;
}
.register-modal-mask {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
}
.register-modal-wrap {
position: relative;
width: 100%;
max-width: 420px;
max-height: 92vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.register-modal-box {
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.register-modal-head {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid #f0f0f0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
.register-modal-back {
grid-column: 1;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 2px;
background: rgba(255, 255, 255, 0.18);
border: none;
color: #fff;
height: 30px;
padding: 0 10px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
font-weight: 500;
transition: background 0.2s;
white-space: nowrap;
}
.register-modal-back:hover {
background: rgba(255, 255, 255, 0.32);
}
.register-modal-back .back-arrow {
font-size: 22px;
line-height: 1;
font-weight: 400;
margin-top: -2px;
}
.register-modal-title {
grid-column: 2;
font-size: 16px;
font-weight: 600;
text-align: center;
}
.register-modal-spacer {
grid-column: 3;
justify-self: end;
width: 96px; /* 与左边返回按钮视觉等宽占位，平衡居中 */
}
.register-modal-close { display: none; }
.register-form {
padding: 18px 20px 20px;
}
.reg-field {
margin-bottom: 12px;
}
.reg-field label {
display: block;
font-size: 13px;
color: #555;
margin-bottom: 6px;
font-weight: 500;
}
.reg-field label i {
color: #e74c3c;
font-style: normal;
margin-left: 2px;
}
.reg-field input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
background: #fafafa;
}
.reg-field input:focus {
border-color: #667eea;
background: #fff;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}
.reg-field input::placeholder {
color: #bbb;
}
/* 账号密码 / 设备信息 分隔条 */
.reg-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 8px 0 14px;
}
.reg-divider-line {
flex: 1;
height: 1px;
background: #e4e4e4;
}
.reg-divider-text {
font-size: 12px;
color: #888;
letter-spacing: 2px;
padding: 0 4px;
font-weight: 500;
}
.reg-msg {
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
margin: 4px 0 14px;
line-height: 1.5;
text-align: left;
}
.reg-msg-error {
background: #fff3f3;
color: #e74c3c;
border: 1px solid #fdd5d5;
}
.reg-msg-success {
background: #eafaf0;
color: #1e8e48;
border: 1px solid #bde8cb;
}
.reg-btns {
display: flex;
gap: 10px;
margin-top: 4px;
}
.reg-btn {
flex: 1;
padding: 11px 0;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
font-weight: 500;
transition: background 0.2s, opacity 0.2s;
}
.reg-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.reg-btn-cancel {
background: #f0f0f0;
color: #555;
}
.reg-btn-cancel:hover {
background: #e5e5e5;
}
.reg-btn-submit {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
.reg-btn-submit:hover {
background: linear-gradient(135deg, #5a6fd0 0%, #6a4190 100%);
}
/* ============ 注册弹窗：手机端适配 ============ */
@media (max-width: 480px) {
.register-modal {
padding: 0;
}
.register-modal-wrap {
max-width: 100%;
max-height: 100%;
height: 100%;
border-radius: 0;
}
.register-modal-box {
border-radius: 0;
min-height: 100%;
}
.register-modal-head {
position: sticky;
top: 0;
z-index: 2;
}
.register-form {
padding: 18px 16px 24px;
}
}
/* ============ 忘记密码弹窗专用样式 ============ */
/* 入口分隔符 */
.entry-divider {
color: #bbb;
margin: 0 4px;
font-size: 12px;
}
/* 验证码输入 + 获取按钮 同行布局 */
.code-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.code-row input {
flex: 1;
min-width: 0;
}
.code-row .send-code-btn {
flex-shrink: 0;
white-space: nowrap;
padding: 10px 14px;
border: 1px solid #667eea;
border-radius: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s;
}
.code-row .send-code-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* 找回流程提示文案 */
.forgot-tip {
font-size: 12px;
color: #888;
line-height: 1.6;
margin: 40px 0 56px;
padding: 28px 32px;
background: #f8f9ff;
border-radius: 6px;
border-left: 3px solid #667eea;
}
/* ============ 全屏仪表盘布局 ============ */
html, body.dashboard-body {
height: 100%;
overflow: hidden;
}
body.dashboard-body {
display: flex;
flex-direction: column;
background: #f5f6fa;
}
/* ============ 顶部导航 ============ */
.header {
background: #fff;
padding: 0 20px;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
flex-shrink: 0;
z-index: 1000;
}
.header-left {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.header-left .logo {
font-size: 22px;
}
.header-left .title {
font-size: 16px;
font-weight: 600;
color: #1a1a2e;
white-space: nowrap;
}
.tabs {
display: flex;
flex: 1;
height: 100%;
align-items: stretch;
justify-content: center;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
.tab,
.tab-group {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
flex: none;
height: 100%;
}
.tab {
width: auto;
padding: 0 20px;
background: transparent;
border: none;
border-radius: 0;
font-size: 14px;
color: #888;
cursor: pointer;
transition: background-color 0.2s, color 0.2s; /* 去掉 all，避免 font-weight 等不可平滑过渡的属性造成抖动 */
position: relative;
line-height: 1.3;
}
/* 竖线分隔 */
.tabs > *:not(:first-child) {
border-left: 1px solid #e4e7ef;
}
.tab:hover {
color: #667eea;
background: rgba(102,126,234,0.15);
}
.tab.active {
color: #fff;
background: #667eea;
font-weight: 500;
}
.tab.active:hover {
color: #fff;
background: #667eea;
}
/* ============ 统计报表 二级下拉 ============ */
.tab-group {
position: relative;
display: flex;
align-items: center;
}
.tab-group-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tab-caret {
font-size: 10px;
line-height: 1;
opacity: 0.8;
}
.tab-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 140px;
display: none;
flex-direction: column;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
padding: 4px;
z-index: 99999; /* 极高优先级，不被地图等遮挡 */
margin-top: 2px;
}
.tab-group.open .tab-dropdown {
display: flex;
}
.tab-sub {
display: block;
width: 100%;
text-align: left;
padding: 8px 14px;
background: transparent;
border: none;
border-radius: 4px;
font-size: 14px;
color: #555;
cursor: pointer;
white-space: nowrap;
}
.tab-sub:hover {
background: #f0f2ff;
color: #667eea;
}
.tab-sub.active {
color: #fff;
background: #667eea;
}
/* ================================================================
* 统一设备选择器（方案A）：工时V2 / 轨迹回放 / 温度 / 轨迹 / 里程 / ACC
* 结构：
*
* 视觉参考：最后一张手机截图 —— 选中信息内嵌于搜索框内，右侧独立黑框「清除」按钮
* ================================================================ */
.device-select-box {
position: relative;
display: block;
width: 100%;
}
/* 两侧输入框高度统一 38px（和报表页 datetime-input 同高） */
.ds-input {
width: 100%;
height: 38px;
padding: 6px 88px 6px 10px; /* 右侧留 88px 给清除按钮（按钮宽约 76px + 左右 6px 边距） */
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
font-size: 13px;
color: #333;
outline: none;
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
line-height: 24px;
vertical-align: middle;
}
.ds-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102,126,234,.12);
}
.ds-input::placeholder {
color: #aaa;
}
/* 选中态：覆盖在 input 上（同一层），视觉上"设备名就在搜索框里" */
.device-select-box.has-selected .ds-input {
visibility: hidden;
pointer-events: none;
}
.ds-selected {
position: absolute;
left: 0;
top: 0;
right: 88px; /* 右侧给清除按钮（按钮宽约 76px）留空，让两者不重叠 */
height: 38px;
padding: 6px 10px;
border: 1px solid #222; /* 选中时整体给黑边，和最后一张截图质感一致 */
border-radius: 6px;
background: #fff;
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
white-space: nowrap;
font-size: 13px;
color: #111;
box-sizing: border-box;
z-index: 2;
}
.ds-selected .ds-icon {
flex-shrink: 0;
font-size: 14px;
}
.ds-selected .ds-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
color: #111;
}
.ds-selected .ds-imei {
flex: 0 0 auto;
color: #666;
font-size: 12px;
white-space: nowrap;
}
/* 右侧独立清除按钮（截图黑框样式） */
.ds-clear {
position: absolute;
right: 0;
top: 0;
height: 38px;
padding: 0 14px;
background: #e74c3c;
border: none;
border-radius: 8px;
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(231,76,60,.35);
transition: background .15s, transform .1s, box-shadow .15s;
}
.ds-clear:hover {
background: #c0392b;
box-shadow: 0 4px 12px rgba(231,76,60,.45);
transform: translateY(-1px);
}
.ds-clear:active {
background: #a93226;
transform: translateY(0);
box-shadow: 0 1px 4px rgba(231,76,60,.3);
}
/* 下拉列表：统一 absolute（不再像 pb 那样把下方日历顶走） */
.ds-list {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
max-height: 280px;
min-width: 260px;
background: #fff;
border: 1px solid #e2e2ec;
border-radius: 6px;
box-shadow: 0 6px 22px rgba(0,0,0,.08);
overflow-y: auto;
overflow-x: hidden;
z-index: 99999;
display: none;
}
.ds-list.show {
display: block;
}
.ds-list .rd-empty {
padding: 14px 12px;
color: #999;
font-size: 13px;
text-align: center;
}
.ds-list .rd-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
font-size: 13px;
border-bottom: 1px solid #f0f0f5;
}
.ds-list .rd-item:last-child {
border-bottom: none;
}
.ds-list .rd-item:hover {
background: rgba(102,126,234,.08);
}
.ds-list .rd-item .rd-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background: rgba(102,126,234,.1);
font-size: 14px;
}
.ds-list .rd-item .rd-info {
flex: 1 1 auto;
overflow: hidden;
min-width: 0;
}
.ds-list .rd-item .rd-name {
display: block;
color: #333;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-list .rd-item .rd-imei {
display: block;
color: #888;
font-size: 12px;
margin-top: 2px;
}
/* 让 wrapper（playback/wh2 sidebar 内）有一致的行为：label + ds-box 垂直堆叠 */
.playback-panel .pb-section > .device-select-box,
.playback-panel .pb-section > .device-select-box + * {
margin-top: 4px;
}
/* 报表页：原来的 report-device-select-wrapper 占 340px 左右，新盒子继承同样宽 */
.search-panel .form-group > .device-select-box {
min-width: 320px;
max-width: 100%;
}
/* ---------- 手机端微调：清除按钮别太宽（窄屏） ---------- */
@media (max-width: 767px) {
.ds-clear {
padding: 0 10px;
font-size: 12px;
}
.ds-selected {
right: 80px; /* 手机清除按钮略窄，减少右侧浪费 */
}
.ds-input {
padding-right: 80px;
}
.ds-selected .ds-imei {
display: none; /* 手机窄屏只显示名字，避免挤爆 */
}
.search-panel .form-group > .device-select-box {
min-width: 0;
width: 100%;
}
}
/* ============ 统计报表：电脑端二级 Tab 栏（header 下方） ============ */
.report-sub-tabs {
display: flex;
align-items: stretch;
justify-content: center; /* 与一级 .tabs 对齐方式一致：居中 */
background: #fff;
border-bottom: 1px solid #eaeaf4;
padding: 0 24px;
gap: 8px;
position: sticky;
top: 0;
z-index: 50;
}
.report-sub-tab {
border: none;
background: transparent;
padding: 14px 22px; /* 与一级 tab 的左右 20px padding 量级保持一致，略大让二级点击更宽松 */
font-size: 14px;
font-weight: 500;
color: #666;
cursor: pointer;
position: relative;
white-space: nowrap;
transition: color .15s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.report-sub-tab:hover {
color: #667eea;
}
.report-sub-tab.active {
color: #667eea;
font-weight: 600;
}
.report-sub-tab.active::after {
content: '';
position: absolute;
left: 22px; /* 与 report-sub-tab 横向 padding 同步，让下划线宽度≈文字宽度 */
right: 22px;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 3px 3px 0 0;
}
/* 只有激活统计 4 个子 tab 时才展示二级栏（与 switchTab 里加的 body 属性联动） */
body.report-tabs-visible .report-sub-tabs {
display: flex;
}
/* ============ 统计报表：手机端菜单层 ============ */
.report-mobile-menu {
display: none;
padding: 16px 14px 100px;
background: #f5f6fa;
min-height: calc(100vh - 120px);
box-sizing: border-box;
}
.report-mobile-menu-header {
padding: 4px 4px 16px;
}
.report-mobile-menu-title {
font-size: 20px;
font-weight: 700;
color: #1f2937;
}
.report-mobile-menu-sub {
font-size: 13px;
color: #6b7280;
margin-top: 4px;
}
.report-mobile-menu-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.report-mobile-menu-item {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 16px;
background: #fff;
border: 1px solid #eaeaf0;
border-radius: 14px;
box-shadow: 0 2px 6px rgba(20, 30, 60, 0.04);
cursor: pointer;
text-align: left;
box-sizing: border-box;
transition: transform .1s, box-shadow .15s, border-color .15s;
}
.report-mobile-menu-item:active {
transform: scale(0.985);
border-color: #c9d6ff;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
.report-mobile-menu-icon {
font-size: 26px;
flex: 0 0 auto;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #eef2ff 0%, #f0f4ff 100%);
border-radius: 12px;
}
.report-mobile-menu-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.report-mobile-menu-name {
font-size: 16px;
font-weight: 600;
color: #111827;
}
.report-mobile-menu-desc {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
.report-mobile-menu-arrow {
font-size: 22px;
color: #c9cedb;
font-weight: 700;
line-height: 1;
}
/* ============ 统计报表：手机端返回头 ============ */
.report-mobile-back {
display: none;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #fff;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 60;
}
.report-mobile-back-btn {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 6px 10px;
background: #eef2ff;
border: none;
border-radius: 8px;
color: #4f46e5;
font-size: 13px;
font-weight: 600;
cursor: pointer;
min-height: 36px;
}
.report-mobile-back-arrow {
font-size: 20px;
font-weight: 700;
line-height: 1;
}
.report-mobile-back-label {
line-height: 1;
}
.report-mobile-back-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 15px;
font-weight: 600;
color: #111827;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60%;
}
/* body 属性控制手机端菜单/返回头/子内容显隐：
data-report-mobile-view="" 或不存在：按正常 tab 切换（非统计类）
data-report-mobile-view="menu"：显示菜单，隐藏 4 个统计内容
data-report-mobile-view="content"：显示当前子 tab，显示返回头，隐藏菜单
*/
body[data-report-mobile-view="menu"] .report-mobile-menu {
display: block;
}
body[data-report-mobile-view="menu"] #tab-temperature,
body[data-report-mobile-view="menu"] #tab-trajectory,
body[data-report-mobile-view="menu"] #tab-mileage,
body[data-report-mobile-view="menu"] #tab-acc-report {
display: none !important;
}
body[data-report-mobile-view="content"] .report-mobile-back {
display: flex;
}
/* ========== 桌面 / 手机 显隐 ========== */
@media (min-width: 768px) {
.mobile-only {
display: none !important;
}
/* 电脑端：默认隐藏二级栏，切到统计 tab 时由 body.report-tabs-visible 显示 */
.report-sub-tabs {
display: none;
}
/* 电脑端：已新增二级 tab 栏，不再需要「统计报表」按钮展开旧下拉；
这里用 ID 精准只禁用 reportDropdown，更多菜单的 more-dropdown 保持不变 */
#reportDropdown {
display: none !important;
}
/* 连带：report-tab-group 的 .open 不应显示任何东西（保险兜底） */
#reportTabGroup.open .tab-dropdown {
display: none !important;
}
}
@media (max-width: 767px) {
.desktop-only {
display: none !important;
}
/* 手机端：header 内的 tab-group 下拉保持可用，不再额外显示菜单/返回头（由 body 属性控制）*/
}
/* ========== 统计报表：筛选栏 统一靠左对齐 ========== */
.search-panel .form-row {
justify-content: flex-start;
}
/* 让最后一个 form-group（带 label 占位符的按钮组）也贴紧左侧，不占多余空间 */
.search-panel .form-group.form-group-actions {
flex: 0 0 auto;
min-width: 0;
}
/* 已选设备区：不设固定默认宽度，按内容自适应，保证左对齐不撑满 */
.report-device-select-wrapper {
width: auto;
max-width: 100%;
justify-content: flex-start;
}
.report-device-selected {
min-width: 160px;
max-width: 360px;
width: auto;
}
/* 快捷日期按钮组：label 占格时也从左起排 */
.form-group-quick .quick-buttons {
justify-content: flex-start;
}
/* 手机端筛选栏也左对齐（原 .form-row flex-direction:column 缺少对齐） */
@media (max-width: 767px) {
.search-panel .form-row {
align-items: stretch;
}
.search-panel .form-row .form-group {
align-items: flex-start;
}
.search-panel .form-row .form-group label {
text-align: left;
}
.search-panel .form-row .form-group.form-group-actions > div {
justify-content: flex-start;
}
.quick-buttons.form-group-quick {
align-self: flex-start;
}
.report-device-select-wrapper {
width: 100%;
}
.report-device-selected {
max-width: 100%;
}
}
.header-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.welcome {
font-size: 13px;
color: #666;
white-space: nowrap;
}
.btn-logout {
padding: 6px 14px;
background: #f5f5f5;
color: #666;
border: 1px solid #e0e0e0;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.btn-logout:hover {
background: #e74c3c;
color: #fff;
border-color: #e74c3c;
}
.btn-clear-cache {
padding: 6px 12px;
background: #fff;
color: #555;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.btn-clear-cache:hover {
background: #3498db;
color: #fff;
border-color: #3498db;
}
/* ========== 桌面/手机 显隐控制 ========== */
/* more-menu 现在是 tabs 内的 tab-group，不再需要旧的独立定位 */
.more-menu {
position: relative;
}
/* JS 直接在 #moreDropdown 上加 .open 显示，与 .tab-group.open .tab-dropdown 等价 */
.more-dropdown.open {
display: flex !important;
}
.more-menu .tab-sub.more-item {
padding: 10px 12px;
font-size: 14px;
border-radius: 4px;
white-space: nowrap;
}
.more-menu .tab-sub.more-item:hover {
background: #f3f5fb;
}
.more-dropdown::before { display: none; }
@media (max-width: 768px) {
/* more-dropdown 在手机端：header 在底部 → 向上弹出，右对齐触发按钮 */
.more-dropdown {
top: auto !important;
bottom: calc(100% + 6px);
left: auto;
right: 0;
}
}
/* ============ 标签内容 ============ */
.tab-content {
display: none;
padding: 20px 24px;
flex: 1;
overflow-y: auto;
}
.tab-content.active {
display: block;
}
/* 全屏标签（实时监控） */
.tab-content-fullscreen {
display: none;
padding: 0 !important;
overflow: hidden !important;
}
.tab-content-fullscreen.active {
display: flex !important;
flex-direction: column;
}
/* ============ 设备列表+地图布局 ============ */
.device-map-layout {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0;
}
/* 左侧设备列表 */
.device-list-panel {
width: 400px;
min-width: 400px;
background: #fff;
border-right: 1px solid #e8e8e8;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sidebar-header {
padding: 12px 16px 8px;
border-bottom: 1px solid #f0f0f0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px 12px;
}
.sidebar-header-left {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
flex-wrap: wrap;
font-size: 15px;
font-weight: 600;
color: #333;
}
.count-label {
color: #333;
font-size: 15px;
font-weight: 600;
}
.sidebar-count {
font-size: 22px;
color: #667eea;
font-weight: 700;
}
/* 子账号选择按钮 */
.sub-account-btn {
display: inline-flex;
align-items: center;
gap: 2px;
margin-right: 8px;
padding: 4px 8px;
background: #f0f2f7;
color: #555;
border: 1px solid #e4e7ed;
border-radius: 16px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.sub-account-btn:hover {
background: #e4e7ed;
color: #333;
}
.sub-account-icon {
font-size: 14px;
}
.sub-account-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: rgba(255, 255, 255, 0.3);
border-radius: 9px;
font-size: 11px;
font-weight: 600;
}
/* 当前账号信息显示 */
.current-account-info {
display: inline-flex;
align-items: center;
margin-right: 12px;
padding: 4px 12px;
background: #f0f4ff;
border: 1px solid #d0d9ff;
border-radius: 16px;
font-size: 13px;
color: #4a5568;
max-width: 200px;
}
.current-account-info .account-name {
font-weight: 600;
color: #667eea;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.current-account-info.multi-account .account-name {
color: #764ba2;
}
/* 子账号选择弹窗 */
.account-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.account-modal-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
.account-modal-content {
position: relative;
background: white;
border-radius: 12px;
width: 320px;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: modalIn 0.2s ease-out;
}
@keyframes modalIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.account-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
}
.account-modal-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.account-modal-close {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border: none;
border-radius: 50%;
cursor: pointer;
color: #666;
font-size: 14px;
transition: all 0.2s;
}
.account-modal-close:hover {
background: #e8e8e8;
color: #333;
}
.account-modal-body {
flex: 1;
overflow-y: auto;
padding: 12px 20px;
}
.account-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.account-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
background: #f8f9fa;
}
.account-list-item:hover {
background: #f0f2f5;
border-color: #e8ecf1;
}
.account-list-item.selected {
background: #e8f4fd;
border-color: var(--role-color, #4a67c4);
}
.account-list-item.disabled {
cursor: not-allowed;
background: #f0f0f0;
opacity: 0.7;
}
.account-list-item.disabled:hover {
background: #f0f0f0;
border-color: transparent;
}
.account-list-item.disabled .account-name {
color: #888;
}
.account-parent-tip {
font-size: 11px;
color: #999;
font-style: italic;
}
.account-checkbox {
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: white;
flex-shrink: 0;
background: white;
transition: all 0.2s;
}
.account-list-item.selected .account-checkbox {
background: var(--role-color, #4a67c4);
border-color: var(--role-color, #4a67c4);
}
.account-info {
flex: 1;
min-width: 0;
}
.account-name {
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
display: block;
}
.account-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #666;
}
.account-role {
font-size: 10px;
color: white;
padding: 2px 8px;
border-radius: 10px;
white-space: nowrap;
font-weight: 500;
}
.account-count {
font-size: 12px;
color: #666;
white-space: nowrap;
}
.account-modal-footer {
display: flex;
gap: 10px;
padding: 14px 20px;
border-top: 1px solid #f0f0f0;
}
.account-modal-btn {
flex: 1;
padding: 10px 16px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.account-modal-btn-cancel {
background: #f5f5f5;
color: #666;
}
.account-modal-btn-cancel:hover {
background: #e8e8e8;
}
.account-modal-btn-confirm {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.account-modal-btn-confirm:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.account-empty {
text-align: center;
padding: 30px 20px;
color: #999;
font-size: 14px;
}
/* 账号列表头部 */
.account-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.account-header-actions {
display: flex;
gap: 8px;
}
.account-refresh-btn {
background: none;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 4px 8px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.account-refresh-btn:hover {
background: #f5f5f5;
border-color: #667eea;
}
/* 账号提示信息 */
.account-tip {
background: #e8f4fd;
color: #1976d2;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
margin-bottom: 12px;
line-height: 1.5;
}
/* 设备列表工具栏 */
.device-list-panel .toolbar {
padding: 10px 12px;
border-bottom: 1px solid #f0f0f0;
display: block;
}
.device-list-panel .toolbar .search-wrap {
position: relative;
display: block;
width: 100%;
}
.device-list-panel .toolbar .search-input {
max-width: none;
flex: none;
width: 100%;
}
.device-list-panel .toolbar .search-clear {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 26px;
padding: 0;
border: 1px solid #4B3FE3;
border-radius: 13px;
background: #F2F7FF;
color: #4B3FE3;
font-weight: 500;
font-size: 11px;
line-height: 26px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
z-index: 2;
box-shadow: 0 1px 3px rgba(75, 63, 227, 0.15);
}
.device-list-panel .toolbar .search-clear::after {
content: '清除';
margin-left: 2px;
}
.device-list-panel .toolbar .search-clear:hover {
background: #4B3FE3;
border-color: #4B3FE3;
color: #fff;
}
.device-list-panel .toolbar .search-wrap.has-value .search-clear {
display: inline-flex;
}
.device-list-panel .toolbar .search-wrap.has-value .search-input {
padding-right: 64px !important;
}
.device-table-container {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto !important; /* 强制纵向滚动 */
overflow-x: hidden !important;
border-radius: 0;
box-shadow: none;
background: #fff;
/* 解除通用 .table-container 规则带来的 max-height：
设备列表由父容器 flex 撑满，max-height:calc(...) 会截断造成底部空白 */
max-height: none !important;
}
/* 设备列表表头固定、表体可滚动：thead 粘在顶部 */
.device-table-container thead th {
position: sticky;
top: 0;
z-index: 2;
background: #fafafa;
box-shadow: inset 0 -1px 0 #e8e8e8;
}
.device-list-panel .loading {
flex-shrink: 0;
}
.device-list-panel .empty-state {
flex: 1;
min-height: 0;
}
.device-list-panel .search-input {
width: 100%;
}
/* 勾选框列样式 */
.data-table .th-check {
width: 40px;
text-align: center;
padding: 8px 6px;
}
.data-table .device-check {
width: 16px;
height: 16px;
cursor: pointer;
vertical-align: middle;
}
/* 侧边栏表格紧凑样式 */
.device-list-panel .data-table {
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
.device-list-panel .data-table thead th {
padding: 12px 10px;
font-size: 12px;
position: sticky;
top: 0;
z-index: 10;
background: #fafafa;
white-space: nowrap;
}
.device-list-panel .data-table thead th:last-child {
padding-right: 18px;
}
/* ======= table-layout:fixed —— thead th 设明确宽才是真正控制列宽的关键 ======= */
/* 名称列 */
.device-list-panel .data-table thead th:nth-child(2) {
width: 42%;
max-width: 42%;
min-width: 0;
}
/* 状态列 —— 更宽，保证最长文字不被截断 */
.device-list-panel .data-table thead th:nth-child(3) {
width: 120px;
min-width: 120px;
max-width: 120px;
}
.device-list-panel .data-table td {
padding: 12px 10px;
font-size: 13px;
}
.device-list-panel .data-table td:last-child {
padding-right: 18px;
}
.device-list-panel .data-table .th-check {
width: 32px;
padding: 12px 4px;
}
/* 设备列表行可点击样式 */
.device-list-panel .data-table tr.device-row {
cursor: pointer;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}
.device-list-panel .data-table tr.device-row:hover {
background: #eff6ff;
}
@media (max-width: 767px) {
.device-list-panel .data-table tr.device-row:hover {
background: transparent;
}
.device-list-panel .data-table tr.device-row:not(.row-selected):active {
background: transparent;
}
}
/* 选中行高亮（蓝色背景，与参考图类似的视觉效果） */
.device-list-panel .data-table tr.device-row.row-selected {
background: #e0ecff;
box-shadow: inset 3px 0 0 #667eea;
}
.device-list-panel .data-table tr.device-row.row-selected td {
font-weight: 500;
}
/* 设备名单行显示 + 省略号（删除IMEI列后更宽） */
.device-list-panel .data-table td.device-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 选中行扩展区域：设备号 + 轨迹/里程按钮 */
.device-list-panel .data-table tr.device-expand-row td {
padding: 0;
background: #f2f7ff;
border-top: none;
border-bottom: 1px solid #eee;
overflow: hidden;
}
.device-expand-inner {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
background: #f2f7ff;
}
/* ============================================================
设备列表按钮 — CSS 变量统一管理
改一个变量 → 菜单+展开+电脑+手机 全部同步生效
============================================================ */
:root {
--deb-padding: 2px; /* 格子内边距（留白） */
--deb-gap: 2px; /* 格子间距 */
--deb-radius: 4px; /* 按钮圆角 */
--deb-font-size: 12px; /* 按钮字号 */
--deb-label-font-size: 12px; /* 设备号字号 */
--deb-row-height: 40px; /* 展开区每行高度 */
--deb-border-width: 1.5px; /* 描边按钮的边框宽度 */
--deb-btn-padding-y: 0; /* 按钮上下内边距 */
--deb-btn-padding-x: 8px; /* 按钮左右内边距 */
}
/* 6 列 grid 布局：
Row1: [设备号(跨col1-3)] [轨迹 col4] [工时 col5] [里程 col6]
Row2: [空 col1] [空 col2] [空 col3] [空 col4] [温度报表 col5] [设备信息 col6]
对齐: 温度报表 ↔ 工时(col5), 设备信息 ↔ 里程(col6)
*/
.device-expand-buttons {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: var(--deb-row-height) var(--deb-row-height);
align-items: stretch;
width: 100%;
overflow: hidden;
}
.deb-cell {
display: flex;
align-items: stretch;
justify-content: center;
border-left: 1px solid #e4ebf5;
border-top: 1px solid #e4ebf5;
padding: var(--deb-padding);
overflow: hidden;
min-width: 0;
}
.deb-cell.deb-label {
grid-column: 1 / 4;
justify-content: flex-start;
align-items: center;
padding-left: 40px;
border-left: none;
border-top: 1px solid #e4ebf5;
font-size: var(--deb-label-font-size);
color: #555;
gap: 4px;
}
.deb-cell.deb-spacer {
background: transparent;
}
/* 第一行第一个 deb-label 的 border-top 不显示 */
.device-expand-row:first-child .deb-label {
border-top: none;
}
.deb-label .device-expand-label { color: #999; flex-shrink: 0; }
.deb-label .device-expand-imei {
color: #333;
font-family: Menlo, Monaco, Consolas, monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 按钮样式 — 方案B：描边按钮，透明底+彩色边框+彩色文字 */
.device-action-btn {
flex: 1 1 auto;
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
padding: var(--deb-btn-padding-y) var(--deb-btn-padding-x);
font-size: var(--deb-font-size);
font-weight: 600;
line-height: 1.2;
border: var(--deb-border-width) solid;
border-radius: var(--deb-radius);
cursor: pointer;
transition: background 0.15s, transform 0.1s;
white-space: nowrap;
position: relative;
-webkit-tap-highlight-color: transparent;
outline: none;
-webkit-user-select: none;
user-select: none;
background: transparent;
}
.device-action-btn:hover {
opacity: 0.7;
}
.device-action-btn:active {
opacity: 0.5;
transform: scale(0.97);
}
@media (max-width: 767px) {
.device-action-btn:hover {
opacity: 1;
}
.device-action-btn:active {
opacity: 0.5;
transform: scale(0.97);
}
}
/* 每个按钮不同边框色+文字色 */
.device-action-playback {
border-color: #4e7cff;
color: #4e7cff;
}
.device-action-workhours {
border-color: #34c759;
color: #34c759;
}
.device-action-mileage {
border-color: #ff9500;
color: #ff9500;
}
.device-action-temp {
border-color: #af52de;
color: #af52de;
}
.device-action-info {
border-color: #5ac8fa;
color: #5ac8fa;
}
.device-action-taiban {
border-color: #007aff;
color: #007aff;
}
.device-action-btn .device-action-icon {
font-size: 13px;
line-height: 1;
}
/* 选中态 — 实色填充 */
.device-action-btn.active {
background: #667eea !important;
border-color: #667eea !important;
color: #fff !important;
font-weight: 700;
}
/* ============================================================
设备列表按钮方案 — 通过 body[data-deb-scheme] 切换
默认(无属性) = 方案B描边
============================================================ */
/* 方案A：实色背景+白字 */
body[data-deb-scheme="a"] .device-action-btn { background: #4e7cff; color: #fff; border: none; }
body[data-deb-scheme="a"] .device-action-workhours { background: #34c759; }
body[data-deb-scheme="a"] .device-action-mileage { background: #ff9500; }
body[data-deb-scheme="a"] .device-action-temp { background: #af52de; }
body[data-deb-scheme="a"] .device-action-info { background: #5ac8fa; }
body[data-deb-scheme="a"] .device-action-taiban { background: #007aff; }
body[data-deb-scheme="a"] .device-list-panel .data-table .device-menu-btn.device-action-btn { background: #667eea !important; border: none !important; color: #fff !important; }
/* 方案C：淡色底+深色文字 */
body[data-deb-scheme="c"] .device-action-btn { background: #e8f0fe; border: 1px solid #d0e0fc; color: #2d5fd9; }
body[data-deb-scheme="c"] .device-action-workhours { background: #e6f7ed; border-color: #c3edcc; color: #1a9e3e; }
body[data-deb-scheme="c"] .device-action-mileage { background: #fff3e0; border-color: #ffe0b3; color: #cc7000; }
body[data-deb-scheme="c"] .device-action-temp { background: #f3e5f5; border-color: #e1c7ed; color: #8e3aa7; }
body[data-deb-scheme="c"] .device-action-info { background: #e0f7fa; border-color: #b8eef5; color: #0a8fb3; }
body[data-deb-scheme="c"] .device-action-taiban { background: #e3f0ff; border-color: #b8d9f5; color: #0060cc; }
body[data-deb-scheme="c"] .device-list-panel .data-table .device-menu-btn.device-action-btn { background: #f0f0ff !important; border-color: #d0d0f0 !important; color: #667eea !important; }
/* 方案D：渐变色底+白字 */
body[data-deb-scheme="d"] .device-action-btn { background: linear-gradient(135deg, #4e7cff, #3b6ef5); color: #fff; border: none; }
body[data-deb-scheme="d"] .device-action-workhours { background: linear-gradient(135deg, #34c759, #219a3d); }
body[data-deb-scheme="d"] .device-action-mileage { background: linear-gradient(135deg, #ff9500, #ff6b00); }
body[data-deb-scheme="d"] .device-action-temp { background: linear-gradient(135deg, #af52de, #8b3cc7); }
body[data-deb-scheme="d"] .device-action-info { background: linear-gradient(135deg, #5ac8fa, #3ba8d6); }
body[data-deb-scheme="d"] .device-action-taiban { background: linear-gradient(135deg, #007aff, #0055d4); }
body[data-deb-scheme="d"] .device-list-panel .data-table .device-menu-btn.device-action-btn { background: linear-gradient(135deg, #667eea, #764ba2) !important; border: none !important; color: #fff !important; }
/* 方案E：全圆角胶囊+白字+阴影 */
body[data-deb-scheme="e"] .device-action-btn { background: #4e7cff; color: #fff; border: none; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
body[data-deb-scheme="e"] .device-action-workhours { background: #34c759; }
body[data-deb-scheme="e"] .device-action-mileage { background: #ff9500; }
body[data-deb-scheme="e"] .device-action-temp { background: #af52de; }
body[data-deb-scheme="e"] .device-action-info { background: #5ac8fa; }
body[data-deb-scheme="e"] .device-action-taiban { background: #007aff; }
body[data-deb-scheme="e"] .device-list-panel .data-table .device-menu-btn.device-action-btn { background: #667eea !important; border: none !important; color: #fff !important; border-radius: 20px !important; }
/* 方案F：透明底+左侧3px彩色竖条+深色文字 */
body[data-deb-scheme="f"] .device-action-btn { background: transparent; border: none; border-left: 3px solid #4e7cff; color: #555; border-radius: 0; }
body[data-deb-scheme="f"] .device-action-workhours { border-left-color: #34c759; }
body[data-deb-scheme="f"] .device-action-mileage { border-left-color: #ff9500; }
body[data-deb-scheme="f"] .device-action-temp { border-left-color: #af52de; }
body[data-deb-scheme="f"] .device-action-info { border-left-color: #5ac8fa; }
body[data-deb-scheme="f"] .device-action-taiban { border-left-color: #007aff; }
body[data-deb-scheme="f"] .device-list-panel .data-table .device-menu-btn.device-action-btn { border: none !important; border-left: 3px solid #667eea !important; background: transparent !important; color: #667eea !important; border-radius: 0 !important; }
/* 方案G：透明底+底部彩色线+深色文字 */
body[data-deb-scheme="g"] .device-action-btn { background: transparent; border: none; border-bottom: 2px solid #4e7cff; color: #555; border-radius: 0; }
body[data-deb-scheme="g"] .device-action-workhours { border-bottom-color: #34c759; }
body[data-deb-scheme="g"] .device-action-mileage { border-bottom-color: #ff9500; }
body[data-deb-scheme="g"] .device-action-temp { border-bottom-color: #af52de; }
body[data-deb-scheme="g"] .device-action-info { border-bottom-color: #5ac8fa; }
body[data-deb-scheme="g"] .device-action-taiban { border-bottom-color: #007aff; }
body[data-deb-scheme="g"] .device-list-panel .data-table .device-menu-btn.device-action-btn { border: none !important; border-bottom: 2px solid #667eea !important; background: transparent !important; color: #667eea !important; border-radius: 0 !important; }
/* 方案H：深灰仪表盘风格 */
body[data-deb-scheme="h"] .device-action-btn { background: #3a3f4b; color: #fff; border: none; }
body[data-deb-scheme="h"] .device-action-btn:hover { background: #4a505e; }
body[data-deb-scheme="h"] .device-action-btn:active { background: #2d313a; }
body[data-deb-scheme="h"] .device-list-panel .data-table .device-menu-btn.device-action-btn { background: #3a3f4b !important; border: none !important; color: #fff !important; }
/* ============================================================
功能按钮主题色 — 通过 body[data-func-scheme] 切换
默认(无属性) = 紫色渐变(当前)
============================================================ */
body[data-func-scheme="blue"] {
--btn-primary-bg: linear-gradient(135deg, #4e7cff 0%, #3b6ef5 100%);
--btn-success-bg: linear-gradient(135deg, #34c759 0%, #219a3d 100%);
}
body[data-func-scheme="green"] {
--btn-primary-bg: linear-gradient(135deg, #34c759 0%, #219a3d 100%);
--btn-success-bg: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
body[data-func-scheme="orange"] {
--btn-primary-bg: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
--btn-success-bg: linear-gradient(135deg, #ffcc00 0%, #ff9500 100%);
}
body[data-func-scheme="dark"] {
--btn-primary-bg: #3a3f4b;
--btn-success-bg: #4a505e;
}
/* ============ 设备信息弹窗 ============ */
.di-mask {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: diFadeIn 0.15s ease;
}
@keyframes diFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.di-modal {
background: #fff;
border-radius: 10px;
width: 100%;
max-width: 760px;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
box-shadow: 0 12px 40px rgba(0,0,0,0.2);
overflow: hidden;
}
.di-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid #eee;
flex-shrink: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
.di-title {
font-size: 16px;
font-weight: 600;
}
.di-close {
width: 28px;
height: 28px;
border: none;
background: rgba(255,255,255,0.2);
color: #fff;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.di-close:hover {
background: rgba(255,255,255,0.35);
}
.di-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.di-tip {
font-size: 12px;
color: #e74c3c;
margin-bottom: 14px;
line-height: 1.5;
}
.di-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 20px;
}
.di-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.di-row-empty {
visibility: hidden;
}
.di-row > label {
flex-shrink: 0;
width: 130px;
text-align: right;
font-size: 13px;
color: #666;
line-height: 30px;
}
.di-val {
flex: 1;
font-size: 13px;
color: #333;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.di-input {
flex: 1;
height: 30px;
padding: 0 8px;
font-size: 13px;
border: 1px solid #dcdfe6;
border-radius: 4px;
background: #fff;
color: #333;
outline: none;
transition: border-color 0.15s;
min-width: 0;
}
.di-input:focus {
border-color: #667eea;
}
.di-input-readonly {
background: #f5f7fa;
color: #888;
cursor: default;
}
.di-input-sm {
flex: 1;
}
.di-input-wrap {
flex: 1;
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.di-input-wrap .di-input {
flex: 1;
}
.di-unit {
font-size: 12px;
color: #888;
flex-shrink: 0;
}
/* 图标选择 */
.di-icon-section {
margin-top: 18px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.di-icon-label {
flex-shrink: 0;
width: 110px;
text-align: right;
font-size: 13px;
color: #666;
line-height: 32px;
}
.di-icon-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 4px;
}
.di-icon-item {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
border: 1.5px solid transparent;
background: #f8f9fa;
transition: border-color 0.15s, background 0.15s;
padding: 2px;
}
.di-icon-item:hover {
background: #eef0ff;
}
.di-icon-active {
border-color: #667eea;
background: #eef0ff;
}
.di-icon-img {
width: 28px;
height: 28px;
object-fit: contain;
display: block;
}
/* 备注 */
.di-remark-section {
margin-top: 14px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.di-remark-label {
flex-shrink: 0;
width: 110px;
text-align: right;
font-size: 13px;
color: #666;
line-height: 52px;
}
.di-textarea {
flex: 1;
min-height: 52px;
padding: 6px 8px;
font-size: 13px;
border: 1px solid #dcdfe6;
border-radius: 4px;
resize: vertical;
outline: none;
font-family: inherit;
transition: border-color 0.15s;
}
.di-textarea:focus {
border-color: #667eea;
}
/* 底部按钮 */
.di-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 12px 20px;
border-top: 1px solid #eee;
flex-shrink: 0;
background: #fafbfc;
}
.di-btn {
padding: 7px 22px;
font-size: 13px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.15s;
}
.di-btn-save {
background: #667eea;
color: #fff;
}
.di-btn-save:hover {
background: #5568d3;
}
.di-btn-cancel {
background: #fff;
color: #666;
border: 1px solid #dcdfe6;
}
.di-btn-cancel:hover {
border-color: #667eea;
color: #667eea;
}
.di-btn-danger {
background: #fff;
color: #999;
border: 1px solid #e8e8e8;
margin-right: auto;
}
.di-btn-danger:hover {
border-color: #ff7875;
color: #ff4d4f;
}
/* 手机端适配 */
@media (max-width: 767px) {
.di-mask {
padding: 8px;
align-items: stretch;
height: 100dvh;
height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
overflow-y: auto;
}
.di-modal {
max-height: calc(100dvh - 16px);
max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
border-radius: 8px;
}
.di-body {
padding: 12px 14px;
}
.di-footer {
flex-shrink: 0;
}
.di-grid {
grid-template-columns: 1fr;
gap: 6px;
}
.di-row > label {
width: 110px;
font-size: 12px;
}
.di-icon-grid {
grid-template-columns: repeat(6, 1fr);
}
.di-icon-img {
width: 24px;
height: 24px;
}
.di-icon-label, .di-remark-label {
width: 110px;
font-size: 12px;
}
}
/* 菜单按钮样式统一在文件末尾的 table-layout 菜单列规则中 */
/* 排序按钮样式 */
.device-list-panel .data-table thead th {
white-space: nowrap;
}
.device-list-panel .data-table thead th .sort-btn {
background: #f0f2f7;
border: 1px solid #e4e7ed;
border-radius: 14px;
cursor: pointer;
font-size: 11px;
margin-left: 3px;
vertical-align: middle;
padding: 4px 10px; /* 原 28px 太夸张，缩减到合理 10px，按钮占 th 宽度变小 */
color: #666;
line-height: 1;
transition: color 0.15s, background 0.15s;
min-height: 24px;
display: inline-flex;
align-items: center;
}
.device-list-panel .data-table thead th .sort-btn:hover {
color: #667eea;
}
.device-list-panel .data-table thead th .sort-btn.active {
color: #667eea;
font-weight: bold;
}
/* 运动状态列样式 */
.device-list-panel .data-table td.device-motion {
font-size: 12px;
white-space: nowrap;
padding: 12px 10px;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
/* 整行变色（设备名+运动状态+IMEI 统一颜色） */
.device-list-panel .data-table tr.row-stationary td {
color: #333; /* 静止：黑色 */
}
.device-list-panel .data-table tr.row-driving td {
color: #1e8449; /* 行驶：绿色 */
}
.device-list-panel .data-table tr.row-fast td {
color: #e67e22; /* 快速行驶：橙色 */
font-weight: 600;
}
.device-list-panel .data-table tr.row-offline td {
color: #bbb; /* 离线：灰色 */
}
.device-list-panel .data-table tr.row-offline-disabled td {
color: #888; /* 离线(未启用)：更深一点的灰色，以示区别 */
font-style: normal;
opacity: 0.9;
}
.device-list-panel .data-table tr.row-offline-disabled td:first-child .device-name {
text-decoration: none;
}
/* ============ 设备信息框 Popup 样式 ============ */
.device-popup {
font-size: 12px;
line-height: 1.35; /* 原 1.7 → 压缩行距 */
min-width: 220px; /* 原 260px → 手机上更紧凑 */
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 6px; /* 原 8px */
row-gap: 0; /* 原 1px → 去掉行间距 */
}
.device-popup-title {
grid-column: 1 / -1;
font-weight: 600;
font-size: 13px;
color: #1a1a2e;
padding-bottom: 3px; /* 原 6px */
margin-bottom: 2px; /* 原 4px */
border-bottom: 1px solid #eee;
}
.device-popup-row {
display: contents;
}
.device-popup-label {
color: #888;
white-space: nowrap;
}
.device-popup-val {
color: #333;
font-weight: 500;
word-break: break-all;
}
.device-popup-copy {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
font-size: 11px;
color: #4B3FE3;
background: #F2F7FF;
border: 1px solid #d0c8f5;
border-radius: 3px;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.device-popup-copy:hover {
background: #e8e4fb;
}
/* 右侧地图 */
.map-panel {
flex: 1;
position: relative;
overflow: hidden;
min-width: 0;
}
.map-container {
width: 100%;
height: 100%;
background: #e8eaed;
position: relative;
}
/* 地图加载遮罩 */
.map-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.95);
padding: 24px 32px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(231, 76, 60, 0.15);
z-index: 1000;
font-size: 14px;
color: #e74c3c;
pointer-events: none;
white-space: nowrap;
}
.map-loading .spinner {
width: 32px;
height: 32px;
border: 3px solid #ffd5d0;
border-top-color: #e74c3c;
}
.map-loading .map-loading-subtitle {
font-size: 12px;
color: #c0392b;
font-weight: normal;
}
/* 地图左下角控件（从右上角移过来） */
/* 地图左下角控件（竖排：自动→刷新→聚焦） */
.map-overlay-controls {
position: absolute;
bottom: 12px;
left: 12px;
z-index: 500;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
}
/* 自动刷新间隔：纯展示，无背景无按钮样式 */
.refresh-info.refresh-info {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 600 !important;
color: #555 !important;
line-height: 1.1 !important;
gap: 2px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
cursor: default !important;
white-space: nowrap;
}
.refresh-info .refresh-num {
font-size: 11px;
font-weight: 700;
color: #222;
line-height: 1;
-webkit-text-stroke: 0.4px #fff;
text-shadow: 0 0 1px rgba(255,255,255,0.6);
}
.refresh-info .refresh-dot {
width: 6px;
height: 6px;
background: #27ae60;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
/* 地图视图切换按钮组 */
.view-switch {
display: inline-flex;
align-items: center;
background: #f0f2f7;
border-radius: 6px;
padding: 2px;
gap: 2px;
}
.view-switch-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: #667eea;
color: #fff;
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.view-switch-btn:hover {
background: #5a6fd6;
color: #fff;
}
.view-switch-btn.active {
/* 紫色渐变高亮由下面的组合选择器提供 */
}
.basemap-toggle-btn.view-switch-btn.active {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
color: #fff !important;
}
.btn-refresh-map {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: #667eea;
color: #fff;
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: background 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.btn-refresh-map:hover {
background: #5568d3;
}
/* 调试按钮：默认隐藏，入口移至刷新秒数三连击 */
#showDebugBtn {
background: #95a5a6 !important;
display: none !important;
}
#showDebugBtn:hover {
background: #7f8c8d !important;
}
/* ============ 右上角底图切换控件（正方形按钮） ============ */
.basemap-switcher {
position: absolute;
top: 48px; /* 再进一步下挪，和顶栏保持 48px 呼吸感，明细开关移走后顶栏更空 */
right: 12px;
z-index: 500;
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
}
/* === 左下角统一容器：调试按钮 → 控制条 === */
.bottom-left-stack {
position: absolute;
bottom: 16px;
left: 12px;
z-index: 1001;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
justify-content: flex-end;
}
.bottom-left-stack > * {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
width: fit-content !important;
}
/* 调试按钮保留固定 36x36 圆形 */
.bottom-left-stack > #showDebugBtn {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
flex-shrink: 0;
}
/* === 右下角统一容器：竖向排列 scale → attribution → 底栏 === */
.bottom-right-stack {
position: absolute;
bottom: 60px;
right: 12px;
z-index: 800;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
justify-content: flex-end;
transition: bottom 0.2s ease;
}
/* 方案B：回放地图播放条显示时 → 整个右下角控件栈整体抬高，紧贴播放条顶部 */
#pbBottomRightStack.pb-controls-visible {
bottom: 174px;
}
/* 播放控制条：盖住比例尺 / 标识区域（方案B下控件组已整体抬到播放条上方，所以视觉上播放条不会盖住控件） */
.pb-controls {
z-index: 700;
}
.bottom-right-stack > * {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
width: fit-content !important;
}
/* 清除 Leaflet 内部控件默认的 right margin，让所有控件右对齐贴边 */
.bottom-right-stack .leaflet-bottom.leaflet-right {
position: static !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 0 !important;
}
.bottom-right-stack .leaflet-bottom.leaflet-right > * {
margin-right: 0 !important;
margin-bottom: 0 !important;
}
.bottom-left-stack .map-overlay-controls {
position: static !important;
left: auto !important;
bottom: auto !important;
z-index: auto !important;
}
.bottom-right-stack .leaflet-control-scale {
transform: scale(0.72) !important;
transform-origin: right bottom !important;
}
.bottom-right-stack .leaflet-control-scale-line {
background: transparent !important;
border-color: #666 !important;
color: #333 !important;
font-size: 16px !important;
padding: 1px 4px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
.bottom-right-stack .leaflet-control-attribution {
background: transparent !important;
font-size: 9px !important;
line-height: 1 !important;
padding: 0 !important;
height: auto !important;
display: flex !important;
flex-direction: row-reverse !important;
align-items: center !important;
gap: 3px !important;
box-shadow: none !important;
border: none !important;
}
.bottom-right-stack .leaflet-control-attribution img {
display: inline-block !important;
height: 18px !important;
max-height: 18px !important;
width: auto !important;
opacity: 0.95;
vertical-align: middle;
}
.bottom-right-stack .leaflet-control-attribution a {
line-height: 1 !important;
text-decoration: none !important;
color: #666 !important;
}
/* 按钮组：按钮 + 标签 */
.basemap-btn-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
/* 按钮下方的中文标签 */
.basemap-btn-label {
font-size: 11px;
color: #555;
background: rgba(255, 255, 255, 0.9);
padding: 1px 6px;
border-radius: 4px;
white-space: nowrap;
line-height: 1.4;
}
/* 正方形切换按钮 */
.basemap-toggle-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
border: none;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
color: #555;
cursor: pointer;
transition: all 0.2s;
padding: 0;
}
.basemap-toggle-btn:hover {
background: #fff;
color: #667eea;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(102, 126, 234, 0.25);
}
/* 刷新按钮冷却中 */
.basemap-toggle-btn.cooldown,
.basemap-toggle-btn:disabled {
background: rgba(200, 200, 200, 0.6) !important;
color: #999 !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
pointer-events: none !important;
}
/* 刷新按钮内图标 + 倒计时叠加 */
.btn-refresh-map {
position: relative;
}
.btn-refresh-map .btn-cooldown-num {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: #222;
-webkit-text-stroke: 0.4px #fff;
text-shadow: 0 0 1px rgba(255,255,255,0.6);
pointer-events: none;
}
.btn-refresh-map.cooldown svg {
opacity: 0.25;
}
/* 卫星模式时按钮高亮 */
.basemap-toggle-btn[data-basemap-type="satellite"] {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
}
.basemap-toggle-btn[data-basemap-type="satellite"]:hover {
color: #fff;
}
/* 图源弹窗容器 */
.basemap-source-wrap {
position: relative;
}
/* 图源选择弹窗 */
.basemap-source-popup {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
padding: 6px;
min-width: 180px;
z-index: 600;
}
.basemap-source-popup.show {
display: block;
}
.basemap-source-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 6px;
font-size: 14px;
color: #333;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.basemap-source-item:hover {
background: rgba(102, 126, 234, 0.1);
}
.basemap-source-item.active {
background: linear-gradient(135deg, #11998e, #38ef7d);
color: #fff;
}
.basemap-source-item img {
display: inline-block;
vertical-align: middle;
object-fit: contain;
}
/* ============ 轨迹回放：设备区（恢复经典布局：全宽搜索 + 下方已选卡片 + 下拉列表） ============ */
/* 搜索框（原始经典全宽） */
.pb-search {
width: 100%;
padding: 7px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 13px;
box-sizing: border-box;
margin-bottom: 6px;
}
.pb-search:focus {
outline: none;
border-color: #667eea;
}
/* 已选设备大卡片（下方单独一行，名称长也能完整显示） */
.pb-device-selected {
padding: 8px 10px;
background: #f6f8ff;
border: 1px solid #c9d1ff;
border-radius: 5px;
font-size: 12px;
line-height: 1.5;
margin-bottom: 6px;
}
.pb-device-selected .pb-device-info {
font-size: 13px;
font-weight: 600;
color: #1f2937;
}
.pb-device-selected .pb-device-imei {
font-size: 11px;
color: #6b7280;
margin-top: 1px;
}
.pb-device-empty {
color: #9aa4b1;
font-size: 12px;
}
/* 工时报表使用report-device组件的pb-device-selected样式 */
.pb-device-selected .rd-selected-icon {
font-size: 14px;
flex-shrink: 0;
}
.pb-device-selected .rd-selected-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
overflow: hidden;
}
.pb-device-selected .rd-selected-name {
font-size: 13px;
font-weight: 600;
color: #1f2937;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pb-device-selected .rd-selected-imei {
font-size: 11px;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pb-device-selected .rd-selected-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background: #dde3f0;
color: #6b7280;
font-size: 10px;
cursor: pointer;
flex-shrink: 0;
transition: background .15s, color .15s;
padding: 0;
line-height: 1;
}
.pb-device-selected .rd-selected-clear:hover {
background: #f87171;
color: #fff;
}
.pb-device-selected.show {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
background: #f0f4ff;
border: 1px solid #c9d6ff;
border-radius: 5px;
font-size: 12px;
line-height: 1.4;
min-height: 36px;
}
/* 下拉列表（原始经典：绝对定位在搜索框正下方，宽度撑满左栏内宽） */
.pb-device-section-relative {
position: relative;
}
.pb-device-list {
display: none;
background: #fff;
border: 1px solid #d8dee9;
border-radius: 4px;
max-height: 260px;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.10);
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
}
.pb-device-list.show { display: block; }
.pb-device-list .pb-device-item {
padding: 6px 10px;
font-size: 12px;
cursor: pointer;
border-bottom: 1px solid #f0f2f7;
transition: background 0.1s;
}
.pb-device-list .pb-device-item:last-child { border-bottom: none; }
.pb-device-list .pb-device-item:hover {
background: #667eea;
color: #fff;
}
.pb-device-list .pb-device-item:hover .pb-di-imei { color: #dde4ff; }
.pb-di-name { font-weight: 500; }
.pb-di-imei { font-size: 11px; color: #8b95a1; margin-top: 1px; }
/* 工时报表/使用report-device组件的pb-device-list样式 */
.pb-device-list .rd-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid #f5f5f5;
transition: background .12s;
gap: 10px;
}
.pb-device-list .rd-item:last-child {
border-bottom: none;
}
.pb-device-list .rd-item:hover {
background: #f0f4ff;
}
.pb-device-list .rd-item .rd-name {
color: #333;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pb-device-list .rd-item .rd-imei {
font-size: 11px;
color: #888;
flex-shrink: 0;
margin-top: 0;
}
.pb-device-list .rd-empty {
padding: 10px;
color: #999;
font-size: 12px;
text-align: center;
}
/* 设备 section 外层要 position: relative 保证下拉列表定位正确 */
#tab-playback .playback-panel .pb-section,
#tab-workhours .playback-panel .pb-section {
position: relative;
}
/* ============ 轨迹回放：定位类型 + 停留时间 压缩为「一行横排」省纵向空间 ============ */
.pb-compact-one-row {
padding: 4px 12px 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: nowrap;
}
.pb-compact-left, .pb-compact-right {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
min-width: 0;
}
.pb-inline-label {
font-size: 12px;
color: #6b7280;
white-space: nowrap;
flex-shrink: 0;
margin: 0;
padding: 0;
display: inline-block;
line-height: 1;
}
/* 缩小的 chip 按钮（定位类型） */
.pb-loc-type-sm {
gap: 4px;
}
.pb-chip-sm {
padding: 3px 8px !important;
font-size: 11px !important;
border-radius: 4px !important;
min-height: 24px;
line-height: 1;
white-space: nowrap;
}
.pb-chip-sm.active {
background: #667eea !important;
color: #fff !important;
border-color: #667eea !important;
}
/* 缩小的停留下拉 */
.pb-stop-select-sm {
height: 24px !important;
line-height: 24px;
padding: 0 6px !important;
font-size: 11px !important;
border-radius: 4px !important;
border: 1px solid #d5dae6;
background: #ffffff;
color: #1f2937;
white-space: nowrap;
}
.pb-stop-select-sm:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(102,126,234,0.12);
}
/* ============ 轨迹回放左侧面板 ============ */
.playback-panel {
width: 380px;
min-width: 380px;
background: #fff;
border-right: 1px solid #e8e8e8;
display: flex;
flex-direction: column;
/* 统一设备选择器的下拉（.ds-list absolute top: 100%+4px）可能冲出左侧面板底部；
原 overflow:hidden 会把下拉整体裁剪 → pb 点搜索框看不到列表、wh2 因为 panel 高所以偶尔能看见。
改为 x 轴隐藏（保横向布局干净，无横向滚动条）+ y 轴 visible（允许 ds-list 溢出）。
play-panel 本来自带 max-height，且内部没有横向溢出，所以 x 保持 hidden 无副作用。*/
overflow-x: hidden;
overflow-y: visible;
}
.playback-panel .sidebar-header {
padding: 12px 16px 10px;
border-bottom: 1px solid #f0f0f0;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
color: #fff;
justify-content: center;
}
.playback-panel .sidebar-title {
font-size: 15px;
font-weight: 600;
display: block;
text-align: center;
}
.pb-section {
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.pb-section:last-child {
border-bottom: none;
}
.pb-label {
display: block;
font-size: 12px;
font-weight: 600;
color: #555;
margin-bottom: 4px;
}
/* 横向布局 */
.pb-row-section {
display: flex;
gap: 12px;
align-items: flex-start;
}
.pb-row-item {
flex: 1;
min-width: 0;
}
.pb-row-item .pb-label {
margin-bottom: 4px;
}
.pb-stop-item {
flex: 0.7;
display: flex;
align-items: center;
gap: 4px;
}
.pb-stop-item .pb-label {
margin: 0;
flex-shrink: 0;
}
.pb-stop-item .pb-stop-select {
flex: 1;
min-width: 0;
}
/* 设备搜索 */
.pb-search {
width: 100%;
padding: 7px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 13px;
box-sizing: border-box;
margin-bottom: 4px;
}
.pb-search:focus {
outline: none;
border-color: #667eea;
}
/* 左栏"设备"区块现在紧凑：顶部条已经显示选中设备，这里只保留搜索+下拉列表 */
.pb-device-section-compact {
padding: 8px 12px 6px;
}
.pb-device-search-row { margin-bottom: 2px; }
.pb-device-selected-hide {
display: none !important;
}
.pb-device-selected {
padding: 6px 8px;
background: #f5f7ff;
border: 1px solid #e0e6ff;
border-radius: 4px;
font-size: 12px;
color: #333;
margin-bottom: 6px;
}
.pb-device-empty {
color: #999;
}
.pb-device-selected .pb-device-info {
font-weight: 500;
color: #333;
}
.pb-device-selected .pb-device-imei {
font-size: 11px;
color: #888;
}
.pb-device-list {
max-height: 140px;
overflow-y: auto;
border: 1px solid #eee;
border-radius: 4px;
display: none;
}
.pb-device-list.show {
display: block;
}
.pb-device-item {
padding: 6px 10px;
font-size: 12px;
cursor: pointer;
border-bottom: 1px solid #f5f5f5;
}
.pb-device-item:hover {
background: #f0f2ff;
}
.pb-device-item:last-child {
border-bottom: none;
}
.pb-device-item .pb-di-name {
color: #333;
font-weight: 500;
}
.pb-device-item .pb-di-imei {
font-size: 11px;
color: #999;
}
/* 定位类型 chip */
.pb-loc-type {
display: flex;
gap: 6px;
}
.pb-chip {
padding: 4px 12px;
background: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 12px;
color: #666;
cursor: pointer;
transition: all 0.2s;
}
.pb-chip.active {
background: #667eea;
color: #fff;
border-color: #667eea;
}
/* 日历 */
.pb-calendar {
border: 1px solid #eee;
border-radius: 4px;
padding: 6px;
margin-bottom: 6px;
}
/* 日历 wrapper + loading 遮罩 */
.pb-cal-wrapper {
position: relative;
}
.pb-cal-mask {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(3px);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.pb-cal-mask-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 16px 20px;
}
.pb-cal-mask .spinner {
width: 28px;
height: 28px;
border: 3px solid #e0e3ff;
border-top-color: #667eea;
border-radius: 50%;
animation: pb-spin 0.8s linear infinite;
}
.pb-cal-mask .timed-loading-text {
font-size: 13px;
color: #555;
display: inline-flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
justify-content: center;
text-align: center;
max-width: 100%;
}
.pb-cal-mask .tl-tail {
display: inline-flex;
align-items: center;
}
.pb-cal-mask .tl-cancel {
color: #999;
font-size: 12px;
text-decoration: none;
margin-left: 8px;
cursor: pointer;
}
.pb-cal-mask .tl-cancel:hover {
color: #e74c3c;
}
.pb-cal-mask .tl-sec {
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: #888;
}
.pb-cal-mask .timed-out .tl-sec {
color: #e74c3c;
font-weight: 600;
}
.pb-cal-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4px 6px;
}
.pb-cal-nav button {
background: none;
border: 1px solid #e0e0e0;
border-radius: 3px;
padding: 4px 10px;
height: 28px;
cursor: pointer;
font-size: 12px;
color: #666;
white-space: nowrap;
}
.pb-cal-title {
font-size: 13px;
font-weight: 600;
color: #333;
}
.pb-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
font-size: 11px;
color: #999;
text-align: center;
padding: 2px 0;
margin-bottom: 2px;
}
.pb-cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.pb-cal-day {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 3px;
font-size: 12px;
cursor: pointer;
background: #f9f9f9;
position: relative;
transition: all 0.15s;
}
.pb-cal-day:hover {
background: #eef0ff;
}
.pb-cal-day.other-month {
color: #ccc;
background: transparent;
}
.pb-cal-day.has-data::after {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 4px;
height: 4px;
background: #e0e0e0;
border-radius: 50%;
}
/* 当灰点和橙点同时存在时，灰点往左移一格，形成"灰左橙右"并排 */
.pb-cal-day.has-data.has-crossed-day::after {
right: 8px;
}
.pb-cal-day.selected {
background: #667eea;
color: #fff;
font-weight: 600;
}
.pb-cal-day .pb-cal-mile {
font-size: 9px;
color: #667eea;
line-height: 1;
margin-top: 1px;
}
.pb-cal-day.selected .pb-cal-mile {
color: rgba(255, 255, 255, 0.85);
}
/* 工时报表 - 跨日标记 */
.pb-cal-day.has-crossed-day::before {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 4px;
height: 4px;
background: #ff9800;
border-radius: 50%;
z-index: 1;
}
.pb-calendar-summary {
font-size: 12px;
color: #666;
text-align: center;
position: relative;
}
.pb-calendar-summary b {
color: #e53935;
font-size: 14px;
}
/* 时间行 */
.pb-time-row {
margin-bottom: 6px;
}
.pb-time-row:last-child {
margin-bottom: 0;
}
.pb-time-row .pb-label {
margin-bottom: 3px;
font-weight: 500;
}
/* 时间行内布局 */
.pb-time-row-inline {
display: flex;
gap: 8px;
margin-bottom: 6px;
}
.pb-time-col {
flex: 1;
min-width: 0;
}
.pb-time-col .pb-label {
margin-bottom: 2px;
font-weight: 500;
}
.pb-time-input {
width: 100%;
padding: 5px 6px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 11px;
box-sizing: border-box;
}
/* 速度阈值区域压缩 */
.pb-speed-section {
padding-top: 4px;
padding-bottom: 4px;
}
/* 速度滑块 */
.pb-slider-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.pb-slider-label {
font-size: 11px;
color: #888;
white-space: nowrap;
}
.pb-slider {
flex: 1;
min-width: 80px;
accent-color: #667eea;
}
.pb-stop-select {
padding: 3px 6px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 11px;
background: #fff;
}
.pb-speed-meter {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
}
.pb-speed-tag {
font-size: 10px;
color: #666;
white-space: nowrap;
}
.pb-speed-tag.slow {
color: #4caf50;
}
.pb-speed-tag.fast {
color: #7b1fa2;
}
.pb-speed-bar {
flex: 1;
height: 6px;
background: #eee;
border-radius: 3px;
overflow: hidden;
position: relative;
}
.pb-speed-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, #4caf50, #2196f3, #e53935, #7b1fa2);
border-radius: 3px;
transition: width 0.3s;
}
/* 快捷按钮 */
.pb-quick {
display: flex;
gap: 4px;
flex-wrap: nowrap;
}
.pb-quick-btn {
flex: 1;
min-width: 0;
padding: 5px 2px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 3px;
font-size: 11px;
color: #555;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.pb-quick-btn:hover {
border-color: #667eea;
color: #667eea;
}
/* 轨迹回放快捷时间按钮选中态：紫色实心 + 阴影，与 btn-link 的蓝色区分（保留侧边栏紫色主色的视觉一致） */
.pb-quick-btn.pb-quick-btn-active {
background: linear-gradient(135deg, #667eea, #764ba2);
border-color: transparent;
color: #fff;
font-weight: 600;
box-shadow: 0 1px 4px rgba(102, 126, 234, 0.4);
}
.pb-quick-btn.pb-quick-btn-active:hover {
color: #fff;
border-color: transparent;
opacity: 0.95;
}
/* 开始回放按钮 */
.pb-start-btn {
width: 100%;
padding: 10px;
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
border: none;
border-radius: var(--btn-radius);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
cursor: pointer;
transition: opacity 0.2s;
}
.pb-start-btn:hover {
opacity: 0.92;
}
.pb-start-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pb-query-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12px;
color: #e74c3c;
margin-top: 8px;
}
.pb-query-loading .spinner {
width: 16px;
height: 16px;
border-width: 2px;
}
/* 停留/事件/行程 列表 */
.pb-list-section {
flex: 1;
display: flex;
flex-direction: column;
min-height: 120px;
overflow: hidden;
padding-bottom: 4px;
}
.pb-tabs {
display: flex;
border-bottom: 2px solid #f0f0f0;
margin-bottom: 4px;
flex-shrink: 0;
}
.pb-tab {
flex: 1;
padding: 6px 2px;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
font-size: 12px;
color: #888;
cursor: pointer;
}
.pb-tab.active {
color: #667eea;
border-bottom-color: #667eea;
font-weight: 600;
}
.pb-list-container {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.pb-list-item {
padding: 6px 8px;
border-bottom: 1px solid #f5f5f5;
font-size: 11px;
cursor: pointer;
transition: background 0.15s;
}
.pb-list-item:hover {
background: #f0f2ff;
}
.pb-list-item:last-child {
border-bottom: none;
}
.pb-li-title {
display: flex;
align-items: center;
gap: 4px;
font-weight: 600;
color: #333;
margin-bottom: 2px;
}
.pb-li-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: #eef0ff;
color: #667eea;
font-size: 9px;
flex-shrink: 0;
}
.pb-li-icon.park {
background: #fff3e0;
color: #f57c00;
}
.pb-li-icon.trip {
background: #e8f5e9;
color: #43a047;
}
.pb-li-time {
color: #999;
margin-bottom: 2px;
}
.pb-li-addr {
color: #666;
line-height: 1.4;
word-break: break-all;
}
.pb-li-duration {
display: inline-block;
margin-top: 2px;
padding: 1px 5px;
background: #f0f0f0;
border-radius: 3px;
font-size: 10px;
color: #555;
}
/* ============ 轨迹回放地图控件 ============ */
.pb-map-top-bar {
position: absolute;
top: 12px;
right: 12px;
z-index: 500;
display: flex;
justify-content: flex-end;
align-items: flex-start;
pointer-events: none;
display: none; /* 轨迹明细开关已搬到播放进度条右侧，原顶栏容器空出 */
}
/* 轨迹回放：底图切换按钮统一 48px，与通用 basemap-switcher 保持一致 */
#pbbasemapSwitcher {
top: 48px !important;
}
.pb-legend {
position: relative;
top: 0;
left: 0;
display: flex;
gap: 10px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
padding: 6px 12px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
font-size: 12px;
color: #555;
pointer-events: auto;
}
.pb-legend-item {
display: flex;
align-items: center;
gap: 4px;
}
.pb-legend-color {
display: inline-block;
width: 14px;
height: 3px;
border-radius: 2px;
}
/* 播放控制条 — z-index:700 需高于 Leaflet marker-pane(600)，防止 marker 矩形盖住按钮 */
.pb-controls {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 700;
/* 与放大缩小按钮保持一致的半透明度；
注意：刻意不用 backdrop-filter — iOS Safari 在 z-index>600 + backdrop-filter 组合时
会出现合成器命中测试 bug：视觉层正常，但触摸事件实际落到下方 marker/地图上，
表现为「播放中按钮都无法点击，拖动进度条打断播放后恢复」 */
background: rgba(255, 255, 255, 0.75);
border-radius: 10px;
padding: 8px 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.pb-progress {
margin: 2px 0 6px;
}
.pb-progress input[type=range] {
width: 100%;
accent-color: #667eea;
}
/* 显示轨迹明细开关：放在进度条的"外面"右上角 —— 地图区域右侧、底图切换按钮下方、播放控制条上方 */
.pb-detail-switch {
position: absolute;
right: 12px;
/* 桌面端：控制条 bottom=12 + 紧凑高度≈140 + 6px 间隙 = 158；预留一点富余，
同时往下挪 10px 避免与 Leaflet 比例尺 / attribution 区域边缘重叠 */
bottom: 150px;
z-index: 650;
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
padding: 6px 12px;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
font-size: 12px;
color: #555;
cursor: pointer;
pointer-events: auto;
}
.pb-detail-switch input {
accent-color: #667eea;
}
/* 播放条底部一行：播放按钮 + 速度控件 */
.pb-controls-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.pb-ctrl-btns {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-shrink: 0;
}
/* 播放条里的速度控件（从左侧面板移入） */
.pb-bar-speed-wrap {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 320px;
min-width: 280px;
max-width: 480px;
}
.pb-bar-speed-slider {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 150px;
}
.pb-bar-speed-label {
font-size: 11px;
color: #888;
white-space: nowrap;
}
.pb-bar-speed-btns {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.pb-bar-speed-btns .pb-speed-btn {
padding: 3px 8px;
font-size: 11px;
}
.pb-ctrl-btn {
width: 36px;
height: 36px;
background: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.pb-ctrl-btn:hover {
background: #eef0ff;
border-color: #667eea;
}
.pb-ctrl-btn.pb-play-btn {
width: 48px;
height: 48px;
background: #667eea;
border-color: #667eea;
color: #fff;
font-size: 18px;
}
.pb-ctrl-btn.pb-play-btn:hover {
background: #5568d3;
border-color: #5568d3;
}
/* 倍速按钮组 */
.pb-speed-btns {
display: flex;
gap: 4px;
margin-left: 8px;
}
.pb-speed-btn {
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
background: #f5f7fa;
border: 1px solid #e0e0e0;
border-radius: 14px;
color: #666;
cursor: pointer;
transition: all 0.15s;
}
.pb-speed-btn:hover {
background: #eef0ff;
border-color: #667eea;
color: #667eea;
}
.pb-speed-btn.active {
background: #667eea;
border-color: #667eea;
color: #fff;
}
.pb-time-label {
font-size: 12px;
color: #666;
margin-left: 10px;
font-variant-numeric: tabular-nums;
}
/* 全部路线 / 聚焦设备 按钮：桌面+手机统一样式 — 主题色实心背景 + 白色字体 */
.pb-fit-btn {
position: absolute;
left: 12px;
top: 96px;
z-index: 600;
width: auto;
min-width: 84px;
height: auto;
border-radius: 6px;
background: #667eea; /* 统一为主题色实心背景 */
color: #fff; /* 白色字体 */
border: 1px solid transparent;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
padding: 6px 12px;
cursor: pointer;
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.35);
transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}
.pb-fit-btn:hover {
transform: scale(1.03);
background: #5568d3; /* hover 加深，保持同色系 */
color: #fff;
border-color: transparent;
}
.pb-fit-btn.active {
background: #667eea; /* 激活态（聚焦设备）保持一致视觉 */
color: #fff;
border-color: transparent;
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.35);
}
.pb-fit-btn.active:hover {
background: #5568d3;
}
/* Leaflet 标记弹窗样式 */
.leaflet-popup-content {
font-size: 12px;
line-height: 1.35;
margin: 4px 8px 4px 6px; /* 原 8px 12px 8px 10px → 压缩外框留白 */
}
.leaflet-container a.leaflet-popup-close-button {
width: 44px !important;
height: 26px !important;
font-size: 0 !important;
line-height: 26px !important;
text-align: center !important;
padding: 0 !important;
top: 6px !important;
right: 6px !important;
border-radius: 13px !important;
border: 1px solid #d0c8f5 !important;
background: #F2F7FF !important;
color: transparent !important;
cursor: pointer !important;
z-index: 10 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
transition: background 0.15s !important;
}
.leaflet-container a.leaflet-popup-close-button::before {
content: '✕';
font-size: 12px;
line-height: 26px;
color: #4B3FE3 !important;
font-weight: 500;
display: block;
text-align: center;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:active {
background: #e8e4fb !important;
border-color: #d0c8f5 !important;
}
.leaflet-container a.leaflet-popup-close-button:hover::before,
.leaflet-container a.leaflet-popup-close-button:active::before {
color: #4B3FE3 !important;
}
/* Leaflet 默认的 wrapper padding 压缩 */
.leaflet-popup-content-wrapper {
padding: 2px 0; /* 原约 8px 10px → 压缩外框留白 */
border-radius: 8px;
}
.leaflet-popup {
margin-bottom: 8px; /* 原 12px → popup 底部离 marker 的距离 */
}
.leaflet-popup-tip-container {
margin-top: -2px; /* 原 1px → 箭头和内容框更贴合 */
}
/* direction: top 时，popup 向上弹出，箭头位于底部中心指向 marker */
.leaflet-popup.towards-top .leaflet-popup-tip-container {
top: auto;
bottom: 0;
margin-bottom: -16px;
}
.leaflet-popup.towards-top .leaflet-popup-tip {
width: 12px;
height: 12px;
margin-left: -6px;
margin-top: 0;
transform: rotate(0deg);
}
.popup-device-name {
font-weight: 600;
font-size: 14px;
color: #333;
margin-bottom: 4px;
}
.popup-device-info {
color: #666;
font-size: 12px;
}
.popup-device-info span {
color: #333;
}
/* ============ 工具栏 ============ */
.toolbar {
display: flex;
gap: 12px;
margin-bottom: 16px;
align-items: center;
}
.search-input {
flex: 1;
max-width: 400px;
padding: 9px 14px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}
.search-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
/* ============ 按钮 ============ */
.btn {
padding: var(--btn-padding-y) var(--btn-padding-x);
border: none;
border-radius: var(--btn-radius);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
cursor: pointer;
transition: var(--btn-transition);
}
.btn:hover {
opacity: 0.85;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary {
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
}
.btn-secondary {
background: #f0f0f0;
color: #333;
border: 1px solid #ddd;
}
.btn-success {
background: var(--btn-success-bg);
color: var(--btn-success-color);
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
}
.btn-link {
background: none;
color: #667eea;
text-decoration: underline;
padding: 5px 8px;
}
/* ============ 表格 ============ */
.table-container {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
/* 方案 B：表格容器独立可滚动（横+竖），thead sticky 粘在自身容器顶部 */
overflow: auto;
/* PC 端：扣除顶部栏 + 主/二级 tab + 筛选表单 + 统计栏，剩下的高度给表格独立滚动 */
max-height: calc(100vh - 360px);
/* 平滑滚动，firefox 也支持 sticky th */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* 报表表格 — 冻结表头（类 Excel）：thead th 粘在容器顶部 */
.table-container > .data-table thead th {
position: sticky;
top: 0;
z-index: 10;
/* 必须显式设背景色，不然 th 透明，滚过去的 tbody 内容会透上来 */
background: #fafafa;
/* 底下加一条阴影，一眼看出是"冻结的表头"，跟行内容有层次感 */
box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.15);
/* 保留与原有 th 一致的底部边框 */
border-bottom: 2px solid #e8e8e8;
}
/* 第一行 th 下方不被阴影糊住，行分割还是靠原有的 td 边框 */
.table-container > .data-table tbody tr:first-child td {
border-top: none;
}
/* 手机端：屏幕高度小，扣的值要不同 */
@media (max-width: 767px) {
.table-container {
/* 移动端顶栏更紧凑，但筛选表单往往是竖排的，反而占更多高度；用一个保守扣值 + min-height 保证不会被挤没 */
max-height: calc(100vh - 400px);
min-height: 280px;
border-radius: 6px;
}
.table-container > .data-table thead th {
padding: 10px 10px;
font-size: 12px;
}
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table thead {
background: #fafafa;
}
.data-table th {
padding: 12px 16px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: #555;
border-bottom: 1px solid #e8e8e8;
white-space: nowrap;
}
.data-table td {
padding: 10px 16px;
font-size: 13px;
border-bottom: 1px solid #f0f0f0;
}
.data-table tbody tr:hover {
background: #f9f9ff;
}
.device-name {
font-weight: 500;
color: #333;
}
.temp-cell {
font-family: "SF Mono", "Consolas", monospace;
font-size: 12px;
color: #e74c3c;
}
/* ============ 徽章 ============ */
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.badge-green {
background: #e6f7ee;
color: #27ae60;
}
.badge-gray {
background: #f5f5f5;
color: #999;
}
/* 当前ACC状态样式 */
.stat-value.acc-on {
color: #10b981;
font-weight: 600;
}
.stat-value.acc-off {
color: #6b7280;
font-weight: 500;
}
/* ACC警告提示 */
.acc-warning {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
margin: 8px 16px;
background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
border: 1px solid #fcd34d;
border-radius: 8px;
color: #92400e;
font-size: 13px;
line-height: 1.5;
box-shadow: 0 1px 3px rgba(252, 211, 77, 0.2);
}
.acc-warning-icon {
font-size: 18px;
flex-shrink: 0;
}
.acc-warning-text {
flex: 1;
}
/* 工时报表当前ACC状态 — 在紫色渐变 header bar 上做展示型标签，不要按钮感！
之前是灰色背景+圆角，像个贴错位置的按钮。改为按状态切换底色的胶囊。 */
.wh2-current-acc {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: rgba(255, 255, 255, 0.18); /* 默认：紫底上的浅色半透明胶囊 */
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 12px;
font-size: 12px;
line-height: 1.4;
user-select: none;
transition: background .2s ease;
}
/* 当前ACC开启中：整颗胶囊改成绿色半透明底，绿字更突出 */
.wh2-current-acc.is-on {
background: rgba(16, 185, 129, 0.22); /* 深绿半透明 */
border-color: rgba(16, 185, 129, 0.55); /* 深绿边框 */
}
.wh2-current-acc-label {
color: rgba(255, 255, 255, 0.75); /* 紫底上的半透明白，区分 label 和 status */
}
.wh2-current-acc-status {
font-weight: 600;
color: #fff; /* 状态文字更亮，一眼看到 */
letter-spacing: 0.5px;
}
.wh2-current-acc-status.acc-on {
color: #10b981; /* 开启中 → 项目统一的正常绿色，易识别 */
}
.wh2-current-acc-status.acc-off {
color: rgba(255, 255, 255, 0.9); /* 已关闭 → 近白色，不强调 */
}
/* ============ 搜索面板 ============ */
.search-panel {
background: #fff;
padding: 20px;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.form-row {
display: flex;
gap: 16px;
margin-bottom: 12px;
flex-wrap: wrap;
align-items: flex-end;
}
.form-group {
display: flex;
flex-direction: column;
gap: 4px;
}
/* 快捷日期按钮组：没有 label，需要贴底对齐输入框的 baseline */
.form-group-quick {
display: inline-flex;
align-items: flex-end;
height: 100%;
}
.form-group label {
font-size: 12px;
color: #666;
font-weight: 500;
height: 17px; /* 与输入框旁边的 label 等高，保证所有行对齐 */
line-height: 17px;
}
.select-input,
.datetime-input,
input[type="number"].small-input,
.small-input {
height: 38px; /* 统一所有输入控件高度 */
line-height: 1.4;
padding: 6px 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
color: #2c3e50;
box-sizing: border-box;
background: #fff;
transition: border-color .15s, box-shadow .15s;
}
.select-input,
.datetime-input {
width: 180px;
cursor: pointer;
}
/* ACC状态下拉较窄，内容只有"全部/开/关" */
.acc-status-select {
width: 100px;
}
/* ========== Flatpickr 自定义样式 ========== */
.flatpickr-calendar {
font-size: 14px;
width: 320px !important;
padding: 18px 12px 14px; /* 顶部分离一点，不那么贴近顶部；底部多留一点空间给确定按钮 */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border-radius: 8px;
}
.flatpickr-calendar .flatpickr-months {
padding: 2px 4px 10px;
}
/* 顶部年月：2026 年放前面，8 月放后面，中间加年份图标 */
.flatpickr-calendar .flatpickr-current-month {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 15px;
font-weight: 600;
padding: 0 8px;
}
.flatpickr-calendar .flatpickr-current-month .cur-month {
order: 2; /* 月份放后面 */
margin-left: 2px;
}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper.cur-year {
order: 1; /* 年份放前面 */
width: auto !important;
}
/* 年份/月份切换图标 */
.flatpickr-calendar .flatpickr-current-month input.cur-year {
font-size: 15px;
font-weight: 600;
padding: 0;
width: auto !important;
}
.flatpickr-calendar .flatpickr-current-month span.cur-month::after {
display: none; /* 去掉原月份后的额外图标，使用自定义年/月展示顺序 */
}
.flatpickr-calendar .flatpickr-weekdays {
margin-bottom: 4px;
}
.flatpickr-calendar .flatpickr-weekday {
font-size: 13px;
font-weight: 600;
padding: 4px 0;
}
.flatpickr-calendar .flatpickr-day {
font-size: 14px;
width: 40px;
height: 40px;
line-height: 40px;
margin: 2px;
border-radius: 6px;
}
.flatpickr-calendar .flatpickr-day:hover {
background: #e8f0fe;
border-color: transparent;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
background: #27ae60;
border-color: #27ae60;
color: white;
}
.flatpickr-calendar .flatpickr-day.today:not(.selected) {
border-color: #f39c12;
color: #f39c12;
}
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
color: #ccc;
}
.flatpickr-calendar .flatpickr-time {
/* 完全不触碰 flatpickr 内部的布局，时分秒的列宽度/排列都由它原生控制 */
border-top: 1px solid #eee;
}
/* 给确定按钮腾出空间：时间单元稍微缩短一点，但不改动 flatpickr 原有排列布局 */
.flatpickr-calendar .flatpickr-time .flatpickr-time-input {
font-size: 15px;
font-weight: 600;
padding: 4px 6px;
box-sizing: border-box;
}
.flatpickr-calendar .flatpickr-time .flatpickr-arrow-up,
.flatpickr-calendar .flatpickr-time .flatpickr-arrow-down {
padding: 2px 6px;
}
.flatpickr-calendar .flatpickr-time .flatpickr-arrow-up:hover,
.flatpickr-calendar .flatpickr-time .flatpickr-arrow-down:hover {
background: #f0f0f0;
}
/* 隐藏原有的 AM/PM 容器占位（因为我们启用了 24 小时制） */
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
display: none !important;
}
/* 自定义确定按钮：放在整个日历容器的最底部（独立于 flatpickr-time 之外），
这样完全不影响时分秒列的原生布局和宽度计算 */
.flatpickr-calendar > .fp-confirm-btn {
display: block;
width: calc(100% - 24px);
min-height: 34px;
margin: 10px 12px 12px;
padding: 6px 12px;
border: 1px solid #27ae60;
border-radius: 6px;
background: #27ae60;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
box-sizing: border-box;
text-align: center;
}
.flatpickr-calendar > .fp-confirm-btn:hover {
background: #229954;
border-color: #229954;
transform: translateY(-1px);
}
.flatpickr-calendar > .fp-confirm-btn:active {
transform: translateY(0);
background: #1e8449;
border-color: #1e8449;
}
/* Flatpickr 输入框样式 */
.datetime-input.flatpickr-input {
background: #fff;
cursor: pointer;
}
.flatpickr-input[readonly] {
cursor: pointer;
background: #fff;
}
.small-input,
input[type="number"].small-input {
width: 85px;
}
.select-input:focus,
.datetime-input:focus,
.small-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
/* 温度报表：报表类型选择框缩减 */
#tempReportType {
width: 140px;
}
/* ========== 报表页可搜索设备选择器 ========== */
.report-device-select {
position: relative;
width: 150px;
}
.report-device-search {
width: 100% !important;
}
.report-device-list {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 280px;
right: auto;
max-height: 320px;
overflow-y: auto;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
z-index: 9999;
margin-top: 2px;
}
.report-device-list.show {
display: block;
}
.report-device-list .rd-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid #f5f5f5;
transition: background .12s;
gap: 10px;
}
.report-device-list .rd-item:last-child {
border-bottom: none;
}
.report-device-list .rd-item:hover {
background: #f0f4ff;
}
.report-device-list .rd-item .rd-name {
color: #333;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.report-device-list .rd-item .rd-imei {
font-size: 11px;
color: #888;
flex-shrink: 0;
margin-top: 0;
}
.report-device-list .rd-empty {
padding: 10px;
color: #999;
font-size: 12px;
text-align: center;
}
/* 报表页：搜索框 + 已选设备显示区 容器（自适应布局） */
.report-device-select-wrapper {
display: flex;
align-items: stretch;
gap: 8px;
flex-wrap: wrap;
}
.report-device-select-wrapper .report-device-select {
flex: 0 0 150px;
}
/* 已选设备显示区：固定宽度，名称+IMEI竖排，防止选中不同设备时布局跳动 */
.report-device-selected {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
background: #fafbfc;
border: 1px dashed #d5d9e0;
border-radius: 5px;
font-size: 12px;
line-height: 1.4;
height: 36px;
width: 220px;
visibility: hidden;
transition: border-color .15s, background .15s;
}
.report-device-selected.show {
visibility: visible;
background: #f0f4ff;
border: 1px solid #c9d6ff;
}
.report-device-selected .rd-selected-icon {
font-size: 14px;
flex-shrink: 0;
}
.report-device-selected .rd-selected-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
overflow: hidden;
}
.report-device-selected .rd-selected-name {
font-size: 13px;
font-weight: 600;
color: #1f2937;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.report-device-selected .rd-selected-imei {
font-size: 11px;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.report-device-selected .rd-selected-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background: #dde3f0;
color: #6b7280;
font-size: 10px;
cursor: pointer;
flex-shrink: 0;
transition: background .15s, color .15s;
padding: 0;
line-height: 1;
}
.report-device-selected .rd-selected-clear:hover {
background: #f87171;
color: #fff;
}
/* 窄屏自适应：已选设备显示区移到搜索框下方 */
@media (max-width: 768px) {
.report-device-select-wrapper {
flex-direction: column;
}
.report-device-select-wrapper .report-device-select {
flex: 1 1 auto;
width: 100%;
}
.report-device-selected {
width: 100%;
}
}
/* 让所有 form-group label 的字号一致，下方控件对齐 */
.form-group {
min-width: 0;
}
.form-group label {
font-size: 12px;
color: #666;
font-weight: 500;
line-height: 1.4;
height: 17px; /* 统一label高度，保证输入控件底部对齐 */
}
/* ============ 快捷时间按钮 ============ */
.quick-buttons {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
/* 快捷日期按钮「当前选中」状态 —— 蓝色实心 + 阴影，与周围 btn-link 对比明显但不突兀 */
.btn.btn-sm.btn-link.quick-btn-active {
background: #3b82f6;
color: #fff;
border-radius: 5px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 1px 4px rgba(59, 130, 246, 0.35);
padding: 3px 10px;
}
.btn.btn-sm.btn-link.quick-btn-active:hover {
background: #2563eb;
color: #fff;
}
/* ============ 统计栏 ============ */
.stats-bar {
display: flex;
gap: 24px;
background: #fff;
padding: 12px 20px;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
align-items: center;
flex-wrap: wrap;
position: relative;
}
/* 统计栏最前面的设备信息块：设备名称 + IMEI，样式跟 stat-item 完全一致，方便双击复制 IMEI */
.stat-device {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
background: transparent;
color: inherit;
border-radius: 0;
font-size: 13px;
font-weight: normal;
white-space: nowrap;
box-shadow: none;
margin-right: 8px;
min-height: 24px;
}
.stat-device .stat-device-name {
font-size: 16px;
font-weight: 600;
color: #667eea;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-device .stat-device-imei {
background: transparent;
padding: 0;
border-radius: 0;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 13px;
font-weight: 600;
color: #667eea;
user-select: all; /* 单击整串选中，双击也能选中，便于复制 */
}
.stat-device::after {
content: '';
display: inline-block;
width: 1px;
height: 20px;
margin-left: 8px;
background: #e6e6e6;
}
/* 温度报表统计栏里的统计项容器：跟其他 Tab 一样横排，窄屏自动换行 */
#tempSummaryItems {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.stat-item {
display: flex;
gap: 8px;
align-items: center;
}
.stat-label {
font-size: 13px;
color: #999;
}
.stat-value {
font-size: 16px;
font-weight: 600;
color: #667eea;
}
.stat-unit {
font-size: 12px;
color: #999;
}
/* ============ 表格汇总行 ============ */
.data-table tfoot {
display: table-footer-group;
}
.summary-row {
background: #f5f7fa !important;
font-weight: 600;
}
.summary-row td {
color: #667eea;
}
/* ============ 缓存命中提示 ============ */
.cache-hint {
display: none;
position: absolute;
right: 16px;
top: 8px;
font-size: 11px;
color: #999;
background: #f8f8f8;
padding: 2px 8px;
border-radius: 3px;
border: 1px solid #e8e8e8;
z-index: 10;
pointer-events: none;
animation: cacheHintFadeIn 0.3s ease;
}
@keyframes cacheHintFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.cache-hint.show {
display: inline-block;
}
/* ============ 加载中 ============ */
.loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 40px;
color: #e74c3c;
}
/* 查询xxx中...（12秒） 取消 —— 整行不折 */
.timed-loading .timed-loading-text {
font-size: 15px;
color: #333;
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: 2px 4px;
white-space: nowrap;
}
/* 尾巴：（秒数）+取消 整组不拆分（已由 nowrap 保证，此处冗余保险） */
.timed-loading .tl-tail {
white-space: nowrap;
}
.timed-loading .tl-sep { color: #999; }
.timed-loading .tl-sec {
color: #888;
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
min-width: 3ch;
text-align: center;
}
.timed-loading .tl-sec.timed-out {
color: #e74c3c;
font-weight: 600;
}
.timed-loading .tl-sec.timed-out::after {
content: " · 超时";
color: #e74c3c;
font-size: 12px;
margin-left: 2px;
}
.timed-loading .tl-cancel {
margin-left: 14px;
font-size: 13px;
color: #999;
text-decoration: none;
padding: 2px 6px;
border-radius: 4px;
}
.timed-loading .tl-cancel:hover {
color: #e74c3c;
background: #fff2f0;
}
.spinner {
width: 24px;
height: 24px;
border: 3px solid #ffd5d0;
border-top-color: #e74c3c;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pb-spin {
to {
transform: rotate(360deg);
}
}
/* ============ 空状态 ============ */
.empty-state {
text-align: center;
padding: 60px 20px;
color: #ccc;
}
.empty-icon {
font-size: 48px;
margin-bottom: 10px;
}
.empty-state p {
font-size: 14px;
color: #999;
}
/* ============ 响应式 ============ */
@media (max-width: 768px) {
.header {
padding: 0 12px;
}
.header-left .title {
font-size: 14px;
}
.welcome {
display: none;
}
.tab {
padding: 6px 12px;
font-size: 13px;
}
.header-right .btn-logout {
padding: 4px 10px;
font-size: 12px;
}
.tab-content {
padding: 12px;
}
.form-row {
/* 手机端两列 grid：设备独占第一行，快速选择独占，查询独占，其余自动成对横排 */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
}
/* 设备 form-group（第一个子元素）：跨两列独占一行 */
.form-row > .form-group:first-child {
grid-column: 1 / -1;
}
/* 快速选择日期按钮组：跨两列独占一行（按钮多，横排） */
.form-row > .quick-buttons.form-group-quick,
.form-row > .form-group-quick {
grid-column: 1 / -1;
}
/* 查询/导出按钮组：跨两列独占一行 */
.form-row > .form-group-actions {
grid-column: 1 / -1;
}
.select-input,
.datetime-input,
.small-input,
input[type="number"].small-input {
width: 100%;
}
/* 全屏模式下侧边栏折叠为顶部 */
.device-map-layout {
flex-direction: column;
}
.device-list-panel {
width: 100%;
min-width: 0;
max-height: 35vh;
}
.map-panel {
min-height: 50vh;
}
.toolbar {
flex-direction: column;
align-items: stretch;
}
.search-input {
max-width: 100%;
}
}
/* ============ P0 基础响应式（手机 ≤767）============
- 顶栏改为底栏（tabs+更多），logo+标题隐藏
- 地图在上方，设备列表在下方
- map-overlay-controls 地图顶部
- 全局触摸目标 ≥44px
- 输入框全宽（搜索框除外）
注：历史代码用 max-width:768px 断点，这里统一为 767 以符合"≥768桌面/≤767手机"约定
============================================= */
@media (max-width: 767px) {
/* 手机端：隐藏的 tab（轨迹回放） */
.tab.mobile-hidden {
display: none !important;
}
/* 设备列表 tab 在手机端只显示列表图标/文字，跟其他 tab 一样 */
.device-map-layout {
flex-direction: column;
height: 100%;
}
/* ============ body[data-mobile-view] 控制显隐 ============ */
/* 默认（未设置 data 属性）：显示地图（实时监控） */
#tab-devices .device-list-panel {
display: none !important;
}
#tab-devices .map-panel {
flex: 1;
width: 100%;
}
/* 设备列表 tab 激活时（body[data-mobile-view="list"]）：只显示列表 */
body[data-mobile-view="list"] #tab-devices .device-list-panel {
display: flex !important;
width: 100%;
height: 100%;
max-height: none;
}
body[data-mobile-view="list"] #tab-devices .map-panel {
display: none !important;
}
/* 地图 tab 激活时（body[data-mobile-view="map"]）：只显示地图 */
body[data-mobile-view="map"] #tab-devices .device-list-panel {
display: none !important;
}
body[data-mobile-view="map"] #tab-devices .map-panel {
display: flex !important;
flex: 1;
width: 100%;
}
/* 底栏 fixed 后，body 留出底部空间避免遮挡 */
body.dashboard-body {
padding-bottom: 52px;
}
body.dashboard-body {
padding-bottom: calc(52px + env(safe-area-inset-bottom));
}
/* ========== 手机端左下角控件：保持竖排，缩小 ========== */
.bottom-left-stack > .map-overlay-controls {
bottom: 10px;
left: 10px;
gap: 6px;
}
.bottom-left-stack > .map-overlay-controls .basemap-btn-group {
gap: 1px;
}
.bottom-left-stack > .map-overlay-controls .basemap-toggle-btn {
width: 32px;
height: 32px;
}
.bottom-left-stack > .map-overlay-controls .basemap-btn-label {
font-size: 10px;
}
.bottom-left-stack > .map-overlay-controls .refresh-info.refresh-info {
font-size: 10px !important;
}
/* 手机端隐藏调试按钮 */
#showDebugBtn {
display: none !important;
}
/* collapsed 时 bar 继续显示在顶部 */
/* ========== 顶栏：改为底部导航栏（tabs+更多），logo+标题隐藏 ========== */
.header {
flex-wrap: nowrap;
height: 50px;
min-height: 50px;
padding: 0 !important;
gap: 0;
align-items: stretch;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
border-top: 1px solid #eef0f5;
padding-bottom: calc(0px + env(safe-area-inset-bottom)) !important;
box-sizing: border-box; /* 改为 border-box：padding 不再外扩，fixed left/right 下不溢出 */
}
.header-left {
display: none; /* 手机端隐藏 logo + 标题 */
}
.header-right {
display: none !important; /* 手机端隐藏整个 header-right，避免空 div 占位 + gap 产生右侧空白 */
}
.header-right .welcome {
display: none;
}
/* 手机端：隐藏桌面版按钮，显示「更多」菜单 */
.header-right .desktop-only {
display: none !important;
}
.header-right .more-menu {
display: block !important;
}
.header-right .btn-more {
padding: 2px 6px;
font-size: 12px;
min-height: 30px;
line-height: 1.1;
}
.tabs {
order: 1;
flex: 1 1 auto;
min-width: 0;
width: auto;
overflow: visible; /* 允许下拉菜单弹出（统计报表/更多），不再裁剪 */
display: grid; /* ← 改用 grid 彻底摆脱 flex 干扰 */
grid-template-columns: repeat(5, 1fr); /* 硬分配 5 等宽 */
gap: 0;
padding: 0; /* 去掉 padding，直接撑满整个 header */
box-sizing: border-box;
background: transparent;
border: none;
border-radius: 0;
align-self: stretch;
height: 100%;
}
.tabs::-webkit-scrollbar {
display: none;
}
/* 5 个 tab 平均等宽（grid 下不需要 flex 规则） */
.tabs > .tab,
.tabs > .tab-group {
white-space: nowrap;
flex: none !important; /* 把基础样式的 flex:none 留着也没关系 */
}
/* tab-group 内部的触发按钮要撑满整个格子，激活态蓝色才能铺满 */
.tabs > .tab-group {
align-items: stretch;
}
.tabs > .tab-group > .tab-group-trigger {
flex: 1;
width: auto;
}
.tab {
padding: 0 6px;
font-size: 13px;
min-height: 0;
height: 100%;
box-sizing: border-box;
}
/* 第一个 tab 激活时蓝色背景直接充满整格 */
.tabs > .tab:first-child {
position: relative;
}
/* ========== 触摸目标 ≥44px（顶栏的重要按钮单独设为 36px —— 一行要紧凑）========== */
.tab-sub {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ========== Sidebar-header：一行两用 ========== */
.device-list-panel .sidebar-header {
padding: 10px 10px 0;
gap: 6px;
align-items: flex-start !important; /* 顶对齐 —— 不靠 center 猜 */
flex-wrap: nowrap !important;
justify-content: space-between;
}
/* ========== 手机端：隐藏桌面版 toolbar，显示 sidebar-header 内的 compact toolbar ========== */
.device-list-panel > .toolbar:not(.toolbar-mobile) {
display: none !important;
}
/* 右侧：搜索框 + 折叠按钮 */
.device-list-panel .sidebar-header .toolbar-mobile {
display: flex !important;
padding: 0;
flex: 1 1 auto;
min-width: 0;
justify-content: flex-end;
align-items: flex-start !important; /* 内部也顶对齐 */
padding-top: 0;
gap: 6px;
flex-wrap: nowrap !important;
flex-direction: row !important;
margin-top: 0;
}
/* 左侧：账号信息 —— 和右侧用完全相同的 top 对齐基准 */
.device-list-panel .sidebar-header-left {
gap: 4px;
flex: 0 0 auto;
flex-wrap: nowrap !important;
min-width: 0;
max-width: 62%;
align-items: flex-start !important; /* 内部也顶对齐 */
padding-top: 0;
margin-top: 0;
}
.device-list-panel .sub-account-btn {
margin-right: 0;
padding: 0 6px;
font-size: 11px;
border-radius: 14px;
gap: 1px;
height: 34px; /* 固定高度，不再用 min-height —— 精确控制 */
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-sizing: border-box;
}
.device-list-panel .sub-account-icon {
font-size: 12px;
}
.device-list-panel .sub-account-badge {
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
}
.device-list-panel .current-account-info {
margin-right: 0;
padding: 0 7px;
font-size: 11px;
max-width: 95px;
border-radius: 14px;
height: 34px; /* 固定高度，精确控制 */
display: inline-flex;
align-items: center;
box-sizing: border-box;
}
.device-list-panel .current-account-info .account-name {
max-width: 83px;
font-size: 11px;
line-height: 1.2;
}
.device-list-panel .sidebar-count {
font-size: 16px;
height: 34px; /* 固定高度，精确控制 */
display: inline-flex;
align-items: center;
line-height: 1;
box-sizing: border-box;
}
.device-list-panel .count-label {
display: none; /* 手机端只保留数字 */
}
/* 手机端 toolbar-mobile 里的搜索框 — 删除折叠按钮后占满剩余空间 */
.device-list-panel .sidebar-header .toolbar-mobile .search-wrap {
flex: 1 1 auto;
min-width: 0;
width: auto;
max-width: none;
position: relative;
display: block;
}
.device-list-panel .sidebar-header .toolbar-mobile .search-input {
flex: 1 1 auto;
min-width: 0;
width: 100% !important;
max-width: none;
height: 34px; /* 固定，和左侧统一 */
box-sizing: border-box;/* 包含 border + padding */
padding: 7px 10px 7px 30px;
background: #fff url("data:image/svg+xml;utf8,") no-repeat 10px center / 14px 14px;
background-color: #f6f7fb;
border: 1px solid #e5e7ef;
border-radius: 8px;
font-size: 13px;
line-height: 1;
}
.device-list-panel .sidebar-header .toolbar-mobile .search-input::placeholder {
color: #9aa0a6;
}
.device-list-panel .sidebar-header .toolbar-mobile .search-clear {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 24px;
padding: 0;
border: 1px solid #4B3FE3;
border-radius: 12px;
background: #F2F7FF;
color: #4B3FE3;
font-weight: 500;
font-size: 11px;
line-height: 24px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 1px 3px rgba(75, 63, 227, 0.15);
}
.device-list-panel .sidebar-header .toolbar-mobile .search-clear::after {
content: '清除';
margin-left: 2px;
}
.device-list-panel .sidebar-header .toolbar-mobile .search-wrap.has-value .search-clear {
display: inline-flex;
}
.device-list-panel .sidebar-header .toolbar-mobile .search-wrap.has-value .search-input {
padding-right: 64px !important;
}
/* ========== 其他 ========== */
/* 输入框默认全宽（搜索框除外） */
input[type="text"]:not(.toolbar .search-input),
input[type="date"],
input[type="datetime-local"],
input[type="number"],
input[type="search"],
select {
width: 100%;
}
/* 二级下拉手机端 */
.tab-dropdown {
min-width: 120px;
}
/* 根 font-size 基准（后续逐步 rem 化） */
html {
font-size: 15px;
}
/* ========== 回放 / 工时 日历图高度压缩 ========== */
.pb-calendar {
padding: 4px;
margin-bottom: 4px;
border-radius: 3px;
}
.pb-cal-nav {
padding: 0 2px 4px;
}
.pb-cal-nav button {
height: 24px;
padding: 2px 8px;
font-size: 11px;
border-radius: 3px;
}
.pb-cal-title {
font-size: 12px;
}
.pb-cal-weekdays {
font-size: 10px;
padding: 1px 0;
margin-bottom: 1px;
}
.pb-cal-days {
gap: 1px;
}
/* 关键点：取消正方形比例，固定小高度，把天数+里程压缩到 38px 单元格内 */
.pb-cal-day {
aspect-ratio: auto !important;
height: 38px;
border-radius: 2px;
font-size: 11px;
}
.pb-cal-day.has-crossed-day::before {
top: 1px;
right: 1px;
width: 3px;
height: 3px;
}
.pb-cal-day.has-data::after {
top: 1px;
right: 1px;
width: 3px;
height: 3px;
}
.pb-cal-day.has-data.has-crossed-day::after {
right: 5px;
}
.pb-cal-day .pb-cal-mile {
font-size: 8.5px;
margin-top: 1px;
}
.pb-calendar-summary {
font-size: 11px;
line-height: 1.2;
}
.pb-calendar-summary b {
font-size: 12px;
}
/* ========== stack 贴底 + 阻止触摸冒泡 ========== */
.bottom-right-stack,
.bottom-left-stack {
bottom: calc(env(safe-area-inset-bottom, 0) + 24px);
touch-action: none;
}
.bottom-right-stack > *,
.bottom-left-stack > * {
touch-action: manipulation;
pointer-events: auto;
}
/* ========== 工时报表手机端：左右 -> 上下堆叠 ========== */
/* 关键：取消 tab 的 flex 100% 占满，改为内容自撑高 + 整页滚动 */
#tab-workhours.active {
display: block !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch;
}
#tab-workhours .device-map-layout {
display: block; /* 不使用 flex，改为 block 让上下两块自然堆叠 */
flex: none;
height: auto;
min-height: 100%;
overflow: visible;
}
#tab-workhours .playback-panel {
width: 100% !important;
min-width: 0 !important;
border-right: none;
border-bottom: 1px solid #e8e8e8;
height: auto !important;
max-height: none !important;
overflow: visible;
}
#tab-workhours .wh2-detail-panel {
display: block;
width: 100%;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
flex: none !important;
}
/* 明细区域内部的滚动条也去掉，让父级 tab 统一滚 */
#tab-workhours .wh2-detail-panel .wh2-detail-body {
overflow: visible !important;
flex: none;
height: auto !important;
max-height: none !important;
}
/* 查询按钮区与结果区之间增加留白 */
#tab-workhours .playback-panel .pb-section:last-child {
padding-bottom: 20px;
margin-bottom: 16px;
}
#tab-workhours .wh2-detail-header-bar {
padding: 12px 14px 10px;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
#tab-workhours .wh2-detail-header-top {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
#tab-workhours .wh2-detail-title-bar {
font-size: 15px;
}
/* ====== 每日明细卡片：手机端两行排布 ====== */
#tab-workhours .wh2-daily-card {
padding: 10px 12px;
}
#tab-workhours .wh2-daily-card.expanded {
padding-left: 10px;
border-left-width: 3px;
}
#tab-workhours .wh2-daily-card-header {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"title toggle"
"stats toggle";
column-gap: 10px;
row-gap: 4px;
align-items: center;
padding-bottom: 8px;
}
#tab-workhours .wh2-daily-card-title {
grid-area: title;
gap: 6px;
flex-wrap: nowrap;
align-items: center;
}
#tab-workhours .wh2-daily-card-title .wh2-card-date {
font-size: 15px;
font-weight: 600;
}
#tab-workhours .wh2-daily-card-title .wh2-card-weekday {
font-size: 13px;
color: #888;
}
#tab-workhours .wh2-daily-card-stats {
grid-area: stats;
gap: 8px;
flex-wrap: nowrap;
}
#tab-workhours .wh2-daily-card-stats .wh2-card-stat {
font-size: 12.5px;
color: #555;
}
#tab-workhours .wh2-card-toggle {
grid-area: toggle;
margin-left: 0;
align-self: center;
padding: 6px 10px;
font-size: 12.5px;
}
/* ========== 轨迹回放手机端：两页切屏 ========== */
/* 手机端开启两页模式：device-map-layout 作为全屏定位容器 */
#tab-playback.pb-mobile-paged .device-map-layout {
position: relative;
width: 100%;
height: 100%;
flex-direction: column;
overflow: hidden;
}
/* 默认：第一页（选项）显示，第二页（地图）隐藏 */
#tab-playback.pb-mobile-paged .pb-page-options {
display: flex !important;
flex-direction: column;
position: absolute;
inset: 0;
z-index: 10;
background: #fff;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#tab-playback.pb-mobile-paged .pb-page-map {
display: none;
flex-direction: column;
position: fixed;
inset: 0;
z-index: 1000;
background: #f5f5f5;
overflow: hidden;
}
/* data-pb-page="map" 时翻页 */
#tab-playback.pb-mobile-paged[data-pb-page="map"] .pb-page-options {
display: none !important;
}
#tab-playback.pb-mobile-paged[data-pb-page="map"] .pb-page-map {
display: flex !important;
}
/* 手机端：进入轨迹回放地图二级界面时隐藏底部 tab 栏，避免误触切换（pb-page-map 已 fixed 盖住整个视口，此规则仅作双保险） */
body:has(#tab-playback.pb-mobile-paged[data-pb-page="map"]) .tabs {
display: none !important;
}
/* 手机端：选项页（第一页）的左侧 playback-panel 改成全屏宽 */
#tab-playback.pb-mobile-paged .playback-panel {
width: 100% !important;
min-width: 0 !important;
border-right: none;
border-bottom: 1px solid #e8e8e8;
flex: 0 0 auto;
height: auto !important;
max-height: none !important;
overflow: visible;
}
/* 手机端：轨迹回放/工时报表标题居中 */
#tab-playback.pb-mobile-paged .playback-panel .sidebar-title,
#tab-workhours .playback-panel .sidebar-title,
#tab-workhours2 .playback-panel .sidebar-title {
text-align: center;
}
/* 手机端：地图页（第二页）布局 = 返回按钮 + map-panel 占满剩余 + 控制条 */
#tab-playback.pb-mobile-paged .pb-map-back {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 4px;
height: 40px;
padding: 0 14px;
border: none;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 14px;
font-weight: 500;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
z-index: 750;
}
#tab-playback.pb-mobile-paged .pb-page-map > .map-panel {
width: 100%;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
position: relative;
}
#tab-playback.pb-mobile-paged #playbackMap {
height: 100% !important;
min-height: 320px;
}
/* 手机端：底部播放控制条更紧凑，避免被底栏遮挡 */
#tab-playback.pb-mobile-paged .pb-controls {
left: 8px;
right: 8px;
bottom: calc(8px + env(safe-area-inset-bottom, 0px));
padding: 8px 10px;
border-radius: 8px;
}
/* 手机端：「显示轨迹明细」开关对齐 —— 右侧 8px（与控制条 right 对齐），上方根据手机底栏 + 控制条高度计算 */
#tab-playback.pb-mobile-paged .pb-detail-switch {
right: 8px;
/* 手机端控制条：bottom(8+safe) + 紧凑高度≈144 + 间隙 ≈ 152；再整体下移 10px 以避免与 Leaflet 控件边缘重叠 */
bottom: calc(150px + env(safe-area-inset-bottom, 0px));
padding: 5px 10px;
font-size: 11px;
}
#tab-playback.pb-mobile-paged .pb-ctrl-top,
#tab-playback.pb-mobile-paged .pb-ctrl-mid {
gap: 8px 12px;
font-size: 11px;
margin-bottom: 4px;
flex-direction: row;
flex-wrap: wrap;
}
#tab-playback.pb-mobile-paged .pb-info {
font-size: 11px;
}
/* 手机端：按钮行（上一帧/播放/下一帧）与速度控件分行显示 */
#tab-playback.pb-mobile-paged .pb-controls-row {
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 6px;
}
/* 手机端：上一帧 / 播放 / 下一帧 按钮行真正居中对齐 */
#tab-playback.pb-mobile-paged .pb-ctrl-btns {
width: 100%;
justify-content: center;
align-items: center;
gap: 10px;
}
/* 手机端：速度控件单独一行，宽度撑满居中；
关键：桌面端 .pb-bar-speed-wrap 有 flex:1 1 320px（水平 flex-basis 320px）
在手机列布局下它被误读为「高度 320px」导致底部大片空白 —— 这里显式清零为内容自适应 */
#tab-playback.pb-mobile-paged .pb-bar-speed-wrap {
flex: 0 0 auto; /* 覆盖桌面 flex:1 1 320px，取消 320px 纵向高度硬撑 */
min-width: 0; /* 覆盖桌面 min-width:280px */
max-width: 100%; /* 覆盖桌面 max-width:480px（手机端整行可用宽度） */
width: 100%;
margin: 0 auto;
justify-content: center;
}
#tab-playback.pb-mobile-paged .pb-ctrl-btn {
width: 38px;
height: 38px;
font-size: 14px;
}
#tab-playback.pb-mobile-paged .pb-fit-btn {
top: 104px; /* 手机：pb-map-back 返回按钮 44px + 图例 40px + 间距 ≈ 104px */
left: 8px;
right: auto;
padding: 4px 10px;
font-size: 12px;
z-index: 500;
}
#tab-playback.pb-mobile-paged .pb-detail-panel {
position: absolute;
/* 手机端也与电脑一致：面板底部贴在「显示轨迹明细」开关顶部正上方，
而不是原来那种从屏幕最底边（bottom:0）上滑的 sheet 样式 ——
原 bottom:0 会导致整个明细面板出现在开关下方，与电脑端相反 */
right: 8px;
left: 8px;
bottom: calc(186px + env(safe-area-inset-bottom, 0px)); /* 开关 bottom(150+safe) + 开关高≈30 + 6px间隙 */
top: auto;
width: auto;
max-width: none;
max-height: 40%; /* 展开后约占地图高度的 4 成，保留足够地图可视区 */
border-radius: 8px; /* 取消「只上圆角」，改为整面圆角（不再是底边吸附 sheet） */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); /* 与电脑端一致的正常阴影 */
}
}
/* 电脑端：隐藏设备列表 tab（左边已有列表面板） */
@media (min-width: 768px) {
.tab.desktop-hidden {
display: none !important;
}
}
/* ============ 备用轻量断点（≤900，仅微调）============ */
@media (max-width: 900px) {
.tab {
padding: 8px 14px;
font-size: 13px;
}
.header {
padding: 0 12px;
}
}
/* ============ 轨迹回放：全局基础规则（桌面端生效/所有尺寸默认） ============ */
/* 外层两页容器（pb-page-options / pb-page-map）在桌面端直接"穿透"，保持左右布局原样 */
#tab-playback .pb-page-options,
#tab-playback .pb-page-map {
display: contents;
}
/* 返回按钮：桌面端隐藏，手机端才显示 */
#tab-playback .pb-map-back {
display: none;
}
/* ============ 速度阈值设置 - 双滑块选择器 ============ */
.pb-speed-range-container {
margin-bottom: 10px;
padding: 10px;
background: #f8f9fc;
border-radius: 8px;
}
.pb-speed-range-labels {
display: flex;
justify-content: space-between;
font-size: 10px;
color: #666;
margin-bottom: 2px;
}
.pb-speed-label-item {
font-weight: 500;
}
.pb-speed-label-item:nth-child(2) {
color: #4caf50;
}
.pb-speed-label-item:nth-child(3) {
color: #e53935;
}
.pb-speed-range-track {
position: relative;
height: 22px;
margin: 0 8px;
}
.pb-speed-range-track::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: #e0e0e0;
border-radius: 2px;
transform: translateY(-50%);
}
.pb-speed-range-filled {
position: absolute;
top: 50%;
height: 4px;
background: linear-gradient(90deg, #ff9800, #4caf50);
border-radius: 2px;
transform: translateY(-50%);
pointer-events: none;
}
.pb-speed-range-markers {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pb-speed-marker {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
background: #fff;
border: 2px solid #4caf50;
border-radius: 50%;
transform: translate(-50%, -50%);
cursor: grab;
z-index: 2;
transition: transform 0.1s;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.pb-speed-marker.fast {
border-color: #e53935;
}
.pb-speed-marker:hover {
transform: translate(-50%, -50%) scale(1.15);
}
.pb-speed-marker.dragging {
cursor: grabbing;
transform: translate(-50%, -50%) scale(1.25);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.pb-speed-range-tooltip {
position: absolute;
top: -6px;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 1px 5px;
border-radius: 3px;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
z-index: 3;
}
.pb-speed-range-tooltip::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #333;
}
.pb-speed-marker:hover + .pb-speed-range-tooltip,
.pb-speed-range-tooltip.show {
opacity: 1;
}
.pb-speed-range-tooltip.slow {
left: 0;
transform: translateX(-50%);
}
.pb-speed-range-tooltip.fast {
left: 0;
transform: translateX(-50%);
}
.pb-speed-current-display {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 12px;
padding: 8px 12px;
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.pb-current-label {
font-size: 12px;
color: #666;
}
.pb-current-value {
font-size: 18px;
font-weight: 700;
color: #333;
min-width: 60px;
text-align: center;
}
.pb-current-unit {
font-size: 12px;
color: #666;
}
/* 速度状态颜色 */
.pb-current-value.slow { color: #4caf50; }
.pb-current-value.normal { color: #2196f3; }
.pb-current-value.fast { color: #e53935; }
.pb-current-value.danger { color: #7b1fa2; }
.pb-unit {
font-size: 12px;
color: #888;
}
.pb-speed-meter .pb-speed-tag.normal {
color: #2196f3;
}
.pb-speed-meter .pb-speed-fill.normal {
background: linear-gradient(90deg, #2196f3, #4caf50);
}
.pb-speed-btns-inline {
display: flex;
gap: 4px;
margin-top: 8px;
justify-content: space-between;
}
.pb-speed-btns-inline .pb-speed-btn {
flex: 1;
padding: 4px 6px;
font-size: 11px;
}
.pb-speed-value {
font-size: 13px;
font-weight: 600;
color: #667eea;
min-width: 30px;
text-align: right;
}
/* ============ 明细面板（需求1：横向加宽，一行显示6列不截断） ============ */
.pb-detail-panel {
position: absolute;
right: 12px;
/* 跟随「显示轨迹明细」开关位置：开关 bottom=150px + 开关高度≈34px + 6px间隙 = 面板底部贴在开关顶部正上方 */
bottom: 190px;
top: auto; /* 取消原来的 top:50px（原先是跟随右上角旧开关位置） */
z-index: 500;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
max-height: 220px; /* 纵向高度缩短一半（原440px → 220px） */
width: 560px; /* 需求1：加宽到560px，一行全显示6列 */
max-width: 90vw;
overflow: hidden;
display: flex;
flex-direction: column;
}
.pb-detail-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid #eee;
background: #f8f9fc;
}
.pb-detail-header-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pb-detail-btn {
background: #ffffff;
border: 1px solid #d8dee9;
border-radius: 4px;
padding: 3px 10px;
font-size: 12px;
color: #374151;
cursor: pointer;
line-height: 1.4;
transition: all 0.15s;
}
.pb-detail-btn:hover {
border-color: #667eea;
color: #667eea;
background: #f6f8ff;
}
.pb-detail-btn-primary {
background: #667eea;
border-color: #667eea;
color: #fff;
}
.pb-detail-btn-primary:hover {
background: #5568d3;
border-color: #5568d3;
color: #fff;
}
.pb-detail-title {
font-size: 13px;
font-weight: 600;
color: #333;
}
.pb-detail-toggle {
background: none;
border: none;
font-size: 12px;
color: #667eea;
cursor: pointer;
padding: 0;
white-space: nowrap;
}
.pb-detail-toggle:hover {
color: #5568d3;
}
.pb-detail-content {
overflow: auto;
flex: 1;
}
.pb-detail-table {
width: 100%;
border-collapse: collapse;
font-size: 11.5px; /* 需求1：稍微加大一点，原来11px偏小 */
}
.pb-detail-table th,
.pb-detail-table td {
padding: 6px 10px;
text-align: left;
border-bottom: 1px solid #f0f0f0;
white-space: nowrap;
}
.pb-detail-table th {
background: #f5f7fa;
font-weight: 600;
color: #555;
position: sticky;
top: 0;
}
.pb-detail-table tbody tr:hover {
background: #f8f9fc;
}
.pb-detail-table tbody tr.current-row {
background: #e3f2fd;
}
.pb-detail-switch {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
padding: 6px 12px;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
font-size: 12px;
color: #555;
cursor: pointer;
pointer-events: auto;
}
.pb-detail-switch input {
accent-color: #667eea;
}
/* ============ 地址显示组件（左上角） ============ */
.address-display {
position: absolute;
top: 12px;
left: 12px;
z-index: 600;
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
padding: 6px 12px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
font-size: 13px;
color: #333;
/* 加宽：默认 560px 足以显示"省-市-区县-乡镇-道路-门牌"完整地址；
窄屏自适应为「视口宽度 - 左右各 20px」，避免顶到屏幕右边缘溢出 */
max-width: min(560px, calc(100vw - 40px));
pointer-events: none;
transition: opacity 0.3s ease;
}
.address-display .address-icon {
flex-shrink: 0;
font-size: 14px;
}
.address-display .address-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
}
.address-display.loading .address-text {
color: #999;
font-style: italic;
}
.address-display.error .address-text {
color: #e74c3c;
}
/* ============ 轨迹回放-图例（左上角内联：地址下方） ============ */
.pb-legend-inline {
position: absolute;
top: 56px;
left: 12px;
z-index: 600;
display: flex;
gap: 10px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
padding: 6px 12px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
font-size: 12px;
color: #555;
pointer-events: auto;
align-items: center;
}
/* 放大缩小按钮高度增加 50% + 半透明 */
.leaflet-control-zoom a {
height: 48px !important;
width: 36px !important;
line-height: 48px !important;
font-size: 22px !important;
background: rgba(255, 255, 255, 0.65) !important;
border-color: rgba(0, 0, 0, 0.1) !important;
}
.leaflet-control-zoom {
border-radius: 4px !important;
overflow: hidden;
background: rgba(255, 255, 255, 0.65) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
margin-top: 6px !important;
}
/* bottomleft 容器：左下角避让地图边界 */
#deviceMap .leaflet-bottom.leaflet-left {
padding-bottom: 12px;
padding-left: 12px;
}
#playbackMap .leaflet-bottom.leaflet-left {
padding-bottom: 12px;
padding-left: 12px;
}
/* 地图层级显示 — 在 bottom-right-stack 顶部独立元素 */
.zoom-level-display {
background: transparent;
color: #222;
font-size: 13px;
font-weight: 700;
padding: 0;
border-radius: 0;
box-shadow: none;
pointer-events: none;
user-select: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-width: 0;
text-align: center;
border: none;
margin: 0;
line-height: 1.2;
-webkit-text-stroke: 0.4px #fff;
white-space: nowrap;
align-self: flex-end;
}
/* 清除 Leaflet 可能添加的外层 control 样式 */
.zoom-level-display.leaflet-control,
.leaflet-control:has(> .zoom-level-display) {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* ============ 轨迹回放-车辆图标（使用与实时监控一致的SVG车辆图标+方向旋转+状态着色） ============ */
.pb-car-icon-wrap {
background: none !important;
border: none !important;
padding: 0 !important;
}
/* 根容器：宽310（信息框300居中），高140（增高20px以容纳32px图标，避免信息框溢出）
坐标系底部中心 = 图标中心位置（地图坐标锚点 iconAnchor） */
.pb-car-marker-root {
position: relative;
width: 310px;
height: 140px;
pointer-events: none;
}
/* 信息气泡紧贴图标上方（箭头尖端指向图标顶部）
图标bottom=6，图标height=32 → 图标顶部 y = 140-6-32 = 102
气泡bottom = 48 → 气泡底部 y = 140-48 = 92
箭头 bottom:-10 → 箭头尖端 y = 102，正好指向图标顶部(102)附近 */
.pb-car-info-box {
position: absolute;
bottom: 48px;
left: 50%;
transform: translateX(-50%) translateZ(0);
width: 300px; /* 信息框加宽到300px，追踪距离+运行时间同一行不换行 */
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 10px;
padding: 9px 13px 11px;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(255,255,255,0.9) inset;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
}
/* 弹窗右上角关闭按钮 — 与实时监控的复制按钮同样式（浅蓝底+紫字+圆角） */
.pb-info-close-btn {
position: absolute;
top: 5px;
right: 5px;
padding: 1px 8px;
font-size: 11px;
color: #4B3FE3;
background: #F2F7FF;
border: 1px solid #d0c8f5;
border-radius: 3px;
cursor: pointer;
user-select: none;
transition: background 0.15s;
line-height: 1.4;
z-index: 2;
}
.pb-info-close-btn:hover {
background: #e8e4fb;
}
/* 信息气泡关闭后保持隐藏（在 pb-car-info-box 上应用 hidden 类） */
.pb-car-info-box.hidden {
display: none !important;
}
/* 气泡向下的小箭头：从气泡底部伸出来，指向下面的圆点 */
.pb-car-arrow {
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: #ffffff;
border-right: 1px solid #d0d7de;
border-bottom: 1px solid #d0d7de;
box-shadow: 2px 2px 3px -2px rgba(15, 23, 42, 0.10);
}
/* 信息行 — 需求3：nowrap 不换行，所有信息一行显示 */
.pb-car-info-row {
display: flex;
align-items: center;
flex-wrap: nowrap;
font-size: 12px;
line-height: 1.65;
color: #333;
white-space: nowrap;
}
.pb-car-info-row + .pb-car-info-row { margin-top: 1px; }
.pb-ci-label { color: #8b95a1; margin-right: 4px; flex-shrink: 0; }
.pb-ci-value { color: #1f2937; font-weight: 500; margin-right: 4px; flex-shrink: 0; }
.pb-ci-sep { color: #cbd5e1; margin: 0 2px; flex-shrink: 0; }
/* 车辆SVG图标：在容器的底部中心；地图坐标锚点对应图标中心
使用与实时监控一致的 buildFallbackSvg 生成的 32x32 SVG */
.pb-car-icon {
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%) translateZ(0);
width: 32px;
height: 32px;
z-index: 3;
backface-visibility: hidden;
}
.pb-car-icon svg {
display: block;
width: 32px;
height: 32px;
}
/* 图标正下方 — 显示「设备名称」 */
.pb-car-label {
position: absolute;
left: 50%;
bottom: -16px; /* 在图标下方，不与图标重叠 */
transform: translateX(-50%);
font-size: 11px;
color: #667eea;
font-weight: 600;
padding: 1px 6px;
background: rgba(255,255,255,0.95);
border-radius: 3px;
white-space: nowrap;
z-index: 2;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* 不再使用老的 pb-car-tail 样式 */
/* ============ 工时报表样式 ============ */
/* 主内容区布局：桌面端左右布局，移动端上下布局 */
.workhours-main {
display: flex;
gap: 16px;
margin-top: 16px;
}
/* 日历面板 */
.wh-calendar-panel {
flex: 0 0 320px;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
padding: 16px;
}
/* 日历样式（复用轨迹回放风格，增加工时专用样式） */
.wh-calendar {
width: 100%;
}
.wh-calendar .pb-cal-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4px 10px;
}
.wh-calendar .pb-cal-nav button {
background: none;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 6px 12px;
height: 34px;
cursor: pointer;
font-size: 14px;
color: #666;
transition: all 0.2s;
white-space: nowrap;
}
.wh-calendar .pb-cal-nav button:hover {
background: #667eea;
color: #fff;
border-color: #667eea;
}
.wh-calendar .pb-cal-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.wh-calendar .pb-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
font-size: 12px;
color: #999;
text-align: center;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.wh-calendar .pb-cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.wh-calendar .pb-cal-day {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
background: #f9f9f9;
position: relative;
transition: all 0.15s;
padding: 4px;
}
.wh-calendar .pb-cal-day:hover {
background: #eef0ff;
}
.wh-calendar .pb-cal-day.other-month {
color: #ccc;
background: transparent;
}
.wh-calendar .pb-cal-day.has-data {
background: #e8f5e9;
}
.wh-calendar .pb-cal-day.selected {
background: #667eea;
color: #fff;
font-weight: 600;
}
.wh-calendar .pb-cal-day.selected.has-data::after {
background: #fff;
}
.wh-calendar .wh-cal-hours {
font-size: 10px;
color: #666;
line-height: 1;
margin-top: 2px;
}
.wh-calendar .wh-cal-day-today {
box-shadow: inset 0 0 0 2px #ff9800;
}
/* 明细面板 */
.wh-detail-panel {
flex: 1;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 400px;
}
.wh-detail-header {
padding: 16px 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
.wh-detail-title {
font-size: 16px;
font-weight: 600;
}
.wh-detail-summary {
font-size: 13px;
background: rgba(255, 255, 255, 0.2);
padding: 4px 10px;
border-radius: 4px;
}
.wh-detail-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.wh-detail-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 200px;
color: #999;
}
.wh-detail-empty .empty-icon {
font-size: 48px;
margin-bottom: 12px;
}
/* 工时明细列表 */
.wh-period-list {
list-style: none;
padding: 0;
margin: 0;
}
.wh-period-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
transition: background 0.15s;
}
.wh-period-item:hover {
background: #f8f9fa;
}
.wh-period-item:last-child {
border-bottom: none;
}
.wh-period-time {
font-size: 14px;
color: #333;
font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}
.wh-period-time .time-range {
color: #666;
}
.wh-period-time .time-cursor {
color: #999;
margin: 0 4px;
}
.wh-period-duration {
font-size: 14px;
font-weight: 600;
color: #667eea;
}
.wh-period-tag {
display: inline-block;
font-size: 11px;
padding: 2px 6px;
background: #fff3e0;
color: #ff9800;
border-radius: 4px;
margin-left: 8px;
}
/* 移动端汇总卡片 */
.wh-mobile-summary {
display: none;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
margin-top: 12px;
padding: 16px;
}
.wh-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.wh-summary-row:last-child {
border-bottom: none;
}
.wh-summary-row span:first-child {
color: #666;
font-size: 14px;
}
.wh-summary-value {
font-size: 16px;
font-weight: 600;
color: #667eea;
}
/* 响应式样式 */
@media (max-width: 768px) {
.workhours-main {
flex-direction: column;
}
.wh-calendar-panel {
flex: none;
width: 100%;
}
.wh-calendar .pb-cal-day {
font-size: 12px;
}
.wh-calendar .wh-cal-hours {
font-size: 9px;
}
.wh-calendar .pb-cal-title {
font-size: 14px;
}
.wh-detail-panel {
min-height: 300px;
}
.wh-mobile-summary {
display: block;
}
/* 移动端日历缩小 */
.wh-calendar .pb-cal-days {
gap: 1px;
}
.wh-calendar .pb-cal-day {
padding: 2px;
font-size: 12px;
}
}
/* 报表汇总项样式 */
#whSummaryItems {
display: flex;
gap: 24px;
align-items: center;
}
.wh-stat-item {
display: flex;
align-items: center;
gap: 8px;
}
.wh-stat-label {
color: #666;
font-size: 13px;
}
.wh-stat-value {
color: #667eea;
font-weight: 600;
font-size: 16px;
}
/* 跨日标记样式 */
.wh-period-item.crossed-day {
background: linear-gradient(90deg, #fff9e6 0%, #fff 100%);
}
.wh-period-item.crossed-day .wh-period-time::before {
content: '🌙';
margin-right: 4px;
}
/* 时间条可视化 */
.wh-time-bar {
height: 8px;
background: #f0f0f0;
border-radius: 4px;
overflow: hidden;
margin-top: 8px;
}
.wh-time-bar-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 4px;
transition: width 0.3s;
}
.pb-car-tail { display: none !important; }
/* ============ 轨迹回放日历 - 电脑端也缩减高度（与工时统一） ============ */
#pbCalendar.pb-calendar .pb-cal-day {
aspect-ratio: auto;
min-height: 42px;
padding: 4px 2px;
}
#pbCalendar.pb-calendar .pb-cal-day.selected .pb-cal-mile {
color: rgba(255, 255, 255, 0.9);
}
#pbCalendar.pb-calendar .pb-cal-day.selected.has-data::after {
background: #fff;
}
#pbCalendar.pb-calendar .pb-cal-day.selected.has-crossed-day::before {
background: #fff;
}
/* ============ 工时报表2样式（轨迹回放布局） ============ */
/* 日历样式覆盖 - 工时报表2 */
#wh2Calendar.pb-calendar .pb-cal-day {
aspect-ratio: auto;
min-height: 42px;
padding: 4px 2px;
}
#wh2Calendar.pb-calendar .pb-cal-day > div:first-child {
font-weight: 600;
text-align: center;
}
#wh2Calendar.pb-calendar .wh-cal-hours {
font-size: 10px;
color: #667eea;
line-height: 1.1;
margin-top: 2px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
#wh2Calendar.pb-calendar .pb-cal-day.selected .wh-cal-hours {
color: rgba(255, 255, 255, 0.9);
}
#wh2Calendar.pb-calendar .pb-cal-day.selected.has-data::after {
background: #fff;
}
#wh2Calendar.pb-calendar .pb-cal-day.selected.has-crossed-day::before {
background: #fff;
}
/* 右侧明细面板 */
.wh2-detail-panel {
flex: 1;
background: #f5f5f5;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
/* 明细头部 */
.wh2-detail-header-bar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
padding: 14px 24px 12px;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
flex-shrink: 0;
}
.wh2-detail-header-top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.wh2-device-info {
font-size: 14px;
opacity: 0.9;
}
.wh2-device-info .device-name {
font-weight: 600;
}
.wh2-device-info .device-imei {
opacity: 0.8;
margin-left: 8px;
}
.wh2-detail-title-bar {
font-size: 18px;
font-weight: 600;
}
.wh2-detail-total {
font-size: 14px;
background: rgba(255, 255, 255, 0.2);
padding: 6px 14px;
border-radius: 20px;
}
/* 总工时：蓝色醒目 */
.wh2-total-duration {
color: #4f6ef7;
font-weight: 700;
margin-left: 8px;
display: inline-block;
}
/* 手机端：自动换行，总工时换到下一行 */
@media (max-width: 767px) {
.wh2-detail-title-bar {
display: flex;
flex-wrap: wrap;
line-height: 1.5;
}
.wh2-total-duration {
display: block;
margin-left: 0;
margin-top: 4px;
}
/* 手机端压缩 loading 区域上下留白 */
#tab-workhours .pb-section:last-child {
padding: 4px 12px;
}
#tab-workhours .pb-query-loading {
margin-top: 2px;
font-size: 13px;
gap: 6px;
line-height: 1.3;
}
#tab-workhours .pb-query-loading .spinner {
width: 14px;
height: 14px;
}
#tab-workhours .wh2-button-row {
margin-bottom: 2px;
}
#tab-workhours .wh2-export-btn,
#tab-workhours .pb-start-btn {
padding: 8px 12px;
font-size: 13px;
}
}
.wh2-time-bar-segment {
background: #1890ff;
height: 100%;
position: absolute;
top: 0;
min-width: 2px;
}
.wh2-time-bar-segment.crossed {
background: #fa8c16;
}
/* 迷你时间条 */
.wh2-daily-card-timebar {
padding: 12px 0;
}
.wh2-mini-timebar {
background: #f8f8f8;
border-radius: 4px;
padding: 8px;
}
.wh2-mini-timebar-track {
position: relative;
height: 16px;
background: #f0f0f0;
border-radius: 2px;
overflow: hidden;
}
.wh2-mini-timebar-track .wh2-time-bar-segment {
height: 100%;
}
.wh2-mini-timebar-scale {
display: flex;
justify-content: space-between;
margin-top: 2px;
}
.wh2-time-bar-scale-item {
display: flex;
flex-direction: column;
align-items: center;
width: 0;
}
.wh2-time-bar-scale-item .tick {
width: 1px;
height: 4px;
background: #999;
}
.wh2-time-bar-scale-item .label {
font-size: 10px;
color: #666;
margin-top: 1px;
white-space: nowrap;
}
.wh2-mini-timebar-scale .wh2-time-bar-scale-item .tick {
height: 3px;
}
.wh2-mini-timebar-scale .wh2-time-bar-scale-item .label {
font-size: 10px;
color: #666;
}
/* 右侧汇总条 */
.wh2-detail-summary-bar {
display: flex;
gap: 32px;
padding: 10px 24px;
background: #fff;
border-bottom: 1px solid #eee;
flex-shrink: 0;
}
.wh2-summary-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.wh2-summary-label {
color: #666;
}
.wh2-summary-value {
font-weight: 600;
color: #667eea;
}
/* 空状态 */
.wh2-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 300px;
color: #999;
background: #fff;
border-radius: 10px;
padding: 40px;
}
.wh2-empty-state .empty-icon {
font-size: 64px;
margin-bottom: 16px;
}
.wh2-empty-state p {
margin: 8px 0;
font-size: 15px;
}
.wh2-hint {
color: #bbb !important;
font-size: 13px !important;
}
/* 查询/导出按钮行 */
.wh2-button-row {
display: flex;
gap: 8px;
}
.wh2-export-btn {
flex: 1;
background: var(--btn-success-bg);
color: var(--btn-success-color);
border: none;
padding: 10px 16px;
border-radius: var(--btn-radius);
font-size: var(--btn-font-size);
cursor: pointer;
font-weight: var(--btn-font-weight);
transition: all 0.2s;
}
.wh2-export-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(17, 153, 142, 0.3);
}
/* 选中日期汇总 */
.wh2-detail-summary {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 8px;
padding: 12px 14px;
}
.wh2-summary-title {
font-size: 13px;
font-weight: 600;
color: #555;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.wh2-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 13px;
}
.wh2-summary-row span:first-child {
color: #666;
}
.wh2-summary-value {
font-weight: 600;
color: #667eea;
}
/* 工时明细列表 - 简洁样式 */
.wh2-period-card {
background: #fff;
border-radius: 6px;
margin-bottom: 4px;
overflow: hidden;
border: 1px solid #e8e8e8;
}
.wh2-period-card.crossed-day {
border-left: 3px solid #ff9800;
}
.wh2-period-row {
display: flex;
align-items: center;
padding: 10px 14px;
gap: 12px;
}
.wh2-period-time-col {
font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
font-size: 14px;
color: #333;
white-space: nowrap;
min-width: 180px;
}
.wh2-period-duration-col {
font-size: 14px;
font-weight: 600;
color: #1890ff;
white-space: nowrap;
}
.wh2-period-tag {
font-size: 11px;
padding: 1px 6px;
border-radius: 3px;
background: #fff3e0;
color: #ff9800;
white-space: nowrap;
flex-shrink: 0;
}
.wh2-period-location-col {
font-size: 12px;
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
margin-left: auto;
}
/* .location-icon 已删除（2026-08-31：工时明细不再显示📍图标，仅留纯文本经纬度） */
/* ============ 工时报表2 - 多天视图样式 ============ */
.wh2-multi-day-view {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: auto;
gap: 12px;
}
.wh2-multi-day-summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
background: #f5f5f5;
border-radius: 6px;
flex-shrink: 0;
}
.wh2-multi-day-title {
font-size: 14px;
font-weight: 600;
color: #333;
}
.wh2-collapse-btn {
padding: 4px 10px;
font-size: 12px;
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
cursor: pointer;
color: #666;
}
.wh2-collapse-btn:hover {
background: #f0f0f0;
color: #333;
}
.wh2-daily-cards {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
.wh2-daily-card {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 12px 16px;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.wh2-daily-card.expanded {
background: linear-gradient(180deg, #f3f2ff 0%, #f9f8ff 100%);
border-color: #c4bff5;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
/* 左紫边，与工时头部渐变呼应 */
border-left: 3px solid #667eea;
padding-left: 14px;
}
.wh2-daily-card-header {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
.wh2-daily-card-title {
display: flex;
align-items: baseline;
gap: 8px;
}
.wh2-clickable {
cursor: pointer;
transition: color 0.2s;
}
.wh2-clickable:hover {
color: #667eea;
}
.wh2-clickable:hover .wh2-card-date {
color: #667eea;
}
.wh2-card-date {
font-size: 14px;
font-weight: 600;
color: #333;
}
.wh2-card-weekday {
font-size: 12px;
color: #999;
}
.wh2-daily-card-stats {
display: flex;
gap: 16px;
}
.wh2-card-stat {
font-size: 13px;
color: #666;
}
.wh2-card-toggle {
margin-left: auto;
padding: 4px 12px;
font-size: 12px;
background: #f0f0f0;
color: #666;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
.wh2-card-toggle:hover {
background: #e6e6e6;
color: #333;
}
.wh2-daily-card-timebar {
padding: 12px 0;
}
/* 响应式样式 - 工时报表2 */
@media (max-width: 768px) {
#tab-workhours2.active {
display: block !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch;
}
#tab-workhours2 .device-map-layout {
display: block;
flex: none;
height: auto;
min-height: 100%;
overflow: visible;
}
#tab-workhours2 .playback-panel {
width: 100% !important;
min-width: 0 !important;
max-height: none !important;
height: auto !important;
overflow: visible;
}
#tab-workhours2 .wh2-detail-panel {
display: block;
width: 100%;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
flex: none !important;
}
#tab-workhours2 .wh2-detail-panel .wh2-detail-body {
overflow: visible !important;
flex: none;
height: auto !important;
max-height: none !important;
}
.wh2-detail-header-bar {
padding: 12px 16px;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.wh2-period-card {
margin-bottom: 4px;
}
.wh2-period-row {
padding: 8px 10px;
flex-wrap: wrap;
gap: 6px;
font-size: 13px;
}
.wh2-period-location-col {
max-width: 100%;
width: 100%;
}
/* ====== 工时报表2：每日明细卡片 手机端两行排布 ====== */
#tab-workhours2 .wh2-daily-card {
padding: 10px 12px;
}
#tab-workhours2 .wh2-daily-card.expanded {
padding-left: 10px;
border-left-width: 3px;
}
#tab-workhours2 .wh2-daily-card-header {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"title toggle"
"stats toggle";
column-gap: 10px;
row-gap: 4px;
align-items: center;
padding-bottom: 8px;
}
#tab-workhours2 .wh2-daily-card-title {
grid-area: title;
gap: 6px;
flex-wrap: nowrap;
align-items: center;
}
#tab-workhours2 .wh2-daily-card-title .wh2-card-date {
font-size: 15px;
font-weight: 600;
}
#tab-workhours2 .wh2-daily-card-title .wh2-card-weekday {
font-size: 13px;
color: #888;
}
#tab-workhours2 .wh2-daily-card-stats {
grid-area: stats;
gap: 8px;
flex-wrap: nowrap;
}
#tab-workhours2 .wh2-daily-card-stats .wh2-card-stat {
font-size: 12.5px;
color: #555;
}
#tab-workhours2 .wh2-daily-card-stats .tb-stat-shift {
font-size: 14px;
font-weight: 700;
color: #7c3aed;
}
#tab-workhours2 .wh2-card-toggle {
grid-area: toggle;
margin-left: 0;
align-self: center;
padding: 6px 10px;
font-size: 12.5px;
}
}
/* ============================================================
菜单列 & 菜单按钮 — 与展开行的 .device-action-btn 解耦
关键：菜单按钮必须 flex:none + inline-flex，
这样 text-align / padding 才能在 td 内控制位置
============================================================ */
/* th-menu：独立样式，跟"设备名称/运动状态"表头一致，不要再跟 td.device-menu-cell 共用！
之前共用导致 background 被覆盖成 transparent、padding 被清零、text-align 不明确。 */
.device-list-panel .data-table th.th-menu {
width: 60px;
min-width: 60px;
max-width: 60px;
padding: 12px 10px;
border-left: 1px solid #eee;
background: #fafafa; /* 跟其他 th 同一背景色，粘住后不会透 */
text-align: center; /* 表头文字居中 */
font-weight: 600;
font-size: 12px;
color: #555;
white-space: nowrap;
vertical-align: middle;
}
/* td.device-menu-cell：菜单按钮的表格单元格 */
.device-list-panel .data-table td.device-menu-cell {
width: 60px;
min-width: 60px;
max-width: 60px;
padding: var(--deb-padding) !important;
border-left: 1px solid #eee;
white-space: nowrap;
vertical-align: middle;
position: relative;
}
/* 菜单按钮 —— 撑满 td 保持圆角，跟展开按钮统一 */
.device-list-panel .data-table .device-menu-btn.device-action-btn {
position: absolute;
top: var(--deb-padding);
left: var(--deb-padding);
right: var(--deb-padding);
bottom: var(--deb-padding);
width: auto;
height: auto;
display: flex !important;
align-items: center;
justify-content: center;
font-size: var(--deb-font-size);
line-height: 1.2;
padding: 0;
border: var(--deb-border-width) solid #667eea;
border-radius: var(--deb-radius);
background: transparent;
color: #667eea;
}
/* ======= 电脑端：菜单按钮紧贴右边缘 ======= */
@media (min-width: 768px) {
.device-list-panel .data-table td.device-menu-cell {
text-align: right;
padding-right: 0;
}
}
/* ======= 手机端：只改变量值，不重写规则 ======= */
@media (max-width: 767px) {
:root {
--deb-row-height: 44px;
--deb-label-font-size: 11px;
}
.device-list-panel .data-table td.device-menu-cell {
text-align: left;
padding-left: 0;
}
/* 手机端：设备行高度单独增加（电脑保持 12px 不动） */
.device-list-panel .data-table td {
padding: 15px 10px;
}
/* 手机端：展开菜单 deb-label padding 同步增加 */
.device-list-panel .deb-cell.deb-label {
padding-top: 15px;
padding-bottom: 15px;
}
.device-list-panel .deb-cell.deb-label {
padding: 0 4px 0 12px;
}
}
/* ========== 更多页面（tab-more）大按钮样式 ========== */
.more-action-btn {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 18px 20px;
background: #fff;
border: 1px solid #e8e8ef;
border-radius: 12px;
cursor: pointer;
text-align: left;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
transition: border-color .15s, box-shadow .15s, transform .1s;
-webkit-tap-highlight-color: transparent;
}
.more-action-btn:hover {
border-color: #667eea;
box-shadow: 0 4px 14px rgba(102,126,234,.12);
}
.more-action-btn:active {
transform: scale(.985);
}
.more-action-btn .more-action-icon {
font-size: 28px;
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #f4f5ff;
border-radius: 10px;
}
.more-action-btn .more-action-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.more-action-btn .more-action-title {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
}
.more-action-btn .more-action-desc {
font-size: 13px;
color: #888;
}
/* ================================================================ */
/* ============ 台班换算模块（子视图切换 + 面板 + 弹窗） ============ */
/* ================================================================ */
/* ---------- 工时报表页整体布局：上方切换Tab + 下方device-map-layout撑满 ----------
注意：必须加 .active 才能让这个 flex 布局只在工时报表激活时生效，
否则 #tab-workhours 的 id 选择器(1,0,0)优先级会高于 .tab-content-fullscreen { display:none }(0,1,0)，
导致非 active 状态下整个 section 不隐藏，污染其他 Tab 页面。 */
.tab-content-fullscreen#tab-workhours.active {
display: flex !important;
flex-direction: column !important;
height: 100%;
}
/* ---------- PC 端子视图切换条：块式 Tab，竖线分隔，整格可点击 ---------- */
.wh2-subview-tabs {
display: flex;
align-items: stretch;
background: #fff;
border-bottom: 1px solid #e8e8ef;
flex-shrink: 0;
padding: 0 20px;
}
.wh2-subview-tab {
position: relative;
background: none;
border: none;
padding: 12px 22px;
font-size: 14px;
font-weight: 500;
color: #666;
cursor: pointer;
transition: color .15s, background .15s;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.wh2-subview-tab + .wh2-subview-tab::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 18px;
background: #e0e0e8;
}
.wh2-subview-tab:hover {
color: #7c3aed;
background: #faf7ff;
}
.wh2-subview-tab-active {
color: #7c3aed !important;
font-weight: 600;
background: #faf7ff !important;
border-bottom: 2px solid #8e44ad;
padding-bottom: 10px; /* 抵消 2px border-bottom，保持行高对齐 */
}
/* ---------- 手机端子视图切换：侧栏标题右侧 ---------- */
.wh2-shared-side .sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: nowrap;
}
.wh2-subview-switcher-mobile {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.35);
border-radius: 7px;
overflow: hidden;
flex-shrink: 0;
}
.wh2-sv-btn {
background: transparent;
border: none;
padding: 5px 10px;
font-size: 12px;
color: rgba(255,255,255,.92);
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.wh2-sv-btn + .wh2-sv-btn {
border-left: 1px solid rgba(255,255,255,.3);
}
.wh2-sv-active {
background: #fff !important;
color: #7c3aed !important;
font-weight: 600;
}
/* ---------- 台班按钮行 + 设置按钮 ---------- */
.taiban-button-row {
display: grid;
/* 统一两行：第一行查询+导出，第二行对比工时+设置。PC/手机都走同一思路，宽度各自定 */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"query export"
"compare settings";
gap: 6px;
align-items: stretch;
}
.taiban-button-row #tbQueryBtn { grid-area: query; }
.taiban-button-row #tbExportBtn { grid-area: export; }
.taiban-button-row .tb-compare-hours { grid-area: compare; }
.taiban-button-row #tbRuleBtn { grid-area: settings; }
/* 对比工时勾选框 */
.tb-compare-hours {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 14px;
min-height: 44px;
font-size: 13px;
font-weight: 500;
color: #374151;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
transition: background .15s, border-color .15s, color .15s;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.tb-compare-hours:hover {
background: #f5f3ff;
border-color: #c4b5fd;
color: #6d28d9;
}
.tb-compare-hours input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #7c3aed;
margin: 0;
cursor: pointer;
}
.tb-compare-hours input[type="checkbox"]:checked + * { /* 后面文字保持不变，由label带色 */ }
.tb-compare-hours:has(input:checked) {
background: #ede9fe;
border-color: #a78bfa;
color: #6d28d9;
font-weight: 600;
}
.tb-settings-btn {
background: #f3f4f6;
color: #555;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 0 10px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
min-height: 44px;
transition: background .15s, border-color .15s, color .15s;
-webkit-tap-highlight-color: transparent;
}
.tb-settings-btn:hover {
background: #eef2ff;
border-color: #a5b4fc;
color: #4338ca;
}
/* ---------- 台班右侧面板：继承工时布局 ---------- */
.tb-detail-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
height: 100%;
}
/* ---------- 台班汇总卡（主+辅） ---------- */
.tb-summary-card {
margin: 12px 20px 6px;
padding: 14px 20px;
background: linear-gradient(135deg, #faf7ff 0%, #eef2ff 100%);
border: 1px solid #e9d5ff;
border-radius: 10px;
}
.tb-summary-main {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.tb-summary-label {
font-size: 15px;
font-weight: 500;
color: #4c1d95;
}
.tb-summary-shifts {
font-size: 30px;
font-weight: 700;
color: #7c3aed;
line-height: 1.1;
letter-spacing: .3px;
}
.tb-summary-unit {
font-size: 14px;
color: #6d28d9;
font-weight: 500;
}
.tb-summary-sub {
margin-top: 8px;
font-size: 13px;
color: #6b7280;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tb-summary-sub b {
color: #1f2937;
font-weight: 600;
}
.tb-summary-sep {
color: #d1d5db;
}
/* ---------- 台班明细卡片容器（与工时一致，防止样式不加载） ---------- */
.tb-multi-day-view {
flex: 1;
overflow: auto;
padding: 0 0 14px;
}
.tb-daily-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
/* 台班卡片内的折算过程条 */
.tb-breakdown-box {
margin-top: 10px;
padding: 10px 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 12px;
line-height: 1.7;
color: #4b5563;
}
.tb-breakdown-box .tb-rule-tag {
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
background: #ede9fe;
color: #5b21b6;
font-size: 11px;
margin-right: 4px;
}
.tb-shift-big {
font-size: 17px;
font-weight: 700;
color: #7c3aed;
}
/* ---------- 免责提示 ---------- */
.tb-disclaimer {
margin: 6px 20px 14px;
padding: 6px 4px;
font-size: 12px;
line-height: 1.6;
color: #9ca3af;
text-align: left;
flex-shrink: 0;
}
/* ---------- 副日历：台班换算专用（独立小日历，无翻月按钮，纯展示） ---------- */
.tb-sub-cal-section {
border-top: 1px dashed #e0e0ea;
padding-top: 14px;
margin-top: 6px;
}
.tb-sub-cal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.tb-sub-cal-title {
font-size: 13px;
font-weight: 700;
color: #7c3aed;
}
.tb-sub-cal-tag {
font-size: 10px;
color: #9ca3af;
background: #f3f4f6;
padding: 2px 6px;
border-radius: 4px;
}
/* 副日历容器 —— 与主日历结构兼容（pb-cal-nav / pb-cal-weekdays / pb-cal-days / pb-cal-day） */
.tb-sub-calendar {
background: #fff;
border: 1px solid #e8e8ef;
border-radius: 8px;
padding: 10px 8px;
font-size: 12px;
}
.tb-sub-calendar .pb-cal-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 6px;
}
.tb-sub-calendar .pb-cal-nav .pb-cal-prev,
.tb-sub-calendar .pb-cal-nav .pb-cal-next {
display: none !important; /* 副日历不可翻月 */
}
.tb-sub-calendar .pb-cal-nav .pb-cal-title {
font-size: 12px;
font-weight: 600;
color: #6b21a8;
}
.tb-sub-calendar .pb-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-size: 10px;
color: #9ca3af;
font-weight: 500;
margin-bottom: 4px;
}
.tb-sub-calendar .pb-cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.tb-sub-calendar .pb-cal-day {
aspect-ratio: 1 / 1;
min-height: 26px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 11px;
border-radius: 4px;
padding: 2px 0;
line-height: 1.15;
cursor: default;
}
.tb-sub-calendar .pb-cal-day.other-month {
opacity: 0.25;
cursor: default;
}
.tb-sub-calendar .pb-cal-day.has-data {
background: #f9fafb;
}
.tb-sub-calendar .pb-cal-day.wh-cal-day-today {
outline: 1.5px solid #7c3aed;
outline-offset: -1px;
}
/* 工时对比日历：数字颜色与主日历的「工时小时数」保持一致（非紫色） */
.tb-sub-calendar .pb-cal-day .tb-shift-num { /* 老残留：没用了 */
color: #7c3aed;
font-weight: 700;
}
/* 工时对比日历：工时小时数样式（复用 wh-cal-hours 色：紫蓝色 + 下划线） */
.tb-sub-calendar .pb-cal-day .wh-cal-hours {
font-size: 10px;
color: #5b6bd1;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: rgba(91, 107, 209, 0.5);
text-underline-offset: 1px;
line-height: 1;
margin-top: 1px;
}
.tb-sub-calendar .pb-cal-day .pb-cal-day-num { font-size: 10px; color: #6b7280; line-height: 1; }
/* 副日历跨天橙点：复用全局 .pb-cal-day.has-crossed-day::before 样式，
但需要 .pb-cal-day 有 position:relative 让 ::before 绝对定位生效 */
.tb-sub-calendar .pb-cal-day { position: relative; }
.tb-cal-total { color: #7c3aed; }
.tb-cal-total b { color: #7c3aed; font-weight: 700; }
/* 主日历底部算法标签（短名，低调灰色） */
.tb-cal-rule-tag {
font-size: 11px;
color: #9ca3af;
font-weight: 400;
margin-left: 3px;
}
/* 右侧汇总卡算法标签（完整描述，低调灰色小字，单行显示，不换行） */
.tb-summary-rule-tag {
display: inline-block;
font-size: 12px;
color: #6b7280;
font-weight: 400;
margin-left: 10px;
line-height: 1.4;
vertical-align: middle;
max-width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 汇总卡底部辅助信息（工时 + 开工天数）——允许换行，一行放不下时折第二行 */
.tb-summary-sub {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: center;
}
/* ================ 主日历「就地替换台班数字」样式 ================
* 台班视图下，主日历保留 wh2RenderCalendar 生成的完整结构，
* 只把 .wh-cal-hours 隐藏，追加 .wh-main-shift-num 显示台班数。 */
/* 显示台班时隐藏工时小时数 */
.pb-calendar.wh-calendar-taiban-mode .pb-cal-day .wh-cal-hours {
display: none !important;
}
/* 对比日历（#tbCompareBody）里的 wh-cal-hours 不受主日历台班模式影响 —— 始终显示 */
.pb-calendar.wh-calendar-taiban-mode #tbCompareBody .pb-cal-day .wh-cal-hours {
display: block !important;
}
/* 台班数字：统一紫色 */
.pb-calendar .wh-main-shift-num {
font-size: 11px;
color: #7c3aed;
font-weight: 700;
line-height: 1;
margin-top: 1px;
text-decoration: none;
}
/* 主日历跨天橙点本来就生效（因为 .pb-cal-day 全局有 ::before 定义），无需额外 class */
/* 手机端缩小副日历 + 主日历台班数字 */
@media (max-width: 640px) {
.tb-sub-calendar .pb-cal-day {
min-height: 22px;
font-size: 10px;
}
.tb-sub-calendar .pb-cal-day .wh-cal-hours {
font-size: 9px;
}
.pb-calendar .wh-main-shift-num { font-size: 10px; }
}
/* ========================================================================== */
/* ============ 台班规则设置弹窗 taiban-rule-modal 样式 ==================== */
/* ========================================================================== */
.taiban-rule-modal {
position: fixed;
inset: 0;
z-index: 100001;
display: flex;
align-items: center;
justify-content: center;
}
.taiban-rule-modal-mask {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.5);
}
.taiban-rule-modal-dialog {
position: relative;
width: 100%;
max-width: 500px;
max-height: 90vh;
margin: 0 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 18px 48px rgba(15, 23, 42, .28);
display: flex;
flex-direction: column;
overflow: hidden;
}
.taiban-rule-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid #eef0f4;
background: linear-gradient(135deg, #faf7ff 0%, #eef2ff 100%);
}
.taiban-rule-modal-title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #4c1d95;
}
.taiban-rule-modal-close {
width: 44px;
height: 26px;
border: 1px solid #d4cfdf;
background: #fff;
color: #666;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background .15s, color .15s, border-color .15s;
}
.taiban-rule-modal-close:hover {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
}
.taiban-rule-modal-body {
flex: 1;
overflow: auto;
padding: 16px 22px 10px;
}
.trm-section + .trm-section {
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed #eef0f4;
}
.trm-section-title {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin-bottom: 10px;
}
.trm-radio {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 2px;
cursor: pointer;
user-select: none;
line-height: 1.5;
}
.trm-radio input[type="radio"] {
margin-top: 3px;
width: 16px;
height: 16px;
cursor: pointer;
accent-color: #8e44ad;
flex-shrink: 0;
}
.trm-radio span {
font-size: 13px;
color: #374151;
}
.trm-hint {
display: inline;
font-size: 12px !important;
color: #9ca3af !important;
margin-left: 4px;
}
/* 分段阶梯参数：纯小时模式下灰显 */
.trm-tiered-params.trm-disabled {
opacity: .45;
pointer-events: none;
}
/* 按档位折算：仅禁用加班系数单个字段 */
.trm-field.trm-field-disabled {
opacity: .45;
}
.trm-field.trm-field-disabled .trm-number-input {
background: #f3f4f6;
cursor: not-allowed;
}
.trm-field {
margin-bottom: 12px;
}
.trm-field-label {
display: block;
font-size: 13px;
font-weight: 500;
color: #374151;
margin-bottom: 5px;
}
.trm-field-input-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.trm-number-input {
width: 120px;
height: 34px;
padding: 0 10px;
border: 1px solid #d4d6dd;
border-radius: 6px;
font-size: 14px;
color: #1f2937;
box-sizing: border-box;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.trm-number-input:focus {
border-color: #8e44ad;
box-shadow: 0 0 0 3px rgba(142,68,173,.12);
}
.trm-field-unit {
font-size: 13px;
color: #6b7280;
}
.trm-field-hint {
margin-top: 4px;
font-size: 12px;
color: #9ca3af;
line-height: 1.5;
}
.trm-preview-box {
background: #fafafa;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px 14px;
}
.trm-preview-text {
font-size: 12px;
line-height: 1.7;
color: #4b5563;
}
.trm-preview-result {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed #e5e7eb;
font-size: 14px;
color: #1f2937;
font-weight: 500;
}
.trm-preview-number {
font-size: 20px;
font-weight: 700;
color: #7c3aed;
margin: 0 2px;
}
.trm-error {
margin-top: 12px;
padding: 8px 12px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 6px;
color: #b91c1c;
font-size: 12px;
line-height: 1.6;
}
.taiban-rule-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 12px 20px;
border-top: 1px solid #eef0f4;
background: #fafafa;
flex-shrink: 0;
}
.trm-btn {
height: 36px;
padding: 0 16px;
border-radius: 7px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: background .15s, border-color .15s, color .15s;
-webkit-tap-highlight-color: transparent;
}
.trm-btn-default {
background: #fff;
border-color: #d4d6dd;
color: #374151;
}
.trm-btn-default:hover {
background: #f3f4f6;
border-color: #bcbfc9;
}
.trm-btn-primary {
background: linear-gradient(135deg, #8e44ad 0%, #6366f1 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(102,126,234,.25);
}
.trm-btn-primary:hover {
filter: brightness(1.05);
}
/* ==================================================================== */
/* ============ 手机端 台班响应式：@media (max-width: 640px) ============ */
/* ==================================================================== */
@media (max-width: 640px) {
/* 子视图切换Tab的PC版隐藏（已desktop-only class控制，此处只确保布局不冲突） */
/* 台班按钮行：查询台班整行占满，导出台班+设置下一行，保证>=44px可点 */
.taiban-button-row {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 8px;
}
.taiban-button-row {
grid-template-columns: 1fr 1fr; /* 手机端也两行两列，PC完全对齐 */
grid-template-areas:
"query export"
"compare settings";
}
.taiban-button-row #tbQueryBtn { grid-area: query; }
.taiban-button-row #tbExportBtn { grid-area: export; }
.taiban-button-row .tb-compare-hours { grid-area: compare; }
.taiban-button-row #tbRuleBtn { grid-area: settings; }
/* 手机端勾选框缩小点内边距（空间有限） */
.tb-compare-hours { padding: 0 6px; font-size: 12px; gap: 4px; }
.tb-compare-hours input[type="checkbox"] { width: 14px; height: 14px; }
/* 台班汇总卡外边距缩紧 */
.tb-summary-card { margin: 10px 12px 4px; padding: 12px 14px; }
.tb-summary-shifts { font-size: 26px; }
/* 台班明细表：去掉左右内边距，明细卡边框对齐上面的汇总条 */
.tb-multi-day-view { padding: 0 0 10px; flex: 0 1 auto; }
/* 手机端台班右侧面板：高度自适应内容，不撑满父容器 */
.tb-detail-panel {
height: auto !important;
flex: none !important;
overflow: visible !important;
}
/* 免责提示 */
.tb-disclaimer { margin: 4px 12px 10px; }
/* 日历格内台班数字适配38px行高：小一号，不溢出 */
.pb-calendar .tb-shift-num {
font-size: 11px !important;
}
/* 设置弹窗手机：满宽92vw 上下留边 */
.taiban-rule-modal-dialog {
max-width: 92vw;
margin: 0 4vw;
}
.taiban-rule-modal-body { padding: 12px 16px 8px; }
.trm-number-input { width: 108px; }
/* === 手机端修复1：汇总卡算法标签 — 允许在自然断点换行，不折在汉字中间 === */
.tb-summary-card .tb-summary-main {
flex-wrap: wrap;
align-items: baseline;
row-gap: 4px;
}
.tb-summary-rule-tag {
white-space: normal !important;
word-break: keep-all;
max-width: 100%;
font-size: 11px;
line-height: 1.5;
margin-left: 0;
margin-top: 2px;
}
.tb-summary-sub {
margin-top: 6px;
}
/* === 手机端修复2：日期标题拆两行（按钮和日期同左，不占第三行） — 总计仅两行：
第1行：[2026-08-01 ~ 2026-08-31：] [全部展开/折叠] （flex 同一行，左对齐）
第2行：[ 共 19 天有作业，合计 16.84 个台班 ] （独占一行）
*/
.wh2-multi-day-summary {
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
row-gap: 4px;
justify-content: flex-start; /* 整体左对齐，不再靠两边分布 */
}
.wh2-multi-day-title {
display: block;
flex: 1 1 auto; /* 跟按钮分享同一行的剩余空间 */
min-width: 0;
line-height: 1.5;
}
.wh2-collapse-btn {
flex: 0 0 auto;
margin-left: 0;
}
.tb-mdt-range {
display: inline-block; /* 与按钮同一行并排 */
vertical-align: middle;
font-weight: 600;
color: #4b5563;
margin-right: 6px;
white-space: nowrap;
}
.tb-mdt-stat {
display: block;
width: 100%;
font-size: 13px;
color: #6b7280;
margin-top: 2px;
padding-left: 2px;
}}
/* ================ 主日历内对比工时表体（共用 nav + weekdays） ================ */
#tbCompareBody {
margin-top: 14px;
padding-top: 0;
border-top: 1px dashed #e5e7eb;
}
/* layer label header — 两个表体之间的分隔标题 */
.tb-cal-layer-label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: 600;
color: #4f46e5;
padding: 6px 4px 6px 4px;
letter-spacing: 0.3px;
}
.tb-cal-layer-tag {
font-size: 11px;
font-weight: 400;
color: #9ca3af;
background: #f3f4f6;
padding: 1px 8px;
border-radius: 10px;
}
/* 对比表体的日期格子：与主表体同结构同样式 */
#tbCompareBody .pb-cal-days {
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: #f0f0f0;
border: 1px solid #e5e7eb;
border-radius: 6px;
overflow: hidden;
}
#tbCompareBody .pb-cal-day {
/* 复用现有 .pb-cal-day 样式，只微调背景让两个 layer 可区分 */
min-height: 42px;
padding: 4px 2px;
background: #fff;
text-align: center;
cursor: pointer;
font-size: 12px;
transition: background 0.15s, box-shadow 0.15s;
}
#tbCompareBody .pb-cal-day:hover {
background: #f8faff;
}
#tbCompareBody .pb-cal-day.selected {
/* 选中态与主表体一致：蓝色边框 */
box-shadow: inset 0 0 0 2px #4f46e5;
background: #eef2ff;
}
#tbCompareBody .pb-cal-day.other-month {
background: #fafafa;
color: #ccc;
cursor: default;
}
#tbCompareBody .pb-cal-day .wh-cal-hours {
font-size: 11px;
color: #4f46e5;
font-weight: 500;
line-height: 1.2;
}
/* 对比汇总标签在汇总条里 */
.tb-compare-hours-summary {
margin-left: 10px;
color: #4f46e5;
font-weight: 500;
}
/* ============ 批量工时统计 样式 ============ */
/* 设备选择区域 */
.batch-devices-bar {
margin-top: 12px;
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.batch-devices-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.batch-devices-title {
font-weight: 600;
color: #333;
font-size: 14px;
}
.batch-devices-count {
color: #667eea;
font-size: 13px;
font-weight: 500;
margin-left: auto;
}
.batch-devices-search {
margin-bottom: 10px;
}
.batch-devices-search .ds-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.batch-devices-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-height: 200px;
overflow-y: auto;
padding: 4px;
background: #fff;
border-radius: 6px;
border: 1px solid #eee;
}
.batch-dev-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #f0f4ff;
border: 1px solid #c5d0ff;
border-radius: 16px;
cursor: pointer;
font-size: 12.5px;
transition: all 0.15s;
user-select: none;
}
.batch-dev-item:hover {
background: #e0e8ff;
border-color: #667eea;
}
.batch-dev-item input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 0;
cursor: pointer;
accent-color: #667eea;
}
.batch-dev-item input[type="checkbox"]:not(:checked) + .batch-dev-name {
color: #999;
text-decoration: line-through;
}
.batch-dev-item:has(input:not(:checked)) {
background: #f5f5f5;
border-color: #ddd;
}
.batch-dev-name {
color: #333;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.batch-dev-imei {
color: #888;
font-size: 11px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.batch-dev-empty {
width: 100%;
text-align: center;
color: #999;
padding: 20px;
font-size: 14px;
}
/* 进度条 */
.batch-progress {
margin-top: 16px;
padding: 16px;
background: #fff5f5;
border: 1px solid #ffcccc;
border-radius: 8px;
}
.batch-progress-text {
display: flex;
align-items: center;
gap: 10px;
color: #c53030;
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
}
.spinner-red {
width: 18px;
height: 18px;
border: 2.5px solid #ffcccc;
border-top-color: #c53030;
border-radius: 50%;
animation: spin 0.8s linear infinite;
display: inline-block;
flex-shrink: 0;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.batch-progress-bar {
height: 8px;
background: #ffcccc;
border-radius: 4px;
overflow: hidden;
}
.batch-progress-fill {
height: 100%;
background: linear-gradient(90deg, #e53e3e, #c53030);
border-radius: 4px;
width: 0%;
transition: width 0.3s ease;
}
/* 汇总条 */
.batch-summary {
margin-top: 16px;
padding: 14px 18px;
display: flex;
gap: 24px;
flex-wrap: wrap;
}
/* 设备结果卡片 */
.batch-dev-card {
margin-top: 12px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.batch-dev-card-header {
display: flex;
align-items: flex-start;
padding: 14px 18px;
gap: 14px;
transition: background 0.2s;
}
.batch-dev-card-header:hover {
background: #fafbfc;
}
.batch-dev-card-header.no-data {
opacity: 0.65;
background: #f9f9f9;
}
.batch-dev-card-index {
width: 28px;
height: 28px;
min-width: 28px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
font-size: 13px;
font-weight: 600;
border-radius: 50%;
}
.batch-dev-card-info {
flex: 1;
min-width: 0;
}
.batch-dev-card-name {
font-size: 15px;
font-weight: 600;
color: #1a202c;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.batch-dev-card-sub {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
font-size: 12.5px;
color: #666;
}
.batch-dev-meta b {
color: #667eea;
font-weight: 600;
}
.batch-dev-nodata {
color: #999;
font-style: italic;
}
.batch-dev-expand {
padding: 6px 14px;
font-size: 13px;
color: #667eea;
background: #f0f4ff;
border: 1px solid #c5d0ff;
border-radius: 16px;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
}
.batch-dev-expand:hover {
background: #667eea;
color: #fff;
border-color: #667eea;
}
/* 明细区域 */
.batch-dev-detail {
padding: 0 18px 18px;
border-top: 1px dashed #e5e7eb;
background: #fafbfc;
}
.batch-wh-daily-cards {
padding-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.batch-dev-detail-empty {
padding: 20px;
text-align: center;
color: #999;
font-size: 13px;
}
/* 每日卡片里的展开按钮（覆盖wh2原有样式） */
.batch-dev-detail .wh2-daily-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px 14px;
}
.batch-dev-detail .wh2-mini-timebar {
margin: 6px 0;
}
/* 手机端适配 */
@media (max-width: 767px) {
.batch-devices-list {
max-height: 150px;
}
.batch-dev-item {
font-size: 12px;
padding: 3px 8px;
}
.batch-dev-name {
max-width: 100px;
}
.batch-dev-imei {
display: none;
}
.batch-dev-card-header {
flex-direction: column;
gap: 10px;
}
.batch-dev-expand {
align-self: flex-end;
}
.batch-summary {
gap: 12px;
}
}
/* ============ 批量工时统计 V2（微信接口版）============ */
/* 行2布局 */
.bwh-row2 { margin-top: 8px; }
.form-group-wide { flex: 1; max-width: 400px; }
/* 设备选择器一行 */
.bwh-device-picker {
display: flex; align-items: center; justify-content: space-between;
border: 1px solid #d1d5db; border-radius: 6px;
padding: 8px 12px; min-height: 38px; cursor: pointer;
background: #fff; transition: border-color .15s;
user-select: none;
}
.bwh-device-picker:hover, .bwh-device-picker:focus { border-color: #3b82f6; outline: none; }
.bwh-picker-text { color: #1f2937; font-size: 14px; }
.bwh-picker-caret { color: #9ca3af; font-size: 12px; }
/* 加载中 */
.bwh-loading {
display: none; justify-content: center; align-items: center; gap: 10px;
padding: 20px; color: #dc2626; font-size: 14px;
}
.bwh-loading.show { display: flex; }
/* 汇总条显示控制 */
.bwh-summary-bar { display: none; }
.bwh-summary-bar.show { display: flex; }
/* 设备多选弹窗 */
.bwh-device-popup {
position: fixed; inset: 0; background: rgba(0,0,0,.45);
z-index: 9999; display: none; justify-content: center; align-items: flex-start;
padding-top: 80px;
}
.bwh-device-popup.open { display: flex; }
.bwh-popup-inner {
background: #fff; border-radius: 10px; width: 480px; max-width: 92vw;
max-height: 70vh; display: flex; flex-direction: column;
box-shadow: 0 12px 40px rgba(0,0,0,.2); position: relative;
overflow: hidden;
}
.bwh-popup-inner .popup-close {
position: absolute; top: 8px; right: 12px; border: none; background: transparent;
font-size: 22px; cursor: pointer; color: #6b7280; line-height: 1;
}
.bwh-popup-search-row {
display: flex; align-items: center; gap: 8px;
padding: 16px 16px 10px; border-bottom: 1px solid #f3f4f6;
}
.bwh-popup-search-row .ds-input { flex: 1; min-width: 0; }
.bwh-device-list {
flex: 1; overflow-y: auto; padding: 4px 0;
max-height: 420px;
}
.bwh-device-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 16px; cursor: pointer; transition: background .1s;
font-size: 13px;
}
.bwh-device-row:hover { background: #f3f4f6; }
.bwh-device-row input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; }
.bwh-dev-name { flex: 1; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bwh-dev-imei { color: #9ca3af; font-size: 12px; font-family: ui-monospace, monospace; }
.bwh-popup-footer {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 16px; border-top: 1px solid #f3f4f6;
}
/* 设备结果卡片 */
#batchWhResultContainer > .bwh-card {
background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
margin-bottom: 12px; overflow: hidden;
}
.bwh-card.no-data { opacity: .7; }
.bwh-card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; cursor: pointer;
transition: background .15s;
}
.bwh-card-header:hover { background: #f9fafb; }
.bwh-card-left { display: flex; align-items: center; gap: 12px; }
.bwh-card-num {
width: 26px; height: 26px; border-radius: 50%;
background: #3b82f6; color: #fff; font-size: 13px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.bwh-card-info { flex: 1; min-width: 0; }
.bwh-card-name { font-size: 15px; font-weight: 600; color: #1f2937; }
.bwh-card-meta {
font-size: 12px; color: #6b7280; margin-top: 4px;
display: flex; flex-wrap: wrap; gap: 12px;
}
.bwh-card-meta code {
background: #f3f4f6; padding: 1px 6px; border-radius: 3px;
font-size: 11px; font-family: ui-monospace, monospace; color: #4b5563;
}
.bwh-no-data-tag {
display: inline-block; padding: 1px 8px; border-radius: 10px;
background: #f3f4f6; color: #9ca3af; font-size: 11px;
}
.bwh-toggle-btn {
border: 1px solid #d1d5db; background: #fff; border-radius: 6px;
padding: 6px 12px; cursor: pointer; font-size: 13px;
color: #374151; white-space: nowrap;
}
.bwh-toggle-btn:hover:not(.disabled) { background: #f3f4f6; border-color: #9ca3af; }
.bwh-toggle-btn.disabled { color: #9ca3af; cursor: not-allowed; }
/* 明细面板 */
.bwh-detail-panel {
display: none;
padding: 0 16px 16px;
border-top: 1px solid #f3f4f6; background: #fafafa;
}
.bwh-detail-panel.open { display: block; }
.bwh-detail-loading {
padding: 20px; text-align: center; color: #dc2626; font-size: 14px;
display: flex; justify-content: center; align-items: center; gap: 10px;
}
.bwh-detail-empty, .bwh-detail-error {
padding: 20px; text-align: center; color: #9ca3af; font-size: 13px;
}
.bwh-detail-error { color: #dc2626; }
/* 每日卡片 */
.bwh-day-card {
background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
margin-top: 10px; overflow: hidden;
}
.bwh-day-header {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px; background: #f9fafb; font-size: 13px;
border-bottom: 1px solid #f3f4f6;
}
.bwh-day-label { font-weight: 600; color: #1f2937; }
.bwh-day-info { color: #6b7280; }
.bwh-day-info b { color: #1f2937; }
/* 24h 时间条 */
.bwh-mini-timebar {
position: relative; height: 22px; background: #f3f4f6;
margin: 8px 14px; border-radius: 4px; overflow: hidden;
}
.bwh-mini-timebar.empty { background: #f9fafb; }
.bwh-timebar-scale {
position: absolute; inset: 0; pointer-events: none;
}
.bwh-timebar-scale span {
position: absolute; top: 0; font-size: 9px; color: #d1d5db;
transform: translateX(-50%); line-height: 22px;
}
.bwh-timebar-track { position: absolute; inset: 0; }
.bwh-timebar-seg {
position: absolute; top: 4px; bottom: 4px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
border-radius: 2px; min-width: 1px;
}
/* 展开明细 */
.bwh-expand-btn {
display: block; width: 100%;
padding: 6px 14px; border: none; background: transparent;
color: #3b82f6; font-size: 12px; cursor: pointer; text-align: right;
}
.bwh-expand-btn:hover { background: #eff6ff; }
.bwh-period-detail { display: none; padding: 0 14px 14px; }
.bwh-period-detail.open { display: block; }
.bwh-period-list {
border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden;
}
.bwh-period-item { padding: 8px 12px; border-bottom: 1px solid #f3f4f6; font-size: 12px; }
.bwh-period-item:last-child { border-bottom: none; }
.bwh-period-head { color: #374151; font-weight: 500; }
.bwh-period-body { color: #6b7280; margin-top: 2px; }
.bwh-period-body b { color: #1f2937; }
/* ============ 停留详单：地址列样式 ============ */
.data-table td.stay-addr {
min-width: 220px;
color: #374151;
font-size: 13px;
}
.data-table td.stay-addr.stay-addr-empty {
color: #9ca3af;
font-style: normal;
}
.data-table td.stay-coord {
color: #6b7280;
font-size: 12px;
white-space: nowrap;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ===========================================
指令下发对话框（2026-09-12 新增）
=========================================== */
.cmd-modal {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5); z-index: 9999;
align-items: center; justify-content: center;
}
.cmd-dialog-container {
background: #fff; border-radius: 10px;
width: 95%; max-width: 900px; max-height: 90vh;
display: flex; flex-direction: column;
box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.cmd-dialog-header {
display: flex; align-items: center; gap: 12px;
padding: 14px 20px; border-bottom: 1px solid #eee;
}
.cmd-dialog-header h3 { margin: 0; font-size: 16px; color: #2c3e50; }
.cmd-dialog-device { font-size: 12px; color: #999; flex: 1; }
.cmd-dialog-close {
background: #f0f0f0; border: none; border-radius: 50%;
width: 30px; height: 30px; cursor: pointer; font-size: 16px; color: #555;
display: inline-flex; align-items: center; justify-content: center;
}
.cmd-dialog-close:hover { background: #e0e0e0; }
.cmd-dialog-body {
display: flex; flex: 1; min-height: 400px; overflow: hidden;
}
.cmd-menu-pane {
width: 260px; border-right: 1px solid #eee;
overflow-y: auto; padding: 8px 0;
}
.cmd-menu-title {
padding: 8px 16px; font-weight: bold; color: #2c3e50;
border-bottom: 1px solid #f0f0f0; margin-bottom: 4px;
}
.cmd-menu-item {
padding: 10px 16px; cursor: pointer; display: flex;
align-items: center; gap: 8px; transition: background 0.15s;
font-size: 14px; color: #333;
}
.cmd-menu-item:hover { background: #f5f7fa; }
.cmd-menu-item.active {
background: #e8f1ff; color: #1890ff; font-weight: bold;
border-left: 3px solid #1890ff;
}
.cmd-menu-icon { font-size: 16px; }
.cmd-form-pane {
flex: 1; padding: 16px 20px; overflow-y: auto;
display: flex; flex-direction: column;
transition: background 0.2s;
}
/* 选中指令后右侧明细区背景色 */
.cmd-form-pane.selected {
background: #f0f7ff;
}
.cmd-form-container { flex: 1; }
.cmd-form-container h4 {
margin: 0 0 8px 0; font-size: 15px; color: #2c3e50;
}
.cmd-form-desc {
font-size: 12px; color: #888; margin-bottom: 16px;
padding: 8px 12px; background: #f5f7fa; border-radius: 4px;
}
.cmd-form-field { margin-bottom: 12px; }
.cmd-form-field label {
display: block; margin-bottom: 4px; font-size: 13px; color: #555;
}
.cmd-form-field input,
.cmd-form-field select,
.cmd-form-field textarea {
width: 100%; padding: 8px 10px; border: 1px solid #ddd;
border-radius: 4px; box-sizing: border-box; font-size: 14px;
}
.cmd-form-field input:focus,
.cmd-form-field select:focus,
.cmd-form-field textarea:focus {
border-color: #1890ff; outline: none;
}
.cmd-empty-tip, .cmd-error-tip {
color: #999; text-align: center; padding: 40px 0; font-size: 14px;
}
.cmd-error-tip { color: #f5222d; }
.cmd-status-box {
margin-top: 16px; padding: 12px; background: #f5f7fa;
border-radius: 4px; font-size: 13px;
}
.cmd-status-waiting { color: #faad14; }
.cmd-status-waiting::before {
content: '⏳ '; font-size: 16px;
}
.cmd-status-success { color: #52c41a; font-weight: bold; }
.cmd-status-success::before { content: '✅ '; }
.cmd-status-fail { color: #f5222d; }
.cmd-status-fail::before { content: '❌ '; }
.cmd-status-timeout { color: #faad14; }
.cmd-status-timeout::before { content: '⏰ '; }
.cmd-status-response {
margin-top: 8px; padding: 8px; background: #fff;
border: 1px solid #eee; border-radius: 4px;
white-space: pre-wrap; word-break: break-all;
font-size: 12px; max-height: 200px; overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* status# 解读面板 */
.cmd-status-interpretation {
margin-top: 12px;
border: 1px solid #e8e8e8;
border-radius: 6px;
background: #fafafa;
padding: 12px;
}
.status-interp-title {
font-size: 13px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
gap: 6px;
}
/* ? 帮助按钮：圆形灰边框 */
.status-help-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: 1px solid #bbb;
border-radius: 50%;
color: #888;
font-size: 11px;
font-weight: 700;
cursor: pointer;
user-select: none;
transition: all 0.15s;
background: #fff;
line-height: 1;
vertical-align: middle;
}
.status-help-btn:hover { border-color: #1890ff; color: #1890ff; }
.status-help-btn.status-help-all {
width: 18px;
height: 18px;
margin-left: 8px;
}
.status-help-btn.status-help-all.active {
background: #1890ff;
border-color: #1890ff;
color: #fff;
}
/* 行内 ? 按钮状态色：异常/警告用对应色边框提示"值得看注释" */
.status-help-btn.status-help-row.status-normal { border-color: #d9d9d9; color: #bbb; }
.status-help-btn.status-help-row.status-warning { border-color: #faad14; color: #faad14; }
.status-help-btn.status-help-row.status-abnormal { border-color: #ff4d4f; color: #ff4d4f; }
.status-help-btn.status-help-row.status-unknown { border-color: #d9d9d9; color: #bbb; }
/* 行下注释条：浅黄色背景 + 左侧黄色色条 */
.status-row-desc td {
padding: 0 !important;
}
.status-row-desc-inner {
background: #fffbe6;
border-left: 3px solid #faad14;
padding: 6px 12px 6px 14px;
color: #666;
font-size: 11px;
line-height: 1.5;
}
/* 全部注释汇总面板 */
.status-all-desc {
margin-top: 8px;
border: 1px solid #ffe58f;
border-radius: 4px;
background: #fffbe6;
padding: 8px 10px;
}
.status-all-desc-title {
font-size: 12px;
font-weight: 600;
color: #d48806;
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px dashed #ffe58f;
}
.status-all-desc-item {
display: flex;
gap: 6px;
font-size: 11px;
line-height: 1.5;
margin-bottom: 4px;
}
.status-all-desc-label {
color: #1890ff;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
min-width: 70px;
}
.status-all-desc-text {
color: #666;
word-break: break-all;
}
/* 单行表格行式：每字段一行，标签/值/状态三列对齐 */
.status-interp-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
table-layout: fixed;
}
.status-interp-table .status-row {
border-bottom: 1px solid #f0f0f0;
line-height: 1.6;
}
.status-interp-table .status-row:last-child { border-bottom: none; }
.status-interp-table .status-row.status-normal { background: #f6ffed; box-shadow: inset 3px 0 0 #52c41a; }
.status-interp-table .status-row.status-warning { background: #fffbe6; box-shadow: inset 3px 0 0 #faad14; }
.status-interp-table .status-row.status-abnormal { background: #fff1f0; box-shadow: inset 3px 0 0 #ff4d4f; }
.status-interp-table .status-row.status-unknown { background: #fafafa; box-shadow: inset 3px 0 0 #d9d9d9; }
.status-interp-table .status-row-label {
width: 90px;
color: #666;
font-weight: 600;
padding: 4px 10px 4px 12px;
white-space: nowrap;
}
.status-interp-table .status-row-value {
color: #333;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
padding: 4px 8px;
word-break: break-all;
}
.status-interp-table .status-row-extra {
color: #888;
font-size: 11px;
margin-left: 8px;
}
.status-interp-table .status-row-status {
width: 50px;
text-align: center;
font-size: 11px;
font-weight: 600;
padding: 4px 8px;
white-space: nowrap;
}
.status-interp-table .status-row-status.status-normal { color: #52c41a; }
.status-interp-table .status-row-status.status-warning { color: #faad14; }
.status-interp-table .status-row-status.status-abnormal { color: #ff4d4f; }
.status-interp-table .status-row-status.status-unknown { color: #999; }
/* 管理后台：状态规则折叠区块 */
.status-rules-section {
margin-bottom: 16px;
border: 1px solid #e8e8e8;
border-radius: 6px;
overflow: hidden;
}
.status-rules-header {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: #fafafa;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.status-rules-header:hover { background: #f0f5ff; }
.status-rules-toggle {
display: inline-block;
width: 14px;
color: #1890ff;
font-size: 12px;
transition: transform 0.15s;
}
.status-rules-item {
transition: background 0.15s;
}
.status-rules-item:hover { background: #f0f5ff !important; }
.cmd-dialog-footer {
padding: 12px 20px; border-top: 1px solid #eee;
display: flex; justify-content: flex-end; gap: 8px;
}
.cmd-dialog-footer .btn-primary {
background: #1890ff; color: #fff; border: none;
padding: 8px 20px; border-radius: 4px; cursor: pointer;
font-size: 14px;
}
.cmd-dialog-footer .btn-primary:hover:not(:disabled) { background: #40a9ff; }
.cmd-dialog-footer .btn-primary:disabled {
background: #ccc; cursor: not-allowed;
}
.cmd-dialog-footer .btn-default {
background: #fff; color: #333; border: 1px solid #ddd;
padding: 8px 20px; border-radius: 4px; cursor: pointer;
font-size: 14px;
}
.cmd-dialog-footer .btn-default:hover { background: #f5f5f5; }
/* footer 中的下发记录按钮（靠左对齐） */
.cmd-dialog-footer .cmd-history-btn {
margin-left: auto;
}
/* 删除设备按钮：红色危险操作 */
.cmd-dialog-footer .cmd-delete-btn {
background: #ff4d4f; color: #fff; border: none;
padding: 6px 14px; border-radius: 4px; font-size: 13px; cursor: pointer;
}
.cmd-dialog-footer .cmd-delete-btn:hover:not(:disabled) { background: #ff7875; }
.cmd-dialog-footer .cmd-delete-btn:disabled { background: #ffccc7; cursor: not-allowed; }
/* 设备行菜单的"设置指令"按钮（工时左边） */
.device-action-cmd {
background: #fff4e6; color: #fa8c16; border-color: #ffd591;
}
.device-action-cmd:hover { background: #ffd591; color: #d46b08; }
/* 记住密码复选框 */
.cmd-remember-pwd { display: flex; align-items: center; gap: 6px; }
.cmd-remember-pwd label {
display: flex; align-items: center; gap: 4px;
font-size: 13px; color: #666; cursor: pointer; font-weight: normal;
}
.cmd-remember-pwd input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }
/* 短信透传 - 可选指令条目 */
.quick-cmds-area {
margin-top: 12px; padding: 10px 12px;
background: #fafafa; border: 1px solid #eee; border-radius: 6px;
}
.quick-cmds-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.quick-cmds-title { font-size: 13px; color: #666; font-weight: 600; }
.quick-cmds-edit-link { font-size: 12px; color: #1890ff; cursor: pointer; }
.quick-cmds-edit-link:hover { text-decoration: underline; }
.quick-cmds-tags {
display: flex; flex-wrap: wrap; gap: 6px;
}
.quick-cmd-tag {
display: inline-block; padding: 4px 10px;
background: #fff; border: 1px solid #d9d9d9; border-radius: 4px;
font-size: 12px; color: #333; cursor: pointer;
font-family: monospace; white-space: nowrap;
transition: all 0.2s;
}
.quick-cmd-tag:hover { border-color: #1890ff; color: #1890ff; }
.quick-cmd-tag.selected {
background: #e6f7ff; border-color: #1890ff; color: #1890ff;
box-shadow: 0 0 0 2px rgba(24,144,255,0.1);
}
.quick-cmds-edit-box { margin-top: 4px; }
.quick-cmds-edit-box input {
width: 100%; padding: 6px 8px;
border: 1px solid #d9d9d9; border-radius: 4px;
font-size: 12px; font-family: monospace;
}
.quick-cmds-edit-box input:focus { border-color: #1890ff; outline: none; }
.quick-cmds-edit-tip { font-size: 11px; color: #999; margin-top: 4px; }
/* 可选指令为空时的占位提示 */
.quick-cmds-empty {
font-size: 12px; color: #bbb;
}
/* 下发记录弹窗 */
.cmd-history-container {
background: #fff; border-radius: 8px; width: 600px; max-width: 90vw;
max-height: 80vh; display: flex; flex-direction: column;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.cmd-history-body {
flex: 1; overflow-y: auto; padding: 12px 20px;
}
.cmd-history-list { display: flex; flex-direction: column; gap: 10px; }
.cmd-history-item {
background: #f9f9f9; border: 1px solid #eee; border-radius: 6px;
padding: 10px 14px; font-size: 13px;
}
.cmd-history-item:hover { background: #f0f5ff; border-color: #91d5ff; }
.cmd-history-row {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 4px; gap: 8px;
}
.cmd-history-time { color: #999; font-size: 12px; }
.cmd-history-cmd { color: #1890ff; font-weight: 600; }
.cmd-history-device { color: #333; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-history-action { color: #fa8c16; font-family: monospace; font-size: 12px; }
.cmd-history-result { color: #52c41a; font-size: 12px; margin-top: 4px; }
.cmd-history-item:hover .cmd-history-result { color: #3897ff; }
/* 手机端适配 */
@media (max-width: 767px) {
.cmd-dialog-container {
width: 98%; max-height: 95vh;
}
.cmd-dialog-body {
flex-direction: column; min-height: 300px;
}
.cmd-menu-pane {
width: 100%; max-height: 200px;
border-right: none; border-bottom: 1px solid #eee;
}
.cmd-form-pane { padding: 12px; }
.cmd-history-container { width: 98%; max-height: 90vh; }
}