This commit is contained in:
2025-09-05 07:48:04 +08:00
parent a39850d9f0
commit 3d5b4ddcf1
3 changed files with 143 additions and 22 deletions

View File

@@ -152,6 +152,102 @@
.result-container table { border-collapse: collapse; width: 100%; margin-bottom: 1.2rem; } .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, .result-container table td { padding: 0.75rem; border: 1px solid #dfe2e5; text-align: left; }
.result-container table th { background-color: #f6f8fa; font-weight: 600; } .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> </style>
</head> </head>
<body> <body>
@@ -163,13 +259,6 @@
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </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>
</div> </div>
</nav> </nav>
@@ -207,14 +296,23 @@
<label for="daoXueAnSystemPrompt" class="form-label">系统提示词</label> <label for="daoXueAnSystemPrompt" class="form-label">系统提示词</label>
<textarea class="form-control" id="daoXueAnSystemPrompt" rows="3">你是市级骨干教师,撰写导学案时严格对标"核心素养四维度(物理观念、科学思维、探究能力、态度责任)",并采用"目标—评价—活动"逆向设计模板UbD</textarea> <textarea class="form-control" id="daoXueAnSystemPrompt" rows="3">你是市级骨干教师,撰写导学案时严格对标"核心素养四维度(物理观念、科学思维、探究能力、态度责任)",并采用"目标—评价—活动"逆向设计模板UbD</textarea>
</div> </div>
<!-- 新增难度选择器 --> <!-- 新增难度选择器 - 图标形式 -->
<div class="mb-3"> <div class="mb-3">
<label for="daoXueAnDifficulty" class="form-label">难度级别</label> <label class="form-label">难度级别</label>
<select class="form-select" id="daoXueAnDifficulty"> <div class="difficulty-selector" id="daoXueAnDifficulty">
<option value="basic">基础</option> <div class="difficulty-btn difficulty-basic active" data-difficulty="basic">
<option value="intermediate">提高</option> <div class="difficulty-icon"><i class="bi bi-star"></i></div>
<option value="advanced">进阶</option> <div class="difficulty-text">基础</div>
</select> </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>
<div class="mb-3"> <div class="mb-3">
<label for="daoXueAnUserPrompt" class="form-label">用户提示词</label> <label for="daoXueAnUserPrompt" class="form-label">用户提示词</label>
@@ -276,14 +374,23 @@
<label for="zuoYeSystemPrompt" class="form-label">系统提示词</label> <label for="zuoYeSystemPrompt" class="form-label">系统提示词</label>
<textarea class="form-control" id="zuoYeSystemPrompt" rows="3">你是命题专家,熟悉布鲁姆认知分类和'双减'政策题量控制为20分钟完成。</textarea> <textarea class="form-control" id="zuoYeSystemPrompt" rows="3">你是命题专家,熟悉布鲁姆认知分类和'双减'政策题量控制为20分钟完成。</textarea>
</div> </div>
<!-- 新增难度选择器 --> <!-- 新增难度选择器 - 图标形式 -->
<div class="mb-3"> <div class="mb-3">
<label for="zuoYeDifficulty" class="form-label">难度级别</label> <label class="form-label">难度级别</label>
<select class="form-select" id="zuoYeDifficulty"> <div class="difficulty-selector" id="zuoYeDifficulty">
<option value="basic">基础</option> <div class="difficulty-btn difficulty-basic active" data-difficulty="basic">
<option value="intermediate">提高</option> <div class="difficulty-icon"><i class="bi bi-star"></i></div>
<option value="advanced">进阶</option> <div class="difficulty-text">基础</div>
</select> </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>
<div class="mb-3"> <div class="mb-3">
<label for="zuoYeUserPrompt" class="form-label">用户提示词</label> <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) { async function generateResource(resourceType) {
// 获取元素 // 获取元素
const generateButton = document.getElementById(`generate${resourceType.charAt(0).toUpperCase() + resourceType.slice(1)}`); const generateButton = document.getElementById(`generate${resourceType.charAt(0).toUpperCase() + resourceType.slice(1)}`);