From eefe793b8fe8ec544474b5f713aad4d3a332d732 Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Wed, 11 Mar 2026 18:31:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=9F=AD=E4=BF=A1=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/main.css                               |   1 +
 components/message/chat/chat-layout.vue       | 275 +++++++
 components/message/list.vue                   | 145 ----
 components/message/list/list.vue              | 717 ++++++++++++++++++
 .../message/{ => list}/message-nav-bar.vue    | 150 ++--
 main.js                                       |   2 +-
 pages.json                                    |  18 +-
 pages/message/chat-page/chat-page.vue         |  36 +
 pages/message/list-index.vue                  | 109 ++-
 .../fliggy-train-tickets.vue                  |   4 +-
 .../qunar-train-tickets.vue                   |   2 +-
 static/image/phone-message/bianji.png         | Bin 0 -> 930 bytes
 static/image/phone-message/huawei/default.png | Bin 0 -> 1895 bytes
 static/image/phone-message/huawei/delete.png  | Bin 0 -> 1994 bytes
 static/image/phone-message/huhuan.png         | Bin 0 -> 1605 bytes
 .../image/phone-message/iphone/chat-left.png  | Bin 0 -> 1125 bytes
 .../phone-message/iphone/left-msg-box.png     | Bin 0 -> 818 bytes
 .../phone-message/iphone/right-msg-box.png    | Bin 0 -> 832 bytes
 static/image/phone-message/iphone/right.png   | Bin 0 -> 821 bytes
 static/image/phone-message/mi/back.png        | Bin 0 -> 983 bytes
 static/image/phone-message/mi/chat-left.png   | Bin 0 -> 1222 bytes
 static/image/phone-message/mi/default.png     | Bin 0 -> 1709 bytes
 static/image/phone-message/mi/mic.png         | Bin 0 -> 2200 bytes
 static/image/phone-message/oppo/chat-left.png | Bin 0 -> 1316 bytes
 static/image/phone-message/oppo/default.png   | Bin 0 -> 1611 bytes
 static/image/phone-message/shanchu.png        | Bin 0 -> 1065 bytes
 static/image/phone-message/vivo/default.png   | Bin 0 -> 1911 bytes
 utils/common.js                               |  58 ++
 28 files changed, 1298 insertions(+), 219 deletions(-)
 create mode 100644 components/message/chat/chat-layout.vue
 delete mode 100644 components/message/list.vue
 create mode 100644 components/message/list/list.vue
 rename components/message/{ => list}/message-nav-bar.vue (72%)
 create mode 100644 pages/message/chat-page/chat-page.vue
 create mode 100644 static/image/phone-message/bianji.png
 create mode 100644 static/image/phone-message/huawei/default.png
 create mode 100644 static/image/phone-message/huawei/delete.png
 create mode 100644 static/image/phone-message/huhuan.png
 create mode 100644 static/image/phone-message/iphone/chat-left.png
 create mode 100644 static/image/phone-message/iphone/left-msg-box.png
 create mode 100644 static/image/phone-message/iphone/right-msg-box.png
 create mode 100644 static/image/phone-message/iphone/right.png
 create mode 100644 static/image/phone-message/mi/back.png
 create mode 100644 static/image/phone-message/mi/chat-left.png
 create mode 100644 static/image/phone-message/mi/default.png
 create mode 100644 static/image/phone-message/mi/mic.png
 create mode 100644 static/image/phone-message/oppo/chat-left.png
 create mode 100644 static/image/phone-message/oppo/default.png
 create mode 100644 static/image/phone-message/shanchu.png
 create mode 100644 static/image/phone-message/vivo/default.png

diff --git a/common/main.css b/common/main.css
index a4d30ce..6e7522f 100644
--- a/common/main.css
+++ b/common/main.css
@@ -261,6 +261,7 @@
 }
 
 .flex-column {
+	display: flex;
 	flex-direction: column;
 }
 
