223 lines
3.5 KiB
CSS
223 lines
3.5 KiB
CSS
/* 地区洞察（RegionsView）专属样式，类名前缀 sbi-rg-；颜色/圆角一律取 social-v2.css 的 token。 */
|
||
|
||
/* ---------- 概要条 ---------- */
|
||
|
||
.sbi-rg-summary {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.sbi-rg-summary-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding: 16px 18px;
|
||
}
|
||
|
||
.sbi-rg-summary-label {
|
||
color: var(--sbi-text-2);
|
||
font-size: 12.5px;
|
||
font-weight: 640;
|
||
}
|
||
|
||
.sbi-rg-summary-value {
|
||
color: var(--sbi-text);
|
||
font-size: 24px;
|
||
font-weight: 760;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.sbi-rg-summary-sub {
|
||
color: var(--sbi-text-3);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ---------- 世界地图卡 ---------- */
|
||
|
||
.sbi-rg-map-card {
|
||
display: flex;
|
||
height: 380px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sbi-rg-map-body {
|
||
flex: 1;
|
||
min-height: 0;
|
||
padding: 6px 12px 12px;
|
||
}
|
||
|
||
.sbi-rg-map-body .sbi-empty {
|
||
height: 100%;
|
||
place-content: center;
|
||
}
|
||
|
||
.sbi-rg-map-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* ---------- 区域卡片网格 ---------- */
|
||
|
||
.sbi-rg-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.sbi-rg-region-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
padding: 16px 18px;
|
||
}
|
||
|
||
.sbi-rg-region-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sbi-rg-region-name {
|
||
overflow: hidden;
|
||
font-size: 14.5px;
|
||
font-weight: 720;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sbi-rg-app-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--sbi-text-2);
|
||
font-size: 12px;
|
||
font-weight: 640;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sbi-rg-region-head .sbi-rg-app-tag {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.sbi-rg-app-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
flex: none;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.sbi-rg-region-money {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.sbi-rg-region-money small {
|
||
color: var(--sbi-text-3);
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.sbi-rg-region-money strong {
|
||
font-size: 22px;
|
||
font-weight: 760;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.sbi-rg-region-metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 8px;
|
||
}
|
||
|
||
.sbi-rg-region-metric {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.sbi-rg-region-metric small {
|
||
color: var(--sbi-text-3);
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.sbi-rg-region-metric span {
|
||
font-size: 13.5px;
|
||
font-weight: 700;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.sbi-rg-share {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.sbi-rg-share-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: var(--sbi-text-3);
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.sbi-rg-share-track {
|
||
display: block;
|
||
height: 6px;
|
||
overflow: hidden;
|
||
border-radius: 999px;
|
||
background: var(--sbi-bg);
|
||
}
|
||
|
||
.sbi-rg-share-fill {
|
||
display: block;
|
||
height: 100%;
|
||
border-radius: 999px;
|
||
background: var(--sbi-accent-grad);
|
||
transition: width 200ms ease;
|
||
}
|
||
|
||
/* ---------- 下钻表 ---------- */
|
||
|
||
.sbi-rg-table-card .sbi-table-scroll {
|
||
max-height: 540px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.sbi-rg-row {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sbi-rg-region-cell {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.sbi-rg-caret {
|
||
display: inline-block;
|
||
width: 14px;
|
||
color: var(--sbi-text-3);
|
||
text-align: center;
|
||
transition: transform 120ms ease;
|
||
}
|
||
|
||
.sbi-rg-caret.is-open {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.sbi-rg-child td {
|
||
background: var(--sbi-bg);
|
||
color: var(--sbi-text-2);
|
||
}
|
||
|
||
.sbi-rg-child-name {
|
||
display: inline-block;
|
||
padding-left: 26px;
|
||
}
|
||
|
||
.sbi-rg-child-app {
|
||
color: var(--sbi-text-3);
|
||
}
|