theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

达人详情完成

Browse Source
This commit is contained in:
luyuan 2020-06-03 10:53:38 +08:00
parent 0f3073e577
commit b5ef323612
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
3 changed files with 195 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
pageB/components/details/userinfo.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<view class="userinfo">
<view class="user">
<view class="info">
<image></image>
<view>
<text>达人昵称</text>
<text>关注数量</text>
</view>
</view>
<view class="guanzhu">关注</view>
</view>
<view class="profile">个性签名</view>
</view>
</template>
<style lang="scss" scoped>
image{
background-color: #0f0;
}
.userinfo{
height: 261rpx;
width: 100%;
padding: 30rpx;
.user{
display: flex;
margin-top: 10rpx;
align-items: center;
justify-content: space-between;
.info{
display: flex;
align-items: center;
>image{
width: 140rpx;
height: 140rpx;
border-radius: 50%;
}
>view{
margin-left: 40rpx;
display: flex;
height: 79rpx;
justify-content: space-between;
flex-direction: column;
>text:first-child{
font-size: 28rpx;
color:#333;
}
>text:last-child{
font-size: 24rpx;
color: #333;
}
}
}
.guanzhu{
width: 140rpx;
height: 60rpx;
font-size: 26rpx;
color:#fff;
line-height: 60rpx;
border-radius: 30rpx;
background-color: #FF780F;
text-align: center;
}
}
.profile{
margin-top: 19rpx;
font-size: 24rpx;
color: #333;
margin-left: 14rpx;
}
}
</style>
<script>
export default {
name:"userinfo",
data(){
return {
}
}
}
</script>

100
pageB/details/index.vue Normal file
View File

@ -0,0 +1,100 @@
<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>

11
pages.json
View File

@ -44,6 +44,17 @@
}
}
}
},
{
"path": "details/index",
"style": {
"navigationBarTitleText": "",
"app-plus":{
"titleNView":{
"backgroundColor":"#ffffff"
}
}
}
}
]
},