<template>
|
<div class="content">
|
<div class="banner_section">
|
<img src="../assets/image/banner.jpg" alt="" />
|
</div>
|
<div class="myTab_menu">
|
<ul class="bgbox">
|
<li v-for="(item, index) in bgImageList" :key="index" class="imgList">
|
<div
|
class="itemBg"
|
@click="changeBg(item)"
|
:class="{ borRght: index === 3, clickBg: item.show === true }"
|
:style="{
|
background: 'url(' + item.src + ')'
|
}"
|
>
|
<p>{{ item.name }}</p>
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="tabBox">
|
<div class="tab-pane">
|
<el-row>
|
<el-col :span="12">
|
<img :src="handleSelectItem.childrenSrc" alt="" />
|
</el-col>
|
<el-col :span="12">
|
<p class="tab-pane-title">{{ handleSelectItem.name }}</p>
|
<p class="tab-pane-content">{{ handleSelectItem.content }}</p>
|
<p class="tab-pane-button" @click="toDetail(handleSelectItem)">了解更多</p>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="menuCenter">
|
<ul class="nav-tabs">
|
<li v-for="(item, index) in navTabsList" :key="index">
|
<a
|
:class="{ navClickBg: item.show === true }"
|
@click="changeNavTab(item)"
|
:style="{
|
color: item.show === true ? '#e96769' : '#fff',
|
background:
|
item.show === false
|
? 'url(' + item.src + ') 55px top no-repeat'
|
: '#fff url(' + item.srcck + ') 55px top no-repeat'
|
}"
|
>{{ item.name }}</a
|
>
|
</li>
|
</ul>
|
</div>
|
<div class="navContent">
|
<div>
|
<p class="tab_con_tex1">
|
{{ handleSelectNavTab.name }}
|
</p>
|
<p class="tab_con_tex2">
|
{{ handleSelectNavTab.content }}
|
</p>
|
</div>
|
<el-row>
|
<el-col
|
class="works-grid"
|
:span="6"
|
v-for="(item, index) in handleSelectNavTab.childrenSrcList"
|
:key="index"
|
>
|
<img :src="item" alt="" />
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref } from 'vue'
|
import require from '@/utils/require'
|
let bgImageList = reactive([
|
{
|
id: '2',
|
name: '臭氧&PM2.5协同管控',
|
show: false,
|
src: require('@/assets/image/icon1.png'),
|
childrenSrc: require('@/assets/image/icon1children.png'),
|
content:
|
'七星瓢虫领头人王雨池博士创造性的提出截控防治环境污染改善理论体系。以此理论为指导，将针对管控区域进行硬件设备的环形布点，形成网格化、全覆盖监测体系。并依据天地人 车的理念，通过不同高度层放置空气微型站、激光雷达、无人机巡航监控，同时地面利用走航车的机动监测，配合服务团队的无死角管控，做到维度全覆盖、污染不放过，实现管控区域的臭氧PM2.5协同管控。'
|
},
|
{
|
id: '21',
|
name: '涉气企业无组织排放断面管控',
|
show: false,
|
src: require('@/assets/image/icon2.png'),
|
childrenSrc: require('@/assets/image/icon2children.png'),
|
content:
|
'七星瓢虫环境科技对监测设备安装位置的各项环境指数进行监测，并实时将采集到的数据发送至云端服务器计算并存储。监测设备将采集的数据经后台分析，通过大屏PC端或手机APP等媒介将数据进行展示和一系列交互活动。实现对涉气企业无组织排放企业断面、有组织排放收集率、末端治理效能管理方案。'
|
},
|
{
|
id: '22',
|
name: '环保管家服务',
|
show: false,
|
src: require('@/assets/image/icon3.png'),
|
childrenSrc: require('@/assets/image/icon3children.png'),
|
content:
|
'七星瓢虫环境科技团队结合自主研发的包括23参数微型空气站、无人机环境数据黑匣子监测系统等硬件设备及软件服务平台-中国大气环境智慧监测指挥平台，同步配合专业化、定制化的本地服务团队，实现针对环境管控区域的环保管家服务。'
|
},
|
{
|
id: '23',
|
name: '更多详情',
|
show: false,
|
src: require('@/assets/image/icon4.png'),
|
childrenSrc: require('@/assets/image/icon4children.jpg'),
|
content: '更多大气污染领域解决方案请联系我们。竭诚为您提供更专业，更可靠的服务'
|
}
|
])
|
|
let handleSelectItem = ref({ ...bgImageList[0] })
|
import { useRouter } from 'vue-router'
|
const router = useRouter()
|
const toDetail = (item: any) => {
|
console.log('handleSelectItem', handleSelectItem)
|
router.push({ path: '/solution', query: { name: item.name, id: item.id } })
|
}
|
const changeBg = (item: any) => {
|
bgImageList.forEach((val: any) => {
|
val.show = false
|
})
|
item.show = true
|
handleSelectItem.value = item
|
}
|
let navTabsList = reactive([
|
{
|
name: '23参数网格化空气质量监测微型站',
|
show: false,
|
src: require('@/assets/image/bannerIcon1.png'),
|
srcck: require('@/assets/image/bannerIcon1ck.png'),
|
childrenSrcList: [
|
require('@/assets/image/bannerIcone1Childre1.png'),
|
require('@/assets/image/bannerIcone1Childre2.png'),
|
require('@/assets/image/bannerIcone1Childre3.jpg'),
|
require('@/assets/image/bannerIcone1Childre4.png')
|
],
|
content:
|
'主要由探头、供电模组及安装支架等模块组成。可7*24连续不间断、实时监测环境空气中的AQI六参数（PM2.5、PM10、O3、CO、SO2、NO2），同时支持温度、湿度、风速、风向、气压、光照强度、噪声污染、非甲烷总烃、苯、甲苯、二甲苯、NH3、H2S、甲醛、TVOC、PM0.3个数、PM2.5个数等监测因子的扩展。能及时、准确反映区域环境空气质量状况及变化规律。'
|
},
|
{
|
name: '大气环境智慧监测指挥平台',
|
show: false,
|
src: require('@/assets/image/bannerIcon2.png'),
|
srcck: require('@/assets/image/bannerIcon2ck.png'),
|
childrenSrcList: [
|
require('@/assets/image/bannerIcone2Childre1.png'),
|
require('@/assets/image/bannerIcone2Childre2.png'),
|
require('@/assets/image/bannerIcone2Childre3.png'),
|
require('@/assets/image/bannerIcone2Childre4.png')
|
],
|
content:
|
'通过PC端和手机APP等终端将监测设备采集到的环境数据进行展示及交互活动，达到对环境数据的实时监控，并结合自主研发的AI算法，实现可视化风场图、72h的环境数据预测、污染物溯源等功能。'
|
},
|
{
|
name: '无人机环境数据黑匣子监测系统',
|
show: false,
|
src: require('@/assets/image/bannerIcon3.png'),
|
srcck: require('@/assets/image/bannerIcon3ck.png'),
|
childrenSrcList: [
|
require('@/assets/image/bannerIcone3Childre1.png'),
|
require('@/assets/image/bannerIcone3Childre2.jpg'),
|
require('@/assets/image/bannerIcone3Childre3.png'),
|
require('@/assets/image/bannerIcone3Childre4.png')
|
],
|
content:
|
'由FEI-F19气体监测模块+ H920无人机+ E90超清云台相机组成。用以监测环境空气中各参数，并将采集到的数据实时传送至云端服务器计算并存储分析，通过终端设备将数据进行展示及交互活动。主要作用于监测大气空气质量AQI、应急检测有毒有害气体及核辐射和电磁辐射监测等，其精度可以达到1ppb。该系统实现了超高机动化巡航，弥补了监测点位的空间限制，使监测变得更加灵活、准确。'
|
},
|
{
|
name: '一体化扬尘监测系统',
|
show: false,
|
src: require('@/assets/image/bannerIcon4.png'),
|
srcck: require('@/assets/image/bannerIcon4ck.png'),
|
childrenSrcList: [
|
require('@/assets/image/bannerIcone4Childre1.png'),
|
require('@/assets/image/bannerIcone4Childre2.png'),
|
require('@/assets/image/bannerIcone4Childre3.png'),
|
require('@/assets/image/bannerIcone4Childre4.png')
|
],
|
content:
|
'该系统采用光散射原理，将采集检测污染源的粉尘浓度数，并通过4G通讯传输至服务器将数据显示在各类终端设备，也可在机体显示屏上读取所检测到的粉尘浓度数。实现了全天候无人值守的粉尘浓度在线监测。主要应用于建筑扬尘、沙石场、堆煤场、秸秆焚烧、工业粉尘、燃煤、机动车尾气、道路扬尘、施工扬尘、堆场扬尘等无组织烟尘污染源排放及居民区、商业区、道路交通、施工区域等的环境空气质量的在线实时的自动监控'
|
}
|
])
|
let handleSelectNavTab = ref({ ...navTabsList[0] })
|
const changeNavTab = (item: any) => {
|
navTabsList.forEach((val: any) => {
|
val.show = false
|
})
|
item.show = true
|
handleSelectNavTab.value = item
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.content {
|
overflow: hidden;
|
}
|
.banner_section {
|
img {
|
max-width: 100%;
|
vertical-align: middle;
|
}
|
}
|
.myTab_menu {
|
display: flex;
|
justify-content: center;
|
}
|
.bgbox {
|
width: 1200px;
|
height: 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
.imgList {
|
display: inline-block;
|
width: 25%;
|
background-color: #f5f5f5;
|
cursor: pointer;
|
}
|
.itemBg {
|
border-left: 1px solid #e5e5e5;
|
border-radius: 4px 4px 0 0;
|
background-repeat: no-repeat !important;
|
background-position: center !important;
|
height: 240px;
|
transition: 0.5s all;
|
display: flex;
|
align-items: self-end;
|
justify-content: center;
|
p {
|
margin-bottom: 30px;
|
color: #1b242f;
|
&:hover {
|
color: #888;
|
}
|
}
|
}
|
.borRght {
|
border-right: 1px solid #e5e5e5;
|
}
|
.clickBg {
|
background-color: #ff575a !important;
|
p {
|
color: #fff;
|
}
|
}
|
.tabBox {
|
padding: 146px 0 130px;
|
}
|
.tab-pane {
|
width: 1200px;
|
margin: 0 auto;
|
}
|
.tab-pane-title {
|
display: inline-block;
|
color: #333333;
|
font-size: 24px;
|
font-weight: 700;
|
border-top: 3px solid #ff575a;
|
border-bottom: 3px solid #ff575a;
|
padding: 10px 0;
|
}
|
.tab-pane-content {
|
margin-top: 30px;
|
color: #666666;
|
line-height: 38px;
|
font-size: 12px;
|
margin-bottom: 20px;
|
}
|
.tab-pane-button {
|
cursor: pointer;
|
width: 155px;
|
height: 47px;
|
background: #ff575a;
|
border-radius: 4px;
|
display: inline-block;
|
text-align: center;
|
line-height: 47px;
|
color: #fff;
|
&:hover {
|
text-decoration: underline;
|
}
|
}
|
.menuCenter {
|
background: url(../assets/image/bannerCenter.png) center top no-repeat;
|
}
|
.nav-tabs {
|
width: 1200px;
|
margin: 0 auto;
|
li {
|
cursor: pointer;
|
display: inline-block;
|
width: 25%;
|
height: 150px;
|
text-align: center;
|
color: #fff;
|
a {
|
background-position-x: 50% !important;
|
background-position-y: 25px !important;
|
display: block;
|
border: none;
|
line-height: 160px;
|
font-size: 18px;
|
padding: 0;
|
margin: 0;
|
border-radius: 0;
|
transition: 0.5s all;
|
&::after {
|
content: '';
|
display: inline-block;
|
width: 13px;
|
height: 7px;
|
background: url(../assets/image/icon_down.png) center no-repeat;
|
margin-left: 6px;
|
}
|
}
|
}
|
}
|
.tab_con_tex1 {
|
color: #333;
|
font-size: 28px;
|
padding: 1rem 0;
|
text-align: center;
|
margin: 0;
|
}
|
.tab_con_tex2 {
|
color: #888;
|
font-size: 14px;
|
margin: 0 auto 10px;
|
line-height: 34px;
|
text-align: center;
|
width: 60%;
|
}
|
.works-grid {
|
overflow: hidden;
|
padding: 0;
|
position: relative;
|
cursor: pointer;
|
img {
|
width: 100%;
|
vertical-align: middle;
|
transition: 1s all;
|
&:hover {
|
transform: scale(1.3);
|
}
|
}
|
}
|
.fade {
|
opacity: 0;
|
-webkit-transition: opacity 0.15s linear;
|
transition: opacity 0.15s linear;
|
}
|
</style>
|
