<template>
|
<div>
|
<div class="bannerin">
|
<img src="../assets/image/banner.jpg" 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="business_con container">
|
<p class="business_tit">
|
{{ clickIndex.item.name }}
|
</p>
|
<div class="business_tex">
|
<el-row :gutter="60">
|
<el-col :span="14">
|
<div>
|
<strong>{{ clickIndex.item.conetnt }}</strong>
|
<div style="text-align: center">
|
<img class="leftConetenImg" :src="clickIndex.item.src" alt="" />
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="10">
|
<div class="works-grid">
|
<div class="scrollRevealDiv" data-scroll-reveal="enter left and move 100px over 1s">
|
<img
|
src="../assets/image/icon1children.png"
|
alt=""
|
@mouseenter="mouseEnter(1)"
|
@mouseleave="mouseLeave(10)"
|
/>
|
<p v-if="mouseEnterIndex === 1" class="imgTitle">臭氧&PM2.5协同管控</p>
|
</div>
|
</div>
|
<div class="works-grid">
|
<div class="scrollRevealDiv" data-scroll-reveal="enter left and move 100px over 1s">
|
<img
|
src="../assets/image/icon2children.png"
|
alt=""
|
@mouseenter="mouseEnter(2)"
|
@mouseleave="mouseLeave(10)"
|
/>
|
<p v-if="mouseEnterIndex === 2" class="imgTitle">涉气企业无组织排放断面管控</p>
|
</div>
|
</div>
|
<div class="works-grid">
|
<div class="scrollRevealDiv" data-scroll-reveal="enter left and move 100px over 1s">
|
<img
|
src="../assets/image/icon3children.png"
|
alt=""
|
@mouseenter="mouseEnter(3)"
|
@mouseleave="mouseLeave(10)"
|
/>
|
<p v-if="mouseEnterIndex === 3" class="imgTitle">环保管家服务</p>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<onlineContact></onlineContact>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref, reactive, watch } from 'vue'
|
import scrollReveal from 'scrollreveal'
|
import onlineContact from '@/components/onlineContact.vue'
|
// @ts-ignore
|
import retScroll from '@/utils/scroll.js'
|
import { useRoute } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
import require from '@/utils/require'
|
const route = useRoute()
|
const router = useRouter()
|
const data = reactive({
|
scrollReveal: scrollReveal()
|
})
|
const clickIndex = ref({
|
id: 0,
|
item: {
|
id: 0,
|
name: '臭氧&PM2.5协同管控',
|
src: require('@/assets/image/solutionmenu.jpg'),
|
conetnt:
|
'七星瓢虫领头人王雨池博士创造性的提出“截控防治”环境污染改善理论体系。以此理论为指导，将针对管控区域进行硬件设备的环形布点，形成网格化、全覆盖监测体系。并依据“天地人 车”的理念，通过不同高度层放置空气微型站、激光雷达、无人机巡航监控，同时地面利用走航车的机动监测，配合服务团队的无死角管控，做到“维度全覆盖、污染不放过”，实现管控区域的臭氧&PM2.5协同管控。'
|
}
|
})
|
const menuList = reactive([
|
{
|
id: 0,
|
name: '臭氧&PM2.5协同管控',
|
src: require('@/assets/image/solutionmenu.jpg'),
|
conetnt:
|
'七星瓢虫领头人王雨池博士创造性的提出“截控防治”环境污染改善理论体系。以此理论为指导，将针对管控区域进行硬件设备的环形布点，形成网格化、全覆盖监测体系。并依据“天地人 车”的理念，通过不同高度层放置空气微型站、激光雷达、无人机巡航监控，同时地面利用走航车的机动监测，配合服务团队的无死角管控，做到“维度全覆盖、污染不放过”，实现管控区域的臭氧&PM2.5协同管控。'
|
},
|
{
|
id: 1,
|
name: '涉气企业无组织排放断面管控',
|
src: require('@/assets/image/solutionmenu1.jpg'),
|
conetnt:
|
'七星瓢虫环境科技对监测设备安装位置的各项环境指数进行监测，并实时将采集到的数据发送至云端服务器计算并存储。监测设备将采集的数据经后台分析，通过大屏PC端或手机APP等媒介将数据进行展示和一系列交互活动。实现对涉气企业无组织排放企业断面、有组织排放收集率、末端治理效能管理方案。'
|
},
|
{
|
id: 2,
|
name: '环保管家服务',
|
src: require('@/assets/image/solutionmenu2.png'),
|
conetnt:
|
'七星瓢虫环境科技团队结合自主研发的包括23参数微型空气站、无人机环境数据黑匣子监测系统等硬件设备及软件服务平台-中国大气环境智慧监测指挥平台，同步配合专业化、定制化的本地服务团队，实现针对环境管控区域的环保管家服务。'
|
},
|
{
|
id: 3,
|
name: '更多详情',
|
src: '',
|
conetnt: '更多大气污染领域解决方案请联系我们。竭诚为您提供更专业，更可靠的服务'
|
}
|
])
|
onMounted(() => {
|
console.log('router', route.query)
|
retScroll(data)
|
})
|
watch(
|
() => router.currentRoute.value,
|
(newValue: any) => {
|
if (newValue.query.id === '21') {
|
clickIndex.value.id = menuList[1].id
|
clickIndex.value.item = { ...menuList[1] }
|
} else if (newValue.query.id === '22') {
|
clickIndex.value.id = menuList[2].id
|
clickIndex.value.item = { ...menuList[2] }
|
} else if (newValue.query.id === '23') {
|
clickIndex.value.id = menuList[3].id
|
clickIndex.value.item = { ...menuList[3] }
|
} else {
|
clickIndex.value.id = menuList[0].id
|
clickIndex.value.item = { ...menuList[0] }
|
}
|
},
|
{ immediate: true }
|
)
|
|
let mouseEnterIndex = ref(0)
|
let changeClickIndex = (item: any) => {
|
clickIndex.value.id = item.id
|
clickIndex.value.item = item
|
}
|
let mouseEnter = (item: any) => {
|
mouseEnterIndex.value = item
|
}
|
let mouseLeave = (item: any) => {
|
mouseEnterIndex.value = item
|
}
|
</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;
|
}
|
}
|
}
|
}
|
}
|
.business_con {
|
margin-right: auto;
|
margin-left: auto;
|
padding: 50px 0;
|
width: 1270px;
|
.business_tit {
|
color: #333;
|
font-size: 24px;
|
padding-bottom: 25px;
|
border-bottom: 1px solid #cccccc;
|
margin: 0;
|
}
|
.business_tex {
|
padding: 25px 0 50px;
|
.leftConetenImg {
|
width: 100%;
|
}
|
}
|
strong {
|
line-height: 2;
|
display: block;
|
color: #444;
|
font-weight: bold;
|
text-indent: 2em;
|
}
|
}
|
.works-grid {
|
div {
|
cursor: pointer;
|
margin-top: 20px;
|
overflow: hidden;
|
}
|
img {
|
width: 100%;
|
transition: 1s all;
|
&:hover {
|
transform: scale(1.3);
|
}
|
}
|
.imgTitle {
|
position: absolute;
|
bottom: 0px;
|
width: 100%;
|
height: 2.5rem;
|
line-height: 2.5rem;
|
background: rgba(0, 0, 0, 0.4);
|
font-size: 1em;
|
color: #fff;
|
font-weight: bold;
|
text-align: center;
|
}
|
}
|
</style>
|
