<template>
    <view class="details">
        <view style="border-top: 1rpx solid #ececec;"></view>
        <userinfo></userinfo>
        <view style="border-top: 20rpx solid #ececec;"></view>
        <u-tabs :is-scroll="false" bar-width="70" ref="tabs" :list="list" :current="num" :bar-style="{
                'background-color':'#FF780F',
                'bottom':'10rpx'
            }"
            inactive-color="#333"
            :active-item-style="{
                'color':'#FF780F'
            }"
            :bold="false"
            @change="dianji"
            :show-bar="false"></u-tabs>
        <swiper class="card" @change="dianji" :current="num">
            <swiper-item>
                <scroll-view style="width:100%;height:100%" scroll-y="true">
                    <view class="box">
                        <view class="list">
                            <view >
                                <videoItem v-for="item in 10"></videoItem>
                            </view>
                            <view style="margin-left:20rpx">
                                <videoItem v-for="item in 10"></videoItem>
                            </view>
                        </view>
                    </view>
                    
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view style="width:100%;height:100%" scroll-y="true">
                    <view class="box">
                        <view class="list">
                            <view >
                                <zhiboItem v-for="item in 10"></zhiboItem>
                            </view>
                            <view style="margin-left:20rpx">
                                <zhiboItem v-for="item in 10"></zhiboItem>
                            </view>
                        </view>
                    </view>
                    
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>
<style lang="scss" scoped>
.details{
      .card{
        height: 100vh;
        width: 100%;
        .box{
            width: 100%;
            padding: 0 30rpx;
        }
        .list{
            display: flex;
        }
    }
}
</style>
<script>
import videoItem from "@/components/index/video-item/index" 
import zhiboItem from "@/components/index/zhibo-item/index" 
import userinfo from "../components/details/userinfo"
export default {
    name:"details",
    components:{
       userinfo,
       videoItem,
       zhiboItem
    },
    data(){
        return {
            list:[
                {
					name: '短视频'
				}, {
					name: '图文'
				}
            ],
            num:0
        }
    },
    methods:{
        dianji(a){
            console.log(a)
            if(typeof a == "object"){
                this.num = a.detail.current
            }else{
                this.num = a
            }
        }
    }
}
</script>