/* 后端返回的 HTML 富文本内容样式 */ .rich-html-content { font-size: 13px; line-height: 1.5; color: var(--van-text-color); white-space: normal; /* 重置可能存在的 pre-wrap */ word-break: break-all; } .rich-html-content h1, .rich-html-content h2, .rich-html-content h3 { margin: 10px 0 4px; color: var(--van-text-color); font-weight: 600; line-height: 1.2; } .rich-html-content h1 { font-size: 1.7em; text-align: center; border-bottom: 1px solid var(--van-border-color); padding-bottom: 6px; } .rich-html-content h2 { font-size: 1.5em; margin-top: 14px; } .rich-html-content h3 { font-size: 1.2em; border-left: 3px solid #1989fa; padding-left: 8px; margin-top: 10px; padding-top: 2px; padding-bottom: 2px; } .rich-html-content p { margin: 6px 0; } .rich-html-content ul, .rich-html-content ol { padding-left: 18px; margin: 8px 0; } .rich-html-content li { margin: 4px 0; } .rich-html-content strong { font-weight: 600; } /* 表格样式优化 - 确保表格独立滚动且列对齐 */ .rich-html-content table { display: block; width: 100%; border-collapse: collapse; margin: 8px 0; background: var(--van-background-2); border-radius: 4px; border: none; overflow-x: auto; /* 仅表格内部横向滚动 */ -webkit-overflow-scrolling: touch; overflow-y: auto; max-height: 35vh; } .rich-html-content thead, .rich-html-content tbody { display: table; width: 100%; table-layout: fixed; /* 核心:强制列宽分配逻辑一致 */ border-collapse: collapse; } .rich-html-content tr { display: table-row; } .rich-html-content th, .rich-html-content td { display: table-cell; padding: 8px; text-align: left; border: none; border-bottom: 1px solid var(--van-border-color-light); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } .rich-html-content th { background: var(--van-gray-1); color: var(--van-text-color); font-weight: 600; } /* 通用列宽规则:第一列占 30%,其他列自动平分剩余 70% */ .rich-html-content th:first-child, .rich-html-content td:first-child { width: 30%; } /* 业务特定样式:收入、支出、高亮 */ .rich-html-content .income-value { color: #07c160 !important; font-weight: 600; } .rich-html-content .expense-value { color: #ee0a24 !important; font-weight: 600; } .rich-html-content .highlight { background-color: #fffbe6; color: #ed6a0c; padding: 2px 6px; border-radius: 4px; font-weight: bold; border: 1px solid #ffe58f; margin: 0 2px; } /* 暗色模式适配 */ @media (prefers-color-scheme: dark) { .rich-html-content .highlight { background-color: rgba(255, 243, 205, 0.2); color: #ffc107; border-color: rgba(255, 229, 143, 0.3); } .rich-html-content table { background: #1a1a1a; } .rich-html-content th { background-color: #242424; color: #f5f5f5; } .rich-html-content td:first-child { background-color: #1a1a1a; } .rich-html-content th:first-child { background-color: #242424; } .rich-html-content th, .rich-html-content td { border-bottom: 1px solid #2c2c2c; } }