master
鲁洪霞 2026-03-16 15:30:53 +08:00
parent 4230826c33
commit 68575482b9
3 changed files with 575 additions and 9 deletions

View File

@ -1886,3 +1886,325 @@ width:1400px;
} }
.solution_container1{
background: #f0f9ff;
.banner {
width: 100%;
height: 320px;
background: url("../img/solution_banner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 135px;
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("../img/solution_img5.png") no-repeat top center;
color: #ffffff;
background-size: 100% 100%;
}
&.active{
background: #1c4eff url("../img/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("../img/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("../img/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;
}
}
}
}
}
}
}

View File

@ -0,0 +1,253 @@
<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>${channel.title} - ${site.title}</title>
<meta name="keywords" content="${channel.seoKeywords}">
<meta name="description" content="${channel.seoDescription}">
<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>
[#include 'inc_meta.html'/]
[#include 'inc_css.html'/]
[#include 'inc_js.html'/]
</head>
<body>
[#include 'inc_header.html'/]
<div class="solution_container1">
<div class="banner">
<div class="banner_main">
<h2>企业安全生产</h2>
<p >结合企业安全生产管理物联监测、个性化业务场景等需求为企业量身定制的解决方案</p>
</div>
</div>
<div class="block1">
<div class="block1_main">
<div class="title">安全生产数智化管理平台</div>
<div class="s_img1">
<img src="${'${files}/img/solution_img1.png'}" alt="${site.name}">
</div>
<div class="block1_mid">
<div class="top">
<div class="item">
<img src="${'${files}/img/solution_img4.png'}" alt="${site.name}">
<span>一个大屏</span>
</div>
<div class="item">
<img src="${'${files}/img/solution_img4.png'}" alt="${site.name}">
<span>3个体系</span>
</div>
<div class="item">
<img src="${'${files}/img/solution_img4.png'}" alt="${site.name}">
<span>多个建设方案</span>
</div>
</div>
<div class="block1_wrap">
<div class="info">
<div class="title">数智化大屏</div>
<div class="s_title">可视化管理突出重点要素,紧盯异常情况实现"千企千面"</div>
<div class="main">
<p>
<img src="${'${files}/img/solution_img10.png'}" alt="${site.name}">
<span>集团管理的重点内容,及时呈现,实时更新;</span>
</p>
<p>
<img src="${'${files}/img/solution_img10.png'}" alt="${site.name}">
<span>集团管理的重点内容,及时呈现,实时更新;</span>
</p>
<p>
<img src="${'${files}/img/solution_img10.png'}" alt="${site.name}">
<span>集团管理的重点内容,及时呈现,实时更新;</span>
</p>
</div>
</div>
<div class="block1_img">
<img src="${'${files}/img/solution_img9.png'}" alt="${site.name}">
</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 class="item active">
<div class="img"> <img src="${'${files}/img/solution_img15.png'}" alt="${site.name}"> </div>
<div class="title">风险辨识</div>
<div class="text">内置符合企业的风险辨识清单,勾勾选选完成风险辨识</div>
</div>
<div class="item">
<div class="img"> <img src="${'${files}/img/solution_img12.png'}" alt="${site.name}"> </div>
<div class="title">风险辨识</div>
<div class="text">内置符合企业的风险辨识清单,勾勾选选完成风险辨识</div>
</div>
<div class="item">
<div class="img"> <img src="${'${files}/img/solution_img13.png'}" alt="${site.name}"> </div>
<div class="title">风险辨识</div>
<div class="text">内置符合企业的风险辨识清单,勾勾选选完成风险辨识</div>
</div>
<div class="item">
<div class="img"> <img src="${'${files}/img/solution_img14.png'}" alt="${site.name}"> </div>
<div class="title">风险辨识</div>
<div class="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="${'${files}/img/img8.png'}" alt="${site.name}">
</div>
<div class="title">政府机构</div>
<div class="info">
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
<div class="more">
<img src="${'${files}/img/img15.png'}" alt="${site.name}">
</div>
</div>
</div>
<div class="item">
<div class="img">
<img src="${'${files}/img/img9.png'}" alt="${site.name}">
</div>
<div class="title">民爆</div>
<div class="info">
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
<div class="more">
<img src="${'${files}/img/img15.png'}" alt="${site.name}">
</div>
</div>
</div>
<div class="item">
<div class="img">
<img src="${'${files}/img/img10.png'}" alt="${site.name}">
</div>
<div class="title">机械</div>
<div class="info">
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
<div class="more">
<img src="${'${files}/img/img15.png'}" alt="${site.name}">
</div>
</div>
</div>
<div class="item">
<div class="img">
<img src="${'${files}/img/img11.png'}" alt="${site.name}">
</div>
<div class="title">军工</div>
<div class="info">
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
<div class="more">
<img src="${'${files}/img/img15.png'}" alt="${site.name}">
</div>
</div>
</div>
<div class="item">
<div class="img">
<img src="${'${files}/img/img16.png'}" alt="${site.name}">
</div>
<div class="title">水务</div>
<div class="info">
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
<div class="more">
<img src="${'${files}/img/img15.png'}" alt="${site.name}">
</div>
</div>
</div>
<div class="item">
<div class="img">
<img src="${'${files}/img/img12.png'}" alt="${site.name}">
</div>
<div class="title">农牧</div>
<div class="info">
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
<div class="more">
<img src="${'${files}/img/img15.png'}" alt="${site.name}">
</div>
</div>
</div>
<div class="item">
<div class="img">
<img src="${'${files}/img/img13.png'}" alt="${site.name}">
</div>
<div class="title">风电</div>
<div class="info">
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
<div class="more">
<img src="${'${files}/img/img15.png'}" alt="${site.name}">
</div>
</div>
</div>
<div class="item">
<div class="img">
<img src="${'${files}/img/img14.png'}" alt="${site.name}">
</div>
<div class="title">其他</div>
<div class="info">
<div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
<div class="more">
<img src="${'${files}/img/img15.png'}" alt="${site.name}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="bg-gray-200">-->
<!-- <div class="container">-->
<!-- <nav class="row" aria-label="breadcrumb">-->
<!-- <ol class="col list-inline my-2">-->
<!-- <li class="list-inline-item"><a href="${site.url}">首页</a></li>-->
<!-- [#list channel.paths as c]-->
<!-- <li class="list-inline-item">/</li>-->
<!-- <li class="list-inline-item">[@A bean=c/]</li>-->
<!-- [/#list]-->
<!-- </ol>-->
<!-- </nav>-->
<!-- </div>-->
<!--</div>-->
<!--<div class="container mt-4">-->
<!-- <div class="main">-->
<!-- [#assign parent = channel.parent!channel/]-->
<!-- [@ChannelList parentId=parent.id isNav='true'; list]-->
<!-- [#list list as bean]-->
<!-- <div class="list [#if channel.id == bean.id]active[#else][/#if]"><a href="${bean.url}">${bean.name}</a></div>-->
<!-- [/#list]-->
<!-- [/@ChannelList]-->
<!-- </div>-->
<!-- <div class="row">-->
<!-- <div class="col-lg-12">-->
<!-- <h3 class="cm-ff-yh">${channel.name}2343</h3>-->
<!-- <div class="mt-4 article-content">[#noescape]${channel.text!}[/#noescape]</div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
[#include 'inc_footer.html'/]
<script>axios.get('${api}/channel/view/${channel.id?c}');</script>
</body>
</html>
[/#escape]

View File

@ -43,19 +43,10 @@
</div> </div>
[#include 'inc_page.html'/] [#include 'inc_page.html'/]
[/@ArticlePage] [/@ArticlePage]
</div> </div>
</div> </div>
</div> </div>
[#include 'inc_footer.html'/] [#include 'inc_footer.html'/]
<script>axios.get('${api}/channel/view/${channel.id?c}');</script> <script>axios.get('${api}/channel/view/${channel.id?c}');</script>
</body> </body>