diff --git a/components/message/chat/chat-layout.vue b/components/message/chat/chat-layout.vue
new file mode 100644
index 0000000..13e456d
--- /dev/null
+++ b/components/message/chat/chat-layout.vue
@@ -0,0 +1,275 @@
+<template>
+    <view class="page-container flex-column" :class="`${phone}-style`">
+        <view class="status-placeholder w100" :style="{ height: `${data.statusBarHeight}px` }"></view>
+        <view class="top-box">
+            <slot name="top">
+                <view class="top-container">
+                    <view class="flex-align-center flex-justify-between">
+                        <view class="left flex-align-center">
+                            <image @click="util.goBack()" :src="`/static/image/phone-message/${phone}/back.png`">
+                            </image>
+                            <view class="number-box">256</view>
+                        </view>
+                        <view class="center">
+                            <image class="img shrink-0"
+                                :src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
+                            </image>
+                        </view>
+                        <view class="right"></view>
+                    </view>
+                    <view class="text-box flex-align-center flex-justify-center">
+                        <text class="title">{{ chatInfo.title }}</text>
+                        <uni-icons type="right" size="10" color="#D8D8D8"></uni-icons>
+                    </view>
+                </view>
+            </slot>
+        </view>
+        <view class="center-box flex-1">
+            <slot></slot>
+        </view>
+        <view class="bottom-box">
+            <slot name="bottom">
+                <view class="right-container flex-align-center">
+                    <image class="add-img shrink-0" :src="`/static/image/phone-message/${phone}/chat-left.png`"></image>
+                    <view class="search-box flex-1 flex-align-center">
+                        <input class="input flex-1" placeholder="信息 · 短信" type="text">
+                        <image v-if="phone == 'iphone'" class="right-icon"
+                            src="/static/image/phone-message/iphone/mic.png"></image>
+                    </view>
+                    <view v-if="phone != 'iphone'">
+                        <image class="right-icon" src="/static/image/phone-message/mi/mic.png"></image>
+                    </view>
+                </view>
+            </slot>
+        </view>
+    </view>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { onLoad, onPageScroll } from "@dcloudio/uni-app";
+import { stringUtil, util } from '@/utils/common.js';
+const props = defineProps({
+    // 手机品牌
+    phone: {
+        type: String,
+        default: 'iphone'
+    },
+    chatInfo: {
+        type: Object,
+        default: {
+            unRead: false,
+            noNotice: false,
+            img: "",
+            title: "淘宝通知",
+            content: "您关注的商品降价啦，快来抢购吧！",
+            time: "2026-02-20 20:55:12"
+        }
+    }
+})
+
+const data = reactive({
+    statusBarHeight: 0,
+})
+
+onMounted(() => {
+    // 同步获取系统信息
+    const systemInfo = uni.getSystemInfoSync();
+    data.statusBarHeight = systemInfo.statusBarHeight || 0;
+
+})
+
+</script>
+<style>
+@import '@/common/main.css';
+</style>
+<style lang="less" scoped>
+.page-container {
+    width: 100vw;
+    height: 100vh;
+    background-color: #fff;
+}
+
+//苹果样式
+.iphone-style {
+
+
+    .top-box {
+
+        .top-container {
+            padding: 32rpx 24rpx 20rpx;
+            background-color: #F7F7F7;
+            border-bottom: 0.5px solid #B5B5B5;
+
+            .left {
+                width: 180rpx;
+
+                image {
+                    width: 40rpx;
+                    height: 40rpx;
+                }
+
+                .number-box {
+                    height: 36rpx;
+                    font-size: 24rpx;
+                    line-height: 24rpx;
+                    padding: 6rpx 10rpx;
+                    border-radius: 18rpx;
+                    color: #fff;
+                    background-color: #0276FF;
+                    margin-left: 4rpx;
+                }
+            }
+
+            .center {
+                .img {
+                    width: 96rpx;
+                    height: 96rpx;
+                }
+            }
+
+            .right {
+                width: 180rpx;
+
+            }
+
+            .text-box {
+                .title {
+                    font-size: 20rpx;
+                    color: #1A1A1A;
+                    left: 20rpx;
+                    margin-right: 6rpx;
+                }
+            }
+        }
+
+
+    }
+
+    .right-container {
+        padding: 10rpx 28rpx;
+
+        .add-img {
+            width: 66rpx;
+            height: 66rpx;
+            margin-right: 24rpx;
+        }
+
+        .search-box {
+            height: 70rpx;
+            border-radius: 35rpx 35rpx 35rpx 35rpx;
+            border: 2rpx solid #DFDFDF;
+            padding: 0 26rpx;
+
+            .input {
+                ::v-deep .input-placeholder {
+                    color: #C3C3C3;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                }
+            }
+
+            .right-icon {
+                width: 32rpx;
+                height: 32rpx;
+                margin-left: 20rpx;
+            }
+        }
+
+    }
+}
+
+//小米样式
+.mi-style {
+
+    .top-box {
+
+        .top-container {
+            padding: 32rpx 24rpx 20rpx;
+            background-color: #F7F7F7;
+            border-bottom: 0.5px solid #B5B5B5;
+
+            .left {
+                width: 180rpx;
+
+                image {
+                    width: 40rpx;
+                    height: 40rpx;
+                }
+
+                .number-box {
+                    height: 36rpx;
+                    font-size: 24rpx;
+                    line-height: 24rpx;
+                    padding: 6rpx 10rpx;
+                    border-radius: 18rpx;
+                    color: #fff;
+                    background-color: #0276FF;
+                    margin-left: 4rpx;
+                }
+            }
+
+            .center {
+                .img {
+                    width: 96rpx;
+                    height: 96rpx;
+                }
+            }
+
+            .right {
+                width: 180rpx;
+
+            }
+
+            .text-box {
+                .title {
+                    font-size: 20rpx;
+                    color: #1A1A1A;
+                    left: 20rpx;
+                    margin-right: 6rpx;
+                }
+            }
+        }
+
+
+    }
+
+    .bottom-box {
+        .right-container {
+            padding: 10rpx 28rpx;
+
+            .add-img {
+                width: 66rpx;
+                height: 66rpx;
+                margin-right: 24rpx;
+            }
+
+            .search-box {
+                height: 70rpx;
+                border-radius: 35rpx 35rpx 35rpx 35rpx;
+                border: 2rpx solid #DFDFDF;
+                padding: 0 26rpx;
+
+                .input {
+                    ::v-deep .input-placeholder {
+                        color: #C3C3C3;
+                        font-size: 32rpx;
+                        line-height: 32rpx;
+                    }
+                }
+
+                .right-icon {
+                    width: 32rpx;
+                    height: 32rpx;
+                    margin-left: 20rpx;
+                }
+            }
+
+            .right-icon {
+                width: 72rpx;
+                height: 72rpx;
+            }
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/components/message/list.vue b/components/message/list.vue
deleted file mode 100644
index c3ed4c8..0000000
--- a/components/message/list.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-    <view :style="`${phone}-style`">
-        <uni-swipe-action class="swipe-action">
-            <!-- 使用插槽 （请自行给定插槽内容宽度）-->
-            <uni-swipe-action-item>
-                <view>
-                    <view class="item flex-align-center">
-                        <view class="dot"></view>
-                        <image class="img shrink-0" :src="`/static/image/phone-message/${phone}/default.png`"></image>
-                        <view class="border-box  m-l-24 flex-1 flex flex-align-start">
-                            <view class="main-box flex-1">
-                                <view class="title-box flex-between">
-                                    <text class="title">title</text>
-                                    <text class="time">昨天</text>
-                                </view>
-                                <view class="content">市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好...</view>
-                            </view>
-                            <view class="box-right h100 flex-column flex-align-center">
-                                <uni-icons type="right" size="14" color="#C1C1C1"></uni-icons>
-                                <image class="img" src="/static/image/phone-message/iphone/notice.png"></image>
-                            </view>
-                        </view>
-                    </view>
-                </view>
-                <template v-slot:right>
-                    <view><text>删除</text></view>
-                </template>
-            </uni-swipe-action-item>
-        </uni-swipe-action>
-    </view>
-</template>
-<script setup>
-import {
-    ref,
-    reactive,
-    computed
-} from 'vue'
-import {
-    util
-} from '@/utils/common.js';
-
-const props = defineProps({
-    // 手机品牌
-    phone: {
-        type: String,
-        default: 'iphone'
-    }
-})
-</script>
-<style>
-@import '@/common/main.css';
-</style>
-<style lang="less" scoped>
-.m-t-4 {
-    margin-top: 4rpx;
-}
-
-.m-l-24 {
-    margin-left: 24rpx;
-}
-
-.iphone-style {
-
-    .swipe-action {
-        margin-top: 24rpx;
-    }
-
-    .item:first-child {
-        .border-box {
-            position: relative;
-        }
-
-        .border-box::before {
-            position: absolute;
-            content: '';
-            width: 100%;
-            height: 1px;
-            top: -1px;
-            left: 0;
-            right: 0;
-            box-shadow: 0 0.3px 0 0 #C2C2C2;
-        }
-    }
-
-    .item {
-        padding: 0 0 0 14rpx;
-        height: 146rpx;
-
-        .dot {
-            width: 20rpx;
-            height: 20rpx;
-            background-color: #007BFD;
-            border-radius: 50%;
-        }
-
-        .img {
-            width: 84rpx;
-            height: 84rpx;
-            margin-left: 16rpx;
-        }
-
-        .border-box {
-            padding: 18rpx 14rpx 14rpx 0;
-            height: 100%;
-            box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
-        }
-
-        .main-box {
-            .title-box {
-                margin-bottom: 6rpx;
-
-                .title {
-                    color: #1A1A1A;
-                    font-size: 32rpx;
-                    line-height: 32rpx;
-                }
-
-                .time {
-                    color: #838383;
-                    font-size: 28rpx;
-                    line-height: 28rpx;
-                }
-            }
-
-            .content {
-                font-size: 28rpx;
-                line-height: 38rpx;
-                color: #838383;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-            }
-        }
-
-        .box-right {
-            .img {
-                width: 28rpx;
-                height: 28rpx;
-                margin: 0;
-            }
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/components/message/list/list.vue b/components/message/list/list.vue
new file mode 100644
index 0000000..2ff0886
--- /dev/null
+++ b/components/message/list/list.vue
@@ -0,0 +1,717 @@
+<template>
+    <view :style="`${phone}-style`">
+        <uni-swipe-action class="swipe-action">
+            <!-- 使用插槽 （请自行给定插槽内容宽度）-->
+            <uni-swipe-action-item class="swipe-action-item" v-for="(item, index) in list" :key="item.id">
+                <view class="flex flex-align-center " @click="clickItem(item)">
+
+                    <view class="item flex w100">
+                        <view class="flex flex-align-center left-box">
+                            <view :class="{ 'opacity-0': !item.unRead }" class="dot shrink-0"><text
+                                    v-if="phone == 'huawei' || phone == 'oppo'">{{ item.unReadNumber
+                                        > 99
+                                        ? '99+' : (item.unReadNumber || 1) }}</text>
+                            </view>
+                            <image class="img shrink-0"
+                                :src="item.img || `/static/image/phone-message/${phone}/default.png`">
+                            </image>
+                        </view>
+                        <view class="border-box  m-l-24 flex-1 flex flex-align-start">
+                            <view class="main-box flex-1">
+                                <view class="title-box flex-between">
+                                    <text class="title">{{ item.title }}</text>
+                                    <text class="time">{{ formatDate(item.time) }}</text>
+                                </view>
+                                <view class="content">{{ item.content }}</view>
+                            </view>
+                            <view class="box-right h100 flex-column flex-align-center">
+                                <image v-if="phone == 'iphone'" class="m-t-4"
+                                    src="/static/image/phone-message/iphone/right.png"></image>
+                                <image v-if="item.noNotice && phone == 'iphone'" class="m-t-8"
+                                    src="/static/image/phone-message/iphone/notice.png"></image>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <template v-slot:right>
+                    <view class="flex flex-align-center" style="margin-left: 1px;">
+                        <view v-if="phone == 'iphone'" class="btn flex-center flex-align-center edit">
+                            <image src="/static/image/phone-message/iphone/mute.png"></image>
+                        </view>
+                        <view class="btn flex-center flex-align-center delete">
+                            <image
+                                :src="`/static/image/phone-message/${phone == 'huawei' || phone == 'vivo' ? 'huawei' : 'iphone'}/delete.png`">
+                            </image>
+                        </view>
+                    </view>
+
+                </template>
+            </uni-swipe-action-item>
+        </uni-swipe-action>
+    </view>
+</template>
+<script>
+import { stringUtil } from '@/utils/common.js';
+
+const defaultList = [
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        unReadNumber: 100,
+        noNotice: true,
+        img: "",
+        title: "系统通知",
+        content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
+        time: "2026-03-11 08:31:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        noNotice: true,
+        img: "",
+        title: "12306",
+        content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
+        time: "2026-03-10 14:30:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "支付宝支付",
+        content: "支付成功，您在XX超市消费了 45.00 元。",
+        time: "2026-03-10 18:20:15"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "花呗提醒",
+        content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
+        time: "2026-03-09 09:00:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        noNotice: false,
+        img: "",
+        title: "顺丰速运",
+        content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
+        time: "2026-03-01 10:15:22"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: true,
+        img: "",
+        title: "蚂蚁森林",
+        content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
+        time: "2026-02-28 07:45:10"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "余额宝",
+        content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
+        time: "2026-02-27 06:30:00"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "10086",
+        content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
+        time: "2026-02-26 15:10:45"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: true,
+        noNotice: false,
+        img: "",
+        title: "饿了么",
+        content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
+        time: "2026-02-25 12:40:33"
+    },
+    {
+        id: stringUtil.uuid(),
+        unRead: false,
+        noNotice: false,
+        img: "",
+        title: "淘宝通知",
+        content: "您关注的商品降价啦，快来抢购吧！",
+        time: "2026-02-20 20:55:12"
+    }
+]
+</script>
+<script setup>
+import {
+    ref,
+    reactive,
+    computed
+} from 'vue'
+import {
+    util,
+    dateUtil
+} from '@/utils/common.js';
+// 定义事件
+const emit = defineEmits(['item-click'])
+const props = defineProps({
+    // 手机品牌
+    phone: {
+        type: String,
+        default: 'iphone'
+    },
+    list: {
+        type: Array,
+        default: () => defaultList
+    }
+})
+
+/**
+ * 时间日期格式化判断
+ * @param date 
+ */
+const formatDate = (date) => {
+    if (props.phone == 'oppo') {
+        return dateUtil.formatMessageTime(date, true)
+    } else if (props.phone == 'huawei') {
+        return dateUtil.formatMessageTime(date, true, 'YYYY年M月D日')
+    } else if (props.phone == 'vivo') {
+        let d = date;
+        if (typeof d === 'string') {
+            d = new Date(d.replace(/-/g, '/'));
+        } else if (typeof d === 'number') {
+            d = new Date(d);
+        }
+        const isCurrentYear = d.getFullYear() === new Date().getFullYear();
+        return dateUtil.formatMessageTime(date, true, isCurrentYear ? 'M月D日' : 'YYYY/M/D')
+    } else {
+        return dateUtil.formatMessageTime(date)
+    }
+}
+
+/**
+ * 点击列表元素
+ */
+const clickItem = (item) => {
+    emit('item-click', item)
+}
+</script>
+<style>
+@import '@/common/main.css';
+</style>
+<style lang="less" scoped>
+.m-t-4 {
+    margin-top: 4rpx;
+}
+
+.m-t-8 {
+    margin-top: 8rpx;
+}
+
+.m-l-24 {
+    margin-left: 24rpx;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.swipe-action-item {
+    background-color: #FFFFFF;
+}
+
+// 苹果样式
+.iphone-style {
+
+    .swipe-action {
+        margin-top: 28rpx;
+    }
+
+    .swipe-action-item:first-child {
+        .border-box {
+            position: relative;
+        }
+
+        .border-box::before {
+            position: absolute;
+            content: '';
+            width: 100%;
+            height: 1px;
+            top: 0;
+            left: 0;
+            right: 0;
+            background-color: #D8D8D8;
+            transform: scaleY(0.3);
+        }
+    }
+
+    .item {
+        padding: 0 0 0 14rpx;
+        height: 146rpx;
+        align-items: center;
+
+        .dot {
+            width: 20rpx;
+            height: 20rpx;
+            background-color: #007BFD;
+            border-radius: 50%;
+        }
+
+        .img {
+            width: 84rpx;
+            height: 84rpx;
+            margin-left: 16rpx;
+        }
+
+        .border-box {
+            position: relative;
+            padding: 18rpx 14rpx 14rpx 0;
+            height: 100%;
+            // box-shadow: inset 0 -0.3px 0 0 #D8D8D8;
+        }
+
+        .border-box::after {
+            position: absolute;
+            content: '';
+            width: 100%;
+            height: 1px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: #D8D8D8;
+            transform: scaleY(0.3);
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 6rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 600;
+                }
+
+                .time {
+                    color: #838383;
+                    font-size: 28rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #838383;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 146rpx;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }
+
+    .delete {
+        background-color: #FC3E30;
+    }
+
+    .edit {
+        background-color: #5855D6;
+    }
+}
+
+// 小米样式
+.mi-style {
+    .item {
+        padding-top: 44rpx;
+        height: 170rpx;
+
+        .left-box {
+            position: relative;
+            height: 40px;
+            align-items: flex-start;
+            padding-left: 54rpx;
+        }
+
+        .dot {
+            position: absolute;
+            width: 20rpx;
+            height: 20rpx;
+            background-color: #FA3D30;
+            border-radius: 50%;
+            left: 16rpx;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .img {
+            width: 76rpx;
+            height: 76rpx;
+        }
+
+        .border-box {
+            position: relative;
+            padding: 4rpx 52rpx 8rpx 0;
+            margin-left: 22rpx;
+            height: 100%;
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 6rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                }
+
+                .time {
+                    color: #9A9A9A;
+                    font-size: 26rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 26rpx;
+                line-height: 38rpx;
+                color: #656565;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 146rpx;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }
+
+    .delete {
+        background-color: #FC3E30;
+    }
+
+    .edit {
+        background-color: #5855D6;
+    }
+}
+
+// oppo样式
+.oppo-style {
+    .item {
+        padding-top: 28rpx;
+        height: 178rpx;
+
+        .left-box {
+            position: relative;
+            height: 40px;
+            align-items: flex-start;
+            padding-left: 34rpx;
+        }
+
+        .dot {
+            position: absolute;
+            padding: 4rpx 10rpx;
+            background-color: #E93A22;
+            color: #FFFFFF;
+            line-height: 20rpx;
+            font-size: 20rpx;
+            border-radius: 16rpx;
+            right: -8rpx;
+            top: -4rpx;
+            z-index: 1;
+            border: 2rpx solid #FFFFFF;
+        }
+
+        .img {
+            width: 76rpx;
+            height: 76rpx;
+        }
+
+        .border-box {
+            position: relative;
+            padding: 4rpx 34rpx 28rpx 0;
+            margin-left: 32rpx;
+            height: 100%;
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 16rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 500;
+                }
+
+                .time {
+                    color: #656565;
+                    font-size: 26rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #737373;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 146rpx;
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+    }
+
+    .delete {
+        background-color: #FC3E30;
+    }
+
+}
+
+// 华为样式
+.huawei-style {
+    .item {
+        padding: 0 32rpx;
+        height: 156rpx;
+        align-items: center;
+
+        .left-box {
+            position: relative;
+            height: 40px;
+            align-items: flex-start;
+        }
+
+        .dot {
+            position: absolute;
+            padding: 6rpx 10rpx;
+            background-color: #E93A22;
+            color: #FFFFFF;
+            line-height: 20rpx;
+            font-size: 20rpx;
+            border-radius: 16rpx;
+            right: -8rpx;
+            top: -12rpx;
+            z-index: 1;
+        }
+
+        .img {
+            width: 76rpx;
+            height: 76rpx;
+        }
+
+        .border-box {
+            padding: 18rpx 0;
+            position: relative;
+            margin-left: 30rpx;
+            margin-top: 2rpx;
+            height: 100%;
+            box-shadow: 0 -0.3px 0 0 #CFCFCF;
+        }
+
+        // .border-box::after {
+        //     position: absolute;
+        //     content: '';
+        //     width: 100%;
+        //     height: 1px;
+        //     bottom: 0;
+        //     left: 0;
+        //     right: 0;
+        //     background-color: #CFCFCF;
+        //     transform: scaleY(0.3);
+        // }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 6rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 500;
+                }
+
+                .time {
+                    color: #656565;
+                    font-size: 24rpx;
+                    line-height: 28rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #6F6F6F;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 156rpx;
+
+        image {
+            width: 76rpx;
+            height: 76rpx;
+        }
+    }
+
+    .delete {
+        background-color: #F4F4F4;
+    }
+
+}
+
+// vivo样式
+.vivo-style {
+    .item {
+        padding: 0 50rpx 0 24rpx;
+        height: 172rpx;
+        align-items: center;
+
+
+        .dot {
+            width: 12rpx;
+            height: 12rpx;
+            background-color: #409DFE;
+            border-radius: 50%;
+            flex-shrink: 0;
+            margin-right: 10rpx;
+        }
+
+
+        .img {
+            width: 80rpx;
+            height: 80rpx;
+        }
+
+        .border-box {
+            padding: 28rpx 0 18rpx;
+            position: relative;
+            margin-left: 24rpx;
+            margin-top: 2rpx;
+            height: 100%;
+        }
+
+        .main-box {
+            .title-box {
+                margin-bottom: 18rpx;
+
+                .title {
+                    color: #1A1A1A;
+                    font-size: 32rpx;
+                    line-height: 32rpx;
+                    font-weight: 500;
+                }
+
+                .time {
+                    color: #7C7C7C;
+                    font-size: 26rpx;
+                    line-height: 26rpx;
+                }
+            }
+
+            .content {
+                font-size: 28rpx;
+                line-height: 38rpx;
+                color: #6F6F6F;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+        }
+
+        .box-right {
+            image {
+                width: 28rpx;
+                height: 28rpx;
+            }
+        }
+    }
+
+    .btn {
+        width: 140rpx;
+        height: 156rpx;
+
+        image {
+            width: 76rpx;
+            height: 76rpx;
+        }
+    }
+
+    .delete {
+        background-color: #F4F4F4;
+    }
+
+}
+</style>
diff --git a/components/message/message-nav-bar.vue b/components/message/list/message-nav-bar.vue
similarity index 72%
rename from components/message/message-nav-bar.vue
rename to components/message/list/message-nav-bar.vue
index de19cf2..977d2ec 100644
--- a/components/message/message-nav-bar.vue
+++ b/components/message/list/message-nav-bar.vue
@@ -1,57 +1,65 @@
 <template>
     <view :class="`${phone}-style`">
         <!-- 导航样式 -->
-        <NavBar :isBack="false">
-            <!-- 左侧文字图标 -->
-            <template v-slot:left>
-                <view v-if="phone == 'iphone'" class="flex flex-align-center">
-                    <image @click="util.goBack" class="left-icon" src="/static/image/phone-message/iphone/back.png"
-                        mode=""></image>
-                    <text class="left-text">过滤条件</text>
-                </view>
-                <view v-if="(phone == 'huawei' && isScroll) || phone == 'vivo'" class="flex flex-align-center">
-                    <text class="left-text">信息</text>
-                </view>
-            </template>
-            <!-- 中间标题 -->
-            <template v-slot:center>
-                <view v-if="phone == 'iphone' && isScroll" class="center-text">
-                    信息
-                </view>
-            </template>
-            <!-- 右侧图标 -->
-            <template v-slot:right>
-                <!-- iphone -->
-                <view v-if="phone == 'iphone'">
-                    <image class="right-icon mg-r-30" src="/static/image/phone-message/iphone/more.png" mode=""></image>
-                    <image class="right-icon mg-r-5" src="/static/image/phone-message/iphone/edit.png" mode=""></image>
-                </view>
-                <!-- mi -->
-                <view v-if="phone == 'mi'">
-                    <image class="right-icon" src="/static/image/phone-message/mi/setting.png" mode=""></image>
-                </view>
-                <!-- oppo -->
-                <view v-if="phone == 'oppo'">
-                    <image class="right-icon mg-r-52" src="/static/image/phone-message/oppo/search.png" mode=""></image>
-                    <image class="right-icon mg-r-14" src="/static/image/phone-message/oppo/more.png" mode=""></image>
-                </view>
-                <!-- huawei -->
-                <view v-if="phone == 'huawei'">
-                    <image v-if="isScroll" class="right-icon" src="/static/image/phone-message/huawei/nav-search.png"
-                        mode="">
-                    </image>
-                    <image class="right-icon" src="/static/image/phone-message/huawei/add.png" mode=""></image>
-                    <image class="right-icon" src="/static/image/phone-message/huawei/more.png" mode=""></image>
-                </view>
-                <!-- vivo -->
-                <view v-if="phone == 'vivo'">
-                    <image class="right-icon" src="/static/image/phone-message/vivo/select.png" mode="">
-                    </image>
-                    <image class="right-icon" src="/static/image/phone-message/vivo/add.png" mode=""></image>
-                    <image class="right-icon m-r-34" src="/static/image/phone-message/vivo/more.png" mode=""></image>
-                </view>
-            </template>
-        </NavBar>
+        <view class="nav-bar-box" :class="{ 'border-nav-bar-box': isScroll }">
+            <NavBar :isBack="false" :bgColor="isScroll ? data.navBar.bgColor : '#fff'">
+                <!-- 左侧文字图标 -->
+                <template v-slot:left>
+                    <view v-if="phone == 'iphone'" class="flex flex-align-center">
+                        <image @click="util.goBack" class="left-icon" src="/static/image/phone-message/iphone/back.png"
+                            mode=""></image>
+                        <text class="left-text">过滤条件</text>
+                    </view>
+                    <view v-if="(phone == 'huawei' && isScroll) || phone == 'vivo'" class="flex flex-align-center">
+                        <text class="left-text">信息</text>
+                    </view>
+                </template>
+                <!-- 中间标题 -->
+                <template v-slot:center>
+                    <view v-if="phone == 'iphone' && isScroll" class="center-text">
+                        信息
+                    </view>
+                </template>
+                <!-- 右侧图标 -->
+                <template v-slot:right>
+                    <!-- iphone -->
+                    <view v-if="phone == 'iphone'">
+                        <image class="right-icon mg-r-30" src="/static/image/phone-message/iphone/more.png" mode="">
+                        </image>
+                        <image class="right-icon mg-r-5" src="/static/image/phone-message/iphone/edit.png" mode="">
+                        </image>
+                    </view>
+                    <!-- mi -->
+                    <view v-if="phone == 'mi'">
+                        <image class="right-icon" src="/static/image/phone-message/mi/setting.png" mode=""></image>
+                    </view>
+                    <!-- oppo -->
+                    <view v-if="phone == 'oppo'">
+                        <image class="right-icon mg-r-52" src="/static/image/phone-message/oppo/search.png" mode="">
+                        </image>
+                        <image class="right-icon mg-r-14" src="/static/image/phone-message/oppo/more.png" mode="">
+                        </image>
+                    </view>
+                    <!-- huawei -->
+                    <view v-if="phone == 'huawei'">
+                        <image v-if="isScroll" class="right-icon"
+                            src="/static/image/phone-message/huawei/nav-search.png" mode="">
+                        </image>
+                        <image class="right-icon" src="/static/image/phone-message/huawei/add.png" mode=""></image>
+                        <image class="right-icon" src="/static/image/phone-message/huawei/more.png" mode=""></image>
+                    </view>
+                    <!-- vivo -->
+                    <view v-if="phone == 'vivo'">
+                        <image class="right-icon" src="/static/image/phone-message/vivo/select.png" mode="">
+                        </image>
+                        <image class="right-icon" src="/static/image/phone-message/vivo/add.png" mode=""></image>
+                        <image class="right-icon m-r-34" src="/static/image/phone-message/vivo/more.png" mode="">
+                        </image>
+                    </view>
+                </template>
+            </NavBar>
+        </view>
+
         <!-- 主体内容 -->
         <view class="main-container">
             <!-- 顶部搜索栏样式 -->
@@ -68,6 +76,7 @@
             <slot>
             </slot>
         </view>
+        <view class="bottom-placeholder"></view>
         <!-- 底部样式 -->
         <template v-if="phone == 'mi' || phone == 'oppo'">
             <image class="add-message" :src="`/static/image/phone-message/${props.phone}/add-message.png`"></image>
@@ -110,6 +119,14 @@ const props = defineProps({
     }
 })
 
+
+const data = reactive({
+    navBar: {
+        title: '信息',
+        bgColor: '#FFFFFF',
+    }
+})
+
 // 展示文字信息
 const showInfo = computed(() => {
     let text, placeholder, secondText, bottomLtext, bottomRtext
@@ -117,6 +134,7 @@ const showInfo = computed(() => {
         case "iphone":
             text = "信息"
             placeholder = '搜索'
+            data.navBar.bgColor = '#F8F8F8'
             break;
         case "mi":
             text = "主要"
@@ -144,12 +162,6 @@ const showInfo = computed(() => {
     return { text, placeholder, secondText, bottomLtext, bottomRtext }
 })
 
-const data = reactive({
-    navBar: {
-        title: '信息',
-        bgColor: '#FFFFFF',
-    }
-})
 </script>
 
 <style>
@@ -177,6 +189,7 @@ page {
     height: 120rpx;
     border-top: 1rpx solid #E7E7E7;
     background-color: #ffffff;
+    z-index: 9;
 
     .item {
         display: flex;
@@ -231,6 +244,12 @@ page {
         color: #1a1a1a;
     }
 
+    .border-nav-bar-box {
+        ::v-deep .nav-bar {
+            border-bottom: 1rpx solid #B5B5B5;
+        }
+    }
+
     .main-container {
         .top-box {
             padding: 20rpx 32rpx 0;
@@ -239,6 +258,7 @@ page {
                 color: #1A1A1A;
                 font-size: 64rpx;
                 font-weight: 700;
+                line-height: 72rpx;
             }
 
             .search-box {
@@ -318,6 +338,10 @@ page {
         height: 120rpx;
     }
 
+    .bottom-placeholder {
+        height: 120rpx;
+        width: 100%;
+    }
 
 }
 
@@ -359,6 +383,12 @@ page {
         right: 46rpx;
     }
 
+    .bottom-placeholder {
+        height: 148rpx;
+        width: 100%;
+    }
+
+
     .bottom-box {
         height: 148rpx;
         background-color: #FAFAFA;
@@ -403,6 +433,12 @@ page {
         margin: 0 8rpx;
     }
 
+    .border-nav-bar-box {
+        ::v-deep .nav-bar {
+            border-bottom: 1rpx solid #D1D1D1;
+        }
+    }
+
     .main-container {
 
 
diff --git a/main.js b/main.js
index 1b77748..861e941 100644
--- a/main.js
+++ b/main.js
@@ -27,7 +27,7 @@ export function createApp() {
 	const systemInfo = uni.getStorageSync('systemInfo') || {}
 	app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
 	app.config.globalProperties.$systemInfo = systemInfo
-	uni.setStorageSync('version', '1.0.3.sp1')
+	uni.setStorageSync('version', '1.0.3.sp2')
 	app.config.globalProperties.$version = uni.getStorageSync('version')
 
 	app.use(globalMethods);
diff --git a/pages.json b/pages.json
index 882f792..315dc2f 100644
--- a/pages.json
+++ b/pages.json
@@ -23,12 +23,20 @@
 		{
 			"root": "pages/message",
 			"pages": [{
-				"path": "list-index",
-				"style": {
-					"navigationBarTitleText": "短信列表首页",
-					"navigationStyle": "custom"
+					"path": "list-index",
+					"style": {
+						"navigationBarTitleText": "短信列表首页",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "chat-page/chat-page",
+					"style": {
+						"navigationBarTitleText": "短信聊天页面",
+						"navigationStyle": "custom"
+					}
 				}
-			}]
+			]
 		},
 		{
 			"root": "pages/balance",
diff --git a/pages/message/chat-page/chat-page.vue b/pages/message/chat-page/chat-page.vue
new file mode 100644
index 0000000..2534a8f
--- /dev/null
+++ b/pages/message/chat-page/chat-page.vue
@@ -0,0 +1,36 @@
+<template>
+	<view>
+		<ChatLayout :phone="data.phone" :chatInfo="data.data"></ChatLayout>
+	</view>
+</template>
+
+<script setup>
+import ChatLayout from '@/components/message/chat/chat-layout.vue'
+import {
+	ref,
+	reactive
+} from 'vue'
+import {
+	onLoad,
+	onPageScroll
+} from "@dcloudio/uni-app";
+import {
+	stringUtil,
+	util
+} from '@/utils/common.js';
+const data = reactive({
+	phone: "iphone",
+	data: {}
+})
+onLoad((options) => {
+	console.log(options)
+	if (options.phone) {
+		data.phone = options.phone
+	}
+	if (options.data) {
+		data.data = JSON.parse(options.data)
+	}
+})
+</script>
+
+<style lang="less"></style>
diff --git a/pages/message/list-index.vue b/pages/message/list-index.vue
index 34745c5..2f60a02 100644
--- a/pages/message/list-index.vue
+++ b/pages/message/list-index.vue
@@ -1,17 +1,14 @@
 <template>
 	<view>
 		<MessageNavBar :phone="data.phone" :isScroll="data.isScroll">
-			<!-- <view v-for="index in 100">{{ index }}</view> -->
-			<!-- <List :phone="data.phone"></List> -->
-			<MessageList></MessageList>
-
+			<MessageList :phone="data.phone" :list="defaultList" @item-click="itemClick"></MessageList>
 		</MessageNavBar>
 	</view>
 </template>
 
 <script setup>
-import MessageNavBar from '@/components/message/message-nav-bar.vue'
-import MessageList from '@/components/message/list.vue'
+import MessageNavBar from '@/components/message/list/message-nav-bar.vue'
+import MessageList from '@/components/message/list/list.vue'
 import {
 	ref,
 	reactive
@@ -21,9 +18,103 @@ import {
 	onPageScroll
 } from "@dcloudio/uni-app";
 import {
+	stringUtil,
 	util
 } from '@/utils/common.js';
-import List from '@/components/call-log/list/list.vue';
+
+const defaultList = [
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		unReadNumber: 100,
+		noNotice: true,
+		img: "",
+		title: "系统通知",
+		content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
+		time: "2026-03-11 08:31:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		noNotice: true,
+		img: "",
+		title: "12306",
+		content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
+		time: "2026-03-10 14:30:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "支付宝支付",
+		content: "支付成功，您在XX超市消费了 45.00 元。",
+		time: "2026-03-10 18:20:15"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "花呗提醒",
+		content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
+		time: "2026-03-09 09:00:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		noNotice: false,
+		img: "",
+		title: "顺丰速运",
+		content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
+		time: "2026-03-01 10:15:22"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: true,
+		img: "",
+		title: "蚂蚁森林",
+		content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
+		time: "2026-02-28 07:45:10"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "余额宝",
+		content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
+		time: "2026-02-27 06:30:00"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "10086",
+		content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
+		time: "2026-02-26 15:10:45"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: true,
+		noNotice: false,
+		img: "",
+		title: "饿了么",
+		content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
+		time: "2026-02-25 12:40:33"
+	},
+	{
+		id: stringUtil.uuid(),
+		unRead: false,
+		noNotice: false,
+		img: "",
+		title: "淘宝通知",
+		content: "您关注的商品降价啦，快来抢购吧！",
+		time: "2026-02-20 20:55:12"
+	}
+]
 
 const data = reactive({
 	navBar: {
@@ -61,6 +152,10 @@ onPageScroll((e) => {
 	}
 })
 
+const itemClick = (item) => {
+	util.goPage(`/pages/message/chat-page/chat-page?phone=${data.phone}&data=${JSON.stringify(item)}`)
+}
+
 </script>
 
 <style>
diff --git a/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue b/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue
index 047d9a8..84d8ea7 100644
--- a/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue
+++ b/pages/other/train-tickets/fliggy-train-tickets/fliggy-train-tickets.vue
@@ -525,9 +525,7 @@ const showFristAndLastNumber = (str) => {
 
 	.section_4 {
 		filter: drop-shadow(0rpx 10rpx 10rpx #00000008);
-		background-image: url('https://ide.code.fun/api/image?token=69ae28bb97ce8400118178f6&name=ce4aca9097cf1d57763cc647764b458d.png');
-		background-size: 100% 100%;
-		background-repeat: no-repeat;
+		background-color: #fff;
 
 		.group_5 {
 			padding-bottom: 32rpx;
diff --git a/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue b/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue
index 7ec38fe..4dabbf1 100644
--- a/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue
+++ b/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets.vue
@@ -341,7 +341,7 @@ page {
 			border-radius: 25rpx;
 			width: 106rpx;
 			height: 50rpx;
-			border: solid 0.5px #28c2dd;
+			border: solid 1rpx #28c2dd;
 
 			.text_6 {
 				color: #28c2dd;
diff --git a/static/image/phone-message/bianji.png b/static/image/phone-message/bianji.png
new file mode 100644
index 0000000000000000000000000000000000000000..791a507ec63da9bc2f5bf99dce811f81ed9cab0d
GIT binary patch
literal 930
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bYNg$Gz#zuaRqY!j{;IcK=-<16fo3M
zOM?7@85o&aSlKzbdH4kcg+;}rq-A8~6%<v}G_-XLOiazpEv&3<Y#p3jJ$(HGLqa2y
zQZloO%iFs9`lrsEzi`pwW$QO@+rDGh-u;ITpE`Z!-1*B_uHU+S=kC4xPo6!0`TFhW
zFF$_$`TOsyu)<kjbnWtVaSZV|{&sq1aFc^XgZL?(O`D=M-yGw6tGC<uw9jQ8<*hGN
z?*IQU9(BZMfn@ppeA)Br3D0iUPGd|{d?K&ENM%v1W$>vJCo&haG1wftZBP`#-0dav
za24AP8@<P~)?Z(5`1I?uIZjjNgzh_We-8KM#T!!XSKK-4_19(NsooVQZs!E+Ute_R
ztl8Hh=cjpUXFplD?%o-hm-jo${`|VM*-OP6CchI~rI7tDEn8L4>QVHft7nR~J<C*k
zw8zg~$9G#n`_^0LXA|efnJOtQisYEem{rAcS?7$%%Z^`rIx_i0XU@)F_VMhjuKa7q
zKAzqF%0Eku*|lc#hL2r&YHv9kUa72_Iib(CVYR}tnUC(5pI&p8_va$<%RVn{SWbMY
z*?FP*+zp?Jll&~Fq~+$FNN;?$Cv)=For>zJKE|pAUiPb-C!Lk>H(sjF{9(!ToK-ew
zuidp<aWGs<_-y<6?gzhgj=z)5dy_1$u=Y)b$C_Vrx8=XGn4LZ0?j-x~0@?l#o>orF
zwVnOUeACVYYVCdNZAAKhN#-vV`Eud9>YujSk0<gbHQx<vpTndV#JBT+`t!Nbb59qw
o&iymz^;rp-B==v3>wVwHFZuT;@H*dVV6tKGboFyt=akR{0F}yD5C8xG

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/default.png b/static/image/phone-message/huawei/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1a660155e9d500168c2777cc084a6f652c330c2
GIT binary patch
literal 1895
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
bR6F9JWbU}1K#s$~KOR6>I#|@1dByw<?1KtC

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huawei/delete.png b/static/image/phone-message/huawei/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..87dcc80c97e71a748329be6d92bdf7f00cc0b54a
GIT binary patch
literal 1994
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

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/huhuan.png b/static/image/phone-message/huhuan.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd99f1e8e1063654f88de48e8eb0e88f461f02a1
GIT binary patch
literal 1605
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bYNg$atQDVaRqY!kAl$<AU6a)pP9=C
zOhfxig8YIR7@3$^SlKx^xwv_F`2~f9MMTBKC8T9!<>VC<Rn*iqG_|yKboC95j7`lg
ztZi)Vot$0WJ-mJV`~w1mf<r>X!Xu)hV`Agt6OvNWGqbXD^9zcKOG?YiE2^q%YU>&r
zo0?nO+B-UX`uZnKoHTjL)M?Xa%$zlQ?)=3|mM&Yhdd=GP8#iy+wqw`sJ$v^bJaqWz
z@l$8dU$}Jn%GGPvZ`{0n=kC4x4<0^x{N(Ag=PzEqdj0nOhmW5=fBE|D`;VW$e*gLV
zZ$@5~2QXWF^>lFzk&t|Q@O6AJE5q@J_m34uC#SeEb&7DV>7F>#>#WzMH%e0j6_-YO
zWQucj>OJW)(mt}{g_&Xak}2zsITZx0IrisYwrrwYV$S25Z_CVW`lsn=HXM$Ac>m(Z
zR0|_d9ie}J&dQcv7q?F7-o5N=fW^U>&iPGivw3yjty4~)q%);Q?)Hj5Hrc;Dykk55
z{=0qR=7|@rBAM>jE2qrfuYIcL$9DGbIr~39lh%Iy=j-k7-)iP2xNSMTUZ&^3Ns;M1
z`ya)>oOJY|=HAr!7VjW?_Bp4HeGQPgeBa(gbM~@@^#(`f3o{kVy=8)5oSb^<RNz&q
zLsK#ewI^S+VO+wNHRsgPNaG1iYO{D#ZwRnYa-9F^BkN>`KXqrr#h8{^)t)+k-IBFs
zwdwTL;vRdW7ag5aqSkoW?(D?^K8bJHg;&)ZKHrwvBqG0yqq9BLonc1ZZSB*q;v4In
z%Osc&y!47RW4_G0X?dd54)<wt2^CY{M4IyKQT68d@h0nL@F&g>y*h>qZtGUxxqD!V
z&J3$*C*>X=&_8}$cvHfw2({U#!l&QArF>dIKqoA*kD>YcN`v!E^<gUw%#Sptr_4@1
z{e%6wR_;+lg&?)vJ=2#7v)9ggdS@<6)26k*RD$n%t+r#FlWmd`p38G<&n(dnX64x_
zx7!RR=f<5ih&wE@I@IpF?7QtXf{iE5&PM(FXkt*d-g{^7<cB?%R`n%yz5A}YeBFl=
zHV^;qT2sOhyvfzFQd{f!$`2<t{aLK?VG&nxwa5-%tyQ^MYxK)C*S_gv-?F3BP@-tn
zm)6bobLDMo_k4HwUHo?ax4QbQFZ^c<)@jT>e?c@_ZNcI%8x6SM6rKLUCuw(8)c-Gc
z?cZP>laE{6gF1KwBj@N(7Q6TNS3=Wiq5FF`Ze8RNlq|#c{oTelt0q5P_1!R5=Krh0
z`6};ceQk6ve^*oRS8DyGo@boL-j!+1exxAqvtV=d&K<KK_pnasO@7>evDW<Ol=hD<
zO~GHaCcOTsdGGTIhof(6XUk|!c|A)>_h<Ycc7+#P@A)vfPXOj+22WQ%mvv4FO#lV1
BF696K

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/iphone/chat-left.png b/static/image/phone-message/iphone/chat-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..38d4e55108bb89112acdd6d79b53433256413e54
GIT binary patch
literal 1125
zcmeAS@N?(olHy`uVBq!ia0vp^$so+Z3?z3v^;-_4{sj1hxB}__NZ|JE+xPF^hX~xg
z`|kbw_YWUF{PgM5>({T}ym<p8pFMl?;>EjHuU<WU`ts$=ch8;ynXiE2uU`WN-#mZ*
z3W#36ehWk|U%r0v0;u>E7`*|?0!3cFd<7<v*+4-c7bp%g3C0HMeGSn9BY{#N1mi+X
zc->In($v`2+|=IM+S%FB+tt}Sp?}JR2~%cFpFL;J{4HCyZ{50M$M#*jcI~}<`RbL+
z*REc@{`m1zpp!tRedCG&`rn}>$S;_Ik%^gwor9ByUqDbqN?J`r*TBl!BRnD^J|Qu!
zu(o;P<jIq#uUWr-`;Ogv_FTMl^TE^SZ{NND@bTm4@4x^2`TK8@p!_Zd2BsUHE{-7?
z_m0jgkACDJa7<i)W#T>Spe2%4EglLR6PUTregCi5u3p|>G2>0!-JRd#BkEF&H(U1#
zNLkwaOV9~l>1~_3%6IC#ko8ZJ9QPl0w0Nl@pdX?d*&LghyfUhTz0X46&P%s)qxQeE
z{CD+k`Mu!&_R7OY1!rVN@XWulM#<0kdGdmbJEmD~btzbSi|c|{=JJ>`Ess6CS;bb0
zPfS*8vJH`AT<!LB!raD*Z_YHtZuV=sHLFH-!>URB=MF9My=vr~>y|0-aUa{YrC%RE
z6PrEtp~1;WVePVK>;)^>DwiuhdLzVl{pn1`BU7I@-f;M2pC4YvP-Al9Uq+zOhe><x
z@5;Go_aWGR*LlfW-(F?s>|fsuytF<{iTd?@i7!LG>c07h7V?$5segIvrFDLXaoW?n
z-r7b?|D;^YWcIKsm3+K<H+Ypm+pJ$gPqsMr+^Tn0igpt`5@1xn=kF4>MIoQ_Bp(`n
zo%MbC@!9Ru%U`|kKOF5g@n8MkdoOp@{de2HU`Own_AlP^)|>ULPXEPv`1}gHvm5sN
z|7xEn5w@g$xdHFOo@4GpA}_d7OPJ-&-?(TbZ`xTZ+qyI0*q#Rp^Rzfp9j-e6nUv7>
zMBOpcAX!Gm(AU7Zd!h_SnnPbmi?P-cy*YvElM32gst!roF5*bnNXh!~vuf*wvn9J@
zr2ie8BC-4UrzrF5Ur*g|^qKcKZ284QPb_=xA8+a^%>HE8^ES(MYq+=YZliDgUoX{c
z7hAoxvp(U6<*~}v!gon`<PW`fwCpIFpL|4B;-jeBoDQM)Nk`sF{A4dQz9KQ>^NNYH
zE#+%=-#2&{H}kXOwmsh-KD+1@_gZxN{Q1>_uX!ZC3QgJ7zv5Tu>DHKb=auS7S6n-7
zPtKjV<$t@Cso!4N#rX{v{~vhyc)^#&9h+75tZ%y{@A9&E(U<JPU*|Ob7WY^(EU9GE
zE|%0iwv%Vh&q?PkXU=+HDLJQ7e#%bO$3L}a-u@%nZn-I*<8<elmyfIafcb^N)78&q
Iol`;+088I}*#H0l

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/iphone/left-msg-box.png b/static/image/phone-message/iphone/left-msg-box.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3fcb2084e60296abc44f00242c6302df73be225
GIT binary patch
literal 818
zcmeAS@N?(olHy`uVBq!ia0vp^T0m^Z!3-qZIDdCCFfh6Y_=LCux&Ogn)v8tdK>))0
zfBW|B`}gkyIj>*8e)sO(`}glZeE9I>$&+Uw@agg6$4{TWeevSOvuAIfKYtEnym;~M
z$&;5aU%r3!>ech-Z-C(O;}<~ot5@%zKL?ue`o)VkFJ6Gi=g)zHZ^2TpfFdtn0>wc*
zpc<flAQ!CQ4Nwi7{rovl9H<wh?Bz=!0!o4OzIgExs1Ga%Gz6pus0By@1;K0}2~-SJ
z1`z@21xkS}g)0EL3ZfWI7g#UQ86X3(B4nwEr5E~uL77t$<QL4q$i&RT!oteV!O6=n
zASf&%A}y<^p{=8%uWw*#YHn+1@8Im?9}*fC9vPRMoSKo9lbc^wUfIyt+S<`Qb>^(u
zbLTHzwtD^MZQFP4-n0MsxpUWV-o1DK(c>pio&){(`tAD<pT2zi{^Qs0KY#yi<z?dp
zMx~yoi(`n#@vE2JgP9x!SRb&89@bJ?XPM+=kiaJ)z%%2ZXrPM-BV*#f|2IE>DGT4*
z9eV5e`nYocuM%wGUD}WRgM^p=t9LnG-+JyriQMvTi{1w%?91CNdLMt0TK?U@G<U`?
z`9!NPJeOCR&(NzmRI<4(==(mW%<G&!wdMv}HyOyT-L&c41ztOo;}@*w-SWE`{_LgY
zFZQWc1t<EV8_!w2C~2G?*?sC;>_3K(OWrRxeE2uj)O_N+;KWPQJ&*qiZ9I0XLuMmu
z<U93C)oLehndQp=eUxf^)BA~+E5}*(7^xiII*v^uYBLY2JMLR2BstBf+gpye%)Qle
zcIBnJR$^uA<5^2ACuV)vwBg<5GIM83JHuj=1*+S6RK4ER#^vyqy*fKxejjJnp5^-A
gpRJJ-uUss@<1g1r_O8`)fHB74>FVdQ&MBb@03X!-?*IS*

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/iphone/right-msg-box.png b/static/image/phone-message/iphone/right-msg-box.png
new file mode 100644
index 0000000000000000000000000000000000000000..b76d732e5e23968650dc496ec6e2aef8076ff359
GIT binary patch
literal 832
zcmeAS@N?(olHy`uVBq!ia0vp^T0m^Z!3-qZIDdCCFffJ%_=LCuxeWgq7#bQF{x^iK
z3U%1;;IO~J;eUg|{sf2p36{q~wf2XqA4#%4;%Bfwz~Fp>&7~-_lX1ppBK41jnjVZW
zJQ`(iJi_c`tm)|}v%}%W$0GHQL>eCtH$4SJ(Z<Ikj823bo{Tg)8DV-X(&TuA;jsv#
zlhGz8!c9&@8J~<YIv!~P6h9ehd@RD`M1;x7C?GOA9t{*UJ|1m)BGTjpkPQ@!Ha;2w
z<N}c~Q1Ez^F%SVw0BS!D6ag9tVgp5h43HLx6i9m%PytW`s2->b%m$M{_DP^PSOHiU
zOfS$_kbz*UK^nnEf$RdC400Zn0TF?6Vdj9iAoh91-)z8uEi4K03ua(sVq#`tVd3E5
z<l*HN5D*j=k(QNLP*hUW&^9tPHMg*|wRdp#@%Il6i;RqljZ02V&&bNoDJ!q6Yi#Z4
z?wK@o=B)XPmMveodi}<Yo40M>eeT@3n>TOYyZ_+PlP6D}KY#J^<?FZaKYjW3{l~B0
zzyJRI_p8611sJ^=o-U3d9>>pKx@q1ND8l-I=cGW;j}udjOlCfxdB*veir`Ew`J;dT
z$M2b+xb|;S;k^3n^|j}1`ILK|=lu7)Yw`83>DyzO_t#%goYVKnr0cTe9KDAn!pp5K
zY>&NU^$X6Mk!F=R>+9h!njDv%WR`uC@j08t>r*~Eq3T_0<}T+2qBp;BeQ{lOnQ8B&
zmz@s&sZlvkN?ezv&ABYdY`$TWQLRkMmaiVmo_=NXS}kUmT7Ca$Qgz;xZNE#WT+7$I
z(h|Amf8@fIb!pE}cisIQ@XGf0w3olxqMbC>AGu{1ruc2yjq4qgZ*{UCO;eh(YZ+J6
zJC*kn!taGe<t;Ot@+aWigbgp`Zi#hoS{w6ef5!cDQ(fkCZx47aGsCy*d$v4Fmgc%|
l5r?zeua|!@+Mjp4j=}AhvSMDW-*Qk^@O1TaS?83{1OPMEd&~d;

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/iphone/right.png b/static/image/phone-message/iphone/right.png
new file mode 100644
index 0000000000000000000000000000000000000000..5478430793ee2fc2721ebb6dfe292808c3e10ed3
GIT binary patch
literal 821
zcmeAS@N?(olHy`uVBq!ia0vp^S|H593?x6vT4pjZFnR^}gt!8^|G{9@s#W{<@87m<
z8<5<&b0?5Ia^%SF-Me?}*s*8N9w7J7p+iTH9)&P~<iUdn_wL;bBo7}x4CL<Hw+~1H
z!GQw@fGU9upmrb|r~tx+NCCMZMPOwR6M$^EAwZQtHc%H30NFqi$c2bNY=LWp2qLQo
zYl2z_)&#N_!ayUDO$JKAmBATk>WSnY`n!n-7@D~yL4Lsuj7-cd>>S)Yy!=AKBBEjv
zk_w8-s%jeA1}3Iv78aIP);11~PA(pyVUaO$Nhv95S-H7|#pRXN^$l%3{gWomn7e${
z+I8zU?%KWg*zpr5Po2AP<=XYzckbPP@aXaLm#^Qx|M2nCmv7&H{QCXp@4x=Uvird3
z)b(_643UsLd+@rlQ=tUg1M}w{EpK{KPRrfA85wyqr6r_q^1c86r+wb}zgDkWE<`|k
z)~R?`-9OInl}|pO!FqR+_of>8#=NJq=jBMOddG7#RYEFz%AzguEm`{<Ch|B1Pu2)f
znZ018XTXlvR|DSe_+k-kX7aUNwdzx$y~*0lt~)WJCJReu&bwZ>;?{YMyy^uXdDAu5
zRWF!Tv3SRehAbWD!b=RjwsV(Ta5-%K>U;jUMMyKB?b6f?wmgll%?6v3`9<D2GPwQw
zp?&mu8G~Dyjr+r#D+e_;JP6pcKJ4&{)ams`lMT4v?G(vRHuI@D>n`$ixu8U(^Ky};
zkNsx2zB?uI(oEiGO~$lCo~;SjetQJo$!SSCxzyu|)8-#X<A0jI*d^z&@63;dn-_(j
ftDN84^_6*fS^30G2{Zl!V~oMm)z4*}Q$iB}knGms

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/back.png b/static/image/phone-message/mi/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed5279316030455d8feef6b94dc47d6d9dad67cc
GIT binary patch
literal 983
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`ol6-Q7;6K3LR^7d2nY=gb#QP{QBhG)
zPyjM4EiH|WjrH{O)Ya9kt*wD<0|NtXZEc94j*gC&mKKB!B#n%WfU^4f`ntNh5H64n
z)C*)A8XCf7fg%t#kOYbYwE!7Fl@K;u1jqmapg3F#q7o<wWPl~1dVySs2!sJQ79t2y
z2`7Pqa0PHffDDKrkb$NPt{$Qot_;G(Pon9?rTEU3mwmv{uPX`i3ua(sVrF6I;Naxq
z=H=xV5E2m+mylFcR#8>c(9qP@(bYFLH8Z!cc5-p`@bU8x2@Q*gjERj)NKMPk%FQb%
zsI023Z)j-h>h761Y4Wt`Gv_Z{ynOY#?K^huK63KZ`3sjXU%7Vu`prA{?mv9=?D@;r
zZ{NND@afa%FW<iZ`1SkG-+#I1{^tObM7O7lV~B+0+k@A`FEhxnKJcEsU|E=JuFIVr
z2SUFyt(6M7Q>qYgq%mpgB`;pnjg7yze}3)#RrK9M8Tn7O9!rB(_D-_>r6^ObczWI}
z<w~(l%*EO&@0~+`xLvm3xHxaS$yFtn+wtlu;`){sa;jZFSBor)O`WxLx4_QtNt52X
zTV~ABHaz)sx@AU{yVIn%MSQc)d{sL;+peSSwTUsaz}z2B#<m<6AEeKk=`8Se{<5ES
zLW>&9O}>5>cspYWr+(UkllJjyl6@8zp2)eYJht9@VaHQ5-;=G!WV<uf`oFB7`~Km2
zZqqWC?$-g_HYI--JV>|Sl_g^GebMV{Lf3VxCb?gqc6)!uqe~xdy*>RnelhQ?Rz>zz
zNmJAQy;AF#lhnMdl6jLc_ZtqI6>ay{Psm}FbD4Q~v&mZa38Gq@XD{1?{Bv<Ks@f>M
zNN&H=<$14~PtE@29Q?6b;nq(brI|iI0&;6TCf8^=h;7N(CwJcI39Ig`o0kJB&2I+k
yJCx<lTgEc8c%9cLqmpwQ`yc*DTN1SL|7ooinSTp<G!qIy+0)b2&t;ucLK6U;N?e)%

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/chat-left.png b/static/image/phone-message/mi/chat-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a2b54dde21ad655b227c30ececbd8aacfac5626
GIT binary patch
literal 1222
zcmeAS@N?(olHy`uVBq!ia0vp^IUvlz3?z5#SpJ`Zfl)BPC&U%V{SOBF_wPS*<_wVe
z?%lil_g_7D@cJ<bym|KQ*^3u1UcP+!>eVYC<Hd`2K=$+J&tHSUd$7oxmoHy~(VN$=
z-@bbF28dp~04fKOK=D_vKnTnRa)E+CE>H_d3POTKKqf$x0ZE8BSQ*4*5D8QU)DG4K
zF#$>fMS#9wVq)Ur;^N`q;pOF(m6er~lee<6wzai&baV_13=9qq$<56xDJiY0s%dO&
znmKdU?AdddFJHN3%ht=6uim_Q`_`>HK#u~A+Tf({9cY|WNswPK10ypFD=WW*q_niW
zqLQkPt`*QUC;#a5tdh#swzl@Z{@E+ntlzw2*WP0%&zw1b<No6pFW<fY{Pp|KpTB<p
z{`2SWziltAHZd?TD|xy&hGg73J1af>k%LH^`;i5K$_kgNC*P}%lo3ficyI6j|Lr<T
zuh(^*^qFzz?sw(qKJ$!Iik?rKE)X_TC30i6QfJP}Ys<F8YNrYd_Qy_C6&75>yZW@e
z{*{N_uUdE9PrWP9aqCmsDPFGo9cHH_-%k^m5Lu@7d%?=OOPaI8U2ih&)H7H)oBKxC
zp|?l1+z+gARNc0G`j&Mqvk$CHi-^2__|`X3$M&v$xpmhZ_c8Cfa#H@o#A`Z=T)SMI
zr<wB2P`=tMdd2(gW_GpmsfWB4g_<V|Om5PRh+Mni$e~+3TnT40F8bzP%d28=GVyqy
zwXuv(lS9b%&cz$kEv{+%mgdjSY+NI$yY|z)B`+9SvIPEq^O@D8E3hW)!|wNIb?2Ba
z-Z}lav%4ryKxuvCoGnXM2pY`Vq|?}1mC#YOQ1!bwYqQJ#JNdUO4Sat3mw(^2K3QhX
z<KHu;Yq%N&xISgp;c3(QqiCNa#hv|cs{gFy81MLZ>We>~6+S=d#{8I@VGo;Z=kTUm
z)jx>{+PF7g=YaT|<?Gixd@)V^4|`p{@41hA8z)=7`7tZq*DvnCoLIXXAAG}YvUi<h
z)!{sLSYhW1?cWj`{zd1$V&##jc)qogjeT0>+D~g!Wg>1`HSd(N*wB_eE$F8vU(YXJ
zmo8>Lo<~9xxg$0-`Ao4ATeD8UI^o~}Kbr~z{>}#nl~fwpy(j3%>3DlpY!F(R`P59^
z*=??md|Zfpm~w90owm^Q@2mK;g-=bmZIHc4PS!L*+3to1^Rj>DeLoYDd-n(aZHW1F
zFwcaq<JZOdT^6=!s<Qp(=9~2GJLdkkro8rRWOw`jKVLq7eY^OYd#}{G0A|BiqRmy6
zi<Ysj;N;KJYM-@a(X#tHT3NGBwnXtvS}Wg?s+Yyse|wfg?yeck?lBuq%9K?d-}vOk
z-nmC^YwVt{K3V+yE~(Tzx(C`{X4I_Q&f0P7&XL^PkIa??M!#L*%yQ==$GZpY<x5hp
zY&f^^+xp`ZPB4dExoG$<K&Jdoe|E}&tr-ty`4{Ax?r2jK4AVINKkJjz*7b?fp9^%`
zccgjc%zkl*;dFp*m%#z0=<18Urx(4sv7h16L=&0!&UyO4yvN|_>gTe~DWM4fYB!WO

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/default.png b/static/image/phone-message/mi/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f02c311a308c77beac3e4955e797674d7224a87
GIT binary patch
literal 1709
zcmXw33sh5A77a#f1Sx+RgF>K7K{6;Z<x@TdF-RgIBBBl;7LZSYfkHq91PTEyL<Li7
zM*%7Fm9JuI5l8%#2Ejl_s1QR;@&X|t0rG`}K)|_?HGA!M-ahB<bMAfbt@X-72|-2%
zNCOxQW`x6H!oZ!VyAW^?pTI91hr#rI48?~Bg7o9Zk3~gA?d|PA0I*oBah?t{I>;Fe
zK9k853WXewXmS#ogdjFsz~Km{AOHc2#bfE5b1W9b<jin5GhD8a#RX!T&E^9eh-@yO
z4b6fIhcmmGe&B#5J_q7+xw9Nd*QHwmHqgk`)q&tbe2#7oh`>ApY-|vL2Dbl;O*2<l
z`D6orT^AU;nS!Wm;ey>iRlrQ3As(QBHw`G9o&lWW&x&SeMFN3XAe<Kh&dtw>7Uo2Y
zBJrYlUNXM`C|v+t1e7fTO5_rWTq;#aWeS;0DVHndiX{c0a!ILNRxT|sEvZy0wMxCB
z)={Hg*@Q-;SzTRSTV30Pc1^p9^-tIU0PmlY8i591g^(RaI0@6+0*C8wGc`3cGq<p`
z+O^BZcK?1Sw6m+byPyBj;KbzQl+;vWZb?aLIl1aqU3U-lx8HgPhv@VX#(NeQ;?3~I
z5~&iLW<{gXZm2TC{9v%H`8dqs@NYSzHOXg?hb*oJWqu=meo9Zh$HG#r&uGAs!!WG&
zuG1aOhAC0#@DpAdZs68RgFAi0_{4la2jN%$sQU0sEvP_+I<`LS{QX^G&yA3Soln?k
z!@thE2iLSUbfSWwhK8#G&b{pp$0%8G4}1IWVbjk2Jm&Rv@Ab0CI_q8}HGCjJFp=$P
z;$QJ+^)tL%*=)$V5^-O%(L$uXw2D4Sz}N}H8HRg(j^Ji?G)&^pmlxl<ooaIwk8~II
zn9eT*mz@Y!d3_d>xn>_$PgBKB75vi=3Lx{5_gkl0nO#(DPh!*~-XGd@tFXh}b@?cl
z#;3+@P0z(UOdb*APdW3&Sj+e|hSyCp@!gxN`X!lWZSA<m-PDWYT?fW}BhdXsr#;vU
zU$r+)hAtzf>nSPa>+gHt!270xKK#ODmsRB<G95c6XojK`ob7k>Nv0m7ldZm8pP2+1
zHF?vgqJ1dcsxNI~Ofx6q$j65s9}(u|d%wC_Mhne&ExZ>q^~;J~$u4o0w%CQ>v|Dy^
z#ZEaB6SZZTc-d4NO7S(|o>3r}h?>VcP2}LQ-CU@0io-T9zQwe&xunf@b>#pQ6|#5m
zw(JsX8THp4Qdcd4(2B@03SkSecS7p%ugzbIEQ=(TNhe*cM&`GL$gXT3dT6|QdwsY+
z0#3KR<bv~twA6jY3#B)V%_xUuTg3R<D*qSe_V!0IY_l(=BZ~(D?ZZlcK%L*6tY0x0
z|B5o1<C}Dr-n#omm$BQ3-Qx4T)v0B6HUFkuMDKL=cr7OOza4X0px@5RDkUABi?M7t
zjxW&<U~YY1>{!v$TkUA>1kunm2b|BZXAt|yykq~RKfwoBk7guvLxeQamBc5m(kzE-
zF^x6#FL`_8%?BNmT-M$<4VETP?e9$YZA*^TOYYQ<4NT>ep-H4@65cj&Z6a0^nr2qX
z5Pr<aS2*PFp?T&NXq5aM#tYu^+cdKrN7-|4t$g0qZRp(k#>JJwyY?0^cwN#OUura#
zQ9dS9r$N*y|JZ^8C4{6qEzyi~Pa8rqMS;(?xSI{Fm#vEif+c0DLZkA({r!+OLb6`n
zbYm!$JLZRP>*)7zJ&Jjgp8IulOkTOwHXGc3PI+SXjr+xI$-^XmZh0(1*n48+{#?sX
z7k<W?5DrmEVcSU<WcEPCGYY<BXxQd7YB;{Kc3j~f*=&Bv2HTjOOM<(es6*|H^+b8c
z9}5wGAq@^`B2^C&ED{V-njZ1=y%lF${)Kg_kUaWAoj`7EGJB}Lek(_C3$0gWz>c~;
zLUq;zc(m0@*?v}{N_zCc`r3m(xw_ZCof~ex@=8ngkc%dE(DW@j7W$4K>_3-MINI_$
zp~2=%i`Us5S^XR7qvNYTzVKet{ObA#(*0;Isu}6-`M5be(dU7{Iy&-t_P0$>)2ysd
z^+b0n`rK)4j8(?n2Nz1tqXSDCZPIG<zU&w*Al+pe_dMo1rTYAtkpAGn#MA!B%6-Iw
u$XRJ2V(y*l2bgc+<+mc?=WgG}YK*hrwGS*s2^ruI2g3ytFx>$$r2hd6U)@;%

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/mi/mic.png b/static/image/phone-message/mi/mic.png
new file mode 100644
index 0000000000000000000000000000000000000000..f99b9a26ac0443ae003fcf7d57d020c6913a6fde
GIT binary patch
literal 2200
zcmXX{c{r5q7ak)^cBXH#8$xO<HOXE~jO;WbTOxb1mA$BB&&=5UY=vY?l${JAH5kp%
zC$ev2W)Kz1XykkGyRY-y?>YB-&bhAVoIjo<D~rp#T%uec5Qx{<$N&v|Z|@&YR)AYt
z%J)DZFvQC2Dhdeq4$#@zNhA^hcWrHLW@dSIc4c87t4m8uG#ZUgr!Oxr0}hS02KZDe
zb!8vx2g)j)zH(rzD=XiYmsbI!(SY=Q2K43SeLL`h5D<Y7DB1sY$Op=Phr=|05A}nz
z!_NB*qygmzRfiq^&wv8lf`x?z3<e)La)gbIjh&sHgM)*Ulaq^!i<_I9hlhuck6%DQ
zKxiKjC=@CzEFvl@DlRSoKvGf)29uVNkvVbVgsiL_0C{=&lP6CqC@8?;a0KF<s_J<y
zEp2UW9bH{LB=VBJz5xnlXuJ;-Gc$7w3kyq2t1DN~4i1ivj!w?b&aSRE-P}BUd~N~o
z^Yae~2nq}g3JSUt92^o75*8K~9v&VM5fK>`6&(}vI5svuDJdC)!D6vEEH)K~OHEBp
z%goHm&CSctFDNX0T3r0Rq~v*N>5KC6it_Txii)b2FJHB{ci{2B#@@Yq*WK0C-QE4Z
zr>D2K_XB~@-`6)VFhCp_7#tiVefmTuk%mS_Mn^}#j*m}HOiWEq0yaH0H8VH2Fh9Sz
zus~T{T%u5@z>=v{`r*Fx-tSle1HBZCwy*}VumS_+7Zwo{laiK^Q&iGI0wb_=^tu%s
z5f>kyfW_rkR@c_IwBbMW5s9R+nFShsZGB_wH-oYB=MR&)`?ra%RR;pG{WLZ}UiF?H
zbYSRzHWA=UU`w{uTkKG2r9cJVU-d?v=4_PFK`NtAy|<*eWF#v%W0DmrDki}r<GT>Q
zJaZqp+hwV1_htg>M@LIDrWl?Hu0`K%6>Ox_k}B;ZP#%howwXCudBP$k=+o^Yxo=by
zbmZllh5ht{{7uZl$rnW`!6k?dQ@aM%v2-S}0%V_fKg-o8%Sb58$JJy8k7oPmDRmhp
zPQvm|L#DbGV=_2Xs$v!&zxDWeMNVAbf8H*p-%H);(a_}~<v>*}a#T%^CdK=j0!edK
zG9%}P&XZ7HwQ14-ZykA)tAXQcsZ>mWnP8maIApAwb5_1A5stcN=u-ghraY5n&A}-3
z-N;+fGyEr=%|?WywB?tSYnqu0ZZ#)dnbD%5Heb*1A`m>>24Kv9<kHi!@T&CCP2=?z
zwCp*Ph0vX88Fy;k8&u+YLU9~{RY6C#$#UmK{Zp9R=UoHBJUsQXm7vO<=r;s?m*&EN
zN16mT0%K+MSCaB?ar=k{U#F6ok7D`U8M_jLZ67QaHs>u}oJ#IUn}Y5R<~fXj$Jwba
z8A49;`hmn>CO4i>#~AL3L+3PmGdlY8s<s|EG{SEse36D^G~cAmf?;3DK3g*y7eKjo
z0;}P#?Pfjq+HLU?jkU0e2i4!b`)>=67C0-h?<%_ZHwk6Lbp`j6keKhwktutkZ<k-&
zxQ!q2E;wVB&3^B7uUdQL?%2;VkGnqYEEBJ|AAa?*yJp)>DEl$a+wGhG>Z4M|!>?KG
zY8Y@^N!pE8|H&ald||y5;zEDT;JHWch0Olzrr2zXWJe_{;zEWs1If^<GmQ3F$kx6+
zpWqj7M&hqai^~D^H8A`6tFh1()(&ItTxTJF?#i1*<?_Gck>zE`Np>xLw{{T}SBZW+
z`dA7g2WnrFe&wIfGH~0o(uq(JE>{_P8VZs0{x4=|dU}W#mb>9{Ru)ldP~$j>ZdTKC
zSAN`^+V7r5Fl00uA`hb8#WX@BgMo)3a=LC3+>(vlw~zR;rnT}w^#!dBan&iV^t3m@
zeX!ae!z%9tH&)U&ePy+b)O9;OFz52Zbacct-Co71w;koX6uf&ex?>LR75v?hRQLQ|
z<&%Kr#gquv04KSYi$9)s^pFDb=2D`?Rk50FAA@M#iz&JC(=Ddk6-g5#XZVhlYq+5~
z#UzRg1T-urPT=ph2R(azT~K{qU1LdNuHYt8z>{~uv<VgxVa6#o0rkUoCR9bNNVuMm
zmpnT##u`w4XU#>Z)c$&o5_3)P7{)UdQUo7;?NtN8{!hTDdQ2nWfuA-f_gf}2dZ^Dn
zR7<DNwM)N!_JVV0vWdL&eXPrd;3-8IhtB#Ne%i%}K^DQY8t&_iqJ_bFDPtCX%}mEu
z?C9#b36C|hTCTRs9*%e|Hb~c~xWFKFho?4rsWR^Pvq%iY2J<whF#Gs+m#SqVvdUl^
zA1+es8;+q+UGg8l9EsI!Z4Uo!)%-v@enzOfdk1aDV5%$X9WTceV%nClfBV?l&7<GK
zc=GDf<Ki;i+c3JeTXD_MA(re>>W@Tg^%t@knZnF}m6^ADxa*BN8I@f>9H^!5VUWNW
zBhOrcCb`D7{sh0NXMa9%PHjP;#<}oQvk8rSIb_WJ8w~tbLd~a{&zd_8I2N!o;=HSx
zX4Js(T3&M!vDU9TsxViyb%?eZl21(iH`aaFW27`>r=^N?Uc}+A&so(GZ7Q*$%*JZC
zSKW5G{|mFl+1zmV484_Xd|B&gx<bD91yoU$|Fehk{jgJd1C!?9uiq@8fm{OFlLfa%
z6A>fM(R7PDknE<$=!oI4P%)dHEw3lG&BIOP*i9S`r&TCnJ;C_Cn>=yUM;-lbWqoZ1
zKR)$kD$Hwp@MjJB+f@}onlp}!-!8uQf>JrqW>velBbxq`4L<VHtu1Fhxb_bniXbZu
z6*=C&)Lb3!-<2x<!m4<0R7RzW;@iNzLCY2&Rw^sKE}zWpVrgXEcLikH+K>}DROdt)
adjNVDMTVB0mWu@55|A;<!l34oOU!@b2!J&J

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/chat-left.png b/static/image/phone-message/oppo/chat-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a6245531bc52bf3cb0510cfbadc379c59e91c10
GIT binary patch
literal 1316
zcmeAS@N?(olHy`uVBq!ia0vp^bs)^a3?#4q4c*1Sz$hNz6XFWw0>OV6ICJLA)vH&5
zyxX^LKYRA<#fulOU%!6)_U-%k?;k#V2owQ|14SM^di3(;%g2u&KLrDz$n)pVfm|R7
z6o2*V6_5>743q?tK*1+Zo<Kw(Y#<4dg)<;3fr7{YA`5f_To%ZH2tt%0vw<RLTr?4J
zad8O=2}wyw85tQRB_&f+Q(IeGZ*T9qy1M%M`lhC)*4EbDyLa!|vj?cL=CPAHFkJjf
zg8YIR7#W$ES=rdwxwv`x1O!DyC8d=042_IT&CIOr9D*Za;^NcN%4+LdJ34wNPnkA*
z!Qv&$R_@xh_w<E}cke%b^6dGGS06rn{_^$P&tHH3{=4=tl97RdInUF@F(l*O+1W3H
z9yy4(MYBqpc6F@K*|c(kpg^kd(G4742UuKXumApc-tdKmahKBq&*z{2EY)g%<+bZ~
zUQchgZ_&=Z4}a7>jL6(lviE90ANTK%8?L{dl;dN-EgfhXz9#bv=i0C{ColH07UsDt
zl!jPd&s6wT`BX!+fFt0%g>6x0$IrX<8YktR_pB`X{mbuPkJ~ey{hRa5&+nTRc*{gA
zS9Nn%U-h}^S38+)U(cQ$VYhpxovNST<=LAj-<(?=I(Ns#)zzo}ywlWNaiK-SF|#Xp
zf7yadM^><B*T~;4i&PfAa4K3x{-M_<SG9{?>v}Zjf0K`!kQpQMYx!}jt4``ETIvf8
z{hZyG_^Ac=|B<-5Pa=ELOOs^p#W$Y|YjHaGp6O4yf7OHI)_K7{-kgr#=GiCi_}4eX
z>rg;4+xz*tmsA=}l%4nQe;F{hC5WH*cKsi9l^MeSC)EC%&{Aws@PE6y{*l-ElbX-%
zUn>^rkp24g?z2%dbr$aVcJ;5j)rB<|v)M0+|61TBwvf&K_H@xrJWntGEidcWNm>8@
z-~Pz0LGgFrbT7GNbMeUE(&x`+YX9@7@7Z4yGcjcQ<(*Yey7$+}e~DbzUQ%`Eqi+2-
zXO^|mYp>rwdjA_w<l5zD{;#c%-59ri&HvN4-)vcXeS7)8XZ3R`H^uo^KA(NBxb4FH
z%6ngo6u+qKzq{63qV}c#Kf?vdU#cF2&R6Q07qmX|k@A#(FI4~U33Pm^Ep1!-MP{je
z|F=a}k?t=`ZysABv+&E5$um}WTo#W#6MOh&cHXnA1yyHHA8NTAJmcuZUlzCBUww~c
zT&ceydC9*SnjU)(Nh!Mo%_(``JMV5n8|T!#_SxBoUAQm1M<&Mc@XIFueXF|u&#Pk*
z`8$62^OrYQ6#kL=@%rxL%^x3`Psp!h{`;_TyX=Q$+;&9=*!6zwV%(S0xPI1yZZnHB
z4D68)1cYT1nlE!dc*141mBnvO<K?awOSCMO^7yT2KF#?eiEGD{7QH2f(*&y*et*h5
zeee376Ok@&%kt*$n6__y2bZ4WV(u4bGE;vyeBN#9zaZNEK(BF6ZuDidEq`riFFT-{
z{G!dWWVgbO$e@bVD;{1rqqHS3EM@kGcYnU;PjcJd!JRchJ~@QjTCPE^&!NBV0DJO<
zWXBH+H9mMq)G6@U@^Q$w9qDgc#Gd#t`M~`Ij;I41Kk|id1Q)YzC|nFG>^xolT-G@y
GGywpmKH*{j

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/default.png b/static/image/phone-message/oppo/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb2f32722e855b5c4f3dd77117c55bb53032bf38
GIT binary patch
literal 1611
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

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/shanchu.png b/static/image/phone-message/shanchu.png
new file mode 100644
index 0000000000000000000000000000000000000000..33439dc86672782aed130163054ca16782157467
GIT binary patch
literal 1065
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bYNg$><{n>aRqY!kAguH0-f(Z1^}a^
zr6kBNn1PXrnT3^|gOi(wmrp=YL{v;dT1HkuQCUS*O+!;#M_1p#*u>P_!rI2x&fdYv
z#nsE(*FP{QI5aFWIzAyiD?7KKsJ5=5slBtir>}qFl&RCE&zv=X;i6^B*R0>LbML<W
z2acRLdHTYo%U7;lzj5pSgGY~_K7aN4&D-}MK7Ic3?fZ}4fByaptdczmOe#k`T^vI^
zj=!Cj9(>3_piQ}B0Y_8P8zrwddlQ(e-|sEos1&gwP~`OQ!>U}$8GL?%vgs9ePs^U4
zjGeUmjge2!el@>|!Rena$1Ipw<C+&y`at%4puf`I+hxrOcbKo_-IM%KkodW{?)lZN
zTZ)d`zH|S&Mm~4DaKxgL$L<YpuQW7duvtvId~(sg<I6Q86PA2ste#>t+0-ypLL`7s
zH>5o>SMT}qMNQnx*1Y-~HC;jBeB&hN#{PFprUr@~JR@z?IDJmok&6mH&P-H#J?9L^
z&gaW5i#FY9)-|+@EpGJ{HOyvO!?o$oyQbd1>vBrmWBoqPZK|01ezS_^%G7f?dQaOq
z_fDI7{q~CMYjUS-s*srR{QLT641RG*Q4HNZe$#q>r(9#(ZkXU|XsPyp$DeJs`xT7c
zeur*9VI87l^{upK&yOc%^S*_6X1`v#KDpQNdzs1C-cR>`O8#+<lx(b-<vMM*&4wky
zo2MS|mE9?EmTC9OBPF|7Z=4k8RDbI0SMwsYX+obp)9>cDz4HxAbSqc?PYvxbIx%bS
z(cd>qe@nKvuYdhladyDhUEMbXZEpTPG$mtc=FbCq2A{X)7O!!U*%s}0EhUZnz^X+T
e{f;bn&bsJ)#N>!Q<x7AGjKR~@&t;ucLK6U1kHqHy

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/vivo/default.png b/static/image/phone-message/vivo/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..b49913701da69d92416fe79e31f6f22e1a9b4cb7
GIT binary patch
literal 1911
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

literal 0
HcmV?d00001

diff --git a/utils/common.js b/utils/common.js
index 3a66351..b91db10 100644
--- a/utils/common.js
+++ b/utils/common.js
@@ -104,6 +104,64 @@ export const dateUtil = {
       const day = String(date.getDate()).padStart(2, '0');
       return `${month}-${day} ${timeStr}`;
     }
+  },
+
+  /**
+   * 仿支付宝消息列表时间格式化
+   * 今天: 原样不显示 (或者按需可显示 HH:mm) 但根据你的图示只有 昨天/星期/日期
+   * 昨天: 返回 "昨天"
+   * 近一周内且不是今天昨天: 返回 "星期X"
+   * 超过一周: 按照 format 返回 (或根据 hideCurrentYear 决定当年是否隐藏年份)
+   * @param {Date|string|number} date - 日期对象或时间戳
+   * @param {boolean} hideCurrentYear - 是否在当年隐藏年份，默认为 true
+   * @param {string} format - 自定义日期格式，默认为 'YYYY/M/D' (支持 YYYY, MM, M, DD, D 等)
+   * @returns {string} 格式化后的时间字符串
+   */
+  formatMessageTime(date, hideCurrentYear = false, format = 'YYYY/M/D') {
+    if (!date) return '';
+
+    if (typeof date === 'string' || typeof date === 'number') {
+      // 兼容 iOS 的 YYYY-MM-DD 解析
+      if (typeof date === 'string') {
+        date = date.replace(/-/g, '/');
+      }
+      date = new Date(date);
+    }
+
+    const now = new Date();
+    // 将时分秒抹零，只取日期部分进行比对
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+    const diffDays = Math.floor((today.getTime() - targetDate.getTime()) / (1000 * 60 * 60 * 24));
+
+    if (diffDays === 0) {
+      // 如果需要显示今天的具体时间可返回： `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+      return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    } else if (diffDays === 1) {
+      return '昨天';
+    } else if (diffDays > 1 && diffDays < 7) {
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      return weekDays[date.getDay()];
+    } else {
+      // 超过7天
+      let resultFormat = format;
+      if (hideCurrentYear && targetDate.getFullYear() === now.getFullYear()) {
+        // 智能去除年份及紧跟的连接符、汉字或变宽空格（例如: "YYYY-", "YYYY/", "YYYY年"）
+        resultFormat = resultFormat.replace(/YYYY[-/年\s]*/g, '');
+      }
+
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+
+      return resultFormat
+        .replace(/YYYY/g, year)
+        .replace(/MM/g, String(month).padStart(2, '0'))
+        .replace(/M/g, month)
+        .replace(/DD/g, String(day).padStart(2, '0'))
+        .replace(/D/g, day);
+    }
   }
 };