<template>
|
<div>
|
<div class="bannerin">
|
<img src="../assets/image/aboutbanner.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">
|
<!-- 品牌故事 -->
|
<div class="brandStory" id="mian1">
|
<div style="text-align: center">
|
<p class="brandStory_title">品牌故事</p>
|
<p class="brandStory_abstract">
|
一家具备研发、生产、销售、服务于一体的综合性大气污染解决方案提供商
|
</p>
|
</div>
|
<el-row>
|
<el-col :span="12">
|
<el-row>
|
<el-col :span="10" class="imgHover">
|
<img src="../assets/image/1.jpg" style="width: 258px; height: 358px" />
|
</el-col>
|
<el-col :span="14">
|
<div class="imgHover">
|
<img src="../assets/image/2.jpg" style="width: 359px; height: 176px" />
|
</div>
|
<div>
|
<el-row>
|
<el-col :span="12" class="imgHover">
|
<img src="../assets/image/3.jpg" style="width: 175px; height: 174px" />
|
</el-col>
|
<el-col :span="12" class="imgHover">
|
<img src="../assets/image/4.jpg" style="width: 175px; height: 174px"
|
/></el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="12">
|
<div class="overview">
|
<p>
|
七星瓢虫环境科技（苏州）有限公司始创于2013年，坐落于江苏省苏州市。是一家具备研发、生产、销售、服务于一体的综合性大气污染解决方案提供商。
|
</p>
|
<p>
|
经数年的突破性发展，业务广泛覆盖于大气污染防治的多领域，囊括大气环境诊断、大气监测、大气污染管控、大气数据信息服务等，形成了多维度、全链路、系统化的大气管控服务。
|
</p>
|
<p>
|
近年来在七星瓢虫团队领头人王雨池博士的带领下创造性提出“截控防治”的大气环境改善理论体系，为行业升级提供了方法论支撑。从监测、治理、预防等环节将问题拆解、逐一攻破。并以此为指导，自主研发产品涵盖了“23参数微型空气站、大气环境智慧监测指挥平台、颗粒物激光雷达、无人机监测系统、走航监测车、一体化扬尘监测等在线监测设备，在大气污染治理领域实现了“天地人车”的立体维度管控。
|
</p>
|
<p>
|
2021年公司位于张家港市总投资超5亿、占地四十亩的总部基地开工建设，落成后将建成设备生产基地、大气指挥中心、行业标准实验室等于一体的企业科技园。就此打开七星瓢虫环境科技发展的新篇章。
|
</p>
|
<p>
|
七星瓢虫环境科技致力于大气环境防控领域，多年来秉承“敬天爱人，乐业安道”的核心价值观，已与多个省份、城市的环保主管部门等重要客户达成长期合作。策马扬帆，七星瓢虫扎根于大气环境领域，不断为政企客户提供更优质的系统级解决方案服务。勇往直前，七星瓢虫不忘初心，誓为“天更蓝、水更清、山更绿、河更净、呼吸更顺”这一企业伟大目标不断奋进。
|
</p>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="history">
|
<div class="history_wrap">
|
<div class="contentBox" id="mian2">
|
<div class="case_t1"><p>发展历程</p></div>
|
<div class="history_list">
|
<el-carousel
|
ref="remarkCaruselUp"
|
:interval="3000"
|
arrow="always"
|
indicator-position="none"
|
@change="changeCarouselItem"
|
>
|
<el-carousel-item v-for="item in historyList" :key="item.id">
|
<div class="history_list_item">
|
<div class="pull-left">{{ item.name }}</div>
|
<div class="pull-right" v-html="item.content"></div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
<div class="hidden-xs">
|
<ul>
|
<li
|
v-for="item in historyList"
|
:key="item.id"
|
@click="changeCarouselItem(item.id)"
|
:class="{ liActive: changeCarouselIndex === item.id }"
|
>
|
<span>{{ item.time }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="corporateCulture">
|
<div class="contentBox" id="mian3">
|
<div style="text-align: center"><p class="brandStory_title">企业文化</p></div>
|
<div class="corporateCulture_title culture_con">
|
<p class="culture_contit">【企业文化】</p>
|
<p class="culture_contex">敬天爱人 乐业安道</p>
|
<p class="culture_contit">【企业愿景】</p>
|
<p class="culture_contex">全球更领先的环境数据信息服务商</p>
|
<p class="culture_contit">【企业使命】</p>
|
<p class="culture_contex">环境数据记录生存细节</p>
|
<p class="culture_contex">环境数字改善民生品质</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, reactive, ref, watch } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
// import require from '@/utils/require'
|
const route = useRoute()
|
const router = useRouter()
|
onMounted(() => {
|
console.log('router', route)
|
})
|
const menuList = reactive([
|
{
|
id: 0,
|
name: '品牌故事'
|
},
|
{
|
id: 1,
|
name: '发展历程'
|
},
|
{
|
id: 2,
|
name: '企业文化'
|
}
|
])
|
const historyList = reactive([
|
{
|
id: 0,
|
time: '2013-2015',
|
name: '立项期',
|
content:
|
'无人机监测项目立项<br>室内环境监测系统(商用)项目立项<br>智慧监测系统（VOCs）项目立项<br>FEI评价系统立项<br>减排大数据测评分析系统立项'
|
},
|
{
|
id: 1,
|
time: '2015-2017',
|
name: '发展期',
|
content:
|
'工业采集终端装配安装成功<br>VOCs七大组成系统完成构建<br>VOCs智慧监测系统研发成功<br>知识产权储备达811项<br>大数据分析中心建立'
|
},
|
{
|
id: 2,
|
time: '2015-2017',
|
name: '成熟期',
|
content:
|
'智慧监测系统指挥中心成立<br>获得高新技术企业证书<br>七星瓢虫高科技产业园立项建设<br>知识产权储备总数超1500项<br>大气污染解决方案提供商战略提出及实施'
|
},
|
{
|
id: 3,
|
time: '2021未来可期',
|
name: '2021未来可期',
|
content: '2021未来可期'
|
}
|
])
|
const clickIndex = ref(menuList[0])
|
let changeCarouselIndex = ref(0)
|
let changeClickIndex = (item: any) => {
|
clickIndex.value = item
|
}
|
let remarkCaruselUp = ref()
|
let changeCarouselItem = (index: any) => {
|
changeCarouselIndex.value = index
|
remarkCaruselUp.value.setActiveItem(index)
|
}
|
watch(
|
() => router.currentRoute.value,
|
(newValue: any) => {
|
if (newValue.query.id === '51') {
|
clickIndex.value = menuList[1]
|
} else if (newValue.query.id === '52') {
|
clickIndex.value = menuList[2]
|
} 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;
|
}
|
}
|
}
|
}
|
}
|
|
.contentBox {
|
width: 1270px;
|
padding-right: 15px;
|
padding-left: 15px;
|
margin-right: auto;
|
margin-left: auto;
|
}
|
.brandStory {
|
margin-bottom: 50px;
|
}
|
.brandStory_title {
|
text-align: center;
|
font-size: 32px;
|
font-weight: bold;
|
color: #333;
|
display: inline-block;
|
border-bottom: 1px solid #cccccc;
|
margin: 0 auto 10px;
|
padding: 1rem 0 20px;
|
}
|
.brandStory_abstract {
|
text-align: center;
|
color: #666;
|
|
margin: 0 0 10px;
|
margin-bottom: 40px;
|
}
|
.imgHover {
|
overflow: hidden;
|
img {
|
transition: 1s all;
|
&:hover {
|
transform: scale(1.3);
|
}
|
}
|
}
|
.overview {
|
width: 100%;
|
height: 337px;
|
overflow: auto;
|
p {
|
color: #555555;
|
line-height: 30px;
|
text-indent: 2em;
|
}
|
}
|
.history_wrap {
|
background: url('../assets/image/licheng_bg.jpg') center top no-repeat;
|
height: 576px;
|
}
|
.case_t1 {
|
text-align: center;
|
p {
|
color: #fff;
|
border-bottom: 1px solid #fff;
|
padding-top: 90px;
|
font-size: 32px;
|
font-weight: bold;
|
display: inline-block;
|
margin: 0 auto 10px;
|
padding: 1rem 0 20px;
|
}
|
}
|
::v-deep .el-carousel__arrow--left,
|
::v-deep .el-carousel__arrow--right {
|
height: 60px;
|
width: 60px;
|
border: 1px solid;
|
}
|
.hidden-xs {
|
cursor: pointer;
|
width: 1400px;
|
height: 110px;
|
bottom: 0;
|
text-align: center;
|
background: url('../assets/image/bg_hinLine.png') left 40px no-repeat;
|
ul {
|
display: flex;
|
justify-content: center;
|
}
|
li {
|
width: 170px;
|
height: 110px;
|
border: none;
|
display: flex;
|
color: #a4b9d8;
|
font-size: 16px;
|
text-align: center;
|
&:nth-child(even) {
|
align-items: end;
|
}
|
}
|
|
.liActive {
|
background: url('../assets/image/icon_now.png') center 25px no-repeat;
|
background-position: 20% 0%;
|
color: #fff;
|
text-indent: 0;
|
text-align: center;
|
}
|
}
|
|
.history_list_item {
|
padding-top: 50px;
|
padding-left: 150px;
|
display: flex;
|
}
|
.pull-left {
|
display: inline-block;
|
font-size: 30px;
|
color: #fff;
|
font-weight: bold;
|
line-height: 41px;
|
border-right: 2px solid #fff;
|
padding-right: 20px;
|
margin-right: 60px;
|
}
|
.pull-right {
|
display: inline-block;
|
width: 630px;
|
color: #fff;
|
font-size: 16px;
|
line-height: 30px;
|
}
|
.corporateCulture {
|
background: url('../assets/image/wenhua_bg.jpg') center bottom no-repeat;
|
min-height: 380px;
|
}
|
.culture_contit {
|
font-size: 17px;
|
color: #333;
|
margin-left: 15px px;
|
margin-right: 25px;
|
margin-left: 10px;
|
}
|
.culture_contex {
|
color: #777777;
|
font-size: 14px;
|
margin-left: 10px;
|
margin-top: 28px;
|
}
|
.culture_con p {
|
writing-mode: tb-rl;
|
float: right;
|
}
|
</style>
|
