deming/pages/index/index.vue

184 lines
5.5 KiB
Vue
Raw Normal View History

2020-05-29 11:13:55 +08:00
<template>
2020-06-02 08:47:57 +08:00
<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>
2020-05-29 17:10:25 +08:00
</view>
2020-06-02 08:47:57 +08:00
<swiper class="card">
<swiper-item>
<scroll-view style="width:100%;height:100%" scroll-y="true">
2020-06-02 11:14:51 +08:00
<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>
2020-06-02 09:16:41 +08:00
</view>
</view>
2020-06-02 11:14:51 +08:00
2020-06-02 08:47:57 +08:00
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view style="width:100%;height:100%" scroll-y="true">
2020-06-02 11:14:51 +08:00
<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>
2020-06-02 09:34:37 +08:00
</view>
</view>
2020-06-02 11:14:51 +08:00
2020-06-02 08:47:57 +08:00
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view style="width:100%;height:100%" scroll-y="true">
2020-06-02 11:14:51 +08:00
<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>
2020-06-02 08:47:57 +08:00
</scroll-view>
</swiper-item>
</swiper>
2020-05-29 17:10:25 +08:00
</view>
2020-05-29 11:13:55 +08:00
2020-06-02 08:47:57 +08:00
</template>
2020-05-29 17:10:25 +08:00
<style lang="scss" scoped>
2020-06-02 08:47:57 +08:00
.index{
width: 750rpx;
2020-05-29 17:10:25 +08:00
display: flex;
flex-direction: column;
2020-06-02 08:47:57 +08:00
height: 100vh;
.top{
2020-06-02 09:34:37 +08:00
padding: 0 30rpx;
2020-06-02 08:47:57 +08:00
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%;
2020-06-02 09:34:37 +08:00
width: 100%;
2020-06-02 11:14:51 +08:00
.box{
width: 100%;
2020-06-02 09:34:37 +08:00
padding: 0 30rpx;
2020-06-02 08:47:57 +08:00
}
2020-06-02 09:16:41 +08:00
.list{
display: flex;
}
2020-06-02 08:47:57 +08:00
}
2020-06-02 11:14:51 +08:00
.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;
}
}
2020-05-29 17:10:25 +08:00
}
2020-06-02 08:47:57 +08:00
</style>
<script>
import videoItem from "@/components/index/video-item/index"
2020-06-02 09:34:37 +08:00
import zhiboItem from "@/components/index/zhibo-item/index"
import indexad from "@/components/index/ad/index"
2020-06-02 11:14:51 +08:00
import darenItem from "@/components/index/daren-item/index"
2020-06-02 08:49:13 +08:00
2020-06-02 08:47:57 +08:00
export default {
name:"index",
data(){
return {
2020-05-29 11:13:55 +08:00
2020-06-02 08:47:57 +08:00
}
},
components:{
2020-06-02 09:34:37 +08:00
videoItem,
zhiboItem,
2020-06-02 11:14:51 +08:00
indexad,
darenItem
2020-06-02 08:47:57 +08:00
}
2020-05-29 17:10:25 +08:00
}
2020-06-02 08:47:57 +08:00
</script>