diff --git a/src/pages.json b/src/pages.json
index 494d007..d40209c 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -42,11 +42,18 @@
                 "navigationStyle": "custom"
             }
         },
-
+        // 消息
         {
             "path": "pages/message/index",
             "style": {
-                "navigationBarTitleText": "消息"
+                "navigationStyle": "custom"
+            }
+        },
+        // 消息 -- 聊天页面
+        {
+            "path": "pages/message-pages/index",
+            "style": {
+                "navigationStyle": "custom"
             }
         },
         // 个人中心
diff --git a/src/pages/message-pages/index.vue b/src/pages/message-pages/index.vue
new file mode 100644
index 0000000..0b83269
--- /dev/null
+++ b/src/pages/message-pages/index.vue
@@ -0,0 +1,158 @@
+<template>
+    <!-- 聊天页面 -->
+    <view class="h5-container message-pages">
+        <view style="padding: 15px">
+            <van-icon name="arrow-left" @click="onClickLeft" />
+            <text style="color: #000"> 老张租赁 </text>
+        </view>
+
+        <scroll-view scroll-y style="padding-bottom: 60px">
+            <van-cell-group inset style="flex: 1">
+                <view v-for="item in 20" :key="item">
+                    <view class="message-items left-message" v-if="item === 2 || item === 4">
+                        <view style="flex: 1">
+                            <text> 你还有货吗 </text>
+                        </view>
+                        <van-image
+                            round
+                            fit="cover"
+                            width="30px"
+                            height="30px"
+                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                        />
+                    </view>
+                    <view class="message-items right-message" v-if="item === 3 || item === 5">
+                        <van-image
+                            round
+                            fit="cover"
+                            width="30px"
+                            height="30px"
+                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                        />
+                        <view style="flex: 1">
+                            <text> 你还有货吗 </text>
+                        </view>
+                    </view>
+                </view>
+            </van-cell-group>
+        </scroll-view>
+
+        <view class="message-ipt">
+            <van-field rows="1" autosize type="textarea" />
+            <van-icon name="guide-o" color="#22ab9a" size="24" />
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useMemberStore } from '@/stores/index.js'
+import { onLoad } from '@dcloudio/uni-app'
+const memberStore = useMemberStore()
+const userName = ref('')
+const userAccount = ref('')
+
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+
+onLoad(() => {
+    userName.value = memberStore.userInfo.nickName
+    userAccount.value = memberStore.userInfo.userName
+})
+</script>
+
+<style lang="scss" scoped>
+.message-pages {
+    position: relative;
+    padding: 10px 0;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+
+:deep(.van-cell-group--inset) {
+    padding: 15px;
+}
+.message-items {
+    padding: 4px 0;
+    display: flex;
+    align-items: center;
+
+    .message-list {
+        width: 100%;
+        padding: 4px 0 4px 10px;
+        display: flex;
+        align-items: center;
+
+        .message-count {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            text-align: center;
+            border-radius: 10px;
+            background-color: #df534d;
+            color: #fff;
+        }
+    }
+
+    .message-info {
+        font-size: 14px;
+        color: #ccc;
+    }
+}
+.left-message view {
+    margin-right: 8px;
+    text-align: right;
+    text {
+        height: 28px;
+        padding: 0 6px;
+        display: inline-block;
+        background-color: #22ab9a;
+        line-height: 28px;
+        color: #fff;
+        border-top-left-radius: 14px;
+        border-bottom-left-radius: 14px;
+        border-bottom-right-radius: 14px;
+    }
+}
+.right-message view {
+    margin-left: 8px;
+    text-align: left;
+    text {
+        height: 28px;
+        padding: 0 6px;
+        display: inline-block;
+        background-color: #fff;
+        line-height: 28px;
+        color: #000;
+        border-top-right-radius: 14px;
+        border-bottom-right-radius: 14px;
+        border-bottom-left-radius: 14px;
+        border: 1px solid #eee;
+    }
+}
+
+.message-ipt {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 12px 0;
+    height: 60px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+
+    .van-field {
+        height: auto;
+        padding: 0;
+        margin-right: 6px;
+        border: 1px solid #22ab9b;
+        width: 80%;
+        border-radius: 6px;
+        caret-color: transparent;
+    }
+}
+</style>
diff --git a/src/pages/message/index.vue b/src/pages/message/index.vue
index a06d3d1..10a1e09 100644
--- a/src/pages/message/index.vue
+++ b/src/pages/message/index.vue
@@ -1,15 +1,110 @@
 <template>
     <!-- 消息 -->
+    <view class="h5-container message">
+        <view
+            style="
+                padding: 15px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            "
+        >
+            <view>
+                <text style="color: #000"> 消息 </text>
+                <text> (3) </text>
+            </view>
+            <view>
+                <van-icon name="guide-o" />
+                <text> 清除未读 </text>
+            </view>
+        </view>
+
+        <scroll-view scroll-y>
+            <van-cell-group inset style="flex: 1">
+                <view
+                    class="message-items"
+                    v-for="item in 20"
+                    :key="item"
+                    @click="onJumpToMessagePages"
+                >
+                    <van-image
+                        round
+                        fit="cover"
+                        width="48px"
+                        height="48px"
+                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                    />
+
+                    <view style="flex: 1">
+                        <view class="message-list">
+                            <text style="font-weight: bold"> 老张租赁 </text>
+                            <text> 9：12 </text>
+                        </view>
+                        <view class="message-list message-info">
+                            <text> 公司洽谈··· </text>
+                            <text class="message-count"> 2 </text>
+                        </view>
+                    </view>
+                </view>
+            </van-cell-group>
+        </scroll-view>
+    </view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import { useMemberStore } from '@/stores/index.js'
+import { onLoad } from '@dcloudio/uni-app'
+const memberStore = useMemberStore()
+const userName = ref('')
+const userAccount = ref('')
+
+onLoad(() => {
+    userName.value = memberStore.userInfo.nickName
+    userAccount.value = memberStore.userInfo.userName
+})
+const onJumpToMessagePages = () => {
+    uni.navigateTo({ url: '/pages/message-pages/index' })
+}
 </script>
 
-<style>
-.content {
-    width: 100%;
-    height: 100%;
-    text-align: center;
+<style lang="scss" scoped>
+.message {
+    padding: 10px 0;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+
+:deep(.van-cell-group--inset) {
+    padding: 15px;
+}
+.message-items {
+    padding: 4px 0;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ccc;
+
+    .message-list {
+        width: 100%;
+        padding: 4px 0 4px 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .message-count {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            text-align: center;
+            border-radius: 10px;
+            background-color: #df534d;
+            color: #fff;
+        }
+    }
+    .message-info {
+        font-size: 14px;
+        color: #ccc;
+    }
 }
 </style>