<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>珍岛集团 <?php echo e($data['title']); ?></title>
	<meta name="Keywords" content="SaaS级智能营销云平台<?php echo e($data['keywords']); ?>"/>
	<meta name="Description"
		  content="珍岛集团成立于2005年，秉承整合数字资源,技术驱动营销的理念,专注于数字营销技术、产品、资源、服务的创新与整合 <?php echo e($data['description']); ?>"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="shortcut icon" href="images/favicon.ico">
    
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="css/photo.css"/>

	<!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/r29/html5.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style type="text/css">
    	.photo {
    		margin: 20px 0 0 0;
    		width: 98%;
    		padding: 0;
    	}
    	.photo li {
    		margin-bottom: 20px;
    		text-align: center;
    	}
	</style>

</head>
<body>
	<ul id="lightgallery" class="photo list-unstyled">
		<li data-src="images/pic-01.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-01.jpg" width="100%" class="vcenter"></a>
		</li>
		<li data-src="images/pic-02.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-02.jpg" width="100%"></a>
		</li>
		<li data-src="images/pic-03.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-03.jpg"  width="100%"></a>
		</li>
		<li data-src="images/pic-01.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-01.jpg" width="100%" class="vcenter"></a>
		</li>
		<li data-src="images/pic-02.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-02.jpg" width="100%"></a>
		</li>
		<li data-src="images/pic-03.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-03.jpg"  width="100%"></a>
		</li>
		<li data-src="images/pic-01.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-01.jpg" width="100%" class="vcenter"></a>
		</li>
		<li data-src="images/pic-02.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-02.jpg" width="100%"></a>
		</li>
		<li data-src="images/pic-03.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-03.jpg"  width="100%"></a>
		</li>
		<li data-src="images/pic-01.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-01.jpg" width="100%" class="vcenter"></a>
		</li>
		<li data-src="images/pic-02.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-02.jpg" width="100%"></a>
		</li>
		<li data-src="images/pic-03.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-03.jpg"  width="100%"></a>
		</li>
		<li data-src="images/banner3.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/banner3.jpg"  width="100%" class="vcenter"></a>
		</li>
		<li data-src="images/pic-01.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-01.jpg" width="100%" class="vcenter"></a>
		</li>
		<li data-src="images/pic-02.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-02.jpg" width="100%"></a>
		</li>
		<li data-src="images/pic-03.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-03.jpg"  width="100%"></a>
		</li>
		<li data-src="images/pic-01.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-01.jpg" width="100%" class="vcenter"></a>
		</li>
		<li data-src="images/pic-02.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-02.jpg" width="100%"></a>
		</li>
		<li data-src="images/pic-03.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-03.jpg"  width="100%"></a>
		</li>
		<li data-src="images/pic-01.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-01.jpg" width="100%" class="vcenter"></a>
		</li>
		<li data-src="images/pic-02.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-02.jpg" width="100%"></a>
		</li>
		<li data-src="images/pic-03.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-03.jpg"  width="100%"></a>
		</li>
		<li data-src="images/pic-01.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-01.jpg" width="100%" class="vcenter"></a>
		</li>
		<li data-src="images/pic-02.jpg" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
			<a href=""><img src="images/pic-02.jpg" width="100%"></a>
		</li>
	</ul>
	
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    
    <!--瀑布流-->
    <script src="js/masonry.pkgd.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(window).load(function(){
			$('#lightgallery').masonry({
				itemSelector: 'li',
			});
		})
    </script>
       
    <!--相册-->   
    <script src="js/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/lightgallery-all.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/lg-thumbnail.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/lg-fullscreen.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
	    $(document).ready(function() {
	        $("#lightgallery").lightGallery(); 
	    });
	</script>

	<script src="/static/plugins/jquery/jquery.js"></script>
	<?php if($data['open_bd'] == 1): ?>
		<script>
            let bd_image = "<?php echo e($data['bd_image']); ?>",
                bd_link = "<?php echo e($data['bd_link']); ?>";
		</script>
		<script src="/static/js/bd.js"></script>
	<?php endif; ?>
	<style>
		.nico {
			position: fixed;
			top: 10px;
			right: 0;
			bottom: 0;
			z-index: 10000;
			width: 400px;
			height: 500px;
			border: 0;
			background-color: #fff;
			box-shadow: 0 0 0 4px lightseagreen
		}

		.nico * {
			padding: 0;
			margin: 0;
		}

		.news_wrap {
			position: relative;
			height: 500px;
		}

		.news_wrap li {
			position: relative;
			padding-left: 10px;
			list-style-type: none;
			display: block;
			width: 380px;
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid grey
		}

		.news_wrap li > span {
			display: block;
			width: 300px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 100%;
			line-height: 40px;
		}

		.news_wrap li > i {
			position: absolute;
			width: 80px;
			font-size: .5rem;
			top: 0;
			right: 0;
		}

		.page-btn {
			position: absolute;
			width: 100%;
			height: 70px;
			bottom: 0;
		}

		.page-btn li {
			font-size: .8rem;
			padding: 0 !important;
			margin-left: 2px;
			list-style-type: none;
			display: inline-block;
			width: 15px;
			height: 15px;
			line-height: 15px;
			text-align: center;
			border: 1px solid grey;
			cursor: pointer;
		}

		.clicked {
			background-color: #0c5460;
			color: #fff;
		}
	</style>
	<div class="nico">
		<div class="news_wrap">
			<ul>
				<?php foreach($data['list'][0] as $vo): ?>
					<li style="border-bottom: 1px solid #ccc;">
                <span><a style="text-decoration: none;color:#000" href="detail/<?php echo e(pathinfo($vo,PATHINFO_BASENAME)); ?>"
						 target="_blank"><?php echo e($data['titles'][rtrim(pathinfo($vo,PATHINFO_BASENAME),'.html')]); ?></a></span>
						<i><?php echo e(Date('Y/m/d',strtotime($data['times'][rtrim(pathinfo($vo,PATHINFO_BASENAME),'.html')]))); ?></i>
					</li>
				<?php endforeach; ?>
			</ul>
			<div class="page-btn">
				<ul>
					<?php foreach($data['list'] as $key => $vo): ?>
						<li class="pg-li <?php echo e($key ?'':'clicked'); ?>"><?php echo e($key + 1); ?></li>
					<?php endforeach; ?>
				</ul>
			</div>
		</div>
	</div>
	<script>
        let list = JSON.parse("<?php echo e(json_encode($data['list'])); ?>".replace(/&quot;/g, '"')),
            titles = JSON.parse("<?php echo e(json_encode($data['titles'])); ?>".replace(/&quot;/g, '"')),
            times = JSON.parse("<?php echo e(json_encode($data['times'])); ?>".replace(/&quot;/g, '"'));
        $('.pg-li').click(function () {
            $(this).addClass('clicked').siblings().removeClass('clicked');
            let p = ($(this).text() - 1) | 0,
                data = list[p];
            $('.news_wrap > ul').html(function () {
                let html = '';
                $(data).each(function (x, y) {
                    let id = y.match(/(\d+)\.html/)[1],
                        time = times[id].split(' ')[0].replace('-', '/');
                    html += '<li style="border-bottom: 1px solid #ccc;"><span><a style="text-decoration: none;color:#000" href="detail/' + id + '.html" target="_blank">' + titles[id] + '</a></span> <i>' + time + '</i></li>';
                });
                return html;
            });
        });
	</script>
</body>
</html>
