feat: 添加滚动条样式和优化表格布局
This commit is contained in:
hzm
@@ -345,6 +345,7 @@ export default function DcaModal({ fund, plan, onClose, onConfirm }) {
|
||||
扣款日 <span style={{ color: 'var(--danger)' }}>*</span>
|
||||
</label>
|
||||
<div
|
||||
className="scrollbar-y-styled"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
|
||||
@@ -53,7 +53,7 @@ body::before {
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1120px;
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
@@ -644,6 +644,13 @@ input[type="number"] {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* 不需要 hover 高亮的图标按钮（例如 PC 表格模式中的“编辑持仓”） */
|
||||
.icon-button.no-hover:hover {
|
||||
color: inherit;
|
||||
transform: none;
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.icon-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -721,19 +728,72 @@ input[type="number"] {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
/* 横向滚动条样式与项目整体规范一致：深色背景、边框色、圆角、hover 高亮 */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) var(--bg);
|
||||
}
|
||||
|
||||
.table-scroll-area::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.table-scroll-area::-webkit-scrollbar-track {
|
||||
background: var(--bg);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.table-scroll-area::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.table-scroll-area::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.table-scroll-area::-webkit-scrollbar-thumb:active {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* 纵向滚动条通用样式（与项目整体规范一致，供弹窗、列表等使用） */
|
||||
.scrollbar-y-styled {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) var(--bg);
|
||||
}
|
||||
|
||||
.scrollbar-y-styled::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-y-styled::-webkit-scrollbar-track {
|
||||
background: var(--bg);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-y-styled::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-y-styled::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.scrollbar-y-styled::-webkit-scrollbar-thumb:active {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* 固定像素列宽，避免初始在视口外的列滚入后布局错误、内容不展示；不依赖 fr/内容测量 */
|
||||
.table-scroll-area-inner {
|
||||
width: 1292px;
|
||||
/*min-width: 1192px;*/
|
||||
/*width: 1192px;*/
|
||||
min-width: 900px;
|
||||
}
|
||||
|
||||
/* 基金名称 净值 涨跌幅 估值涨跌幅 估值时间 持仓金额 当日收益 持有收益（三列同宽） */
|
||||
.table-header-row-scroll,
|
||||
.table-row-scroll {
|
||||
display: grid;
|
||||
grid-template-columns: 220px 100px 100px 100px 100px 140px 140px 140px;
|
||||
grid-template-columns: 220px 100px 100px 100px 140px 140px 140px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
@@ -832,7 +892,7 @@ input[type="number"] {
|
||||
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 1.2fr 1.2fr;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 1.2fr;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 24px !important;
|
||||
@@ -850,7 +910,7 @@ input[type="number"] {
|
||||
|
||||
.table-header-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 1.2fr 1.2fr;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 1.2fr;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
||||
30
app/page.jsx
30
app/page.jsx
@@ -3647,9 +3647,8 @@ export default function HomePage() {
|
||||
<div className="table-header-row table-header-row-scroll">
|
||||
<div className="table-header-cell">基金名称</div>
|
||||
<div className="table-header-cell text-right">净值/估值</div>
|
||||
<div className="table-header-cell text-right">涨跌幅</div>
|
||||
<div className="table-header-cell text-right">昨日涨跌幅</div>
|
||||
<div className="table-header-cell text-right">估值涨跌幅</div>
|
||||
<div className="table-header-cell text-right">估值时间</div>
|
||||
<div className="table-header-cell text-right">持仓金额</div>
|
||||
<div className="table-header-cell text-right">当日收益</div>
|
||||
<div className="table-header-cell text-right">持有收益</div>
|
||||
@@ -3695,17 +3694,24 @@ export default function HomePage() {
|
||||
);
|
||||
})()}
|
||||
<div className="table-cell text-right change-cell">
|
||||
<span className={f.zzl > 0 ? 'up' : f.zzl < 0 ? 'down' : ''} style={{ fontWeight: 700 }}>
|
||||
{f.zzl != null && f.zzl !== '' ? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%` : '—'}
|
||||
</span>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
|
||||
<span className={f.zzl > 0 ? 'up' : f.zzl < 0 ? 'down' : ''} style={{ fontWeight: 700 }}>
|
||||
{f.zzl != null && f.zzl !== '' ? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%` : '—'}
|
||||
</span>
|
||||
<span className="muted" style={{ fontSize: '12px' }}>
|
||||
{f.jzrq || '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-cell text-right est-change-cell">
|
||||
<span className={f.noValuation ? 'muted' : (f.estPricedCoverage > 0.05 ? (f.estGszzl > 0 ? 'up' : f.estGszzl < 0 ? 'down' : '') : (Number(f.gszzl) > 0 ? 'up' : Number(f.gszzl) < 0 ? 'down' : ''))} style={{ fontWeight: 700 }}>
|
||||
{f.noValuation ? '—' : (f.estPricedCoverage > 0.05 ? (f.estGszzl != null ? `${f.estGszzl > 0 ? '+' : ''}${Number(f.estGszzl).toFixed(2)}%` : '—') : (isNumber(f.gszzl) ? `${f.gszzl > 0 ? '+' : ''}${Number(f.gszzl).toFixed(2)}%` : (f.gszzl ?? '—')))}
|
||||
</span>
|
||||
</div>
|
||||
<div className="table-cell text-right time-cell">
|
||||
<span className="muted" style={{ fontSize: '12px' }}>{f.noValuation ? (f.jzrq || '-') : (f.gztime || f.time || '-')}</span>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
|
||||
<span className={f.noValuation ? 'muted' : (f.estPricedCoverage > 0.05 ? (f.estGszzl > 0 ? 'up' : f.estGszzl < 0 ? 'down' : '') : (Number(f.gszzl) > 0 ? 'up' : Number(f.gszzl) < 0 ? 'down' : ''))} style={{ fontWeight: 700 }}>
|
||||
{f.noValuation ? '—' : (f.estPricedCoverage > 0.05 ? (f.estGszzl != null ? `${f.estGszzl > 0 ? '+' : ''}${Number(f.estGszzl).toFixed(2)}%` : '—') : (isNumber(f.gszzl) ? `${f.gszzl > 0 ? '+' : ''}${Number(f.gszzl).toFixed(2)}%` : (f.gszzl ?? '—')))}
|
||||
</span>
|
||||
<span className="muted" style={{ fontSize: '12px' }}>
|
||||
{f.noValuation ? (f.jzrq || '-') : (f.gztime || f.time || '-')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{(() => {
|
||||
const holding = holdings[f.code];
|
||||
@@ -3721,7 +3727,7 @@ export default function HomePage() {
|
||||
return (
|
||||
<div className="table-cell text-right holding-amount-cell" title="点击设置持仓" onClick={(e) => { e.stopPropagation(); setActionModal({ open: true, fund: f }); }}>
|
||||
<span style={{ fontWeight: 700, marginRight: 6 }}>¥{amount.toFixed(2)}</span>
|
||||
<button className="icon-button" onClick={(e) => { e.stopPropagation(); setActionModal({ open: true, fund: f }); }} title="编辑持仓" style={{ border: 'none', width: '28px', height: '28px', marginLeft: -6 }}>
|
||||
<button className="icon-button no-hover" onClick={(e) => { e.stopPropagation(); setActionModal({ open: true, fund: f }); }} title="编辑持仓" style={{ border: 'none', width: '28px', height: '28px', marginLeft: -6 }}>
|
||||
<SettingsIcon width="14" height="14" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user