qa_portal
/
qa_portal_vue
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

221

master
鲁洪霞 2026-02-02 16:50:43 +08:00
parent f0e3c3c02e
commit 17ce4caf85
7 changed files with 1139 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
nuxt-demo/app/components/AppHead/index.vue
View File

@ -6,7 +6,7 @@
<div style="display: flex">
<nav class="nav_list">
<ul>
<li><NuxtLink to="">首页</NuxtLink></li>
<li><NuxtLink to="/">首页</NuxtLink></li>
<li
@mouseenter="isProductHovered = true"
@mouseleave="isProductHovered = false"
@ -26,9 +26,11 @@
</a>
</span>
</li>
<li><NuxtLink to="">解决方案</NuxtLink></li>
<li>
<NuxtLink to="/solution">解决方案</NuxtLink>
</li>
<li><NuxtLink to="/new">新闻资讯</NuxtLink></li>
<li><NuxtLink to="">合作案例</NuxtLink></li>
<li><NuxtLink to="/case">合作案例</NuxtLink></li>
<li><NuxtLink to="">服务流程</NuxtLink></li>
<li><NuxtLink to="/about">关于秦安</NuxtLink></li>
<li><NuxtLink to="">秦安安全大模型</NuxtLink></li>

1
nuxt-demo/app/pages/about/index.vue
View File

@ -241,6 +241,7 @@
</div>
</div>
</div>
<AppFoot/>
</div>
</template>
<script setup lang="ts">

161
nuxt-demo/app/pages/case/details.vue Normal file
View File

@ -0,0 +1,161 @@
<template>
<div class="container">
<AppHead/>
<div class="banner">
<div class="banner_main">
<h2>合作案例</h2>
<p>安全第一 预防为主 综合治理</p>
</div>
</div>
<div class="case_main">
<div class="top">
<div class="top_wrap">
<div class="title">行业 <span class="line">|</span> </div>
<div class="num">
<div
v-for="(item, index) in industries"
:key="index"
class="item"
:class="{ active: activeIndex === index }"
@click="activeIndex = index"
>
{{ item }}
</div>
</div>
</div>
</div>
<div class="case_main_wrap">
234
</div>
</div>
<AppFoot/>
</div>
</template>
<script setup lang="ts">
const activeIndex = ref(0);
const industries = ["全部", "冶金", "机械", "军工", "民爆", "环保", "水务", "风电", "其他"];
</script>
<style scoped lang="scss">
.container{
background: #f6f8fa;
.banner {
width: 100%;
height: 494px;
background: url("@/assets/images/case_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;
}
p {
margin: 0;
color: #ffffff;
}
}
}
.case_main{
width: 100%;
padding-bottom: 50px;
.top{
background: #ffffff;
height: 60px;
padding-top: 20px;
.top_wrap{
width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
.title{
margin-right: 20px;
.line{
color: #999999;
margin-left: 20px;
}
}
.num{
display: flex;
.item{
color: #666666;
padding: 6px 30px;
border-radius: 50px;
cursor: pointer;
margin-right: 20px;
&.active{
background: #2e57e9;
color: #ffffff;
}
&:hover{
background: #2e57e9;
color: #ffffff;
}
}
}
}
}
.case_main_wrap{
width: 1400px;
margin: 30px auto;
position: relative;
display: flex;
flex-wrap: wrap;
.item{
width: 440px;
background: #ffffff;
border-radius: 16px;
margin: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
transition: all 0.4s ease;
cursor: pointer;
&:hover{
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.img{
width: 100%;
height: 250px;
background: url("@/assets/images/img17.png") no-repeat top center;
border-radius: 20px;
}
.info{
background: #ffffff;
padding: 20px;
border-radius: 20px;
margin-top: -40px;
.title{
font-size: 18px;
text-align: left;
margin-bottom: 20px;
color: #222222;
}
.text{
font-size: 14px;
color: #575d63;
}
.details{
color: #1d78ff;
text-align: right;
font-size: 14px;
margin-top: 20px;
}
}
}
}
}
}
</style>

208
nuxt-demo/app/pages/case/index.vue Normal file
View File

