<template>
|
<div class="footerBox">
|
<div class="content">
|
<ul class="inforlist">
|
<li v-for="item in footerinforList" :key="item.id">
|
<div class="itemName">
|
{{ item.name }}
|
</div>
|
<div v-for="(val, index) in item.list" :key="index" class="valName">
|
<span
|
@mouseenter="val.show = !val.show"
|
@mouseleave="val.show = !val.show"
|
:class="{ hoverBorderBg: val.show }"
|
>{{ val.name }}</span
|
>
|
</div>
|
<div v-if="item.id === '7'" style="text-align: center">
|
<img src="../assets/image/weixinCode.jpg" style="width: 45%" />
|
<p style="margin-top: 10px; color: #919090">官网公众号</p>
|
</div>
|
</li>
|
</ul>
|
<div class="copyrightInfor">
|
<div class="copyrightInfor_phone">
|
<div>
|
<span>版权所有 © 昆山市七星博士环境科技股份有限公司</span>
|
<span
|
><a
|
href="https://beian.miit.gov.cn"
|
target="_blank"
|
style="color: #919090; text-decoration: none; margin: 0 5px"
|
>苏ICP备16043018号</a
|
></span
|
>
|
<span> 客服热线 0512--36871300</span>
|
</div>
|
<div>
|
<span>技术支持：七星瓢虫环境科技</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive } from 'vue'
|
const footerinforList = reactive([
|
{
|
name: '解决方案',
|
id: '2',
|
list: [
|
{ name: '臭氧&PM2.5协同管控', show: false, path: '/solution/o3-pm25' },
|
{ name: '涉气企业无组织排放断面管控', show: false, path: '/solution/o3-pm25' },
|
{ name: '环保管家服务', show: false, path: '/solution/o3-pm25' },
|
{ name: '更多详情', show: false, path: '/solution/o3-pm25' }
|
]
|
},
|
{
|
name: '产品中心',
|
id: '3',
|
list: [
|
{ name: '23参数微型空气站', show: false, path: '/solution/o3-pm25' },
|
{ name: '大气环境智慧监测指挥平台', show: false, path: '/solution/o3-pm25' },
|
{ name: '无人机数据黑匣子监测系统', show: false, path: '/solution/o3-pm25' },
|
{ name: '一体化扬尘监测系统', show: false, path: '/solution/o3-pm25' },
|
{ name: '七星瓢虫温室气体监测系统', show: false, path: '/solution/o3-pm25' }
|
]
|
},
|
{
|
name: '新闻中心',
|
id: '4',
|
list: [
|
{ name: '公司新闻', show: false, path: '' },
|
{ name: '行业新闻', show: false, path: '' }
|
]
|
},
|
{
|
name: '关于我们',
|
id: '5',
|
list: [
|
{ name: '品牌故事', show: false, path: '' },
|
{ name: '发展历程', show: false, path: '' },
|
{ name: '企业文化', show: false, path: '' }
|
]
|
},
|
{
|
name: '联系我们',
|
path: '/contact',
|
id: '6',
|
show: false,
|
list: [
|
{ name: '全国服务热线：0512--36871300', show: false, path: '' },
|
{ name: '公司邮箱：', show: false, path: '' }
|
]
|
},
|
{ name: '关注我们', id: '7', list: [] }
|
])
|
</script>
|
|
<style scoped lang="scss">
|
.footerBox {
|
// position: fixed;
|
z-index: 100;
|
width: 100%;
|
bottom: 0;
|
}
|
.content {
|
background: #242426 url(../assets/image/foot_bg.jpg) center top no-repeat;
|
}
|
.inforlist {
|
padding: 1.8em 0 1em;
|
width: 80%;
|
display: flex;
|
justify-content: space-around;
|
color: #fff;
|
margin: 0 auto;
|
li {
|
width: 25%;
|
padding: 0 15px;
|
font-size: 12px;
|
}
|
}
|
.itemName {
|
padding-bottom: 10px;
|
margin-bottom: 10px;
|
border-bottom: 1px solid #585858;
|
}
|
.valName {
|
color: #919090;
|
line-height: 2.5em;
|
font-size: 12px;
|
display: block;
|
cursor: pointer;
|
}
|
.hoverBorderBg {
|
border-bottom: 1px solid #919090;
|
}
|
.copyrightInfor {
|
border-top: 1px solid #585858;
|
}
|
.copyrightInfor_phone {
|
width: 80%;
|
margin: 0 auto;
|
padding: 10px 0 20px 0;
|
color: #919090;
|
font-size: 12px;
|
display: flex;
|
justify-content: space-between;
|
}
|
</style>
|
