Vue file: Nomessage is a custom component. When there is no data in the page, the ICON and text are displayed in the middle, so as to avoid the boring page without data! global.css can be blocked or removed first. A global css file
<template>
<div class="box">
<div class="nav">
<div :class="{'selected':tab === 1,'title':true}" @click="changTab(1)">
<p :class="tab === 1 ? 'p_active' : ''">未读</p>
</div>
<div :class="{'selected':tab === 2,'title':true}" @click="changTab(2)">
<p :class="tab === 2 ? 'p_active' : ''">已读</p>
</div>
<div :class="{'selected':tab === 3,'title':true}" @click="changTab(3)">
<p :class="tab === 3 ? 'p_active' : ''">全部</p>
</div>
</div>
<div class="context">
<div v-if="tab===1">
<nomessage v-if="unreadCount != null || unreadCount != undefined"></nomessage>
<strong v-else>未读{
{unreadCount}}条</strong>
</div>
<div v-else-if="tab===2">
<nomessage v-if="readCount != null || readCount != undefined"></nomessage>
<strong v-else>已读{
{readCount}}条</strong>
</div>
<div v-else>
<nomessage v-if="total != null || total != undefined"></nomessage>
<strong v-else>全部{
{total}}条</strong>
</div>
</div>
</div>
</template>
<script>
import nomessage from "../../../components/owner/nomessage.vue";
export default {
components: {
nomessage,
},
data() {
return {
tab: 1,
unreadCount: 0,
readCount: 0,
total: 0
}
},
methods: {
changTab(index) {
this.tab = index;
}
},
onLoad() {
this.$setTitle("消息列表");
}
}
</script>
<style src="../../../global/global.css"></style>
<style src="../notice/notice.css"></style>
css file:
.box {
width: 100%;
font-size: 28rpx;
}
.nav {
display: flex;
height: 60rpx;
line-height: 60rpx;
color: #353535;
}
.nav div {
flex: auto;
-webkit-flex: auto;
}
.title {
text-align: center;
}
.selected {
color: #4675f9;
}
p {
width: 70%;
margin: 0 15%;
height: 60rpx;
line-height: 60rpx;
}
.p_active {
border-bottom: 1rpx solid #4675f9;
}
.context {
text-align: center;
font-size: 50rpx;
color: #353535;
}
effect:
