huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-09-03 08:18:55 +08:00
parent 75b7c34fc7
commit 21769e2ecf
1 changed files with 222 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
dsLightRag/static/Menhu/index.html
View File

@@ -193,6 +193,97 @@
animation: float 6s ease-in-out infinite;
}
/* 轮播图样式 */
.carousel-container {
position: relative;
width: 100%;
height: 100%;
}
.carousel {
width: 100%;
height: 100%;
position: relative;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 80px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.carousel-item.active {
opacity: 1;
z-index: 10;
}
/* 轮播控制按钮 */
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 20;
color: var(--primary-blue);
font-size: 24px;
}
.carousel-control:hover {
background-color: var(--white);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-50%) scale(1.1);
}
.carousel-control.prev {
left: 20px;
}
.carousel-control.next {
right: 20px;
}
/* 轮播指示点 */
.carousel-indicators {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 20;
}
.carousel-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-indicator.active {
background-color: var(--white);
width: 30px;
border-radius: 6px;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
@@ -574,6 +665,10 @@
<!-- Hero区域 -->
<section class="hero">
<div class="carousel-container">
<div class="carousel">
<!-- 轮播项1 -->
<div class="carousel-item active">
<div class="hero-content">
<h1 class="hero-title">让AI成为教育新基建</h1>
<p class="hero-subtitle">资源共建 · 名师云课 · AI学伴 · 精准学情</p>
@@ -584,9 +679,56 @@
</div>
</div>
<div class="hero-image">
<!-- 将无法访问的Imgur图片替换为picsum.photos的占位图 -->
<img src="https://picsum.photos/id/20/800/600" alt="东师理想AI教育云平台">
</div>
</div>
<!-- 轮播项2 -->
<div class="carousel-item">
<div class="hero-content">
<h1 class="hero-title">AI资源工坊</h1>
<p class="hero-subtitle">一键生成教案、课件、习题，支持共建共享</p>
<div class="hero-cta">
<button class="btn btn-primary">探索工坊</button>
<button class="btn btn-outline">资源库</button>
</div>
</div>
<div class="hero-image">
<img src="https://picsum.photos/id/180/800/600" alt="AI资源工坊">
</div>
</div>
<!-- 轮播项3 -->
<div class="carousel-item">
<div class="hero-content">
<h1 class="hero-title">精准学情分析</h1>
<p class="hero-subtitle">AI驱动的学情跟踪与分析，助力个性化教学</p>
<div class="hero-cta">
<button class="btn btn-primary">查看演示</button>
<button class="btn btn-outline">了解更多</button>
</div>
</div>
<div class="hero-image">
<img src="https://picsum.photos/id/160/800/600" alt="精准学情分析">
</div>
</div>
</div>
<!-- 轮播控制按钮 -->
<div class="carousel-control prev">
<i class="fas fa-chevron-left"></i>
</div>
<div class="carousel-control next">
<i class="fas fa-chevron-right"></i>
</div>
<!-- 轮播指示点 -->
<div class="carousel-indicators">
<div class="carousel-indicator active"></div>
<div class="carousel-indicator"></div>
<div class="carousel-indicator"></div>
</div>
</div>
<div class="wave"></div>
</section>
@@ -726,6 +868,73 @@
this.classList.add('active');
});
});
// 轮播图功能
const carouselItems = document.querySelectorAll('.carousel-item');
const carouselIndicators = document.querySelectorAll('.carousel-indicator');
const prevBtn = document.querySelector('.carousel-control.prev');
const nextBtn = document.querySelector('.carousel-control.next');
let currentIndex = 0;
let interval;
// 初始化轮播
function initCarousel() {
// 启动自动轮播
startCarousel();
// 绑定控制按钮事件
prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);
// 绑定指示点事件
carouselIndicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => {
goToSlide(index);
});
});
// 鼠标悬停时暂停轮播
const carousel = document.querySelector('.carousel');
carousel.addEventListener('mouseenter', pauseCarousel);
carousel.addEventListener('mouseleave', startCarousel);
}
// 显示指定幻灯片
function goToSlide(index) {
// 移除当前激活状态
carouselItems[currentIndex].classList.remove('active');
carouselIndicators[currentIndex].classList.remove('active');
// 更新索引
currentIndex = (index + carouselItems.length) % carouselItems.length;
// 添加新激活状态
carouselItems[currentIndex].classList.add('active');
carouselIndicators[currentIndex].classList.add('active');
}
// 下一张幻灯片
function nextSlide() {
goToSlide(currentIndex + 1);
}
// 上一张幻灯片
function prevSlide() {
goToSlide(currentIndex - 1);
}
// 暂停轮播
function pauseCarousel() {
clearInterval(interval);
}
// 开始轮播
function startCarousel() {
interval = setInterval(nextSlide, 5000);
}
// 初始化轮播
initCarousel();
});
</script>
</body>