/* ========================================================== * 山水易图 H5 —— 原始报告内容网格化排版 * 作用于 .original-content 内的后端生成 HTML， * 使其呈现卡片/网格/表格化的规整版式。 * 部署位置：/www/wwwroot/ssdtmap.cehuio.com/h5/static/report-grid.css * 由 index.html 引入。 * ========================================================== */ /* ---------- 容器与分节 ---------- */ .original-content { padding: 2px 2px 12px; word-break: break-word; } .original-content .report-section { background: #fff; border: 1px solid #e4e8ee; border-radius: 14px; padding: 14px 12px; margin: 0 0 12px; box-shadow: 0 2px 8px rgba(30, 41, 59, 0.04); } .original-content .report-section h2, .original-content .report-section h3, .original-content h2, .original-content h3 { font-size: 16px; font-weight: 700; color: #16324f; margin: 0 0 12px; padding: 0 0 8px 10px; border-bottom: 1px solid #edf0f4; border-left: 4px solid #2f6db3; line-height: 1.35; } .original-content h1 { font-size: 18px; font-weight: 700; color: #16324f; text-align: center; margin: 0 0 12px; } .original-content footer { font-size: 12px; color: #90979f; text-align: center; margin-top: 8px; line-height: 1.6; } /* ---------- 报告基本信息：键值网格 ---------- */ .original-content .report-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .original-content .report-info-grid p { display: flex; flex-direction: column; gap: 2px; margin: 0; background: #f7f9fc; border: 1px solid #e4e8ee; border-radius: 10px; padding: 8px 10px; } .original-content .report-info-grid p b { font-size: 11px; font-weight: 600; color: #7a8698; letter-spacing: 0.5px; } .original-content .report-info-grid p span { font-size: 13px; color: #1f2a37; font-weight: 500; word-break: break-all; } /* 任务编号/地址等长值独占整行 */ .original-content .report-info-grid p:nth-child(2), .original-content .report-info-grid p:nth-child(3) { grid-column: 1 / -1; } /* ---------- 综合评分：分数主卡 ---------- */ .original-content .score-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px 16px 16px; margin: 0 0 12px; border-radius: 12px; background: linear-gradient(135deg, #16324f 0%, #2f6db3 100%); } .original-content .score-hero strong { font-size: 40px; font-weight: 800; line-height: 1.1; color: #fff; } .original-content .score-hero span { font-size: 13px; color: #eaf2fb; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 3px 14px; } /* ---------- 标签行 ---------- */ .original-content .report-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .original-content .report-pill-row span { font-size: 12px; color: #2f6db3; background: #eaf3fd; border: 1px solid #cfe3f6; border-radius: 999px; padding: 4px 12px; line-height: 1.4; } /* ---------- 要点列表：条目化 ---------- */ .original-content ul.report-bullet-list { list-style: none; margin: 0 0 10px; padding: 0; } .original-content ul.report-bullet-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px; padding: 9px 12px; background: #f7f9fc; border: 1px solid #e4e8ee; border-radius: 10px; font-size: 13px; } .original-content ul.report-bullet-list li:last-child { margin-bottom: 0; } .original-content ul.report-bullet-list li b { color: #33475b; font-weight: 600; } .original-content ul.report-bullet-list li span { color: #1f2a37; font-weight: 600; text-align: right; } /* ---------- 段落 ---------- */ .original-content .report-paragraph { font-size: 13px; line-height: 1.8; color: #4a5568; margin: 10px 0 0; padding: 10px 12px; background: #f7f9fc; border: 1px solid #e9edf2; border-radius: 10px; } .original-content blockquote { margin: 10px 0 0; padding: 8px 12px; font-size: 13px; line-height: 1.8; color: #64748b; background: #f7f9fc; border-left: 3px solid #c3d3e4; border-radius: 6px; } /* ---------- 评分条目：名称/得分/进度条 三列网格 ---------- */ .original-content .report-metric-list { display: flex; flex-direction: column; gap: 10px; } .original-content .report-metric-row { display: grid; grid-template-columns: 92px 66px 1fr; gap: 8px; align-items: center; padding: 10px; background: #f7f9fc; border: 1px solid #e4e8ee; border-radius: 10px; } .original-content .report-metric-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .original-content .report-metric-row > div b { font-size: 13px; color: #1f2a37; font-weight: 600; } .original-content .report-metric-row > div span { font-size: 11px; color: #7a8698; } .original-content .report-metric-row strong { font-size: 16px; font-weight: 700; color: #2f6db3; text-align: center; } .original-content .report-metric-row strong small { font-size: 11px; font-weight: 500; color: #93a1b3; } .original-content .report-metric-row i { display: block; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; font-style: normal; } .original-content .report-metric-row i em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f6db3, #4a90d9); } .original-content .report-metric-row.level-high i em { background: linear-gradient(90deg, #2e9e63, #4cc38a); } .original-content .report-metric-row.level-low i em { background: linear-gradient(90deg, #d97b36, #f0a04b); } /* ---------- 维度详评：标题行 ---------- */ .original-content .report-detail-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #edf0f4; } .original-content .report-detail-title h3 { margin: 0; padding: 0 0 0 10px; border-bottom: none; border-left: 4px solid #2f6db3; } .original-content .report-detail-title span { font-size: 12px; color: #7a8698; } .original-content .report-detail-title em { font-style: normal; font-size: 12px; color: #93a1b3; } /* ---------- 维度详评：卡片网格 ---------- */ .original-content .report-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .original-content article.report-detail-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #f7f9fc; border: 1px solid #e4e8ee; border-left-width: 4px; border-radius: 10px; } .original-content article.report-detail-card.level-high { border-left-color: #2e9e63; } .original-content article.report-detail-card.level-low { border-left-color: #d97b36; } .original-content article.report-detail-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed #e0e6ee; } .original-content article.report-detail-card header b { font-size: 14px; color: #16324f; } .original-content article.report-detail-card header strong { font-size: 12px; color: #2f6db3; white-space: nowrap; } .original-content article.report-detail-card.level-low header strong { color: #d97b36; } .original-content article.report-detail-card p { margin: 0; font-size: 12px; line-height: 1.75; color: #4a5568; } .original-content article.report-detail-card p span { display: block; font-size: 11px; font-weight: 700; color: #2f6db3; margin-bottom: 2px; } .original-content article.report-detail-card p.report-detail-simple span { color: #2e9e63; } .original-content .highlight { background: rgba(255, 214, 102, 0.35); padding: 0 2px; border-radius: 3px; } /* ---------- 罗盘结论：四项等分网格 ---------- */ .original-content .report-compass-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; padding: 10px; background: linear-gradient(135deg, #f2f7fd, #eaf3fd); border: 1px solid #cfe3f6; border-radius: 12px; text-align: center; } .original-content .report-compass-summary strong { display: block; font-size: 18px; font-weight: 800; color: #16324f; line-height: 1.2; } .original-content .report-compass-summary span { display: block; font-size: 12px; font-weight: 600; color: #2f6db3; margin-top: 2px; } .original-content .report-compass-summary em { display: block; font-style: normal; font-size: 11px; color: #64748b; margin-top: 2px; } .original-content .report-compass-summary b { display: block; font-size: 12px; font-weight: 700; color: #d97b36; margin-top: 2px; } /* ---------- 内嵌报告 HTML（表格等） ---------- */ .original-content .report-embedded-html { overflow: hidden; } .original-content .report-embedded-html > div { border-radius: 10px; overflow: hidden; } .original-content table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; overflow-wrap: break-word; } .original-content th, .original-content td { border: 1px solid #d7dee8; padding: 7px 6px; vertical-align: middle; line-height: 1.6; overflow-wrap: break-word; } .original-content th { background: #f5f0e6; color: #333; font-weight: 600; } .original-content img { max-width: 100%; height: auto; }