Archivo Vue: Nomessage es un componente personalizado. Cuando no hay datos en la página, el ICONO y el texto se muestran en el medio, para evitar la aburrida página sin datos. global.css se puede bloquear o eliminar primero. Un archivo CSS global
<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>
archivo css:
.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;
}
efecto: