'commit'
This commit is contained in:
@@ -152,6 +152,102 @@
|
||||
.result-container table { border-collapse: collapse; width: 100%; margin-bottom: 1.2rem; }
|
||||
.result-container table th, .result-container table td { padding: 0.75rem; border: 1px solid #dfe2e5; text-align: left; }
|
||||
.result-container table th { background-color: #f6f8fa; font-weight: 600; }
|
||||
/* 难度选择器样式 - 优化版 */
|
||||
.difficulty-selector {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.difficulty-btn {
|
||||
flex: 1;
|
||||
padding: 20px 10px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* 基础难度 - 清新蓝绿色系 */
|
||||
.difficulty-btn[data-difficulty='basic'] {
|
||||
background: linear-gradient(135deg, #4ade80 0%, #2dd4bf 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 提高难度 - 活力蓝紫色系 */
|
||||
.difficulty-btn[data-difficulty='intermediate'] {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #818cf8 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 进阶难度 - 优雅粉紫色系 */
|
||||
.difficulty-btn[data-difficulty='advanced'] {
|
||||
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.difficulty-btn i {
|
||||
font-size: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.difficulty-btn:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.difficulty-btn.active {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
||||
border: 3px solid #ffffff;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.difficulty-btn.active::after {
|
||||
content: "✓ 已选择";
|
||||
position: absolute;
|
||||
bottom: -18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #333;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 为选中状态添加脉动动画效果 */
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
|
||||
50% { box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
|
||||
100% { box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
|
||||
}
|
||||
|
||||
.difficulty-btn.active {
|
||||
/* 保留之前的样式 */
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
||||
border: 3px solid #ffffff;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
.difficulty-icon { color: #27ae60; }
|
||||
.difficulty-intermediate .difficulty-icon { color: #f39c12; }
|
||||
.difficulty-advanced .difficulty-icon { color: #e74c3c; }
|
||||
|
||||
.difficulty-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -162,14 +258,7 @@
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">教学资源生成</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -207,14 +296,23 @@
|
||||
<label for="daoXueAnSystemPrompt" class="form-label">系统提示词</label>
|
||||
<textarea class="form-control" id="daoXueAnSystemPrompt" rows="3">你是市级骨干教师,撰写导学案时严格对标"核心素养四维度(物理观念、科学思维、探究能力、态度责任)",并采用"目标—评价—活动"逆向设计模板(UbD)。</textarea>
|
||||
</div>
|
||||
<!-- 新增难度选择器 -->
|
||||
<!-- 新增难度选择器 - 图标形式 -->
|
||||
<div class="mb-3">
|
||||
<label for="daoXueAnDifficulty" class="form-label">难度级别</label>
|
||||
<select class="form-select" id="daoXueAnDifficulty">
|
||||
<option value="basic">基础</option>
|
||||
<option value="intermediate">提高</option>
|
||||
<option value="advanced">进阶</option>
|
||||
</select>
|
||||
<label class="form-label">难度级别</label>
|
||||
<div class="difficulty-selector" id="daoXueAnDifficulty">
|
||||
<div class="difficulty-btn difficulty-basic active" data-difficulty="basic">
|
||||
<div class="difficulty-icon"><i class="bi bi-star"></i></div>
|
||||
<div class="difficulty-text">基础</div>
|
||||
</div>
|
||||
<div class="difficulty-btn difficulty-intermediate" data-difficulty="intermediate">
|
||||
<div class="difficulty-icon"><i class="bi bi-trophy"></i></div>
|
||||
<div class="difficulty-text">提高</div>
|
||||
</div>
|
||||
<div class="difficulty-btn difficulty-advanced" data-difficulty="advanced">
|
||||
<div class="difficulty-icon"><i class="bi bi-rocket"></i></div>
|
||||
<div class="difficulty-text">进阶</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="daoXueAnUserPrompt" class="form-label">用户提示词</label>
|
||||
@@ -276,14 +374,23 @@
|
||||
<label for="zuoYeSystemPrompt" class="form-label">系统提示词</label>
|
||||
<textarea class="form-control" id="zuoYeSystemPrompt" rows="3">你是命题专家,熟悉布鲁姆认知分类和'双减'政策,题量控制为20分钟完成。</textarea>
|
||||
</div>
|
||||
<!-- 新增难度选择器 -->
|
||||
<!-- 新增难度选择器 - 图标形式 -->
|
||||
<div class="mb-3">
|
||||
<label for="zuoYeDifficulty" class="form-label">难度级别</label>
|
||||
<select class="form-select" id="zuoYeDifficulty">
|
||||
<option value="basic">基础</option>
|
||||
<option value="intermediate">提高</option>
|
||||
<option value="advanced">进阶</option>
|
||||
</select>
|
||||
<label class="form-label">难度级别</label>
|
||||
<div class="difficulty-selector" id="zuoYeDifficulty">
|
||||
<div class="difficulty-btn difficulty-basic active" data-difficulty="basic">
|
||||
<div class="difficulty-icon"><i class="bi bi-star"></i></div>
|
||||
<div class="difficulty-text">基础</div>
|
||||
</div>
|
||||
<div class="difficulty-btn difficulty-intermediate" data-difficulty="intermediate">
|
||||
<div class="difficulty-icon"><i class="bi bi-trophy"></i></div>
|
||||
<div class="difficulty-text">提高</div>
|
||||
</div>
|
||||
<div class="difficulty-btn difficulty-advanced" data-difficulty="advanced">
|
||||
<div class="difficulty-icon"><i class="bi bi-rocket"></i></div>
|
||||
<div class="difficulty-text">进阶</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="zuoYeUserPrompt" class="form-label">用户提示词</label>
|
||||
@@ -317,6 +424,20 @@
|
||||
}
|
||||
|
||||
// 生成资源主函数
|
||||
// 初始化难度选择器交互
|
||||
document.querySelectorAll('.difficulty-selector').forEach(selector => {
|
||||
selector.addEventListener('click', function(e) {
|
||||
const btn = e.target.closest('.difficulty-btn');
|
||||
if (btn) {
|
||||
// 移除同组中其他按钮的active类
|
||||
this.querySelectorAll('.difficulty-btn').forEach(b => b.classList.remove('active'));
|
||||
// 为当前点击的按钮添加active类
|
||||
btn.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 修改获取难度值的方式
|
||||
async function generateResource(resourceType) {
|
||||
// 获取元素
|
||||
const generateButton = document.getElementById(`generate${resourceType.charAt(0).toUpperCase() + resourceType.slice(1)}`);
|
||||
|
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user