diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index 67f1df5..ea8fd31 100644
--- a/pages/im/group/chat.vue
+++ b/pages/im/group/chat.vue
@@ -1,24 +1,26 @@
 <template>
-    <view class="group--chat">
-        <scroll-view class="body" :show-scrollbar="false">
-            <view class="cell" v-for="(item, index) in messages" :key="index">
-                <view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
-                <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
-                    <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
-                        :src="contact(item.senderUserId).portraitUrl" />
-                    <view class="msg">
-                        <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" :name="contact(item.senderUserId).name" />
-                        <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" :name="contact(item.senderUserId).name" />
-                        <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" :name="contact(item.senderUserId).name" />
+    <view class="chat">
+        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+
+        <view class="body">
+            <view class="scroll">
+                <view class="cell" v-for="(item, index) in messages" :key="index">
+                    <view class="time" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
+                    <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
+                        <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
+                            :src="contact(item.senderUserId).portraitUrl" />
+                        <view class="msg">
+                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" :name="contact(item.senderUserId).name" />
+                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" :name="contact(item.senderUserId).name" />
+                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" :name="contact(item.senderUserId).name" />
+                        </view>
                     </view>
                 </view>
             </view>
-            <view class="cell-footer" ref="chatBottom"></view>
-        </scroll-view>
-        <sent-message-bar class="message-bar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+        </view>
     </view>
 </template>
 
@@ -36,8 +38,6 @@
     import showText from '../components/showText'
     import sentMessageBar from '../components/sentMessageBar'
 
-    const ChatList = uni.requireNativePlugin('dom')
-
     export default {
         components: {
             showVoice,
@@ -58,7 +58,7 @@
         computed: {
             latestMessage() {
                 if (this.messages.length) {
-                    return this.messages[this.messages.length - 1]
+                    return this.messages[0]
                 } else {
                     return {
                         sentTime: 0
@@ -99,9 +99,9 @@
                 url: '/pages/im/group/info?targetId=' + this.targetId
             })
         },
-        methods: {
-            onScroll(e){
-                this.$refs.messageBar.onHidePopus()
+        methods: {
+            onScroll(e) {
+                this.$refs.messageBar.onHidePopus()
             },
             toUser(item) {
                 if (item.senderUserId == '__system__') {
@@ -125,7 +125,7 @@
                     10,
                     false,
                     (messages) => {
-                        this.messages = this.messages.concat(messages)
+                        this.messages.unshift(...messages)
                         this.scrollBottom()
                     })
             },
@@ -137,8 +137,8 @@
                     0,
                     20,
                     true,
-                    (messages) => {
-                        this.messages = messages.reverse()
+                    (messages) => {
+                        this.messages = messages
                         this.scrollBottom()
                     })
             },
@@ -153,103 +153,82 @@
                     // 更新badge提醒数量
                     im.setNotifyBadge()
                 }
-
-                setTimeout(() => {
-                    let el = this.$refs.chatBottom
-                    ChatList.scrollToElement(el, {
-                        offset: 0,
-                        animated: false
-                    })
-                }, 50)
             }
         }
     }
 </script>
 
-<style lang="scss" scoped>
-    .group--chat {
+<style scoped lang="scss">
+    /* 窗口 */
+    .chat {
         background: $window-color;
         height: 100vh;
         display: flex;
-        flex-direction: column;
-        overflow: scroll;
-        .body {
+        flex-direction: column-reverse;
+
+        .body {
+            overflow: scroll;
             flex: 1;
-            .cell {
-                padding: 10rpx 30rpx;
-
-                .cell-system {
-                    text-align: center;
-                }
-
-                .cell-item {
-                    display: flex;
-                    flex-direction: row;
-                    width: 690rpx;
-                    justify-content: flex-start;
-                    align-items: flex-start;
-                    margin-top: 20rpx;
-
-                    &.left {
-                        flex-direction: row;
-                    }
-
-                    &.right {
-                        flex-direction: row-reverse;
-
-                        .state {
-                            flex-direction: row;
-                            justify-content: flex-end;
-                        }
-                    }
-
-                    .avatar {
-                        width: 78rpx;
-                        height: 78rpx;
-                        background-color: white;
-                        border-radius: 10rpx;
-                    }
-
-                    .msg {
-                        margin: 0 20rpx;
-
-                        .user {
-                            font-size: 18rpx;
-                            line-height: 40rpx;
-                        }
-                    }
-                }
-
-                .cell-footer {
-                    height: 20rpx;
-                }
-            }
-        }
-
-        .footer {
-            background: white;
-            padding: 20rpx 30rpx;
+            height: 0;
             display: flex;
-            justify-content: space-between;
-            flex-direction: row;
+            flex-direction: column-reverse;
 
-            .msg-type {
-                width: 70rpx;
-                height: 70rpx;
+            .scroll {
+                display: flex;
+                flex-direction: column-reverse;
+                justify-content: flex-end;
 
-                .icon {
-                    margin: 5rpx;
-                    width: 60rpx;
-                    height: 60rpx;
+                .cell {
+                    padding: 10rpx 30rpx;
+
+                    .time {
+                        text-align: center;
+                        font-size: 24rpx;
+                        color: #666;
+                    }
+
+                    .cell-item {
+                        display: flex;
+                        width: 690rpx;
+                        justify-content: flex-start;
+
+                        &.left {
+                            flex-direction: row;
+                        }
+
+                        &.right {
+                            flex-direction: row-reverse;
+
+                            .state {
+                                flex-direction: row;
+                                justify-content: flex-end;
+                            }
+                        }
+
+                        .msg {
+                            margin: 0 20rpx;
+
+                            .state {
+                                padding-top: 10rpx;
+
+                                .state-text {
+                                    font-size: $title-size-m - 2;
+                                    color: rgba($color: $main-color, $alpha: 0.3)
+                                }
+
+                                .state-text-active {
+                                    font-size: $title-size-m - 2;
+                                    color: #cecece;
+                                }
+                            }
+                        }
+                    }
+
+                    .cell-footer {
+                        height: 20rpx;
+                    }
                 }
             }
         }
-    }
-    
-    .message-bar{
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
     }
 </style>
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index 6b88d15..4a5506f 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -147,7 +147,8 @@
             }
         }
     }
-</script>
+</script>
+
 <style scoped lang="scss">
     /* 窗口 */
     .chat {