update

src/pages/messageCenter/index.vue

@@ -1,9 +1,51 @@
 <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>