<template>
|
<div>
|
<div class="bannerin">
|
<img src="../assets/image/newsbanner.png" alt="" />
|
</div>
|
<div class="menu_sild">
|
<div class="container">
|
<ul class="clearfix">
|
<li @click="changeClickIndex(item)" v-for="item in menuList" :key="item.id">
|
<span class="current" :class="{ clickCurrent: clickIndex.id === item.id }">{{
|
item.name
|
}}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
<div class="contentBox" v-if="isShowCar">
|
<div class="carsList">
|
<el-card
|
v-for="item in clickIndex.list"
|
:key="item.index"
|
class="box-card"
|
@click="toDetail(item)"
|
>
|
<div class="pro_img">
|
<img class="leftConetenImg" :src="item.scr" alt="" />
|
</div>
|
<div class="pro_des">
|
<div class="pull-left">
|
<p class="day">{{ item.day }}</p>
|
<p class="year">{{ item.time }}</p>
|
</div>
|
<div>
|
<p class="pro_tit">{{ item.title }}</p>
|
<p class="pro_tex">{{ item.content }}</p>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
<div style="text-align: center; margin-bottom: 4em">
|
<el-button type="info" plain
|
>共 <strong>1</strong>页<strong>{{ clickIndex.list.length }}</strong
|
>条记录</el-button
|
>
|
</div>
|
</div>
|
<div class="newSdetail contentBox" v-if="!isShowCar">
|
<div class="newSdetail_box">
|
<div class="newSdetail_box_left">
|
<h1>{{ itemConfig.name }}</h1>
|
<p class="blog-description">{{ itemConfig.abstract }}</p>
|
<div class="blog-main">
|
<p class="time" style="margin: 10px 0">{{ itemConfig.time }}</p>
|
<div>
|
<div
|
v-for="(item, index) in itemConfig.content"
|
:key="index"
|
:class="{ imgCter: item.type !== 'text' }"
|
>
|
<p v-html="item.content" v-if="item.type === 'text'" class="blog-text"></p>
|
<img v-else :src="require(`${item.content}`)" class="blog-img" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="newSdetail_box_right">
|
<h3 style="font-size: 24px; padding-left: 12px; color: #555;margin: 20px;0 10px 0">
|
热点新闻<span style="font-size: 18px; color: #aaa; padding-left: 10px">NEWS</span>
|
</h3>
|
<div>
|
<el-row
|
class="hoverList"
|
v-for="(item, index) in clickIndex.list"
|
:key="index"
|
style="margin-bottom: 10px"
|
@click="toDetail(item)"
|
>
|
<el-col :span="6">
|
<img style="width: 100%" :src="item.scr" alt="" />
|
</el-col>
|
<el-col :span="18">
|
<div style="margin-left: 20px; margin-top: 10px">
|
<p>{{ item.time }}-{{ item.day }}</p>
|
<p style="margin-top: 10px" class="tetxOver">
|
{{ item.title }}
|
</p>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import newDetail from '@/utils/newDetail.json'
|
import { onMounted, reactive, ref, watch } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
import require from '@/utils/require'
|
import _ from 'lodash'
|
const route = useRoute()
|
const router = useRouter()
|
let configData = reactive(newDetail.data)
|
onMounted(() => {
|
console.log('router', route)
|
})
|
const menuList = reactive([
|
{
|
id: 0,
|
name: '公司新闻',
|
list: [
|
{
|
index: 0,
|
title: '总决赛，我们来了',
|
scr: require('@/assets/image/1-2109161410130-L.jpg'),
|
time: '2021-09',
|
day: '19',
|
content:
|
'近期，第九届创业江苏科技创业大赛暨第十届中国创新创业大赛江苏赛区节能环保行业赛，在江苏宜兴成功举办。 本届大赛呈现 三个聚焦的特点：一是聚焦关键核心技术遴选优质项目；...'
|
},
|
{
|
index: 1,
|
title: '七星瓢虫环境科技助力中国疾控中心',
|
scr: require('@/assets/image/1-210126150151245.jpg'),
|
time: '2021-09',
|
day: '19',
|
content:
|
'七星瓢虫环境科技脱颖而出，凭借七星博士室内空气在线连续监测设备FEI-S1及专业团队，成为了中国疾病预防控制中心近日发出的“室内空气在线连续监测设备采购”招标通知书的最终成交服务...'
|
},
|
{
|
index: 2,
|
title: '势如破竹，七星瓢虫环境科技总部规划签约仪式',
|
scr: require('@/assets/image/1-210126145T2435.jpg'),
|
time: '2021-09',
|
day: '19',
|
content:
|
'七星瓢虫环境科技与苏州越城建筑设计院在苏州举行七星瓢虫总部规划的战略签约仪式，双方就总部规划设计等多维度达成深度合作。未来基于双方的友好合作，积极推进七星瓢虫环境科技总部...'
|
},
|
{
|
index: 3,
|
title: '脱颖而出，七星瓢虫代表江苏省出征全国大赛',
|
scr: require('@/assets/image/1-1F12Q624570-L.jpg'),
|
time: '2021-09',
|
day: '19',
|
content:
|
'第九届中国创新创业大赛地方赛暨第八届"创业江苏"科技创业大赛已经落下帷幕，经过全省共5480个企业和团队的激烈角逐，七星瓢虫环境科技（苏州）有限公司凭借“臭氧与PM2.5协同管控”“环...'
|
},
|
{
|
index: 4,
|
title: '守护绿水青山，七星剑指科创',
|
scr: require('@/assets/image/1-210126145324G7.jpg'),
|
time: '2021-09',
|
day: '19',
|
content:
|
'第八届“创业江苏”科技创业大赛节能环保行业赛暨中国第九届创新创业大赛江苏赛区比赛在宜兴环科园完美落幕。七星瓢虫环境科技本次受邀参加，并在全省共5480个企业和团队中脱颖而出，...'
|
},
|
{
|
index: 5,
|
title: '对话央视：立足当下 创新未来',
|
scr: require('@/assets/image/1-210126144ZY93.jpg'),
|
time: '2021-09',
|
day: '19',
|
content:
|
'应央视邀请，在第二十一届环博会现场，七星瓢虫环境科技董事长王雨池博士接受了央视《品质》栏目的专访。双方就本次环博会上出现的新产品、新技术，以及当下环境中企业要如何破局等相...'
|
},
|
|
{
|
index: 6,
|
title: '2020IEexp，七星瓢虫智构未来，策马扬帆',
|
name: 'menuChilderFirst3',
|
scr: require('@/assets/image/1-210115110925X6.jpg'),
|
time: '2021-09',
|
day: '19',
|
content:
|
'2020年第二十一届中国环博会日益临近。作为亚洲最具影响力、最高品质的环境技术交流盛会，本次展会荟集全球顶级污水处理、给水排水、固体废弃物处理、资源回收利用、大气污染治理、室...'
|
},
|
{
|
index: 7,
|
title: '十五万平米展出的中国环境现状，七载刻画的七星',
|
name: 'menuChilderFirst3',
|
scr: require('@/assets/image/1-210126144130309.jpg'),
|
time: '2021-09',
|
day: '19',
|
content:
|
'为期三天的第21届中国环博会在上海新国际博览中心落下帷幕。15万平米的全景展览空间，24个国家与地区，近8万名专业观众全面呈现了大气、水、固废、土壤、噪声污染治理等全产业链，凝聚...'
|
}
|
]
|
},
|
{
|
id: 1,
|
name: '行业新闻',
|
list: [
|
{
|
index: 8,
|
title: '生态环境部孙金龙发表《持续改善环境质量》',
|
name: 'menuChilderFirst1',
|
scr: require('@/assets/image/1-210126150I41W.png'),
|
time: '2021-09',
|
day: '19',
|
content:
|
'党的十九届五中全会通过的《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》（以下简称《建议》）提出，持续改善环境质量。这是党中央深刻把握我国...'
|
}
|
]
|
}
|
])
|
const clickIndex = ref(menuList[0])
|
const isShowCar = ref(true)
|
let clickNews: any = ref({})
|
let changeClickIndex = (item: any) => {
|
clickIndex.value = item
|
isShowCar.value = true
|
}
|
let itemConfig: any = ref({})
|
let toDetail = (item: any) => {
|
isShowCar.value = false
|
clickNews.value = item
|
itemConfig.value = _.find(configData, { index: clickNews.value.index }) as Object
|
}
|
watch(
|
() => router.currentRoute.value,
|
(newValue: any) => {
|
if (newValue.query.id === '41') {
|
clickIndex.value = menuList[1]
|
} else {
|
clickIndex.value = menuList[0]
|
}
|
},
|
{ immediate: true }
|
)
|
</script>
|
|
<style scoped lang="scss">
|
.bannerin {
|
position: relative;
|
overflow: hidden;
|
img {
|
height: 588px;
|
object-fit: cover;
|
width: 100%;
|
}
|
}
|
.menu_sild {
|
border-bottom: 1px solid #ebebeb;
|
.container {
|
width: 1270px;
|
padding-right: 15px;
|
padding-left: 15px;
|
margin-right: auto;
|
margin-left: auto;
|
.clearfix {
|
li {
|
cursor: pointer;
|
display: inline-block;
|
.current {
|
display: block;
|
padding: 0 30px;
|
height: 50px;
|
line-height: 50px;
|
color: #555;
|
&:hover {
|
color: #ff575a;
|
border-bottom: 2px solid #ff575a;
|
}
|
}
|
.clickCurrent {
|
color: #ff575a;
|
border-bottom: 2px solid #ff575a;
|
}
|
}
|
}
|
}
|
}
|
.carsList {
|
padding: 50px 0;
|
.box-card {
|
cursor: pointer;
|
margin-bottom: 20px;
|
padding: 30px 20px;
|
margin-right: 20px;
|
.pro_img {
|
float: left;
|
width: 25%;
|
overflow: hidden;
|
img {
|
max-width: 100%;
|
vertical-align: middle;
|
transition: 1s all;
|
&:hover {
|
transform: scale(1.3);
|
}
|
}
|
}
|
.pro_des {
|
float: left;
|
width: calc(75% - 40px);
|
display: flex;
|
padding-left: 20px;
|
margin-top: 20px;
|
|
.pro_tit {
|
font-size: 18px;
|
line-height: 25px;
|
color: #555;
|
border-bottom: 1px solid #e5e6e8;
|
padding: 6px 0;
|
margin-bottom: 20px;
|
}
|
.pro_tex {
|
line-height: 24px;
|
color: #666;
|
font-size: 12px;
|
margin-bottom: 0;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical;
|
}
|
}
|
}
|
}
|
.pull-left {
|
margin-right: 20px;
|
.day {
|
width: 80px;
|
height: 68px;
|
background: #acacac;
|
font-size: 40px;
|
font-weight: bold;
|
text-align: center;
|
line-height: 68px;
|
margin: 0;
|
color: #fff;
|
}
|
.year {
|
width: 80px;
|
height: 36px;
|
background: #818181;
|
font-size: 14px;
|
color: #fff;
|
text-align: center;
|
line-height: 36px;
|
margin: 0;
|
}
|
}
|
.showDetail {
|
color: #ff575a;
|
margin-top: 20px;
|
border: 1px solid #ff575a;
|
padding: 6px 20px;
|
border-radius: 4px;
|
display: inline-block;
|
cursor: pointer;
|
font-size: 12px;
|
text-decoration: none;
|
&:hover {
|
background: #ff575a;
|
color: #fff;
|
text-decoration: none;
|
}
|
}
|
.hoverList {
|
cursor: pointer;
|
overflow: hidden;
|
&:hover {
|
color: #ff575a !important;
|
}
|
div {
|
overflow: hidden;
|
}
|
img {
|
transition: 1s all;
|
&:hover {
|
transform: scale(1.3);
|
}
|
}
|
}
|
.tetxOver {
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 隐藏溢出的文本 */
|
text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
|
width: 200px;
|
}
|
.contentBox {
|
width: 1270px;
|
padding-right: 15px;
|
padding-left: 15px;
|
margin-right: auto;
|
margin-left: auto;
|
}
|
.newSdetail_box {
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
display: flex;
|
.newSdetail_box_left {
|
flex: 1;
|
}
|
.newSdetail_box_right {
|
width: 30%;
|
}
|
}
|
.blog-description {
|
font-size: 1.2rem;
|
color: #999;
|
}
|
.blog-main {
|
margin-bottom: 50px;
|
font-size: 18px;
|
line-height: 1.5;
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
color: #555;
|
}
|
.blog-text {
|
text-indent: 2em;
|
}
|
.blog-img {
|
width: 600px;
|
}
|
.imgCter {
|
text-align: center;
|
}
|
</style>
|
