selfrelease
1068 lines
44 KiB
HTML
1068 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>产品界面截图 | K12C</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary: #2563eb;
|
|
--primary-light: #3b82f6;
|
|
--primary-dark: #1d4ed8;
|
|
--success: #059669;
|
|
--success-light: #10b981;
|
|
--warning: #f59e0b;
|
|
--danger: #ef4444;
|
|
--purple: #7c3aed;
|
|
--purple-light: #8b5cf6;
|
|
--bg: #f8fafc;
|
|
--card: #ffffff;
|
|
--text: #1e293b;
|
|
--text-light: #64748b;
|
|
--border: #e2e8f0;
|
|
--shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: #ffffff;
|
|
min-height: 100vh;
|
|
padding: 40px 20px;
|
|
}
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
color: #fff;
|
|
}
|
|
.header h1 {
|
|
font-size: 2.5em;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.header p {
|
|
font-size: 1.1em;
|
|
color: #94a3b8;
|
|
}
|
|
.screens-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 40px;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.screens-grid { grid-template-columns: 1fr; }
|
|
}
|
|
.screen-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.screen-label {
|
|
color: #94a3b8;
|
|
font-size: 0.9em;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.screen-label i { color: #60a5fa; }
|
|
.phone-frame {
|
|
width: 340px;
|
|
background: #1e293b;
|
|
border-radius: 40px;
|
|
padding: 12px;
|
|
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.1);
|
|
}
|
|
.phone-screen {
|
|
background: var(--bg);
|
|
border-radius: 32px;
|
|
overflow: hidden;
|
|
min-height: 620px;
|
|
}
|
|
/* App Header */
|
|
.app-header {
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
|
color: #fff;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
.app-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 40px;
|
|
background: linear-gradient(to bottom, rgba(37,99,235,0.15), transparent);
|
|
}
|
|
.app-header-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.app-header h1 {
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
}
|
|
.avatar-small {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
}
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.user-info .name { font-size: 0.95em; font-weight: 500; }
|
|
.user-info .role { font-size: 0.75em; opacity: 0.8; }
|
|
.app-content { padding: 20px; }
|
|
/* Profile Card */
|
|
.profile-card {
|
|
background: var(--card);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 16px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.profile-header {
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.profile-avatar {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
.profile-info h3 { font-size: 1em; color: var(--text); margin-bottom: 4px; }
|
|
.profile-info p { font-size: 0.8em; color: var(--text-light); }
|
|
.profile-badge {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
|
color: var(--primary);
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.7em;
|
|
font-weight: 500;
|
|
margin-top: 6px;
|
|
}
|
|
/* Mini Radar */
|
|
.mini-radar {
|
|
height: 140px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.mini-radar canvas { max-width: 100%; }
|
|
/* Stats Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 12px 8px;
|
|
background: var(--bg);
|
|
border-radius: 12px;
|
|
}
|
|
.stat-value {
|
|
font-size: 1.3em;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
}
|
|
.stat-value.green { color: var(--success); }
|
|
.stat-value.purple { color: var(--purple); }
|
|
.stat-label { font-size: 0.7em; color: var(--text-light); margin-top: 2px; }
|
|
/* Dimensions List */
|
|
.dim-list {
|
|
background: var(--card);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.dim-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.dim-item:last-child { border-bottom: none; }
|
|
.dim-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 12px;
|
|
font-size: 0.9em;
|
|
}
|
|
.dim-icon.blue { background: #dbeafe; color: var(--primary); }
|
|
.dim-icon.green { background: #d1fae5; color: var(--success); }
|
|
.dim-icon.purple { background: #ede9fe; color: var(--purple); }
|
|
.dim-icon.orange { background: #fef3c7; color: var(--warning); }
|
|
.dim-icon.red { background: #fee2e2; color: var(--danger); }
|
|
.dim-info { flex: 1; }
|
|
.dim-info h4 { font-size: 0.85em; color: var(--text); font-weight: 500; }
|
|
.dim-info p { font-size: 0.7em; color: var(--text-light); margin-top: 2px; }
|
|
.dim-score {
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
.dim-bar {
|
|
width: 60px;
|
|
height: 6px;
|
|
background: var(--border);
|
|
border-radius: 3px;
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.dim-bar-fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
}
|
|
/* Dashboard */
|
|
.dashboard-header {
|
|
background: linear-gradient(135deg, #0f172a, #1e293b);
|
|
color: #fff;
|
|
padding: 20px;
|
|
}
|
|
.dashboard-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.dashboard-title i { font-size: 1.4em; color: #60a5fa; }
|
|
.dashboard-title h1 { font-size: 1.2em; font-weight: 600; }
|
|
.dashboard-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.tab {
|
|
padding: 8px 14px;
|
|
border-radius: 20px;
|
|
font-size: 0.8em;
|
|
background: rgba(255,255,255,0.1);
|
|
color: #94a3b8;
|
|
}
|
|
.tab.active {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
}
|
|
/* KPI Cards */
|
|
.kpi-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
padding: 16px;
|
|
}
|
|
.kpi-card {
|
|
background: var(--card);
|
|
border-radius: 14px;
|
|
padding: 14px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.kpi-card.highlight {
|
|
grid-column: span 2;
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
|
color: #fff;
|
|
}
|
|
.kpi-card.highlight .kpi-value { color: #fff; }
|
|
.kpi-card.highlight .kpi-label { color: rgba(255,255,255,0.8); }
|
|
.kpi-value {
|
|
font-size: 1.6em;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
.kpi-label {
|
|
font-size: 0.75em;
|
|
color: var(--text-light);
|
|
margin-top: 4px;
|
|
}
|
|
.kpi-trend {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 0.75em;
|
|
margin-top: 6px;
|
|
}
|
|
.kpi-trend.up { color: var(--success); }
|
|
.kpi-trend.down { color: var(--danger); }
|
|
/* Chart Area */
|
|
.chart-area {
|
|
background: var(--card);
|
|
margin: 0 16px 16px;
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.chart-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
}
|
|
.chart-title h3 { font-size: 0.9em; color: var(--text); }
|
|
.chart-title select {
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-size: 0.75em;
|
|
background: var(--bg);
|
|
}
|
|
.bar-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-around;
|
|
height: 100px;
|
|
padding-top: 10px;
|
|
}
|
|
.bar-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 28px;
|
|
}
|
|
.bar {
|
|
width: 24px;
|
|
border-radius: 4px 4px 0 0;
|
|
transition: height 0.3s;
|
|
}
|
|
.bar-label {
|
|
font-size: 0.65em;
|
|
color: var(--text-light);
|
|
margin-top: 6px;
|
|
}
|
|
/* Teacher List */
|
|
.teacher-list {
|
|
background: var(--card);
|
|
margin: 0 16px 16px;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.teacher-list-header {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.teacher-list-header h3 { font-size: 0.9em; color: var(--text); }
|
|
.teacher-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.teacher-item:last-child { border-bottom: none; }
|
|
.teacher-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-right: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
}
|
|
.teacher-info { flex: 1; }
|
|
.teacher-info h4 { font-size: 0.85em; color: var(--text); }
|
|
.teacher-info p { font-size: 0.7em; color: var(--text-light); }
|
|
.teacher-score {
|
|
text-align: right;
|
|
}
|
|
.teacher-score .score {
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
}
|
|
.teacher-score .level {
|
|
font-size: 0.65em;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
margin-top: 2px;
|
|
display: inline-block;
|
|
}
|
|
.level.excellent { background: #d1fae5; color: var(--success); }
|
|
.level.good { background: #dbeafe; color: var(--primary); }
|
|
.level.average { background: #fef3c7; color: var(--warning); }
|
|
/* AI Card */
|
|
.ai-header {
|
|
background: linear-gradient(135deg, var(--purple), #6d28d9);
|
|
color: #fff;
|
|
padding: 20px;
|
|
}
|
|
.ai-avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 12px;
|
|
font-size: 1.8em;
|
|
}
|
|
.ai-header h1 {
|
|
text-align: center;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
.ai-header p {
|
|
text-align: center;
|
|
font-size: 0.8em;
|
|
opacity: 0.8;
|
|
}
|
|
/* Suggestion Cards */
|
|
.suggestion-card {
|
|
background: var(--card);
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
margin-bottom: 12px;
|
|
box-shadow: var(--shadow);
|
|
border-left: 4px solid;
|
|
}
|
|
.suggestion-card.warning { border-color: var(--warning); }
|
|
.suggestion-card.success { border-color: var(--success); }
|
|
.suggestion-card.info { border-color: var(--primary); }
|
|
.suggestion-card.purple { border-color: var(--purple); }
|
|
.suggestion-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.suggestion-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.9em;
|
|
}
|
|
.suggestion-card.warning .suggestion-icon { background: #fef3c7; color: var(--warning); }
|
|
.suggestion-card.success .suggestion-icon { background: #d1fae5; color: var(--success); }
|
|
.suggestion-card.info .suggestion-icon { background: #dbeafe; color: var(--primary); }
|
|
.suggestion-card.purple .suggestion-icon { background: #ede9fe; color: var(--purple); }
|
|
.suggestion-title { font-size: 0.9em; font-weight: 600; color: var(--text); }
|
|
.suggestion-content {
|
|
font-size: 0.8em;
|
|
color: var(--text-light);
|
|
line-height: 1.5;
|
|
margin-bottom: 10px;
|
|
}
|
|
.suggestion-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.tag {
|
|
padding: 4px 10px;
|
|
background: var(--bg);
|
|
border-radius: 12px;
|
|
font-size: 0.7em;
|
|
color: var(--text-light);
|
|
}
|
|
/* PDP Page */
|
|
.pdp-header {
|
|
background: linear-gradient(135deg, var(--success), #047857);
|
|
color: #fff;
|
|
padding: 20px;
|
|
}
|
|
.pdp-header h1 { font-size: 1.1em; font-weight: 600; margin-bottom: 4px; }
|
|
.pdp-header p { font-size: 0.8em; opacity: 0.8; }
|
|
.timeline {
|
|
padding: 20px;
|
|
}
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
padding-bottom: 24px;
|
|
border-left: 2px solid var(--border);
|
|
}
|
|
.timeline-item:last-child { border-left-color: transparent; }
|
|
.timeline-dot {
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 0;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
border: 3px solid var(--bg);
|
|
}
|
|
.timeline-item:nth-child(2) .timeline-dot { background: var(--success); }
|
|
.timeline-item:nth-child(3) .timeline-dot { background: var(--warning); }
|
|
.timeline-item.completed .timeline-dot { background: var(--success); }
|
|
.timeline-item.completed .timeline-dot::after {
|
|
content: '\f00c';
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #fff;
|
|
font-size: 0.5em;
|
|
}
|
|
.timeline-date {
|
|
font-size: 0.7em;
|
|
color: var(--text-light);
|
|
margin-bottom: 6px;
|
|
}
|
|
.timeline-title {
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 6px;
|
|
}
|
|
.timeline-desc {
|
|
font-size: 0.8em;
|
|
color: var(--text-light);
|
|
line-height: 1.4;
|
|
}
|
|
.timeline-progress {
|
|
height: 4px;
|
|
background: var(--border);
|
|
border-radius: 2px;
|
|
margin-top: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.timeline-progress-fill {
|
|
height: 100%;
|
|
border-radius: 2px;
|
|
}
|
|
.goal-card {
|
|
background: var(--card);
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
margin: 0 16px 16px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.goal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.goal-header h3 { font-size: 0.9em; color: var(--text); }
|
|
.goal-badge {
|
|
padding: 4px 10px;
|
|
background: #d1fae5;
|
|
color: var(--success);
|
|
border-radius: 12px;
|
|
font-size: 0.7em;
|
|
font-weight: 500;
|
|
}
|
|
.goal-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.goal-item:last-child { border-bottom: none; }
|
|
.goal-check {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.6em;
|
|
color: transparent;
|
|
}
|
|
.goal-item.done .goal-check {
|
|
background: var(--success);
|
|
border-color: var(--success);
|
|
color: #fff;
|
|
}
|
|
.goal-item.done .goal-text { text-decoration: line-through; color: var(--text-light); }
|
|
.goal-text { font-size: 0.85em; color: var(--text); flex: 1; }
|
|
.goal-date { font-size: 0.7em; color: var(--text-light); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>产品界面示意</h1>
|
|
<p>教师岗位胜任力数字化管理平台</p>
|
|
</div>
|
|
|
|
<div class="screens-grid">
|
|
<!-- Screen 1: Teacher Profile -->
|
|
<div class="screen-wrapper">
|
|
<div class="screen-label">
|
|
<i class="fas fa-user-circle"></i>
|
|
<span>教师端 · 能力画像</span>
|
|
</div>
|
|
<div class="phone-frame">
|
|
<div class="phone-screen">
|
|
<div class="app-header">
|
|
<div class="app-header-top">
|
|
<div class="user-info">
|
|
<div class="avatar-small">李</div>
|
|
<div>
|
|
<div class="name">李明华老师</div>
|
|
<div class="role">初三数学 · 学科教师</div>
|
|
</div>
|
|
</div>
|
|
<i class="fas fa-bell" style="font-size:1.1em;opacity:0.9;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="app-content">
|
|
<div class="profile-card">
|
|
<div class="profile-header">
|
|
<div class="profile-avatar">李</div>
|
|
<div class="profile-info">
|
|
<h3>李明华</h3>
|
|
<p>数学学科 · 教龄 8 年</p>
|
|
<span class="profile-badge"><i class="fas fa-star" style="margin-right:4px;"></i>优秀教师</span>
|
|
</div>
|
|
</div>
|
|
<div class="mini-radar">
|
|
<canvas id="radar1" width="200" height="160"></canvas>
|
|
</div>
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-value">4.3</div>
|
|
<div class="stat-label">综合评分</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value green">Top 15%</div>
|
|
<div class="stat-label">年级排名</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value purple">+0.8</div>
|
|
<div class="stat-label">本学期提升</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dim-list">
|
|
<div class="dim-item">
|
|
<div class="dim-icon blue"><i class="fas fa-book-open"></i></div>
|
|
<div class="dim-info">
|
|
<h4>专业知识</h4>
|
|
<div class="dim-bar"><div class="dim-bar-fill" style="width:84%;background:var(--primary);"></div></div>
|
|
</div>
|
|
<div class="dim-score">4.2</div>
|
|
</div>
|
|
<div class="dim-item">
|
|
<div class="dim-icon green"><i class="fas fa-chalkboard-teacher"></i></div>
|
|
<div class="dim-info">
|
|
<h4>教学能力</h4>
|
|
<div class="dim-bar"><div class="dim-bar-fill" style="width:90%;background:var(--success);"></div></div>
|
|
</div>
|
|
<div class="dim-score">4.5</div>
|
|
</div>
|
|
<div class="dim-item">
|
|
<div class="dim-icon purple"><i class="fas fa-users"></i></div>
|
|
<div class="dim-info">
|
|
<h4>协作沟通</h4>
|
|
<div class="dim-bar"><div class="dim-bar-fill" style="width:76%;background:var(--purple);"></div></div>
|
|
</div>
|
|
<div class="dim-score">3.8</div>
|
|
</div>
|
|
<div class="dim-item">
|
|
<div class="dim-icon orange"><i class="fas fa-laptop-code"></i></div>
|
|
<div class="dim-info">
|
|
<h4>数字技术</h4>
|
|
<div class="dim-bar"><div class="dim-bar-fill" style="width:80%;background:var(--warning);"></div></div>
|
|
</div>
|
|
<div class="dim-score">4.0</div>
|
|
</div>
|
|
<div class="dim-item">
|
|
<div class="dim-icon red"><i class="fas fa-seedling"></i></div>
|
|
<div class="dim-info">
|
|
<h4>持续发展</h4>
|
|
<div class="dim-bar"><div class="dim-bar-fill" style="width:86%;background:var(--danger);"></div></div>
|
|
</div>
|
|
<div class="dim-score">4.3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Screen 2: Dashboard -->
|
|
<div class="screen-wrapper">
|
|
<div class="screen-label">
|
|
<i class="fas fa-chart-pie"></i>
|
|
<span>管理端 · 驾驶舱</span>
|
|
</div>
|
|
<div class="phone-frame">
|
|
<div class="phone-screen">
|
|
<div class="dashboard-header">
|
|
<div class="dashboard-title">
|
|
<i class="fas fa-chart-line"></i>
|
|
<h1>管理驾驶舱</h1>
|
|
</div>
|
|
<div class="dashboard-tabs">
|
|
<span class="tab active">全校概览</span>
|
|
<span class="tab">年级分析</span>
|
|
<span class="tab">学科对比</span>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-row">
|
|
<div class="kpi-card highlight">
|
|
<div class="kpi-value">96<span style="font-size:0.5em;">/120</span></div>
|
|
<div class="kpi-label">在编教师总数</div>
|
|
<div class="kpi-trend up"><i class="fas fa-arrow-up"></i> 本学期新增 5 人</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-value">4.2</div>
|
|
<div class="kpi-label">全校平均分</div>
|
|
<div class="kpi-trend up"><i class="fas fa-arrow-up"></i> +0.3</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-value" style="color:var(--success);">89%</div>
|
|
<div class="kpi-label">达标率</div>
|
|
<div class="kpi-trend up"><i class="fas fa-arrow-up"></i> +5%</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-area">
|
|
<div class="chart-title">
|
|
<h3><i class="fas fa-chart-bar" style="margin-right:6px;color:var(--primary);"></i>各学科胜任力分布</h3>
|
|
<select><option>本学期</option></select>
|
|
</div>
|
|
<div class="bar-chart">
|
|
<div class="bar-item">
|
|
<div class="bar" style="height:75px;background:linear-gradient(to top,#2563eb,#60a5fa);"></div>
|
|
<div class="bar-label">数学</div>
|
|
</div>
|
|
<div class="bar-item">
|
|
<div class="bar" style="height:65px;background:linear-gradient(to top,#059669,#34d399);"></div>
|
|
<div class="bar-label">语文</div>
|
|
</div>
|
|
<div class="bar-item">
|
|
<div class="bar" style="height:80px;background:linear-gradient(to top,#7c3aed,#a78bfa);"></div>
|
|
<div class="bar-label">英语</div>
|
|
</div>
|
|
<div class="bar-item">
|
|
<div class="bar" style="height:55px;background:linear-gradient(to top,#f59e0b,#fbbf24);"></div>
|
|
<div class="bar-label">物理</div>
|
|
</div>
|
|
<div class="bar-item">
|
|
<div class="bar" style="height:70px;background:linear-gradient(to top,#ec4899,#f472b6);"></div>
|
|
<div class="bar-label">化学</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="teacher-list">
|
|
<div class="teacher-list-header">
|
|
<h3><i class="fas fa-crown" style="margin-right:6px;color:var(--warning);"></i>TOP 优秀教师</h3>
|
|
<span style="font-size:0.75em;color:var(--text-light);">查看全部</span>
|
|
</div>
|
|
<div class="teacher-item">
|
|
<div class="teacher-avatar" style="background:linear-gradient(135deg,#fbbf24,#f59e0b);">王</div>
|
|
<div class="teacher-info">
|
|
<h4>王秀英</h4>
|
|
<p>英语 · 初三</p>
|
|
</div>
|
|
<div class="teacher-score">
|
|
<div class="score">4.8</div>
|
|
<span class="level excellent">优秀</span>
|
|
</div>
|
|
</div>
|
|
<div class="teacher-item">
|
|
<div class="teacher-avatar" style="background:linear-gradient(135deg,#34d399,#059669);">陈</div>
|
|
<div class="teacher-info">
|
|
<h4>陈建国</h4>
|
|
<p>数学 · 初二</p>
|
|
</div>
|
|
<div class="teacher-score">
|
|
<div class="score">4.6</div>
|
|
<span class="level excellent">优秀</span>
|
|
</div>
|
|
</div>
|
|
<div class="teacher-item">
|
|
<div class="teacher-avatar" style="background:linear-gradient(135deg,#60a5fa,#2563eb);">李</div>
|
|
<div class="teacher-info">
|
|
<h4>李明华</h4>
|
|
<p>数学 · 初三</p>
|
|
</div>
|
|
<div class="teacher-score">
|
|
<div class="score">4.3</div>
|
|
<span class="level good">良好</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Screen 3: AI Suggestions -->
|
|
<div class="screen-wrapper">
|
|
<div class="screen-label">
|
|
<i class="fas fa-robot"></i>
|
|
<span>教师端 · AI 智能建议</span>
|
|
</div>
|
|
<div class="phone-frame">
|
|
<div class="phone-screen">
|
|
<div class="ai-header">
|
|
<div class="ai-avatar"><i class="fas fa-robot"></i></div>
|
|
<h1>AI 智能分析</h1>
|
|
<p>基于您的能力画像，生成个性化建议</p>
|
|
</div>
|
|
<div class="app-content">
|
|
<div class="suggestion-card warning">
|
|
<div class="suggestion-header">
|
|
<div class="suggestion-icon"><i class="fas fa-exclamation-triangle"></i></div>
|
|
<span class="suggestion-title">短板识别</span>
|
|
</div>
|
|
<div class="suggestion-content">
|
|
<strong>协作沟通</strong> 得分 3.8，低于全校平均分 0.4 分。家校互动频率不足，与搭班教师的教研协作有待加强。
|
|
</div>
|
|
<div class="suggestion-tags">
|
|
<span class="tag">家校沟通</span>
|
|
<span class="tag">跨科教研</span>
|
|
<span class="tag">需重点提升</span>
|
|
</div>
|
|
</div>
|
|
<div class="suggestion-card success">
|
|
<div class="suggestion-header">
|
|
<div class="suggestion-icon"><i class="fas fa-lightbulb"></i></div>
|
|
<span class="suggestion-title">发展建议</span>
|
|
</div>
|
|
<div class="suggestion-content">
|
|
建议参加 <strong>「高效家校沟通技巧」</strong> 培训课程，同时加入 <strong>「数学跨年级教研小组」</strong> 提升协作能力。
|
|
</div>
|
|
<div class="suggestion-tags">
|
|
<span class="tag">培训课程</span>
|
|
<span class="tag">教研参与</span>
|
|
</div>
|
|
</div>
|
|
<div class="suggestion-card info">
|
|
<div class="suggestion-header">
|
|
<div class="suggestion-icon"><i class="fas fa-book"></i></div>
|
|
<span class="suggestion-title">推荐学习</span>
|
|
</div>
|
|
<div class="suggestion-content">
|
|
根据您的学习偏好，为您精选以下资源：
|
|
</div>
|
|
<div class="suggestion-tags">
|
|
<span class="tag">《家校沟通的艺术》</span>
|
|
<span class="tag">《协作式教学设计》</span>
|
|
<span class="tag">优秀案例分享</span>
|
|
</div>
|
|
</div>
|
|
<div class="suggestion-card purple">
|
|
<div class="suggestion-header">
|
|
<div class="suggestion-icon"><i class="fas fa-trophy"></i></div>
|
|
<span class="suggestion-title">潜力预测</span>
|
|
</div>
|
|
<div class="suggestion-content">
|
|
若在 <strong>协作沟通</strong> 维度提升至 4.2 以上，您的综合排名预计可提升至 <strong>年级前 8%</strong>。
|
|
</div>
|
|
<div class="suggestion-tags">
|
|
<span class="tag">成长空间大</span>
|
|
<span class="tag">高潜教师</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Screen 4: PDP -->
|
|
<div class="screen-wrapper">
|
|
<div class="screen-label">
|
|
<i class="fas fa-route"></i>
|
|
<span>教师端 · 个人发展计划</span>
|
|
</div>
|
|
<div class="phone-frame">
|
|
<div class="phone-screen">
|
|
<div class="pdp-header">
|
|
<h1><i class="fas fa-route" style="margin-right:8px;"></i>个人发展计划</h1>
|
|
<p>2024年秋季学期 · 李明华</p>
|
|
</div>
|
|
<div class="timeline">
|
|
<div class="timeline-item completed">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-date">第 1-2 周（已完成）</div>
|
|
<div class="timeline-title">能力诊断与目标设定</div>
|
|
<div class="timeline-desc">完成五维能力测评，明确发展重点方向</div>
|
|
<div class="timeline-progress">
|
|
<div class="timeline-progress-fill" style="width:100%;background:var(--success);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-date">第 3-6 周（进行中）</div>
|
|
<div class="timeline-title">协作沟通专项提升</div>
|
|
<div class="timeline-desc">参加家校沟通培训 + 每周一次教研协作</div>
|
|
<div class="timeline-progress">
|
|
<div class="timeline-progress-fill" style="width:60%;background:var(--primary);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-date">第 7-10 周</div>
|
|
<div class="timeline-title">数字技术融合教学</div>
|
|
<div class="timeline-desc">完成 3 节信息化示范课制作</div>
|
|
<div class="timeline-progress">
|
|
<div class="timeline-progress-fill" style="width:0%;background:var(--warning);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-date">第 11-16 周</div>
|
|
<div class="timeline-title">成果总结与复盘</div>
|
|
<div class="timeline-desc">整理成长档案，提交学期总结报告</div>
|
|
<div class="timeline-progress">
|
|
<div class="timeline-progress-fill" style="width:0%;background:var(--purple);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="goal-card">
|
|
<div class="goal-header">
|
|
<h3><i class="fas fa-bullseye" style="margin-right:6px;color:var(--primary);"></i>本阶段目标</h3>
|
|
<span class="goal-badge">进行中</span>
|
|
</div>
|
|
<div class="goal-item done">
|
|
<div class="goal-check"><i class="fas fa-check"></i></div>
|
|
<span class="goal-text">完成《高效沟通》视频课程学习</span>
|
|
<span class="goal-date">10.15</span>
|
|
</div>
|
|
<div class="goal-item done">
|
|
<div class="goal-check"><i class="fas fa-check"></i></div>
|
|
<span class="goal-text">参加家校沟通工作坊（线下）</span>
|
|
<span class="goal-date">10.22</span>
|
|
</div>
|
|
<div class="goal-item">
|
|
<div class="goal-check"></div>
|
|
<span class="goal-text">与班主任进行一次家访</span>
|
|
<span class="goal-date">11.05</span>
|
|
</div>
|
|
<div class="goal-item">
|
|
<div class="goal-check"></div>
|
|
<span class="goal-text">加入数学教研小组并发言</span>
|
|
<span class="goal-date">11.12</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Draw mini radar chart
|
|
function drawRadar(canvasId, values, maxVal) {
|
|
var cvs = document.getElementById(canvasId);
|
|
if (!cvs) return;
|
|
var ctx = cvs.getContext('2d');
|
|
var W = cvs.width, H = cvs.height;
|
|
var cx = W / 2, cy = H / 2 + 10;
|
|
var R = Math.min(W, H) * 0.35;
|
|
var labels = ['专业知识', '教学能力', '协作沟通', '数字技术', '持续发展'];
|
|
var n = labels.length;
|
|
var step = 2 * Math.PI / n;
|
|
var startAngle = -Math.PI / 2;
|
|
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
// Background rings
|
|
for (var l = 1; l <= 4; l++) {
|
|
var r = R * l / 4;
|
|
ctx.beginPath();
|
|
for (var i = 0; i <= n; i++) {
|
|
var a = startAngle + step * i;
|
|
var px = cx + r * Math.cos(a);
|
|
var py = cy + r * Math.sin(a);
|
|
if (i === 0) ctx.moveTo(px, py);
|
|
else ctx.lineTo(px, py);
|
|
}
|
|
ctx.closePath();
|
|
ctx.strokeStyle = l === 4 ? '#cbd5e1' : '#e5e7eb';
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Axis lines
|
|
for (var i = 0; i < n; i++) {
|
|
var a = startAngle + step * i;
|
|
ctx.beginPath();
|
|
ctx.moveTo(cx, cy);
|
|
ctx.lineTo(cx + R * Math.cos(a), cy + R * Math.sin(a));
|
|
ctx.strokeStyle = '#e5e7eb';
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Data polygon
|
|
ctx.beginPath();
|
|
for (var i = 0; i < n; i++) {
|
|
var v = values[i] / maxVal;
|
|
var a = startAngle + step * i;
|
|
var px = cx + R * v * Math.cos(a);
|
|
var py = cy + R * v * Math.sin(a);
|
|
if (i === 0) ctx.moveTo(px, py);
|
|
else ctx.lineTo(px, py);
|
|
}
|
|
ctx.closePath();
|
|
ctx.fillStyle = 'rgba(37, 99, 235, 0.2)';
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#2563eb';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
|
|
// Data points
|
|
for (var i = 0; i < n; i++) {
|
|
var v = values[i] / maxVal;
|
|
var a = startAngle + step * i;
|
|
var px = cx + R * v * Math.cos(a);
|
|
var py = cy + R * v * Math.sin(a);
|
|
ctx.beginPath();
|
|
ctx.arc(px, py, 4, 0, 2 * Math.PI);
|
|
ctx.fillStyle = '#2563eb';
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#fff';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
drawRadar('radar1', [4.2, 4.5, 3.8, 4.0, 4.3], 5);
|
|
</script>
|
|
</body>
|
|
</html> |