/* 后端返回的 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; overflow-y: auto; max-height: 50vh; -webkit-overflow-scrolling: touch; } .rich-html-content th, .rich-html-content td { padding: 6px 8px; text-align: left; border: none; border-bottom: 1px solid var(--van-border-color-light); min-width: 70px; /* 防止内容过于拥挤 */ font-size: 12px; white-space: nowrap; /* 防止文字换行 */ flex: 1; /* 让单元格按比例撑满宽度 */ } /* 表格行确保100%撑满 */ .rich-html-content tbody, .rich-html-content thead { display: table; width: 100%; table-layout: auto; } /* 针对第一列预算项增加最小宽度 - 确保在滑动时有背景遮挡 */ .rich-html-content td:first-child { min-width: 80px; position: sticky; left: 0; background: var(--van-background-2); z-index: 1; } .rich-html-content th:first-child { min-width: 80px; position: sticky; left: 0; background: var(--van-gray-1); z-index: 1; } .rich-html-content th { background: var(--van-gray-1); color: var(--van-text-color); font-weight: 600; font-size: 12px; 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 { 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; } }