xl-mobile/src/pages/messageCenter/index.vue

<script setup>
import XNav from "../../components/XNav.vue";
import {ref} from "vue";
import XInput from "../../components/XInput.vue";
import XLink from "../../components/XLink.vue";
import MessageCard from "../../components/MessageCard.vue";

const currentTab = ref(0);
const tabs = [
    {
        name: '任务消息',
    },
    {
        name: '平台消息',
    },
];
</script>

<template>
    <!--消息中心-->
    <XNav :show-back="false"></XNav>

    <view class="w-full bg-[#fff]">
        <tui-tabs :tabs="tabs" :currentTab="currentTab" @change="({index}) => currentTab=index" height="90"></tui-tabs>

        <view class="!pt-[24rpx] !pb-[28rpx] !px-[32rpx] !flex gap-[32rpx] items-center">
            <view class="flex-grow">
                <x-input height="72rpx" placeholder="请输入要查询的内容">
                    <template #prefix>
                        <tui-icon name="search" size="18" class="!mr-[12rpx]"></tui-icon>
                    </template>
                </x-input>
            </view>

            <x-link>搜索</x-link>
        </view>
    </view>

    <view class="!px-[20rpx] !py-[16rpx]">
        <radio>只看未读</radio>
    </view>

    <view class="!flex flex-col !px-[20rpx]">
        <MessageCard
            :context-row="currentTab === 0 ? 'ellipsis-1': 'ellipsis-2'"
            v-for="item in 100">
        </MessageCard>
    </view>
</template>

<style scoped>

</style>