524 lines
16 KiB
Vue
524 lines
16 KiB
Vue
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<AppHead/>
|
||
|
|
<div class="banner">
|
||
|
|
<div class="banner_main">
|
||
|
|
<h2>企业安全生产</h2>
|
||
|
|
<div class="s_tit">综合解决方案</div>
|
||
|
|
<p>结合企业安全生产管理物联监测、个性化业务场景等需求为企业量身定制的解决方案</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="block1">
|
||
|
|
<div class="block1_main">
|
||
|
|
<div class="title">安全生产数智化管理平台</div>
|
||
|
|
<div class="s_img1">
|
||
|
|
<img src="@/assets/images/solution_img1.png" alt=""/>
|
||
|
|
</div>
|
||
|
|
<div class="block1_mid">
|
||
|
|
<div class="top">
|
||
|
|
<div
|
||
|
|
v-for="(tab, index) in tabs"
|
||
|
|
:key="index"
|
||
|
|
class="item"
|
||
|
|
:class="{ active: activeIndex === index }"
|
||
|
|
@click="activeIndex = index"
|
||
|
|
>
|
||
|
|
<img src="@/assets/images/solution_img4.png" alt=""/> <span>{{ tab.name }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="block1_wrap">
|
||
|
|
<div class="info">
|
||
|
|
<div class="title">{{ tabs[activeIndex].title }}</div>
|
||
|
|
<div class="s_title">{{ tabs[activeIndex].sTitle }}</div>
|
||
|
|
<div class="main">
|
||
|
|
<p v-for="(item, idx) in tabs[activeIndex].items" :key="idx">
|
||
|
|
<img src="@/assets/images/solution_img10.png" alt=""/> <span>{{ item.text }}</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="block1_img">
|
||
|
|
<img src="@/assets/images/solution_img9.png" alt=""/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="block2">
|
||
|
|
<div class="block2_main">
|
||
|
|
<div class="title">
|
||
|
|
<div class="tit">靠谱的专业服务</div>
|
||
|
|
<p>助力提升安全管理效益,满足多行业的安全生产需求</p>
|
||
|
|
</div>
|
||
|
|
<div class="block2_wrap">
|
||
|
|
<div
|
||
|
|
v-for="(item, index) in block2Items"
|
||
|
|
:key="index"
|
||
|
|
class="item"
|
||
|
|
:class="{ active: block2ActiveIndex === index }"
|
||
|
|
@mouseenter="block2ActiveIndex = index"
|
||
|
|
>
|
||
|
|
<div class="img"><img :src="item.img" alt=""/></div>
|
||
|
|
<div class="title">{{ item.title }}</div>
|
||
|
|
<div class="text">{{ item.text }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 解决方案-->
|
||
|
|
<div class="solution">
|
||
|
|
<div class="solution_container">
|
||
|
|
<div class="title">
|
||
|
|
<div class="tit">行业痛点</div>
|
||
|
|
<p>助力提升安全管理效益,满足多行业的安全生产需求</p>
|
||
|
|
</div>
|
||
|
|
<div class="solution_main">
|
||
|
|
<div class="item">
|
||
|
|
<div class="img"> <img src="@/assets/images/img8.png" alt="河北秦安安全科技股份有限公司"/></div>
|
||
|
|
<div class="title">政府机构</div>
|
||
|
|
<div class="info">
|
||
|
|
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
|
||
|
|
<div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="img"> <img src="@/assets/images/img9.png" alt="河北秦安安全科技股份有限公司"/></div>
|
||
|
|
<div class="title">民爆</div>
|
||
|
|
<div class="info">
|
||
|
|
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
|
||
|
|
<div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="img"> <img src="@/assets/images/img10.png" alt="河北秦安安全科技股份有限公司"/></div>
|
||
|
|
<div class="title">机械</div>
|
||
|
|
<div class="info">
|
||
|
|
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
|
||
|
|
<div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="img"> <img src="@/assets/images/img11.png" alt="河北秦安安全科技股份有限公司"/></div>
|
||
|
|
<div class="title">军工</div>
|
||
|
|
<div class="info">
|
||
|
|
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
|
||
|
|
<div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="img"> <img src="@/assets/images/img16.png" alt="河北秦安安全科技股份有限公司"/></div>
|
||
|
|
<div class="title">水务</div>
|
||
|
|
<div class="info">
|
||
|
|
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
|
||
|
|
<div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="img"> <img src="@/assets/images/img12.png" alt="河北秦安安全科技股份有限公司"/></div>
|
||
|
|
<div class="title">农牧</div>
|
||
|
|
<div class="info">
|
||
|
|
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
|
||
|
|
<div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="img"> <img src="@/assets/images/img13.png" alt="河北秦安安全科技股份有限公司"/></div>
|
||
|
|
<div class="title">风电</div>
|
||
|
|
<div class="info">
|
||
|
|
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
|
||
|
|
<div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div class="img"> <img src="@/assets/images/img14.png" alt="河北秦安安全科技股份有限公司"/></div>
|
||
|
|
<div class="title">其他</div>
|
||
|
|
<div class="info">
|
||
|
|
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
|
||
|
|
<div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<AppFoot/>
|
||
|
|
<right/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import solution_img12 from "@/assets/images/solution_img12.png";
|
||
|
|
import solution_img13 from "@/assets/images/solution_img13.png";
|
||
|
|
import solution_img14 from "@/assets/images/solution_img14.png";
|
||
|
|
import solution_img15 from "@/assets/images/solution_img15.png";
|
||
|
|
|
||
|
|
const activeIndex = ref(0);
|
||
|
|
const block2ActiveIndex = ref(0);
|
||
|
|
|
||
|
|
const tabs = [
|
||
|
|
{
|
||
|
|
name: "一个大屏",
|
||
|
|
title: "数智化大屏",
|
||
|
|
sTitle: '可视化管理突出重点要素，紧盯异常情况实现"千企千面"',
|
||
|
|
blockImg: "@/assets/images/solution_img9.png",
|
||
|
|
items: [
|
||
|
|
{ img: "@/assets/images/solution_img6.png", text: "集团管理的重点内容，及时呈现，实时更新；" },
|
||
|
|
{ img: "@/assets/images/solution_img7.png", text: "下属各单位管理效果实时排名，优劣自现，一目了然；" },
|
||
|
|
{ img: "@/assets/images/solution_img8.png", text: "重点关注信息及时提醒，异常现象实时掌握，充分体现大数据的应用的优势。" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "3个体系",
|
||
|
|
title: "三大体系",
|
||
|
|
sTitle: "风险分级管控、隐患排查治理、安全教育培训",
|
||
|
|
blockImg: "@/assets/images/solution_img9.png",
|
||
|
|
items: [
|
||
|
|
{ img: "@/assets/images/solution_img6.png", text: "风险分级管控体系内容；" },
|
||
|
|
{ img: "@/assets/images/solution_img7.png", text: "隐患排查治理体系内容；" },
|
||
|
|
{ img: "@/assets/images/solution_img8.png", text: "安全教育培训体系内容。" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "多个建设方案",
|
||
|
|
title: "建设方案",
|
||
|
|
sTitle: "根据企业实际需求提供定制化建设方案",
|
||
|
|
blockImg: "@/assets/images/solution_img9.png",
|
||
|
|
items: [
|
||
|
|
{ img: "@/assets/images/solution_img6.png", text: "建设方案内容一；" },
|
||
|
|
{ img: "@/assets/images/solution_img7.png", text: "建设方案内容二；" },
|
||
|
|
{ img: "@/assets/images/solution_img8.png", text: "建设方案内容三。" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const block2Items = [
|
||
|
|
{ img: solution_img15, title: "风险辨识", text: "内置符合企业的风险辨识清单，勾勾选选完成风险辨识" },
|
||
|
|
{ img: solution_img12, title: "双重预防机制", text: "智能化风险辨识和隐患排查治理流程，源头管控安全生产风险" },
|
||
|
|
{ img: solution_img13, title: "监测预警系统", text: "结合物联网监测数据，智能分析异常行为、异常现象，提供预警信息" },
|
||
|
|
{ img: solution_img14, title: "作业管理规范化", text: "提供合规合法的作业流程管理，灵活高效进行安全作业管理" },
|
||
|
|
];
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.container{
|
||
|
|
background: #f0f9ff;
|
||
|
|
.banner {
|
||
|
|
width: 100%;
|
||
|
|
height: 494px;
|
||
|
|
background: url("@/assets/images/solution_banner.png") no-repeat top center;
|
||
|
|
.banner_main {
|
||
|
|
width: 1400px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding-top: 230px;
|
||
|
|
h2 {
|
||
|
|
font-size: 60px;
|
||
|
|
color: #ffffff;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.s_tit{
|
||
|
|
font-size: 28px;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
color: #ffffff;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.block1{
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 30px;
|
||
|
|
.block1_main{
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.title{
|
||
|
|
font-size: 38px;
|
||
|
|
color: #2c2c2c;
|
||
|
|
}
|
||
|
|
.s_img1{
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.block1_mid{
|
||
|
|
width: 1440px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding-bottom: 50px;
|
||
|
|
padding-top: 50px;
|
||
|
|
|
||
|
|
|
||
|
|
.top{
|
||
|
|
width: 100%;
|
||
|
|
background: #ffffff;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
height: 62px;
|
||
|
|
border-radius: 4px;
|
||
|
|
box-shadow: 0px 0px 10px 0px rgba(203, 203, 203, 0.32);
|
||
|
|
line-height: 62px;
|
||
|
|
.item{
|
||
|
|
width: 33.34%;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
|
||
|
|
&:hover{
|
||
|
|
background: #1c4eff url("@/assets/images/solution_img5.png") no-repeat top center;
|
||
|
|
color: #ffffff;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
&.active{
|
||
|
|
background: #1c4eff url("@/assets/images/solution_img5.png") no-repeat top center;
|
||
|
|
color: #ffffff;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.block1_wrap{
|
||
|
|
width: 100%;
|
||
|
|
background: #ffffff;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 50px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-top: 20px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.info{
|
||
|
|
width: 60%;
|
||
|
|
text-align: left;
|
||
|
|
.title{
|
||
|
|
font-size: 48px;
|
||
|
|
color: #2a6df9;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.s_title{
|
||
|
|
margin-top: 30px;
|
||
|
|
color: #444444;
|
||
|
|
}
|
||
|
|
.main{
|
||
|
|
margin-top: 40px;
|
||
|
|
p{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: #666666;
|
||
|
|
img{
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.block1_img{
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.block2{
|
||
|
|
width: 100%;
|
||
|
|
padding-top: 30px;
|
||
|
|
.block2_main{
|
||
|
|
width: 1400px;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
.title{
|
||
|
|
text-align: center;
|
||
|
|
.tit{
|
||
|
|
color: #181818;
|
||
|
|
font-size: 36px;
|
||
|
|
}
|
||
|
|
p{
|
||
|
|
font-size: 16px;
|
||
|
|
color: #999999;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.block2_wrap{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 40px;
|
||
|
|
padding-bottom: 60px;
|
||
|
|
.item{
|
||
|
|
width: 268px;
|
||
|
|
background: #ffffff;
|
||
|
|
border-style: solid;
|
||
|
|
border-width: 1px;
|
||
|
|
border-color: rgb(231 240 255);
|
||
|
|
border-radius: 6px;
|
||
|
|
background-image: -moz-linear-gradient( 120deg, rgb(238,245,255) 0%, rgb(255,255,255) 100%);
|
||
|
|
background-image: -webkit-linear-gradient( 120deg, rgb(238,245,255) 0%, rgb(255,255,255) 100%);
|
||
|
|
background-image: -ms-linear-gradient( 120deg, rgb(238,245,255) 0%, rgb(255,255,255) 100%);
|
||
|
|
padding: 30px 30px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
box-shadow: 0 0 10px 0 rgba(203, 203, 203, 0.32);
|
||
|
|
transition: all 0.5s ease;
|
||
|
|
text-align: left;
|
||
|
|
|
||
|
|
.img{
|
||
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
transition: color 0.3s ease;
|
||
|
|
font-size: 24px;
|
||
|
|
color: #222222;
|
||
|
|
margin: 30px auto 50px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.text{
|
||
|
|
color: #666666;
|
||
|
|
transition: color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover{
|
||
|
|
color: #ffffff;
|
||
|
|
width: 548px;
|
||
|
|
background: url("@/assets/images/solution_img11.png") no-repeat top center;
|
||
|
|
text-align: left;
|
||
|
|
padding: 30px;
|
||
|
|
.img{
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
font-size: 24px;
|
||
|
|
color: #ffffff;
|
||
|
|
margin: 30px auto 50px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.text{
|
||
|
|
color: #ffffff;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
color: #ffffff;
|
||
|
|
width: 548px;
|
||
|
|
background: url("@/assets/images/solution_img11.png") no-repeat top center;
|
||
|
|
text-align: left;
|
||
|
|
padding: 30px;
|
||
|
|
.img{
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
font-size: 24px;
|
||
|
|
color: #ffffff;
|
||
|
|
margin: 30px auto 50px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.text{
|
||
|
|
color: #ffffff;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.solution{
|
||
|
|
width:100% ;
|
||
|
|
background: #ffffff;
|
||
|
|
padding: 50px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.solution_container{
|
||
|
|
width: 1400px;
|
||
|
|
margin: 0 auto;
|
||
|
|
.title{
|
||
|
|
text-align: center;
|
||
|
|
.tit{
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
font-size: 36px;
|
||
|
|
color: #4c4b4b;
|
||
|
|
|
||
|
|
}
|
||
|
|
p{
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
color: #999999;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.solution_main{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
margin-top: 30px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.item{
|
||
|
|
width: 330px;
|
||
|
|
height: 195px;
|
||
|
|
position: relative;
|
||
|
|
margin: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
.img{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
img{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title{
|
||
|
|
position: absolute;
|
||
|
|
top:15px;
|
||
|
|
left: 15px;
|
||
|
|
background: rgba(0,0,0,0.23);
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 50px;
|
||
|
|
color: #ffffff;
|
||
|
|
font-weight: bold;
|
||
|
|
z-index: 2;
|
||
|
|
transition: background 0.3s ease;
|
||
|
|
}
|
||
|
|
.info{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0,22,60,0.6);
|
||
|
|
border-radius: 10px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
color: #ffffff;
|
||
|
|
padding: 80px 20px;
|
||
|
|
z-index: 1;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(100%);
|
||
|
|
transition: all 0.4s ease;
|
||
|
|
.more{
|
||
|
|
text-align: right;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
.info{
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
background: #1d78ff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|