<template>
    <view class="index">
        <view class="top">
            <view class="sosuo"></view>
            <view class="tabs">
                <view class="xuanzhong ">发现</view>
                <view>直播</view>
                <view>关注</view>
            </view>
            <view class="sosuo"></view>
        </view>
        <swiper class="card">
            <swiper-item>
                <scroll-view style="width:100%;height:100%" scroll-y="true">
                    <swiper class="ad" indicator-dots="true" indicator-color="#fff" indicator-active-color="#634838">
                        <swiper-item></swiper-item>
                        <swiper-item></swiper-item>
                        <swiper-item></swiper-item>
                    </swiper>
                    <videoItem></videoItem>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view style="width:100%;height:100%" scroll-y="true">
                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view style="width:100%;height:100%" scroll-y="true">
                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>

</template>
<style lang="scss" scoped>
.index{
    width: 750rpx;
    padding: 0 30rpx;
    display: flex;
    flex-direction: column;
    height: 100vh;
    .top{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 88rpx;
        align-items: center;
        flex-shrink: 0;
        .sosuo{
            width: 32rpx;
            height: 32rpx;
            background-color: #0f0;
        }
        .tabs{
            display: flex;
            width: 294upx;
            justify-content: space-between;
            >view{
                font-size: 36upx;
                color: #333;
                font-weight: bold;
                position: relative;
            }
            >view::before{
                content: "";
                display: block;
                position: absolute;
                background-color: #FF780F;
                width: 0;
                height: 4rpx;
                bottom: -10rpx;
                left: 25%;
            }
            .xuanzhong::before{
                width: 50%;
            }
        }
    }
    .card{
        width: 100%;
        height: 100%;
        .ad{
            width: 100%;
            height: 294rpx;
            border-radius: 20rpx;
            background-color: #0f0;
        }
    }
}
</style>
<script>
import videoItem from "@/components/index/video-item/index" 
export default {
    name:"index",
    data(){
        return {

        }
    },
    components:{
        videoItem
    }
}
</script>