<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集成战略</title>
    <style>
        :root {
            --bg-primary: #121212;
            --bg-secondary: #1e1e1e;
            --bg-tertiary: #2d2d2d;
            --text-primary: #e0e0e0;
            --text-secondary: #9e9e9e;
            --accent-success: #4caf50;
            --accent-failure: #f44336;
            --accent-primary: #bb86fc;
            --border-radius: 8px;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            --transition: all 0.3s ease;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            font-family: 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        h1 {
            color: var(--accent-primary);
            text-align: center;
            margin: 20px 0 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            font-weight: 300;
            font-size: 2rem;
        }

        /* 统计卡片样式 */
        .stats-card {
            background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
            border-radius: var(--border-radius);
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
        }

        .stats-card p {
            margin: 0;
            font-size: 1.1rem;
            line-height: 1.8;
        }

        .stats-highlight {
            color: var(--accent-primary);
            font-weight: 500;
            padding: 0 4px;
        }

        /* 表格样式 */
        .transaction-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .transaction-table th {
            background-color: var(--bg-tertiary);
            color: var(--text-primary);
            padding: 14px 15px;
            text-align: left;
            font-weight: 500;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
        }

        .transaction-table td {
            background-color: var(--bg-secondary);
            padding: 14px 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: var(--transition);
        }

        .transaction-table tr:last-child td {
            border-bottom: none;
        }

        .transaction-table tr:hover td {
            background-color: rgba(255, 255, 255, 0.05);
            transform: translateX(5px);
        }

        /* 状态标签样式 */
        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-success {
            background-color: rgba(76, 175, 80, 0.2);
            color: var(--accent-success);
            border: 1px solid rgba(76, 175, 80, 0.3);
        }

        .status-failure {
            background-color: rgba(244, 67, 54, 0.2);
            color: var(--accent-failure);
            border: 1px solid rgba(244, 67, 54, 0.3);
        }

        /* 干员列表样式 */
        .operators-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .operator-tag {
            background-color: rgba(255, 255, 255, 0.08);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.85rem;
            white-space: nowrap;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 0 10px;
            }

            h1 {
                font-size: 1.5rem;
            }

            .stats-card {
                padding: 15px;
            }

            .transaction-table th,
            .transaction-table td {
                padding: 10px 8px;
                font-size: 0.9rem;
            }

            /* 在小屏幕上隐藏部分列 */
            .transaction-table th:nth-child(4),
            .transaction-table td:nth-child(4) {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>集成战略</h1>
        <!-- 统计卡片 -->
        <div class="stats-card">
            <p>你在<span class="stats-highlight">{{data.history.mode}}</span>最高层数为<span class="stats-highlight">{{data.history.modeGrade}}</span>,
            最高得分<span class="stats-highlight">{{data.history.score}}</span>, 当前等级<span class="stats-highlight">{{data.history.bpLevel}}</span></p>
        </div>
        <!-- 记录表格 -->
        <table class="transaction-table">
            <thead>
                <tr>
                    <th>集成模式</th>
                    <th>分队名称</th>
                    <th>挑战层数</th>
                    <th>干员</th>
                    <th>积分</th>
                    <th>结果</th>
                </tr>
            </thead>
            <tbody>
                {{each data.history.records}}
                <tr>
                    <td>{{$value.mode}}</td>
                    <td>{{$value.band.name}}</td>
                    <td>{{$value.modeGrade}}</td>
                    <td>
                        <div class="operators-list">
                            {{$value.lastChars.map((item) => item.name).join(',')}}
                        </div>
                    </td>
                    <td>{{$value.score}}</td>
                    <td>
                        <span class="status-badge {{$value.success ? 'status-success' : 'status-failure'}}">
                            {{$value.success ? '成功' : '失败'}}
                        </span>
                    </td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</body>
</html>