	<div class="icon-alert">
		<h1 class="details-tit icon-alert-tit">图标库<i class="alert-close"></i></h1>
		<div class="type-box">
			<p class="icon-type">类型</p>
			<ul class="icon-type-list">
				<li><a href="#">全部</a></li>
				<li><a href="#">常规</a></li>
				<li><a href="#">购物</a></li>
				<li><a href="#">交通</a></li>
				<li><a href="#">食物</a></li>
				<li><a href="#">娱乐</a></li>
				<li><a href="#">美妆</a></li>
			</ul>
		</div>
		<ul class="icon-list">
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/loginbg.jpg" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/loginbg.jpg" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/loginbg.jpg" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/loginbg.jpg" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/loginbg.jpg" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/loginbg.jpg" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/loginbg.jpg" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/loginbg.jpg" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="__PUBLIC__/admin/images/picbg.png" alt="" class="icon-img"/>
					<p class="size-cover"></p>
					<p class="side-word">100*100</p>
				</a>
			</li>
		</ul>
		<div class="pagination boxsizing icon-page">
			<ul class="page-list">
				<li class="first-pagenation"><i class="first-icon"></i></li>
				<li class="prev-pagenation"><i class="prev-icon"></i></li>
				<li class="now-pagenation"><input type="text" value="1" class="now-inp radius3"/></li>
				<li class="all-pagenation">6页</li>
				<li class="next-pagenation"><i class="next-icon"></i></li>
				<li class="last-pagenation"><i class="last-icon"></li>
			</ul>
		</div>
		<div class="btn-box-center">
			<input type="button" class="btn1 radius3" value="确认">
			
		</div>
	</div>
	<div class="icon-cover"></div>
	


<script type="text/javascript">
	$(function(){
		$('.icon-type-list li a').bind('click',function(){
			 $(this).addClass("green-font2").parent().siblings().find("a").removeClass("green-font2"); 
		});
		$('.icon-list li').bind('click',function(){
			$(this).addClass('green-border');
			var	typeIcon = "<i class='type-icon'></i>";
			$(this).children('a').append(typeIcon);
			$(this).siblings().find('.type-icon').remove();
			$(this).siblings().removeClass('green-border');
		});
		$('.alert-close').bind('click',function(){
			$(this).parents('.icon-alert').hide();
			$('.icon-cover').hide();
		})
	})
</script>