deming/pages/index/index.vue
2020-06-18 14:57:26 +08:00

209 lines
6.3 KiB
Vue

<template>
<view class="index">
<view class="top">
<view class="sosuo"></view>
<view class="tabs">
<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':'#333'
}"
:bold="false"
@change="dianji"></u-tabs>
</view>
<view class="sosuo"></view>
</view>
<swiper class="card" @change="dianji" :current="num">
<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 class="list">
<view >
<videoItem isguanzhu="true" v-for="item in 10"></videoItem>
</view>
<view style="margin-left:20rpx">
<videoItem isguanzhu="true" v-for="item in 10"></videoItem>
</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{
width: 334rpx;
/deep/ .u-tab-item{
font-weight: bold;
}
}
}
.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 {
list:[
{
name: '发现'
}, {
name: '直播'
}, {
name: '关注'
}
],
num:0
}
},
components:{
videoItem,
zhiboItem,
indexad,
darenItem
},
methods:{
dianji(a){
console.log(a)
if(typeof a == "object"){
this.num = a.detail.current
}else{
this.num = a
}
}
},
onLoad(){
// this.$u.api.phoneLogin({
// member_mobile: 1,
// sms_code: 2
// }).then((res)=>{
// console.log(res)
// })
}
}
</script>