/* 后端返回的 HTML 富文本内容样式 */ .rich-html-content { font-size: 14px; line-height: 1.6; 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: 16px 0 8px; color: var(--van-text-color); font-weight: 600; line-height: 1.25; } .rich-html-content h1 { font-size: 1.5em; text-align: center; border-bottom: 1px solid var(--van-border-color); padding-bottom: 10px; } .rich-html-content h2 { font-size: 1.25em; margin-top: 20px; } .rich-html-content h3 { font-size: 1.1em; border-left: 4px solid #1989fa; padding-left: 10px; margin-top: 15px; padding-top: 4px; padding-bottom: 4px; } .rich-html-content p { margin: 12px 0; } .rich-html-content ul, .rich-html-content ol { padding-left: 20px; margin: 14px 0; } .rich-html-content li { margin: 8px 0; } .rich-html-content strong { font-weight: 600; } /* 表格样式优化 - 移动端适配滑动 */ .rich-html-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 16px 0; background: var(--van-background-2); border-radius: 4px; border: 1px solid var(--van-border-color); -webkit-overflow-scrolling: touch; } .rich-html-content th, .rich-html-content td { padding: 10px 12px; text-align: left; border: 1px solid var(--van-border-color); min-width: 80px; /* 防止内容过于拥挤 */ } /* 针对第一列预算项增加最小宽度 */ .rich-html-content td:first-child, .rich-html-content th:first-child { min-width: 100px; position: sticky; left: 0; background: inherit; z-index: 1; } .rich-html-content th { background: var(--van-gray-1); color: var(--van-text-color); font-weight: 600; font-size: 13px; white-space: nowrap; } /* 业务特定样式:收入、支出、高亮 */ .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, .rich-html-content th:first-child { background-color: #1a1a1a; } .rich-html-content th:first-child { background-color: #242424; } }