diff --git a/dsLightRag/static/Menhu/index.html b/dsLightRag/static/Menhu/index.html index d53163e7..098dad96 100644 --- a/dsLightRag/static/Menhu/index.html +++ b/dsLightRag/static/Menhu/index.html @@ -11,695 +11,8 @@ - - + + @@ -947,89 +260,7 @@

© 2023 东师理想AI教育云平台 版权所有

- - - + + \ No newline at end of file diff --git a/dsLightRag/static/css/style.css b/dsLightRag/static/css/style.css new file mode 100644 index 00000000..8536057b --- /dev/null +++ b/dsLightRag/static/css/style.css @@ -0,0 +1,664 @@ +:root { + --primary-blue: #0066FF; + --secondary-green: #00C389; + --text-dark: #333333; + --text-light: #666666; + --bg-light: #F5F7FA; + --white: #FFFFFF; + --shadow: 0 4px 20px rgba(0, 102, 255, 0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "PingFang SC", "Microsoft YaHei", sans-serif; + color: var(--text-dark); + background-color: var(--white); + line-height: 1.6; +} + +/* 顶部导航 */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 70px; + background-color: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + z-index: 1000; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 40px; +} + +.logo { + display: flex; + align-items: center; + font-size: 24px; + font-weight: bold; + color: var(--primary-blue); +} + +.logo i { + margin-right: 10px; + font-size: 28px; +} + +.nav-menu { + display: flex; + align-items: center; + gap: 30px; +} + +.nav-item { + position: relative; + font-size: 16px; + color: var(--text-dark); + cursor: pointer; + transition: all 0.3s ease; +} + +.nav-item:hover { + color: var(--primary-blue); +} + +.nav-item::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background-color: var(--primary-blue); + transition: width 0.3s ease; +} + +.nav-item:hover::after { + width: 100%; +} + +.header-actions { + display: flex; + align-items: center; + gap: 20px; +} + +.btn { + padding: 8px 20px; + border-radius: 25px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + border: none; + outline: none; +} + +.btn-primary { + background-color: var(--primary-blue); + color: var(--white); +} + +.btn-primary:hover { + background-color: #0052CC; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3); +} + +.btn-outline { + background-color: transparent; + border: 1px solid var(--primary-blue); + color: var(--primary-blue); +} + +.btn-outline:hover { + background-color: var(--primary-blue); + color: var(--white); + transform: translateY(-2px); +} + +/* Hero区域 */ +.hero { + margin-top: 70px; + height: calc(100vh - 70px); + background: linear-gradient(135deg, #f5f7fa 0%, #e9f1fb 100%); + position: relative; + overflow: hidden; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 80px; +} + +.hero-content { + max-width: 500px; + z-index: 10; +} + +.hero-title { + font-size: 48px; + font-weight: bold; + color: var(--primary-blue); + line-height: 1.2; + margin-bottom: 20px; +} + +.hero-subtitle { + font-size: 24px; + color: var(--text-light); + margin-bottom: 40px; +} + +.hero-cta { + display: flex; + gap: 20px; +} + +.hero-image { + position: relative; + width: 50%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.hero-image img { + max-width: 100%; + max-height: 80%; + border-radius: 20px; + box-shadow: var(--shadow); + 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); } + 100% { transform: translateY(0px); } +} + +/* 波浪背景 - 使用CSS替代图片 */ +.wave { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100px; + background: linear-gradient(135deg, rgba(0,102,255,0.1) 0%, rgba(0,195,137,0.1) 100%); + animation: wave-animation 15s linear infinite; + border-radius: 50% 50% 0 0; +} + +@keyframes wave-animation { + 0% { transform: translateX(0); } + 100% { transform: translateX(-1000px); } +} + +/* 核心功能区 */ +.features { + padding: 80px 40px; + background-color: var(--white); +} + +.section-title { + text-align: center; + font-size: 36px; + font-weight: bold; + color: var(--primary-blue); + margin-bottom: 60px; + position: relative; +} + +.section-title::after { + content: ''; + position: absolute; + bottom: -15px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 4px; + background-color: var(--secondary-green); + border-radius: 2px; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 40px; + max-width: 1400px; + margin: 0 auto; +} + +/* 新增特色服务区块样式 */ +.services { + padding: 80px 40px; + background-color: var(--bg-light); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 40px; + max-width: 1400px; + margin: 0 auto; +} + +.service-card { + background-color: var(--white); + border-radius: 15px; + padding: 30px; + box-shadow: var(--shadow); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.service-card:hover { + transform: translateY(-10px); + box-shadow: 0 10px 30px rgba(0, 102, 255, 0.15); +} + +.service-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background-color: var(--primary-blue); +} + +.service-icon { + font-size: 48px; + color: var(--primary-blue); + margin-bottom: 20px; +} + +.service-title { + font-size: 24px; + font-weight: bold; + margin-bottom: 15px; + color: var(--text-dark); +} + +.service-description { + font-size: 16px; + color: var(--text-light); + line-height: 1.6; +} + +.feature-card { + background-color: var(--white); + border-radius: 15px; + padding: 30px; + box-shadow: var(--shadow); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.feature-card:hover { + transform: translateY(-10px); + box-shadow: 0 10px 30px rgba(0, 102, 255, 0.15); +} + +.feature-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background-color: var(--primary-blue); +} + +.feature-icon { + font-size: 48px; + color: var(--primary-blue); + margin-bottom: 20px; +} + +.feature-title { + font-size: 24px; + font-weight: bold; + margin-bottom: 15px; + color: var(--text-dark); +} + +.feature-description { + font-size: 16px; + color: var(--text-light); + line-height: 1.6; +} + +/* 联盟与学科工坊 */ +.alliance { + padding: 80px 40px; + background-color: var(--bg-light); +} + +.alliance-container { + display: flex; + flex-wrap: wrap; + gap: 40px; + max-width: 1400px; + margin: 0 auto; +} + +.alliance-banner { + flex: 1; + min-width: 400px; + background-color: var(--white); + border-radius: 15px; + padding: 40px; + box-shadow: var(--shadow); + display: flex; + flex-direction: column; + justify-content: center; +} + +.workshops { + flex: 1; + min-width: 400px; +} + +.workshop-tabs { + background-color: var(--white); + border-radius: 15px; + overflow: hidden; + box-shadow: var(--shadow); +} + +.tab-header { + display: flex; + background-color: var(--bg-light); +} + +.tab-item { + flex: 1; + padding: 15px 30px; + text-align: center; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; +} + +.tab-item.active { + background-color: var(--primary-blue); + color: var(--white); +} + +.tab-content { + padding: 30px; +} + +/* 数据统计区 */ +.stats { + padding: 80px 40px; + background-color: var(--primary-blue); + color: var(--white); + text-align: center; +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 40px; + max-width: 1400px; + margin: 0 auto; +} + +.stat-item { + display: flex; + flex-direction: column; + align-items: center; +} + +.stat-number { + font-size: 48px; + font-weight: bold; + margin-bottom: 10px; + animation: countUp 2s ease-out forwards; +} + +.stat-label { + font-size: 16px; + opacity: 0.9; +} + +@keyframes countUp { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +/* 页脚 */ +.footer { + background-color: var(--text-dark); + color: var(--white); + padding: 60px 40px 20px; +} + +.footer-container { + display: flex; + flex-wrap: wrap; + gap: 40px; + max-width: 1400px; + margin: 0 auto 40px; +} + +.footer-column { + flex: 1; + min-width: 200px; +} + +.footer-logo { + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; + color: var(--white); +} + +.footer-description { + font-size: 14px; + opacity: 0.8; + margin-bottom: 20px; +} + +.footer-title { + font-size: 18px; + font-weight: bold; + margin-bottom: 20px; + color: var(--white); +} + +.footer-links { + list-style: none; +} + +.footer-links li { + margin-bottom: 10px; +} + +.footer-links a { + color: var(--white); + opacity: 0.8; + text-decoration: none; + transition: opacity 0.3s ease; +} + +.footer-links a:hover { + opacity: 1; +} + +/* 响应式设计 */ +@media (max-width: 1200px) { + .hero { + padding: 0 40px; + } + .hero-title { + font-size: 36px; + } + .hero-subtitle { + font-size: 20px; + } +} + +@media (max-width: 992px) { + .header { + padding: 0 20px; + } + .nav-menu { + display: none; + } + .hero { + flex-direction: column; + text-align: center; + padding: 40px 20px; + } + .hero-content { + max-width: 100%; + margin-bottom: 40px; + } + .hero-image { + width: 100%; + } + .hero-cta { + justify-content: center; + } +} + +@media (max-width: 768px) { + .section-title { + font-size: 28px; + } + .features, + .alliance, + .stats { + padding: 60px 20px; + } + .alliance-container { + flex-direction: column; + } +} + +@media (max-width: 576px) { + .header { + height: 60px; + } + .hero { + margin-top: 60px; + height: auto; + min-height: calc(100vh - 60px); + } + .hero-title { + font-size: 28px; + } + .hero-subtitle { + font-size: 18px; + } + .btn { + padding: 6px 16px; + font-size: 12px; + } + .feature-card { + padding: 20px; + } +} \ No newline at end of file diff --git a/dsLightRag/static/js/main.js b/dsLightRag/static/js/main.js new file mode 100644 index 00000000..d23d9a76 --- /dev/null +++ b/dsLightRag/static/js/main.js @@ -0,0 +1,80 @@ +// 标签页切换 +document.addEventListener('DOMContentLoaded', function() { + const tabItems = document.querySelectorAll('.tab-item'); + + tabItems.forEach(item => { + item.addEventListener('click', function() { + // 移除所有active状态 + tabItems.forEach(tab => tab.classList.remove('active')); + // 为当前点击项添加active状态 + 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(); +}); \ No newline at end of file