Files
jiaowu-test/test-scroll.html
KQL 4e0e96e6b8 UI优化更新:面试模拟、简历面试、项目库、求职策略等多个页面改进
主要更新:
- 面试模拟页:移除上滑查看评价,添加渐进式评分(72→81→89)
- 简历面试页:添加岗位头像、标签背景、面试题加粗等视觉优化
- 项目库页:添加"我完成的项目库"板块,增加hover效果
- 求职策略详情页:优化圆柱体和矩形对齐,添加CSV岗位数据,调整批次文字位置
- 企业岗位列表页:添加返回按钮功能
- 全局:统一岗位级别术语(普通岗/技术骨干岗/储备干部岗)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-05 20:46:03 +08:00

60 lines
1.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 1120px;
background-color: #fff;
padding: 20px 15px;
margin: 20px auto;
border: 1px solid #ddd;
}
.scroll-container {
width: 100%;
height: 300px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
gap: 20px;
border: 2px solid red;
background: #f0f0f0;
}
.item {
flex: 0 0 164px;
width: 164px;
height: 260px;
background: #4096ff;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<h2>测试横向滚动</h2>
<div class="scroll-container" id="scrollContainer">
<!-- 将通过JS动态添加72个元素 -->
</div>
</div>
<script>
const container = document.getElementById('scrollContainer');
for (let i = 1; i <= 72; i++) {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `课程 ${i}`;
container.appendChild(item);
}
console.log('容器宽度:', container.offsetWidth);
console.log('内容宽度:', container.scrollWidth);
console.log('可滚动宽度:', container.scrollWidth - container.offsetWidth);
</script>
</body>
</html>