{extend name="$index_style_layout" /}

<!--SEO相关-->
{block name="head_title"}{$webdb.mseo_title?:$webdb.seo_title}{/block}
{block name="head_keword"}{$webdb.mseo_keyword?:$webdb.seo_keyword}{/block}
{block name="head_description"}{$webdb.mseo_description?:$webdb.seo_description}{/block}
{block name="body_content"}
<link rel="stylesheet" href="__STATIC__/group/vip.css?9">
<!--分类开始-->
<style type="text/css">
.MainMenu{
	margin-top:8px;
	background: #FFF;
	padding: 15px 10px;
}
.MainMenu ul:after{
	content: '';
	display:block;
	clear: both;
}
.MainMenu ul li{
	width:25%;
	float: left;
	overflow: hidden;
	position: relative;
	margin-bottom:5px;
}
.MainMenu ul li span,.MainMenu ul li em{
	display: block;
	width:60px;
	overflow: hidden;
	margin: auto;
	text-align: center;
	position: relative;
}
.MainMenu ul li span{
	border-radius: 50%;
	background: #23C075;
	color: #FFF;
}
.MainMenu ul li em{
	height: 20px;
	overflow: hidden;
	font-size:14px;
}
.MainMenu ul li:nth-child(2) span{
	background: #F90;
}
.MainMenu ul li:nth-child(3) span{
	background: #B01FE0;
}
.MainMenu ul li:nth-child(4) span{
	background: #133CD7;
}
.MainMenu ul li span:before{
	content: '';
	display: block;
	padding-top: 100%;
}
.MainMenu ul li span i{
	position: absolute;
	left:50%;
	top: 50%;
	font-size:30px;
  -webkit-transform: translate3D(-50%, -50%, 0);
      -ms-transform: translate3D(-50%, -50%, 0);
          transform: translate3D(-50%, -50%, 0);
}
.sort_button{
	width:100%;
}
.sort_button .swiper-pagination{
	bottom:0px !important;
}
</style>
<!-- 滑动按钮要用到的CSS与JS文件,他涉及到三个class类 swiper-container swiper-wrapper swiper-slide -->
<link href="__STATIC__/libs/swiper/swiper.min.css" rel="stylesheet">
<script src="__STATIC__/libs/swiper/swiper.min.js"></script>
<script>
    $(function () {
        var swiper = new Swiper('.sort_button', {
			autoplay: {
				delay: 2000,
			 },
			pagination: {
				el: '.swiper-pagination', 
			},
        });
    })
</script>
<div class="MainMenu">
		<ul>
			<div class="swiper-container sort_button">
					<div class="swiper-wrapper">
<!--每行4个,可以把4改成8即变成两行-->
{volist name=":array_chunk(sort_config('',0),4,true)" id="array"}
<div class="swiper-slide">
{volist name="$array" id="name"}
						<li><a href="{:urls('content/index',['fid'=>$key])}"><span><i class="{$key|get_sort='logo'|default='fa fa-leaf'}"></i></span><em>{$name}</em></a></li>
{/volist}
</div>
{/volist}
					</div>
					<div class="swiper-pagination"></div>
			</div>
		</ul>
</div>
<!--分类结束 -->

<style type="text/css">
.qun_main_btn{
	background:#fff;
	height:80px;
	margin-top:12px;
}
.qun_main_btn li{
	height:40px;
	background:#309DF2;
	color:#fff;
	margin-left:8px;
	margin-right:8px;
	line-height:40px;
	font-size:15px;
	padding-left:10px;
	padding-right:10px;
	border-radius:5px;
	margin-top:20px;
}
.qun_main_btn li:nth-child(2){
	background:orange;
}
.qun_main_btn li:nth-child(3){
	background:#41CD9E;
}
.qun_main_btn li:nth-child(4){
	background:#EE5C5B;
}
.qun_main_btn li a{
	color:#fff;
	font-size:15px;
}
.menu-button .swiper-slide{width: auto!important;}	/*滑动按钮必须的设置,其中swiper-slide类名不能更换*/
</style>
<script>
    $(function () {
        var swiper = new Swiper('.menu-button', {
            spaceBetween: 0,
            slidesPerView:'auto',
            freeMode: true
        });
    })
</script>
		  
