diff --git a/src/components/MessageCard.vue b/src/components/MessageCard.vue
new file mode 100644
index 0000000..a6e02a5
--- /dev/null
+++ b/src/components/MessageCard.vue
@@ -0,0 +1,89 @@
+<script setup>
+import {computed} from 'vue';
+import messageIcon from "../static/icons/messageIcon.png";
+import XActionsheet from "./XActionsheet.vue";
+
+const itemList = computed(() => {
+    const item = [];
+    true ?
+        item.push({text: '标记未读', type: 0}) :
+        item.push({text: '标记已读', type: 1});
+    return item;
+})
+const {contextRow} = defineProps({
+    contextRow: {
+        type: String,
+        default: 'ellipsis-1'
+    }
+});
+
+const selectActionsheet = (e) => {
+    console.log(e);
+}
+</script>
+
+<template>
+    <x-actionsheet
+        @success="selectActionsheet"
+        :itemList="itemList">
+        <view
+            class="!py-[30rpx] !px-[24rpx] bg-[#fff] rounded-[8rpx] !flex items-center gap-[20rpx] overflow-hidden relative !mb-[20rpx]">
+            <image class="!size-[72rpx] flex-shrink-0" mode="aspectFill" :src="messageIcon"></image>
+            <view class="flex-grow !flex flex-col gap-[12rpx]">
+                <view class="!flex justify-between items-center">
+                    <view class="bh">任务编号: DF12122</view>
+                    <view class="time">2024-01-26 14:00</view>
+                </view>
+                <view :class="['context', contextRow]">
+                    商家:您的回填数据1由于***未通过，请按照文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档文档中操作
+                </view>
+            </view>
+
+            <view class="status">置顶</view>
+        </view>
+    </x-actionsheet>
+</template>
+
+<style lang="scss" scoped>
+.status {
+    padding: 5rpx 16rpx;
+    background: rgb(253, 244, 191);
+    border-bottom-left-radius: 8rpx;
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: rgb(162, 109, 10);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: center;
+}
+
+.context {
+    color: rgb(78, 89, 105);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.bh {
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.time {
+    color: rgb(134, 144, 156);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+</style>
diff --git a/src/components/XActionsheet.vue b/src/components/XActionsheet.vue
new file mode 100644
index 0000000..32443ca
--- /dev/null
+++ b/src/components/XActionsheet.vue
@@ -0,0 +1,28 @@
+<script setup>
+import {ref} from "vue";
+
+const emits = defineEmits(['success']);
+const show = ref(false);
+
+const success = (e) => {
+    emits('success', e);
+}
+</script>
+
+<template>
+    <view @longpress="show=true">
+        <slot></slot>
+    </view>
+
+    <tui-actionsheet
+        v-bind="$attrs"
+        :show="show"
+        @click="success"
+        @cancel="show=false">
+
+    </tui-actionsheet>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/XInput.vue b/src/components/XInput.vue
index 90320c9..0f9e460 100644
--- a/src/components/XInput.vue
+++ b/src/components/XInput.vue
@@ -1,8 +1,12 @@
 <script setup>
-const {placeholder} = defineProps({
+const {placeholder, height} = defineProps({
     placeholder: {
         type: String,
         default: "",
+    },
+    height: {
+        type: String,
+        default: "96rpx",
     }
 });
 
@@ -10,7 +14,8 @@ const modelValue = defineModel();
 </script>
 
 <template>
-    <view class="x-input h-[96rpx] rounded-[12rpx] !flex items-center px-[32rpx]">
+    <view class="x-input rounded-[12rpx] !flex items-center px-[32rpx]">
+        <slot name="prefix"></slot>
         <input v-model="modelValue" :placeholder="placeholder"></input>
         <slot name="suffix"></slot>
     </view>
@@ -19,6 +24,7 @@ const modelValue = defineModel();
 <style lang="scss" scoped>
 .x-input {
     background-color: #F2F3F5;
+    height: v-bind(height);
 
     :deep(input) {
         background-color: rgba(0,0,0,0);
diff --git a/src/pages/messageCenter/index.vue b/src/pages/messageCenter/index.vue
index d9ff771..d112253 100644
--- a/src/pages/messageCenter/index.vue
+++ b/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>
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 1b79ef9..7c89ced 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -16,7 +16,29 @@ $primary-color: #2D5CF6;
 .tui-alert-box {
     border-radius: 16rpx !important;
     overflow: hidden;
+
     .tui-alert-content {
         padding: 40rpx 32rpx !important;
     }
 }
+
+.tui-actionsheet {
+    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+}
+
+.ellipsis-1 {
+    display: -webkit-box; /* 创建一个伸缩容器 */
+    -webkit-box-orient: vertical; /* 设置伸缩容器的方向为垂直 */
+    -webkit-line-clamp: 1; /* 限制显示的行数为2行 */
+    overflow: hidden; /* 超出内容隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+
+.ellipsis-2 {
+    display: -webkit-box; /* 创建一个伸缩容器 */
+    -webkit-box-orient: vertical; /* 设置伸缩容器的方向为垂直 */
+    -webkit-line-clamp: 2; /* 限制显示的行数为2行 */
+    overflow: hidden; /* 超出内容隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
diff --git a/src/static/icons/messageIcon.png b/src/static/icons/messageIcon.png
new file mode 100644
index 0000000..b261207
Binary files /dev/null and b/src/static/icons/messageIcon.png differ