new-88live/pages/favorite/index.vue

<template>
	<view class="fav-page">
		<view class="fav-hd" :style="{ paddingTop: statusBar + 'px' }">
			<text class="fav-title">我的收藏</text>
		</view>
		<view class="fav-body">
			<text class="fav-empty-emoji">💛</text>
			<text class="fav-empty-title">收藏列表</text>
			<text class="fav-empty-tip">还没有收藏的内容</text>
			<text class="fav-empty-tip">去首页发现感兴趣的攻略吧</text>
		</view>
		<app-tabbar active="favorite" />
	</view>
</template>

<script>
import AppTabbar from '@/components/app-tabbar/app-tabbar.vue'

export default {
	components: { AppTabbar },
	data() {
		return {
			statusBar: 0
		}
	},
	onLoad() {
		try {
			this.statusBar = uni.getSystemInfoSync().statusBarHeight || 0
		} catch (_) {}
	},
	onShow() {
		// 每次 onShow 都强制 hide 系统 tabbar，原因同 pages/index/index.vue
		setTimeout(() => {
			try { uni.hideTabBar({ animation: false }) } catch (_) {}
		}, 0)
	}
}
</script>

<style>
.fav-page {
	min-height: 100vh;
	background-color: #f5f6fa;
	display: flex;
	flex-direction: column;
}
.fav-hd {
	padding: 24rpx 32rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
}
.fav-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #1a1d29;
}
.fav-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 48rpx;
}
.fav-empty-emoji {
	font-size: 96rpx;
	margin-bottom: 32rpx;
}
.fav-empty-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d29;
	margin-bottom: 16rpx;
}
.fav-empty-tip {
	font-size: 26rpx;
	color: #8a8d9e;
	line-height: 40rpx;
}
</style>