<style type="text/css">
.auto-roll{
	height:35px;
	overflow:hidden;
	background:#fff;
	margin-top:10px;
}
.auto-roll li{
	padding-left:8px;
	line-height:35px;
}
.auto-roll li i:nth-child(1){
	color:orange;
	margin-right:7px;
}
.auto-roll li a{
	color:orange;
}
</style>
	<div class="auto-roll">
		<ul class="qun_wapindex_r001">
			{qb:tag name="qun_wapindex_r001" type="weibo" order="id" by="desc" rows="5" js="qun_wapindex_r001"}
			<li><i class="fa fa-volume-up"></i>恭喜<a href="{$rs.url}">{$rs.title}</a>开通微博</li>
			{/qb:tag}
		</ul>
	</div>
<script type="text/javascript"> 
    function autoScroll(obj){  
		$(obj).find("ul").animate({  
			marginTop : "-35px"  
		},1000,function(){  
			$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
		})  
	}  
	$(function(){ 
		var scroll=setInterval('autoScroll(".auto-roll")',2500);
         $(".auto-roll").hover(function(){
            console.log("aaa");
            clearInterval(scroll);
         },function(){
            scroll=setInterval('autoScroll(".auto-roll")',2500);
         });
	}); 
</script> 
<!--滚动结束-->
 {include file="signin"}
<script>
    $(function () {
        var swiper = new Swiper('.qun_roll', {
			autoplay: {
				delay: 2500,
			 },
			pagination: {
				el: '.swiper-pagination', 
			},
        });
    })
</script>
<style type="text/css">
.qun_roll .swiper-pagination{
	bottom:0px !important;
}
.qun_roll .swiper-pagination-bullet-active{
	background:orange !important;
}
</style>
  
  

  <div class="HotGroupBox">
		<div class="head">热门微博</div>
		<div id="ListGroup" class="swiper-container qun_roll">
			<ul class="swiper-wrapper qun_wapindex001">
				{qb:tag name="qun_wapindex001" type="weibo" order="list" by="desc" rows="15" val="listdb"}
					{volist name=":array_chunk($listdb,3,true)" id="array"}
				<div class="swiper-slide">
					{volist name="$array" id="rs"}
					<li><a href="{$rs.url}"><span style="position:relative;">{if $rs.status==2}<img src="__STATIC__/group/v.png" style="position:absolute;bottom:0px;right:20px;width:20px;height:20px;z-index:9;">{/if}<img src="{$rs.user_icon}" onerror="this.src='__STATIC__/images/nopic.png'"></span><em>{$rs.title}</em></a>
				</li>	
					{/volist}
				</div>
					{/volist}
				{/qb:tag}
			</ul>
			<div class="swiper-pagination"></div>
		</div>
	</div>
	<div class="MainAction">
		<ul>
			<ol><a href="{:urls('content/show','id='.$userdb.uid)}"><i class="fa fa-object-ungroup"></i> 我的微博</a></ol>
			<li><a href="{:murl('content/postnew')}"><i class="fa fa-user-plus"></i> 创建微博</a></li>
		</ul>
	</div>
