编辑页面

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.active {
            display: flex;
        }
        
        .login-header {
            padding: 60px 28px 40px;
            text-align: center;
            color: #fff;
            position: relative;
            z-index: 1;
        }
        
        .login-logo-wrap {
            width: 80px;
            height: 80px;
            background: #fff;
            border-radius: 20px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        
        .login-logo-wrap::after {
            content: '';
            position: absolute;
            inset: -3px;
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-radius: 24px;
        }
        
        .login-logo {
            width: 46px;
            height: 46px;
        }
        
        .login-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 6px;
        }
        
        .login-subtitle {
            font-size: 13px;
            opacity: 0.9;
            letter-spacing: 2px;
        }
        
        .login-form {
            flex: 1;
            background: #fff;
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            padding: 36px 24px 50px;
            position: relative;
            z-index: 1;
        }
        
        .login-tabs {
            display: flex;
            background: var(--bg-page);
            border-radius: var(--radius-sm);
            padding: 4px;
            margin-bottom: 28px;
        }
        
        .login-tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            font-size: 14px;
            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: 8px;
            display: block;
            font-weight: 500;
        }
        
        .login-input {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 15px;
            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 16px;
            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);
        }
        
        .login-btn {
            width: 100%;
            padding: 15px;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: var(--radius-md);
            font-size: 16px;
            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;
            margin-top: 20px;
        }
        
        .login-btn:disabled {
            background: #D0D0D0;
            box-shadow: none;
            cursor: not-allowed;
        }
        
        .login-btn:not(:disabled):active {
            transform: scale(0.98);
        }
        
        .login-btn.loading::after {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            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: -11px 0 0 -11px;
        }
        
        .login-btn.loading span {
            opacity: 0;
        }
        
        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        /* ==================== 首页 ==================== */
        .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: 24px 18px;
            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: 14px;
            margin-bottom: 18px;
            position: relative;
            z-index: 1;
        }
        
        .user-avatar-wrap {
            width: 58px;
            height: 58px;
            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;
        }
        
        .user-avatar {
            width: 34px;
            height: 34px;
            fill: #fff;
        }
        
        .user-info h2 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        
        .user-info p {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .user-info .subjects {
            font-size: 12px;
            opacity: 0.85;
            margin-top: 4px;
        }
        
        /* 统计卡片 */
        .stats-section {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 16px 12px;
            text-align: center;
            box-shadow: var(--shadow-sm);
        }
        
        .stat-value {
            font-size: 26px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        /* 快捷入口 */
        .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: 8px;
            cursor: pointer;
        }
        
        .quick-action-icon {
            width: 52px;
            height: 52px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
            transition: transform0.2s;
        }
        
        .quick-action-item:active .quick-action-icon {
            transform: scale(0.9);
        }
        
        .quick-action-icon svg {
            width: 26px;
            height: 26px;
        }
        
        .quick-action-label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        /* 数据卡片 */
        .data-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 18px;
            margin-bottom: 14px;
            box-shadow: var(--shadow-sm);
        }
        
        .data-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        
        .data-card-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .data-card-more {
            font-size: 12px;
            color: var(--text-tertiary);
            cursor: pointer;
        }
        
        /* 班级列表 */
        .class-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .class-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px;
            background: var(--bg-page);
            border-radius: var(--radius-sm);
        }
        
        .class-info h4 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .class-info p {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .class-stats {
            text-align: right;
        }
        
        .class-stats .num {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .class-stats .label {
            font-size: 11px;
            color: var(--text-tertiary);
        }
        
        /* 作业列表 */
        .homework-section {
            margin-bottom: 14px;
        }
        
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-title::before {
            content: '';
            width: 3px;
            height: 18px;
            background: var(--primary);
            border-radius: 2px;
        }
        
        .section-more {
            font-size: 12px;
            color: var(--text-tertiary);
            cursor: pointer;
        }
        
        .homework-list {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .homework-item {
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
        }
        
        .homework-item:last-child {
            border-bottom: none;
        }
        
        .homework-item:active {
            background: var(--bg-page);
        }
        
        .homework-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        
        .homework-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .homework-tag {
            font-size: 11px;
            padding: 3px 10px;
            border-radius: 4px;
            font-weight: 500;
        }
        
        .tag-waiting {
            background: #FFF7E6;
            color: var(--warning);
        }
        
        .tag-correcting {
            background: var(--primary-light);
            color: var(--primary);
        }
        
        .tag-done {
            background: #F6FFED;
            color: var(--success);
        }
        
        /* ==================== 学情分析 ==================== */
        .analysis-content {
            padding: 16px;
        }
        
        .analysis-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 18px;
            margin-bottom: 14px;
            box-shadow: var(--shadow-sm);
        }
        
        .analysis-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .analysis-title {
            font-size: 15px;
            font-weight: 600;
        }
        
        .analysis-tabs {
            display: flex;
            gap: 8px;
        }
        
        .analysis-tab {
            padding: 6px 14px;
            font-size: 12px;
            color: var(--text-secondary);
            background: var(--bg-page);
            border-radius: 16px;
            cursor: pointer;
        }
        
        .analysis-tab.active {
            background: var(--primary);
            color: #fff;
        }
        
        /*成绩分布图 */
        .score-chart {
            height: 180px;
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            padding: 10px 0;
        }
        
        .bar-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        
        .bar {
            width: 32px;
            background: linear-gradient(180deg, var(--primary) 0%, #6BA3E8 100%);
            border-radius: 6px 6px 0 0;
            transition: height 0.3s;
        }
        
        .bar-label {
            font-size: 11px;
            color: var(--text-tertiary);
        }
        
        .bar-value {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        /* 学生列表 */
        .student-list {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .student-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
        }
        
        .student-item:last-child {
            border-bottom: none;
        }
        
        .student-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }
        
        .student-avatar svg {
            width: 22px;
            height: 22px;
            fill: var(--primary);
        }
        
        .student-info {
            flex: 1;
        }
        
        .student-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .student-class {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .student-score {
            text-align: right;
        }
        
        .student-score .score {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .student-score .rank {
            font-size: 11px;
            color: var(--text-tertiary);
        }
        
        .warning-tag {
            font-size: 10px;
            padding: 2px 8px;
            background: #FFF0F0;
            color: var(--danger);
            border-radius: 4px;
            margin-left: 8px;
        }
        
        /* ==================== 作业管理 ==================== */
        .filter-bar {
            display: flex;
            gap: 8px;
            padding: 14px 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: 8px 18px;
            background: var(--bg-page);
            border-radius: 20px;
            font-size: 13px;
            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: 18px;
            box-shadow: var(--shadow-sm);
            cursor: pointer;
        }
        
        .homework-card:active {
            transform: scale(0.99);
        }
        
        .card-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .card-title {
            font-size: 15px;
            font-weight: 600;
            flex: 1;
        }
        
        .card-meta {
            display: flex;
            gap: 8px;
        }
        
        .card-info {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 14px;
        }
        
        .card-tag {
            font-size: 12px;
            padding: 5px 12px;
            background: var(--bg-page);
            border-radius: 6px;
            color: var(--text-secondary);
        }
        
        .card-progress {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .progress-bar {
            flex: 1;
            height: 6px;
            background: var(--primary-light);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: var(--primary);
            border-radius: 3px;
        }
        
        .progress-text {
            font-size: 12px;
            color: var(--text-tertiary);
            flex-shrink: 0;
        }
        
        .card-actions {
            display: flex;
            gap: 10px;
            margin-top: 14px;
        }
        
        .card-action {
            flex: 1;
            padding: 12px;
            text-align: center;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .action-primary {
            background: var(--primary);
            color: #fff;
        }
        
        .action-secondary {
            background: var(--primary-light);
            color: var(--primary);
        }
        
        /* ==================== 题库组卷 ==================== */
        .question-bank-content {
            padding: 16px;
        }
        
        .bank-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: var(--shadow-sm);
        }
        
        .bank-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .bank-title {
            font-size: 15px;
            font-weight: 600;
        }
        
        .bank-count {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .bank-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .bank-tag {
            font-size: 11px;
            padding: 4px 10px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 4px;
        }
        
        /* ==================== 数据统计 ==================== */
        .stat-section {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 18px;
            margin-bottom: 14px;
            box-shadow: var(--shadow-sm);
        }
        
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
            margin-top: 14px;
        }
        
        .stat-item {
            text-align: center;
            padding: 14px;
            background: var(--bg-page);
            border-radius: var(--radius-sm);
        }
        
        .stat-item .value {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .stat-item .label {
            font-size: 12px;
            color: var(--text-tertiary);
            margin-top: 4px;
        }
        
        /* ==================== 我的 ==================== */
        .my-header {
            background: linear-gradient(135deg, var(--primary) 0%, #6BA3E8 50%, #8CBEF5 100%);
            padding: 40px 18px 50px;
            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: 16px;
            position: relative;
            z-index: 1;
        }
        
        .my-avatar-wrap {
            width: 68px;
            height: 68px;
            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;
        }
        
        .my-avatar {
            width: 40px;
            height: 40px;
            fill: #fff;
        }
        
        .my-info h2 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        
        .my-info p {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .my-info .school {
            font-size: 12px;
            opacity: 0.85;
            margin-top: 4px;
        }
        
        .my-menu {
            padding: 0 16px 16px;
            margin-top: -24px;
        }
        
        .menu-group {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            overflow: hidden;
            margin-bottom: 12px;
            box-shadow: var(--shadow-sm);
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px 14px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-item:active {
            background: var(--bg-page);
        }
        
        .menu-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-sm);
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }
        
        .menu-icon svg {
            width: 20px;
            height: 20px;
            fill: var(--primary);
        }
        
        .menu-text {
            flex: 1;
            font-size: 15px;
            font-weight: 500;
        }
        
        .menu-arrow {
            width: 18px;
            height: 18px;
            fill: var(--text-tertiary);
        }
        
        .menu-badge {
            padding: 3px 10px;
            background: var(--danger);
            color: #fff;
            border-radius: 10px;
            font-size: 11px;
            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: 3px;
            cursor: pointer;
            padding: 6px 0;
        }
        
        .tab-icon {
            width: 24px;
            height: 24px;
            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">
                    <rect width="48" height="48" rx="12" fill="#4A90E2"/>
                    <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>
            
            <button class="login-btn" id="loginBtn"><span>登 录</span></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>三年级数学</p>
                        <p class="subjects">任教：3班、4班、5班</p>
                    </div>
                </div>
            </div>
            
            <!-- 统计卡片 -->
            <div class="stats-section">
                <div class="stat-card">
                    <div class="stat-value">128</div>
                    <div class="stat-label">本周作业</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">96%</div>
                    <div class="stat-label">完成率</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">24</div>
                    <div class="stat-label">待批改</div>
                </div>
            </div>
            
            <!-- 快捷入口 -->
            <div class="quick-actions">
                <div class="quick-action-item" onclick="switchTab(2)">
                    <div class="quick-action-icon" style="background: linear-gradient(145deg, #EEF4FD 0%, #D5E6FF 100%);">
                        <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(3)">
                    <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="M9 11H7v6c0 .55.45 1 1 1h2v-4.5l44V7l-4 4zm8-9h-2V2h-2v2H9V2H7v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 14.93l-4-4V6.07c.59-.34 1-.99 1-1.670-1.1-.9-2-2-2s-2 .9-2 2c0 .68.41 1.33 1 1.67v5.93c-.59.34-1 .99-1 1.67 0 1.1.9 2 2 2s2-.9 2-2c0-.68-.41-1.33-1-1.67z"/></svg>
                    </div>
                    <span class="quick-action-label">批阅作业</span>
                </div>
                <div class="quick-action-item" onclick="switchTab(1)">
                    <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-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></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="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>
            
            <!-- 待批改作业 -->
            <div class="homework-section">
                <div class="section-header">
                    <span class="section-title">待批改作业</span>
                    <span class="section-more" onclick="switchTab(3)">查看全部 ></span>
                </div>
                
                <div class="homework-list">
                    <div class="homework-item" onclick="showToast('进入批阅')">
                        <div class="homework-name">第三单元测试卷</div>
                        <div class="homework-meta">
                            <span>三年级3班 · 42人</span>
                            <span class="homework-tag tag-correcting">批阅中</span>
                        </div>
                    </div>
                    <div class="homework-item" onclick="showToast('进入批阅')">
                        <div class="homework-name">课后练习题</div>
                        <div class="homework-meta">
                            <span>三年级4班 · 40人</span>
                            <span class="homework-tag tag-waiting">待批改</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 班级概况 -->
            <div class="data-card">
                <div class="data-card-header">
                    <span class="data-card-title">班级概况</span>
                    <span class="data-card-more">管理班级 ></span>
                </div>
                <div class="class-list">
                    <div class="class-item">
                        <div class="class-info">
                            <h4>三年级3班</h4>
                            <p>本周作业完成率 98%</p>
                        </div>
                        <div class="class-stats">
                            <div class="num">42</div>
                            <div class="label">人</div>
                        </div>
                    </div>
                    <div class="class-item">
                        <div class="class-info">
                            <h4>三年级4班</h4>
                            <p>本周作业完成率 95%</p>
                        </div>
                        <div class="class-stats">
                            <div class="num">40</div>
                            <div class="label">人</div>
                        </div>
                    </div>
                    <div class="class-item">
                        <div class="class-info">
                            <h4>三年级5班</h4>
                            <p>本周作业完成率 100%</p>
                        </div>
                        <div class="class-stats">
                            <div class="num">41</div>
                            <div class="label">人</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 学情分析 -->
    <div id="analysisPage" 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-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
                </div>
            </div>
        </div>
        
        <div class="analysis-content">
            <!-- 成绩分布 -->
            <div class="analysis-card">
                <div class="analysis-header">
                    <span class="analysis-title">班级成绩分布</span>
                    <div class="analysis-tabs">
                        <span class="analysis-tab active">本周</span>
                        <span class="analysis-tab">本月</span>
                    </div>
                </div>
                <div class="score-chart">
                    <div class="bar-group">
                        <div class="bar-value">5人</div>
                        <div class="bar" style="height: 40px;"></div>
                        <span class="bar-label">60分以下</span>
                    </div>
                    <div class="bar-group">
                        <div class="bar-value">8人</div>
                        <div class="bar" style="height: 64px;"></div>
                        <span class="bar-label">60-70分</span>
                    </div>
                    <div class="bar-group">
                        <div class="bar-value">15人</div>
                        <div class="bar" style="height: 120px;"></div>
                        <span class="bar-label">70-80分</span>
                    </div>
                    <div class="bar-group">
                        <div class="bar-value">20人</div>
                        <div class="bar" style="height: 160px;"></div>
                        <span class="bar-label">80-90分</span>
                    </div>
                    <div class="bar-group">
                        <div class="bar-value">12人</div>
                        <div class="bar" style="height: 96px;"></div>
                        <span class="bar-label">90-100分</span>
                    </div>
                </div>
            </div>
            
            <!-- 班级统计 -->
            <div class="analysis-card">
                <div class="analysis-header">
                    <span class="analysis-title">班级平均分对比</span>
                </div>
                <div class="stat-grid">
                    <div class="stat-item">
                        <div class="value">85.6</div>
                        <div class="label">三年级3班</div>
                    </div>
                    <div class="stat-item">
                        <div class="value">83.2</div>
                        <div class="label">三年级4班</div>
                    </div>
                    <div class="stat-item">
                        <div class="value">88.1</div>
                        <div class="label">三年级5班</div>
                    </div>
                    <div class="stat-item">
                        <div class="value">86.4</div>
                        <div class="label">年级平均</div>
                    </div>
                </div>
            </div>
            
            <!-- 偏科预警 -->
            <div class="analysis-card">
                <div class="analysis-header">
                    <span class="analysis-title">偏科预警</span>
                    <span style="font-size: 12px; color: var(--danger);">3人预警</span>
                </div>
                <div class="student-list">
                    <div class="student-item">
                        <div class="student-avatar">
                            <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="student-info">
                            <div class="student-name">张小红<span class="warning-tag">数学偏弱</span></div>
                            <div class="student-class">三年级3班 · 数学62分</div>
                        </div>
                    </div>
                    <div class="student-item">
                        <div class="student-avatar">
                            <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="student-info">
                            <div class="student-name">李明 <span class="warning-tag">英语偏弱</span></div>
                            <div class="student-class">三年级4班 · 英语58分</div>
                        </div>
                    </div>
                    <div class="student-item">
                        <div class="student-avatar">
                            <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="student-info">
                            <div class="student-name">王强 <span class="warning-tag">数学偏弱</span></div>
                            <div class="student-class">三年级5班 · 数学65分</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 薄弱知识点 -->
            <div class="analysis-card">
                <div class="analysis-header">
                    <span class="analysis-title">班级薄弱知识点</span>
                </div>
                <div class="bank-tags">
                    <span class="bank-tag">一元二次方程 - 错误率68%</span>
                    <span class="bank-tag">分数运算 - 错误率55%</span>
                    <span class="bank-tag">几何证明 - 错误率48%</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" onclick="showToast('新建作业')">
                    <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></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 class="filter-chip">已完成</div>
        </div>
        
        <div class="homework-cards">
            <div class="homework-card" onclick="showToast('进入批阅')">
                <div class="card-header">
                    <span class="card-title">第三单元综合测试</span>
                    <div class="card-meta">
                        <span class="homework-tag tag-correcting">批阅中</span>
                    </div>
                </div>
                <div class="card-info">
                    <span class="card-tag">三年级3班</span>
                    <span class="card-tag">满分100分</span>
                    <span class="card-tag">客观题已判</span>
                </div>
                <div class="card-progress">
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 65%;"></div>
                    </div>
                    <span class="progress-text">已提交 27/42</span>
                </div>
                <div class="card-actions">
                    <div class="card-action action-primary">继续批阅</div>
                </div>
            </div>
            
            <div class="homework-card" onclick="showToast('查看详情')">
                <div class="card-header">
                    <span class="card-title">课后练习题</span>
                    <div class="card-meta">
                        <span class="homework-tag tag-done">已完成</span>
                    </div>
                </div>
                <div class="card-info">
                    <span class="card-tag">三年级4班</span>
                    <span class="card-tag">平均分88.5</span>
                </div>
                <div class="card-progress">
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 100%;"></div>
                    </div>
                    <span class="progress-text">已完成</span>
                </div>
                <div class="card-actions">
                    <div class="card-action action-secondary">查看报告</div>
                    <div class="card-action action-secondary">导出成绩</div>
                </div>
            </div>
            
            <div class="homework-card" onclick="showToast('编辑作业')">
                <div class="card-header">
                    <span class="card-title">第四单元预习</span>
                    <div class="card-meta">
                        <span class="homework-tag tag-waiting">待发布</span>
                    </div>
                </div>
                <div class="card-info">
                    <span class="card-tag">三年级5班</span>
                    <span class="card-tag">限时30分钟</span>
                </div>
                <div class="card-actions">
                    <div class="card-action action-primary">发布作业</div>
                    <div class="card-action action-secondary">编辑</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 题库组卷 -->
    <div id="bankPage" class="page">
        <div class="header">
            <div class="header-left">
                <span class="header-title">题库组卷</span>
            </div>
            <div class="header-right">
                <div class="header-icon-btn" onclick="showToast('新建题目')">
                    <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></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>
        
        <div class="question-bank-content">
            <div class="analysis-card">
                <div class="analysis-header">
                    <span class="analysis-title">智能组卷</span>
                </div>
                <div class="bank-tags" style="margin-bottom: 12px;">
                    <span class="bank-tag">按章节选题</span>
                    <span class="bank-tag">按知识点</span>
                    <span class="bank-tag">按难度</span>
                </div>
                <div class="card-actions">
                    <div class="card-action action-primary" style="flex: none;">开始智能组卷</div>
                </div>
            </div>
            
            <div class="bank-card">
                <div class="bank-header">
                    <span class="bank-title">我的题库</span>
                    <span class="bank-count">共 256 题</span>
                </div>
                <div class="bank-tags">
                    <span class="bank-tag">三年级上</span>
                    <span class="bank-tag">方程与函数</span>
                    <span class="bank-tag">几何图形</span>
                    <span class="bank-tag">应用题</span>
                </div>
            </div>
            
            <div class="bank-card">
                <div class="bank-header">
                    <span class="bank-title">高频错题库</span>
                    <span class="bank-count">共 48 题</span>
                </div>
                <div class="bank-tags">
                    <span class="bank-tag">一元二次方程</span>
                    <span class="bank-tag">分数运算</span>
                    <span class="bank-tag">几何证明</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 数据统计 -->
    <div id="statPage" class="page">
        <div class="header">
            <div class="header-left">
                <span class="header-title">数据统计</span>
            </div>
            <div class="header-right">
                <div class="header-icon-btn" onclick="showToast('导出数据')">
                    <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></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="analysis-content">
            <div class="stat-section">
                <span class="analysis-title">工作效率统计</span>
                <div class="stat-grid">
                    <div class="stat-item">
                        <div class="value">12</div>
                        <div class="label">布置次数</div>
                    </div>
                    <div class="stat-item">
                        <div class="value">28</div>
                        <div class="label">批改份数</div>
                    </div>
                    <div class="stat-item">
                        <div class="value">8.5分钟</div>
                        <div class="label">平均批改时长</div>
                    </div>
                    <div class="stat-item">
                        <div class="value">96%</div>
                        <div class="label">作业完成率</div>
                    </div>
                </div>
            </div>
            
            <div class="stat-section">
                <div class="analysis-header">
                    <span class="analysis-title">导出功能</span>
                </div>
                <div class="card-actions" style="margin-top: 12px;">
                    <div class="card-action action-secondary">导出成绩表</div>
                    <div class="card-action action-secondary">导出学情报告</div>
                </div>
               <div class="card-actions" style="margin-top: 10px;">
                    <div class="card-action action-secondary">导出错题统计</div>
                    <div class="card-action action-secondary">导出效率排名</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 我的 -->
    <div id="myPage" class="page">
        <div class="my-header">
            <div class="my-user">
                <div class="my-avatar-wrap">
                    <svg class="my-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="my-info">
                    <h2>李老师</h2>
                    <p>工号：T2024001</p>
                    <p class="school">北京市第一小学</p>
                </div>
            </div>
        </div>
        
        <div class="my-menu">
            <div class="menu-group">
                <div class="menu-item" onclick="showToast('功能开发中')">
                    <div class="menu-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>
                    <span class="menu-text">个人信息</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </div>
                <div class="menu-item" onclick="showToast('功能开发中')">
                    <div class="menu-icon">
                        <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>
                    <span class="menu-text">班级管理</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </div>
                <div class="menu-item" onclick="showToast('功能开发中')">
                    <div class="menu-icon">
                        <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>
                    <span class="menu-text">系统消息</span>
                    <span class="menu-badge">5</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </div>
            </div>
            
            <div class="menu-group">
                <div class="menu-item" onclick="showToast('功能开发中')">
                    <div class="menu-icon">
                        <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.240-.44.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22l-1.91 3.32c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
                    </div>
                    <span class="menu-text">设置</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </div>
                <div class="menu-item" onclick="showToast('功能开发中')">
                    <div class="menu-icon">
                        <svg viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
                    </div>
                    <span class="menu-text">关于与帮助</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </div>
            </div>
            
            <div class="menu-group">
                <div class="menu-item" onclick="logout()">
                    <div class="menu-icon" style="background: #FFF0F0;">
                        <svg viewBox="0 0 24 24" style="fill: #FF4757;"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>
                    </div>
                    <span class="menu-text" style="color: #FF4757;">退出登录</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar" id="tabBar" style="display: none;">
        <div class="tab-item" data-tab="home">
            <svg class="tab-icon" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
            <span class="tab-label">首页</span>
        </div>
        <div class="tab-item" data-tab="analysis">
            <svg class="tab-icon" 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-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
            <span class="tab-label">分析</span>
        </div>
        <div class="tab-item" data-tab="homework">
            <svg class="tab-icon" 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>
            <span class="tab-label">作业</span>
        </div>
        <div class="tab-item" data-tab="bank">
            <svg class="tab-icon" viewBox="0 0 24 24"><path d="M21 5c-1.11-.35-2.3-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1.05.15.1.2.1H13c.35 0 .65-.2.86-.5.16-.29.26-.62.26-1 0-1.55-1.25-2.45-2.5-3.451.05-1.55 2.35-2.35 3.5-3.251.651.3 3.45 2.05 5.55 2.05 2.55 0 5.15-.9 6.95-2.65L21 18v-6.5c-.3-.35-.6-.7-.95-1zM16.5 18.5c-1.35 1.1-3.15 1.65-5.5 1.65-2.4 0-4.4-.65-5.5-1.65V6.35c1.1 1.1 3.25 1.65 5.5 1.65 2.05 0 3.95-.5 5.5-1.5v12.5z"/></svg>
            <span class="tab-label">题库</span>
        </div>
        <div class="tab-item" data-tab="my">
            <svg class="tab-icon" 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>
            <span class="tab-label">我的</span>
        </div>
    </div>
    
    <!-- Toast提示 -->
    <div class="toast" id="toast"></div>
    <script>
        let currentUser = null;
        let isLoggedIn = false;
        let currentLoginTab = 'account';
        
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
            
            const tabBar = document.getElementById('tabBar');
            if (pageId === 'loginPage') {
                tabBar.style.display = 'none';
            } else {
                tabBar.style.display = 'flex';
            }
        }
        
        function switchTab(tab) {
            const tabs = ['home', 'analysis', 'homework', 'bank', 'my'];
            const pages = ['homePage', 'analysisPage', 'homeworkPage', 'bankPage', 'myPage'];
            
            if (typeof tab === 'string') {
                tab = tabs.indexOf(tab);
            }
            
            document.querySelectorAll('.tab-item').forEach((t, i) => {
                t.classList.toggle('active', i === tab);
            });
            
            showPage(pages[tab]);
        }
        
        document.querySelectorAll('.tab-item').forEach((item, index) => {
            item.addEventListener('click', () => switchTab(index));
        });
        
        function checkLoginStatus() {
            const savedUser = localStorage.getItem('ai_mark_teacher');
            if (savedUser) {
                currentUser = JSON.parse(savedUser);
                isLoggedIn = true;
                showPage('homePage');
                document.getElementById('tabBar').style.display = 'flex';
                document.querySelector('.tab-item[data-tab="home"]').classList.add('active');
                updateUserInfo();
                return true;
            }
            return false;
        }
        
        function updateUserInfo() {
            if (!currentUser) return;
        }
        
        document.querySelectorAll('.login-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.login-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                const smsGroup = document.getElementById('smsCodeGroup');
                const passwordGroup = document.getElementById('passwordGroup');
                const accountInput = document.getElementById('loginAccount');
                
                if (this.dataset.tab === 'sms') {
                    smsGroup.style.display = 'flex';
                    passwordGroup.style.display = 'none';
                    accountInput.placeholder = '请输入手机号';
                    currentLoginTab = 'sms';
                } else {
                    smsGroup.style.display = 'none';
                    passwordGroup.style.display = 'block';
                    accountInput.placeholder = '请输入工号/手机号';
                    currentLoginTab = 'account';
                }
            });
        });
        
        document.getElementById('loginBtn').addEventListener('click', function() {
            const account = document.getElementById('loginAccount').value.trim();
            const password = document.getElementById('loginPassword').value.trim();
            
            if (currentLoginTab === 'account') {
                if (!account) { showToast('请输入工号/手机号'); return; }
                if (!password) { showToast('请输入密码'); return; }
            } else {
                const smsCode = document.getElementById('smsCode').value.trim();
                if (!account) { showToast('请输入手机号'); return; }
                if (!smsCode) { showToast('请输入验证码'); return; }
            }
            
            const btn = this;
            btn.classList.add('loading');
            btn.disabled = true;
            
            setTimeout(() => {
                currentUser = {
                    name: '李老师',
                    teacherId: 'T2024001',
                    subjects: '数学',
                    school: '北京市第一小学'
                };
                
                localStorage.setItem('ai_mark_teacher', JSON.stringify(currentUser));
                isLoggedIn = true;
                
                btn.classList.remove('loading');
                showToast('登录成功');
                
                setTimeout(() => {
                    showPage('homePage');
                    document.getElementById('tabBar').style.display = 'flex';
                    document.querySelector('.tab-item[data-tab="home"]').classList.add('active');
                    updateUserInfo();
                    
                    document.getElementById('loginAccount').value = '';
                    document.getElementById('loginPassword').value = '';
                    document.getElementById('smsCode').value = '';
                    btn.disabled = false;
                }, 600);
            }, 1200);
        });
        
        document.getElementById('sendCodeBtn').addEventListener('click', function() {
            this.disabled = true;
            let count = 60;
            this.textContent = `${count}s后重发`;
            
            const timer = setInterval(() => {
                count--;
                if (count <= 0) {
                    clearInterval(timer);
                    this.textContent = '获取验证码';
                    this.disabled = false;
                } else {
                    this.textContent = `${count}s后重发`;
                }
            }, 1000);
        });
        
        document.querySelectorAll('.filter-chip').forEach(chip => {
            chip.addEventListener('click', function() {
                this.parentElement.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        function logout() {
            currentUser = null;
            isLoggedIn = false;
            localStorage.removeItem('ai_mark_teacher');
            showPage('loginPage');
            document.getElementById('tabBar').style.display = 'none';
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            showToast('已退出登录');
        }
        
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        document.getElementById('tabBar').style.display = 'none';
        checkLoginStatus();
    </script>
</body>
</html>