62e0ae4435
补齐平台订阅、外部登录、CRM 同步与用户端页面；Nginx 转发用户端接口，登录页使用 Google 与 Apple 标志。 Co-authored-by: Cursor <cursoragent@cursor.com>
1031 行
25 KiB
Plaintext
1031 行
25 KiB
Plaintext
<template>
|
|
<view class="stats-page" :class="pageRtlClass" :style="pageTheme">
|
|
<!-- Ambient Aurora Top Glow (Subtle Luxury Mesh Gradient < 8%) -->
|
|
<view class="stats-aurora-glow"></view>
|
|
|
|
<!-- Header Cockpit: Bento Control Panel -->
|
|
<view class="stats-header">
|
|
<!-- Live Status & Sync Indicator -->
|
|
<view class="cockpit-top-bar">
|
|
<view class="live-pill">
|
|
<view class="live-pulse-dot"></view>
|
|
<text class="live-pill-text">{{ t('liveBadge') }}</text>
|
|
</view>
|
|
<view class="header-refresh-btn" @click="handleRefresh">
|
|
<text class="header-refresh-text">{{ refreshText }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Title & Subtitle Typography -->
|
|
<view class="stats-title-block">
|
|
<text class="stats-title">{{ pageTitle }}</text>
|
|
<text class="stats-subtitle">{{ pageSubtitle }}</text>
|
|
</view>
|
|
|
|
<!-- Period Filter Segmented Pill Control -->
|
|
<view class="period-segmented-track">
|
|
<view
|
|
class="period-chip"
|
|
:class="{ 'period-chip-active': state.period === 'today' }"
|
|
@click="changePeriod('today')"
|
|
>
|
|
<text class="period-chip-text">{{ t('periodToday') }}</text>
|
|
</view>
|
|
<view
|
|
class="period-chip"
|
|
:class="{ 'period-chip-active': state.period === '7d' }"
|
|
@click="changePeriod('7d')"
|
|
>
|
|
<text class="period-chip-text">{{ t('period7d') }}</text>
|
|
</view>
|
|
<view
|
|
class="period-chip"
|
|
:class="{ 'period-chip-active': state.period === '30d' }"
|
|
@click="changePeriod('30d')"
|
|
>
|
|
<text class="period-chip-text">{{ t('period30d') }}</text>
|
|
</view>
|
|
<view
|
|
class="period-chip"
|
|
:class="{ 'period-chip-active': state.period === 'all' }"
|
|
@click="changePeriod('all')"
|
|
>
|
|
<text class="period-chip-text">{{ t('periodAll') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Skeleton Loading -->
|
|
<view v-if="state.loading" class="stats-skeleton">
|
|
<view class="skeleton-metric-row">
|
|
<view class="skeleton-card"></view>
|
|
<view class="skeleton-card"></view>
|
|
</view>
|
|
<view class="skeleton-funnel"></view>
|
|
<view class="skeleton-grid"></view>
|
|
</view>
|
|
|
|
<!-- Feedback Error Banner -->
|
|
<view v-else-if="state.errorMessage !== ''" class="stats-feedback">
|
|
<text class="feedback-title">{{ t('error') }}</text>
|
|
<text class="feedback-desc">{{ state.errorMessage }}</text>
|
|
</view>
|
|
|
|
<!-- Stats Scrollable Body -->
|
|
<scroll-view v-else class="stats-body" :scroll-y="true">
|
|
<!-- 2x2 Executive Bento Grid (Polished Precision KPI Cards) -->
|
|
<view class="kpi-grid">
|
|
<!-- KPI 1: Total Leads -->
|
|
<view class="metric-card metric-card-total">
|
|
<view class="metric-header-row">
|
|
<text class="metric-label">{{ t('metricTotal') }}</text>
|
|
<view class="metric-badge metric-badge-brand">
|
|
<text class="metric-badge-text">{{ t('badgeTotal') }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="metric-value text-brand">{{ state.summary.totalLeads }}</text>
|
|
<view class="metric-footer-row">
|
|
<view class="metric-indicator-dot bg-brand"></view>
|
|
<text class="metric-sub">{{ t('stepDescNew') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- KPI 2: Hot Opportunities (Pulse Highlight) -->
|
|
<view class="metric-card metric-card-hot">
|
|
<view class="metric-header-row">
|
|
<text class="metric-label text-hot">{{ t('metricHot') }}</text>
|
|
<view class="metric-badge metric-badge-hot">
|
|
<view class="hot-spark-dot"></view>
|
|
<text class="metric-badge-text text-hot">{{ t('badgeHot') }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="metric-value text-hot">{{ state.summary.hotLeads }}</text>
|
|
<view class="metric-footer-row">
|
|
<view class="metric-indicator-dot bg-hot"></view>
|
|
<text class="metric-sub text-hot">{{ t('stepDescHot') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- KPI 3: Won Deals -->
|
|
<view class="metric-card metric-card-won">
|
|
<view class="metric-header-row">
|
|
<text class="metric-label">{{ t('metricWon') }}</text>
|
|
<view class="metric-badge metric-badge-won">
|
|
<text class="metric-badge-text text-won">{{ t('badgeWon') }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="metric-value text-won">{{ state.summary.wonLeads }}</text>
|
|
<view class="metric-footer-row">
|
|
<view class="metric-indicator-dot bg-won"></view>
|
|
<text class="metric-sub text-won">{{ t('stepDescWon') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- KPI 4: Overall Conversion Rate -->
|
|
<view class="metric-card metric-card-rate">
|
|
<view class="metric-header-row">
|
|
<text class="metric-label">{{ t('metricRate') }}</text>
|
|
<view class="metric-badge metric-badge-rate">
|
|
<text class="metric-badge-text text-brand">{{ t('badgeRate') }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="metric-value text-brand">{{ state.summary.overallRate }}%</text>
|
|
<view class="metric-footer-row">
|
|
<view class="metric-indicator-dot bg-brand"></view>
|
|
<text class="metric-sub">{{ t('stepDescContacted') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Conversion Funnel Section (Fluid Gradient Progress) -->
|
|
<view class="stats-card stats-funnel">
|
|
<view class="card-header-bar">
|
|
<view class="card-title-group">
|
|
<text class="card-title">{{ t('funnelTitle') }}</text>
|
|
<text class="card-title-badge">{{ t('funnelStages') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="funnel-list">
|
|
<view
|
|
v-for="(step, index) in state.funnel"
|
|
:key="step.key"
|
|
class="funnel-step-item"
|
|
>
|
|
<view class="funnel-step-header">
|
|
<view class="funnel-step-identity">
|
|
<text class="funnel-step-seq">0{{ index + 1 }}</text>
|
|
<text class="funnel-step-label">{{ step.label }}</text>
|
|
</view>
|
|
<view class="funnel-step-values">
|
|
<text class="funnel-step-count">{{ step.count }}</text>
|
|
<view class="funnel-step-rate-pill">
|
|
<text class="funnel-step-rate-text">{{ step.rate }}%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="funnel-track">
|
|
<view
|
|
class="funnel-fill"
|
|
:class="'funnel-fill-' + step.key"
|
|
:style="{ width: step.rate + '%' }"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Acquisition Channels Matrix (Multi-Channel Bento Grid) -->
|
|
<view class="stats-card stats-channels">
|
|
<view class="card-header-bar">
|
|
<view class="card-title-group">
|
|
<text class="card-title">{{ t('channelTitle') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="channel-grid">
|
|
<view
|
|
v-for="ch in state.channels"
|
|
:key="ch.source"
|
|
class="channel-card"
|
|
:class="'channel-card-' + ch.source"
|
|
>
|
|
<view class="channel-card-top">
|
|
<view class="channel-tag-wrap">
|
|
<view class="channel-accent-dot" :class="'accent-dot-' + ch.source"></view>
|
|
<text class="channel-name">{{ ch.label }}</text>
|
|
</view>
|
|
<text class="channel-cvr-pill">{{ ch.conversionRate }}% {{ t('badgeRate') }}</text>
|
|
</view>
|
|
|
|
<view class="channel-data-row">
|
|
<view class="channel-data-col">
|
|
<text class="channel-num">{{ ch.leadsCount }}</text>
|
|
<text class="channel-tag">{{ t('metricTotal') }}</text>
|
|
</view>
|
|
<view class="channel-data-divider"></view>
|
|
<view class="channel-data-col">
|
|
<text class="channel-num text-won">{{ ch.wonCount }}</text>
|
|
<text class="channel-tag">{{ t('metricWon') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Intent Distribution Health Section -->
|
|
<view class="stats-card stats-health">
|
|
<view class="card-header-bar">
|
|
<view class="card-title-group">
|
|
<text class="card-title">{{ t('healthTitle') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 3-Tier Multi-Segment Bar -->
|
|
<view class="health-segmented-bar">
|
|
<view class="health-segment-hot" :style="{ flex: healthHotFlex }"></view>
|
|
<view class="health-segment-warm" :style="{ flex: healthWarmFlex }"></view>
|
|
<view class="health-segment-cool" :style="{ flex: healthCoolFlex }"></view>
|
|
</view>
|
|
|
|
<view class="health-legend-row">
|
|
<view class="health-legend-item">
|
|
<view class="legend-dot bg-hot"></view>
|
|
<text class="legend-text">{{ t('tierHot') }}</text>
|
|
</view>
|
|
<view class="health-legend-item">
|
|
<view class="legend-dot bg-warm"></view>
|
|
<text class="legend-text">{{ t('tierWarm') }}</text>
|
|
</view>
|
|
<view class="health-legend-item">
|
|
<view class="legend-dot bg-cool"></view>
|
|
<text class="legend-text">{{ t('tierCool') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { getCurrentLocale, isRtl } from '../../common/locale.uts';
|
|
import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../common/tokens.uts';
|
|
import {
|
|
createStatsState,
|
|
loadStatsData,
|
|
resolveStatsText,
|
|
StatsPeriod,
|
|
} from './useStats.uts';
|
|
|
|
const pageTheme: Record<string, string> = {
|
|
'--oc-primary': utsLightColors.primary,
|
|
'--oc-primary-gradient': utsLightColors.primaryGradient,
|
|
'--oc-primary-soft': utsLightColors.primarySoft,
|
|
'--oc-ai': utsLightColors.ai,
|
|
'--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-radius-pill': utsRadius.pill,
|
|
'--oc-shadow-card': utsTypography.shadowCard,
|
|
'--oc-shadow-cta': utsTypography.shadowCta,
|
|
'--oc-shadow': utsTypography.shadow,
|
|
'--oc-space-4': utsSpacing.space4,
|
|
'--oc-space-8': utsSpacing.space8,
|
|
'--oc-space-12': utsSpacing.space12,
|
|
'--oc-space-16': utsSpacing.space16,
|
|
'--oc-space-20': utsSpacing.space20,
|
|
'--oc-space-24': utsSpacing.space24,
|
|
};
|
|
|
|
const state = reactive(createStatsState());
|
|
const pageTitle = ref(resolveStatsText('title'));
|
|
const pageSubtitle = ref(resolveStatsText('subtitle'));
|
|
const refreshText = ref(resolveStatsText('retry'));
|
|
|
|
const pageRtlClass = computed((): string => {
|
|
return isRtl(getCurrentLocale()) ? 'stats-rtl' : '';
|
|
});
|
|
|
|
/** R31: bar flex from API counts only; zero when empty, never fallback filler */
|
|
const healthHotFlex = computed((): number => {
|
|
return state.summary.hotLeads > 0 ? state.summary.hotLeads : 0;
|
|
});
|
|
|
|
const healthWarmFlex = computed((): number => {
|
|
const warm = state.summary.totalLeads - state.summary.hotLeads - state.summary.wonLeads;
|
|
return warm > 0 ? warm : 0;
|
|
});
|
|
|
|
const healthCoolFlex = computed((): number => {
|
|
return 0;
|
|
});
|
|
|
|
function t(key: string): string {
|
|
return resolveStatsText(key);
|
|
}
|
|
|
|
function changePeriod(period: StatsPeriod): void {
|
|
state.period = period;
|
|
loadStatsData(state);
|
|
}
|
|
|
|
function handleRefresh(): void {
|
|
loadStatsData(state);
|
|
}
|
|
|
|
onLoad(() => {
|
|
loadStatsData(state);
|
|
});
|
|
|
|
onShow(() => {
|
|
loadStatsData(state);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Page Root */
|
|
.stats-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--oc-bg, #F5F8FC);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-rtl {
|
|
direction: rtl;
|
|
}
|
|
|
|
/* Ambient Top Aurora Glow (<8% area) */
|
|
.stats-aurora-glow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 140px;
|
|
background: radial-gradient(circle at 50% -20%, rgba(0, 163, 255, 0.12) 0%, rgba(99, 102, 241, 0.05) 55%, rgba(245, 248, 252, 0) 100%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Header Cockpit */
|
|
.stats-header {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block-start: var(--oc-space-12, 12px);
|
|
padding-block-end: var(--oc-space-12, 12px);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
|
border-bottom: 1px solid var(--oc-border, #E3E7ED);
|
|
flex-shrink: 0;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.cockpit-top-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.live-pill {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-inline: 8px;
|
|
padding-block: 3px;
|
|
background-color: #ECFDF3;
|
|
border: 1px solid #A6F4C5;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.live-pulse-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background-color: #12B76A;
|
|
margin-inline-end: 6px;
|
|
}
|
|
|
|
.live-pill-text {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: #027A48;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.header-refresh-btn {
|
|
min-height: 28px;
|
|
padding-inline: 10px;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: 9999px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.header-refresh-btn:active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.header-refresh-text {
|
|
font-size: 11px;
|
|
color: var(--oc-text-2, #667085);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stats-title-block {
|
|
margin-block-end: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.stats-title {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.stats-subtitle {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-block-start: 3px;
|
|
}
|
|
|
|
/* Period Segmented Track */
|
|
.period-segmented-track {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #EEF2F6;
|
|
border-radius: 9999px;
|
|
padding: 3px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.period-chip {
|
|
flex: 1;
|
|
height: 30px;
|
|
border-radius: 9999px;
|
|
background-color: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.period-chip:active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.period-chip-active {
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.period-chip-text {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.period-chip-active .period-chip-text {
|
|
color: var(--oc-primary, #0B5CFF);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Skeleton Loading */
|
|
.stats-skeleton {
|
|
flex: 1;
|
|
padding: 16px;
|
|
}
|
|
|
|
.skeleton-metric-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.skeleton-card {
|
|
flex: 1;
|
|
height: 84px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
}
|
|
|
|
.skeleton-funnel {
|
|
height: 140px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.skeleton-grid {
|
|
height: 120px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
}
|
|
|
|
/* Feedback Error */
|
|
.stats-feedback {
|
|
flex: 1;
|
|
margin: 24px 16px;
|
|
padding: 24px;
|
|
background-color: var(--oc-surface, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.feedback-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
margin-block-end: 6px;
|
|
}
|
|
|
|
.feedback-desc {
|
|
font-size: 13px;
|
|
color: var(--oc-text-2, #667085);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Body Container */
|
|
.stats-body {
|
|
position: relative;
|
|
z-index: 1;
|
|
flex: 1;
|
|
padding-inline: var(--oc-space-16, 16px);
|
|
padding-block: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
/* 2x2 Bento KPI Grid */
|
|
.kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.metric-card {
|
|
background-color: var(--oc-surface, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
|
|
padding: 12px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 92px;
|
|
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.metric-card:active {
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.metric-card-total {
|
|
background: linear-gradient(150deg, #FFFFFF 0%, #F5F9FF 100%);
|
|
}
|
|
|
|
.metric-card-hot {
|
|
background: linear-gradient(150deg, #FFFFFF 0%, #FFF8F6 100%);
|
|
border-color: #FECDCA;
|
|
}
|
|
|
|
.metric-card-won {
|
|
background: linear-gradient(150deg, #FFFFFF 0%, #F6FEF9 100%);
|
|
border-color: #D1FADF;
|
|
}
|
|
|
|
.metric-card-rate {
|
|
background: linear-gradient(150deg, #FFFFFF 0%, #F8FAFC 100%);
|
|
}
|
|
|
|
.metric-header-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: 4px;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--oc-text-2, #667085);
|
|
}
|
|
|
|
.metric-badge {
|
|
padding-inline: 6px;
|
|
padding-block: 2px;
|
|
border-radius: 9999px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.metric-badge-brand {
|
|
background-color: var(--oc-primary-soft, #EBF5FF);
|
|
}
|
|
|
|
.metric-badge-hot {
|
|
background-color: #FEE4E2;
|
|
}
|
|
|
|
.metric-badge-won {
|
|
background-color: #ECFDF3;
|
|
}
|
|
|
|
.metric-badge-rate {
|
|
background-color: #F2F4F7;
|
|
}
|
|
|
|
.metric-badge-text {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.hot-spark-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 3px;
|
|
background-color: var(--oc-error, #F04438);
|
|
margin-inline-end: 4px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.15;
|
|
margin-block-end: 4px;
|
|
}
|
|
|
|
.text-brand {
|
|
color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.text-hot {
|
|
color: var(--oc-error, #F04438);
|
|
}
|
|
|
|
.text-won {
|
|
color: var(--oc-success, #12B76A);
|
|
}
|
|
|
|
.metric-footer-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.metric-indicator-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 3px;
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
.bg-brand {
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.bg-hot {
|
|
background-color: var(--oc-error, #F04438);
|
|
}
|
|
|
|
.bg-won {
|
|
background-color: var(--oc-success, #12B76A);
|
|
}
|
|
|
|
.bg-warm {
|
|
background-color: var(--oc-warning, #F79009);
|
|
}
|
|
|
|
.bg-cool {
|
|
background-color: #98A2B3;
|
|
}
|
|
|
|
.metric-sub {
|
|
font-size: 11px;
|
|
color: var(--oc-text-2, #667085);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Generic Bento Card */
|
|
.stats-card {
|
|
background-color: var(--oc-surface, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 20px);
|
|
box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
|
|
padding: 14px 16px;
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.card-header-bar {
|
|
margin-block-end: 12px;
|
|
}
|
|
|
|
.card-title-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.card-title-badge {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
background-color: var(--oc-primary-soft, #EBF5FF);
|
|
padding-inline: 7px;
|
|
padding-block: 2px;
|
|
border-radius: 9999px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Funnel Step List */
|
|
.funnel-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.funnel-step-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.funnel-step-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: 6px;
|
|
}
|
|
|
|
.funnel-step-identity {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.funnel-step-seq {
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
background-color: var(--oc-primary-soft, #EBF5FF);
|
|
padding-inline: 5px;
|
|
padding-block: 1px;
|
|
border-radius: 4px;
|
|
margin-inline-end: 8px;
|
|
}
|
|
|
|
.funnel-step-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.funnel-step-values {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.funnel-step-count {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.funnel-step-rate-pill {
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: 9999px;
|
|
padding-inline: 6px;
|
|
padding-block: 1px;
|
|
}
|
|
|
|
.funnel-step-rate-text {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.funnel-track {
|
|
height: 8px;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.funnel-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.funnel-fill-new {
|
|
background: linear-gradient(90deg, #00A3FF 0%, #0B5CFF 100%);
|
|
}
|
|
|
|
.funnel-fill-hot {
|
|
background: linear-gradient(90deg, #FF6B4A 0%, #F04438 100%);
|
|
}
|
|
|
|
.funnel-fill-contacted {
|
|
background: linear-gradient(90deg, #FDB022 0%, #F79009 100%);
|
|
}
|
|
|
|
.funnel-fill-won {
|
|
background: linear-gradient(90deg, #32D583 0%, #12B76A 100%);
|
|
}
|
|
|
|
/* Channel Matrix Grid */
|
|
.channel-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.channel-card {
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: 16px;
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.channel-card:active {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.channel-card-nfc {
|
|
background: linear-gradient(150deg, #FFFFFF 0%, #F5F9FF 100%);
|
|
border-color: #D1E4FF;
|
|
}
|
|
|
|
.channel-card-qr {
|
|
background: linear-gradient(150deg, #FFFFFF 0%, #F4FBFA 100%);
|
|
border-color: #B5EADB;
|
|
}
|
|
|
|
.channel-card-link {
|
|
background: linear-gradient(150deg, #FFFFFF 0%, #F8FAFC 100%);
|
|
border-color: #E2E8F0;
|
|
}
|
|
|
|
.channel-card-ai_chat {
|
|
background: linear-gradient(150deg, #FFFFFF 0%, #F9F7FE 100%);
|
|
border-color: #E0D7FE;
|
|
}
|
|
|
|
.channel-card-top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-block-end: 8px;
|
|
}
|
|
|
|
.channel-tag-wrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.channel-accent-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
.accent-dot-nfc {
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.accent-dot-qr {
|
|
background-color: #0E9384;
|
|
}
|
|
|
|
.accent-dot-link {
|
|
background-color: #475467;
|
|
}
|
|
|
|
.accent-dot-ai_chat {
|
|
background-color: #7F56D9;
|
|
}
|
|
|
|
.channel-name {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
}
|
|
|
|
.channel-cvr-pill {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
}
|
|
|
|
.channel-data-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding-block-start: 4px;
|
|
}
|
|
|
|
.channel-data-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.channel-num {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.channel-tag {
|
|
font-size: 9px;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-block-start: 1px;
|
|
}
|
|
|
|
.channel-data-divider {
|
|
width: 1px;
|
|
height: 20px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
/* Intent Health Section */
|
|
.health-segmented-bar {
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
margin-block-end: 10px;
|
|
}
|
|
|
|
.health-segment-hot {
|
|
background: linear-gradient(90deg, #FF6B4A, #F04438);
|
|
transition: flex 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.health-segment-warm {
|
|
background: linear-gradient(90deg, #FDB022, #F79009);
|
|
transition: flex 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.health-segment-cool {
|
|
background-color: #D0D5DD;
|
|
transition: flex 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.health-legend-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.health-legend-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.legend-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
.legend-text {
|
|
font-size: 11px;
|
|
color: var(--oc-text-2, #667085);
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
</style>
|