编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学术期刊平台 - 权威学术资源发布与交流平台</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary: #8B0000;
            --primary-dark: #6B0000;
            --primary-light: #fdf2f2;
            --gold: #C5A572;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --bg: #F8F7F4;
            --white: #ffffff;
            --text: #2D2D2D;
            --text-secondary: #666666;
            --border: #E8E4DE;
        }
        body {
            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
        }
        a { text-decoration: none; color: inherit; }
        /* Page Transition */
        .page-section {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            display: none;
        }
        .page-section.active {
            opacity: 1;
            transform: translateY(0);
            display: block;
        }
        /* Top Bar */
        .top-bar {
            background: var(--text);
            color: white;
            padding: 8px 60px;
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }
        .top-bar a { color: rgba(255,255,255,0.85); transition: color 0.2s; cursor: pointer; }
        .top-bar a:hover { color: white; }
        .top-bar-right { display: flex; gap: 16px; align-items: center; }
        .top-bar-right a { padding: 0 8px; border-right: 1px solid rgba(255,255,255,0.3); cursor: pointer; }
        .top-bar-right a:last-child { border: none; }
        /* Header */
        .site-header {
            background: var(--white);
            padding: 0 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 90px;
            border-bottom: 3px solid var(--primary);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .logo-area { display: flex; align-items: center; gap: 16px; cursor: pointer; }
        .logo-icon {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
        }
        .logo-text h1 { font-size: 22px; font-weight: 700; letter-spacing: 2px; }
        .logo-text span { font-size: 12px; color: var(--text-secondary); letter-spacing: 1px; }
        .main-nav { display: flex; gap: 4px; }
        .main-nav a {
            padding: 28px 20px;
            font-size: 15px;
            font-weight: 500;
            color: var(--text);
            position: relative;
            transition: all 0.3s;
            cursor: pointer;
        }
        .main-nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            background: var(--primary);
            transition: width 0.3s;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--primary); }
        .main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
        .header-actions { display: flex; gap: 12px; align-items: center; }
        .search-btn {
            width: 40px;
            height: 40px;
            border: 1px solid var(--border);
            border-radius: 50%;
            background: var(--bg);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .search-btn:hover { background: var(--primary-light); border-color: var(--primary); }
        .login-btn {
            padding: 10px 24px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .login-btn:hover { background: var(--primary-dark); }
        /* Banner */
        .banner {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, #4a0000 100%);
            padding: 60px 60px 80px;
            position: relative;
            overflow: hidden;
        }
        .banner-content { display: flex; align-items: center; gap: 60px; max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
        .banner-text { flex: 1; color: white; }
        .banner-text h2 { font-size: 42px; font-weight: 700; margin-bottom: 20px; line-height: 1.3; }
        .banner-text p { font-size: 16px; opacity: 0.9; margin-bottom: 32px; max-width: 500px; }
        .banner-btns { display: flex; gap: 16px; }
        .banner-btn {
            padding: 14px 32px;
            border-radius: 4px;
            font-size: 15px;
            font-weight: 500;
cursor: pointer;
            transition: all 0.3s;
            border: none;
        }
        .banner-btn.primary { background: white; color: var(--primary); }
        .banner-btn.primary:hover { background: #f5f0e6; transform: translateY(-2px); }
        .banner-btn.secondary { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); }
        .banner-btn.secondary:hover { border-color: white; background: rgba(255,255,255,0.1); transform: translateY(-2px); }
        .banner-visual { width: 420px; height: 280px; background: rgba(255,255,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
        .banner-visual-inner { text-align: center; color: white; }
        .banner-visual-inner .icon { font-size: 72px; margin-bottom: 16px; }
        /* Quick Stats */
        .quick-stats { display: flex; justify-content: center; margin-top: -40px; position: relative; z-index: 2; max-width: 1200px; margin: -40px auto 0; padding: 0 60px; }
        .quick-stat { flex: 1; background: var(--white); padding: 32px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.08); cursor: pointer; transition: all 0.3s; border-right: 1px solid var(--border); }
        .quick-stat:first-child { border-radius: 8px 0 0 8px; }
        .quick-stat:last-child { border-radius: 0 8px 8px 0; border-right: none; }
        .quick-stat:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
        .quick-stat .num { font-size: 36px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
        .quick-stat .label { font-size: 14px; color: var(--text-secondary); }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 60px; }
        .section { padding: 60px 0; }
        .section-header { text-align: center; margin-bottom: 48px; }
        .section-header h2 { font-size: 28px; font-weight: 600; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 12px; }
        .section-header h2::before, .section-header h2::after { content: ''; width: 40px; height: 2px; background: var(--gold); }
        .section-header p { color: var(--text-secondary); font-size: 15px; }
        /* Chat List */
        .chat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        .chat-card { background: var(--white); border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); cursor: pointer; transition: all 0.3s; border: 2px solid transparent; }
        .chat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-color: var(--gold); }
        .chat-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
        .chat-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .chat-avatar.academic { background: linear-gradient(135deg, #667eea, #764ba2); }
        .chat-avatar.daily { background: linear-gradient(135deg, #f093fb, #f5576c); }
        .chat-info h3 { font-size: 17px; margin-bottom: 4px; }
        .chat-info span { font-size: 13px; color: var(--text-secondary); }
        .chat-preview { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
        .chat-meta { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
        .chat-badge { background: var(--primary); color: white; padding: 4px 10px; border-radius: 12px; font-size: 11px; }
        /* Forum Section */
        .forum-list { display: flex; flex-direction: column; gap: 16px; }
        .forum-item { background: var(--white); border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); cursor: pointer; transition: all 0.3s; display: flex; gap: 20px; }
        .forum-item:hover { transform: translateX(8px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
        .forum-votes { text-align: center; min-width: 60px; }
        .forum-votes .num { font-size: 24px; font-weight: 700; color: var(--primary); }
        .forum-votes .label { font-size: 12px; color: var(--text-secondary); }
        .forum-content { flex: 1; }
        .forum-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; transition: color 0.2s; }
        .forum-item:hover .forum-title { color: var(--primary); }
        .forum-excerpt { font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; }
        .forum-tags { display: flex; gap: 8px; flex-wrap: wrap; }
        .forum-tag { padding: 4px 12px; background: var(--bg); border-radius: 12px; font-size: 12px; color: var(--text-secondary); }
        .forum-author { display: flex; align-items: center; gap: 12px; margin-left: auto; }
        .forum-author-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-light), #f0e6e6); display: flex; align-items: center; justify-content: center; }
        .forum-author-info { text-align: right; }
        .forum-author-info .name { font-size: 14px; font-weight: 500; }
        .forum-author-info .time { font-size: 12px; color: var(--text-secondary); }
        /* News Grid */
        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .news-card { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: all 0.3s; cursor: pointer; }
        .news-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
        .news-img { height: 180px; background: linear-gradient(135deg, var(--primary-light), #f0e6e6); display: flex; align-items: center; justify-content: center; font-size: 64px; }
        .news-content { padding: 24px; }
        .news-tag { display: inline-block; padding: 4px 12px; background: var(--primary-light); color: var(--primary); font-size: 12px; border-radius: 4px; margin-bottom: 12px; }
        .news-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; line-height: 1.5; transition: color 0.2s; }
        .news-card:hover .news-title { color: var(--primary); }
        .news-meta { display: flex; gap: 16px; font-size: 13px; color: var(--text-secondary); }

        /* ====== 期刊浏览页面详细样式 ====== */
        .journals-filters { display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
        .filter-group { display: flex; align-items: center; gap: 8px; }
        .filter-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
        .filter-select {
            padding: 10px 16px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            background: white;
            cursor: pointer;
            min-width: 140px;
            transition: all 0.2s;
        }
        .filter-select:hover { border-color: var(--primary); }
        .filter-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(139,0,0,0.1); }
        .search-input {
            flex: 1;
            padding: 10px 16px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            max-width: 300px;
        }
        .search-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(139,0,0,0.1); }
        .search-btn-small {
            padding: 10px 20px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .search-btn-small:hover { background: var(--primary-dark); }
        .journal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .journal-card {
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        .journal-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); border-color: var(--gold); }
        .journal-card-img { height: 140px; background: linear-gradient(135deg, var(--primary-light), #f0e6e6); display: flex; align-items: center; justify-content: center; font-size: 56px; }
        .journal-card-body { padding: 20px; }
        .journal-card-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; transition: color 0.2s; }
        .journal-card:hover .journal-card-title { color: var(--primary); }
        .journal-card-issn { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
        .journal-card-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
        .journal-badge { padding: 4px 10px; border-radius: 4px; font-size: 12px; }
        .journal-badge.sci { background: #dbeafe; color: #1d4ed8; }
        .journal-badge.ei { background: #d1fae5; color: #059669; }
        .journal-badge.core { background: #fef3c7; color: #d97706; }
        .journal-card-stats { display: flex; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
        .journal-stat { text-align: center; flex: 1; }
        .journal-stat-value { font-size: 18px; font-weight: 700; color: var(--primary); }
        .journal-stat-label { font-size: 11px; color: var(--text-secondary); }
        .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
        .page-btn {
            width: 40px;
            height: 40px;
            border: 1px solid var(--border);
            background: white;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        .page-btn:hover { border-color: var(--primary); color: var(--primary); }
        .page-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
        .page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .journal-detail-panel {
            position: fixed;
            top: 0;
            right: -600px;
            width: 580px;
            height: 100vh;
            background: white;
            box-shadow: -4px 0 30px rgba(0,0,0,0.15);
            z-index: 1000;
            transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
        }
        .journal-detail-panel.active { right: 0; }
        .panel-header { background: var(--primary); color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
        .panel-header h3 { font-size: 20px; }
        .panel-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; color: white; font-size: 20px; cursor: pointer; }
        .panel-close:hover { background: rgba(255,255,255,0.3); }
        .panel-body { padding: 24px; }
        .panel-section { margin-bottom: 24px; }
        .panel-section-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
        .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .info-item { display: flex; gap: 8px; }
        .info-label { font-size: 13px; color: var(--text-secondary); min-width: 80px; }
        .info-value { font-size: 13px; font-weight: 500; }
        .btn-primary { padding: 12px 24px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.2s; width: 100%; margin-top: 16px; }
        .btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { padding: 12px 24px; background: white; color: var(--text); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.2s; width: 100%; margin-top: 12px; }
        .btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

        /* ====== 投稿通道页面详细样式 ====== */
        .submission-steps { display: flex; justify-content: center; gap: 0; margin-bottom: 48px; }
        .step-item { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; max-width: 200px; }
        .step-item:not(:last-child)::after { content: ''; position: absolute; top: 30px; left: 60%; width: 80%; height: 2px; background: var(--border); }
        .step-item.completed:not(:last-child)::after { background: var(--primary); }
        .step-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--bg);
            border: 3px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 12px;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            z-index: 1;
        }
        .step-item:hover .step-circle { border-color: var(--primary); transform: scale(1.1); }
        .step-item.completed .step-circle { background: var(--primary); border-color: var(--primary); }
        .step-item.active .step-circle { background: var(--primary); border-color: var(--primary); animation: pulse 2s infinite; }
        .step-label { font-size: 14px; font-weight: 500; text-align: center; }
        .step-item.completed .step-label { color: var(--primary); }
        .submission-form { background: white; border-radius: 12px; padding: 40px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); max-width: 800px; margin: 0 auto; }
        .form-title { font-size: 20px; font-weight: 600; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--border); }
        .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
        .form-group { margin-bottom: 20px; }
        .form-label { font-size: 14px; font-weight: 500; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
        .form-label .required { color: var(--danger); }
        .form-input { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; transition: all 0.2s; }
        .form-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(139,0,0,0.1); }
        .form-select { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: white; }
        .form-textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; min-height: 120px; resize: vertical; }
        .file-upload {
            border: 2px dashed var(--border);
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg);
        }
        .file-upload:hover { border-color: var(--primary); background: var(--primary-light); }
        .file-upload-icon { font-size: 48px; margin-bottom: 12px; }
        .file-upload-text { font-size: 14px; color: var(--text-secondary); }
        .file-upload-text span { color: var(--primary); }
        .form-actions { display: flex; gap: 16px; margin-top: 32px; }
        .btn-save { flex: 1; padding: 14px; background: white; color: var(--text); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 15px; transition: all 0.2s; }
        .btn-save:hover { border-color: var(--primary); color: var(--primary); }
        .btn-submit { flex: 2; padding: 14px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: 500; transition: all 0.2s; }
        .btn-submit:hover { background: var(--primary-dark); }
        .progress-bar { height: 8px; background: var(--border); border-radius: 4px; margin-bottom: 24px; overflow: hidden; }
        .progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s; }
        .progress-text { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
        .checklist { background: var(--bg); border-radius: 8px; padding: 20px; margin-bottom: 24px; }
        .checklist-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
        .checklist-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; cursor: pointer; }
        .checklist-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
        .checklist-item.completed { color: var(--success); }
        .checklist-item.completed .check-icon { color: var(--success); }

        /* Chat Room */
        .chat-room {
            position: fixed;
            right: -420px;
            top: 0;
            width: 400px;
            height: 100vh;
            background: var(--white);
            box-shadow: -4px 0 20px rgba(0,0,0,0.15);
            z-index: 1000;
            transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }
        .chat-room.active { right: 0; }
        .chat-room-header { background: var(--primary); color: white; padding: 20px; display: flex; align-items: center; justify-content: space-between; }
        .chat-room-header h3 { font-size: 18px; }
        .chat-room-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; color: white; font-size: 18px; cursor: pointer; }
        .chat-room-body { flex: 1; overflow-y: auto; padding: 20px; }
        .chat-message { margin-bottom: 20px; }
        .chat-message.other, .chat-message.self { display: flex; gap: 12px; }
        .chat-message.self { flex-direction: row-reverse; }
        .chat-msg-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 16px; }
        .chat-msg-content { max-width: 70%; }
        .chat-msg-bubble { padding: 12px 16px; border-radius: 16px; font-size: 14px; background: var(--bg); }
        .chat-message.self .chat-msg-bubble { background: var(--primary); color: white; }
        .chat-room-footer { padding: 16px; border-top: 1px solid var(--border); display: flex; gap: 12px; }
        .chat-input { flex: 1; padding: 12px 16px; border: 1px solid var(--border); border-radius: 24px; font-size: 14px; }
        .chat-send { padding: 12px 20px; background: var(--primary); color: white; border: none; border-radius: 24px; cursor: pointer; }
        /* Footer */
        .site-footer { background: var(--text); color: white; padding: 60px 60px 30px; }
        .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 60px; max-width: 1200px; margin: 0 auto; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .footer-about h3 { font-size: 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
        .footer-about p { font-size: 14px; opacity: 0.7; line-height: 1.8; }
        .footer-links h4 { font-size: 15px; margin-bottom: 20px; color: var(--gold); }
        .footer-links ul { list-style: none; }
        .footer-links li { margin-bottom: 12px; }
        .footer-links a { font-size: 14px; opacity: 0.7; transition: all 0.2s; cursor: pointer; }
        .footer-links a:hover { opacity: 1; color: var(--gold); }
        .footer-bottom { text-align: center; padding-top: 30px; font-size: 13px; opacity: 0.6; }
        /* Modal */
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s; }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        .modal { background: white; border-radius: 12px; width: 480px; transform: scale(0.9) translateY(20px); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
        .modal-overlay.active .modal { transform: scale(1) translateY(0); }
        .modal-header { background: var(--primary); color: white; padding: 24px 30px; }
        .modal-header h3 { font-size: 20px; margin-bottom: 4px; }
        .modal-body { padding: 30px; }
        .modal-footer { padding: 20px 30px; background: var(--bg); display: flex; justify-content: flex-end; gap: 12px; }
        /* Toast */
        .toast-container { position: fixed; bottom: 30px; right: 30px; z-index: 2000; }
        .toast { background: var(--text); color: white; padding: 16px 24px; border-radius: 8px; font-size: 14px; margin-top: 12px; transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
        .toast.show { transform: translateX(0); }
        .floating-chat { position: fixed; bottom: 30px; right: 30px; z-index: 999; }
        .floating-chat-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: white; border: none; font-size: 28px; cursor: pointer; box-shadow: 0 4px 20px rgba(139,0,0,0.4); transition: all 0.3s; display: flex; align-items: center; justify-content: center; }
        .floating-chat-btn:hover { transform: scale(1.1); }
        .floating-chat-btn.active { transform: rotate(180deg); }
        /* Overlay */
        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s; }
        .overlay.active { opacity: 1; visibility: visible; }
        /* Animations */
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139,0,0,0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(139,0,0,0); } }
        .animate-in { opacity: 0; animation: fadeInUp 0.6s ease forwards; }
        .animate-delay-1 { animation-delay: 0.15s; }
        .animate-delay-2 { animation-delay: 0.3s; }
        .animate-delay-3 { animation-delay: 0.45s; }
        .animate-delay-4 { animation-delay: 0.6s; }
    </style>
</head>
<body>
    <!-- Top Bar -->
    <div class="top-bar">
        <div class="top-bar-left">
            <a onclick="showToast('拨打电话：400-888-8888')">📞 客服热线：400-888-8888</a>
            <a onclick="showToast('发送邮件至：service@journal.edu.cn')">✉️ service@journal.edu.cn</a>
        </div>
        <div class="top-bar-right">
            <a onclick="navigateTo('about')">关于我们</a>
            <a onclick="navigateTo('help')">帮助中心</a>
            <a onclick="showContact()">联系我们</a>
            <a onclick="showModal()">登录</a>
        </div>
    </div>

    <!-- Header -->
    <header class="site-header">
        <div class="logo-area" onclick="navigateTo('home')">
            <div class="logo-icon">📚</div>
            <div class="logo-text">
                <h1>学术期刊平台</h1>
                <span>ACADEMIC JOURNAL PLATFORM</span>
            </div>
        </div>
        <nav class="main-nav">
            <a href="#" class="active" onclick="navigateTo('home', this)">首页</a>
            <a href="#" onclick="navigateTo('journals', this)">期刊浏览</a>
            <a href="#" onclick="navigateTo('submission', this)">投稿通道</a>
            <a href="#" onclick="navigateTo('forum', this)">学术交流</a>
            <a href="#" onclick="navigateTo('news', this)">学术动态</a>
        </nav>
        <div class="header-actions">
            <button class="search-btn" onclick="showToast('打开搜索')">🔍</button>
            <button class="login-btn" onclick="showModal()">登录/注册</button>
        </div>
    </header>

    <!-- Main Content -->
    <main id="mainContent">
        <!-- Home Section -->
        <div class="page-section active" id="section-home">
            <section class="banner">
                <div class="banner-content">
                    <div class="banner-text">
                        <h2>汇聚学术精华<br>推动科研发展</h2>
                        <p>作为国内领先的学术期刊发布平台，我们致力于为广大学者提供专业、高效的论文发表与学术交流服务。</p>
                        <div class="banner-btns">
                            <button class="banner-btn primary" onclick="navigateTo('journals')">探索期刊</button>
                            <button class="banner-btn secondary" onclick="navigateTo('submission')">开始投稿</button>
                        </div>
                    </div>
                    <div class="banner-visual">
                        <div class="banner-visual-inner">
                            <div class="icon">🎓</div>
                        </div>
                    </div>
                </div>
            </section>

            <div class="quick-stats">
                <div class="quick-stat" onclick="navigateTo('journals')">
                    <div class="num">12,856</div>
                    <div class="label">收录期刊</div>
                </div>
                <div class="quick-stat" onclick="showToast('查看258万+学术论文')">
                    <div class="num">258万+</div>
                    <div class="label">学术论文</div>
                </div>
                <div class="quick-stat" onclick="showToast('查看86万+注册学者')">
                    <div class="num">86万+</div>
                    <div class="label">注册学者</div>
                </div>
                <div class="quick-stat" onclick="showToast('查看1.2亿论文下载量')">
                    <div class="num">1.2亿</div>
                    <div class="label">论文下载量</div>
                </div>
            </div>

            <!-- Forum Section -->
            <section class="section container">
                <div class="section-header">
                    <h2>学术论坛</h2>
                    <p>发表观点，参与讨论</p>
                </div>
                <div class="forum-list">
                    <div class="forum-item animate-in" onclick="openForumPost(1)">
                        <div class="forum-votes">
                            <div class="num">328</div>
                            <div class="label">赞同</div>
                        </div>
                        <div class="forum-content">
                            <h3 class="forum-title">关于ChatGPT在学术写作中的伦理问题讨论</h3>
                            <p class="forum-excerpt">最近各大期刊对AI辅助写作的政策各不相同...</p>
                            <div class="forum-tags">
                                <span class="forum-tag">学术道德</span>
                                <span class="forum-tag">AI</span>
                            </div>
                        </div>
                        <div class="forum-author">
                            <div class="forum-author-avatar">李</div>
                            <div class="forum-author-info">
                                <div class="name">李明教授</div>
                                <div class="time">2小时前</div>
                            </div>
                        </div>
                    </div>
                    <div class="forum-item animate-in animate-delay-1" onclick="openForumPost(2)">
                        <div class="forum-votes">
                            <div class="num">256</div>
                            <div class="label">赞同</div>
                        </div>
                        <div class="forum-content">
                            <h3 class="forum-title">研究生如何平衡科研与生活？经验分享</h3>
                            <p class="forum-excerpt">读研这几年走过不少弯路，分享一些时间管理经验...</p>
                            <div class="forum-tags">
                                <span class="forum-tag">经验分享</span>
                                <span class="forum-tag">研究生</span>
                            </div>
                        </div>
                        <div class="forum-author">
                            <div class="forum-author-avatar">王</div>
                            <div class="forum-author-info">
                                <div class="name">王小红</div>
                                <div class="time">5小时前</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- News Section -->
            <section class="section container">
                <div class="section-header">
                    <h2>学术动态</h2>
                    <p>了解最新的学术资讯与平台公告</p>
                </div>
                <div class="news-grid">
                    <div class="news-card animate-in" onclick="openNews(1)">
                        <div class="news-img">📰</div>
                        <div class="news-content">
                            <span class="news-tag">平台公告</span>
                            <h3 class="news-title">关于2024年度核心期刊评选结果的公示</h3>
                            <div class="news-meta"><span>📅 2024-03-20</span><span>👁️ 2,856次</span></div>
                        </div>
                    </div>
                    <div class="news-card animate-in animate-delay-1" onclick="openNews(2)">
                        <div class="news-img">🔬</div>
                        <div class="news-content">
                            <span class="news-tag">学术前沿</span>
                            <h3 class="news-title">人工智能领域的最新研究进展与展望</h3>
                            <div class="news-meta"><span>📅 2024-03-18</span><span>👁️ 4,123次</span></div>
                        </div>
                    </div>
                    <div class="news-card animate-in animate-delay-2" onclick="openNews(3)">
                        <div class="news-img">📊</div>
                        <div class="news-content">
                            <span class="news-tag">数据报告</span>
                            <h3 class="news-title">2024年第一季度学术论文发表趋势分析</h3>
                            <div class="news-meta"><span>📅 2024-03-15</span><span>👁️ 1,987次</span></div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- ====== 期刊浏览页面 ====== -->
        <div class="page-section" id="section-journals">
            <section class="banner" style="padding: 40px 60px;">
                <div class="banner-content">
                    <div class="banner-text" style="color: white;">
                        <h2>期刊浏览中心</h2>
                        <p>浏览来自全球的优质学术期刊，找到最适合您的发表平台</p>
                    </div>
                </div>
            </section>
            
            <section class="section container">
                <!-- 筛选器 -->
                <div class="journals-filters animate-in">
                    <div class="filter-group">
                        <span class="filter-label">学科分类：</span>
                        <select class="filter-select" onclick="showToast('选择学科分类')">
                            <option>全部学科</option>
                            <option>计算机科学</option>
                            <option>工程技术</option>
                            <option>医学</option>
                            <option>经济学</option>
                            <option>数学</option>
                            <option>物理</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <span class="filter-label">期刊级别：</span>
                        <select class="filter-select" onclick="showToast('选择期刊级别')">
                            <option>全部级别</option>
                            <option>SCI</option>
                            <option>EI</option>
                            <option>中文核心</option>
                            <option>中文科技核心</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <span class="filter-label">审稿周期：</span>
                        <select class="filter-select" onclick="showToast('选择审稿周期')">
                            <option>不限</option>
                            <option>1个月内</option>
                            <option>1-3个月</option>
                            <option>3-6个月</option>
                        </select>
                    </div>
                    <div class="filter-group" style="flex: 1;">
                        <input type="text" class="search-input" placeholder="搜索期刊名称、ISSN..." onclick="showToast('输入搜索关键词')">
                        <button class="search-btn-small" onclick="showToast('开始搜索期刊')">🔍 搜索</button>
                    </div>
                </div>

                <!-- 期刊卡片列表 -->
                <div class="journal-cards">
                    <div class="journal-card animate-in" onclick="openJournalDetail(1)">
                        <div class="journal-card-img">📕</div>
                        <div class="journal-card-body">
                            <h3 class="journal-card-title">计算机科学与技术</h3>
                            <p class="journal-card-issn">ISSN: 1000-1239</p>
                            <div class="journal-card-badges">
                                <span class="journal-badge sci">SCI</span>
                                <span class="journal-badge core">核心</span>
                            </div>
                            <div class="journal-card-stats">
                                <div class="journal-stat">
                                    <div class="journal-stat-value">98.6</div>
                                    <div class="journal-stat-label">影响因子</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">45天</div>
                                    <div class="journal-stat-label">审稿周期</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">28%</div>
                                    <div class="journal-stat-label">录用率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="journal-card animate-in animate-delay-1" onclick="openJournalDetail(2)">
                        <div class="journal-card-img">📗</div>
                        <div class="journal-card-body">
                            <h3 class="journal-card-title">人工智能学报</h3>
                            <p class="journal-card-issn">ISSN: 2096-6652</p>
                            <div class="journal-card-badges">
                                <span class="journal-badge ei">EI</span>
                                <span class="journal-badge core">核心</span>
                            </div>
                            <div class="journal-card-stats">
                                <div class="journal-stat">
                                    <div class="journal-stat-value">86.3</div>
                                    <div class="journal-stat-label">影响因子</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">30天</div>
                                    <div class="journal-stat-label">审稿周期</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">35%</div>
                                    <div class="journal-stat-label">录用率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="journal-card animate-in animate-delay-2" onclick="openJournalDetail(3)">
                        <div class="journal-card-img">📘</div>
                        <div class="journal-card-body">
                            <h3 class="journal-card-title">物理学报</h3>
                            <p class="journal-card-issn">ISSN: 1000-3290</p>
                            <div class="journal-card-badges">
                                <span class="journal-badge sci">SCI</span>
                                <span class="journal-badge core">核心</span>
                            </div>
                            <div class="journal-card-stats">
                                <div class="journal-stat">
                                    <div class="journal-stat-value">78.9</div>
                                    <div class="journal-stat-label">影响因子</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">40天</div>
                                    <div class="journal-stat-label">审稿周期</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">22%</div>
                                    <div class="journal-stat-label">录用率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="journal-card animate-in animate-delay-3" onclick="openJournalDetail(4)">
                        <div class="journal-card-img">📙</div>
                        <div class="journal-card-body">
                            <h3 class="journal-card-title">数学进展</h3>
                            <p class="journal-card-issn">ISSN: 1000-0917</p>
                            <div class="journal-card-badges">
                                <span class="journal-badge core">中文核心</span>
                            </div>
                            <div class="journal-card-stats">
                                <div class="journal-stat">
                                    <div class="journal-stat-value">65.2</div>
                                    <div class="journal-stat-label">影响因子</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">60天</div>
                                    <div class="journal-stat-label">审稿周期</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">18%</div>
                                    <div class="journal-stat-label">录用率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="journal-card animate-in animate-delay-4" onclick="openJournalDetail(5)">
                        <div class="journal-card-img">🏥</div>
                        <div class="journal-card-body">
                            <h3 class="journal-card-title">中华医学杂志</h3>
                            <p class="journal-card-issn">ISSN: 0376-2491</p>
                            <div class="journal-card-badges">
                                <span class="journal-badge sci">SCI</span>
                                <span class="journal-badge core">核心</span>
                            </div>
                            <div class="journal-card-stats">
                                <div class="journal-stat">
                                    <div class="journal-stat-value">92.5</div>
                                    <div class="journal-stat-label">影响因子</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">90天</div>
                                    <div class="journal-stat-label">审稿周期</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">15%</div>
                                    <div class="journal-stat-label">录用率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="journal-card animate-in animate-delay-4" onclick="openJournalDetail(6)">
                        <div class="journal-card-img">📊</div>
                        <div class="journal-card-body">
                            <h3 class="journal-card-title">管理科学学报</h3>
                            <p class="journal-card-issn">ISSN: 1009-3789</p>
                            <div class="journal-card-badges">
                                <span class="journal-badge ei">EI</span>
                                <span class="journal-badge core">中文核心</span>
                            </div>
                            <div class="journal-card-stats">
                                <div class="journal-stat">
                                    <div class="journal-stat-value">72.8</div>
                                    <div class="journal-stat-label">影响因子</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">55天</div>
                                    <div class="journal-stat-label">审稿周期</div>
                                </div>
                                <div class="journal-stat">
                                    <div class="journal-stat-value">25%</div>
                                    <div class="journal-stat-label">录用率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="pagination">
                    <button class="page-btn" onclick="showToast('上一页')" disabled>‹</button>
                    <button class="page-btn active" onclick="showToast('第1页')">1</button>
                    <button class="page-btn" onclick="showToast('第2页')">2</button>
                    <button class="page-btn" onclick="showToast('第3页')">3</button>
                    <button class="page-btn" onclick="showToast('第4页')">4</button>
                    <button class="page-btn" onclick="showToast('第5页')">5</button>
                    <button class="page-btn" onclick="showToast('下一页')">›</button>
                </div>
            </section>
        </div>

        <!-- ====== 投稿通道页面 ====== -->
        <div class="page-section" id="section-submission">
            <section class="banner" style="padding: 40px 60px;">
                <div class="banner-content">
                    <div class="banner-text" style="color: white;">
                        <h2>投稿通道</h2>
                        <p>简单五步，轻松完成论文投稿</p>
                    </div>
                </div>
            </section>
            
            <section class="section container">
                <!-- 投稿步骤指引 -->
                <div class="submission-steps animate-in">
                    <div class="step-item completed" onclick="goToStep(1)">
                        <div class="step-circle">✓</div>
                        <div class="step-label">注册账号</div>
                    </div>
                    <div class="step-item active" onclick="goToStep(2)">
                        <div class="step-circle">2</div>
                        <div class="step-label">选择期刊</div>
                    </div>
                    <div class="step-item" onclick="goToStep(3)">
                        <div class="step-circle">3</div>
                        <div class="step-label">填写信息</div>
                    </div>
                    <div class="step-item" onclick="goToStep(4)">
                        <div class="step-circle">4</div>
                        <div class="step-label">上传稿件</div>
                    </div>
                    <div class="step-item" onclick="goToStep(5)">
                        <div class="step-circle">5</div>
                        <div class="step-label">提交审核</div>
                    </div>
                </div>

                <!-- 投稿表单 -->
                <div class="submission-form animate-in animate-delay-1">
                    <div class="progress-text">投稿进度</div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill" style="width: 20%;"></div>
                    </div>

                    <!-- 投稿前检查清单 -->
                    <div class="checklist">
                        <div class="checklist-title">📋 投稿前检查清单</div>
                        <div class="checklist-item" onclick="toggleCheck(this)">
                            <input type="checkbox" checked> <span class="check-icon">✓</span> 论文格式符合期刊要求
                        </div>
                        <div class="checklist-item" onclick="toggleCheck(this)">
                            <input type="checkbox" checked> <span class="check-icon">✓</span> 作者信息完整准确
                        </div>
                        <div class="checklist-item" onclick="toggleCheck(this)">
                            <input type="checkbox"> <span class="check-icon">□</span> 查重报告已准备
                        </div>
                        <div class="checklist-item" onclick="toggleCheck(this)">
                            <input type="checkbox"> <span class="check-icon">□</span> 伦理审查声明已准备
                        </div>
                        <div class="checklist-item" onclick="toggleCheck(this)">
                            <input type="checkbox"> <span class="check-icon">□</span> 同行推荐信已准备
                        </div>
                    </div>

                    <div class="form-title">📝 论文投稿信息</div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">目标期刊 <span class="required">*</span></label>
                            <select class="form-select" onclick="showToast('选择目标期刊')">
                                <option value="">请选择期刊</option>
                                <option>计算机科学与技术</option>
                                <option>人工智能学报</option>
                                <option>物理学报</option>
                                <option>数学进展</option>
                                <option>中华医学杂志</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">论文类别 <span class="required">*</span></label>
                            <select class="form-select" onclick="showToast('选择论文类别')">
                                <option value="">请选择类别</option>
                                <option>研究论文</option>
                                <option>综述论文</option>
                                <option>短篇通信</option>
                                <option>病例报告</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">论文标题 <span class="required">*</span></label>
                        <input type="text" class="form-input" placeholder="请输入论文标题（中英文）" onclick="showToast('输入论文标题')">
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">第一作者 <span class="required">*</span></label>
                            <input type="text" class="form-input" placeholder="请输入第一作者姓名" onclick="showToast('输入第一作者姓名')">
                        </div>
                        <div class="form-group">
                            <label class="form-label">通讯作者 <span class="required">*</span></label>
                            <input type="text" class="form-input" placeholder="请输入通讯作者姓名" onclick="showToast('输入通讯作者姓名')">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">作者单位 <span class="required">*</span></label>
                            <input type="text" class="form-input" placeholder="请输入作者单位" onclick="showToast('输入作者单位')">
</div>
                        <div class="form-group">
                            <label class="form-label">作者邮箱 <span class="required">*</span></label>
                            <input type="email" class="form-input" placeholder="请输入联系邮箱" onclick="showToast('输入联系邮箱')">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">摘要 <span class="required">*</span></label>
                        <textarea class="form-textarea" placeholder="请输入论文摘要（300-500字）" onclick="showToast('输入论文摘要')">
编辑页面

学术交流中心

深度学习研究组

量子计算前沿

科研日常

论文互助

学术动态

关于2024年度核心期刊评选结果的公示

人工智能领域的最新研究进展与展望

2024年第一季度学术论文发表趋势分析

计算机科学与技术

聊天室

编辑页面

学术交流中心

深度学习研究组

量子计算前沿

科研日常

论文互助

学术动态

关于2024年度核心期刊评选结果的公示

人工智能领域的最新研究进展与展望

2024年第一季度学术论文发表趋势分析

计算机科学与技术

聊天室

登录学术期刊平台
