diff --git a/admin/src/views/tracker/visitor/detail.vue b/admin/src/views/tracker/visitor/detail.vue index c863946..1ead728 100644 --- a/admin/src/views/tracker/visitor/detail.vue +++ b/admin/src/views/tracker/visitor/detail.vue @@ -1042,19 +1042,18 @@ background: $vd-border; } - // 4 统计卡 + // 4 统计卡(中栏 2×2 窄卡;与来源证据卡的间距由 .vd-side 的 gap 提供) .vd-stats { display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 16px; - margin-bottom: 16px; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; } .vd-stat-card { display: flex; align-items: center; - padding: 18px 20px; - gap: 14px; + padding: 14px 16px; + gap: 12px; } .vd-stat-icon { @@ -1082,7 +1081,7 @@ .vd-stat-value { overflow: hidden; - font-size: 26px; + font-size: 24px; font-weight: 700; color: $vd-text; text-overflow: ellipsis; @@ -1090,10 +1089,10 @@ } } - // 主体双栏:时间线 ~72% + 右列 340px + // 主体三栏:三 Tab 卡 2fr + 统计卡/来源证据 1fr + 访问环境 1fr .vd-main { display: grid; - grid-template-columns: minmax(0, 1fr) 340px; + grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; margin-bottom: 16px; @@ -1130,11 +1129,14 @@ } } - .vd-card-tools { + // 时间线工具行(时间范围 + 正倒序):随三 Tab 化迁入 timeline pane,右对齐 + .vd-tl-tools { display: flex; align-items: center; flex-wrap: wrap; - gap: 10px; + justify-content: flex-end; + padding: 0 0 4px; + gap: 8px 12px; .vd-tool-label { font-size: 12px; @@ -1170,9 +1172,13 @@ } } - // 时间线卡 - .vd-timeline-card { - padding-bottom: 12px; + // 左栏三 Tab 卡:ElTabs nav 即卡头(贴卡顶),header margin 统一提供各 pane 的 12px 上距 + .vd-tabs-card { + padding: 0 20px 16px; + + :deep(.el-tabs__header) { + margin-bottom: 12px; + } } // 时间线滚动容器:长轨迹卡内滚动(日期组头随内容滚动,不做 sticky) @@ -1407,11 +1413,6 @@ } } - // 底部:会话与原始数据 - .vd-bottom-card { - padding: 4px 20px 16px; - } - .session-id-code { padding: 2px 8px; font-size: 12px; @@ -1461,18 +1462,24 @@ border-radius: 6px; } - // 响应式:中屏右列下沉,小屏统计卡两列 - @media (max-width: 1200px) { + // 响应式:两栏(访问环境整行下沉)→ 单栏 + @media (max-width: 1400px) { + .vd-main { + grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); + } + + .vd-main > :last-child { + grid-column: 1 / -1; + } + } + + @media (max-width: 1000px) { .vd-main { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { - .vd-stats { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .vd-hstat-divider { display: none; }