{php $this->template('header')}
<style>


.bui-searchbar .btn-search{background-color: #5FB878;border-radius: 4px;padding-right: 10px;color: #fff;margin-left: 5px;height: 0.65rem;line-height: 0.65rem;}
.tubiao{width: 0.3rem;}


.bui-tab .bui-nav .active{color:#f9342a}
.bui-nav>.active {
    color: #f9342a;
}

.bui-nav>[class*=bui-btn].active:after {
    background: #f9342a;
}
[class*=bui-btn] .bui-thumbnail{width: 100%; height: 230px;}
[class*=bui-box]>[class*=span1]{width: 100%;}
.header_url {display: -webkit-box;overflow-x: scroll;-webkit-overflow-scrolling:touch;}

.header_url div{width: auto;font-size: 0.28rem; border:1px solid #ccc; margin-right: 30px; text-align: center; padding: 0.1rem 0.3rem;letter-spacing:3px;}
.vimg{height: 1.7rem; background-repeat: no-repeat;background-position: center;background-size: cover;position: relative;}
.vimg .mask{ position: absolute; left: 0;right: 0; bottom: 0; top:0;background: rgba(0,0,0,0.6);vertical-align:middle  }
.vimg .mask::before{display:inline-block;  height: 1rem; width: 1rem; position: absolute;top:50%; margin-top: -0.5rem;left: 50%; margin-left: -0.5rem;font-size: 0.6rem;color: rgba(255,255,255,0.7); }
.vtitle{height: 0.58rem; font-size: 0.26rem;}
#nav{background-color: #fff;}
.bui-list>[class*=bui-btn]{border:none;}

.bui-list .bui-box{display: inline-block;width: 49.2%;}

.item-text {padding: 0;font-size: .26rem;color: #b3b3b3;width: 50%;display: inline-block;float: left;}
.bui-list .bui-box .span1{margin-top: 0.1rem;}
.time{ font-size: 12px; color: #777 }
#uiNavbar{background-color: #fff;border-bottom: 1px #f2f2f2 solid}
#uiNavbar ul{border-bottom:0rem;}
</style>
{php echo share(视频广场,'',这里有很多好看的视频喔)}
    <div class="bui-page">   
        <main>
          <!--   <div class="bui-navbar" style="height:3rem; z-index: 9999999; position: fixed;">
                <div id="slide" class="bui-slide bui-slide-skin01"></div>
            </div> -->
            
            <div class="bui-tab-head">
                <ul class="bui-nav">
                    <li class="bui-btn active">视频广场</li>
                    <li class="bui-btn click" data-url="{php echo iurl('my')}">我的视频</li>
                   
                </ul>
            </div>
            
         
                
            <div id="uiNavbar" class="bui-navbar">
                <ul id="nav" class="bui-nav">
                    <li class="bui-btn active" data-id="0" onclick="lst(0)" href="baidu.com">最新</li>

                    {loop $videocard $k $v}
                    <li class="bui-btn" data-id="{$v['id']}" onclick="lst({$v['id']})" href="baidu.com">{$v['name']}</li>
                    {/loop}
                   
                </ul>
            </div>
            
            <!-- <div id="searchbar" class="bui-searchbar bui-box " >
                <div class="span1">
                    <div class="bui-input">
                        <i class="icon-search"></i>
                        <input type="search" value="" placeholder="请输入关键字"><i class="icon-removefill" style="display: none;"></i>
                    </div>
                </div>
                <div class="btn-search">搜索</div>
            </div> -->


            <div id="scrollList" class="bui-scroll" >
                <div class="bui-scroll-head"></div>
                <div class="bui-scroll-main">
                    <ul class="bui-list bui-list-thumbnail">
                    </ul>
                </div>
                <div class="bui-scroll-foot"></div>
            </div>
        
        </main>
       <footer>{php $this->template('video')}</footer> 
    </div>
<script>   
var title="";
bui.ready(function(){

    function todo(e) {
        var val = $(e.target).attr("value");
        if(val == "cancel") { this.hide();}
        if(val == "upload") { window.location.href="{php echo iurl('video/index/upload')}";}
        if(val=="carry") { window.location.href="{php echo iurl('video/index/make')}"; }
    }


    //轮播
    var img=<?php echo json_encode($img);?>;
    var uiSlide = bui.slide({
        id: "#slide",
        height: 300,
        autopage: true,
        data:img,
        loop: true,
    })
    uiSlide.start();
    uiSlide.unlock();
    
    var p=0;
    var uiTab = bui.tab({
            id:"#uiTabNavbar",
            menu:"#nav",
        });
        uiTab.on("to",function (index) {
               var left = $("#nav li")[index].offsetLeft;
               document.getElementById("uiNavbar").scrollLeft = left;
            
        }).to(0); 

        var uiList = bui.list({
        id: "#scrollList",
        url: "{php echo iurl('index')}",
        pageSize: 10,
        data: {title:title},
        field: {
            page: "page",
            size: "pageSize",
            data: "data"

        },

        template: function(data) {
            var html = "";
            data.forEach(function(el, index) {

                html+=`
                <div class="bui-btn bui-box vinfo click" data-url="{php echo iurl('play')}&type=2&id=${el.id}">
                    <div class="bui-thumbnail vimg" style="background-image:url(${el.img})">
                        <div class="mask iconfont icon-bofang"></div>
                    </div>
                    <div class="span1">
                        <h3 class="item-title vtitle es2">${el.title}</h3>
                        <div class="bui-fluid">
                            
                            <div class="span6">
                               <i class="iconfont icon-yanjing"></i>
                               <span class="time">${el.eye}</span>
                            </div>

                            <div class="span6">
                               <i class="iconfont icon-dianzan"></i>
                               <span class="time">${el.zan}</span>
                                
                            </div>

                        </div>
                       
                    </div>
                </div>

         
                ` ;
            });
            return html;
        }
    }); 



        window.lst=function (i){
            if(p==i){ return false;}
            p=i;
            if( uiList ){
                uiList.empty();
                uiList.init({
                    page: 1,
                    data: {"cid":p}
                });
            }
        }


        //  var uiSearchbar = bui.searchbar({
        //     id:"#searchbar",
        //     onInput: function(e,keyword) {
        //         //实时搜索onclick="del(${el.id})"
        //         // console.log(++n)
        //     },
        //     onRemove: function(e,keyword) {
        //         //删除关键词需要做什么其它处理
        //         // console.log(keyword);
        //     },
        //     callback: function (e,keyword) {
        //         // console.log(keyword);
        //         if( uiList ){ 
        //             //点击搜索清空数据
        //             uiList.empty();
        //             // 重新初始化数据
        //             uiList.init({
        //                 page: 1,
        //                 data: {
        //                     "title":keyword
        //                 }
        //             });
        //         }
        //     }
        // });

})
</script>