1353 lines
51 KiB
HTML
1353 lines
51 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<!-- DYNAMIC: 页面标题 —— 格式：第X周[星期时间][课程编号]班课评 -->
|
||
<title>第X周[星期时间][课程编号]班课评</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;600&display=swap');
|
||
|
||
:root {
|
||
--coral: #e85d4c;
|
||
--coral-light: #f5a99e;
|
||
--coral-dark: #c44738;
|
||
--amber: #f0a84a;
|
||
--amber-light: #f5d08a;
|
||
--ink: #2c2420;
|
||
--ink-soft: #5a524e;
|
||
--paper: #faf6f1;
|
||
--paper-warm: #f5efe8;
|
||
--cream: #fffdf9;
|
||
--border: #e8e0d8;
|
||
--shadow-soft: rgba(44, 36, 32, 0.06);
|
||
--shadow-medium: rgba(44, 36, 32, 0.10);
|
||
--shadow-card: rgba(44, 36, 32, 0.08);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--paper);
|
||
min-height: 100vh;
|
||
color: var(--ink);
|
||
background-image:
|
||
radial-gradient(circle at 20% 50%, rgba(240, 168, 74, 0.03) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 20%, rgba(232, 93, 76, 0.02) 0%, transparent 50%),
|
||
radial-gradient(circle at 50% 80%, rgba(240, 168, 74, 0.02) 0%, transparent 40%);
|
||
}
|
||
|
||
.topbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: rgba(250, 246, 241, 0.92);
|
||
backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 14px 28px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.topbar-title {
|
||
font-family: 'Noto Serif SC', serif;
|
||
font-size: 1.05em;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.topbar-meta {
|
||
font-size: 0.8em;
|
||
color: var(--ink-soft);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.topbar-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 8px 18px;
|
||
border-radius: 10px;
|
||
font-size: 0.85em;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.25s ease;
|
||
border: none;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.btn-outline {
|
||
background: transparent;
|
||
border: 1.5px solid var(--border);
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
border-color: var(--coral);
|
||
color: var(--coral);
|
||
background: rgba(232, 93, 76, 0.05);
|
||
}
|
||
|
||
.btn-success {
|
||
background: var(--coral);
|
||
color: white;
|
||
}
|
||
|
||
.btn-success:hover {
|
||
background: var(--coral-dark);
|
||
}
|
||
|
||
.main {
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
padding: 28px 20px 160px;
|
||
position: relative;
|
||
}
|
||
|
||
/* ===== 课程封面区域 ===== */
|
||
.course-hero {
|
||
background: linear-gradient(135deg, var(--cream) 0%, var(--paper-warm) 100%);
|
||
border-radius: 20px;
|
||
padding: 36px 32px 32px;
|
||
margin-bottom: 24px;
|
||
border: 1px solid var(--border);
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px var(--shadow-soft), 0 8px 32px var(--shadow-card);
|
||
}
|
||
|
||
.course-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -60px;
|
||
right: -40px;
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(232, 93, 76, 0.08) 0%, transparent 70%);
|
||
}
|
||
|
||
.course-hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -40px;
|
||
left: -30px;
|
||
width: 140px;
|
||
height: 140px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(240, 168, 74, 0.06) 0%, transparent 70%);
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: linear-gradient(135deg, var(--coral) 0%, var(--amber) 100%);
|
||
color: white;
|
||
font-size: 0.75em;
|
||
font-weight: 600;
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
margin-bottom: 16px;
|
||
position: relative;
|
||
z-index: 1;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.hero-title {
|
||
font-family: 'Noto Serif SC', serif;
|
||
font-size: 2.2em;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
line-height: 1.3;
|
||
margin-bottom: 8px;
|
||
position: relative;
|
||
z-index: 1;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 0.95em;
|
||
color: var(--ink-soft);
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-divider {
|
||
width: 60px;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--coral), var(--amber));
|
||
border-radius: 2px;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 0.85em;
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.hero-info-item .icon { font-size: 1.1em; }
|
||
|
||
/* ===== 学习目标 ===== */
|
||
.goals-section {
|
||
background: var(--cream);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
margin-bottom: 28px;
|
||
border: 1px solid var(--border);
|
||
box-shadow: 0 2px 12px var(--shadow-soft);
|
||
}
|
||
|
||
.goals-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.goals-title {
|
||
font-family: 'Noto Serif SC', serif;
|
||
font-size: 1em;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.goals-title .title-icon { font-size: 1.2em; }
|
||
|
||
.goals-toggle {
|
||
font-size: 0.78em;
|
||
color: var(--ink-soft);
|
||
cursor: pointer;
|
||
background: var(--paper-warm);
|
||
border: 1px solid var(--border);
|
||
font-family: inherit;
|
||
padding: 5px 12px;
|
||
border-radius: 8px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.goals-toggle:hover {
|
||
background: var(--coral);
|
||
color: white;
|
||
border-color: var(--coral);
|
||
}
|
||
|
||
.goals-list {
|
||
list-style: none;
|
||
display: block;
|
||
}
|
||
|
||
.goals-list.collapsed { display: none; }
|
||
|
||
.goals-list li {
|
||
padding: 12px 16px;
|
||
background: var(--paper);
|
||
border-radius: 10px;
|
||
margin-bottom: 10px;
|
||
font-size: 0.9em;
|
||
color: var(--ink-soft);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
border-left: 3px solid transparent;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.goals-list li:hover {
|
||
border-left-color: var(--coral);
|
||
background: var(--cream);
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.goals-list li:last-child { margin-bottom: 0; }
|
||
|
||
.goal-num {
|
||
background: linear-gradient(135deg, var(--coral) 0%, var(--amber) 100%);
|
||
color: white;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.78em;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.goal-text { flex: 1; line-height: 1.6; }
|
||
|
||
/* ===== 学生卡片滑动区 ===== */
|
||
.cards-slider-wrapper {
|
||
position: relative;
|
||
border-radius: 16px;
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cards-slider {
|
||
position: relative;
|
||
min-height: 300px;
|
||
}
|
||
|
||
/* ===== 学生卡片 ===== */
|
||
.student-card {
|
||
background: var(--cream);
|
||
border-radius: 16px;
|
||
border: 1px solid var(--border);
|
||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
opacity: 0;
|
||
transform: translateX(60px) scale(0.96);
|
||
pointer-events: none;
|
||
box-shadow: 0 4px 20px var(--shadow-card);
|
||
}
|
||
|
||
.student-card.active {
|
||
opacity: 1;
|
||
transform: translateX(0) scale(1);
|
||
pointer-events: auto;
|
||
position: relative;
|
||
}
|
||
|
||
.student-card.prev {
|
||
transform: translateX(-60px) scale(0.96);
|
||
opacity: 0;
|
||
}
|
||
|
||
.student-card:hover {
|
||
box-shadow: 0 8px 32px var(--shadow-medium);
|
||
}
|
||
|
||
.card-header {
|
||
padding: 18px 24px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid var(--border);
|
||
background: linear-gradient(135deg, rgba(250, 246, 241, 0.5) 0%, rgba(245, 239, 232, 0.5) 100%);
|
||
border-radius: 16px 16px 0 0;
|
||
}
|
||
|
||
.student-name {
|
||
font-family: 'Noto Serif SC', serif;
|
||
font-size: 1.15em;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.card-badge {
|
||
font-size: 0.75em;
|
||
padding: 5px 12px;
|
||
border-radius: 20px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.badge-normal { background: #e8f5e9; color: #2e7d32; }
|
||
.badge-makeup { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); color: #e65100; }
|
||
.badge-absent { background: #fce4ec; color: #c2185b; }
|
||
|
||
.card-body { padding: 24px; }
|
||
|
||
.feedback-content {
|
||
font-size: 0.92em;
|
||
line-height: 2;
|
||
color: var(--ink-soft);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.feedback-content[contenteditable="true"] {
|
||
outline: none;
|
||
border: 2px dashed transparent;
|
||
border-radius: 10px;
|
||
padding: 10px;
|
||
margin: -10px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.feedback-content[contenteditable="true"]:hover {
|
||
border-color: var(--border);
|
||
background: var(--paper);
|
||
}
|
||
|
||
.feedback-content[contenteditable="true"]:focus {
|
||
border-color: var(--coral);
|
||
background: rgba(232, 93, 76, 0.03);
|
||
}
|
||
|
||
.metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.metric-item {
|
||
padding: 14px;
|
||
background: var(--paper);
|
||
border-radius: 10px;
|
||
border: 1px solid transparent;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.metric-item:hover {
|
||
border-color: var(--border);
|
||
background: var(--cream);
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 0.72em;
|
||
color: #999;
|
||
margin-bottom: 5px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 0.88em;
|
||
font-weight: 500;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.metric-stars {
|
||
color: var(--amber);
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* ===== 可交互星星评分 ===== */
|
||
.star-rating {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.star-rating .star {
|
||
font-size: 1.3em;
|
||
color: #ddd5cc;
|
||
cursor: default;
|
||
transition: all 0.15s ease;
|
||
user-select: none;
|
||
line-height: 1;
|
||
}
|
||
|
||
.star-rating .star.filled {
|
||
color: var(--amber);
|
||
}
|
||
|
||
.star-rating .star.half-filled {
|
||
background: linear-gradient(90deg, var(--amber) 50%, #ddd5cc 50%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.star-rating.editable .star {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.star-rating.editable .star:hover,
|
||
.star-rating.editable .star.hovered {
|
||
color: var(--amber-light);
|
||
transform: scale(1.15);
|
||
}
|
||
|
||
.star-rating.editable .star.filled:hover,
|
||
.star-rating.editable .star.filled.hovered {
|
||
color: var(--amber);
|
||
}
|
||
|
||
.star-score {
|
||
font-size: 0.78em;
|
||
color: var(--ink-soft);
|
||
margin-left: 6px;
|
||
font-weight: 500;
|
||
min-width: 28px;
|
||
}
|
||
|
||
.metric-comment {
|
||
margin-top: 8px;
|
||
padding: 8px 10px;
|
||
background: var(--paper);
|
||
border-radius: 8px;
|
||
font-size: 0.82em;
|
||
color: var(--ink-soft);
|
||
line-height: 1.5;
|
||
border: 1px solid transparent;
|
||
min-height: 32px;
|
||
}
|
||
|
||
.metric-comment:empty::before {
|
||
content: '点击编辑评语...';
|
||
color: #bbb;
|
||
}
|
||
|
||
.metric-comment[contenteditable="true"] {
|
||
border-color: var(--coral-light);
|
||
background: rgba(232, 93, 76, 0.03);
|
||
outline: none;
|
||
}
|
||
|
||
.metric-comment[contenteditable="true"]:focus {
|
||
border-color: var(--coral);
|
||
}
|
||
|
||
/* ===== 侧边导航按钮 ===== */
|
||
.side-nav-btn {
|
||
position: fixed;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 90;
|
||
width: 52px;
|
||
height: 80px;
|
||
border: none;
|
||
background: rgba(250, 246, 241, 0.85);
|
||
backdrop-filter: blur(12px);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.4em;
|
||
color: var(--ink-soft);
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 16px var(--shadow-medium);
|
||
}
|
||
|
||
.side-nav-btn:hover:not(:disabled) {
|
||
background: var(--cream);
|
||
color: var(--coral);
|
||
width: 60px;
|
||
box-shadow: 0 6px 24px rgba(232, 93, 76, 0.15);
|
||
}
|
||
|
||
.side-nav-btn:disabled {
|
||
opacity: 0.25;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.side-nav-btn.prev-btn {
|
||
left: 0;
|
||
border-radius: 0 12px 12px 0;
|
||
border-right: 1px solid var(--border);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.side-nav-btn.next-btn {
|
||
right: 0;
|
||
border-radius: 12px 0 0 12px;
|
||
border-left: 1px solid var(--border);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
padding-left: 4px;
|
||
}
|
||
|
||
.side-nav-btn .arrow { transition: transform 0.3s ease; }
|
||
.side-nav-btn:hover .arrow.prev-arrow { transform: translateX(-3px); }
|
||
.side-nav-btn:hover .arrow.next-arrow { transform: translateX(3px); }
|
||
|
||
.nav-controls {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.page-indicator {
|
||
font-family: 'Noto Serif SC', serif;
|
||
font-size: 0.95em;
|
||
color: var(--ink-soft);
|
||
font-weight: 500;
|
||
min-width: 70px;
|
||
text-align: center;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.progress-dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.progress-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--border);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.progress-dot.active {
|
||
background: var(--coral);
|
||
width: 28px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.progress-dot:hover:not(.active) {
|
||
background: var(--coral-light);
|
||
transform: scale(1.3);
|
||
}
|
||
|
||
.bottom-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(250, 246, 241, 0.95);
|
||
backdrop-filter: blur(16px);
|
||
border-top: 1px solid var(--border);
|
||
padding: 14px 24px;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.toast {
|
||
position: fixed;
|
||
bottom: 80px;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(20px);
|
||
background: var(--ink);
|
||
color: white;
|
||
padding: 12px 28px;
|
||
border-radius: 10px;
|
||
font-size: 0.85em;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
pointer-events: none;
|
||
z-index: 200;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.toast.show {
|
||
opacity: 1;
|
||
transform: translateX(-50%) translateY(0);
|
||
}
|
||
|
||
.edit-mode-badge {
|
||
display: none;
|
||
position: fixed;
|
||
top: 80px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||
color: #92400e;
|
||
padding: 8px 20px;
|
||
border-radius: 20px;
|
||
font-size: 0.8em;
|
||
font-weight: 500;
|
||
z-index: 200;
|
||
border: 1px solid #fcd34d;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.edit-mode-badge.show { display: block; }
|
||
|
||
.footer {
|
||
text-align: center;
|
||
padding: 36px 20px;
|
||
color: #bbb;
|
||
font-size: 0.78em;
|
||
font-family: 'Noto Serif SC', serif;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* ===== OJ 做题数据表格（CSP 课程专用） ===== */
|
||
.oj-section {
|
||
margin-top: 20px;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
overflow: hidden;
|
||
background: var(--paper);
|
||
}
|
||
|
||
.oj-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
background: linear-gradient(135deg, rgba(232, 93, 76, 0.06) 0%, rgba(240, 168, 74, 0.04) 100%);
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 0.85em;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.oj-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.82em;
|
||
}
|
||
|
||
.oj-table thead th {
|
||
padding: 10px 14px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: var(--ink-soft);
|
||
background: var(--cream);
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.oj-table thead th:first-child { width: 45%; }
|
||
.oj-table thead th:nth-child(2) { width: 18%; }
|
||
.oj-table thead th:nth-child(3) { width: 18%; text-align: center; }
|
||
.oj-table thead th:last-child { width: 19%; text-align: center; }
|
||
|
||
.oj-table tbody td {
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid rgba(232, 228, 222, 0.5);
|
||
color: var(--ink);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.oj-table tbody tr:last-child td { border-bottom: none; }
|
||
|
||
.oj-table tbody tr:hover td {
|
||
background: rgba(232, 93, 76, 0.02);
|
||
}
|
||
|
||
.oj-status {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 3px 10px;
|
||
border-radius: 20px;
|
||
font-size: 0.88em;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.oj-status.ac {
|
||
background: #e8f5e9;
|
||
color: #2e7d32;
|
||
}
|
||
|
||
.oj-status.wa {
|
||
background: #fff3e0;
|
||
color: #e65100;
|
||
}
|
||
|
||
.oj-status.re {
|
||
background: #fce4ec;
|
||
color: #c2185b;
|
||
}
|
||
|
||
.oj-status.tle {
|
||
background: #e3f2fd;
|
||
color: #1565c0;
|
||
}
|
||
|
||
.oj-status.pending {
|
||
background: #f5f5f5;
|
||
color: #9e9e9e;
|
||
}
|
||
|
||
.oj-status-icon {
|
||
font-size: 1.1em;
|
||
line-height: 1;
|
||
}
|
||
|
||
.oj-submit-count {
|
||
text-align: center;
|
||
font-weight: 500;
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.oj-submit-count.highlight {
|
||
color: var(--coral);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.oj-pattern {
|
||
text-align: center;
|
||
font-size: 0.9em;
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.oj-summary {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 16px;
|
||
background: var(--cream);
|
||
border-top: 1px solid var(--border);
|
||
font-size: 0.82em;
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.oj-summary .oj-summary-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.oj-summary .oj-summary-num {
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-title { font-size: 1.7em; }
|
||
.side-nav-btn { width: 40px; height: 60px; font-size: 1.1em; }
|
||
.main { padding: 20px 16px 160px; }
|
||
.course-hero { padding: 28px 20px 24px; }
|
||
.oj-table { font-size: 0.78em; }
|
||
.oj-table tbody td, .oj-table thead th { padding: 8px 10px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航 -->
|
||
<div class="topbar">
|
||
<div>
|
||
<!-- DYNAMIC: 顶部标题 —— 格式：第X周 · [课程编号]班课评 -->
|
||
<div class="topbar-title">第X周 · [课程编号]班课评</div>
|
||
<!-- DYNAMIC: 顶部副标题 —— 格式：YYYY年M月D日 · 《课程名称》 · 橙子老师 -->
|
||
<div class="topbar-meta">YYYY年M月D日 · 《课程名称》 · 橙子老师</div>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<button class="btn btn-outline" onclick="toggleEdit()" id="editBtn">✏️ 编辑</button>
|
||
<button class="btn btn-outline" onclick="exportText()">📋 导出</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 编辑模式提示 -->
|
||
<div class="edit-mode-badge" id="editBadge">📝 编辑模式 · 点击文字即可修改</div>
|
||
|
||
<!-- 侧边翻页按钮 -->
|
||
<button class="side-nav-btn prev-btn" id="sidePrevBtn" onclick="prevCard()" title="上一张">
|
||
<span class="arrow prev-arrow">‹</span>
|
||
</button>
|
||
<button class="side-nav-btn next-btn" id="sideNextBtn" onclick="nextCard()" title="下一张">
|
||
<span class="arrow next-arrow">›</span>
|
||
</button>
|
||
|
||
<!-- 主内容 -->
|
||
<div class="main">
|
||
<!-- 课程封面区域 -->
|
||
<div class="course-hero">
|
||
<div class="hero-badge">📚 本周课程</div>
|
||
<!-- DYNAMIC: 课程大标题 —— 《课程名称》 -->
|
||
<h1 class="hero-title">《课程名称》</h1>
|
||
<!-- DYNAMIC: 课程副标题 —— 课程领域 · 第X课 -->
|
||
<p class="hero-subtitle">课程领域 · 第X课</p>
|
||
<div class="hero-divider"></div>
|
||
<div class="hero-info">
|
||
<!-- DYNAMIC: 授课日期 -->
|
||
<div class="hero-info-item">
|
||
<span class="icon">📅</span>
|
||
<span>YYYY年M月D日</span>
|
||
</div>
|
||
<!-- DYNAMIC: 上课时间 -->
|
||
<div class="hero-info-item">
|
||
<span class="icon">⏰</span>
|
||
<span>星期X XX:XX</span>
|
||
</div>
|
||
<!-- DYNAMIC: 授课老师 -->
|
||
<div class="hero-info-item">
|
||
<span class="icon">👩🏫</span>
|
||
<span>橙子老师</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 学习目标 -->
|
||
<div class="goals-section">
|
||
<div class="goals-header">
|
||
<span class="goals-title">
|
||
<span class="title-icon">🎯</span>
|
||
本周知识点
|
||
</span>
|
||
<button class="goals-toggle" onclick="toggleGoals()">收起</button>
|
||
</div>
|
||
<ul class="goals-list" id="goalsList">
|
||
<!-- DYNAMIC: 知识点列表 —— 5个知识点，每个一条 li -->
|
||
<li><span class="goal-num">1</span><span class="goal-text">知识点1</span></li>
|
||
<li><span class="goal-num">2</span><span class="goal-text">知识点2</span></li>
|
||
<li><span class="goal-num">3</span><span class="goal-text">知识点3</span></li>
|
||
<li><span class="goal-num">4</span><span class="goal-text">知识点4</span></li>
|
||
<li><span class="goal-num">5</span><span class="goal-text">知识点5</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 学生卡片滑动区 -->
|
||
<div class="cards-slider-wrapper">
|
||
<div class="cards-slider" id="cardsSlider">
|
||
<!--
|
||
DYNAMIC: 学生卡片模板 —— 为每个学生生成一个 .student-card
|
||
第一个学生必须有 active 类，其余没有
|
||
状态标签根据出勤：正常上课→badge-normal，补课→badge-makeup，请假/未到→badge-absent
|
||
-->
|
||
|
||
<!-- 示例学生卡片（实际生成时复制此结构） -->
|
||
<div class="student-card active">
|
||
<div class="card-header">
|
||
<span class="student-name">学生姓名</span>
|
||
<span class="card-badge badge-normal">正常上课</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="feedback-content" data-student="学生姓名">课评内容（将换行符转为 <br>）</div>
|
||
<div class="metrics">
|
||
<!-- DYNAMIC: 指标项，以好的维度为主，不好的最多1个，默认要有星星和评语 -->
|
||
<!-- 指标项模板：星星评分 + 文字评语 -->
|
||
<div class="metric-item" data-metric="课堂专注度">
|
||
<div class="metric-label">课堂专注度</div>
|
||
<div class="star-rating editable" data-score="4">
|
||
<span class="star" data-val="1">★</span>
|
||
<span class="star" data-val="2">★</span>
|
||
<span class="star" data-val="3">★</span>
|
||
<span class="star" data-val="4">★</span>
|
||
<span class="star" data-val="5">★</span>
|
||
<span class="star-score">优秀</span>
|
||
</div>
|
||
<div class="metric-comment" data-metric-comment="专注度">上课认真听讲，全程跟着老师节奏走</div>
|
||
</div>
|
||
<div class="metric-item" data-metric="知识理解">
|
||
<div class="metric-label">知识理解</div>
|
||
<div class="star-rating editable" data-score="4">
|
||
<span class="star" data-val="1">★</span>
|
||
<span class="star" data-val="2">★</span>
|
||
<span class="star" data-val="3">★</span>
|
||
<span class="star" data-val="4">★</span>
|
||
<span class="star" data-val="5">★</span>
|
||
<span class="star-score">优秀</span>
|
||
</div>
|
||
<div class="metric-comment" data-metric-comment="知识理解">对核心知识点掌握较好，能举一反三</div>
|
||
</div>
|
||
<div class="metric-item" data-metric="动手实践">
|
||
<div class="metric-label">动手实践</div>
|
||
<div class="star-rating editable" data-score="4">
|
||
<span class="star" data-val="1">★</span>
|
||
<span class="star" data-val="2">★</span>
|
||
<span class="star" data-val="3">★</span>
|
||
<span class="star" data-val="4">★</span>
|
||
<span class="star" data-val="5">★</span>
|
||
<span class="star-score">优秀</span>
|
||
</div>
|
||
<div class="metric-comment" data-metric-comment="动手实践">能独立完成课堂练习，动手能力很强</div>
|
||
</div>
|
||
<div class="metric-item" data-metric="互动参与">
|
||
<div class="metric-label">互动参与</div>
|
||
<div class="star-rating editable" data-score="5">
|
||
<span class="star" data-val="1">★</span>
|
||
<span class="star" data-val="2">★</span>
|
||
<span class="star" data-val="3">★</span>
|
||
<span class="star" data-val="4">★</span>
|
||
<span class="star" data-val="5">★</span>
|
||
<span class="star-score">超棒</span>
|
||
</div>
|
||
<div class="metric-comment" data-metric-comment="互动参与">积极举手发言，和老师同学互动很好</div>
|
||
</div>
|
||
<div class="metric-item" data-metric="逻辑思维">
|
||
<div class="metric-label">逻辑思维</div>
|
||
<div class="star-rating editable" data-score="4">
|
||
<span class="star" data-val="1">★</span>
|
||
<span class="star" data-val="2">★</span>
|
||
<span class="star" data-val="3">★</span>
|
||
<span class="star" data-val="4">★</span>
|
||
<span class="star" data-val="5">★</span>
|
||
<span class="star-score">优秀</span>
|
||
</div>
|
||
<div class="metric-comment" data-metric-comment="逻辑思维">思路清晰，遇到问题能条理分析</div>
|
||
</div>
|
||
<div class="metric-item" data-metric="创意表达">
|
||
<div class="metric-label">创意表达</div>
|
||
<div class="star-rating editable" data-score="5">
|
||
<span class="star" data-val="1">★</span>
|
||
<span class="star" data-val="2">★</span>
|
||
<span class="star" data-val="3">★</span>
|
||
<span class="star" data-val="4">★</span>
|
||
<span class="star" data-val="5">★</span>
|
||
<span class="star-score">超棒</span>
|
||
</div>
|
||
<div class="metric-comment" data-metric-comment="创意表达">作品有创意，能融入自己的想法</div>
|
||
</div>
|
||
<div class="metric-item" data-metric="任务完成度">
|
||
<div class="metric-label">任务完成度</div>
|
||
<div class="star-rating editable" data-score="5">
|
||
<span class="star" data-val="1">★</span>
|
||
<span class="star" data-val="2">★</span>
|
||
<span class="star" data-val="3">★</span>
|
||
<span class="star" data-val="4">★</span>
|
||
<span class="star" data-val="5">★</span>
|
||
<span class="star-score">超棒</span>
|
||
</div>
|
||
<div class="metric-comment" data-metric-comment="任务完成度">课堂任务全部完成，效率很高</div>
|
||
</div>
|
||
<div class="metric-item" data-metric="学习态度">
|
||
<div class="metric-label">学习态度</div>
|
||
<div class="star-rating editable" data-score="5">
|
||
<span class="star" data-val="1">★</span>
|
||
<span class="star" data-val="2">★</span>
|
||
<span class="star" data-val="3">★</span>
|
||
<span class="star" data-val="4">★</span>
|
||
<span class="star" data-val="5">★</span>
|
||
<span class="star-score">超棒</span>
|
||
</div>
|
||
<div class="metric-comment" data-metric-comment="学习态度">态度端正，遇到困难不放弃，主动请教</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DYNAMIC: CSP 课程 OJ 做题数据表格 —— 仅 CSP 课程显示 -->
|
||
<div class="oj-section" data-oj-section="学生姓名">
|
||
<div class="oj-header">
|
||
<span>📊</span>
|
||
<span>OJ 做题情况</span>
|
||
</div>
|
||
<table class="oj-table">
|
||
<thead>
|
||
<tr>
|
||
<th>题目</th>
|
||
<th>状态</th>
|
||
<th style="text-align:center">提交次数</th>
|
||
<th style="text-align:center">思考模式</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- DYNAMIC: OJ 题目数据行 —— 为每道题生成一行 -->
|
||
<tr>
|
||
<td>题目名称示例</td>
|
||
<td><span class="oj-status ac"><span class="oj-status-icon">✓</span>AC</span></td>
|
||
<td class="oj-submit-count">1</td>
|
||
<td class="oj-pattern">一气呵成</td>
|
||
</tr>
|
||
<tr>
|
||
<td>题目名称示例 2</td>
|
||
<td><span class="oj-status wa"><span class="oj-status-icon">✗</span>WA→AC</span></td>
|
||
<td class="oj-submit-count highlight">3</td>
|
||
<td class="oj-pattern">调试改进</td>
|
||
</tr>
|
||
<tr>
|
||
<td>题目名称示例 3</td>
|
||
<td><span class="oj-status pending">未完成</span></td>
|
||
<td class="oj-submit-count">0</td>
|
||
<td class="oj-pattern">-</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="oj-summary">
|
||
<div class="oj-summary-item">
|
||
<span>完成：</span><span class="oj-summary-num">2/3</span>
|
||
</div>
|
||
<div class="oj-summary-item">
|
||
<span>AC：</span><span class="oj-summary-num">2</span>
|
||
</div>
|
||
<div class="oj-summary-item">
|
||
<span>总提交：</span><span class="oj-summary-num">4</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /DYNAMIC OJ 表格 -->
|
||
</div>
|
||
</div>
|
||
<!-- /DYNAMIC 学生卡片 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导航控制 -->
|
||
<div class="nav-controls">
|
||
<span class="page-indicator" id="pageIndicator">1 / N</span>
|
||
</div>
|
||
|
||
<!-- 进度点 -->
|
||
<div class="progress-dots" id="progressDots">
|
||
<!-- DYNAMIC: 为每个学生生成一个进度点，第一个是 active -->
|
||
<div class="progress-dot active" onclick="goToCard(0)"></div>
|
||
</div>
|
||
|
||
<div class="footer">穹狼科创 · [课程编号]班 · 橙子老师</div>
|
||
</div>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<div class="bottom-bar" id="bottomBar" style="display: none;">
|
||
<button class="btn btn-outline" onclick="cancelEdit()">取消</button>
|
||
<button class="btn btn-success" onclick="saveEdit()">✓ 保存修改</button>
|
||
</div>
|
||
|
||
<!-- 提示条 -->
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<script>
|
||
// ===== 卡片切换 =====
|
||
let currentCard = 0;
|
||
// DYNAMIC: 学生总数
|
||
const totalCards = 1;
|
||
const allCards = document.querySelectorAll('.student-card');
|
||
const sidePrevBtn = document.getElementById('sidePrevBtn');
|
||
const sideNextBtn = document.getElementById('sideNextBtn');
|
||
const pageIndicator = document.getElementById('pageIndicator');
|
||
const progressDots = document.querySelectorAll('.progress-dot');
|
||
|
||
function updateSlider() {
|
||
allCards.forEach(function(card, i) {
|
||
card.classList.remove('active', 'prev');
|
||
if (i === currentCard) { card.classList.add('active'); }
|
||
else if (i < currentCard) { card.classList.add('prev'); }
|
||
});
|
||
pageIndicator.textContent = (currentCard + 1) + ' / ' + totalCards;
|
||
sidePrevBtn.disabled = currentCard === 0;
|
||
sideNextBtn.disabled = currentCard === totalCards - 1;
|
||
progressDots.forEach(function(dot, i) { dot.classList.toggle('active', i === currentCard); });
|
||
}
|
||
|
||
function nextCard() { if (currentCard < totalCards - 1) { currentCard++; updateSlider(); } }
|
||
function prevCard() { if (currentCard > 0) { currentCard--; updateSlider(); } }
|
||
function goToCard(i) { currentCard = i; updateSlider(); }
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'ArrowLeft') prevCard();
|
||
if (e.key === 'ArrowRight') nextCard();
|
||
});
|
||
|
||
var touchStartX = 0;
|
||
var sliderEl = document.getElementById('cardsSlider');
|
||
sliderEl.addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; });
|
||
sliderEl.addEventListener('touchend', function(e) {
|
||
var dx = e.changedTouches[0].screenX;
|
||
if (touchStartX - dx > 50) nextCard();
|
||
if (dx - touchStartX > 50) prevCard();
|
||
});
|
||
|
||
updateSlider();
|
||
initStarRatings();
|
||
|
||
// ===== 学习目标展开/收起 =====
|
||
function toggleGoals() {
|
||
var list = document.getElementById('goalsList');
|
||
var btn = document.querySelector('.goals-toggle');
|
||
list.classList.toggle('collapsed');
|
||
btn.textContent = list.classList.contains('collapsed') ? '展开' : '收起';
|
||
}
|
||
|
||
// ===== 星星评分功能 =====
|
||
function initStarRatings() {
|
||
document.querySelectorAll('.star-rating').forEach(function(rating) {
|
||
var stars = rating.querySelectorAll('.star');
|
||
var scoreDisplay = rating.querySelector('.star-score');
|
||
|
||
// 自动应用默认分数（从 data-score 读取）
|
||
var defaultScore = parseInt(rating.dataset.score) || 0;
|
||
if (defaultScore > 0) {
|
||
setStarRating(rating, defaultScore);
|
||
}
|
||
|
||
stars.forEach(function(star) {
|
||
// 鼠标悬停预览
|
||
star.addEventListener('mouseenter', function() {
|
||
if (!rating.classList.contains('editable')) return;
|
||
var val = parseInt(this.dataset.val);
|
||
stars.forEach(function(s) {
|
||
var sv = parseInt(s.dataset.val);
|
||
if (sv <= val) s.classList.add('hovered');
|
||
else s.classList.remove('hovered');
|
||
});
|
||
});
|
||
|
||
// 鼠标离开恢复
|
||
star.addEventListener('mouseleave', function() {
|
||
stars.forEach(function(s) { s.classList.remove('hovered'); });
|
||
});
|
||
|
||
// 点击评分
|
||
star.addEventListener('click', function() {
|
||
if (!rating.classList.contains('editable')) return;
|
||
var val = parseInt(this.dataset.val);
|
||
var currentScore = parseInt(rating.dataset.score);
|
||
// 再次点击同分则取消
|
||
if (currentScore === val) val = 0;
|
||
setStarRating(rating, val);
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
function setStarRating(ratingEl, score) {
|
||
ratingEl.dataset.score = score;
|
||
var stars = ratingEl.querySelectorAll('.star');
|
||
var scoreDisplay = ratingEl.querySelector('.star-score');
|
||
|
||
stars.forEach(function(s) {
|
||
var sv = parseInt(s.dataset.val);
|
||
s.classList.remove('filled', 'half-filled');
|
||
if (sv <= score) s.classList.add('filled');
|
||
});
|
||
|
||
var labels = ['未评', '需加强', '合格', '良好', '优秀', '超棒'];
|
||
scoreDisplay.textContent = labels[score] || '未评';
|
||
}
|
||
|
||
// ===== 编辑功能 =====
|
||
var originalContent = {};
|
||
var originalMetrics = {};
|
||
var isEditMode = false;
|
||
|
||
function toggleEdit() {
|
||
isEditMode = !isEditMode;
|
||
var feedbacks = document.querySelectorAll('.feedback-content');
|
||
var metricComments = document.querySelectorAll('.metric-comment');
|
||
var starRatings = document.querySelectorAll('.star-rating');
|
||
var editBtn = document.getElementById('editBtn');
|
||
var editBadge = document.getElementById('editBadge');
|
||
var bottomBar = document.getElementById('bottomBar');
|
||
|
||
if (isEditMode) {
|
||
// 保存原始状态
|
||
feedbacks.forEach(function(el) { originalContent[el.dataset.student] = el.innerHTML; });
|
||
metricComments.forEach(function(el) {
|
||
var key = el.closest('.student-card').querySelector('.student-name').textContent + '-' + el.dataset.metricComment;
|
||
originalMetrics[key] = { text: el.innerHTML, score: 0 };
|
||
});
|
||
starRatings.forEach(function(el) {
|
||
var key = el.closest('.student-card').querySelector('.student-name').textContent + '-' + el.closest('.metric-item').dataset.metric;
|
||
if (originalMetrics[key]) originalMetrics[key].score = el.dataset.score;
|
||
});
|
||
|
||
// 开启编辑
|
||
feedbacks.forEach(function(el) { el.contentEditable = true; });
|
||
metricComments.forEach(function(el) { el.contentEditable = true; });
|
||
starRatings.forEach(function(el) { el.classList.add('editable'); });
|
||
editBtn.textContent = '✏️ 退出编辑';
|
||
editBadge.classList.add('show');
|
||
bottomBar.style.display = 'flex';
|
||
showToast('编辑模式已开启，点击文字或星星即可修改');
|
||
} else {
|
||
feedbacks.forEach(function(el) { el.contentEditable = false; });
|
||
metricComments.forEach(function(el) { el.contentEditable = false; });
|
||
starRatings.forEach(function(el) { el.classList.remove('editable'); });
|
||
editBtn.textContent = '✏️ 编辑';
|
||
editBadge.classList.remove('show');
|
||
bottomBar.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function saveEdit() {
|
||
isEditMode = false;
|
||
document.querySelectorAll('.feedback-content').forEach(function(el) { el.contentEditable = false; });
|
||
document.querySelectorAll('.metric-comment').forEach(function(el) { el.contentEditable = false; });
|
||
document.querySelectorAll('.star-rating').forEach(function(el) { el.classList.remove('editable'); });
|
||
document.getElementById('editBtn').textContent = '✏️ 编辑';
|
||
document.getElementById('editBadge').classList.remove('show');
|
||
document.getElementById('bottomBar').style.display = 'none';
|
||
originalContent = {};
|
||
originalMetrics = {};
|
||
showToast('✓ 修改已保存');
|
||
}
|
||
|
||
function cancelEdit() {
|
||
isEditMode = false;
|
||
document.querySelectorAll('.feedback-content').forEach(function(el) {
|
||
if (originalContent[el.dataset.student]) el.innerHTML = originalContent[el.dataset.student];
|
||
el.contentEditable = false;
|
||
});
|
||
|
||
// 恢复指标评语
|
||
document.querySelectorAll('.metric-comment').forEach(function(el) {
|
||
var key = el.closest('.student-card').querySelector('.student-name').textContent + '-' + el.dataset.metricComment;
|
||
if (originalMetrics[key]) el.innerHTML = originalMetrics[key].text;
|
||
el.contentEditable = false;
|
||
});
|
||
|
||
// 恢复星星评分
|
||
document.querySelectorAll('.star-rating').forEach(function(el) {
|
||
var key = el.closest('.student-card').querySelector('.student-name').textContent + '-' + el.closest('.metric-item').dataset.metric;
|
||
if (originalMetrics[key]) setStarRating(el, parseInt(originalMetrics[key].score));
|
||
el.classList.remove('editable');
|
||
});
|
||
|
||
document.getElementById('editBtn').textContent = '✏️ 编辑';
|
||
document.getElementById('editBadge').classList.remove('show');
|
||
document.getElementById('bottomBar').style.display = 'none';
|
||
originalContent = {};
|
||
originalMetrics = {};
|
||
showToast('已恢复原始内容');
|
||
}
|
||
|
||
// ===== 导出纯文本 =====
|
||
function exportText() {
|
||
// DYNAMIC: 导出内容中的课程信息
|
||
var text = '第X周[星期时间][课程编号]班课评\n';
|
||
text += 'YYYY年M月D日 · 《课程名称》 · 橙子老师\n';
|
||
text += '═══════════════════════════════════════\n\n';
|
||
text += '🎯 本周知识点\n';
|
||
text += '─────────────────────────────────────\n';
|
||
// DYNAMIC: 列出5个知识点
|
||
text += '1. 知识点1\n2. 知识点2\n3. 知识点3\n4. 知识点4\n5. 知识点5\n\n';
|
||
text += '═══════════════════════════════════════\n\n';
|
||
|
||
document.querySelectorAll('.student-card').forEach(function(card) {
|
||
var name = card.querySelector('.student-name').textContent;
|
||
var badge = card.querySelector('.card-badge').textContent;
|
||
var feedback = card.querySelector('.feedback-content').innerText;
|
||
text += '【' + name + '】' + badge + '\n';
|
||
text += '─────────────────────────────────\n';
|
||
text += feedback + '\n\n';
|
||
|
||
// 导出星星评分和评语
|
||
card.querySelectorAll('.metric-item').forEach(function(m) {
|
||
var label = m.querySelector('.metric-label').textContent;
|
||
var rating = m.querySelector('.star-rating');
|
||
var score = parseInt(rating.dataset.score);
|
||
var scoreLabels = ['未评', '⭐', '⭐⭐', '⭐⭐⭐', '⭐⭐⭐⭐', '⭐⭐⭐⭐⭐'];
|
||
var stars = scoreLabels[score] || '未评';
|
||
var comment = m.querySelector('.metric-comment').innerText.trim();
|
||
if (comment === '点击编辑评语...') comment = '';
|
||
text += ' ' + label + '：' + stars;
|
||
if (comment) text += '（' + comment + '）';
|
||
text += '\n';
|
||
});
|
||
text += '\n';
|
||
});
|
||
|
||
navigator.clipboard.writeText(text).then(function() {
|
||
showToast('✓ 已复制到剪贴板，可直接粘贴发送');
|
||
}).catch(function() {
|
||
var ta = document.createElement('textarea');
|
||
ta.value = text; document.body.appendChild(ta); ta.select();
|
||
document.execCommand('copy'); document.body.removeChild(ta);
|
||
showToast('✓ 已复制到剪贴板');
|
||
});
|
||
}
|
||
|
||
function showToast(msg) {
|
||
var toast = document.getElementById('toast');
|
||
toast.textContent = msg;
|
||
toast.classList.add('show');
|
||
setTimeout(function() { toast.classList.remove('show'); }, 2000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|