优化页面字体渲染与图例对齐
- 全局开启文字抗锯齿,行高舒展至 1.55,中文显示更精致 - 表头/eyebrow 字距从 0.14em/0.06em 收到 0.02-0.04em,去掉松散感 - 表头与统计卡等字号微调(11px→11.5px),弱化文字发虚 - 总走势图例改为 flex 布局、圆点固定尺寸,与文字垂直居中 - 用户走势 ECharts 图例改为圆形图标、8px 尺寸,圆点与文字对齐
This commit is contained in:
@@ -327,20 +327,24 @@ onBeforeUnmount(() => {
|
||||
margin-top: 2px;
|
||||
color: var(--faint);
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tt-legend {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-right: 4px;
|
||||
gap: 5px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tt-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
flex: 0 0 8px;
|
||||
}
|
||||
|
||||
.tt-dot.token {
|
||||
|
||||
@@ -29,10 +29,11 @@ const option = computed<echarts.EChartsCoreOption>(() => ({
|
||||
data: ['Token', '成本'],
|
||||
top: 2,
|
||||
right: 6,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 12,
|
||||
textStyle: { color: '#5b6575', fontSize: 11 },
|
||||
icon: 'circle',
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
itemGap: 14,
|
||||
textStyle: { color: '#5b6575', fontSize: 11, lineHeight: 12 },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
||||
@@ -49,6 +49,18 @@ body,
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* 中文渲染精细化:抗锯齿 + 舒展行高(浏览器默认行高对中文偏挤) */
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.55;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
@@ -89,9 +101,9 @@ button {
|
||||
|
||||
.eyebrow {
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.14em;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
@@ -230,14 +242,16 @@ h1 {
|
||||
|
||||
.stat .k {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-size: 12.5px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.stat .v {
|
||||
margin-top: 8px;
|
||||
margin-top: 7px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat .s {
|
||||
@@ -342,11 +356,12 @@ table.rank > tbody > tr.user-row > td {
|
||||
padding: 11px 14px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
table.rank > thead > tr > th {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--faint);
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--line);
|
||||
@@ -592,8 +607,8 @@ table.rank > tbody > tr.user-row > td.time-col {
|
||||
|
||||
.model-table th {
|
||||
color: var(--faint);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 0.02em;
|
||||
text-align: center;
|
||||
background: var(--bg-head);
|
||||
white-space: nowrap;
|
||||
@@ -631,7 +646,7 @@ table.rank > tbody > tr.user-row > td.time-col {
|
||||
}
|
||||
|
||||
.avail {
|
||||
font-size: 11px;
|
||||
font-size: 11.5px;
|
||||
padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
@@ -989,7 +1004,7 @@ table.rank > tbody > tr.user-row > td.time-col {
|
||||
.window-recover {
|
||||
margin-left: auto;
|
||||
color: var(--faint);
|
||||
font-size: 11px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.window-bar {
|
||||
|
||||
Reference in New Issue
Block a user