533 行
9.3 KiB
Plaintext
533 行
9.3 KiB
Plaintext
.page {
|
|
min-height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
font-family: var(--omni-font-family);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--omni-space-16);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--omni-space-24);
|
|
}
|
|
|
|
.headerInfo {
|
|
flex: 1;
|
|
min-width: 280px;
|
|
}
|
|
|
|
.titleRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--omni-space-12);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
color: var(--omni-color-text);
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.liveIndicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--omni-space-8);
|
|
padding: 4px 8px;
|
|
border-radius: var(--omni-radius-button);
|
|
background: var(--omni-color-primary-soft);
|
|
border: 1px solid rgba(11, 92, 255, 0.15);
|
|
}
|
|
|
|
.pulseDot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: var(--omni-color-primary);
|
|
animation: nfcPulse 400ms cubic-bezier(0.2, 0.8, 0.2, 1) 1;
|
|
}
|
|
|
|
@keyframes nfcPulse {
|
|
0% {
|
|
transform: scale(0.8);
|
|
box-shadow: 0 0 0 0 rgba(11, 92, 255, 0.4);
|
|
}
|
|
70% {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 0 0 6px rgba(11, 92, 255, 0);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 0 rgba(11, 92, 255, 0);
|
|
}
|
|
}
|
|
|
|
.liveText {
|
|
color: var(--omni-color-primary);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
}
|
|
|
|
.subtitle {
|
|
display: block;
|
|
margin-top: var(--omni-space-8);
|
|
color: var(--omni-color-text-2);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.welcome {
|
|
display: block;
|
|
margin-top: var(--omni-space-4);
|
|
color: var(--omni-color-text);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.primaryCta {
|
|
height: 40px;
|
|
border-radius: var(--omni-radius-button);
|
|
background-color: var(--omni-color-primary);
|
|
font-weight: 500;
|
|
box-shadow: 0 1px 2px rgba(11, 92, 255, 0.16);
|
|
}
|
|
|
|
:global(.arco-card).kpiCard,
|
|
:global(.arco-card).panel {
|
|
border: 1px solid var(--omni-color-border);
|
|
border-radius: var(--omni-radius-card);
|
|
background: var(--omni-color-bg);
|
|
box-shadow: var(--omni-shadow);
|
|
transition: border-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.kpiCard:hover {
|
|
border-color: rgba(11, 92, 255, 0.3);
|
|
}
|
|
|
|
.kpiHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--omni-space-8);
|
|
}
|
|
|
|
.kpiTitle {
|
|
color: var(--omni-color-text-2);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.kpiIconWrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
background: var(--omni-color-surface);
|
|
color: var(--omni-color-primary);
|
|
}
|
|
|
|
.kpiIcon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.kpiSubText {
|
|
margin-top: var(--omni-space-8);
|
|
font-size: 12px;
|
|
color: var(--omni-color-text-2);
|
|
}
|
|
|
|
.delta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--omni-space-4);
|
|
margin-top: var(--omni-space-8);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: var(--omni-color-text-2);
|
|
}
|
|
|
|
.deltaIcon {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.deltaUp {
|
|
color: var(--omni-color-success);
|
|
}
|
|
|
|
.deltaDown {
|
|
color: var(--omni-color-error);
|
|
}
|
|
|
|
/* 漏斗与雷达卡片 */
|
|
.funnelCard {
|
|
margin-top: var(--omni-space-16);
|
|
}
|
|
|
|
.funnelContainer {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--omni-space-16);
|
|
padding: var(--omni-space-8) 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.funnelContainer {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.funnelStep {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.funnelHeader {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--omni-space-4);
|
|
}
|
|
|
|
.funnelLabel {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--omni-color-text-2);
|
|
}
|
|
|
|
.funnelRate {
|
|
font-size: 12px;
|
|
color: var(--omni-color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.funnelValue {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--omni-color-text);
|
|
margin-bottom: var(--omni-space-8);
|
|
}
|
|
|
|
.funnelBarWrapper {
|
|
height: 6px;
|
|
background: rgba(11, 92, 255, 0.08);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.funnelBar {
|
|
height: 100%;
|
|
background: var(--omni-color-primary);
|
|
border-radius: 3px;
|
|
transition: width 300ms ease;
|
|
}
|
|
|
|
.funnelBarLead {
|
|
background: var(--omni-color-success);
|
|
}
|
|
|
|
.funnelMeta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: var(--omni-space-4);
|
|
font-size: 11px;
|
|
color: var(--omni-color-text-2);
|
|
}
|
|
|
|
.radarCard {
|
|
margin-top: var(--omni-space-16);
|
|
}
|
|
|
|
.panelHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.timelineList {
|
|
padding-top: var(--omni-space-8);
|
|
}
|
|
|
|
.feedMeta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--omni-space-8);
|
|
}
|
|
|
|
.stayTime {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.feedExtra {
|
|
margin-top: var(--omni-space-4);
|
|
color: var(--omni-color-text-2);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.empty {
|
|
padding: var(--omni-space-24) 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.emptyText {
|
|
margin: 0 0 var(--omni-space-12);
|
|
color: var(--omni-color-text-2);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ========================================================
|
|
右侧出海运营快捷中枢 (Command Hub)
|
|
======================================================== */
|
|
.hubContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--omni-space-16);
|
|
}
|
|
|
|
/* 渠道占比 */
|
|
.channelRow {
|
|
margin-bottom: var(--omni-space-12);
|
|
}
|
|
|
|
.channelRow:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.channelMeta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--omni-space-8);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.channelName {
|
|
color: var(--omni-color-text);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.channelPercent {
|
|
color: var(--omni-color-text-2);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 8 大核心快捷入口网格 (2列) */
|
|
.navGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--omni-space-12);
|
|
}
|
|
|
|
.navCard {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--omni-space-12);
|
|
padding: 12px;
|
|
border: 1px solid var(--omni-color-border);
|
|
border-radius: 12px;
|
|
background: var(--omni-color-surface);
|
|
text-align: start;
|
|
cursor: pointer;
|
|
transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.navCard:hover {
|
|
background: var(--omni-color-bg);
|
|
border-color: var(--omni-color-primary);
|
|
}
|
|
|
|
.navCard:focus-visible {
|
|
outline: 2px solid var(--omni-color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.navIconBox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 8px;
|
|
background: var(--omni-color-bg);
|
|
color: var(--omni-color-primary);
|
|
flex-shrink: 0;
|
|
border: 1px solid var(--omni-color-border);
|
|
}
|
|
|
|
.navIcon {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.navTextBox {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.navTitle {
|
|
display: block;
|
|
color: var(--omni-color-text);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.navSub {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: var(--omni-color-text-2);
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* 效率工具箱 */
|
|
.toolboxList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--omni-space-12);
|
|
}
|
|
|
|
.shortcut {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--omni-space-12);
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--omni-color-border);
|
|
border-radius: 12px;
|
|
background: var(--omni-color-surface);
|
|
text-align: start;
|
|
cursor: pointer;
|
|
transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.shortcut:hover {
|
|
background: var(--omni-color-bg);
|
|
border-color: var(--omni-color-primary);
|
|
}
|
|
|
|
.shortcut:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.shortcut:focus-visible {
|
|
outline: 2px solid var(--omni-color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.shortcutIconBox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 8px;
|
|
background: var(--omni-color-bg);
|
|
color: var(--omni-color-primary);
|
|
flex-shrink: 0;
|
|
border: 1px solid var(--omni-color-border);
|
|
}
|
|
|
|
.toolIcon {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.shortcutContent {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.shortcutLabel {
|
|
display: block;
|
|
color: var(--omni-color-text);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.shortcutHint {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: var(--omni-color-text-2);
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 待办预警卡片 */
|
|
.alertPanel {
|
|
border-color: var(--omni-color-border) !important;
|
|
}
|
|
|
|
.alertContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--omni-space-12);
|
|
}
|
|
|
|
.alertItem {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--omni-space-8);
|
|
}
|
|
|
|
.alertDot {
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-top: 6px;
|
|
border-radius: 50%;
|
|
background-color: var(--omni-color-warning, #F79009);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.alertText {
|
|
color: var(--omni-color-text);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.alertActionBtn {
|
|
align-self: flex-start;
|
|
border-radius: var(--omni-radius-button);
|
|
color: var(--omni-color-text);
|
|
border-color: var(--omni-color-border);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.alertActionBtn:hover {
|
|
border-color: var(--omni-color-primary);
|
|
color: var(--omni-color-primary);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.shortcut:hover,
|
|
.navCard:hover {
|
|
transform: none;
|
|
}
|
|
.pulseDot {
|
|
animation: none;
|
|
}
|
|
}
|