xuchaoqing
/
fastadmin_materials_official


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
							
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
        <meta name="renderer" content="webkit">
        <meta name="keywords" content="{:__lm($navCur,'keywords')}"/>
        <meta name="description" content="{:__lm($navCur,'description')}"/>
        <title>{:__lm($navCur,'seotitle')} - {$site.site_name}</title>
        <link rel="shortcut icon" href="{$site.logo|cdnurl}">
        <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/reset.css">
        <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/style.css">
        <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/swiper.min.css">
        <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/animate.min.css">
        <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/media.css">
        <script type="text/javascript" src="__CDN__/assets/addons/material/js/jquery.min.js"></script>
        <script type="text/javascript" src="__CDN__/assets/addons/material/js/swiper.min.js"></script>
        <script type="text/javascript" src="__CDN__/assets/addons/material/js/swiper.animate1.0.3.min.js"></script>
        <script type="text/javascript" src="__CDN__/assets/addons/material/js/wow.js"></script>
        <script type="text/javascript" src="__CDN__/assets/addons/material/js/jquery.counterup.min.js"></script>
        <script type="text/javascript" src="__CDN__/assets/addons/material/js/jquery.waypoints.min.js"></script>
        <script type="text/javascript" src="__CDN__/assets/addons/material/js/javascript.js"></script>
        <style>
            /* 工程案例布局 */
            .projects-container {
                display: flex;
                flex-wrap: wrap;
                margin-right: -30px; /* 抵消最右侧项目的右间距 */
            }
            
            .project-item {
                width: 380px;
                margin-right: 30px; /* 右间距30px */
                margin-bottom: 60px; /* 底部间距60px */
            }
            
            .project-image {
                width: 100%;
                height: 440px; /* 固定高度440px */
                overflow: hidden;
                position: relative;
                border-radius: 4px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            }
            
            .project-image img {
                width: 100%;
                height: 100%;
                object-fit: cover; /* 确保图片填充整个区域 */
                transition: transform 0.5s ease;
            }
            
            .project-item:hover .project-image img {
                transform: scale(1.05); /* 悬停时图片放大效果 */
            }
            
            /* 播放按钮样式 */
            .play-button {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 60px;
                height: 60px;
                cursor: pointer;
                z-index: 10;
                transition: transform 0.3s ease;
            }
            
            .play-button:hover {
                transform: translate(-50%, -50%) scale(1.1);
            }
            
            .play-button img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            
            /* 项目信息样式 */
            .project-info {
                padding-top: 30px; /* 上边距30px */
                padding-bottom: 0; /* 底部边距由project-item的margin-bottom控制 */
                text-align: center; /* 文字居中 */
            }
            
            .project-title {
                font-size: 20px; /* 字体大小20px */
                font-weight: 500; /* 字体粗细500 */
                color: #2E3033; /* 文字颜色#2E3033 */
                margin-bottom: 0; /* 移除底部边距 */
                line-height: 1.4; /* 行高 */
            }
            
            .project-desc {
                font-size: 14px;
                color: #666;
                line-height: 1.5;
            }
            .play-btn {
                display: block;
                position: absolute;
                width: 66px;
                height: 66px;
                left: 50%;
                top: 50%;
                margin: -27px 0 0 -27px;
                z-index: 20;
            }

            .play-btn i {
                position: relative;
                display: block;
                width: 66px;
                height: 66px;
                background: #DF0100 url("__CDN__/assets/addons/material/images/play.svg") center no-repeat;
                background-size: 35%;
                border-radius: 100%;
                z-index: 2;
            }

            .play-btn i:hover {
                background: #404040 url("__CDN__/assets/addons/material/images/play.svg") center no-repeat;
                background-size: 35%;
            }
        </style>
</head>
<body>
<!-- 头部 -->
{include file="header" /}
<!-- 栏目Banner -->

<div class="col-banner">
    <div class="section-banner">
        <img src="{$site.banner2|cdnurl}" alt="">
    </div>
    <div class="section-header wow fadeInUp" data-wow-delay="0.3s">
        <p>PROJECT CASE</p>
        <h2>{$site.ban2_t1}</h2>
    </div>
</div>
<!-- 内容 -->

<div class="container">
    <div class="projects-container">
        <!-- 工程案例项目1（带视频） -->
        {volist name="archives" id="v"}
            <div class="project-item wow fadeInUp" data-wow-delay="0.5s">
                <div class="project-image">
                    <img src="{$v.image|cdnurl}" alt="">
                    <!-- <div class="play-button">
                        <img src="images/projects/play-icon.png" alt="播放">
                    </div> -->
                    {if condition="empty($v.video) neq true"}
                    <a href="javascript:;" class="play-btn m-video" data-src="{$v.video|cdnurl}"><i></i></a>
                    {/if}
                </div>
                <div class="project-info">
                    <h3>{$v.title}</h3>
                    <!-- <p>一个标志性的商务大厦项目，采用我司高强度混凝土，提供卓越的结构稳定性和安全性。</p> -->
                </div>
            </div>
        {/volist}   
    </div>
    <div class="fenye wow fadeInUp" data-wow-delay="0.6s">{$lbPage}</div>
</div>

<!-- 底部 -->
{include file="footer" /}
<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/material/css/video.css">
<script type='text/javascript' src="__CDN__/assets/addons/material/js/video.js"></script>
</body>
</html>