deming/pages/index/index.vue

<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">
                    <view class="box">
                        <indexad style="width:690rpx"></indexad>
                        <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">
                        <indexad style="width:690rpx"></indexad>
                        <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-item>
                <scroll-view style="width:100%;height:100%" scroll-y="true">
                    <view class="box">
                        <view class="tuijian">
                            <view class="title">
                                <view class="left">
                                    <view></view>
                                    <text>推荐达人</text>
                                </view>
                                <image class="right"></image>
                            </view>
                            <view class="tuijianlist">
                                <darenItem style="margin-right:23rpx"></darenItem>
                                <darenItem style="margin-right:23rpx"></darenItem>
                                <darenItem></darenItem>

                            </view>
                        </view>
                    </view>
                    
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>

</template>
<style lang="scss" scoped>
.index{
    width: 750rpx;
    display: flex;
    flex-direction: column;
    height: 100vh;
    .top{
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 88rpx;
        align-items: center;
        flex-shrink: 0;
        .sosuo{
            width: 32rpx;
            height: 32rpx;
        }
        .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{
        height: 100%;
        width: 100%;
        .box{
            width: 100%;
            padding: 0 30rpx;
        }
        .list{
            display: flex;
        }
    }
    .tuijian{
        width: 750rpx;
        margin-left: -30rpx;
        height: 400rpx;
        background-color: #ececec;
        padding: 30rpx;
        .title{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                display: flex;
                align-items: center;
                >view{
                    width: 6rpx;
                    height: 30rpx;
                    background-color: #FF780F;
                }
                >text{
                    font-size: 30rpx;
                    color: 30rpx;
                    margin-left: 14rpx;
                }
            }
            .right{
                width: 14rpx;
                height: 24rpx;
            }
        }
        .tuijianlist{
            width: 100%;
            height: 282rpx;
            margin-top: 30rpx;
            display: flex;
        }
    }
}
</style>
<script>
import videoItem from "@/components/index/video-item/index" 
import zhiboItem from "@/components/index/zhibo-item/index" 
import indexad from "@/components/index/ad/index" 
import darenItem from "@/components/index/daren-item/index" 

export default {
    name:"index",
    data(){
        return {

        }
    },
    components:{
        videoItem,
        zhiboItem,
        indexad,
        darenItem
    }
}
</script>