958 行
23 KiB
Plaintext
958 行
23 KiB
Plaintext
<template>
|
|
<view class="radar-page" :class="pageRtlClass" :style="pageTheme">
|
|
<view class="radar-header">
|
|
<view class="radar-header-top">
|
|
<text class="radar-title">{{ pageTitle }}</text>
|
|
<view class="radar-live-badge">
|
|
<view class="radar-live-dot"></view>
|
|
<text class="radar-live-text">{{ liveStatusText }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="field"
|
|
:class="{ 'field-hidden': !(state.cardIdRaw === '' || keepCardIdField) }"
|
|
>
|
|
<text class="field-label">{{ t('cardIdLabel') }}</text>
|
|
<input
|
|
class="field-input"
|
|
type="number"
|
|
v-model="state.cardIdRaw"
|
|
:placeholder="t('cardIdPlaceholder')"
|
|
:disabled="state.loading"
|
|
/>
|
|
</view>
|
|
|
|
<!-- Bento Grid Overview Cards -->
|
|
<view class="bento-overview">
|
|
<view class="bento-row">
|
|
<view class="bento-card bento-card-primary">
|
|
<view class="bento-card-header">
|
|
<text class="bento-card-label">{{ t('totalVisits') }}</text>
|
|
<view class="bento-spark-pulse">
|
|
<view class="bento-spark-dot"></view>
|
|
</view>
|
|
</view>
|
|
<text class="bento-card-value">{{ stats.totalVisits }}</text>
|
|
<view class="bento-card-footer">
|
|
<text class="bento-sub-badge">{{ stats.topLocation }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bento-card bento-card-secondary">
|
|
<view class="bento-card-header">
|
|
<text class="bento-card-label">{{ t('intentRate') }}</text>
|
|
<view class="bento-badge-success">
|
|
<text class="bento-badge-text">{{ t('highIntent') }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="bento-card-value text-accent">{{ stats.intentRateText }}</text>
|
|
<view class="bento-card-footer">
|
|
<text class="bento-sub-text">{{ stats.highIntentCount }} {{ t('activeNow') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bento-card bento-card-wide">
|
|
<view class="bento-wide-header">
|
|
<view class="bento-wide-title-group">
|
|
<text class="bento-wide-title">{{ t('intentTrend') }}</text>
|
|
<text class="bento-wide-subtitle">{{ stats.avgStayText }} {{ t('stay') }}</text>
|
|
</view>
|
|
<text class="bento-wide-badge">{{ t('liveRadar') }}</text>
|
|
</view>
|
|
|
|
<view class="trend-bars-container">
|
|
<view class="trend-col">
|
|
<view class="trend-bar-track">
|
|
<view class="trend-bar-fill" :style="{ height: trendHeights[0] + '%' }"></view>
|
|
</view>
|
|
<text class="trend-col-label">1</text>
|
|
</view>
|
|
<view class="trend-col">
|
|
<view class="trend-bar-track">
|
|
<view class="trend-bar-fill" :style="{ height: trendHeights[1] + '%' }"></view>
|
|
</view>
|
|
<text class="trend-col-label">2</text>
|
|
</view>
|
|
<view class="trend-col">
|
|
<view class="trend-bar-track">
|
|
<view class="trend-bar-fill" :style="{ height: trendHeights[2] + '%' }"></view>
|
|
</view>
|
|
<text class="trend-col-label">3</text>
|
|
</view>
|
|
<view class="trend-col">
|
|
<view class="trend-bar-track">
|
|
<view class="trend-bar-fill" :style="{ height: trendHeights[3] + '%' }"></view>
|
|
</view>
|
|
<text class="trend-col-label">4</text>
|
|
</view>
|
|
<view class="trend-col">
|
|
<view class="trend-bar-track">
|
|
<view class="trend-bar-fill" :style="{ height: trendHeights[4] + '%' }"></view>
|
|
</view>
|
|
<text class="trend-col-label">5</text>
|
|
</view>
|
|
<view class="trend-col">
|
|
<view class="trend-bar-track">
|
|
<view class="trend-bar-fill" :style="{ height: trendHeights[5] + '%' }"></view>
|
|
</view>
|
|
<text class="trend-col-label">6</text>
|
|
</view>
|
|
<view class="trend-col">
|
|
<view class="trend-bar-track">
|
|
<view class="trend-bar-fill" :style="{ height: trendHeights[6] + '%' }"></view>
|
|
</view>
|
|
<text class="trend-col-label">7</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="radar-timeline-header">
|
|
<text class="radar-desc">{{ pageDesc }}</text>
|
|
<text class="radar-count-pill">{{ state.tracks.length }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Loading Skeleton -->
|
|
<view v-if="state.loading" class="radar-skeleton">
|
|
<view class="skeleton-line"></view>
|
|
<view class="skeleton-card"></view>
|
|
<view class="skeleton-card"></view>
|
|
</view>
|
|
|
|
<!-- Error Feedback -->
|
|
<view v-else-if="state.errorMessage !== ''" class="radar-feedback">
|
|
<text class="feedback-title">{{ t('error') }}</text>
|
|
<text class="feedback-desc">{{ state.errorMessage }}</text>
|
|
</view>
|
|
|
|
<!-- Empty State -->
|
|
<view v-else-if="state.empty" class="radar-feedback">
|
|
<view class="empty-halo"></view>
|
|
<text class="feedback-title">{{ t('empty') }}</text>
|
|
<text class="feedback-desc">{{ t('emptyHint') }}</text>
|
|
</view>
|
|
|
|
<!-- Real-time Activity Feed List -->
|
|
<list-view v-else class="radar-list" :scroll-y="true">
|
|
<list-item v-for="item in state.tracks" :key="item.id" class="radar-row-item">
|
|
<view
|
|
class="radar-row"
|
|
:class="{
|
|
'radar-row-hot': isHighIntent(item.stayDurationMs, item.scrollDepth),
|
|
'radar-row-amber': isMediumIntent(item.stayDurationMs, item.scrollDepth),
|
|
}"
|
|
>
|
|
<view class="radar-card-top">
|
|
<view class="touch-badge" :class="'touch-' + item.touchType">
|
|
<text class="touch-badge-text">{{ formatTouchTag(item.touchType) }}</text>
|
|
</view>
|
|
<view class="radar-headline-group">
|
|
<text class="radar-headline">{{ formatHeadline(item) }}</text>
|
|
<text class="radar-time">{{ formatTime(item.createdAt) }}</text>
|
|
</view>
|
|
<view class="intent-pill" :class="'intent-' + resolveIntentLevel(item)">
|
|
<text class="intent-text">{{ resolveIntentBadge(item) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="radar-card-body">
|
|
<view class="radar-tags-wrap">
|
|
<view v-if="formatLocation(item.country, item.city) !== ''" class="radar-geo-pill">
|
|
<text class="radar-geo-text">{{ formatLocation(item.country, item.city) }}</text>
|
|
</view>
|
|
<view class="radar-metric-chip">
|
|
<text class="chip-label">{{ t('stay') }}</text>
|
|
<text class="chip-val">{{ formatStay(item.stayDurationMs) }}</text>
|
|
</view>
|
|
<view class="radar-metric-chip">
|
|
<text class="chip-label">{{ t('depth') }}</text>
|
|
<text class="chip-val">{{ formatDepth(item.scrollDepth) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="hasBlocks(item)" class="radar-blocks-row">
|
|
<text class="blocks-label">{{ t('blocksViewed') }}:</text>
|
|
<text class="blocks-content">{{ formatBlocks(item.viewedBlocks) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</list-item>
|
|
</list-view>
|
|
|
|
<!-- Bottom Floating CTA -->
|
|
<view class="radar-cta-bar">
|
|
<button
|
|
class="primary-cta-btn"
|
|
:class="{ 'primary-cta-btn-disabled': state.loading }"
|
|
:disabled="state.loading"
|
|
@click="handleRefresh"
|
|
>
|
|
<text class="primary-cta-btn-text">{{ t('refresh') }}</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { getCurrentLocale, getOmniText, isRtl } from '../../common/locale.uts';
|
|
import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../common/tokens.uts';
|
|
import { RadarTrack } from '../../common/types.uts';
|
|
import {
|
|
applyRadarOptions,
|
|
computeRadarStats,
|
|
computeTrendHeights,
|
|
createRadarState,
|
|
formatBlocksList,
|
|
formatDepth,
|
|
formatLocation,
|
|
formatRelativeTime,
|
|
formatStay,
|
|
formatTouchTag,
|
|
formatVisitorHeadline,
|
|
getIntentBadgeText,
|
|
getIntentLevel,
|
|
isHighIntent,
|
|
loadTracks,
|
|
refreshTracks,
|
|
resolveRadarText,
|
|
RadarCopyKey,
|
|
RadarPageOptions,
|
|
RadarStats,
|
|
} from './useRadar.uts';
|
|
|
|
const pageTheme: Record<string, string> = {
|
|
'--oc-primary': utsLightColors.primary,
|
|
'--oc-primary-soft': utsLightColors.primarySoft,
|
|
'--oc-bg': utsLightColors.bg,
|
|
'--oc-surface': utsLightColors.surface,
|
|
'--oc-border': utsLightColors.border,
|
|
'--oc-text': utsLightColors.text,
|
|
'--oc-text-2': utsLightColors.text2,
|
|
'--oc-success': utsLightColors.success,
|
|
'--oc-warning': utsLightColors.warning,
|
|
'--oc-error': utsLightColors.error,
|
|
'--oc-radius-btn': utsRadius.button,
|
|
'--oc-radius-card': utsRadius.card,
|
|
'--oc-radius-modal': utsRadius.modal,
|
|
'--oc-shadow': utsTypography.shadow,
|
|
'--oc-space-8': utsSpacing.space8,
|
|
'--oc-space-12': utsSpacing.space12,
|
|
'--oc-space-16': utsSpacing.space16,
|
|
'--oc-space-24': utsSpacing.space24,
|
|
};
|
|
|
|
const state = reactive(createRadarState());
|
|
const keepCardIdField = ref(false);
|
|
const pageTitle = ref(getOmniText(getCurrentLocale(), 'radar.online_visitor'));
|
|
const pageDesc = ref(getOmniText(getCurrentLocale(), 'radar.visitor_trace'));
|
|
|
|
const pageRtlClass = computed((): string => {
|
|
return isRtl(getCurrentLocale()) ? 'radar-rtl' : '';
|
|
});
|
|
|
|
const stats = computed((): RadarStats => {
|
|
return computeRadarStats(state.tracks, state.total);
|
|
});
|
|
|
|
const trendHeights = computed((): number[] => {
|
|
return computeTrendHeights(state.tracks);
|
|
});
|
|
|
|
const liveStatusText = computed((): string => {
|
|
const locale = getCurrentLocale();
|
|
const activeWord = getOmniText(locale, 'radar.active_now');
|
|
return `${state.tracks.length} ${activeWord}`;
|
|
});
|
|
|
|
function t(key: RadarCopyKey): string {
|
|
return resolveRadarText(key);
|
|
}
|
|
|
|
function formatHeadline(item: RadarTrack): string {
|
|
return formatVisitorHeadline(item);
|
|
}
|
|
|
|
function formatTime(createdAt?: string | Date): string {
|
|
return formatRelativeTime(createdAt);
|
|
}
|
|
|
|
function resolveIntentLevel(item: RadarTrack): string {
|
|
return getIntentLevel(item.stayDurationMs, item.scrollDepth);
|
|
}
|
|
|
|
function isMediumIntent(stayDurationMs: number, scrollDepth: number): boolean {
|
|
return getIntentLevel(stayDurationMs, scrollDepth) === 'medium';
|
|
}
|
|
|
|
function resolveIntentBadge(item: RadarTrack): string {
|
|
const level = resolveIntentLevel(item);
|
|
return getIntentBadgeText(level);
|
|
}
|
|
|
|
function hasBlocks(item: RadarTrack): boolean {
|
|
return item.viewedBlocks != null && Array.isArray(item.viewedBlocks) && item.viewedBlocks.length > 0;
|
|
}
|
|
|
|
function formatBlocks(blocks?: string[] | null): string {
|
|
return formatBlocksList(blocks);
|
|
}
|
|
|
|
function handleRefresh(): void {
|
|
refreshTracks(state);
|
|
}
|
|
|
|
onLoad((options: RadarPageOptions) => {
|
|
applyRadarOptions(state, options);
|
|
keepCardIdField.value = state.cardIdRaw === '';
|
|
refreshTracks(state);
|
|
});
|
|
|
|
onShow(() => {
|
|
refreshTracks(state);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.radar-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
}
|
|
|
|
.radar-rtl {
|
|
direction: rtl;
|
|
}
|
|
|
|
.radar-header {
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border-bottom: 1px solid var(--oc-border, #E3E7ED);
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block-start: var(--oc-space-16, 16px);
|
|
padding-block-end: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.radar-header-top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.radar-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.radar-live-badge {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-inline: 10px;
|
|
padding-block: 4px;
|
|
background-color: #ECFDF3;
|
|
border-radius: 9999px;
|
|
border: 1px solid #A6F4C5;
|
|
}
|
|
|
|
.radar-live-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
background-color: var(--oc-success, #12B76A);
|
|
margin-inline-end: 6px;
|
|
}
|
|
|
|
.radar-live-text {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #027A48;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-block-end: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.field-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.field-label {
|
|
font-size: 13px;
|
|
color: var(--oc-text, #101828);
|
|
font-weight: 600;
|
|
margin-block-end: 6px;
|
|
}
|
|
|
|
.field-input {
|
|
height: 44px;
|
|
min-height: 44px;
|
|
padding-inline: 12px;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
font-size: 16px;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
/* Bento Grid */
|
|
.bento-overview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-block-end: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.bento-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
}
|
|
|
|
.bento-card {
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
|
|
padding: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.bento-card-primary {
|
|
flex: 1;
|
|
background: linear-gradient(145deg, #FFFFFF 0%, #F5F9FF 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.bento-card-secondary {
|
|
flex: 1;
|
|
background: linear-gradient(145deg, #FFFFFF 0%, #F6FCF8 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.bento-card-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: 6px;
|
|
}
|
|
|
|
.bento-card-label {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bento-spark-pulse {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 7px;
|
|
background-color: rgba(0, 136, 255, 0.12);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bento-spark-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background-color: var(--oc-primary, #0088FF);
|
|
}
|
|
|
|
.bento-badge-success {
|
|
padding-inline: 6px;
|
|
padding-block: 2px;
|
|
border-radius: 9999px;
|
|
background-color: #ECFDF3;
|
|
}
|
|
|
|
.bento-badge-text {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: #027A48;
|
|
}
|
|
|
|
.bento-card-value {
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.1;
|
|
margin-block-end: 6px;
|
|
}
|
|
|
|
.text-accent {
|
|
color: #0088FF;
|
|
}
|
|
|
|
.bento-card-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.bento-sub-badge {
|
|
font-size: 11px;
|
|
color: var(--oc-text-2, #667085);
|
|
background-color: rgba(16, 24, 40, 0.04);
|
|
padding-inline: 6px;
|
|
padding-block: 2px;
|
|
border-radius: 6px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.bento-sub-text {
|
|
font-size: 11px;
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
.bento-card-wide {
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bento-wide-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.bento-wide-title-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bento-wide-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.bento-wide-subtitle {
|
|
font-size: 11px;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.bento-wide-badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #0088FF;
|
|
background-color: #EBF5FF;
|
|
padding-inline: 8px;
|
|
padding-block: 3px;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.trend-bars-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
height: 56px;
|
|
padding-inline: 4px;
|
|
}
|
|
|
|
.trend-col {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.trend-bar-track {
|
|
flex: 1;
|
|
width: 8px;
|
|
background-color: #F1F5F9;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.trend-bar-fill {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.trend-col-label {
|
|
font-size: 10px;
|
|
color: #94A3B8;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.radar-timeline-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-start: 4px;
|
|
}
|
|
|
|
.radar-desc {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.radar-count-pill {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--oc-text-2, #667085);
|
|
background-color: #F1F5F9;
|
|
padding-inline: 8px;
|
|
padding-block: 2px;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.radar-skeleton {
|
|
flex: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block-start: var(--oc-space-16, 16px);
|
|
padding-block-end: calc(88px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 16px;
|
|
width: 40%;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: 8px;
|
|
margin-block-end: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.skeleton-card {
|
|
height: 88px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
margin-block-end: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.radar-feedback {
|
|
flex: 1;
|
|
margin-inline: var(--oc-space-16, 16px);
|
|
margin-block: 36px;
|
|
padding: var(--oc-space-24, 24px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.empty-halo {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 22px;
|
|
background: radial-gradient(circle, rgba(0, 136, 255, 0.15) 0%, rgba(0, 136, 255, 0.02) 70%);
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.feedback-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
margin-block-end: var(--oc-space-8, 8px);
|
|
text-align: center;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.feedback-desc {
|
|
font-size: 14px;
|
|
color: var(--oc-text-2, #667085);
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.radar-list {
|
|
flex: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block-start: var(--oc-space-12, 12px);
|
|
padding-block-end: calc(88px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
.radar-row-item {
|
|
margin-block-end: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.radar-row {
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
|
|
padding: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.radar-row-hot {
|
|
border-inline-start-width: 4px;
|
|
border-inline-start-style: solid;
|
|
border-inline-start-color: #12B76A;
|
|
}
|
|
|
|
.radar-row-amber {
|
|
border-inline-start-width: 4px;
|
|
border-inline-start-style: solid;
|
|
border-inline-start-color: #F79009;
|
|
}
|
|
|
|
.radar-card-top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: 10px;
|
|
}
|
|
|
|
.touch-badge {
|
|
padding-inline: 8px;
|
|
height: 22px;
|
|
border-radius: 9999px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-inline-end: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.touch-nfc {
|
|
background-color: #F5F3FF;
|
|
border: 1px solid #DDD6FE;
|
|
}
|
|
|
|
.touch-nfc .touch-badge-text {
|
|
color: #7C3AED;
|
|
}
|
|
|
|
.touch-qr {
|
|
background-color: #EFF6FF;
|
|
border: 1px solid #BFDBFE;
|
|
}
|
|
|
|
.touch-qr .touch-badge-text {
|
|
color: #2563EB;
|
|
}
|
|
|
|
.touch-link {
|
|
background-color: #F0FDF4;
|
|
border: 1px solid #BBF7D0;
|
|
}
|
|
|
|
.touch-link .touch-badge-text {
|
|
color: #16A34A;
|
|
}
|
|
|
|
.touch-badge-text {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.radar-headline-group {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-inline-end: 8px;
|
|
}
|
|
|
|
.radar-headline {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.radar-time {
|
|
font-size: 11px;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.intent-pill {
|
|
padding-inline: 8px;
|
|
padding-block: 3px;
|
|
border-radius: 9999px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.intent-high {
|
|
background-color: #ECFDF3;
|
|
border: 1px solid #A6F4C5;
|
|
}
|
|
|
|
.intent-high .intent-text {
|
|
color: #027A48;
|
|
}
|
|
|
|
.intent-medium {
|
|
background-color: #FFFAEB;
|
|
border: 1px solid #FEDF89;
|
|
}
|
|
|
|
.intent-medium .intent-text {
|
|
color: #B54708;
|
|
}
|
|
|
|
.intent-normal {
|
|
background-color: #F8FAFC;
|
|
border: 1px solid #E2E8F0;
|
|
}
|
|
|
|
.intent-normal .intent-text {
|
|
color: #64748B;
|
|
}
|
|
|
|
.intent-text {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.radar-card-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.radar-tags-wrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.radar-geo-pill {
|
|
background-color: #F8FAFC;
|
|
border: 1px solid #E2E8F0;
|
|
border-radius: 6px;
|
|
padding-inline: 8px;
|
|
padding-block: 3px;
|
|
}
|
|
|
|
.radar-geo-text {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.radar-metric-chip {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: #F8FAFC;
|
|
border: 1px solid #E2E8F0;
|
|
border-radius: 6px;
|
|
padding-inline: 8px;
|
|
padding-block: 3px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.chip-label {
|
|
font-size: 11px;
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
.chip-val {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.radar-blocks-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.blocks-label {
|
|
font-size: 11px;
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
.blocks-content {
|
|
font-size: 11px;
|
|
color: #0088FF;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.radar-cta-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: var(--window-bottom, 0px);
|
|
padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border-top: 1px solid var(--oc-border, #E3E7ED);
|
|
z-index: 100;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.primary-cta-btn {
|
|
height: 48px;
|
|
min-height: 44px;
|
|
width: 100%;
|
|
border-width: 0;
|
|
border-radius: var(--oc-radius-btn, 14px);
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
box-shadow: 0 8px 20px rgba(0, 136, 255, 0.22);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.primary-cta-btn:active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.primary-cta-btn-disabled {
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.primary-cta-btn-text {
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.primary-cta-btn-disabled .primary-cta-btn-text {
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
</style>
|