<!--各频道的数据调用-->
 <!--快速发表内容开始-->
  <link rel="stylesheet" href="/public/static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/public/static/layui/css/admin.css" media="all">
  <link rel="stylesheet" href="/public/static/layui/css/template.css" media="all">
 <div style="padding:15px;">{include file="index/quick_post"}</div>
 <!--快速发表内容结束-->

	<div class="ShowContentType">
		<div class="tags"><span class="ck">最新动态</span><span>最新主题</span><span>最新回复</span></div>
		<div class="Contents wap_weibo_index_page">
			{qb:tag name="wap_weibo_index_page" js="wap_weibo_index_page" class="app\weibo\model\Feed@getList" rows="5"}
			<div class="lists" style="border-bottom:8px solid #F5F3F3;">
				<ul>
					<li class="img"><a href="{:urls('weibo/content/show','id='.$rs.uid)}"><img src="{$rs.user_icon}" onerror="this.src='__STATIC__/images/nobody.gif'"></a></li>
					<li class="info">
						<span>{$rs.username} {$rs.time}</span>
						{if empty($rs.aid)}
							 <em>{include file="index/about"}</em>
						{else /}
							<em>在 {$rs['topic']['sys_name']} {:fun('sns@type',$rs.type)}了主题</em>
						{/if}
					</li>					 
				</ul>
				{if $rs.aid>0}
				<a href="{$rs.url}">
				<dl>
					<dt style="padding-left:10px;border-bottom:1px dotted #eee;font-size:14px;"><li class="fa fa-file-o"></li> 主题: {$rs.title|get_word=40} </dt> 
					{if $rs.content}<dt style="padding-left:10px;color:#666;font-size:14px;"><li class="fa fa-quote-left"></li>  {:get_word(del_html($rs.content),100)}</dt> {/if}
				</dl>
				</a>
						{volist name="$rs['topic']['picurls']" id="vs"}
						  		{if $i<4}<a href="{$rs.url}"><img style="height:75px;margin:5px 5px 15px 5px;" src="{$vs.picurl}"></a>{/if}
						{/volist}
				{/if}
			</div>
			{/qb:tag}
		</div>
		<!-- 论坛主题 -->
		<div class="Contents wap_weibo_toppic">
			{qb:tag name="wap_weibo_toppic" js="wap_weibo_toppic" type="bbs" rows="10"} 
			<div class="lists" style="padding:8px;border-bottom:8px solid #F5F3F3;">				 
				<a href="{$rs.url}">
					<dl>
						<dt style="padding-left:10px;font-size:14px;"><li class="fa fa-file-o"></li> 主题: {$rs.title|get_word=40} </dt> 
					</dl>
				</a>
				<div class="others">
					<span><i class="fa fa-thumbs-o-up">{$rs.agree}</i></span>
					<em><i class="fa fa-commenting-o">{$rs.replynum}</i></em> 
					<em style="float:right;">{:format_time($rs.create_time,true)}</em>
				</div>
			</div> 
			{/qb:tag}
		</div>		
		<!-- 论坛回复 -->
		<div class="Contents wap_weibo_reply">
			{qb:tag name="wap_weibo_reply" js="wap_weibo_reply" class="app\bbs\model\Reply@get_label" rows="10"}
			<div class="lists" style="padding:8px;border-bottom:8px solid #F5F3F3;">				
				<a href="{:urls('bbs/content/show','id='.$rs.aid)}">
				<dl>
					<dt style="padding-left:10px;border-bottom:1px dotted #eee;font-size:14px;"><li class="fa fa-file-o"></li> 主题: {:query('bbs_content1',['where'=>['id'=>$rs.aid],'value'=>'title'])}</dt> 
					<dt style="padding-left:10px;color:#666;font-size:14px;"><li class="fa fa-quote-left"></li>  {:get_word(del_html($rs.content),100)}</dt> 
				</dl>
				</a>
			</div>
			{/qb:tag}
		</div> 
		<!--<div class="ShowMores"><span>查看更多</span></div>-->
	</div>
</div>

<script type="text/javascript">
var ajax_url_db = ['{qb:url name="wap_weibo_index_page"/}','{qb:url name="wap_weibo_toppic"/}','{qb:url name="wap_weibo_reply"/}'];
var choose_i = 0; //选中第1项
var haveshowpage = []; //每一项,作个标志,已经已显示到第几页
//    haveshowpage[0] = 1;

//显示更多
function showMoreContent(){
	if(haveshowpage[choose_i]==undefined){
		haveshowpage[choose_i] = 1;		
	}
	haveshowpage[choose_i]++;
	var url = ajax_url_db[choose_i] + haveshowpage[choose_i];	//第几项对应的网址
	$.get(url,function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg('显示完了');
			}else{
				$('.ShowContentType .Contents').eq(choose_i).append(res.data);
				scroll_get  = true;
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}


//切换显示
function showContentType(num){
	//scroll_get  = true;
	choose_i = num;
	$('.ShowMores').off("click");	//先移除,避免重复加多次click事件
	$('.ShowMores').on("click",showMoreContent);
	$('.ShowContentType .tags span').removeClass('ck');
	$('.ShowContentType .tags span').eq(num).addClass('ck');
	$('.ShowContentType .Contents').hide();
	$('.ShowContentType .Contents').eq(num).show();
}
showContentType(0);

$('.ShowContentType .tags span').click(function(){
	var thisnum=$(this).index();
	showContentType(thisnum);
});


//滚动显示更多
var scroll_get  = true;	//做个标志,不要反反复复的加载
$(document).ready(function () {
	$(window).scroll(function () {
		if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
			scroll_get = false;
			layer.msg('内容加截中,请稍候',{time:1000});
			showMoreContent()
		}
	});

});


</script>
</div>


<!-- 微信分享 -->
{php}$share=['title'=>$webdb['mseo_keyword'],'about'=>$webdb['mseo_description'],'picurl'=>tempdir($webdb['logo'])];{/php}
{include file="index@share" /}

{/block}