File: /www/wwwroot/www.scdc-marine.com/wp-content/themes/scdc-marine/TempParts/Page/page-projects.php
<?php
/**
* 文章内容页 调用模板，上层 <ul> 标签：
*
*
*/
?>
<div id="page_project_line">
<div class="index-title container wow slideInUp animated">
<span class="a">解决方案</span>
<span class="c"></span>
</div>
<div class="container ">
<div class="page-project-main">
<div class="project-item-ul row">
<div class="project-item-li heku-box">
<a href="/projects/project-311">
<div class="project-item-img">
<img class="news-img" src="https://www.zc-sensor.com/wp-content/uploads/project-302-6.jpg" alt="物联网倾斜监测解决方案 ">
</div>
<div class="project-item-box">
<div class="project-item-text">
<div class="project-item-title">物联网倾斜监测解决方案</div>
<div class="project-item-content">响应国家道路机械化清扫需求，徐工提供成套化、专业化养护清洁方案，可根据道路实际状况灵活配置道路清扫、洗扫、扫路、清洗设备...</div>
<div class="read-more"><span class="read-more-span">了解更多</span><i class="icon font_family icon-right"></i></div>
</div>
</div>
</a>
</div>
<div class="project-item-li heku-box">
<a href="/projects/project-311">
<div class="project-item-img">
<img class="news-img" src="https://www.zc-sensor.com/wp-content/uploads/project-302-6.jpg" alt="物联网倾斜监测解决方案 ">
</div>
<div class="project-item-box">
<div class="project-item-text">
<div class="project-item-title">物联网倾斜监测解决方案</div>
<div class="project-item-content">响应国家道路机械化清扫需求，徐工提供成套化、专业化养护清洁方案，可根据道路实际状况灵活配置道路清扫、洗扫、扫路、清洗设备...</div>
<div class="read-more"><span class="read-more-span">了解更多</span><i class="icon font_family icon-right"></i></div>
</div>
</div>
</a>
</div>
<div class="project-item-li heku-box">
<a href="/projects/project-312">
<div class="project-item-img">
<img class="news-img" src="https://www.zc-sensor.com/wp-content/uploads/project-312-1.jpg" alt="直川科技产品在工程机械中得到广泛应用 "> </div>
<div class="project-item-box">
<div class="project-item-text">
<div class="project-item-title">直川科技产品在工程机械中得到广泛应用</div>
<div class="project-item-content">响应国家道路机械化清扫需求，徐工提供成套化、专业化养护清洁方案，可根据道路实际状况灵活配置道路清扫、洗扫、扫路、清洗设备...</div>
<div class="read-more"><span class="read-more-span">了解更多</span><i class="icon font_family icon-right"></i></div>
</div>
</div>
</a>
</div>
<div class="project-item-li heku-box">
<a href="/projects/project-307">
<div class="project-item-img">
<img class="news-img" src="https://www.zc-sensor.com/wp-content/uploads/project-307-4.jpg" alt="建筑基坑、边坡、隧道安全监测 "> </div>
<div class="project-item-box">
<div class="project-item-text">
<div class="project-item-title">建筑基坑、边坡、隧道安全监测</div>
<div class="project-item-content">响应国家道路机械化清扫需求，徐工提供成套化、专业化养护清洁方案，可根据道路实际状况灵活配置道路清扫、洗扫、扫路、清洗设备...</div>
<div class="read-more"><span class="read-more-span">了解更多</span><i class="icon font_family icon-right"></i></div>
</div>
</div>
</a>
</div>
<div class="project-item-li heku-box">
<div class="index-project-item">
<a href="/projects/project-309">
<div class="cat_img project-item-img">
<img class="news-img" src="https://www.zc-sensor.com/wp-content/uploads/project-309-3.jpg" alt="电力铁塔倾斜监测 "> </div>
<div class="project-item-box">
<div class="project-item-text">
<div class="project-item-title">电力铁塔倾斜监测</div>
<div class="read-more"><span class="read-more-span">了解更多</span><i class="fa fa-angle-right"></i></div>
</div>
</div>
</a>
</div>
</div>
<div class="project-item-li heku-box">
<div class="index-project-item">
<a href="/projects/project-302">
<div class="cat_img project-item-img">
<img class="news-img" src="https://www.zc-sensor.com/wp-content/uploads/project-302-1-1.jpg" alt="智能货架安全监测系统 "> </div>
<div class="project-item-box">
<div class="project-item-text">
<div class="project-item-title">智能货架安全监测系统</div>
<div class="read-more"><span class="read-more-span">了解更多</span><i class="fa fa-angle-right"></i></div>
</div>
</div>
</a>
</div>
</div>
<div class="project-item-li heku-box">
<div class="index-project-item">
<a href="/projects/project-299">
<div class="cat_img project-item-img">
<img class="news-img" src="https://www.zc-sensor.com/wp-content/uploads/project-299-2.jpg" alt="太阳能光伏发电跟踪系统 "> </div>
<div class="project-item-box">
<div class="project-item-text">
<div class="project-item-title">太阳能光伏发电跟踪系统</div>
<div class="read-more"><span class="read-more-span">了解更多</span><i class="fa fa-angle-right"></i></div>
</div>
</div>
</a>
</div>
</div>
<div class="project-item-li heku-box">
<div class="index-project-item">
<div class="cat_img project-item-img">
<img class="news-img" src="https://www.zc-sensor.com/wp-content/uploads/index-project-1.jpg" alt="桥梁监测 "> </div>
<div class="project-item-box">
<div class="project-item-text">
<div class="project-item-title">桥梁监测</div>
<div class="read-more"><span class="read-more-span">了解更多</span><i class="fa fa-angle-right"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* ----------------------------------------------------
21) start #single_bar_line 10-20 å…¬å…±æ ·å¼ é¦–é¡µæ ‡é¢˜ æ ·å¼
------------------------------------------------------- */
.index-title {text-align: center;}
.index-title span{display:block;padding: 0px 0;}
.index-title span.a{font-size: 24px;font-weight: 600;letter-spacing: 4px;}
.index-title span.a::after{height: 3px;content: " ";background: #235bb8;position: absolute;width: 0%;margin-left: -28%}
.index-title span.b{line-height: 18px;font-size: 16px;padding: 0px;display: none;}
.index-title span.c{height: 3px;background: #235bb8;position: relative;width: 30px;padding: 0px;display: inline-block;margin: 8px;}
.index-title span.a{color:#374353;}
.index-title span.b{color:#638cd0;}
.index-title .b span{display: inline-block;font-weight: bold;padding: 0 5px;color: #235bb8;}
.index-title:hover span.c{width: 60px;}
/* ----------------------------------------------------
23) start #about_index_line 20-30 首页cssæ ·å¼ é¦–é¡µè§£å†³æ–¹æ¡ˆ
------------------------------------------------------- */
/* #index_project_line{ background: #d6e5ff; } */
#page_project_line{}
.project-item-img img{width:100%;-moz-transition:all .8s ease 0s;-ms-transition:all .8s ease 0s;-o-transition:all .8s ease 0s;-webkit-transition:all .8s ease 0s;transition:all .8s ease 0s;}
.project-item-ul{}
.project-item-li{width:31%;position:relative;margin:1%;overflow:hidden;border-radius:8px;height:425px;}
.project-item-li:first-child{width:64%;}
.project-item-li:first-child .project-item-img{height:auto;}
.project-item-li:first-child .project-item-box{height:auto;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),color-stop(40%,rgba(0,0,0,0.7)));background:linear-gradient(rgb(0 0 0 / 5%) 0%,rgb(0 0 0 / 70%) 40%);width:100%;position:absolute;-webkit-transition:all 0.5s;transition:all 0.5s;z-index:4;padding:15px 20px 15px 25px;bottom:0px;}
.project-item-li:first-child .project-item-box .project-item-text{height:auto;color:var(--background);position:relative;text-align:left;-webkit-transition:all 0.5s;transition:all 0.5s;z-index:4;bottom:-10px;font-size:14px;}
.project-item-li:first-child .project-item-box .project-item-text .project-item-content{opacity:0.6;}
.project-item-li .project-item-img{overflow:hidden;height: 54%;}
.project-item-li .project-item-box{width:100%;height:46%;position:absolute;padding:15px 20px 15px 25px;bottom:0px;}
.project-item-li .project-item-box .project-item-text{color:var(--forecolor);height:auto;position:relative;text-align:left;-webkit-transition:all 0.5s;transition:all 0.5s;z-index:4;bottom:-5px;font-size:14px;}
.project-item-li .project-item-box .project-item-text .project-item-title{font-size:24px;font-weight:bold;letter-spacing:2px;line-height:32px;padding:15px 0;}
.project-item-li .project-item-box .project-item-text .project-item-content{padding-bottom:8px;opacity: 0.6;}
.project-item-li .project-item-box .project-item-text .read-more{opacity:0;-webkit-transition:all 0.5s;transition:all 0.5s;font-size:16px;vertical-align:middle;}
.project-item-li .project-item-box .project-item-text .read-more .read-more-span{line-height:20px;vertical-align:middle;}
.project-item-li .project-item-box .project-item-text .read-more i{padding-left:6px;font-size:15px;-webkit-transition:all 0.2s;transition:all 0.2s;color:#2476ff;vertical-align:middle;}
.project-item-li .project-item-box .project-item-text .read-more:hover i{padding-left:12px;font-weight:bold;}
.project-item-li:hover {box-shadow: 0px 0px 10px 2px #235bb8;}
.project-item-li:hover .project-item-img img{-moz-transform: scale(1.2,1.2);-ms-transform: scale(1.2,1.2);-o-transform: scale(1.2,1.2);-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);}
.project-item-li:hover .project-item-box .project-item-text{bottom: 5px;}
.project-item-li:hover .project-item-box .read-more{visibility: visible;opacity: 1;}
.project-item-li:hover .project-item-box .project-item-text .project-item-content{opacity:0.8;}
/* --- 1) 小于780尺寸时候使用 手机 mobile --- */
@media(max-width:576px){
.project-item-li{width:88%;position:relative;margin:6%;overflow:hidden;border-radius:8px;height:425px;}
.project-item-li:first-child{width:46%;}
}
@media(min-width:576px){
.project-item-li{width:46%;position:relative;margin:2%;overflow:hidden;border-radius:8px;height:425px;}
.project-item-li:first-child{width:46%;}
}
/* --- 2) 大于768px尺寸 min --- */
@media(min-width:768px){
.project-item-li{width:92%;position:relative;margin:4%;overflow:hidden;border-radius:8px;height:425px;}
.project-item-li:first-child{width:46%;}
}
/* --- 3) 大于992px尺寸 mid --- */
@media(min-width:992px){
.project-item-li{width:46%;position:relative;margin:2%;overflow:hidden;border-radius:8px;height:425px;}
.project-item-li:first-child{width:46%;}
}
/* --- 4) 大于1200尺寸时候使用 max --- */
@media(min-width:1200px){
.project-item-li{width:31%;position:relative;margin:1%;overflow:hidden;border-radius:8px;height:425px;}
.project-item-li:first-child{width:64%;}
}
/* ----------------------------------------------------
23) end #about_index_line 20-30 首页cssæ ·å¼ é¦–é¡µè§£å†³æ–¹æ¡ˆ
------------------------------------------------------- */
</style>
<?php
?>