/* ============ 断点约定 ============
两档主断点：
- 桌面（含平板）：≥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;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
color: #fff;
font-size: 13px;
text-decoration: none;
transition: all 0.2s;
}
.admin-entry-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
/* ============ 管理控制台页面 ============ */
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 .logo {
display: flex;
align-items: center;
gap: 8px;
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;
}
/* 保存按钮 */
.btn-save {
padding: 10px 28px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
}
.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;
}
/* ============ 全屏仪表盘布局 ============ */
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: all 0.2s;
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 {
flex: 1;
min-width: 0;
font-size: 15px;
font-weight: 600;
color: #111827;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 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-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;
}
/* 设备列表表头固定、表体可滚动：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;
align-items: stretch;
width: 100%;
overflow: hidden;
background: #f2f7ff;
}
.device-expand-left {
display: flex;
align-items: center;
font-size: 12px;
color: #555;
flex: 0 0 auto;
/* 跟设备行保持一样的 padding（12px），高度跟普通行统一 */
padding: 12px 12px 12px 40px;
overflow: hidden;
}
.device-expand-label {
color: #999;
margin-right: 4px;
flex-shrink: 0;
}
.device-expand-imei {
color: #333;
font-family: Menlo, Monaco, Consolas, monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-expand-right {
display: flex;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
}
.device-action-btn {
flex: 1 1 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
padding: 0 8px;
font-size: 12px;
line-height: 1.2;
border: none;
border-radius: 0;
cursor: pointer;
background: transparent;
color: #888;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
position: relative;
-webkit-tap-highlight-color: transparent;
outline: none;
-webkit-user-select: none;
user-select: none;
}
.device-action-btn:hover {
background: rgba(102,126,234,0.18);
color: #5a6fd6;
}
.device-action-btn:active {
background: rgba(102,126,234,0.22);
}
@media (max-width: 767px) {
.device-action-btn:hover {
background: transparent;
color: #888;
}
.device-action-btn:active {
background: transparent;
color: #888;
}
}
.device-action-btn .device-action-icon {
font-size: 13px;
line-height: 1;
}
/* 竖线分隔 — 轨迹/里程/温度报表之间 & 轨迹左侧（第一个按钮）都用同一种 border-left */
.device-expand-right > * {
border-left: 1px solid #e4e7ef;
}
/* 选中态 — 跟顶部 tab 完全一样：紫色背景白字 */
.device-action-btn.active {
background: #667eea;
color: #fff;
font-weight: 500;
}
.device-action-btn.active:hover {
background: #667eea;
color: #fff;
}
.device-action-playback { }
.device-action-mileage { }
.device-action-temp { }
/* 菜单按钮样式统一在文件末尾的 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: flex !important;
}
#showDebugBtn:hover {
background: #7f8c8d !important;
}
/* ============ 右上角底图切换控件（正方形按钮） ============ */
.basemap-switcher {
position: absolute;
top: 12px;
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;
}
.playback-panel .sidebar-title {
font-size: 15px;
font-weight: 600;
display: block;
}
.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;
}
.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: #e53935;
border-radius: 50%;
}
.pb-cal-day.selected {
background: #667eea;
color: #fff;
font-weight: 600;
}
.pb-cal-day .pb-cal-mile {
font-size: 9px;
color: #888;
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: wrap;
}
.pb-quick-btn {
flex: 1;
min-width: 56px;
padding: 5px 4px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 3px;
font-size: 11px;
color: #555;
cursor: pointer;
transition: all 0.15s;
}
.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: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
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;
}
/* 轨迹回放：底图切换按钮下移，避开顶部轨迹明细开关 */
#pbbasemapSwitcher {
top: 60px !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-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: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
color: #333;
border: 1px solid rgba(0, 0, 0, 0.08);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
padding: 6px 12px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}
.pb-fit-btn:hover {
transform: scale(1.03);
background: #eef0ff;
color: #4B3FE3;
border-color: #c4bff5;
}
.pb-fit-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}
/* 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: 9px 18px;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
}
.btn:hover {
opacity: 0.85;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary {
background: #667eea;
color: #fff;
}
.btn-secondary {
background: #f0f0f0;
color: #333;
border: 1px solid #ddd;
}
.btn-success {
background: #27ae60;
color: #fff;
}
.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状态 */
.wh2-current-acc {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: #f3f4f6;
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
}
.wh2-current-acc-label {
color: #6b7280;
}
.wh2-current-acc-status {
font-weight: 600;
}
.wh2-current-acc-status.acc-on {
color: #10b981;
}
.wh2-current-acc-status.acc-off {
color: #6b7280;
}
/* ============ 搜索面板 ============ */
.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;
}
.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 10px !important;
gap: 6px;
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: content-box;
}
.header-left {
display: none; /* 手机端隐藏 logo + 标题 */
}
.header-right {
order: 2;
flex: 0 0 auto;
width: auto;
justify-content: flex-end;
gap: 6px;
align-self: center;
}
.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; /* 允许下拉菜单弹出（统计报表/更多），不再裁剪 */
justify-content: flex-start;
gap: 0;
padding-bottom: 0;
background: transparent;
border: none;
border-radius: 0;
align-self: stretch;
align-items: stretch;
height: 100%;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab {
flex-shrink: 0;
padding: 0 14px;
font-size: 13px;
min-height: 0;
height: 100%;
}
/* ========== 触摸目标 ≥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-data::after,
.pb-cal-day.has-crossed-day::before {
top: 1px;
right: 1px;
width: 3px;
height: 3px;
}
.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: absolute;
inset: 0;
z-index: 20;
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;
}
/* 手机端：选项页（第一页）的左侧 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;
}
/* 手机端：地图页（第二页）布局 = 返回按钮 + 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;
}
#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-ctrl-btns {
gap: 4px;
}
#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;
left: 0;
right: 0;
max-height: 45%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}
}
/* 电脑端：隐藏设备列表 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;
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; }
/* ============ 工时报表2样式（轨迹回放布局） ============ */
/* 日历样式覆盖 - 工时报表2 */
#wh2Calendar.pb-calendar .pb-cal-day.has-data::after {
display: none; /* 隐藏底部红色/橙色圆点 */
}
#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);
}
/* 右侧明细面板 */
.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-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: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: #fff;
border: none;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
font-weight: 500;
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;
}
.wh2-period-location-col .location-icon {
margin-right: 4px;
}
/* ============ 工时报表2 - 多天视图样式 ============ */
.wh2-multi-day-view {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
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;
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
background: #fff;
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-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 内控制位置
============================================================ */
.device-list-panel .data-table th.th-menu,
.device-list-panel .data-table td.device-menu-cell {
width: 60px;
min-width: 60px;
max-width: 60px;
padding: 0;
border-left: 1px solid #eee;
white-space: nowrap;
vertical-align: middle;
background: transparent;
}
/* 菜单按钮 —— 覆盖 .device-action-btn 默认的 flex:1 1 auto + display:flex */
.device-list-panel .data-table .device-menu-btn.device-action-btn {
flex: none !important; /* 关键：不再作为 flex item 被拉伸 */
display: inline-flex !important; /* 关键：转内联，使 text-align 生效 */
height: auto;
font-size: 12px;
line-height: 1.2;
}
/* ======= 电脑端：菜单按钮紧贴右边缘，不占左边运动状态空白 ======= */
@media (min-width: 768px) {
.device-list-panel .data-table td.device-menu-cell {
text-align: right;
padding-right: 12px;
}
.device-list-panel .data-table .device-menu-btn.device-action-btn {
padding: 3px 6px;
}
}
/* ======= 手机端：菜单按钮向左靠，贴着运动状态列 ======= */
@media (max-width: 767px) {
.device-list-panel .data-table td.device-menu-cell {
text-align: left;
padding-left: 4px;
}
.device-list-panel .data-table .device-menu-btn.device-action-btn {
padding: 4px 14px; /* 按钮横向更宽，手指更容易点中 */
min-width: 56px;
}
/* 手机端：设备行高度单独增加（电脑保持 12px 不动） */
.device-list-panel .data-table td {
padding: 15px 10px;
}
/* 手机端：展开菜单行左右部分 padding 同步 15px，保持跟普通行等高 */
.device-list-panel .device-expand-left {
padding-top: 15px;
padding-bottom: 15px;
}
}
/* ========== 更多页面（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;
}