875 lines
18 KiB
Plaintext
Executable File
875 lines
18 KiB
Plaintext
Executable File
<template>
|
||
<view class="page">
|
||
<scroll-view
|
||
class="isLogin-info-wrapper"
|
||
:style="{ height: screenHeight + 'px' }"
|
||
scroll-y="true"
|
||
@scrolltolower="loadMore"
|
||
>
|
||
<image
|
||
class="mybg"
|
||
:src="pageUserInfo.bgImg"
|
||
mode="aspectFill"
|
||
/>
|
||
|
||
<view
|
||
class="header"
|
||
:style="{ marginTop: statusBarHeight + 'px' }"
|
||
>
|
||
<image
|
||
class="header-right-search"
|
||
src="../../static/images/icon-back.png"
|
||
@click="back()"
|
||
/>
|
||
</view>
|
||
<view class="my-info-wrapper">
|
||
<view class="my-info">
|
||
<image
|
||
:src="pageUserInfo.face"
|
||
mode="aspectFill"
|
||
class="my-face"
|
||
/>
|
||
<view class="info-wrapper">
|
||
<text class="nickname">
|
||
{{ pageUserInfo.nickname }}
|
||
</text>
|
||
<view class="tiktok-num-wrapper">
|
||
<text class="tiktok-num">视频号：</text>
|
||
<text class="tiktok-num">
|
||
{{ pageUserInfo.imoocNum }}
|
||
</text>
|
||
</view>
|
||
<view class="location">
|
||
<text class="location-text">所在地：</text>
|
||
<text class="location-text">
|
||
{{ pageUserInfo.city == '' ? '中国' : '' + pageUserInfo.city }}{{ pageUserInfo.district == '' ? '' : '·' + pageUserInfo.district }}
|
||
</text>
|
||
</view>
|
||
<view class="sex-wrapper">
|
||
<view class="constellation">
|
||
<image
|
||
class="sex-img"
|
||
v-if="pageUserInfo.sex == 1"
|
||
src="/static/images/icon-sex-boy.png"
|
||
/>
|
||
<image
|
||
class="sex-img"
|
||
v-if="pageUserInfo.sex == 0"
|
||
src="/static/images/icon-sex-girl.png"
|
||
/>
|
||
<image
|
||
class="sex-img"
|
||
v-if="pageUserInfo.sex == 2"
|
||
src="/static/images/icon-sex-secret.png"
|
||
/>
|
||
<text class="astro">{{ astro }}座</text>
|
||
</view>
|
||
<view class="animal">
|
||
<text class="animal-text">
|
||
{{ animal }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="desc">
|
||
{{ pageUserInfo.description }}
|
||
</text>
|
||
|
||
<view class="bottom-wrapper">
|
||
<view class="bottom">
|
||
<view
|
||
class="bottom-item"
|
||
@click="goMyFollows(pageUserInfo.id)"
|
||
>
|
||
<text class="item-num">
|
||
{{ getGraceNumber(pageUserInfo.myFollowsCounts) }}
|
||
</text>
|
||
<text class="item-text">关注</text>
|
||
</view>
|
||
<view
|
||
class="bottom-item"
|
||
@click="goMyFans(pageUserInfo.id)"
|
||
>
|
||
<text class="item-num">
|
||
{{ getGraceNumber(pageUserInfo.myFansCounts) }}
|
||
</text>
|
||
<text class="item-text">粉丝</text>
|
||
</view>
|
||
<view class="bottom-item">
|
||
<text class="item-num">
|
||
{{ getGraceNumber(pageUserInfo.totalLikeMeCounts) }}
|
||
</text>
|
||
<text class="item-text">获赞</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="edit">
|
||
<view
|
||
v-if="isFollow && !isFan"
|
||
@click="cancelFollow()"
|
||
class="follow-btn"
|
||
>
|
||
<text class="follow-text">已关注</text>
|
||
</view>
|
||
<view
|
||
v-if="isFollow && isFan"
|
||
@click="cancelFollow()"
|
||
class="follow-btn"
|
||
>
|
||
<text class="follow-text">相互关注</text>
|
||
</view>
|
||
<view
|
||
v-if="!isFollow"
|
||
@click="followMe()"
|
||
class="follow-btn"
|
||
style="background-color: #ef274d"
|
||
>
|
||
<text class="follow-text">关注我</text>
|
||
</view>
|
||
<view
|
||
v-if="block"
|
||
class="follow-btn"
|
||
@click="quxiaolahei"
|
||
>
|
||
<text class="follow-text">解除拉黑</text>
|
||
</view>
|
||
<view
|
||
@click="lahei"
|
||
v-if="!block"
|
||
class="follow-btn"
|
||
>
|
||
<text class="follow-text">拉黑</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="tab-wrapper"
|
||
v-if="!block"
|
||
>
|
||
<view
|
||
class="tab-item"
|
||
@click="switchTab(0)"
|
||
>
|
||
<text
|
||
class="tab-normal"
|
||
:class="{ 'tab-selected': currentTab == 0 }"
|
||
>
|
||
作品
|
||
</text>
|
||
<view
|
||
v-if="currentTab == 0"
|
||
class="selected-tab"
|
||
></view>
|
||
</view>
|
||
<!-- <view class="tab-item" @click="switchTab(1)">
|
||
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }">
|
||
私密
|
||
</text>
|
||
<view v-if="currentTab == 1" class="selected-tab"></view>
|
||
</view> -->
|
||
<view
|
||
class="tab-item"
|
||
@click="switchTab(1)"
|
||
>
|
||
<text
|
||
class="tab-normal"
|
||
:class="{ 'tab-selected': currentTab == 1 }"
|
||
>
|
||
赞过
|
||
</text>
|
||
<view
|
||
v-if="currentTab == 1"
|
||
class="selected-tab"
|
||
></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="vlog-list"
|
||
v-if="!block"
|
||
>
|
||
<view
|
||
class="vlogBox"
|
||
v-for="(vlog, index) in vlogList"
|
||
:key="index"
|
||
>
|
||
<image
|
||
class="vlog-cover"
|
||
:src="vlog.cover || vlog.firstFrameImg"
|
||
@click="goToVlog(vlog)"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="rightLike">
|
||
<image
|
||
src="/static/images/icon-unlike.png"
|
||
style="width: 30rpx; height: 30rpx"
|
||
></image>
|
||
<text style="color: #ffffff">{{ getGraceNumber(vlog.likeCounts) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
v-if="vlogList.length == 0 && block == false"
|
||
class="empty"
|
||
>
|
||
<text class="empty-text">~ 空空如也 ~</text>
|
||
</view>
|
||
|
||
<view
|
||
v-if="vlogList.length > 0 && block == false"
|
||
class="not-empty"
|
||
>
|
||
<text class="not-empty-text">~ 没有更多了 ~</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let system = uni.getSystemInfoSync();
|
||
import { clickFeedBack } from '@/utils/tools.js';
|
||
import api from '@/config/api.js';
|
||
import storage from '@/utils/storage.js'; //缓存
|
||
import {
|
||
queryBlockVloger,
|
||
cancelBlock,
|
||
blockUser,
|
||
vlogUserInfo,
|
||
vlogQueryDoIFollowVloger,
|
||
vlogMyPublicList,
|
||
vlogMyPrivateList,
|
||
vlogMyLikedList,
|
||
vlogMeTag,
|
||
vlogFansCancel,
|
||
vlogFansFollow
|
||
} from '@/api/vlog';
|
||
|
||
import { getAstro, getAnimal, dateFormat, graceNumber, isStrEmpty } from '@/utils/tools.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
pageUserInfo: {
|
||
id: '',
|
||
mobile: '',
|
||
nickname: '',
|
||
imoocNum: '',
|
||
face: '',
|
||
birthday: '1998-12-31T16:00:00.000+0000',
|
||
country: '',
|
||
province: '',
|
||
city: '',
|
||
district: '',
|
||
description: '',
|
||
myFollowsCounts: 0,
|
||
myFansCounts: 0,
|
||
totalLikeMeCounts: 0
|
||
},
|
||
userPageId: '',
|
||
astro: '',
|
||
animal: '',
|
||
loginWords: '请登录',
|
||
|
||
statusBarHeight: 0,
|
||
screenHeight: 0,
|
||
screenHeightUnLogin: 0,
|
||
|
||
currentTab: 0,
|
||
isFollow: false,
|
||
isFan: false,
|
||
isAndroid: uni.getSystemInfoSync().platform == 'android',
|
||
|
||
page: 0,
|
||
totalpage: 0,
|
||
vlogList: [],
|
||
channelComment: null,
|
||
block: false //true=拉黑，false=没拉黑
|
||
};
|
||
},
|
||
destroyed() {
|
||
console.log('博主信息页面销毁');
|
||
// 销毁时关闭 BroadcastChannel
|
||
if (this.channelComment) {
|
||
this.channelComment.close();
|
||
}
|
||
},
|
||
async onLoad(params) {
|
||
this.channelComment = new BroadcastChannel('comment-counts');
|
||
this.statusBarHeight = system.statusBarHeight;
|
||
let screenHeight = system.safeArea.bottom + 50;
|
||
this.screenHeight = screenHeight;
|
||
let screenHeightUnLogin = system.safeArea.bottom;
|
||
this.screenHeightUnLogin = screenHeightUnLogin;
|
||
let me = this;
|
||
|
||
// 从视频页面, 点击用户头像传递过来的id
|
||
let userPageId = params.userPageId;
|
||
if (isStrEmpty(userPageId)) {
|
||
uni.showToast({
|
||
title: '出错啦~',
|
||
icon: ' none',
|
||
duration: 2000
|
||
});
|
||
settimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}, 1500);
|
||
}
|
||
|
||
me.userPageId = userPageId;
|
||
var result = await vlogUserInfo(userPageId);
|
||
console.log(result);
|
||
if (result.data.status == 200) {
|
||
me.pageUserInfo = result.data.data;
|
||
me.setBasicUserInfo(me.pageUserInfo);
|
||
} else {
|
||
uni.showToast({
|
||
title: result.data.msg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
// this.switchTab(0);
|
||
this.myList(0, 'myPublicList', true);
|
||
let myUserId = '';
|
||
let info = storage.getVlogUserInfo();
|
||
if (info != null) {
|
||
myUserId = info.id;
|
||
}
|
||
|
||
if (!isStrEmpty(myUserId)) {
|
||
// 查询我是否关注博主
|
||
var result = await vlogQueryDoIFollowVloger({ myId: myUserId, vlogerId: userPageId });
|
||
console.log(result);
|
||
if (result.data.status == 200) {
|
||
me.isFollow = result.data.data;
|
||
// me.isFan = result.data.data;
|
||
} else {
|
||
uni.showToast({
|
||
title: result.data.msg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
// 查询博主是否关注我
|
||
var result2 = await vlogQueryDoIFollowVloger({ myId: userPageId, vlogerId: myUserId });
|
||
if (result2.data.status == 200) {
|
||
me.isFan = result2.data.data;
|
||
} else {
|
||
uni.showToast({
|
||
title: result2.data.msg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
// 查询我是否拉黑博主
|
||
var isblock = await queryBlockVloger({ myId: myUserId, vlogerId: userPageId });
|
||
if (isblock.data.status == 200) {
|
||
this.block = isblock.data.data;
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
async quxiaolahei() {
|
||
var myUserInfo = storage.getVlogUserInfo();
|
||
if (myUserInfo == null) {
|
||
uni.navigateTo({
|
||
url: '/pages/passport/login',
|
||
animationType: 'slide-in-bottom'
|
||
});
|
||
return;
|
||
}
|
||
var res = await cancelBlock({
|
||
myId: myUserInfo.id, //我的id
|
||
vlogerId: this.userPageId // 博主id
|
||
});
|
||
if (res.data.status == 200) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '已解除拉黑'
|
||
});
|
||
this.channelComment.postMessage({
|
||
type: 'comment-counts',
|
||
data: { lahei: true }
|
||
});
|
||
this.block = false;
|
||
}
|
||
},
|
||
async lahei() {
|
||
var myUserInfo = storage.getVlogUserInfo();
|
||
if (myUserInfo == null) {
|
||
uni.navigateTo({
|
||
url: '/pages/passport/login',
|
||
animationType: 'slide-in-bottom'
|
||
});
|
||
return;
|
||
}
|
||
var res = await blockUser({
|
||
myId: myUserInfo.id, //我的id
|
||
vlogerId: this.userPageId // 博主id
|
||
});
|
||
if (res.data.status == 200) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '已拉黑'
|
||
});
|
||
this.block = true;
|
||
this.channelComment.postMessage({
|
||
type: 'comment-counts',
|
||
data: { lahei: true }
|
||
});
|
||
}
|
||
},
|
||
setBasicUserInfo(myUserInfo) {
|
||
// 根据生日判断星座
|
||
let birthday = myUserInfo.birthday;
|
||
let birth = dateFormat('YYYY-MM-DD', new Date(birthday));
|
||
let birthArr = birth.split('-');
|
||
let year = birthArr[0];
|
||
let month = birthArr[1];
|
||
let day = birthArr[2];
|
||
let astro = getAstro(month, day);
|
||
this.astro = astro;
|
||
|
||
// 根据生日判断生肖
|
||
let animal = getAnimal(year);
|
||
this.animal = animal;
|
||
},
|
||
switchTab(index) {
|
||
this.currentTab = index;
|
||
if (index == 0) {
|
||
this.page = 0;
|
||
this.toalPage = 0;
|
||
this.myList(0, 'myPublicList', true);
|
||
} else if (index == 1) {
|
||
this.page = 0;
|
||
this.toalPage = 0;
|
||
this.myList(0, 'myLikedList', true);
|
||
}
|
||
},
|
||
loadMore() {
|
||
if (this.page >= this.toalPage) {
|
||
return;
|
||
} else {
|
||
var prop = ['myPublicList', 'myLikedList'];
|
||
this.myList(this.page, prop[this.currentTab]);
|
||
}
|
||
},
|
||
async myList(page, requrl, init = false) {
|
||
let me = this;
|
||
page = page + 1;
|
||
me.page = page;
|
||
let userId = me.userPageId;
|
||
var myUserInfo = storage.getVlogUserInfo();
|
||
var myId = '';
|
||
if (myUserInfo != null) {
|
||
myId = myUserInfo.id;
|
||
}
|
||
var result = await vlogMeTag(requrl, page, 10, userId, myId);
|
||
if (result.data.status == 200) {
|
||
let vlogList = result.data.data.rows;
|
||
console.log(vlogList);
|
||
let toalPage = result.data.data.total;
|
||
if (init) {
|
||
me.vlogList = vlogList;
|
||
} else {
|
||
me.vlogList = me.vlogList.concat(vlogList);
|
||
}
|
||
me.page = page;
|
||
me.toalPage = toalPage;
|
||
}
|
||
},
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
async cancelFollow() {
|
||
var myUserInfo = storage.getVlogUserInfo();
|
||
if (myUserInfo == null) {
|
||
uni.navigateTo({
|
||
url: '/pages/passport/login',
|
||
animationType: 'slide-in-bottom'
|
||
});
|
||
return;
|
||
}
|
||
clickFeedBack();
|
||
let me = this;
|
||
let vlogerId = me.userPageId;
|
||
let userId = storage.getVlogUserInfo().id;
|
||
var result = await vlogFansCancel({ myId: userId, vlogerId: vlogerId });
|
||
if (result.data.status == 200) {
|
||
me.isFollow = false;
|
||
// uni.setStorageSync("justCancelVlogerId", vlogerId);
|
||
// 刷新当前页的粉丝数
|
||
let pendingInfo = me.pageUserInfo;
|
||
me.pageUserInfo.myFansCounts = pendingInfo.myFansCounts - 1;
|
||
this.channelComment.postMessage({
|
||
type: 'comment-counts',
|
||
data: { flag: false, from: 'refresh', vlogerId: vlogerId }
|
||
});
|
||
this.channelComment.postMessage({
|
||
type: 'comment-counts',
|
||
data: { from: 'initGuanzhu' }
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: result.data.msg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
},
|
||
async followMe() {
|
||
let me = this;
|
||
let myUserInfo = storage.getVlogUserInfo();
|
||
if (myUserInfo == null) {
|
||
uni.navigateTo({
|
||
url: '/pages/passport/login',
|
||
animationType: 'slide-in-bottom'
|
||
});
|
||
return;
|
||
}
|
||
clickFeedBack();
|
||
let vlogerId = me.userPageId;
|
||
let userId = myUserInfo.id;
|
||
var result = await vlogFansFollow({ myId: userId, vlogerId: vlogerId });
|
||
if (result.data.status == 200) {
|
||
me.isFollow = true;
|
||
// uni.setStorageSync("justFollowVlogerId", vlogerId);
|
||
// 刷新当前页的粉丝数
|
||
let pendingInfo = me.pageUserInfo;
|
||
me.pageUserInfo.myFansCounts = pendingInfo.myFansCounts + 1;
|
||
this.channelComment.postMessage({
|
||
type: 'comment-counts',
|
||
data: { flag: true, from: 'refresh', vlogerId: vlogerId }
|
||
});
|
||
this.channelComment.postMessage({
|
||
type: 'comment-counts',
|
||
data: { from: 'initGuanzhu' }
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: result.data.msg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
},
|
||
|
||
// 把超过1000或10000的数字调整, 比如1.3k/6.8w
|
||
getGraceNumber(num) {
|
||
return graceNumber(num);
|
||
},
|
||
|
||
goToVlog(vlog) {
|
||
let vlogId = vlog.id ? vlog.id : vlog.vlogId;
|
||
// uni.navigateTo({
|
||
// url: "../vlog/vlog?type=mine&isNeedPage=1&vlogId=" + vlogId,
|
||
// });
|
||
uni.navigateTo({
|
||
url: '/pages/me/vlog?vlogId=' + vlogId
|
||
});
|
||
},
|
||
goMyFans(userId) {
|
||
uni.navigateTo({
|
||
animationType: 'fade-in',
|
||
url: 'myFans?userId=' + userId
|
||
});
|
||
},
|
||
|
||
goMyFollows(userId) {
|
||
uni.navigateTo({
|
||
animationType: 'fade-in',
|
||
url: 'myFollows?userId=' + userId
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.header-right-search {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
opacity: 0.8;
|
||
}
|
||
.header {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
flex-direction: row;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
align-items: center;
|
||
padding-left: 40rpx;
|
||
padding-right: 40rpx;
|
||
}
|
||
.mybg {
|
||
width: 750rpx;
|
||
height: 750rpx;
|
||
box-shadow: inset 0 -150px 180px #313030;
|
||
}
|
||
.tiktok-num {
|
||
font-size: 10px;
|
||
color: #ffffff;
|
||
font-weight: 300;
|
||
}
|
||
.tiktok-num-wrapper {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.location-text {
|
||
line-height: 20px;
|
||
color: #ffffff;
|
||
font-size: 10px;
|
||
font-weight: 300;
|
||
}
|
||
.nickname {
|
||
font-size: 20px;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.location {
|
||
display: flex;
|
||
flex-direction: row;
|
||
height: 20px;
|
||
margin-top: 2px;
|
||
font-size: 1px;
|
||
}
|
||
.my-face {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 100rpx;
|
||
border-width: 1px;
|
||
border-color: #f1f1f1;
|
||
}
|
||
.sex-img {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
align-items: center;
|
||
}
|
||
.astro {
|
||
font-size: 10px;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
font-weight: bold;
|
||
margin-left: 6rpx;
|
||
align-items: center;
|
||
}
|
||
.constellation {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #000000;
|
||
opacity: 0.5;
|
||
width: 130rpx;
|
||
height: 40rpx;
|
||
border-radius: 10px;
|
||
}
|
||
.animal-text {
|
||
font-size: 10px;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
font-weight: bold;
|
||
align-items: center;
|
||
}
|
||
.animal {
|
||
margin-left: 10rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
background-color: #000000;
|
||
opacity: 0.5;
|
||
width: 60rpx;
|
||
height: 40rpx;
|
||
border-radius: 10px;
|
||
}
|
||
.sex-wrapper {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-top: 10rpx;
|
||
}
|
||
.info-wrapper {
|
||
margin-left: 30rpx;
|
||
padding-top: 20rpx;
|
||
width: 500rpx;
|
||
}
|
||
.my-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.my-info-wrapper {
|
||
position: relative;
|
||
left: 30rpx;
|
||
top: -560rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 1000rpx;
|
||
}
|
||
.desc {
|
||
position: relative;
|
||
top: -520rpx;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
margin: 0 30rpx;
|
||
}
|
||
.item-num {
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
align-items: center;
|
||
}
|
||
.item-text {
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
font-weight: 300;
|
||
align-items: center;
|
||
}
|
||
.bottom-item {
|
||
margin-left: 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.bottom {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.follow-text {
|
||
font-size: 13px;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
align-items: center;
|
||
}
|
||
.follow-btn {
|
||
margin-right: 20rpx;
|
||
border-width: 1px;
|
||
border-color: #ffffff;
|
||
width: 200rpx;
|
||
height: 66rpx;
|
||
background-color: #545456;
|
||
opacity: 0.8;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.edit {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
margin-right: 30rpx;
|
||
}
|
||
.bottom-wrapper {
|
||
position: relative;
|
||
top: -510rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
}
|
||
.tab-normal {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
align-items: center;
|
||
color: #808080;
|
||
}
|
||
.tab-selected {
|
||
color: #ffffff;
|
||
}
|
||
.selected-tab {
|
||
margin-top: 5px;
|
||
height: 5rpx;
|
||
width: 250rpx;
|
||
border-radius: 6rpx;
|
||
background-color: #ef274d;
|
||
}
|
||
.vlog-cover {
|
||
align-items: center;
|
||
width: 248rpx;
|
||
height: 360rpx;
|
||
border-width: 1rpx;
|
||
}
|
||
.tab-item {
|
||
width: 250rpx;
|
||
align-items: center;
|
||
}
|
||
.tab-wrapper {
|
||
position: relative;
|
||
top: -480rpx;
|
||
height: 40px;
|
||
background-color: #171825;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
padding-top: 3px;
|
||
border-top-left-radius: 12px;
|
||
border-top-right-radius: 12px;
|
||
}
|
||
.empty-text {
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
margin-top: 200rpx;
|
||
}
|
||
.vlog-list {
|
||
position: relative;
|
||
top: -480rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
background-color: #000000;
|
||
}
|
||
.vlogBox {
|
||
position: relative;
|
||
}
|
||
.rightLike {
|
||
position: absolute;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
left: 5px;
|
||
bottom: 5px;
|
||
color: #ffffff;
|
||
}
|
||
.empty {
|
||
background-color: #000000;
|
||
width: 750rpx;
|
||
height: 300rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
position: relative;
|
||
top: -480rpx;
|
||
}
|
||
.not-empty-text {
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
}
|
||
.not-empty {
|
||
width: 750rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
position: relative;
|
||
top: -400rpx;
|
||
}
|
||
.isLogin-info-wrapper {
|
||
}
|
||
.page {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background-color: #000000;
|
||
}
|
||
</style>
|