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

**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;
}

|  |  |  |  |
| --- | --- | --- | --- |
|  |  |  |  |

|  |  |  |  |
| --- | --- | --- | --- |
|  | 首页 |   |  |

|  |  |  |
| --- | --- | --- |
| 《生态兴则文明兴：党的生态文明思想探源与逻辑》  主编：包存宽等  出版社：上海人民出版社  出版时间：2021年 | 《新时代中国生态文明建设：思想、制度与实践》  作者：包存宽 陈红敏 李琴  出版社：上海人民出版社  出版时间：2023年5月 | 《（关于建立健全生态产品价值实现机制的意见）辅导读本》  国家发展和改革委员会编写（复旦大学参编）  出版社：人民出版社  出版时间：2021年 |

|  |  |  |
| --- | --- | --- |
| 《绿色经济学》  作者：诺奖得主威廉诺德豪斯  译者：李志青 等  出版社：中信出版集团  出版时间：2019 | 《中国湿地和迁徙水鸟保护能力建设》  主编：雍怡 袁军  出版社：中国林业出版社  出版时间:2024年09月 | 《气候的未来：减缓和适应气候变化》  作者：（美）罗伯特·S.平狄克  译者：李志青 刘瀚斌  出版社：东北财经大学出版社  出版时间：2024-11-13 |

|  |  |  |  |  |
| --- | --- | --- | --- | --- |
| 实验室动态 |  |  | 观点 |  |
| Laboratory Dynamics | | Viewpoint | |
| |  |  | | --- | --- | | [苔藓：黄山除了奇松怪石，还有这些“绿色宝藏”！](/_upload/tpl/16/e7/5863/template5863/displayinfo-C16.htm) | 26/01/31 | | [复旦院生态分院承担的金山区和浦东新区生物多样性调查评估项目顺利通过专家验收](/_upload/tpl/16/e7/5863/template5863/displayinfo-C17.htm) | 26/01/30 | | [【年终特辑】两山两城，贡献新质——复旦绿色高质量发展政产学研合作平台2025年度精彩回顾](/_upload/tpl/16/e7/5863/template5863/displayinfo-C15.htm) | 26/01/01 | | [探索绿色金融助力生态保护新路径，“浦东发布生物多样性“家底”](/_upload/tpl/16/e7/5863/template5863/displayinfo-C14.htm) | 25/12/30 | | [复旦院生态分院调查团队参加上海市生物多样性调查工作现场会交流](/_upload/tpl/16/e7/5863/template5863/displayinfo-C13.htm) | 25/12/30 | | [黄山风景区牵头编制的《山岳型零碳景区评估规范》团体标准正式发布](/_upload/tpl/16/e7/5863/template5863/displayinfo-C12.htm) | 25/12/24 | | | |  |  | | --- | --- | | [包存宽，李红丽：《因地制宜发展新能源，推动经济社会发展全面绿色低碳转型》](/_upload/tpl/16/e7/5863/template5863/displayinfo-D1.htm) | 25/03/14 | | [包存宽，李红丽：《大力发展绿色生产力 实现人与自然和谐共生现代化》](/_upload/tpl/16/e7/5863/template5863/displayinfo-D2.htm) | 25/02/24 | | [包存宽，陆平：《给发展立规矩，唱好生态"黄河大合唱"》](/_upload/tpl/16/e7/5863/template5863/displayinfo-D3.htm) | 25/02/11 | | [李志青：《提升绿色金融产品市场契合度，金融机构仍需下功夫》](/_upload/tpl/16/e7/5863/template5863/displayinfo-D4.htm) | 24/12/16 | | [史骥伟、包存宽：回应全球治理赤字，构建可持续星球](/_upload/tpl/16/e7/5863/template5863/displayinfo-D5.htm) | 24/11/28 | |  | 24/11/15 | | |

// 获取所有表格元素
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();
}
});