{include file="home/public/header" /}
<title>凡骄娱乐-首页</title>

<style>
	
    .wrapper{overflow:hidden}
    .banner{background:#1e78eb;height:540px;padding-top: 120px;}
    .banner .page-1{width: 960px;height: 540px;margin: 0 auto;position:relative;}
    .banner .page-1 .bg{width:1288px;height: 540px;background:#1e78eb url('/static/common/img/index_bg.jpg') 0px 5px no-repeat;}
    .banner a,.banner a:hover{text-decoration: none;cursor: pointer;}
    .banner .play-btn{width: 84px;height: 84px;display: block;background:url(/static/common/img/play.png) 0 0 no-repeat;left:50%;position: absolute;top: 165px;z-index:2000;margin-left: 114px;cursor:pointer;}
    .banner .play-btn,.banner .play-close-btn{display: block;}
    .banner .play-close-btn{width:52px;height:52px;background:url(/static/common/img/close.jpg) 0 0 no-repeat;position: absolute;right:0;top:0;z-index:30000;opacity:0;}
    .banner .page-2:hover .play-close-btn{opacity:1;}
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        .banner .play-close-btn {
            right:2px;
        }
    }

    .banner .banner-btn{width: 105px;height:51px;display: inline-block;border:2px solid #fff;font-size:20px;line-height:51px;padding-left:65px;}
    .banner .download-btn{color:#267be5;background: #fff url(/static/common/img/icon1.1.png) 21px -57px no-repeat;}
    .banner .member-center{color:#fff;background:url(/static/common/img/icon1.1.png) 20px -163px no-repeat;margin-left:26px;}
    .banner .ad-link{color:#fff;background:url(/static/common/img/icon1.1.png) -250px -32px no-repeat;margin-left:26px;}
    .live-guild{
        color:#fff;
        background:url("/static/common/img/people.png") no-repeat;
        background-position:18px 8px;
        margin-left:26px;
    }
    .microvideo{
        color:#fff;
        background:url("/static/common/img/vedio.png") no-repeat;
        background-position:18px 8px;
        margin-left:26px;
    }
    #entryCon{
        display:flex;
        position:absolute;
        justify-content:space-between;
        flex-wrap: nowrap;
        top:398px;
        left:0px;
    }
	.down {opacity: 0.8;
	}
	.down:hover {opacity: 1;
	}
    .banner object{position:relative;z-index:1000;}
    .banner .page-2{position:absolute;z-index:3000;left:629px;top:240px;left:455px\0;top:190px\0;*left:456px;*top:190px;text-align: center;padding:6px;width:0;height:0;background:#0d0d0d;opacity:0;overflow:hidden;-webkit-transition: all 0.3s;transition: all 0.3s;-ms-transition: all 0.3s;-moz-transition: all 0.3s;}
    .banner .page-2 .jwlogo{display:none;}
    .banner.videoplaying .page-1 .bg{background:#267be5;}
    .banner.videoplaying .page-2{opacity:1;width: 948px;height: 528px;top:0;left:0;}
    .banner .qr-code-con{width:121px;height:121px;border:2px solid #fff;position:absolute;top: 341px;left: 198px;}
    .banner .qr-code-con .qr-code{margin:12px;}
    .banner .qr-code-con .qr-note{color:#fff;font-size:20px;position:absolute;bottom:-36px;width:100%;text-align:center;}
    .banner .qr-code-con .qr-code img{display:block;width:100%;height:100%;background: #fff;}
    section{width:1200px;margin: 180px auto 0;text-align: center;}
    .tit{font-size:30px;color: #4a4a4a;font-weight: 100;height: 30px;line-height:30px;}
    .tit a{display: block;color: #434343;text-decoration: none;}
    .note{font-size:20px;line-height:20px;color: #6f6f6f;font-weight: 100;margin: 22px 0 80px;}
    .sec-1 {padding-left:10px;}
    .sec-1 li{float: left;margin-right:3px;}
    .sec-1 li img{display: block;}
    .high-blue{color:#007aff;}
    .sec-3 ul{margin: 75px auto 0;width: 1020px;}
    .sec-3 li{float: left;margin-right:10px;width:243px;height:243px;border:1px solid #e4e4e4;color:#8b8a8a;font-family:'Myriad Pro';font-size:18px;background-color:#fff;-webkit-transition: all 0.3s;-transition: all 0.3s;-ms-transition: all 0.3s;-moz-transition: all 0.3s;}
    .sec-3 .icon{width:43px;height:50px;display:block;margin:0px auto 18px;}
    .sec-3 .icon.ios{background:url(/static/common/img/icon1.1.png) 0 0 no-repeat;}
    .sec-3 .icon.android{background:url(/static/common/img/icon1.1.png) -78px 0 no-repeat;}
    .sec-3 .icon.wp{background:url(/static/common/img/icon1.1.png) -155px 0 no-repeat;}
    .sec-3 a{text-decoration: none;display: block;color:#8b8a8a;height:174px;padding-top:70px;-webkit-transition: all 0.3s;-transition: all 0.3s;-ms-transition: all 0.3s;-moz-transition: all 0.3s;}
    .sec-3 li.qr-code img{margin-top:70px}
    .sec-3 li.qr-code p{font-size: 12px;margin-top: -8px;}
    .sec-3 li.down.on {background-color:#007aff;box-shadow: 5px 15px 30px rgba(0,0,0,.3);border:1px solid #007aff;}
    .sec-3 li.down.on a{color:#fff;}
    .sec-3 li.down.on .icon.ios{background:url(/static/common/img/icon1.1.png) 0 -110px no-repeat;}
    .sec-3 li.down.on .icon.android{background:url(/static/common/img/icon1.1.png) -77px -111px no-repeat;}
    .sec-3 li.down.on .icon.wp{background:url(/static/common/img/icon1.1.png) -154px -110px no-repeat;}

    .sec-3.download-popup{width:690px;height:374px;background:#ffffff;padding-top:1px;}
    .sec-3.download-popup li{width:134px;height:134px;margin-right:25px;}
    .sec-3.download-popup ul{margin:106px 0px 0px 38px;}
    .sec-3.download-popup a{padding-top:24px;height:110px;}
    .sec-3.download-popup li.qr-code img{margin-top: 15px;}

    .sec-4 {margin-bottom:180px;}
    .sec-4 ul{width: 1020px;margin: 0 auto;}
    .sec-4 li{width: 259px;height:140px;border-left:1px dashed #9d9d9d;text-align: left;padding-left:20px;padding-right:60px;float:left;}
    .sec-4 li .tit{color:#434343;font-size: 22px;position: relative;padding-bottom:5px;}
    .sec-4 li .tit .arrows{background: url(/static/common/img/icon1.1.png) -176px -69px no-repeat;width: 25px;height: 25px;display: block;position: absolute;right: 0px;top: 7px;}
    .sec-4 li .con{color:#8a8a8a;font-size: 14px;line-height:26px;width: 230px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
    .sec-4 li .con a{text-decoration: none;color:#8a8a8a;font-size: 14px;}
    .sec-4 li .con a:hover{color:#00A2FF;}
    .screen{width: 200px;height: 345px;position: absolute;left: 50%;margin-left: 29px;top: 218px;overflow:hidden;}
    .scroll-img{position:absolute;}
    
    /**
     * 照片墙
     */
    div,ul,li,img,dl,dt,dd{margin: 0;padding: 0;}
    .photo-wall{width: 1200px;padding: 0 7px;overflow: hidden;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
    .wall-pace{width: 392px;list-style: none;overflow: hidden;float: left;position: relative;}
    .wall-pace li{position: relative;float: left;margin: 0 5px 5px 0;overflow: hidden;background: #efefef}
    .wall-last-3{position: absolute !important;top: 151px;}
    .wall-last-4{margin-left: 128px !important;}
    .wall-pace img{width: 100%;height: 100%;position: absolute;top:0;left: 0}
    .wall-pace .sq-sm{width: 145px;height: 145px;}
    .wall-pace .rect-x,.intr-x{width: 235px;height: 146px;}
    .wall-pace .sq-lg{width: 258px;height: 258px;}
    .wall-pace .rect-y{width: 123px;height: 258px;}
    .intr-x,.intr-s{padding: 8px;color: #fff;background: rgb(1,122,255);position: absolute;top: 100%;}
    .intr-x{padding-top: 12px; width: 219px;}
    .intr-s{width: 242px;height: 128px;}
    .wall-pace dl{text-align: left;}
    .wall-pace dt{font-size: 22px;line-height: 44px;}
    .wall-pace dd{font-size: 14px;line-height: 24px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
    .banner .youku-btn{top: 339px;background: none;color: #fff;width: 125px;margin-left: 96px;cursor: pointer;height: 20px;}

    .ad-identity{position: fixed;right: 28px;top: 50px;width: 38px;height:21px;z-index: 99999;}
    .ad-identity-bg{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;opacity:0.17;
    }
    .ad-identity-text{
        position: absolute;
        top:0;
        left: 0;
        color: #fff;
        font-size: 13px;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 21px;
    }

    .page-2 .ad-identity{
        position: absolute;
        right: 55px;
        top: 10px;
    }

    .quest-mobile-link{
        display: inline-block;
        color: #6f6f6f;
        font-size: 12px;
        font-weight: 100;
        line-height: 20px;
        padding-top: 16px;
        text-decoration: none;
    }

    
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 70px; /* Location of the box */
	width:360px;
	height:460px;
	top: 50%;   
    left: 50%;   
	-webkit-transform: translate(-50%, -50%);   
    -moz-transform: translate(-50%, -50%);   
    -ms-transform: translate(-50%, -50%);   
    -o-transform: translate(-50%, -50%);   
    transform: translate(-50%, -50%); 
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 100%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>
{include file="home/public/nav_bar" /}
<div class="wrapper">
    <header id="playerbanner" class="banner">

		<div class="page-1">
            <div class="bg"></div>
           <!--  <a id="indexplayerplaybtn" class="play-btn"></a> -->
            

            <div id="entryCon">
                <a id="downloads_rightnow" href="#downloads" class="download-btn banner-btn ciqclickbtn te" _client="PC" _page="首页" _position="banner" _name="立即下载">立即下载</a>
               <!--  <a href="" class="member-center banner-btn">会员中心</a> -->
<!--				<a href="" class="ad-link banner-btn te ">广告投放</a>-->
<!--                <a target="_blank" href="{:url('/servicehelp/cate',array('id'=>11))}" class="live-guild banner-btn te">公会入驻</a>-->
               <!--  <a href="">短视频公会</a> -->
            </div>
		   </div>
    </header>
    {if !empty($know_list)}
    <section class="sec-1">
        <h2 class="tit">用视频认识我</h2>
        <p class="note">进入凡骄的世界，去结识那些陌生而有趣的人</p>
        <ul class="clearfix">
            {volist name="know_list" id="vo"}
            <li><img class="te" src="{$vo.img_url}"  style="width:290px"></li>
            {/volist}
        </ul>
    </section>
    {/if}
   <!-- <section class="sec-2">
        <h2 class="tit">年轻人的社交选择</h2>
        <p class="note">加入凡骄找到新朋友<br></p>
            <div class="photo-wall" id="photo-wall">
		        <ul class="wall-pace">
		            <li class="sq-sm">
		                <img class="te" src="/static/common/img/1.jpg"></li>
		            <li class="rect-x">
		                <img class="te" src="/static/common/img/2.png">
		            </li>
		            <li class="sq-lg">
		                <img class="te" src="/static/common/img/3.jpg">
		            </li>
		            <li class="rect-y">
		                <img class="te" src="/static/common/img/4.jpg"></li>
		        </ul>
		        <ul class="wall-pace">
		            <li class="sq-lg">
		                <img class="te" src="/static/common/img/7.jpg">
		            </li>
		            <li class="rect-y">
		                <img class="te" src="/static/common/img/8.jpg"></li>
		            <li class="sq-sm">
		                <img class="te" src="/static/common/img/5.jpg"></li>
		            <li class="rect-x">
		                <img class="te" src="/static/common/img/6.jpg">
		            </li>
		        </ul>
		        <ul class="wall-pace">
		            <li class="rect-x">
		                <img class="te" src="/static/common/img/10.jpg">
		            </li>
		            <li class="sq-sm">
		                <img class="te" src="/static/common/img/9.jpg"></li>
		            <li class="rect-y wall-last-3">
		                <img class="te" src="/static/common/img/12.jpg"></li>
		            <li class="sq-lg wall-last-4">
		                <img class="te" src="/static/common/img/11.jpg">
		            </li>
		        </ul>
    	</div>
    </section>-->
    <section id="downloads" name="downloads" class="sec-3">
        {empty name="app_list"}{else}
        <h2 class="tit">根据你的手机，选择下载</h2>
        <ul class="clearfix">
        	
        	 {volist name="app_list" id="vo"}
            <li class="down">
	            {if ( $vo.app_cate.title!='QC')}
	                <a href="{$vo.file_link}" target="_Blank" class="ciqclickbtn" _client="PC" _page="首页" _position="底部" _name="{$vo.app_cate.title}下载">
	                    <i class="icon">
	                    <img class="te" alt="" style="width:50px;height:50px;"  src="{$vo.img_url}">
	                    </i>
	                    <p>{$vo.app_cate.title}</p>
	                </a>
	            {else /}
	                    <img alt="" style="width:100%;height:100%"  src="{$vo.img_url}">
	            {/if}
            </li>
             {/volist}
        </ul>
        {/empty}
    </section>
    <section class="sec-4">
        <ul class="clearfix">
            <li>
                <p class="tit"><a target="blank" href="{:url('/servicehelp/help')}">用户帮助<span class="arrows"></span></a></p>
	            {volist name="help_list" id="vo" key="k"}
	                <p class="con">
	                <a target="blank" href="{:url('/servicehelp/question',array('id'=>$vo.id))}">{$vo.title}<span class="arrows"></span></a>
	                </p>
		 		{/volist}
            </li>
            <li>
                <p class="tit"><a href="{:url('/join')}">凡骄招聘<span class="arrows"></span></a></p>
                <p class="con">无论你是产品、技术还是设计大师，</p>
                <p class="con">又或者在其他方面有所建树，</p>
                <p class="con">随时欢迎热爱互联网的你，</p>
                <p class="con">与凡骄一起创造更好的社交体验</p>
            </li>
            <li>
                <p class="tit"><a target="blank" href="{:url('/news')}">凡骄动态<span class="arrows"></span></a></p>
                {volist name="news_list" id="vo" key="k"}
	                <p class="con">
	                <a target="blank" href="/news/{$vo.id}.html">{$vo.news_title}<span class="arrows"></span></a>
	                </p>
		 		{/volist}
            </li>
        </ul>
    </section>
    <section class="sec-4 i"  style="margin-top:-150px;">
        <ul class="clearfix">
            <li style=" border-left: 0px;">
            <img class="img" alt="" style="wdith:100%;height:100%;" src="/static/IMG/ICP.jpg">
            </li>
            <li style=" border-left: 0px;">
            <img class="img" alt="" style="wdith:100%;height:100%;" src="/static/IMG/www.jpg">
            </li>
            <li style=" border-left: 0px;">
            <img class="img" alt="" style="wdith:100%;height:100%;" src="/static/IMG/yyzz.jpg">
            </li>
        </ul>
    </section>
    <!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
</div>
 
</body>
{include file="home/public/footer" /}
<script>
$(document).ready(function(){ 
	var modal = document.getElementById('myModal');
	var modalImg = document.getElementById("img01");
	var captionText = document.getElementById("caption");
	$(".img").click(function(){ 
		// 获取图片模态框，alt 属性作为图片弹出中文本描述
		    modal.style.display = "block";
		    modalImg.src = $(this).attr('src');
		    modalImg.alt = $(this).attr('alt');
		    captionText.innerHTML = $(this).attr('alt');
	}); 
	// 获取 <span> 元素，设置关闭模态框按钮
	var span = document.getElementsByClassName("close")[0];
	// 点击 <span> 元素上的 (x), 关闭模态框
	span.onclick = function() { 
	    modal.style.display = "none";
	}

    $.post('/getConfig',function (data){
        if (data.banner){
            // $('#playerbanner').css('background','#1e78eb url('+data.banner+') no-repeat').css('backgroundSize','100% 100%')
            $('.page-1').css('background','#1e78eb url('+data.banner+') no-repeat').css('backgroundSize','100% 100%')
        }

        if (data.button.length>0){
            let html = ''
            $.each(data.button, function(i, val) {
                html +=`<a target="_target"  _position="banner" href="//`+val.config_address+`"
        style="color:#fff;background:url('`+val.icon+`') 25px center no-repeat;background-size: 30px 30px;
        background-position:22px 13px;
        margin-left:26px;" class="download-btn banner-btn ciqclickbtn te">`+val.name+`</a>`
            });
            $('#entryCon').append(html)
        }else{
            let html = `<a href="" class="ad-link banner-btn te">广告投放</a>
<!--                 <a target="_blank" href="{:url('/servicehelp/cate',array('id'=>11))}" class="live-guild banner-btn te">公会入驻</a>-->`
            $('#entryCon').append(html)
        }
    })
}); 

</script>