@ -0,0 +1,208 @@
<template>
<div class="container">
<AppHead/>
<div class="banner">
<div class="banner_main">
<h2>合作案例</h2>
<p>安全第一 预防为主 综合治理</p>
</div>
</div>
<div class="case_main">
<div class="top">
<div class="top_wrap">
<div class="title">行业 <span class="line">|</span> </div>
<div class="num">
<div
v-for="(item, index) in industries"
:key="index"
class="item"
:class="{ active: activeIndex === index }"
@click="activeIndex = index"
>
{{ item }}
</div>
</div>
</div>
</div>
<div class="case_main_wrap">
<div class="item">
<div class="img"></div>
<div class="info">
<div class="title">秦皇岛港股份有限公司</div>
<div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
<div class="details">了解详情 ></div>
</div>
</div>
<div class="item">
<div class="img"></div>
<div class="info">
<div class="title">秦皇岛港股份有限公司</div>
<div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
<div class="details">了解详情 ></div>
</div>
</div>
<div class="item">
<div class="img"></div>
<div class="info">
<div class="title">秦皇岛港股份有限公司</div>
<div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
<div class="details">了解详情 ></div>
</div>
</div>
<div class="item">
<div class="img"></div>
<div class="info">
<div class="title">秦皇岛港股份有限公司</div>
<div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
<div class="details">了解详情 ></div>
</div>
</div>
<div class="item">
<div class="img"></div>
<div class="info">
<div class="title">秦皇岛港股份有限公司</div>
<div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
<div class="details">了解详情 ></div>
</div>
</div>
<div class="item">
<div class="img"></div>
<div class="info">
<div class="title">秦皇岛港股份有限公司</div>
<div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
<div class="details">了解详情 ></div>
</div>
</div>
</div>
</div>
<AppFoot/>
</div>
</template>
<script setup lang="ts">
const activeIndex = ref(0);
const industries = ["全部", "冶金", "机械", "军工", "民爆", "环保", "水务", "风电", "其他"];
</script>
<style scoped lang="scss">
.container{
background: #f6f8fa;
.banner {
width: 100%;
height: 494px;
background: url("@/assets/images/case_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;
}
p {
margin: 0;
color: #ffffff;
}
}
}
.case_main{
width: 100%;
padding-bottom: 50px;
.top{
background: #ffffff;
height: 60px;
padding-top: 20px;
.top_wrap{
width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
.title{
margin-right: 20px;
.line{
color: #999999;
margin-left: 20px;
}
}
.num{
display: flex;
.item{
color: #666666;
padding: 6px 30px;
border-radius: 50px;
cursor: pointer;
margin-right: 20px;
&.active{
background: #2e57e9;
color: #ffffff;
}
&:hover{
background: #2e57e9;
color: #ffffff;
}
}
}
}
}
.case_main_wrap{
width: 1400px;
margin: 30px auto;
position: relative;
display: flex;
flex-wrap: wrap;
.item{
width: 440px;
background: #ffffff;
border-radius: 16px;
margin: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
transition: all 0.4s ease;
cursor: pointer;
&:hover{
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.img{
width: 100%;
height: 250px;
background: url("@/assets/images/img17.png") no-repeat top center;
border-radius: 20px;
}
.info{
background: #ffffff;
padding: 20px;
border-radius: 20px;
margin-top: -40px;
.title{
font-size: 18px;
text-align: left;
margin-bottom: 20px;
color: #222222;
}
.text{
font-size: 14px;
color: #575d63;
}
.details{
color: #1d78ff;
text-align: right;
font-size: 14px;
margin-top: 20px;
}
}
}
}
}
}
</style>

189
nuxt-demo/app/pages/new/details.vue Normal file
View File

