348 lines
17 KiB
Vue
348 lines
17 KiB
Vue
<template>
|
||
<div class="journalism">
|
||
<div class="nav">
|
||
<el-menu
|
||
:default-active="activeIndex"
|
||
class="el-menu-demo"
|
||
mode="horizontal"
|
||
background-color="#545c64"
|
||
text-color="#fff"
|
||
active-text-color="#ffd04b"
|
||
>
|
||
<el-menu-item index="1">
|
||
<router-link to="/index">首页</router-link>
|
||
</el-menu-item>
|
||
<el-menu-item index="2">
|
||
<router-link to="/scheme">解决方案</router-link>
|
||
</el-menu-item>
|
||
<el-menu-item index="3">
|
||
<router-link to="/projectCase">工程案例</router-link>
|
||
</el-menu-item>
|
||
<el-menu-item index="4">
|
||
<router-link to="journalism">新闻资讯</router-link>
|
||
</el-menu-item>
|
||
</el-menu>
|
||
</div>
|
||
<!-- 轮播图 -->
|
||
<div class="slideshow">
|
||
<el-carousel :interval="3000" arrow="always" type="card">
|
||
<el-carousel-item v-for="(item, index) in carouselItems" :key="index">
|
||
<img
|
||
:src="item.image"
|
||
:alt="item.description"
|
||
style="width: 100%; height: auto"
|
||
/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
|
||
<!-- 新闻 -->
|
||
<div class="message">
|
||
<div class="message-left">
|
||
<el-tabs v-model="activeName">
|
||
<el-tab-pane label="大气" name="first">
|
||
<div
|
||
class="news-item"
|
||
v-for="(item, index) in messageItem"
|
||
:key="index"
|
||
>
|
||
<img :src="item.imgs" alt="" />
|
||
<h3>{{ item.title }}</h3>
|
||
<p>
|
||
{{ item.content }}
|
||
</p>
|
||
<p class="issue">
|
||
{{ item.department }} | <span>{{
|
||
item.date
|
||
}}</span>
|
||
</p>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="节能" name="second">
|
||
<div
|
||
class="energy-item"
|
||
v-for="(item, index) in energyItem"
|
||
:key="index"
|
||
>
|
||
<img :src="item.imgs" alt="" />
|
||
<h3>{{ item.title }}</h3>
|
||
<p>
|
||
{{ item.content }}
|
||
</p>
|
||
<p class="issue">
|
||
{{ item.department }} | <span>{{
|
||
item.date
|
||
}}</span>
|
||
</p>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="修复" name="third">
|
||
<div
|
||
class="repair-item"
|
||
v-for="(item, index) in repairItem"
|
||
:key="index"
|
||
>
|
||
<img :src="item.imgs" alt="" />
|
||
<h3>{{ item.title }}</h3>
|
||
<p>
|
||
{{ item.content }}
|
||
</p>
|
||
<p class="issue">
|
||
{{ item.department }} | <span>{{
|
||
item.date
|
||
}}</span>
|
||
</p>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<el-pagination :hide-on-single-page="true" background layout="prev, pager, next" :total="30">
|
||
</el-pagination>
|
||
</div>
|
||
|
||
<div class="message-right"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'journaLism',
|
||
data () {
|
||
return {
|
||
activeIndex: '4',
|
||
carouselItems: [
|
||
{
|
||
image: require('@/assets/images/1.jpg')
|
||
},
|
||
{
|
||
image: require('@/assets/images/2.jpg')
|
||
},
|
||
{
|
||
image: require('@/assets/images/3.jpg')
|
||
},
|
||
{
|
||
image: require('@/assets/images/4.jpg')
|
||
}
|
||
],
|
||
activeName: 'first',
|
||
messageItem: [
|
||
{
|
||
imgs: require('@/assets/images/1.jpg'),
|
||
title: '生态环境部发布4月上半月全国空气质量预报会商结果',
|
||
content:
|
||
'2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
|
||
department: '生态环境部',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/1.jpg'),
|
||
title: '生态环境部发布4月上半月全国空气质量预报会商结果',
|
||
content:
|
||
'2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
|
||
department: '生态环境部',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/1.jpg'),
|
||
title: '生态环境部发布4月上半月全国空气质量预报会商结果',
|
||
content:
|
||
'2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
|
||
department: '生态环境部',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/1.jpg'),
|
||
title: '生态环境部发布4月上半月全国空气质量预报会商结果',
|
||
content:
|
||
'2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
|
||
department: '生态环境部',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/1.jpg'),
|
||
title: '生态环境部发布4月上半月全国空气质量预报会商结果',
|
||
content:
|
||
'2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
|
||
department: '生态环境部',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/1.jpg'),
|
||
title: '生态环境部发布4月上半月全国空气质量预报会商结果',
|
||
content:
|
||
'2024年3月31日，中国环境监测总站联合中央气象台、国家大气污染防治攻关联合中心、东北、华南、西南、西北、长三角区域空气质量预测预报中心和北京市生态环境监测中心，开展2024年4月上半月（4月1日—4月15日）全国空气质量预报会商。',
|
||
department: '生态环境部',
|
||
date: '2024-4-5'
|
||
}
|
||
],
|
||
energyItem: [
|
||
{
|
||
imgs: require('@/assets/images/2.jpg'),
|
||
title: '“节能服务进企业”助力钢铁行业绿色发展',
|
||
content:
|
||
'为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
|
||
department: '科技日报',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/2.jpg'),
|
||
title: '“节能服务进企业”助力钢铁行业绿色发展',
|
||
content:
|
||
'为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
|
||
department: '科技日报',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/2.jpg'),
|
||
title: '“节能服务进企业”助力钢铁行业绿色发展',
|
||
content:
|
||
'为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
|
||
department: '科技日报',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/2.jpg'),
|
||
title: '“节能服务进企业”助力钢铁行业绿色发展',
|
||
content:
|
||
'为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
|
||
department: '科技日报',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/2.jpg'),
|
||
title: '“节能服务进企业”助力钢铁行业绿色发展',
|
||
content:
|
||
'为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
|
||
department: '科技日报',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/2.jpg'),
|
||
title: '“节能服务进企业”助力钢铁行业绿色发展',
|
||
content:
|
||
'为全面推动钢铁行业极致能效工程，挖掘行业节能降碳潜力，“节能服务进企业”暨2024钢铁行业能效提升研讨会近日在江苏省江阴市举行。参会代表围绕钢铁行业大规模设备更新、节能降碳等政策，绿色微电网建设及极致能效标杆创建实践，全流程先进节能减排、建筑光伏一体化、高效压缩空气能源供应系统等技术开展交流分享；与会钢铁企业、节能服务公司介绍了铁前节能、钢轧节能等节能技术和装备的应用实践及前景等。。',
|
||
department: '科技日报',
|
||
date: '2024-4-5'
|
||
}
|
||
],
|
||
repairItem: [
|
||
{
|
||
imgs: require('@/assets/images/3.jpg'),
|
||
title: '矿山如何生态修复？山东这样做',
|
||
content:
|
||
'“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
|
||
department: '中国环境',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/3.jpg'),
|
||
title: '矿山如何生态修复？山东这样做',
|
||
content:
|
||
'“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
|
||
department: '中国环境',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/3.jpg'),
|
||
title: '矿山如何生态修复？山东这样做',
|
||
content:
|
||
'“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
|
||
department: '中国环境',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/3.jpg'),
|
||
title: '矿山如何生态修复？山东这样做',
|
||
content:
|
||
'“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
|
||
department: '中国环境',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/3.jpg'),
|
||
title: '矿山如何生态修复？山东这样做',
|
||
content:
|
||
'“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
|
||
department: '中国环境',
|
||
date: '2024-4-5'
|
||
},
|
||
{
|
||
imgs: require('@/assets/images/3.jpg'),
|
||
title: '矿山如何生态修复？山东这样做',
|
||
content:
|
||
'“三北”地区是我国重要的生态安全屏障，约占国土面积的1/3，草原固碳增汇潜力巨大。同时，“三北”地区也因丰富的矿产资源承载着不少露天矿山开发活动，主要集中在草原区、荒漠区和丘陵区等地区，导致原本就脆弱的草原生态环境进一步恶化。因此，深入推进“三北”地区矿山生态修复，恢复和强化矿山生态系统的碳汇功能，成为“三北”地区需要解决的问题。',
|
||
department: '中国环境',
|
||
date: '2024-4-5'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.message {
|
||
width: 1300px;
|
||
height: 1430px;
|
||
margin: 10px auto;
|
||
|
||
.message-left {
|
||
width: 900px;
|
||
height: 800px;
|
||
float: left;
|
||
|
||
.news-item,
|
||
.energy-item,
|
||
.repair-item {
|
||
width: 880px;
|
||
height: 180px;
|
||
padding: 5px 0 20px 0;
|
||
margin-bottom: 15px;
|
||
border-bottom: 2px solid #ccc;
|
||
|
||
img {
|
||
float: left;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: gray;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: normal;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.issue {
|
||
margin-top: 80px;
|
||
}
|
||
}
|
||
|
||
.el-pagination{
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.message-right {
|
||
width: 400px;
|
||
height: 800px;
|
||
float: left;
|
||
background-color: palevioletred;
|
||
margin-top: 38px;
|
||
}
|
||
}
|
||
|
||
.news-item:hover h3 {
|
||
transition: all 0.5s ease;
|
||
color: #28905a;
|
||
}
|
||
</style>
|