首页-上海市生态环境治理政策模拟与评估重点实验室

Source: https://fdeep.fudan.edu.cn/ Parent: https://environment.fudan.edu.cn/26245/list.htm

首页-上海市生态环境治理政策模拟与评估重点实验室

/* 添加高亮样式 */ mark { background-color: yellow; font-weight: bold; } /* 搜索栏样式 */ .searchBar { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 1.00); box-shadow: 0 0 10px rgba(0, 0, 0, .4); border-radius: 40px; position: absolute; right: 20px; top: 50%; /* 垂直居中 */ transform: translateY(-50%); /* 精确垂直居中 */ overflow: hidden; transition: .5s; } .changeWidth { width: 240px; } .icon { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 1.00); border-radius: 60px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: absolute; right: 0; z-index: 2; margin-top: 0px; } .icon:before { content: ''; width: 13px; height: 13px; border: 3px solid rgba(81, 81, 81, 1.00); position: absolute; transform: translate(-4px, -4px); border-radius: 13px; } .icon:after { content: ''; width: 3px; height: 10px; background-color: rgba(81, 81, 81, 1.00); transform: translate(6px, 6px) rotate(315deg); } .textInput { width: 200px; height: 40px; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 145, 0, 1.00); position: absolute; top: 0; right: 40px; transition: .5s; opacity: 0; pointer-events: none; border-radius: 0 40px 40px 0; /* 右侧圆角 */ } .textInput input { width: 100%; height: 100%; border: none; outline: none; font-size: 14px; padding-left: 10px; padding-right: 30px; } .clear { width: 15px; height: 15px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; display: flex; justify-content: center; align-items: center; } .clear::before { content: ''; width: 1px; height: 15px; background-color: rgba(81, 81, 81, 0.50); transform: rotate(45deg); position: absolute; } .clear::after { content: ''; width: 1px; height: 15px; background-color: rgba(81, 81, 81, 0.50); transform: rotate(315deg); } .searchBar.changeWidth .textInput { opacity: 1; pointer-events: auto; border-radius: 0 40px 40px 0; /* 右侧圆角 */ } /* 轮播容器样式 */ .slider-container { position: relative; height: 412px; margin: 0 auto; overflow: hidden; justify-content: center; /* 水平居中 */ } /* 图片样式 */ .slider-container img.slide { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 100%; opacity: 0; transition: all 1s ease; } /* 显示当前图片 */ .slider-container img.slide.active { left: 0; opacity: 1; } /* 前一张图片过渡样式 */ .slider-container img.slide.prev { left: 100%; opacity: 0; } /* 控制按钮图片样式 */ .slider-button-img { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; } /* 鼠标悬停在轮播容器上时显示按钮图片 */ .slider-container:hover .slider-button-img { opacity: 1; } /* 左按钮图片位置 */

prev-img {

left: 10px; } /* 右按钮图片位置 */

next-img {

right: 10px; } /* 高亮样式 */ mark { background-color: #FFFF00; /* 高亮颜色 */ padding: 2px; font-weight: bold; } tbody tr .B0D1 { } /* 确保A0和B0D之间没有间隙 */ .A0, .B0D { margin: 0; padding: 0; }

// 获取所有表格元素 const tables = document.querySelectorAll('.slider-container table'); // 获取左切换按钮图片元素 const prevButtonImg = document.getElementById('prev-img'); // 获取右切换按钮图片元素 const nextButtonImg = document.getElementById('next-img'); // 当前显示表格的索引 let currentIndex = 0; // 显示指定索引的表格 const showTable = (index) => { // 移除所有表格的 active 和 prev 类 tables.forEach(table => { table.classList.remove('active', 'prev'); }); // 为指定索引的表格添加 active 类 tables[index].classList.add('active'); // 计算前一张表格的索引 const prevIndex = (index - 1 + tables.length) % tables.length; // 为前一张表格添加 prev 类 tables[prevIndex].classList.add('prev'); }; // 切换到下一张表格（从右往左） const nextTable = () => { // 更新当前索引 currentIndex = (currentIndex + 1) % tables.length; // 显示更新后的表格 showTable(currentIndex); }; // 切换到上一张表格（从左往右） const prevTable = () => { // 更新当前索引 currentIndex = (currentIndex - 1 + tables.length) % tables.length; // 显示更新后的表格 showTable(currentIndex); }; // 自动轮播，每 5 秒切换一次表格 let intervalId = setInterval(nextTable, 5000); // 为左切换按钮图片添加点击事件监听器 prevButtonImg.addEventListener('click', () => { // 清除自动轮播定时器 clearInterval(intervalId); // 切换到上一张表格 prevTable(); // 重新开始自动轮播 intervalId = setInterval(nextTable, 5000); }); // 为右切换按钮图片添加点击事件监听器 nextButtonImg.addEventListener('click', () => { // 清除自动轮播定时器 clearInterval(intervalId); // 切换到下一张表格 nextTable(); // 重新开始自动轮播 intervalId = setInterval(nextTable, 5000); }); // 初始显示第一张表格 showTable(currentIndex);

// 自定义 $ 函数用于通过选择器获取元素 const $ = (selector) => document.querySelector(selector); // 获取搜索栏、搜索图标、清除按钮和搜索输入框元素 const oSearchBar = $('.searchBar'); const oIcon = $('.icon'); const oClear = $('.clear'); const oText = $('#search-input'); // 搜索函数 const searchWeb = () => { const keyword = oText.value.trim(); if (keyword) { // 跳转到 listcolumn.htm 页面，并传递关键字作为 URL 参数 window.location.href = listcolumn.htm?keyword=${encodeURIComponent(keyword)}; } }; // 处理图标点击事件 oIcon.addEventListener('click', () => { if (oSearchBar.classList.contains('changeWidth')) { // 如果搜索栏已展开，且有内容，则进行搜索 if (oText.value.trim() !== '') { searchWeb(); } else { // 否则移除展开样式 oSearchBar.classList.remove('changeWidth'); oText.value = ''; // 清空输入框 } } else { // 如果搜索栏未展开，添加展开样式 oSearchBar.classList.add('changeWidth'); oText.focus(); } }); // 处理清除按钮点击事件 oClear.addEventListener('click', () => { oText.value = ''; oText.focus(); }); // 为输入框添加键盘事件监听器（支持回车键搜索） oText.addEventListener('keydown', (e) => { if (e.key === 'Enter') { searchWeb(); } });