@ -0,0 +1,189 @@
<template>
<div class="container">
<AppHead/>
<div class="banner">
<div class="banner_main">
<h2>新闻中心</h2>
<p>安全第一 预防为主 综合治理</p>
</div>
</div>
<div class="new_container">
<div class="top">
<div class="wrap">
<div class="list active">全部</div>
<div class="list">安全要闻</div>
<div class="list">政府发文</div>
</div>
</div>
<div class="new_main">
<div class="title">
<h2>安全生产事故 | 900余人被疏散！广西一糖厂产生大量刺激性烟雾</h2>
<div class="time">2024-05-23</div>
</div>
<div class="main">
<p>
5月20日19时50分许，广西百色市田东县南华糖业有限公司二糖厂存放的约12吨消毒剂(三氯异氰尿酸)因近期暴雨天气受潮发生反应，产生大量烟雾，散发出刺激性气味。
</p>
<p>田东县迅速反应，及时处置，保护群众生命财产安全。第一时间组成工作组及时对二糖厂生活区和周边居民共900多人进行疏散，在该县体育馆设置临时安置点，为群众提供矿泉水、口罩、席子、被子等物资。</p>
<p>在百色市生态环境、应急、消防等部门的现场指导下，组织田东县应急、消防、生态环境、卫生健康等部门及专家开展现场处置工作。至21日凌晨2时20分许，现场已无烟雾产生，所有三氯异氰尿酸已安全转移，周边区域烟雾均已消散。疏散的群众已全部安全返回。</p>
<p>生态环境部门21日2时50分完成现场监测，7个监测点位中背景点厂界东北420米(上风向)氨气浓度为0.47mg/m³，其余点位扣除背景点后氨气均未检出，符合《恶臭污染物排放标准》(GB 14554-93)表1标准限值要求;所有点位氯气均未检出，符合《大气污染物综合排放标准》(GB 16297-1996)表1无组织排放监控限值要求，事故未对周边环境产生不良影响。</p>
<p>近期，广西多地遭遇特大暴雨导致多处地段发生内涝暴雨过后仍不能放松警惕防潮、防事故、防次生灾害……这些安全注意事项一起来看↓↓↓危化品储存　　夏季高温、雷雨、台风等极端天气容易对危险化学品安全生产造成不利影响。企业要加强危险化学品储罐、仓库的安全管理，严禁超量储存、违规混存、超高堆放、野蛮装卸等行为。　　有效落实危险化学品仓库防雨、防潮、防雷电措施，特别是受潮易自燃或分解有毒气体的危险化学品，要严格按标准规范入库储存，严禁露天存放，严禁与禁忌物混合储存。　　加强防雷、防静电设施的巡检和维护，按规定定期检测，确保防雷、防静电设施完好有效。</p>
</div>
<div class="bottom">
<div class="item">
<div class="previous">上一篇</div>
<div class="info">
<div class="tit">国务院安委会办公室 应急管理部关于 开展2024年全国“安全生产月”活动的通知</div>
<div class="time">2024-05-21</div>
</div>
</div>
<div class="item">
<div class="previous">下一篇</div>
<div class="info">
<div class="tit">国务院安委会办公室 应急管理部关于 开展2024年全国“安全生产月”活动的通知</div>
<div class="time">2024-05-21</div>
</div>
</div>
</div>
</div>
</div>
<AppFoot/>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.container {
background: #f6f8fa;
.banner {
width: 100%;
height: 494px;
background: url("@/assets/images/newbanner.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;
}
p {
margin: 0;
color: #ffffff;
}
}
}
.new_container {
width: 100%;
.top {
width: 100%;
height: 60px;
background: #ffffff;
.wrap {
width: 1400px;
margin: 0 auto;
display: flex;
.list {
font-size: 16px;
line-height: 60px;
cursor: pointer;
position: relative;
margin-right: 40px;
&.active {
color: #006aff;
&:before {
opacity: 1;
}
}
&:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
border-bottom: 3px solid #006aff;
width: 100%;
opacity: 0;
}
&:hover {
color: #006aff;
&:before {
opacity: 1;
}
}
}
}
}
.new_main{
width: 1400px;
margin: 20px auto 20px;
background: #ffffff;
min-height: 600px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
padding: 20px 50px;
border-top: 3px solid #1d78ff;
.title{
width: 100%;
border-bottom: 1px solid #eeeeee;
padding-bottom: 20px;
.time{
color: #999999;
}
}
.main{
padding: 20px 0;
color: #666666;
p{
text-indent: 2rem;
line-height: 2;
font-size: 16px;
}
img{
margin: 0 auto;
max-width: 100%;
}
}
.bottom{
width: 100%;
.item{
padding: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
cursor: pointer;
.previous{
font-size: 16px;
margin-bottom: 20px;
}
.title{
font-size: 16px;
}
.info{
width: 100%;
display: flex;
justify-content: space-between;
color: #666666;
}
&:hover{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
}
}
}
}
}
</style>

37
nuxt-demo/app/pages/new/index.vue
View File

@ -17,6 +17,21 @@
</div>
</div>
<div class="new_main">
<NuxtLink to="/new/details">
<div class="wrap" >
<div class="item">
<div class="img">
<img src="@/assets/images/img2.png" alt=""/>
</div>
<div class="info">
<div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
<div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
<div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/> <span>2026-10-19</span> </div>
</div>
</div>
</div>
</NuxtLink>
<NuxtLink to="/new/details">
<div class="wrap">
<div class="item">
<div class="img">
@ -29,6 +44,8 @@
</div>
</div>
</div>
</NuxtLink>
<NuxtLink to="/new/details">
<div class="wrap">
<div class="item">
<div class="img">
@ -41,11 +58,14 @@
</div>
</div>
</div>
</NuxtLink>
<NuxtLink to="/new/details">
<div class="wrap">
<div class="item">
<div class="img">
<img src="@/assets/images/img2.png" alt=""/>
</div>
<div class="info">
<div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
<div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
@ -53,18 +73,7 @@
</div>
</div>
</div>
<div class="wrap">
<div class="item">
<div class="img">
<img src="@/assets/images/img2.png" alt=""/>
</div>
<div class="info">
<div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
<div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
<div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/> <span>2026-10-19</span> </div>
</div>
</div>
</div>
</NuxtLink>
</div>
</div>
@ -73,6 +82,7 @@
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
@ -147,6 +157,9 @@
.new_main{
width: 1400px;
margin: 20px auto;
a{
text-decoration: none;
}
.wrap{
width: 100%;
background: #ffffff;

522
nuxt-demo/app/pages/solution/index.vue Normal file
View File

@ -0,0 +1,522 @@
<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/>
</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(181, 202, 238);
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>