编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>AI智能阅卷 - 学生端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        :root {
            --primary: #4A90E2;
            --primary-dark: #357ABD;
            --primary-light: #EEF4FD;
            --success: #52C41A;
            --warning: #FF9500;
            --danger: #FF4757;
            --text-primary: #1A1A1A;
            --text-secondary: #666666;
            --text-tertiary: #B2B2B2;
            --border: #E8E8E8;
            --border-light: #F5F5F5;
            --bg-page: #F7F8FA;
            --bg-card: #FFFFFF;
            --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
            --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
            --radius-sm: 12px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --radius-xl: 32px;
        }
        
        body {
            font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
            background: var(--bg-page);
            color: var(--text-primary);
            line-height: 1.5;
            min-height: 100vh;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        
        .page {
            display: none;
            min-height: 100vh;
            padding-bottom: 70px;
        }
        
        .page.active {
            display: block;
        }
        
        /* 通用头部 */
        .header {
            background: var(--primary);
            padding: 12px 16px;
            padding-top: calc(12px + env(safe-area-inset-top));
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .header-title {
            font-size: 18px;
            font-weight: 600;
            color: #fff;
        }
        
        .header-right {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .header-icon-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        
        .header-icon-btn:active {
            background: rgba(255, 255, 255, 0.35);
        }
        
        .header-icon-btn svg {
            width: 22px;
            height: 22px;
            fill: #fff;
        }
        
        /* ==================== 登录页 ==================== */
        .login-page {
            background: linear-gradient(180deg, var(--primary) 0%, #6BA3E8 100%);
            min-height: 100vh;
            padding-bottom: 0;
            display: none;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }
        
        .login-page::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -20%;
            width: 80%;
            height: 70%;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
            border-radius: 50%;
        }
        
        .login-page::after {
            content: '';
            position: absolute;
            bottom: 10%;
            left: -30%;
            width: 60%;
            height: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            border-radius: 50%;
        }
        
        .login-page.active {
            display: flex;
        }
        
        .login-header {
            padding: 80px 28px 50px;
            text-align: center;
            color: #fff;
            position: relative;
            z-index: 1;
        }
        
        .login-logo-wrap {
            width: 90px;
            height: 90px;
            background: #fff;
            border-radius: 24px;
            margin: 0 auto 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        
        .login-logo-wrap::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 3px solid rgba(255, 255, 255, 0.35);
            border-radius: 28px;
        }
        
        .login-logo {
            width: 54px;
            height: 54px;
        }
        
        .login-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .login-subtitle {
            font-size: 14px;
            opacity: 0.9;
            letter-spacing: 2px;
        }
        
        .login-form {
            flex: 1;
            background: #fff;
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            padding: 40px 24px 60px;
            position: relative;
            z-index: 1;
        }
        
        .login-tabs {
            display: flex;
            background: var(--bg-page);
            border-radius: var(--radius-sm);
            padding: 4px;
            margin-bottom: 32px;
        }
        
        .login-tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            font-size: 15px;
            color: var(--text-secondary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .login-tab.active {
            background: #fff;
            color: var(--primary);
            font-weight: 600;
            box-shadow: var(--shadow-sm);
        }
        
        .login-input-group {
            margin-bottom: 16px;
            position: relative;
        }
        
        .login-input-label {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 10px;
            display: block;
            font-weight: 500;
        }
        
        .login-input {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 16px;
            outline: none;
            transition: all 0.3s;
            background: var(--bg-page);
            color: var(--text-primary);
        }
        
        .login-input:focus {
            background: #fff;
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
        }
        
        .login-input::placeholder {
            color: var(--text-tertiary);
        }
        
        .login-input-with-btn {
            display: flex;
            gap: 12px;
        }
        
        .login-input-with-btn .login-input {
            flex: 1;
        }
        
        .send-code-btn {
            padding: 0 18px;
            background: var(--primary-light);
            color: var(--primary);
            border: none;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.3s;
        }
        
        .send-code-btn:active {
            transform: scale(0.96);
        }
        
        .send-code-btn:disabled {
            color: var(--text-tertiary);
            background: var(--border-light);
        }
        
        .protocol-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin: 24px 0 32px;
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        .protocol-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
            transition: all 0.2s;
            background: #fff;
        }
        
        .protocol-checkbox.checked {
            background: var(--primary);
            border-color: var(--primary);
        }
        
        .protocol-checkbox svg {
            width: 12px;
            height: 12px;
            fill: #fff;
            display: none;
        }
        
        .protocol-checkbox.checked svg {
            display: block;
        }
        
        .protocol-link {
            color: var(--primary);
            text-decoration: none;
        }
        
        .login-btn {
            width: 100%;
            padding: 16px;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: var(--radius-md);
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            box-shadow:0 8px 24px rgba(74, 144, 226, 0.4);
            letter-spacing: 2px;
        }
        
        .login-btn:disabled {
            background: #D0D0D0;
            box-shadow: none;
            cursor: not-allowed;
        }
        
        .login-btn:not(:disabled):active {
            transform: scale(0.98);
            box-shadow: 0 4px 16px rgba(74, 144, 226, 0.3);
        }
        
        .login-btn.loading::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            top: 50%;
            left: 50%;
            margin: -12px 0 0 -12px;
        }
        
        .login-btn.loading span {
            opacity: 0;
        }
        
        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        .login-divider {
            display: flex;
            align-items: center;
            margin: 28px 0;
        }
        
        .login-divider::before,
        .login-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }
        
        .login-divider span {
            padding: 0 16px;
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .wechat-login-btn {
            width: 100%;
            padding: 16px;
            background: #07C160;
            color: #fff;
            border: none;
            border-radius: var(--radius-md);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 8px 24px rgba(7, 192, 96, 0.35);
            transition: all 0.3s;
        }
        
        .wechat-login-btn:active {
            transform: scale(0.98);
        }
        
        .wechat-login-btn svg {
            width: 24px;
            height: 24px;
        }
        
        /* ==================== 首页 ==================== */
        .home-content {
            padding: 0 16px 16px;
        }
        
        /* 用户信息卡片 */
        .user-card {
            background: linear-gradient(135deg, var(--primary) 0%, #6BA3E8 50%, #8CBEF5 100%);
            border-radius: var(--radius-lg);
            padding: 28px 20px;
            color: #fff;
            margin: 16px 0;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-md);
        }
        
        .user-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 70%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
        }
        
        .user-card-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        
        .user-avatar-wrap {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.25);
            border: 3px solid rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
        }
        
        .user-avatar {
            width: 38px;
            height: 38px;
            fill: #fff;
        }
        
        .user-info h2 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 6px;
        }
        
        .user-info p {
            font-size: 13px;
            opacity: 0.9;
            display: flex;
            align-items: center;
        }
        
        .user-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, 0.25);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            margin-left: 8px;
        }
        
        .user-stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            position: relative;
            z-index: 1;
        }
        
        .stat-box {
            text-align: center;
            padding: 16px 8px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: var(--radius-md);
            backdrop-filter: blur(10px);
        }
        
        .stat-value {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 12px;
            opacity: 0.9;
        }
        
        /* 快速功能入口 */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .quick-action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .quick-action-icon {
            width: 56px;
            height: 56px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
            transition: transform 0.2s;
        }
        
        .quick-action-item:active .quick-action-icon {
            transform: scale(0.9);
        }
        
        .quick-action-icon svg {
            width: 28px;
            height: 28px;
        }
        
        .quick-action-label {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        /* 图表区域 */
        .chart-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .chart-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 16px;
            box-shadow: var(--shadow-sm);
        }
        
        .chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .chart-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .chart-toggle {
            font-size: 12px;
            color: var(--primary);
            cursor: pointer;
            padding: 4px 10px;
            background: var(--primary-light);
            border-radius: 6px;
            font-weight: 500;
        }
        
        .mini-chart {
            height: 100px;
            position: relative;
        }
        
        .line-chart {
            width: 100%;
            height: 100%;
        }
        
        .chart-line {
            fill: none;
            stroke: var(--primary);
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        
        .chart-area {
            fill: url(#blueGradient);
            opacity: 0.2;
        }
        
        .chart-dot {
            fill: var(--primary);
        }
        
        .radar-chart {
            width: 100%;
            height: 100px;
        }
        
        .radar-bg {
            fill: none;
            stroke: var(--border);
            stroke-width: 1;
        }
        
        .radar-data {
            fill: var(--primary);
            opacity: 0.15;
        }
        
        .radar-line {
            fill: none;
            stroke: var(--primary);
            stroke-width: 2;
        }
        
        .radar-dot {
            fill: var(--primary);
        }
        
        .completion-ring {
            width: 72px;
            height: 72px;
            margin: 4px auto;
        }
        
        .ring-bg {
            fill: none;
            stroke: var(--primary-light);
            stroke-width: 8;
        }
        
        .ring-progress {
            fill: none;
            stroke: var(--primary);
            stroke-width: 8;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: center;
        }
        
        .ring-text {
            font-size: 16px;
            font-weight: 700;
            fill: var(--text-primary);
        }
        
        .ring-label {
            font-size: 10px;
            fill: var(--text-secondary);
        }
        
        /* 作业完成率 */
        .completion-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .completion-left {
            flex-shrink: 0;
        }
        
        .completion-right {
            flex: 1;
        }
        
        .completion-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .completion-progress-bar {
            height: 8px;
            background: var(--primary-light);
            border-radius: 4px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        
        .completion-progress-fill {
            height: 100%;
            background: var(--primary);
            border-radius: 4px;
            transition: width 0.5s ease;
        }
        
        .completion-stats {
            display: flex;
            gap: 16px;
            font-size: 13px;
        }
        
        .completion-stats span {
            color: var(--text-secondary);
        }
        
        .completion-stats strong {
            color: var(--primary);
            font-weight: 600;
        }
        
        /* 作业列表 */
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title::before {
            content: '';
            width: 4px;
            height: 20px;
            background: var(--primary);
            border-radius: 2px;
        }
        
        .section-more {
            font-size: 13px;
            color: var(--text-tertiary);
            cursor: pointer;
            font-weight: 500;
        }
        
        .homework-list {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .homework-item {
            padding: 18px 16px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        
        .homework-item:last-child {
            border-bottom: none;
        }
        
        .homework-item:active {
            background: var(--bg-page);
        }
        
        .homework-icon {
            width: 46px;
            height: 46px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .homework-icon svg {
            width: 22px;
            height: 22px;
        }
        
        .homework-icon.pending {
            background: #FFF7E6;
        }
        
        .homework-icon.pending svg {
            fill: var(--warning);
        }
        
        .homework-icon.done {
            background: #F6FFED;
        }
        
        .homework-icon.done svg {
            fill: var(--success);
        }
        
        .homework-icon.review {
            background: var(--primary-light);
        }
        
        .homework-icon.review svg {
            fill: var(--primary);
        }
        
        .homework-content {
            flex: 1;
            min-width: 0;
        }
        
        .homework-name {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .homework-meta {
            font-size: 12px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .homework-meta .countdown {
            color: var(--danger);
            font-weight: 600;
        }
        
        .homework-score {
            text-align: right;
            flex-shrink: 0;
        }
        
        .homework-score .score {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .homework-score .rank {
            font-size: 11px;
            color: var(--text-tertiary);
        }
        
        .homework-tag {
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 6px;
            flex-shrink: 0;
            font-weight: 500;
        }
        
        .tag-pending {
            background: #FFF7E6;
            color: var(--warning);
        }
        
        .tag-done {
            background: #F6FFED;
            color: var(--success);
        }
        
        .tag-review {
            background: var(--primary-light);
            color: var(--primary);
        }
        
        /* ==================== 作业中心 ==================== */
        .filter-bar {
            display: flex;
            gap: 8px;
            padding: 16px;
            background: var(--bg-card);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            position: sticky;
            top: 52px;
            z-index: 50;
        }
        
        .filter-bar::-webkit-scrollbar {
            display: none;
        }
        
        .filter-chip {
            padding: 10px 20px;
            background: var(--bg-page);
            border-radius: 22px;
            font-size: 14px;
            color: var(--text-secondary);
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
            flex-shrink: 0;
        }
        
        .filter-chip.active {
            background: var(--primary);
            color: #fff;
        }
        
        .homework-cards {
            padding: 0 16px 16px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        
        .homework-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .homework-card:active {
            transform: scale(0.99);
        }
        
        .card-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        
        .card-title {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            line-height: 1.5;
        }
        
        .card-score {
            font-size: 22px;
            color: var(--primary);
            font-weight: 700;
            flex-shrink: 0;
            margin-left: 12px;
        }
        
        .card-info {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .card-tag {
            font-size: 12px;
            padding: 6px 14px;
            background: var(--bg-page);
            border-radius: 8px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .card-actions {
            display: flex;
            gap: 12px;
        }
        
        .card-action {
            flex: 1;
            padding: 14px;
            text-align: center;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .card-action:active {
            transform: scale(0.96);
        }
        
        .action-primary {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 4px 16px rgba(74, 144, 226, 0.35);
        }
        
        .action-secondary {
            background: var(--primary-light);
            color: var(--primary);
        }
        
        /* ==================== 答题卡 ==================== */
        .answer-sheet {
            padding: 16px;
        }
        
        .answer-progress {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 20px;
            margin-bottom: 16px;
            box-shadow: var(--shadow-sm);
        }
        
        .progress-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 14px;
            font-size: 15px;
        }
        
        .progress-bar {
            height: 10px;
            background: var(--primary-light);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: var(--primary);
            border-radius: 5px;
            transition: width 0.4s ease;
        }
        
        .question-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 24px 20px;
            margin-bottom: 16px;
            box-shadow: var(--shadow-sm);
        }
        
        .question-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .question-num {
            font-size: 15px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .question-type {
            font-size: 12px;
            padding: 4px 12px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 6px;
            font-weight: 500;
        }
        
        .question-content {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 24px;
            color: var(--text-primary);
        }
        
        .question-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .option-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 18px;
            background: var(--bg-page);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid transparent;
        }
        
        .option-item:active {
            background: var(--primary-light);
            border-color: var(--primary);
        }
        
        .option-item.selected {
            background: var(--primary-light);
            border-color: var(--primary);
        }
        
        .option-letter {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--bg-card);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-secondary);
            flex-shrink: 0;
            border: 2px solid var(--border);
        }
        
        .option-item.selected .option-letter {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }
        
        .option-text {
            font-size: 15px;
            flex: 1;
            line-height: 1.5;
        }
        
        .answer-grid {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 20px;
            box-shadow: var(--shadow-sm);
        }
        
        .grid-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 16px;
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }
        
        .grid-item {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .grid-item.answered {
            background: var(--primary);
            color: #fff;
        }
        
        .grid-item.current {
            border: 2px solid var(--primary);
            color: var(--primary);
            background: var(--primary-light);
        }
        
        .grid-item.unanswered {
            background: var(--bg-page);
            color: var(--text-secondary);
        }
        
        /* ==================== 错题本 ==================== */
        .wrong-list {
            padding: 16px;
        }
        
        .add-wrong-btn {
            position: fixed;
            right: 20px;
            bottom: 84px;
            width: 56px;
            height: 56px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:0 8px 24px rgba(74, 144, 226, 0.45);
            cursor: pointer;
            z-index: 90;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .add-wrong-btn:active {
            transform: scale(0.9);
        }
        
        .add-wrong-btn svg {
            width: 28px;
            height: 28px;
            fill: #fff;
        }
        
        .wrong-item {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 20px;
            margin-bottom: 14px;
            box-shadow: var(--shadow-sm);
        }
        
        .wrong-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .wrong-subject {
            font-size: 12px;
            padding: 5px 12px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 6px;
            font-weight: 500;
        }
        
        .wrong-knowledge {
            font-size: 12px;
            color: var(--text-tertiary);
            flex: 1;
        }
        
        .wrong-content {
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 16px;
            color: var(--text-primary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .wrong-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .wrong-times {
            font-size: 12px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .practice-btn {
            padding: 10px 20px;
            background: var(--primary);
            color: #fff;
            border-radius: 22px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(74, 144, 226, 0.3);
        }
        
        /* ==================== 添加错题流程 ==================== */
        
        .img-select-modal {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            padding: 24px 20px max(24px, env(safe-area-inset-bottom));
            z-index: 200;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .img-select-modal.show {
            transform: translateY(0);
        }
        
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 199;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        
        .modal-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .modal-title {
            font-size: 17px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 24px;
            color: var(--text-primary);
        }
        
        .modal-options {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        
        .modal-option {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px;
            background: var(--bg-page);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .modal-option:active {
            background: var(--border-light);
        }
        
        .modal-option-icon {
            width: 48px;
            height: 48px;
            background: var(--primary-light);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-option-icon svg {
            width: 24px;
            height: 24px;
            fill: var(--primary);
        }
        
        .modal-option-text h4 {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        
        .modal-option-text p {
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .modal-cancel {
            margin-top: 14px;
            padding: 16px;
            text-align: center;
            font-size: 16px;
            color: var(--text-secondary);
            background: var(--bg-page);
            border-radius: var(--radius-md);
            cursor: pointer;
        }
        
        /* 框选裁剪页面 */
        .crop-page {
            background: #1A1A1A;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 300;
            display: none;
        }
        
        .crop-page.active {
            display: block;
        }
        
        .crop-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 12px 16px;
            padding-top: calc(12px + env(safe-area-inset-top));
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10;
        }
        
        .crop-header-btn {
            padding: 10px 18px;
            font-size: 15px;
            font-weight: 600;
            border-radius: var(--radius-sm);
            cursor: pointer;
        }
        
        .crop-cancel {
            color: #fff;
        }
        
        .crop-confirm {
            background: var(--primary);
            color: #fff;
        }
        
        .crop-canvas-wrap {
            position: absolute;
            top: 60px;
            left: 16px;
            right: 16px;
            bottom: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .crop-canvas {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .crop-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }
        
        .crop-guide {
            position: absolute;
            border: 2px dashed rgba(255, 255, 255, 0.8);
            background: rgba(74, 144, 226, 0.15);
            pointer-events: auto;
            cursor: move;
        }
        
        .crop-tip {
            position: absolute;
            bottom: 30px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        .crop-actions {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px;
            padding-bottom: max(16px, env(safe-area-inset-bottom));
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            gap: 12px;
        }
        
        .crop-action-btn {
            flex: 1;
            padding: 15px;
            text-align: center;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .crop-retake {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }
        
        .crop-ocr {
            background: var(--primary);
            color: #fff;
        }
        
        /* 人工修正页面 */
        .ocr-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-page);
            z-index: 400;
            display: none;
            flex-direction: column;
        }
        
        .ocr-page.active {
            display: flex;
        }
        
        .ocr-header {
            background: #fff;
            padding: 12px 16px;
            padding-top: calc(12px + env(safe-area-inset-top));
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-light);
        }
        
        .ocr-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .ocr-back-btn {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .ocr-back-btn svg {
            width: 24px;
            height: 24px;
            fill: #333;
        }
        
        .ocr-header-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .ocr-confirm-btn {
            padding: 10px 20px;
            background: var(--primary);
            color: #fff;
            border-radius: 22px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .ocr-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        
        .ocr-preview {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 14px;
            margin-bottom: 16px;
        }
        
        .ocr-preview img {
            width: 100%;
            border-radius: var(--radius-sm);
        }
        
        .ocr-accuracy {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 14px;
        }
        
        .ocr-accuracy-label {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .ocr-accuracy-value {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .ocr-accuracy-bar {
            width: 80px;
            height: 6px;
            background: var(--primary-light);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .ocr-accuracy-fill {
            height: 100%;
            background: var(--success);
            border-radius: 3px;
        }
        
        .ocr-accuracy-percent {
            font-size: 15px;
            font-weight: 700;
            color: var(--success);
        }
        
        .ocr-question-label {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .ocr-question-label .required {
            color: var(--danger);
        }
        
        .ocr-textarea {
            width: 100%;
            min-height: 120px;
            padding: 16px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 16px;
            line-height: 1.7;
            resize: none;
            outline: none;
            background: #fff;
            box-shadow: var(--shadow-sm);
        }
        
        .ocr-textarea:focus {
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
        }
        
        .ocr-hint {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 14px;
            padding: 14px;
            background: #FFFBE6;
            border-radius: var(--radius-sm);
        }
        
        .ocr-hint svg {
            width: 20px;
            height: 20px;
            fill: var(--warning);
            flex-shrink: 0;
            margin-top: 2px;
        }
        
        .ocr-hint-text {
            font-size: 13px;
            color: #946600;
            line-height: 1.6;
        }
        
        .ocr-tags {
            margin-top: 18px;
        }
        
        .ocr-tags-label {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
        }
        
        .ocr-tag-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .ocr-tag-label {
            font-size: 14px;
            color: var(--text-secondary);
            width: 50px;
            flex-shrink: 0;
        }
        
        .ocr-tag-select {
            flex: 1;
            padding: 12px 16px;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 15px;
            outline: none;
            background: #fff;
            cursor: pointer;
            box-shadow: var(--shadow-sm);
        }
        
        .ocr-submit-area {
            padding: 16px;
            background: #fff;
            border-top: 1px solid var(--border-light);
        }
        
        .ocr-submit-btn {
            width: 100%;
            padding: 16px;
            background: var(--primary);
            color: #fff;
            border-radius: var(--radius-md);
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(74, 144, 226, 0.4);
        }
        
        /* ==================== 我的 ==================== */
        .my-header {
            background: linear-gradient(135deg, var(--primary) 0%, #6BA3E8 50%, #8CBEF5 100%);
            padding: 44px 20px 56px;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        
        .my-header::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -10%;
            width: 50%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
        }
        
        .my-user {
            display: flex;
            align-items: center;
            gap: 18px;
            position: relative;
            z-index: 1;
        }
        
        .my-avatar-wrap {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.25);
            border: 4px solid rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .my-avatar {
            width: 44px;
            height: 44px;
            fill: #fff;
        }
        
        .my-info h2 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 6px;
        }
        
        .my-info p {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .vip-card {
            background: rgba(255, 255, 255, 0.2);
            border-radius: var(--radius-md);
            padding: 18px 20px;
            margin-top: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 1;
        }
        
        .vip-left {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        
        .vip-icon {
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .vip-icon svg {
            width: 24px;
            height: 24px;
            fill: #fff;
        }
        
        .vip-text {
            font-size: 15px;
            font-weight: 600;
        }
        
        .vip-desc {
            font-size: 12px;
            opacity: 0.85;
            margin-top: 2px;
        }
        
        .vip-btn {
            padding: 10px 20px;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #fff;
            border-radius: 22px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(255, 165, 0, 0.4);
        }
        
        /* 我的菜单 */
        .my-menu {
            padding: 0 16px 16px;
            margin-top: -28px;
        }
        
        .menu-group {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            overflow: hidden;
            margin-bottom: 14px;
            box-shadow: var(--shadow-sm);
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 18px 16px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-item:active {
            background: var(--bg-page);
        }
        
        .menu-icon {
            width: 42px;
            height: 42px;
            border-radius: var(--radius-sm);
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
        }
        
        .menu-icon svg {
            width: 22px;
            height: 22px;
            fill: var(--primary);
        }
        
        .menu-text {
            flex: 1;
            font-size: 16px;
            font-weight: 500;
        }
        
        .menu-arrow {
            width: 18px;
            height: 18px;
            fill: var(--text-tertiary);
        }
        
        .menu-badge {
            padding: 4px 12px;
            background: var(--danger);
            color: #fff;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            margin-right: 8px;
        }
        
        /* ==================== 底部导航栏 ==================== */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.96);
            display: flex;
            padding: 8px 0;
            padding-bottom: max(8px, env(safe-area-inset-bottom));
            box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
            z-index: 100;
            backdrop-filter: blur(20px);
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            padding: 6px 0;
            transition: all 0.2s;
        }
        
        .tab-icon {
            width: 26px;
            height: 26px;
            fill: var(--text-tertiary);
            transition: all 0.3s;
        }
        
        .tab-label {
            font-size: 11px;
            color: var(--text-tertiary);
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .tab-item.active .tab-icon {
            fill: var(--primary);
        }
        
        .tab-item.active .tab-label {
            color: var(--primary);
            font-weight: 600;
        }
        
        /* Toast提示 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            padding: 14px 28px;
            border-radius: 10px;
            font-size: 14px;
            z-index: 300;
            opacity: 0;
            pointer-events: none;
            transition: all 0.25s ease;
        }
        
        .toast.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    </style>
</head>
<body>
    <!-- 登录页 -->
    <div id="loginPage" class="page login-page active">
        <div class="login-header">
            <div class="login-logo-wrap">
                <svg class="login-logo" viewBox="0 0 48 48">
                    <defs>
                        <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#4A90E2"/>
                            <stop offset="100%" style="stop-color:#6BA3E8"/>
                        </linearGradient>
                    </defs>
                    <rect width="48" height="48" rx="12" fill="url(#logoGrad)"/>
                    <path d="M14 18h8c2.2 0 4 1.8 4 4v4c0 2.2-1.8 4-4 4h-8v-4h4v-2h-4v-2h4v-2h-4v-2zm6 8h4v-2h-4v2zm0-6h4v-2h-4v2z" fill="#fff"/>
                    <rect x="14" y="34" width="20" height="3" rx="1.5" fill="#fff"/>
               </svg>
            </div>
            <h1 class="login-title">AI智能阅卷</h1>
            <p class="login-subtitle">让学习更高效</p>
        </div>
        
        <div class="login-form">
            <div class="login-tabs">
                <div class="login-tab active" data-tab="account">账号登录</div>
                <div class="login-tab" data-tab="sms">短信登录</div>
            </div>
            
            <div class="login-input-group">
                <label class="login-input-label">账号</label>
                <input type="text" class="login-input" placeholder="请输入学号/手机号" id="loginAccount">
            </div>
            
            <div class="login-input-group" id="passwordGroup">
                <label class="login-input-label">密码</label>
                <input type="password" class="login-input" placeholder="请输入密码" id="loginPassword">
            </div>
            
            <div class="login-input-group" id="smsCodeGroup" style="display: none;">
                <label class="login-input-label">验证码</label>
                <div class="login-input-with-btn">
                    <input type="text" class="login-input" placeholder="请输入验证码" id="smsCode" maxlength="6">
                    <button class="send-code-btn" id="sendCodeBtn">获取验证码</button>
                </div>
            </div>
            
            <div class="protocol-row">
                <div class="protocol-checkbox" id="protocolCheck">
                    <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                </div>
                <span>我已阅读并同意<a class="protocol-link" href="#">《用户协议》</a>和<a class="protocol-link" href="#">《隐私协议》</a></span>
            </div>
            
            <button class="login-btn" id="loginBtn" disabled><span>登 录</span></button>
            
            <div class="login-divider"><span>其他登录方式</span></div>
            
            <button class="wechat-login-btn" id="wechatLoginBtn">
                <svg viewBox="0 0 24 24"><path d="M9.5 4C5.36 4 2 6.69 2 10c0 1.89 1.08 3.56 2.78 4.66L4 17l3.03-1.68c.86.25 1.81.4 2.81.44L10 17l2.28-1.14C14.67 17.4 17 15.11 17 12c0-1.29-.46-2.48-1.22-3.44L157h2c1.37 2.61.71 3.34 1.79l1.06-1.06C20.17 1.01 18.2 1647H9.5zM7.5 9c-.83 0-1.5.67-1.5 1.5S6.67 12 7.5 12 9 11.33 9 10.5 8.33 9 7.5 9zm5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S13.33 9 12.5 9z"/></svg>
                微信一键登录
            </button>
        </div>
    </div>
    
    <!-- 首页 -->
    <div id="homePage" class="page">
        <div class="header">
            <div class="header-left">
                <span class="header-title">学习中心</span>
            </div>
            <div class="header-right">
                <div class="header-icon-btn">
                    <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
                </div>
            </div>
        </div>
        
        <div class="home-content">
            <!-- 用户卡片 -->
            <div class="user-card">
                <div class="user-card-header">
                    <div class="user-avatar-wrap">
                        <svg class="user-avatar" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                    </div>
                    <div class="user-info">
                        <h2>王小明</h2>
                        <p>三年级（2）班<span class="user-badge">VIP学员</span></p>
                    </div>
                </div>
                <div class="user-stats-grid">
                    <div class="stat-box">
                        <div class="stat-value">92</div>
                        <div class="stat-label">平均成绩</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-value">85%</div>
                        <div class="stat-label">作业完成率</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-value">12</div>
                        <div class="stat-label">错题数</div>
                    </div>
                </div>
            </div>
            
            <!-- 快速功能入口 -->
            <div class="quick-actions">
                <div class="quick-action-item" onclick="switchTab(1)">
                    <div class="quick-action-icon" style="background: linear-gradient(145deg, #EEF4FD 0%, #D5E6F9100%);">
                        <svg viewBox="0 0 24 24" style="fill: #4A90E2;"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                    </div>
                    <span class="quick-action-label">做作业</span>
                </div>
                <div class="quick-action-item" onclick="switchTab(2)">
                    <div class="quick-action-icon" style="background: linear-gradient(145deg, #FFF7E6 0%, #FFEBC7 100%);">
                        <svg viewBox="0 0 24 24" style="fill: #FF8C00;"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14h-2v-4H7v-2h3V7h2v4h3v2h-3v4z"/></svg>
                    </div>
                    <span class="quick-action-label">错题本</span>
                </div>
                <div class="quick-action-item" onclick="showToast('功能开发中')">
                    <div class="quick-action-icon" style="background: linear-gradient(145deg, #F6FFED 0%, #D6F5C7 100%);">
                        <svg viewBox="0 0 24 24" style="fill: #52C41A;"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/></svg>
                    </div>
                    <span class="quick-action-label">成绩单</span>
                </div>
                <div class="quick-action-item" onclick="showToast('功能开发中')">
                    <div class="quick-action-icon" style="background: linear-gradient(145deg, #FFF0F0 0%, #FFE4E4 100%);">
                        <svg viewBox="0 0 24 24" style="fill: #FF4757;"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                    </div>
                    <span class="quick-action-label">排行榜</span>
                </div>
            </div>
            
            <!-- 图表区域 -->
            <div class="chart-section">
                <div class="chart-card">
                    <div class="chart-header">
                        <span class="chart-title">学习趋势</span>
                        <span class="chart-toggle">周/月</span>
                    </div>
                    <div class="mini-chart">
                        <svg class="line-chart" viewBox="0 0 200 80">
                            <defs>
                                <linearGradient id="blueGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.25"/>
                                    <stop offset="100%" style="stop-color:#4A90E2;stop-opacity:0"/>
                                </linearGradient>
                            </defs>
                            <path class="chart-area" d="M20,60 L50,45 L80,55 L110,30 L140,40 L170,25 L180,20 L180,70 L20,70 Z"/>
                            <path class="chart-line" d="M20,60 L50,45 L80,55 L110,30 L140,40 L170,25 L180,20"/>
                            <circle class="chart-dot" cx="20" cy="60" r="3.5"/>
                            <circle class="chart-dot" cx="50" cy="45" r="3.5"/>
                            <circle class="chart-dot" cx="80" cy="55" r="3.5"/>
                            <circle class="chart-dot" cx="110" cy="30" r="3.5"/>
                            <circle class="chart-dot" cx="140" cy="40" r="3.5"/>
                            <circle class="chart-dot" cx="170" cy="25" r="3.5"/>
                            <circle class="chart-dot" cx="180" cy="20" r="3.5"/>
                        </svg>
                    </div>
                </div>
                
                <div class="chart-card">
                    <div class="chart-header">
                        <span class="chart-title">能力雷达</span>
                        <span class="chart-toggle">详情</span>
                    </div>
                    <div class="mini-chart">
                        <svg class="radar-chart" viewBox="0 0 100 100">
                            <polygon class="radar-bg" points="50,10 85,30 85,70 50,90 15,70 15,30"/>
                            <polygon class="radar-bg" points="50,20 75,35 75,65 50,80 25,65 25,35"/>
                            <polygon class="radar-bg" points="50,30 65,40 65,60 50,70 35,60 35,40"/>
                            <polygon class="radar-data" points="50,15 78,32 70,65 50,75 30,58 25,35"/>
                            <circle class="radar-dot" cx="50" cy="15" r="3.5"/>
                            <circle class="radar-dot" cx="78" cy="32" r="3.5"/>
                            <circle class="radar-dot" cx="70" cy="65" r="3.5"/>
                            <circle class="radar-dot" cx="50" cy="75" r="3.5"/>
                            <circle class="radar-dot" cx="30" cy="58" r="3.5"/>
                            <circle class="radar-dot" cx="25" cy="35" r="3.5"/>
                        </svg>
                    </div>
                </div>
            </div>
            
            <!-- 作业完成率 -->
            <div class="completion-card">
                <div class="completion-left">
                    <svg class="completion-ring" viewBox="0 0 100 100">
                        <circle class="ring-bg" cx="50" cy="50" r="40"/>
                        <circle class="ring-progress" cx="50" cy="50" r="40" stroke-dasharray="251" stroke-dashoffset="40"/>
                        <text class="ring-text" x="50" y="47" text-anchor="middle">85%</text>
                        <text class="ring-label" x="50" y="60" text-anchor="middle">完成率</text>
                    </svg>
                </div>
                <div class="completion-right">
                    <div class="completion-title">本周作业完成情况</div>
                    <div class="completion-progress-bar">
                        <div class="completion-progress-fill" style="width: 85%"></div>
                    </div>
                    <div class="completion-stats">
                        <span>已完成 <strong>17</strong> 项</span>
                        <span>进行中 <strong>3</strong> 项</span>
                    </div>
                </div>
            </div>
            
            <!-- 作业列表 -->
            <div class="section-header">
                <span class="section-title">最近作业</span>
                <span class="section-more" onclick="switchTab(1)">查看全部 ></span>
            </div>
            
            <div class="homework-list">
                <div class="homework-item" onclick="showHomeworkDetail()">
                    <div class="homework-icon pending">
                        <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                    </div>
                    <div class="homework-content">
                        <div class="homework-name">第三单元综合测试</div>
                        <div class="homework-meta">
                            <span>截止 <strong class="countdown">还剩2小时</strong></span>
                        </div>
                    </div>
                    <span class="homework-tag tag-pending">待完成</span>
                </div>
                <div class="homework-item" onclick="showHomeworkDetail()">
                    <div class="homework-icon done">
                        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                    </div>
                    <div class="homework-content">
                        <div class="homework-name">期中模拟卷</div>
                        <div class="homework-meta">
                            <span>班级第5名</span>
                            <span>已完成</span>
                        </div>
                    </div>
                    <div class="homework-score">
                        <div class="score">92</div>
                        <div class="rank">分</div>
                    </div>
                </div>
                <div class="homework-item" onclick="showHomeworkDetail()">
                    <div class="homework-icon review">
                        <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                    </div>
                    <div class="homework-content">
                        <div class="homework-name">课后练习题</div>
                        <div class="homework-meta">
                            <span>等待老师批改</span>
                        </div>
                    </div>
                    <span class="homework-tag tag-review">待批改</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 作业中心 -->
    <div id="homeworkPage" class="page">
        <div class="header">
            <div class="header-left">
                <span class="header-title">作业中心</span>
            </div>
            <div class="header-right">
                <div class="header-icon-btn">
                    <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 169.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                </div>
            </div>
        </div>
        
        <div class="filter-bar">
            <div class="filter-chip active" data-filter="all">全部</div>
            <div class="filter-chip" data-filter="pending">待完成</div>
            <div class="filter-chip" data-filter="done">已完成</div>
            <div class="filter-chip" data-filter="review">待批改</div>
            <div class="filter-chip" data-filter="chinese">语文</div>
            <div class="filter-chip" data-filter="math">数学</div>
            <div class="filter-chip" data-filter="english">英语</div>
        </div>
        
        <div class="homework-cards">
            <div class="homework-card" onclick="showAnswerSheet()">
                <div class="card-header">
                    <span class="card-title">第三单元综合测试</span>
                    <span class="homework-tag tag-pending">待完成</span>
                </div>
                <div class="card-info">
                    <span class="card-tag">语文</span>
                    <span class="card-tag">满分100分</span>
                    <span class="card-tag">限时60分钟</span>
                </div>
                <div class="card-actions">
                    <div class="card-action action-primary">开始答题</div>
                </div>
            </div>
            
            <div class="homework-card" onclick="showHomeworkDetail()">
                <div class="card-header">
                    <span class="card-title">期中模拟卷</span>
                    <span class="card-score">92分</span>
                </div>
                <div class="card-info">
                    <span class="card-tag">数学</span>
                    <span class="card-tag">班级第5名</span>
                </div>
                <div class="card-actions">
                    <div class="card-action action-secondary">查看详情</div>
                    <div class="card-action action-secondary">下载PDF</div>
                </div>
            </div>
            
            <div class="homework-card" onclick="showHomeworkDetail()">
                <div class="card-header">
                    <span class="card-title">课后练习题</span>
                    <span class="homework-tag tag-review">待批改</span>
                </div>
                <div class="card-info">
                    <span class="card-tag">英语</span>
                    <span class="card-tag">主观题待批</span>
                </div>
                <div class="card-actions">
                    <div class="card-action action-secondary">查看详情</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 答题卡 -->
    <div id="answerPage" class="page">
        <div class="header" style="background:#fff;">
            <div class="header-left" onclick="switchTab(1)">
                <svg width="24" height="24" fill="#333" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
            </div>
            <div class="header-title" style="color:#333;">答题中</div>
            <div class="header-right" style="color:var(--primary);font-weight:600;cursor:pointer;padding-right:8px;" onclick="submitAnswer()">提交</div>
        </div>
        
        <div class="answer-sheet">
            <div class="answer-progress">
                <div class="progress-info">
                    <span>第<strong id="currentQ">1</strong> / 10 题</span>
                    <span>已答 <strong id="answeredCount">0</strong> 题</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 0%"></div>
                </div>
            </div>
            
            <div class="question-card">
                <div class="question-header">
                    <span class="question-num">第1题</span>
                    <span class="question-type">单选题</span>
                </div>
                <div class="question-content">
                    下列词语中，没有错别字的一项是（ ）
                </div>
                <div class="question-options">
                    <div class="option-item" onclick="selectOption(this)">
                        <span class="option-letter">A</span>
                        <span class="option-text">再接再厉</span>
                    </div>
                    <div class="option-item" onclick="selectOption(this)">
                        <span class="option-letter">B</span>
                        <span class="option-text">变本加厉</span>
                    </div>
                    <div class="option-item" onclick="selectOption(this)">
                        <span class="option-letter">C</span>
                        <span class="option-text">励精图治</span>
                    </div>
                    <div class="option-item" onclick="selectOption(this)">
                        <span class="option-letter">D</span>
                        <span class="option-text">厉行节约</span>
                    </div>
                </div>
            </div>
            
            <div class="answer-grid">
                <div class="grid-title">答题卡</div>
                <div class="grid-container">
                    <div class="grid-item current">1</div>
                    <div class="grid-item unanswered">2</div>
                    <div class="grid-item unanswered">3</div>
                    <div class="grid-item unanswered">4</div>
                    <div class="grid-item unanswered">5</div>
                    <div class="grid-item unanswered">6</div>
                    <div class="grid-item unanswered">7</div>
                    <div class="grid-item unanswered">8</div>
                    <div class="grid-item unanswered">9</div>
                    <div class="grid-item unanswered">10</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 错题本 -->
    <div id="wrongPage" class="page">
        <div class="header">
            <div class="header-left">
                <span class="header-title">错题本</span>
            </div>
            <div class="header-right">
                <div class="header-icon-btn">
                    <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                </div>
            </div>
        </div>
        
        <div class="filter-bar">
            <div class="filter-chip active">全部</div>
            <div class="filter-chip">高频错题</div>
            <div class="filter-chip">近期新增</div>
            <div class="filter-chip">未练习</div>
        </div>
        
       <div class="wrong-list">
            <div class="wrong-item">
                <div class="wrong-header">
                    <span class="wrong-subject">语文</span>
                    <span class="wrong-knowledge">汉字书写 · 难度：中等</span>
                </div>
                <div class="wrong-content">
                    下列句子中，加点词语使用恰当的一项是（ ）
                </div>
                <div class="wrong-footer">
                    <span class="wrong-times">已错3次</span>
                    <div class="practice-btn">立即练习</div>
                </div>
            </div>
            
            <div class="wrong-item">
                <div class="wrong-header">
                    <span class="wrong-subject">数学</span>
                    <span class="wrong-knowledge">一元二次方程 · 难度：困难</span>
                </div>
                <div class="wrong-content">
                    解方程：x² - 5x + 6 = 0
                </div>
                <div class="wrong-footer">
                    <span class="wrong-times">已错2次</span>
                    <div class="practice-btn">立即练习</div>
                </div>
            </div>
            
            <div class="wrong-item">
                <div class="wrong-header">
                    <span class="wrong-subject">英语</span>
                    <span class="wrong-knowledge">时态语法 · 难度：简单</span>
                </div>
                <div class="wrong-content">
                    She _____ (go) to school every day. 请用所给词的适当形式填空。
                </div>
                <div class="wrong-footer">
                    <span class="wrong-times">已错1次</span>
                    <div class="practice-btn">立即练习</div>
                </div>
            </div>
        </div>
        
        <!-- 拍照添加按钮 -->
        <div class="add-wrong-btn" onclick="showImgSelectModal()">
            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
        </div>
    </div>
    
    <!-- 图片选择弹窗 -->
    <div class="modal-overlay" id="modalOverlay" onclick="closeModal()"></div>
    <div class="img-select-modal" id="imgSelectModal">
        <div class="modal-title">添加错题</div>
        <div class="modal-options">
            <div class="modal-option" onclick="takePhoto()">
                <div class="modal-option-icon">
                    <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                </div>
                <div class="modal-option-text">
                    <h4>拍照上传</h4>
                    <p>拍摄试卷或练习册照片</p>
                </div>
            </div>
            <div class="modal-option" onclick="selectFromAlbum()">
                <div class="modal-option-icon" style="background: #FFF7E6;">
                    <svg viewBox="0 0 24 24" style="fill: #FF8C00;"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
                </div>
                <div class="modal-option-text">
                    <h4>从相册选择</h4>
                    <p>选择已保存的题目图片</p>
                </div>
            </div>
            <div class="modal-option" onclick="showToast('手动输入功能开发中')">
                <div class="modal-option-icon" style="background: #F6FFED;">
                    <svg viewBox="0 0 24 24" style="fill: #52C41A;"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
                </div>
                <div class="modal-option-text">
                    <h4>手动输入</h4>
                    <p>直接输入错题内容</p>
                </div>
            </div>
        </div>
        <div class="modal-cancel" onclick="closeModal()">取消</div>
    </div>
    
    <!-- 隐藏的文件输入框 -->
    <input type="file" id="imageInput" accept="image/*" capture="environment" style="display:none" onchange="handleImageSelect(event)">
    
    <!-- 框选裁剪页面 -->
    <div class="crop-page" id="cropPage">
        <div class="crop-header">
            <div class="crop-header-btn crop-cancel" onclick="cancelCrop()">取消</div>
            <div class="crop-header-btn crop-confirm" onclick="confirmCrop()">确定</div>
        </div>
        <div class="crop-canvas-wrap">
            <img id="cropImage" class="crop-canvas" src="" alt="待裁剪图片">
            <div class="crop-overlay" id="cropOverlay">
                <div class="crop-guide" id="cropGuide" style="left: 30px; top: 30px; width: 100px; height: 80px;"></div>
            </div>
        </div>
        <div class="crop-tip">拖动方框选择题目区域</div>
        <div class="crop-actions">
            <div class="crop-action-btn crop-retake" onclick="retakePhoto()">重新拍摄</div>
            <div class="crop-action-btn crop-ocr" onclick="startOCR()">识别题目</div>
        </div>
    </div>
    
    <!-- 人工修正页面 -->
    <div class="ocr-page" id="ocrPage">
        <div class="ocr-header">
            <div class="ocr-header-left">
                <div class="ocr-back-btn" onclick="backToWrong()">
                    <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                </div>
                <span class="ocr-header-title">题目识别</span>
            </div>
            <div class="ocr-confirm-btn" onclick="submitWrongQuestion()">加入错题本</div>
        </div>
        <div class="ocr-content">
            <div class="ocr-preview">
                <img id="ocrPreviewImg" src="" alt="裁剪后的图片">
            </div>
            <div class="ocr-accuracy">
                <span class="ocr-accuracy-label">识别准确率</span>
                <div class="ocr-accuracy-value">
                    <div class="ocr-accuracy-bar">
                        <div class="ocr-accuracy-fill" id="accuracyFill" style="width: 92%"></div>
                    </div>
                    <span class="ocr-accuracy-percent" id="accuracyPercent">92%</span>
                </div>
            </div>
            <div class="ocr-question-label">
                识别结果 <span class="required">*</span>
                <span style="font-size: 12px; color: var(--text-tertiary); font-weight: 400;">（可手动修正）</span>
            </div>
            <textarea class="ocr-textarea" id="ocrTextarea" placeholder="请输入或修正识别到的题目内容...">解方程：x² - 5x + 6 = 0
如识别结果有误，请手动修正后提交。准确率低于90%时会自动高亮提示。
题目分类
学科
难度