科享汇测 - 共享实验室平�?/title> <link rel="stylesheet" href="css/style.css"> <style> /* 科享汇测网页�?- 配色规范 */ :root { --primary-color: #0A4B78; /* 深海蓝（与小程序一致） */ --primary-dark: #073858; /* 深蓝 */ --primary-light: #0B5B88; /* 浅蓝 */ --secondary-color: #F5B041; /* 琥珀�?*/ --secondary-dark: #E09F30; /* 深金 */ --secondary-light: #F7C360; /* 浅金 */ --text-dark: #333333; --text-gray: #666666; --text-light: #999999; --bg-light: #F5F7FA; --border-color: #E8E8E8; --white: #FFFFFF; } /* 楷体标题 */ .section-title { font-family: 'KaiTi', 'STKaiti', '楷体', serif; } /* 通用容器 */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ========== 顶部导航�?========== */ .header { background: var(--primary-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(10, 61, 98, 0.2); } .header-container { display: flex; align-items: center; justify-content: space-between; height: 70px; } .logo { display: flex; align-items: center; gap: 12px; } .logo img { width: 45px; height: 45px; border-radius: 10px; } .logo-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo-text { font-size: 2rem; font-weight: bold; color: #F5B041; font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 4px; text-shadow: 0 0 10px rgba(245, 176, 65, 0.6), 0 0 20px rgba(245, 176, 65, 0.4), 0 2px 4px rgba(10, 61, 98, 0.8); -webkit-text-stroke: 1px #0A4B78; line-height: 1.2; } .logo-subtitle { font-size: 0.85rem; color: var(--white); font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 2px; opacity: 0.9; margin-top: 2px; background: linear-gradient(90deg, #0A4B78, #F5B041, #0A4B78); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav { display: flex; gap: 35px; } .nav-item { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 1rem; font-family: 'KaiTi', '楷体', serif; transition: color 0.3s; padding: 8px 0; position: relative; } .nav-item:hover, .nav-item.active { color: var(--secondary-color); } .nav-item.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--secondary-color); border-radius: 2px; } .header-right { display: flex; align-items: center; gap: 15px; } .search-box { display: flex; align-items: center; background: rgba(255, 255, 255, 0.1); border-radius: 25px; padding: 8px 20px; width: 280px; } .search-box input { flex: 1; background: transparent; border: none; color: var(--white); font-size: 0.9rem; outline: none; } .search-box input::placeholder { color: rgba(255, 255, 255, 0.6); } .search-box button { background: transparent; border: none; color: var(--white); cursor: pointer; font-size: 1.1rem; } .header-icons { display: flex; gap: 12px; } .header-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; color: var(--white); font-size: 1.1rem; } .header-icon:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); } .login-btn { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light)); color: var(--white); border: none; padding: 10px 25px; border-radius: 25px; font-size: 0.95rem; cursor: pointer; transition: all 0.3s; font-weight: 500; } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(245, 176, 65, 0.4); } /* ========== 主视觉Banner�?========== */ .banner-section { position: relative; height: 500px; overflow: hidden; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--primary-color) 100%); } .banner-wrapper { position: relative; height: 100%; } .banner-slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; display: flex; align-items: center; justify-content: center; } .banner-slide.active { opacity: 1; } .banner-bg { position: absolute; width: 100%; height: 100%; background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Ccircle cx="85" cy="15" r="40" fill="rgba(255,255,255,0.03)"/%3E%3Ccircle cx="15" cy="85" r="50" fill="rgba(255,255,255,0.02)"/%3E%3Ccircle cx="50" cy="50" r="30" fill="rgba(245,176,65,0.05)"/%3E%3C/svg%3E'); background-size: cover; } .banner-content { position: relative; z-index: 1; text-align: center; color: var(--white); } .banner-icon { font-size: 5rem; margin-bottom: 20px; display: block; } .banner-title { font-size: 3rem; font-weight: bold; font-family: 'KaiTi', '楷体', serif; margin-bottom: 15px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); } .banner-subtitle { font-size: 1.3rem; opacity: 0.9; margin-bottom: 30px; } .banner-btn { display: inline-block; background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light)); color: var(--white); padding: 15px 40px; border-radius: 30px; font-size: 1.1rem; text-decoration: none; font-weight: bold; transition: all 0.3s; box-shadow: 0 5px 20px rgba(245, 176, 65, 0.3); } .banner-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(245, 176, 65, 0.5); } .banner-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; } .banner-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: all 0.3s; } .banner-dot.active { background: var(--secondary-color); transform: scale(1.3); } /* ========== 功能入口 ========== */ .function-section { background: var(--white); padding: 50px 0; margin-top: -60px; position: relative; z-index: 10; border-radius: 20px 20px 0 0; } .function-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .function-item { text-align: center; text-decoration: none; color: var(--text-dark); transition: transform 0.3s; padding: 20px; border-radius: 15px; } .function-item:hover { transform: translateY(-8px); background: var(--bg-light); } .function-icon { width: 90px; height: 90px; border-radius: 22px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 3rem; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .function-item span { font-size: 1.1rem; font-weight: 600; display: block; } /* ========== 快捷入口 ========== */ .quick-entry-section { background: var(--white); padding: 30px 0; margin-bottom: 30px; } .quick-entry-grid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .quick-entry-item { display: flex; align-items: center; gap: 10px; padding: 15px 25px; background: var(--bg-light); border-radius: 10px; text-decoration: none; color: var(--primary-color); font-size: 0.95rem; font-weight: 500; transition: all 0.3s; border: 2px solid transparent; } .quick-entry-item:hover, .quick-entry-item.active { border-color: var(--secondary-color); background: rgba(245, 176, 65, 0.1); color: var(--secondary-color); } .quick-icon { font-size: 1.5rem; } /* ========== 内容区域 ========== */ .content-section { padding: 60px 0; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 35px; padding-bottom: 15px; border-bottom: 2px solid var(--border-color); } .section-title { font-size: 1.8rem; color: var(--primary-color); position: relative; padding-left: 20px; } .section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 28px; background: var(--secondary-color); border-radius: 3px; } .more-link { color: var(--secondary-color); text-decoration: none; font-size: 0.95rem; transition: color 0.3s; display: flex; align-items: center; gap: 5px; } .more-link:hover { color: var(--secondary-dark); } /* ========== 卡片样式 ========== */ .equipment-grid, .lab-grid, .training-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; } .equipment-card, .lab-card, .training-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); transition: all 0.3s; cursor: pointer; } .equipment-card:hover, .lab-card:hover, .training-card:hover { transform: translateY(-8px); box-shadow: 0 12px 35px rgba(10, 61, 98, 0.15); } .equipment-image, .lab-image, .training-image { height: 180px; overflow: hidden; background: var(--bg-light); position: relative; } .equipment-image img, .lab-image img, .training-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .equipment-card:hover .equipment-image img { transform: scale(1.1); } .image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--white); } .equipment-info, .lab-info, .training-info { padding: 18px; } .equipment-name, .lab-name, .training-title { font-size: 1.1rem; color: var(--primary-color); margin-bottom: 8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .equipment-model, .lab-institution, .training-meta { font-size: 0.85rem; color: var(--text-gray); margin-bottom: 10px; } .equipment-meta, .training-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border-color); } .equipment-price { color: var(--secondary-color); font-size: 1.2rem; font-weight: bold; } .equipment-price span { font-size: 0.85rem; font-weight: normal; } .equipment-rating { color: var(--text-light); font-size: 0.9rem; } /* ========== 招聘列表 ========== */ .job-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .job-card { background: var(--white); border-radius: 12px; padding: 25px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); transition: all 0.3s; cursor: pointer; } .job-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(10, 61, 98, 0.12); } .job-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .job-title { font-size: 1.1rem; color: var(--primary-color); font-weight: 600; } .job-salary { color: var(--secondary-color); font-weight: bold; font-size: 1.1rem; } .job-company { font-size: 0.9rem; color: var(--text-gray); margin-bottom: 8px; } .job-tags { display: flex; gap: 10px; flex-wrap: wrap; } .job-tag { padding: 4px 12px; background: var(--bg-light); color: var(--primary-color); border-radius: 20px; font-size: 0.8rem; } /* ========== 微信支付说明�?========== */ .payment-section { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--white); padding: 80px 0; margin: 60px 0; } .payment-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .payment-info h2 { font-size: 2.2rem; font-family: 'KaiTi', '楷体', serif; margin-bottom: 20px; color: var(--white); } .payment-info p { font-size: 1.1rem; line-height: 1.8; opacity: 0.95; margin-bottom: 30px; } .payment-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .payment-step { display: flex; align-items: flex-start; gap: 15px; background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 12px; } .step-num { width: 40px; height: 40px; background: var(--secondary-color); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; } .step-text { font-size: 1rem; line-height: 1.5; } .payment-qr { text-align: center; background: rgba(255, 255, 255, 0.1); padding: 40px; border-radius: 20px; } .qr-box { width: 180px; height: 180px; background: var(--white); margin: 0 auto 20px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 5rem; } .qr-text { font-size: 1rem; opacity: 0.9; } /* ========== 关于我们 ========== */ .about-section { background: var(--white); padding: 80px 0; } .about-content { text-align: center; } .about-content .section-title { color: var(--primary-color); margin-bottom: 25px; } .about-desc { font-size: 1.1rem; line-height: 1.9; max-width: 900px; margin: 0 auto 50px; color: var(--text-gray); } .about-stats { display: flex; justify-content: center; gap: 80px; } .stat-item { text-align: center; } .stat-num { font-size: 3.5rem; font-weight: bold; color: var(--secondary-color); margin-bottom: 10px; } .stat-label { font-size: 1.1rem; color: var(--text-gray); } /* ========== 底部 ========== */ .footer { background: var(--primary-color); color: var(--white); padding: 60px 0 30px; } .footer-line { height: 6px; background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--primary-color) 100%); margin-bottom: 50px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 40px; } .footer-brand h3 { font-size: 1.5rem; font-family: 'KaiTi', '楷体', serif; margin-bottom: 15px; } .footer-brand p { font-size: 0.95rem; opacity: 0.85; line-height: 1.7; } .footer-column h4 { font-size: 1.1rem; margin-bottom: 20px; color: var(--secondary-color); } .footer-column ul { list-style: none; padding: 0; } .footer-column li { margin-bottom: 12px; } .footer-column a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 0.9rem; transition: color 0.3s; } .footer-column a:hover { color: var(--secondary-color); } .footer-contact p { font-size: 0.9rem; margin-bottom: 10px; opacity: 0.85; } .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-bottom p { font-size: 0.85rem; opacity: 0.6; margin-bottom: 8px; } /* ========== 登录弹窗 ========== */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 2000; justify-content: center; align-items: center; } .modal-content { background: var(--white); border-radius: 20px; padding: 40px; width: 90%; max-width: 450px; position: relative; } .modal-close { position: absolute; top: 15px; right: 20px; font-size: 2rem; cursor: pointer; color: var(--text-light); } .modal-content h3 { font-size: 1.6rem; color: var(--primary-color); margin-bottom: 30px; text-align: center; font-family: 'KaiTi', '楷体', serif; } .login-methods { display: flex; flex-direction: column; gap: 15px; } .wechat-login { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px; background: linear-gradient(135deg, #07C160, #1AAD19); color: var(--white); border: none; border-radius: 30px; font-size: 1.1rem; cursor: pointer; transition: all 0.3s; } .wechat-login:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(7, 193, 96, 0.4); } .agreement-text { font-size: 0.85rem; color: var(--text-light); text-align: center; margin-top: 25px; } .agreement-text a { color: var(--primary-color); text-decoration: none; } .agreement-text a:hover { color: var(--secondary-color); } /* ========== 响应�?========== */ @media (max-width: 1024px) { .function-grid { grid-template-columns: repeat(2, 1fr); } .equipment-grid, .lab-grid, .training-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .header-container { flex-wrap: wrap; height: auto; padding: 15px 20px; } .nav { order: 3; width: 100%; justify-content: center; gap: 20px; margin-top: 15px; } .search-box { width: 200px; } .banner-section { height: 400px; } .banner-title { font-size: 2rem; } .function-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .equipment-grid, .lab-grid, .training-grid { grid-template-columns: repeat(2, 1fr); } .payment-content { grid-template-columns: 1fr; } .about-stats { flex-wrap: wrap; gap: 40px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 480px) { .function-grid, .equipment-grid, .lab-grid, .training-grid { grid-template-columns: 1fr; } .job-list { grid-template-columns: 1fr; } .quick-entry-grid { flex-direction: column; } } </style> </head> <body>  <header class="header"> <div class="container header-container"> <div class="logo"> <img src="images/logo.png" alt="科享汇测" onerror="this.style.display='none'"> <div class="logo-wrapper"> <span class="logo-text">科享汇测</span> <span class="logo-subtitle">共享实验室服�?/span> </div> </div> <nav class="nav"> <a href="#home" class="nav-item active">首页</a> <a href="#equipment" class="nav-item">仪器预约</a> <a href="#laboratory" class="nav-item">实验�?/a> <a href="#training" class="nav-item">技术培�?/a> <a href="#recruitment" class="nav-item">招聘求职</a> <a href="#about" class="nav-item">关于我们</a> </nav> <div class="header-right"> <div class="search-box"> <input type="text" placeholder="搜索仪器/实验�?培训"> <button>🔍</button> </div> <div class="header-icons"> <div class="header-icon" onclick="shareSite()" title="分享">📤</div> <div class="header-icon" onclick="showSettings()" title="设置">⚙️</div> <div class="header-icon" onclick="goToUserCenter()" title="用户中心">👤</div> </div> <button class="login-btn" onclick="showLoginModal()">登录/注册</button> </div> </div> </header>  <section class="banner-section" id="home"> <div class="banner-wrapper" id="bannerWrapper">  </div> <div class="banner-dots" id="bannerDots"></div> </section>  <section class="function-section"> <div class="container"> <div class="function-grid"> <a href="laboratory.html" class="function-item"> <div class="function-icon" style="background: linear-gradient(135deg, #0A4B78, #0E4D7A);">🏢</div> <span>对拓管理</span> </a> <a href="lab-appointment.html" class="function-item"> <div class="function-icon" style="background: linear-gradient(135deg, #0066CC, #0077DD);">🧪</div> <span>预构实验</span> </a> <a href="equipment.html" class="function-item"> <div class="function-icon" style="background: linear-gradient(135deg, #8E44AD, #9B59B6);">🔬</div> <span>设计预约</span> </a> <a href="recruitment.html" class="function-item"> <div class="function-icon" style="background: linear-gradient(135deg, #F5B041, #F7C360);">💼</div> <span>投送报�?/span> </a> </div> </div> </section>  <section class="quick-entry-section"> <div class="container"> <div class="quick-entry-grid"> <a href="equipment-join.html" class="quick-entry-item"> <span class="quick-icon">🏭</span> <span>仪器厂家入驻</span> </a> <a href="consumables.html" class="quick-entry-item"> <span class="quick-icon">🧪</span> <span>试剂耗材</span> </a> <a href="training.html" class="quick-entry-item"> <span class="quick-icon">📚</span> <span>技术培�?/span> </a> <a href="recruitment.html" class="quick-entry-item"> <span class="quick-icon">💼</span> <span>招聘求职</span> </a> </div> </div> </section>  <section class="content-section equipment-section" id="equipment"> <div class="container"> <div class="section-header"> <h2 class="section-title">热门仪器</h2> <a href="equipment.html" class="more-link">查看更多 �?/a> </div> <div class="equipment-grid" id="equipmentList"> <div class="loading">正在加载...</div> </div> </div> </section>  <section class="content-section" style="background: #f8f9fa;" id="laboratory"> <div class="container"> <div class="section-header"> <h2 class="section-title">热门实验�?/h2> <a href="laboratory.html" class="more-link">查看更多 �?/a> </div> <div class="lab-grid" id="labList"> <div class="loading">正在加载...</div> </div> </div> </section>  <section class="content-section" id="training"> <div class="container"> <div class="section-header"> <h2 class="section-title">技术培�?/h2> <a href="training.html" class="more-link">查看更多 �?/a> </div> <div class="training-grid" id="trainingList"> <div class="loading">正在加载...</div> </div> </div> </section>  <section class="content-section" style="background: #f8f9fa;" id="recruitment"> <div class="container"> <div class="section-header"> <h2 class="section-title">招聘求职</h2> <a href="recruitment.html" class="more-link">查看更多 �?/a> </div> <div class="job-list" id="jobList"> <div class="loading">正在加载...</div> </div> </div> </section>  <section class="payment-section"> <div class="container"> <div class="payment-content"> <div class="payment-info"> <h2>💳 微信支付说明</h2> <p>科享汇测平台支持微信支付全流程服务，为您提供便捷、安全的支付体验�?/p> <div class="payment-steps"> <div class="payment-step"> <span class="step-num">1</span> <span class="step-text">选择您需要预约的仪器或实验室</span> </div> <div class="payment-step"> <span class="step-num">2</span> <span class="step-text">填写预约信息并提交订�?/span> </div> <div class="payment-step"> <span class="step-num">3</span> <span class="step-text">选择<span style="color: #F5B041;">微信支付</span>完成付款</span> </div> <div class="payment-step"> <span class="step-num">4</span> <span class="step-text">支付成功即可使用预约服务</span> </div> </div> </div> <div class="payment-qr"> <div class="qr-box">💳</div> <p class="qr-text">扫码关注公众�?br>了解更多支付功能</p> </div> </div> </div> </section>  <section class="about-section" id="about"> <div class="container"> <div class="about-content"> <h2 class="section-title">关于科享汇测</h2> <p class="about-desc">科享汇测是一个共享实验室平台，为全国高校和科研机构提供仪器预约、实验室共享、培训会议、招聘求职等一体化服务。我们的目标是整合科研资源，提高仪器设备利用率，促进科研合作与交流�?/p> <div class="about-stats"> <div class="stat-item"> <div class="stat-num">500+</div> <div class="stat-label">入驻仪器</div> </div> <div class="stat-item"> <div class="stat-num">100+</div> <div class="stat-label">合作机构</div> </div> <div class="stat-item"> <div class="stat-num">10000+</div> <div class="stat-label">服务用户</div> </div> </div> </div> </div> </section>  <footer class="footer"> <div class="footer-line"></div> <div class="container"> <div class="footer-grid"> <div class="footer-brand"> <h3>科享汇测</h3> <p>共享实验室平台，为科研工作者提供便捷、高效的仪器预约与实验室共享服务�?/p> </div> <div class="footer-column"> <h4>快速链�?/h4> <ul> <li><a href="equipment.html">仪器预约</a></li> <li><a href="laboratory.html">实验室预�?/a></li> <li><a href="training.html">技术培�?/a></li> <li><a href="recruitment.html">招聘求职</a></li> </ul> </div> <div class="footer-column"> <h4>帮助支持</h4> <ul> <li><a href="about.html">关于我们</a></li> <li><a href="help.html">帮助中心</a></li> <li><a href="agreement.html">用户协议</a></li> <li><a href="privacy.html">隐私政策</a></li> </ul> </div> <div class="footer-column footer-contact"> <h4>联系我们</h4> <p>📞 400-XXX-XXXX</p> <p>✉️ service@kexianghuice.com</p> <p>📍 四川省成都市高新�?/p> </div> </div> <div class="footer-bottom"> <p>备案号：蜀ICP�?024XXXXXX�?/p> <p>© 2024 科享汇测版权所�?/p> </div> </div> </footer>  <div class="modal" id="loginModal"> <div class="modal-content"> <span class="modal-close" onclick="closeLoginModal()">×</span> <h3>登录科享汇测</h3> <div class="login-methods"> <button class="wechat-login" onclick="wechatLogin()"> 微信登录 </button> </div> <p class="agreement-text"> 登录即表示同�? <a href="agreement.html">《用户协议�?/a> �? <a href="privacy.html">《隐私政策�?/a> </p> </div> </div>  <script src="js/cloud-config.js"></script> <script src="js/cloud-service.js"></script> <script> // 全局变量 let currentBannerIndex = 0; let bannerInterval = null; // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', async function() { console.log('[Index] 页面加载完成，开始初始化...'); // 初始化云开�? if (typeof CloudService !== 'undefined') { await CloudService.init(); } // 初始化轮播图 initBanners(); // 加载首页数据 await loadHomeData(); // 初始化轮播自动播�? initBannerAutoPlay(); }); // 初始化轮播图 function initBanners() { const banners = [ { icon: '🔬', title: '科享汇测共享实验�?, subtitle: '整合科研资源，助力创新发�? }, { icon: '⚗️', title: '仪器设备预约', subtitle: '高速离心机、光谱仪、电子显微镜' }, { icon: '🧪', title: '试剂耗材采购', subtitle: '一站式科研试剂与耗材供应' }, { icon: '📚', title: '技术培训课�?, subtitle: '专业仪器操作培训与认�? }, { icon: '💼', title: '招聘求职服务', subtitle: '科研人才与岗位精准对�? } ]; const wrapper = document.getElementById('bannerWrapper'); const dots = document.getElementById('bannerDots'); let slidesHTML = ''; let dotsHTML = ''; banners.forEach((banner, index) => { const active = index === 0 ? 'active' : ''; slidesHTML += ` <div class="banner-slide ${active}"> <div class="banner-bg"></div> <div class="banner-content"> <span class="banner-icon">${banner.icon}</span> <h2 class="banner-title">${banner.title}</h2> <p class="banner-subtitle">${banner.subtitle}</p> <a href="javascript:void(0);" class="banner-btn">立即预约</a> </div> </div> `; dotsHTML += `<span class="banner-dot ${active}" data-index="${index}"></span>`; }); wrapper.innerHTML = slidesHTML; dots.innerHTML = dotsHTML; // 绑定点击事件 dots.querySelectorAll('.banner-dot').forEach(dot => { dot.addEventListener('click', function() { goToBanner(parseInt(this.dataset.index)); }); }); } // 自动轮播 function initBannerAutoPlay() { bannerInterval = setInterval(() => { const slides = document.querySelectorAll('.banner-slide'); const dots = document.querySelectorAll('.banner-dot'); if (slides.length <= 1) return; slides[currentBannerIndex].classList.remove('active'); dots[currentBannerIndex].classList.remove('active'); currentBannerIndex = (currentBannerIndex + 1) % slides.length; slides[currentBannerIndex].classList.add('active'); dots[currentBannerIndex].classList.add('active'); }, 5000); } // 切换轮播�? function goToBanner(index) { const slides = document.querySelectorAll('.banner-slide'); const dots = document.querySelectorAll('.banner-dot'); if (slides.length <= 1) return; slides[currentBannerIndex].classList.remove('active'); dots[currentBannerIndex].classList.remove('active'); currentBannerIndex = index; slides[currentBannerIndex].classList.add('active'); dots[currentBannerIndex].classList.add('active'); // 重置自动轮播 clearInterval(bannerInterval); initBannerAutoPlay(); } // 加载首页数据 async function loadHomeData() { console.log('[Index] 开始加载首页数�?..'); // 默认数据 const defaultData = { equipment: [ { _id: '1', name: '光学显微�?, model: 'Olympus CX23', labName: '国家蛋白质科学中�?, price: 50, rating: 4.8 }, { _id: '2', name: '高速冷冻离心机', model: 'Beckman Coulter', labName: '北京大学化学�?, price: 80, rating: 4.9 }, { _id: '3', name: '核磁共振波谱�?, model: 'Bruker 400MHz', labName: '清华大学化学�?, price: 200, rating: 5.0 }, { _id: '4', name: '扫描电子显微�?, model: 'FEI Quanta', labName: '复旦大学材料�?, price: 150, rating: 4.9 } ], labs: [ { _id: '1', name: '国家蛋白质科学中�?, institution: '中国科学�?, address: '北京市海淀�?, tags: ['蛋白质研�?, '结构生物�?] }, { _id: '2', name: '分子化学实验平台', institution: '北京大学', address: '北京市海淀�?, tags: ['有机合成', '材料化学'] }, { _id: '3', name: '材料微观结构分析平台', institution: '清华大学', address: '北京市海淀�?, tags: ['电子显微�?, '材料表征'] }, { _id: '4', name: '生命科学公共仪器平台', institution: '复旦大学', address: '上海市杨浦区', tags: ['分子生物�?, '细胞生物�?] } ], training: [ { _id: '1', title: '显微成像技术培训班', date: '2024-03-15', location: '北京', fee: 2800, enrolled: 18, seats: 30 }, { _id: '2', title: '质谱分析技术研修班', date: '2024-03-20', location: '上海', fee: 3200, enrolled: 20, seats: 25 }, { _id: '3', title: '冷冻电镜技术培训班', date: '2024-04-10', location: '北京', fee: 5800, enrolled: 8, seats: 15 }, { _id: '4', title: 'X射线晶体学培训班', date: '2024-04-20', location: '上海', fee: 4500, enrolled: 12, seats: 20 } ], jobs: [ { _id: '1', title: '实验室管理员', salary: '8K-12K', location: '北京', type: '全职', company: '中国科学院生物物理研究所' }, { _id: '2', title: '仪器工程�?, salary: '10K-15K', location: '上海', type: '全职', company: '上海生命科学研究�? }, { _id: '3', title: '培训专员', salary: '7K-10K', location: '北京', type: '全职', company: '科享汇测科技有限公司' }, { _id: '4', title: '技术支持工程师', salary: '12K-18K', location: '上海', type: '全职', company: '中国科学院上海药物研究所' } ] }; try { if (typeof CloudService !== 'undefined') { const [equipment, labs, training, jobs] = await Promise.all([ CloudService.getEquipmentList({ page: 1, pageSize: 4 }), CloudService.getLabList({ page: 1, pageSize: 4 }), CloudService.getTrainingList({ page: 1, pageSize: 4 }), CloudService.getRecruitmentList({ page: 1, pageSize: 4 }) ]); renderEquipment(equipment.length > 0 ? equipment : defaultData.equipment); renderLabs(labs.length > 0 ? labs : defaultData.labs); renderTraining(training.length > 0 ? training : defaultData.training); renderJobs(jobs.length > 0 ? jobs : defaultData.jobs); } else { renderEquipment(defaultData.equipment); renderLabs(defaultData.labs); renderTraining(defaultData.training); renderJobs(defaultData.jobs); } } catch (error) { console.error('[Index] 加载数据失败:', error); renderEquipment(defaultData.equipment); renderLabs(defaultData.labs); renderTraining(defaultData.training); renderJobs(defaultData.jobs); } } // 渲染仪器列表 function renderEquipment(list) { const container = document.getElementById('equipmentList'); container.innerHTML = list.map(item => ` <div class="equipment-card" onclick="goToPage('equipment-detail.html?id=${item._id}')"> <div class="equipment-image"> <div class="image-placeholder">🔬</div> </div> <div class="equipment-info"> <div class="equipment-name">${item.name}</div> <div class="equipment-model">${item.model || item.brand || ''}</div> <div class="equipment-meta"> <div class="equipment-price">¥${item.price}<span>/小时</span></div> <div class="equipment-rating">�?${item.rating || 0}</div> </div> </div> </div> `).join(''); } // 渲染实验室列�? function renderLabs(list) { const container = document.getElementById('labList'); container.innerHTML = list.map(item => ` <div class="lab-card" onclick="goToPage('lab-detail.html?id=${item._id}')"> <div class="lab-image"> <div class="image-placeholder">🏢</div> </div> <div class="lab-info"> <div class="lab-name">${item.name}</div> <div class="lab-institution">${item.institution}</div> <div class="lab-tags"> ${(item.tags || []).slice(0, 2).map(tag => `<span class="job-tag">${tag}</span>`).join('')} </div> </div> </div> `).join(''); } // 渲染培训列表 function renderTraining(list) { const container = document.getElementById('trainingList'); container.innerHTML = list.map(item => ` <div class="training-card" onclick="goToPage('training-detail.html?id=${item._id}')"> <div class="training-image"> <div class="image-placeholder">📚</div> </div> <div class="training-info"> <div class="training-title">${item.title}</div> <div class="training-meta">📅 ${item.date} | 📍 ${item.location}</div> <div class="training-footer"> <div class="equipment-price">¥${item.fee}</div> <div class="equipment-rating">${item.enrolled}/${item.seats}�?/div> </div> </div> </div> `).join(''); } // 渲染招聘列表 function renderJobs(list) { const container = document.getElementById('jobList'); container.innerHTML = list.map(item => ` <div class="job-card" onclick="goToPage('job-detail.html?id=${item._id}')"> <div class="job-header"> <div class="job-title">${item.title}</div> <div class="job-salary">${item.salary}</div> </div> <div class="job-company">🏢 ${item.company}</div> <div class="job-tags"> <span class="job-tag">${item.location}</span> <span class="job-tag">${item.type}</span> </div> </div> `).join(''); } // 页面跳转 function goToPage(url) { window.location.href = url; } // 登录弹窗 function showLoginModal() { document.getElementById('loginModal').style.display = 'flex'; } function closeLoginModal() { document.getElementById('loginModal').style.display = 'none'; } function wechatLogin() { alert('微信网页登录功能开发中，请使用小程序登�?); closeLoginModal(); } // 点击弹窗外部关闭 document.getElementById('loginModal').addEventListener('click', function(e) { if (e.target === this) { closeLoginModal(); } }); // 分享功能 function shareSite() { const url = window.location.href; if (navigator.share) { navigator.share({ title: '科享汇测 - 共享实验室平�?, text: '为全国高校和科研机构提供仪器预约、实验室共享等服�?, url: url }); } else { wx.copyToClipboard ? wx.copyToClipboard(url) : prompt('复制链接:', url); alert('链接已复制，请分享给朋友'); } } // 设置弹窗 function showSettings() { const items = ['隐私协议', '关于我们', '帮助中心']; const action = prompt('请选择：\n1. 隐私协议\n2. 关于我们\n3. 帮助中心\n\n输入数字选择�?); if (action === '1') goToPage('privacy.html'); else if (action === '2') goToPage('about.html'); else if (action === '3') goToPage('help.html'); } // 用户中心 function goToUserCenter() { const userInfo = localStorage.getItem('userInfo'); if (userInfo) { goToPage('user-center.html'); } else { showLoginModal(); } } // 平滑滚动 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); }); // 导航高亮 window.addEventListener('scroll', function() { const sections = document.querySelectorAll('section[id]'); const navItems = document.querySelectorAll('.nav-item'); let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; if (pageYOffset >= sectionTop - 100) { current = section.getAttribute('id'); } }); navItems.forEach(item => { item.classList.remove('active'); if (item.getAttribute('href') === '#' + current) { item.classList.add('active'); } }); }); </script> </body> </html>