<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>题目预览</title>
    <link rel="stylesheet" href="/css/katex/katex.min.css">
    <style>
        @page {
            size: A4;
            margin: 2cm;
        }
        body {
            font-family: "SimSun", "Songti SC", serif;
            line-height: 1.8;
            color: #000;
            background: #fff;
            font-size: 14px;
        }
        .page {
            max-width: 720px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #333;
        }
        .header h1 {
            font-size: 18px;
            margin: 0;
        }
        .question-section {
            margin-bottom: 20px;
        }
        .section-title {
            font-weight: bold;
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
        }
        .question-stem {
            margin-bottom: 15px;
            line-height: 2;
        }
        .question-options {
            margin-left: 20px;
            margin-bottom: 15px;
        }
        .option-item {
            margin: 8px 0;
            line-height: 1.8;
        }
        .option-label {
            font-weight: bold;
            margin-right: 8px;
        }
        .answer-section {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed #999;
        }
        .answer-label {
            font-weight: bold;
            color: #2563eb;
        }
        .solution-section {
            margin-top: 15px;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        .solution-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
        .solution-content {
            line-height: 2;
        }
        /* KaTeX 样式调整 */
        .katex {
            font-size: 1.1em;
        }
        .katex-display {
            margin: 0.5em 0;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="header">
            <h1>题目预览</h1>
        </div>

        <!-- 题干 -->
        <div class="question-section">
            <div class="section-title">题目</div>
            <div class="question-stem">{!! $stem !!}</div>
        </div>

        <!-- 选项（如果有） -->
        @if($options && count($options) > 0)
        <div class="question-section">
            <div class="section-title">选项</div>
            <div class="question-options">
                @foreach($options as $key => $value)
                <div class="option-item">
                    <span class="option-label">{{ $key }}.</span>
                    <span>{!! $value !!}</span>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- 答案 -->
        @if($answer)
        <div class="answer-section">
            <span class="answer-label">正确答案：</span>
            <span>{!! $answer !!}</span>
        </div>
        @endif

        <!-- 解析 -->
        @if($solution)
        <div class="solution-section">
            <div class="solution-title">解题思路</div>
            <div class="solution-content">{!! $solution !!}</div>
        </div>
        @endif
    </div>
</body>
</html>
