jyx
/
dcjxb.microservice


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>{{reportTitle}}</title>
    <style>
        @page {
            size: A4;
            margin: 0;
        }

        body {
            margin: 0;
            padding: 0;
            background: #fff;
            color: #263241;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-size: 14px;
            line-height: 1.72;
        }

        .report-container {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            border: 1px solid transparent;
            border-radius: 14px;
            padding: 32px;
        }

        .report-title {
            margin: 0 0 8px;
            color: #233f76;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-size: 28px;
            font-weight: 700;
            text-align: center;
        }

        .report-subtitle {
            margin: 0 0 24px;
            color: #68768a;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            text-align: center;
        }

        .report-header {
            display: table;
            width: 100%;
            table-layout: fixed;
            border-bottom: 3px solid #111;
            margin-bottom: 28px;
            padding-bottom: 10px;
        }

        .header-logo,
        .header-main,
        .header-generated-at {
            display: table-cell;
            vertical-align: top;
        }

        .header-logo {
            width: 33.3333%;
        }

        .header-logo-image {
            display: block;
            max-width: 120px;
            max-height: 42px;
        }

        .header-main {
            width: 33.3333%;
            text-align: center;
            color: #68768a;
        }

        .header-report-type {
            font-size: 13px;
            line-height: 1.5;
        }

        .header-student-name {
            margin-top: 4px;
            font-size: 13px;
            line-height: 1.5;
        }

        .header-generated-at {
            width: 33.3333%;
            color: #68768a;
            font-size: 12px;
            line-height: 1.5;
            text-align: right;
            white-space: nowrap;
        }

        .result-header {
            margin: 0 0 22px;
            padding: 22px 24px;
            background: #fff7ed;
            border: 1px solid #ffe1c2;
            border-radius: 14px;
            text-align: center;
            page-break-inside: avoid;
        }

        .completion-title {
            margin: 0 0 6px;
            color: #9a4f00;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-size: 22px;
            font-weight: 700;
        }

        .completion-subtitle {
            margin: 0;
            color: #7b5a2f;
        }

        .result-grid {
            width: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 14px 0;
            margin-bottom: 26px;
        }

        .result-card {
            width: 25%;
            vertical-align: top;
            background: #f8fbff;
            border: 1px solid #e2eaf5;
            border-radius: 12px;
            padding: 14px;
            text-align: center;
            page-break-inside: avoid;
        }

        .result-value {
            color: #ff7d00;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-size: 24px;
            font-weight: 700;
            line-height: 1.2;
        }

        .result-label {
            margin-top: 6px;
            color: #56657a;
            font-size: 13px;
        }

        .section {
            margin-top: 24px;
            page-break-inside: avoid;
        }

        .section-title {
            margin: 0 0 14px;
            border-left: 6px solid #ff7d00;
            padding-left: 12px;
            color: #233f76;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-size: 20px;
            font-weight: 700;
        }

        .comparison-section {
            margin-top: 0;
            margin-bottom: 50px;
        }

        .comparison-section .section-title {
            margin: 0 0 25px;
        }

        .card {
            background: #fafbfc;
            border: 1px solid #eaeef5;
            border-radius: 10px;
            padding: 25px;
            page-break-inside: avoid;
        }

        .chart-box {
            width: 100%;
            height: 260px;
            margin: 10px 0;
            background: #f8fbff;
            border-radius: 10px;
        }

        .data-text {
            color: #444;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-size: 14px;
            line-height: 1.8;
        }

        .chart-box svg {
            display: block;
            width: 100%;
            height: 100%;
        }

        .chart-value {
            fill: #233f76;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-size: 13px;
            font-weight: 700;
        }

        .chart-label {
            fill: #56657a;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-size: 12px;
        }

        .chart-tick-label {
            fill: #68768a;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-size: 11px;
        }

        .detail-text {
            margin: 8px 0;
            color: #3d4a5d;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
        }

        .highlight {
            color: #ff7d00;
            font-weight: 700;
        }

        .hit-panel {
            background: #f8fbff;
            border: 1px solid #e2eaf5;
            border-radius: 12px;
            padding: 18px;
            page-break-inside: avoid;
        }

        .hit-stats {
            width: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 12px 0;
            margin-bottom: 14px;
        }

        .hit-stat {
            width: 25%;
            background: #fff;
            border: 1px solid #e7edf5;
            border-radius: 10px;
            padding: 12px;
            text-align: center;
        }

        .hit-stat-label {
            color: #68768a;
            font-size: 12px;
        }

        .hit-stat-value {
            color: #233f76;
            font-size: 18px;
            font-weight: 700;
        }

        .word-list {
            margin-top: 10px;
        }

        .word-item {
            display: inline-block;
            margin: 0 8px 8px 0;
            padding: 5px 12px;
            border-radius: 999px;
            background: #fff1e7;
            color: #9a4f00;
            font-family: 'MiSans VF', MiSans, ReportFont, sans-serif;
            font-weight: 600;
        }

        .word-empty {
            padding: 14px;
            border: 1px dashed #c6d2e3;
            border-radius: 10px;
            color: #68768a;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="report-container">
    <header class="report-header">
        <div class="header-logo"><img class="header-logo-image" src="{{reportLogoDataUri}}" alt="IATSE"/></div>
        <div class="header-main">
            <div class="header-report-type">{{headerReportType}}</div>
            <div class="header-student-name">{{studentName}}</div>
        </div>
        <div class="header-generated-at">{{generatedAtText}}</div>
    </header>

    <h1 class="report-title">{{reportTitle}}</h1>
    <p class="report-subtitle">{{reportSubtitle}}</p>

    <div class="result-header">
        <h2 class="completion-title">{{completionTitle}}</h2>
        <p class="completion-subtitle">{{completionSubtitle}}</p>
    </div>

    <table class="result-grid" role="presentation">
        <tr>
            <td class="result-card">
                <div class="result-value">{{vocabularyGrowthText}}</div>
                <div class="result-label">词汇量提升（个）</div>
            </td>
            <td class="result-card">
                <div class="result-value">{{paperKnownWordsGrowthText}}</div>
                <div class="result-label">试卷熟词提升（个）</div>
            </td>
            <td class="result-card">
                <div class="result-value">{{unknownWordHitRateText}}</div>
                <div class="result-label">试卷掌握度命中率</div>
            </td>
            <td class="result-card">
                <div class="result-value">{{learningEfficiencyText}}</div>
                <div class="result-label">学习效率提升</div>
            </td>
        </tr>
    </table>

    <div class="section comparison-section">
        <h2 class="section-title">模块一：词汇量对比</h2>
        <div class="card">
            <div class="chart-box">{{vocabularyComparisonChart}}</div>
            <div class="data-text">训练前词汇量：<span class="highlight">{{vocabularyBeforeText}}</span><br/>
                训练后词汇量：<span class="highlight">{{vocabularyAfterText}}</span><br/>
                本次提升：<span class="highlight">{{vocabularyGrowthDetailText}}</span><br/>
                {{stageVocabularyLabel}}：<span class="highlight">{{stageVocabularyText}}</span><br/>
                掌握率：<span class="highlight">{{studentVocabMasteryBeforeText}} -&gt; {{studentVocabMasteryAfterText}}</span><br/>
                掌握率提升：<span class="highlight">{{studentVocabMasteryImprovementText}}</span></div>
        </div>
    </div>

    <div class="section comparison-section">
        <h2 class="section-title">模块二：试卷熟词量对比</h2>
        <div class="card">
            <div class="chart-box">{{paperKnownWordsComparisonChart}}</div>
            <div class="data-text">训练前熟词量：<span class="highlight">{{paperKnownWordsBeforeText}}</span><br/>
                训练后熟词量：<span class="highlight">{{paperKnownWordsAfterText}}</span><br/>
                本次提升：<span class="highlight">{{paperKnownWordsGrowthDetailText}}</span><br/>
                试卷标题：<span class="highlight">{{testPaperTitle}}</span><br/>
                试卷总词量：<span class="highlight">{{testPaperWordCountText}}</span><br/>
                训练前/后生词：<span class="highlight">{{testPaperUnknownWordsBeforeText}} -&gt; {{testPaperUnknownWordsAfterText}}</span><br/>
                试卷熟词率：<span class="highlight">{{testPaperMasteryRateBeforeText}} -&gt; {{testPaperMasteryRateAfterText}}</span><br/>
                试卷熟词率提升：<span class="highlight">{{testPaperMasteryRateImprovementText}}</span></div>
        </div>
    </div>

    <div class="section">
        <h2 class="section-title">模块三：实考生词命中状况</h2>
        <div class="hit-panel">
            <table class="hit-stats" role="presentation">
                <tr>
                    <td class="hit-stat">
                        <div class="hit-stat-value">{{hitStatusUnknownWordHitRateText}}</div>
                        <div class="hit-stat-label">试卷掌握度命中率</div>
                    </td>
                    <td class="hit-stat">
                        <div class="hit-stat-value">{{hitStatusLearningEfficiencyText}}</div>
                        <div class="hit-stat-label">学习效率提升</div>
                    </td>
                    <td class="hit-stat">
                        <div class="hit-stat-value">{{unknownWordsBeforeText}}</div>
                        <div class="hit-stat-label">训练前生词</div>
                    </td>
                    <td class="hit-stat">
                        <div class="hit-stat-value">{{unknownWordsAfterText}}</div>
                        <div class="hit-stat-label">训练后生词</div>
                    </td>
                </tr>
            </table>
            <p class="detail-text">成功减少生词：<span class="highlight">{{reducedUnknownWordsText}}</span></p>
            <div class="word-list">{{hitWords}}</div>
        </div>
    </div>
</div>
{{reportFooterBusiness}}
</body>
</html>