From cffb2c29fb0febf28e91febbbb30addc2f554048 Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Mon, 1 Jun 2026 10:03:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9C=AA=E5=8F=91=E9=80=81?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/message/chat/chat-layout.vue | 2303 ++++++++++++-----------
 1 file changed, 1160 insertions(+), 1143 deletions(-)

diff --git a/components/message/chat/chat-layout.vue b/components/message/chat/chat-layout.vue
index eb63c79..832bed6 100644
--- a/components/message/chat/chat-layout.vue
+++ b/components/message/chat/chat-layout.vue
@@ -1,1184 +1,1201 @@
 <template>
-    <view class="page-container flex-column" :class="`${phone}-style`">
-        <view class="status-placeholder w100" :style="{ height: `${data.statusBarHeight}px` }"></view>
-        <!-- <view class="top-placeholder" :style="{ height: data.topBoxHeight + 'px' }"></view> -->
-        <view class="top-box " :style="{ top: data.statusBarHeight + 'px' }">
-            <slot name="top">
-                <view class="top-container" v-show="!sortMode" @click.stop="handleTitleClick">
-                    <view class="h100 flex-align-center flex-justify-between">
-                        <view class="left flex-align-center">
-                            <image @click.stop="util.goBack()" :src="`/static/image/phone-message/${phone}/back.png`">
-                            </image>
-                            <view v-if="phone == 'iphone' && number > 0" class="number-box">{{ number }}</view>
-                        </view>
-                        <view class="center">
-                            <image v-if="phone == 'iphone' || phone == 'huawei'" class="img shrink-0"
-                                :class="chatInfo.imgShape"
-                                :src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
-                            </image>
-                            <text v-if="phone != 'iphone'" class="title">{{ displayTitle }}</text>
-                            <text v-if="phone == 'oppo' && chatInfo.area" class="second-text">{{ chatInfo.area }}</text>
-                        </view>
-                        <view class="right flex-align-center">
-                            <image v-if="phone == 'mi'" class="img shrink-0"
-                                src="/static/image/phone-message/mi/nav-right-icon.png">
-                            </image>
-                            <image v-if="phone == 'oppo'" class="img shrink-0"
-                                src="/static/image/phone-message/oppo/nav-right-icon.png">
-                            </image>
-                            <image v-if="phone == 'huawei'" class="img shrink-0"
-                                src="/static/image/phone-message/huawei/chat-more.png">
-                            </image>
-                            <image v-if="phone == 'vivo'" class="img shrink-0"
-                                src="/static/image/phone-message/vivo/select.png">
-                            </image>
-                            <image v-if="phone == 'vivo'" class="img shrink-0 m-l-50"
-                                src="/static/image/phone-message/vivo/more.png">
-                            </image>
-                        </view>
-                    </view>
-                    <view v-if="phone == 'iphone'" class="text-box flex-align-center flex-justify-center">
-                        <text class="title">{{ displayTitle }}</text>
-                        <!-- <uni-icons type="right" size="10" color="#D8D8D8"></uni-icons> -->
-                        <image style="width: 16rpx;height: 16rpx;"
-                            src="/static/image/phone-message/iphone/chat-right.png"></image>
-                    </view>
-                </view>
-            </slot>
-        </view>
-        <view class="center-box flex-1" @click="handleBoxClick">
-            <scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation :show-scrollbar="false"
-                class="scroll-view h100">
-                <slot></slot>
-            </scroll-view>
-        </view>
-        <view class="bottom-box fixed-bottom-box" :class="{ 'safe-area': $system == 'iOS' && data.keyboardHeight == 0 }"
-            :style="{ bottom: data.keyboardHeight + 'px' }">
-            <slot name="bottom">
-                <view class="bottom-container flex-align-center" v-show="!sortMode">
-                    <image v-if="phone != 'huawei' && phone != 'vivo'" class="add-img shrink-0"
-                        :src="`/static/image/phone-message/${phone}/chat-left.png`"
-                        @click="phone === 'oppo' ? chooseImage() : null"></image>
-                    <image v-if="phone == 'huawei'" class="add-img shrink-0"
-                        :src="`/static/image/phone-message/huawei/emoji.png`"></image>
-                    <view class="search-box flex-1 flex-align-center">
-                        <image v-if="phone == 'huawei'" class="left-icon ka" @click="changeSim"
-                            :src="`/static/image/phone-message/huawei/ka${simIndex}.png`"></image>
-                        <image v-if="phone == 'huawei'" class="left-icon down"
-                            src="/static/image/phone-message/huawei/down.png"></image>
-                        <!-- <input class="input flex-1" :placeholder="showInfo.placeholder" v-model="content"
+	<view class="page-container flex-column" :class="`${phone}-style`">
+		<view class="status-placeholder w100" :style="{ height: `${data.statusBarHeight}px` }"></view>
+		<!-- <view class="top-placeholder" :style="{ height: data.topBoxHeight + 'px' }"></view> -->
+		<view class="top-box " :style="{ top: data.statusBarHeight + 'px' }">
+			<slot name="top">
+				<view class="top-container" v-show="!sortMode" @click.stop="handleTitleClick">
+					<view class="h100 flex-align-center flex-justify-between">
+						<view class="left flex-align-center">
+							<image @click.stop="util.goBack()" :src="`/static/image/phone-message/${phone}/back.png`">
+							</image>
+							<view v-if="phone == 'iphone' && number > 0" class="number-box">{{ number }}</view>
+						</view>
+						<view class="center">
+							<image v-if="phone == 'iphone' || phone == 'huawei'" class="img shrink-0"
+								:class="chatInfo.imgShape"
+								:src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
+							</image>
+							<text v-if="phone != 'iphone'" class="title">{{ displayTitle }}</text>
+							<text v-if="phone == 'oppo' && chatInfo.area" class="second-text">{{ chatInfo.area }}</text>
+						</view>
+						<view class="right flex-align-center">
+							<image v-if="phone == 'mi'" class="img shrink-0"
+								src="/static/image/phone-message/mi/nav-right-icon.png">
+							</image>
+							<image v-if="phone == 'oppo'" class="img shrink-0"
+								src="/static/image/phone-message/oppo/nav-right-icon.png">
+							</image>
+							<image v-if="phone == 'huawei'" class="img shrink-0"
+								src="/static/image/phone-message/huawei/chat-more.png">
+							</image>
+							<image v-if="phone == 'vivo'" class="img shrink-0"
+								src="/static/image/phone-message/vivo/select.png">
+							</image>
+							<image v-if="phone == 'vivo'" class="img shrink-0 m-l-50"
+								src="/static/image/phone-message/vivo/more.png">
+							</image>
+						</view>
+					</view>
+					<view v-if="phone == 'iphone'" class="text-box flex-align-center flex-justify-center">
+						<text class="title">{{ displayTitle }}</text>
+						<!-- <uni-icons type="right" size="10" color="#D8D8D8"></uni-icons> -->
+						<image style="width: 16rpx;height: 16rpx;"
+							src="/static/image/phone-message/iphone/chat-right.png"></image>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<view class="center-box flex-1" @click="handleBoxClick">
+			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation :show-scrollbar="false"
+				class="scroll-view h100">
+				<slot></slot>
+			</scroll-view>
+		</view>
+		<view class="bottom-box fixed-bottom-box" :class="{ 'safe-area': $system == 'iOS' && data.keyboardHeight == 0 }"
+			:style="{ bottom: data.keyboardHeight + 'px' }">
+			<slot name="bottom">
+				<view class="bottom-container flex-align-center" v-show="!sortMode">
+					<image v-if="phone != 'huawei' && phone != 'vivo'" class="add-img shrink-0"
+						:src="`/static/image/phone-message/${phone}/chat-left.png`"
+						@click="phone === 'oppo' ? chooseImage() : null"></image>
+					<image v-if="phone == 'huawei'" class="add-img shrink-0"
+						:src="`/static/image/phone-message/huawei/emoji.png`"></image>
+					<view class="search-box flex-1 flex-align-center">
+						<image v-if="phone == 'huawei'" class="left-icon ka" @click="changeSim"
+							:src="`/static/image/phone-message/huawei/ka${simIndex}.png`"></image>
+						<image v-if="phone == 'huawei'" class="left-icon down"
+							src="/static/image/phone-message/huawei/down.png"></image>
+						<!-- <input class="input flex-1" :placeholder="showInfo.placeholder" v-model="content"
                             @input="onInput"></input> -->
-                        <!-- <textarea class="input flex-1" :adjust-position="false" fixed auto-height show-confirm-bar
+						<!-- <textarea class="input flex-1" :adjust-position="false" fixed auto-height show-confirm-bar
                             auto-blur :placeholder="showInfo.placeholder" v-model="content" @input="onInput"
                             @focus="onFocus" @blur="onBlur"></textarea> -->
-                        <editor id="chat-layout-editor" class="input flex-1" :placeholder="showInfo.placeholder"
-                            @input="onInput"></editor>
-                        <image v-if="phone == 'iphone' && !isSend" class="right-icon"
-                            src="/static/image/phone-message/iphone/mic.png"></image>
-                        <image v-if="phone == 'iphone' && isSend" class="right-send-icon"
-                            src="/static/image/phone-message/iphone/send.png" @click="sendMessage"></image>
-                        <image v-if="phone == 'oppo'" class="right-icon"
-                            :src="`/static/image/phone-message/oppo/ka${simIndex}.png`" @click="changeSim">
-                        </image>
-                    </view>
-                    <view v-if="phone != 'iphone'" class="flex-align-center">
-                        <image v-if="phone == 'mi'" class="right-icon"
-                            :src="`/static/image/phone-message/mi/${isSend ? 'send' : 'unsend'}.png`"
-                            @click="sendMessage">
-                        </image>
-                        <image v-if="phone == 'oppo'" class="right-icon"
-                            :src="`/static/image/phone-message/oppo/${isSend ? 'send' : 'unsend'}.png`"
-                            @click="sendMessage">
-                        </image>
-                        <image v-if="phone == 'huawei'" class="right-icon"
-                            src="/static/image/phone-message/huawei/chat-add.png">
-                        </image>
-                        <image v-if="phone == 'huawei'" class="right-icon m-l-34"
-                            :src="`/static/image/phone-message/huawei/${isSend ? 'send' : 'unsend'}.png`"
-                            @click="sendMessage">
-                        </image>
-                        <text v-if="phone == 'vivo'" class="send-text" :class="{ 'send-text-active': isSend }"
-                            @click="sendMessage">发送</text>
-                    </view>
-                </view>
-            </slot>
-        </view>
-        <view class="bottom-placeholder" :style="{ height: (data.bottomBoxHeight) + 'px' }">
-        </view>
-    </view>
+						<editor id="chat-layout-editor" class="input flex-1" :placeholder="showInfo.placeholder"
+							@input="onInput"></editor>
+						<image v-if="phone == 'iphone' && !isSend" class="right-icon"
+							src="/static/image/phone-message/iphone/mic.png"></image>
+						<image v-if="phone == 'iphone' && isSend" class="right-send-icon"
+							src="/static/image/phone-message/iphone/send.png" @click="sendMessage"></image>
+						<image v-if="phone == 'oppo'" class="right-icon"
+							:src="`/static/image/phone-message/oppo/ka${simIndex}.png`" @click="changeSim">
+						</image>
+					</view>
+					<view v-if="phone != 'iphone'" class="flex-align-center">
+						<image v-if="phone == 'mi'" class="right-icon"
+							:src="`/static/image/phone-message/mi/${isSend ? 'send' : 'unsend'}.png`"
+							@click="sendMessage">
+						</image>
+						<image v-if="phone == 'oppo'" class="right-icon"
+							:src="`/static/image/phone-message/oppo/${isSend ? 'send' : 'unSend'}.png`"
+							@click="sendMessage">
+						</image>
+						<image v-if="phone == 'huawei'" class="right-icon"
+							src="/static/image/phone-message/huawei/chat-add.png">
+						</image>
+						<image v-if="phone == 'huawei'" class="right-icon m-l-34"
+							:src="`/static/image/phone-message/huawei/${isSend ? 'send' : 'unsend'}.png`"
+							@click="sendMessage">
+						</image>
+						<text v-if="phone == 'vivo'" class="send-text" :class="{ 'send-text-active': isSend }"
+							@click="sendMessage">发送</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<view class="bottom-placeholder" :style="{ height: (data.bottomBoxHeight) + 'px' }">
+		</view>
+	</view>
 </template>
 <script setup>
-import { reactive, onMounted, computed, toRefs } from 'vue'
-import { dateUtil, 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"
-        })
-    },
-    // 是否处于拖拽排序模式
-    sortMode: {
-        type: Boolean,
-        default: false
-    },
-    number: {
-        type: Number,
-        default: 0
-    }
-})
+	import {
+		reactive,
+		onMounted,
+		computed,
+		toRefs
+	} from 'vue'
+	import {
+		dateUtil,
+		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"
+			})
+		},
+		// 是否处于拖拽排序模式
+		sortMode: {
+			type: Boolean,
+			default: false
+		},
+		number: {
+			type: Number,
+			default: 0
+		}
+	})
 
-const data = reactive({
-    statusBarHeight: 0,
-    topBoxHeight: 0,
-    bottomBoxHeight: 0,
-    isSend: false,
-    content: "",
-    simIndex: 1,
-    scrollTop: 0,
-    keyboardHeight: 0,
-    lastClickTime: 0
-})
+	const data = reactive({
+		statusBarHeight: 0,
+		topBoxHeight: 0,
+		bottomBoxHeight: 0,
+		isSend: false,
+		content: "",
+		simIndex: 1,
+		scrollTop: 0,
+		keyboardHeight: 0,
+		lastClickTime: 0
+	})
 
-let { isSend, content, simIndex, scrollTop } = toRefs(data)
+	let {
+		isSend,
+		content,
+		simIndex,
+		scrollTop
+	} = toRefs(data)
 
-const emit = defineEmits(['send', 'dblclick-left', 'dblclick-right', 'title-click'])
-const onInput = (e) => {
-    content.value = e.detail.html
-    const htmlStr = (content.value || '').trim()
-    if (htmlStr === '' || htmlStr === '<p><br></p>' || htmlStr === '<br>') {
-        isSend.value = false
-    } else {
-        isSend.value = true
-    }
-    setTimeout(() => {
-        uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-            if (rect) {
-                data.bottomBoxHeight = rect.height;
-            }
-        }).exec();
-    }, 50);
-}
+	const emit = defineEmits(['send', 'dblclick-left', 'dblclick-right', 'title-click'])
+	const onInput = (e) => {
+		content.value = e.detail.html
+		const htmlStr = (content.value || '').trim()
+		if (htmlStr === '' || htmlStr === '<p><br></p>' || htmlStr === '<br>') {
+			isSend.value = false
+		} else {
+			isSend.value = true
+		}
+		setTimeout(() => {
+			uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+				if (rect) {
+					data.bottomBoxHeight = rect.height;
+				}
+			}).exec();
+		}, 50);
+	}
 
 
 
-/**
- * 切换sim卡
- */
-const changeSim = () => {
-    simIndex.value = simIndex.value == 1 ? 2 : 1
-}
+	/**
+	 * 切换sim卡
+	 */
+	const changeSim = () => {
+		simIndex.value = simIndex.value == 1 ? 2 : 1
+	}
 
-/**
- * 发送消息
- */
-const sendMessage = () => {
-    if (!isSend.value) return
-    const date = dateUtil.now("YYYY-MM-DD HH:mm")
-    const params = {
-        content: `<p>${content.value}</p>`,
-        simIndex: simIndex.value,
-        time: date,
-        isMe: true
-    }
-    emit('send', params)
-    data.content = ""
-    data.isSend = false
+	/**
+	 * 发送消息
+	 */
+	const sendMessage = () => {
+		if (!isSend.value) return
+		const date = dateUtil.now("YYYY-MM-DD HH:mm")
+		const params = {
+			content: `<p>${content.value}</p>`,
+			simIndex: simIndex.value,
+			time: date,
+			isMe: true
+		}
+		emit('send', params)
+		data.content = ""
+		data.isSend = false
 
-    // 清空 editor 中输入的值
-    uni.createSelectorQuery().select('#chat-layout-editor').context((res) => {
-        if (res && res.context) {
-            res.context.clear()
-        }
-        data.isSend = false
-    }).exec()
+		// 清空 editor 中输入的值
+		uni.createSelectorQuery().select('#chat-layout-editor').context((res) => {
+			if (res && res.context) {
+				res.context.clear()
+			}
+			data.isSend = false
+		}).exec()
 
-    // 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
-    setTimeout(() => {
-        data.scrollTop = 99999 + Math.random();
-        uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-            if (rect) {
-                data.bottomBoxHeight = rect.height;
-            }
-        }).exec();
-        data.isSend = false
-    }, 100);
-    data.isSend = false
-}
+		// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
+		setTimeout(() => {
+			data.scrollTop = 99999 + Math.random();
+			uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+				if (rect) {
+					data.bottomBoxHeight = rect.height;
+				}
+			}).exec();
+			data.isSend = false
+		}, 100);
+		data.isSend = false
+	}
 
-/**
- * 处理 center-box 点击事件，检测双击并区分左右
- */
-const handleBoxClick = (e) => {
-    const now = Date.now();
-    const clickInterval = now - data.lastClickTime;
+	/**
+	 * 处理 center-box 点击事件，检测双击并区分左右
+	 */
+	const handleBoxClick = (e) => {
+		const now = Date.now();
+		const clickInterval = now - data.lastClickTime;
 
-    // 如果两次点击间隔在 300ms 以内，视为双击
-    if (clickInterval > 0 && clickInterval < 300) {
-        // 获取点击位置的 X 坐标
-        const clientX = e.detail.x || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
+		// 如果两次点击间隔在 300ms 以内，视为双击
+		if (clickInterval > 0 && clickInterval < 300) {
+			// 获取点击位置的 X 坐标
+			const clientX = e.detail.x || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
 
-        // 获取屏幕宽度来区分左右
-        const systemInfo = uni.getSystemInfoSync();
-        const halfWidth = systemInfo.screenWidth / 2;
+			// 获取屏幕宽度来区分左右
+			const systemInfo = uni.getSystemInfoSync();
+			const halfWidth = systemInfo.screenWidth / 2;
 
-        if (clientX < halfWidth) {
-            console.log('双击左侧');
-            emit('dblclick-left');
-        } else {
-            console.log('双击右侧');
-            emit('dblclick-right');
-        }
+			if (clientX < halfWidth) {
+				console.log('双击左侧');
+				emit('dblclick-left');
+			} else {
+				console.log('双击右侧');
+				emit('dblclick-right');
+			}
 
-        // 成功触发双击后重置时间，防止连续三次点击触发两次双击
-        data.lastClickTime = 0;
-    } else {
-        data.lastClickTime = now;
-    }
-}
+			// 成功触发双击后重置时间，防止连续三次点击触发两次双击
+			data.lastClickTime = 0;
+		} else {
+			data.lastClickTime = now;
+		}
+	}
 
 
-const handleTitleClick = () => {
-    emit('title-click');
-}
+	const handleTitleClick = () => {
+		emit('title-click');
+	}
 
 
-// 处理标题显示
-const displayTitle = computed(() => {
-    let title = props.chatInfo.title || '';
-    if (props.phone === 'oppo') {
-        const noSpace = title.replace(/\s+/g, '');
-        if (/^\d{11}$/.test(noSpace)) {
-            return noSpace.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
-        }
-    }
-    return title;
-})
+	// 处理标题显示
+	const displayTitle = computed(() => {
+		let title = props.chatInfo.title || '';
+		if (props.phone === 'oppo') {
+			const noSpace = title.replace(/\s+/g, '');
+			if (/^\d{11}$/.test(noSpace)) {
+				return noSpace.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
+			}
+		}
+		return title;
+	})
 
-// 展示文字信息
-const showInfo = computed(() => {
-    let placeholder
-    switch (props.phone) {
-        case "iphone":
-            placeholder = '信息 · 短信'
-            break;
-        case "mi":
-            placeholder = '短信'
-            break;
-        case "oppo":
-            placeholder = '5G 消息'
-            break;
-        case "huawei":
-            placeholder = '短信/彩信'
-            break;
-        case "vivo":
-            placeholder = '输入内容'
-            break;
-        default:
-            break;
-    }
-    return { placeholder }
-})
+	// 展示文字信息
+	const showInfo = computed(() => {
+		let placeholder
+		switch (props.phone) {
+			case "iphone":
+				placeholder = '信息 · 短信'
+				break;
+			case "mi":
+				placeholder = '短信'
+				break;
+			case "oppo":
+				placeholder = '5G 消息'
+				break;
+			case "huawei":
+				placeholder = '短信/彩信'
+				break;
+			case "vivo":
+				placeholder = '输入内容'
+				break;
+			default:
+				break;
+		}
+		return {
+			placeholder
+		}
+	})
 
-/**
- * 选择图片并发送
- */
-const chooseImage = () => {
-    uni.chooseImage({
-        count: 1, // 仅选一张
-        sizeType: ['original', 'compressed'], // 原图或压缩图
-        sourceType: ['album', 'camera'], // 从相册选择或拍照
-        success: (res) => {
-            const tempFilePaths = res.tempFilePaths;
-            if (tempFilePaths.length > 0) {
-                const tempPath = tempFilePaths[0];
+	/**
+	 * 选择图片并发送
+	 */
+	const chooseImage = () => {
+		uni.chooseImage({
+			count: 1, // 仅选一张
+			sizeType: ['original', 'compressed'], // 原图或压缩图
+			sourceType: ['album', 'camera'], // 从相册选择或拍照
+			success: (res) => {
+				const tempFilePaths = res.tempFilePaths;
+				if (tempFilePaths.length > 0) {
+					const tempPath = tempFilePaths[0];
 
-                const processImage = (finalPath) => {
-                    // 获取图片信息，计算横竖向及相应宽高
-                    uni.getImageInfo({
-                        src: finalPath,
-                        success: (image) => {
-                            let w = image.width;
-                            let h = image.height;
+					const processImage = (finalPath) => {
+						// 获取图片信息，计算横竖向及相应宽高
+						uni.getImageInfo({
+							src: finalPath,
+							success: (image) => {
+								let w = image.width;
+								let h = image.height;
 
-                            // 根据 EXIF 方向修正实际视觉宽高
-                            if (image.orientation && ['left', 'right', 'left-mirrored', 'right-mirrored'].includes(image.orientation)) {
-                                w = image.height;
-                                h = image.width;
-                            }
+								// 根据 EXIF 方向修正实际视觉宽高
+								if (image.orientation && ['left', 'right', 'left-mirrored',
+										'right-mirrored'
+									].includes(image.orientation)) {
+									w = image.height;
+									h = image.width;
+								}
 
-                            const isHorizontal = w >= h;
-                            const width = isHorizontal ? '368rpx' : '274rpx';
-                            const height = isHorizontal ? '274rpx' : '368rpx';
+								const isHorizontal = w >= h;
+								const width = isHorizontal ? '368rpx' : '274rpx';
+								const height = isHorizontal ? '274rpx' : '368rpx';
 
-                            const date = dateUtil.now("YYYY-MM-DD HH:mm")
-                            // 封装成HTML的img标签作为消息内容
-                            const content = `<img src="${finalPath}" style="width: ${width}; height: ${height}; border-radius: 16rpx; display: block;" />`;
-                            const params = {
-                                content: content,
-                                imgUrl: finalPath,
-                                type: 'image',
-                                imgWidth: width,
-                                imgHeight: height,
-                                simIndex: simIndex.value,
-                                time: date,
-                                isMe: true
-                            }
-                            emit('send', params)
+								const date = dateUtil.now("YYYY-MM-DD HH:mm")
+								// 封装成HTML的img标签作为消息内容
+								const content =
+									`<img src="${finalPath}" style="width: ${width}; height: ${height}; border-radius: 16rpx; display: block;" />`;
+								const params = {
+									content: content,
+									imgUrl: finalPath,
+									type: 'image',
+									imgWidth: width,
+									imgHeight: height,
+									simIndex: simIndex.value,
+									time: date,
+									isMe: true
+								}
+								emit('send', params)
 
-                            // 延迟拉动到底部
-                            setTimeout(() => {
-                                data.scrollTop = 99999 + Math.random();
-                                uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-                                    if (rect) {
-                                        data.bottomBoxHeight = rect.height;
-                                    }
-                                }).exec();
-                            }, 100);
-                        }
-                    })
-                };
+								// 延迟拉动到底部
+								setTimeout(() => {
+									data.scrollTop = 99999 + Math.random();
+									uni.createSelectorQuery().select('.bottom-box')
+										.boundingClientRect(rect => {
+											if (rect) {
+												data.bottomBoxHeight = rect
+													.height;
+											}
+										}).exec();
+								}, 100);
+							}
+						})
+					};
 
-                // #ifdef APP-PLUS
-                uni.saveFile({
-                    tempFilePath: tempPath,
-                    success: (saveRes) => {
-                        processImage(saveRes.savedFilePath);
-                    },
-                    fail: () => {
-                        processImage(tempPath);
-                    }
-                });
-                // #endif
-                // #ifndef APP-PLUS
-                processImage(tempPath);
-                // #endif
-            }
-        }
-    })
-}
+					// #ifdef APP-PLUS
+					uni.saveFile({
+						tempFilePath: tempPath,
+						success: (saveRes) => {
+							processImage(saveRes.savedFilePath);
+						},
+						fail: () => {
+							processImage(tempPath);
+						}
+					});
+					// #endif
+					// #ifndef APP-PLUS
+					processImage(tempPath);
+					// #endif
+				}
+			}
+		})
+	}
 
-onMounted(() => {
-    // 同步获取系统信息
-    const systemInfo = uni.getSystemInfoSync();
-    data.statusBarHeight = systemInfo.statusBarHeight || 0;
-
-    // 动态获取 top-box 和 bottom-box 高度
-    setTimeout(() => {
-        uni.createSelectorQuery().select('.top-box').boundingClientRect(rect => {
-            if (rect) {
-                data.topBoxHeight = rect.height;
-            }
-        }).exec();
-        uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-            if (rect) {
-                data.bottomBoxHeight = rect.height;
-            }
-        }).exec();
-    }, 50);
-
-    // 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
-    setTimeout(() => {
-        data.scrollTop = 99999 + Math.random();
-        uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-            if (rect) {
-                data.bottomBoxHeight = rect.height;
-            }
-        }).exec();
-    }, 300);
-
-})
+	onMounted(() => {
+		// 同步获取系统信息
+		const systemInfo = uni.getSystemInfoSync();
+		data.statusBarHeight = systemInfo.statusBarHeight || 0;
 
+		// 动态获取 top-box 和 bottom-box 高度
+		setTimeout(() => {
+			uni.createSelectorQuery().select('.top-box').boundingClientRect(rect => {
+				if (rect) {
+					data.topBoxHeight = rect.height;
+				}
+			}).exec();
+			uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+				if (rect) {
+					data.bottomBoxHeight = rect.height;
+				}
+			}).exec();
+		}, 50);
 
+		// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
+		setTimeout(() => {
+			data.scrollTop = 99999 + Math.random();
+			uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
+				if (rect) {
+					data.bottomBoxHeight = rect.height;
+				}
+			}).exec();
+		}, 300);
 
+	})
 </script>
 <style>
-@import '@/common/main.css';
+	@import '@/common/main.css';
 </style>
 <style lang="less" scoped>
-.page-container {
-    width: 100vw;
-    height: 100vh;
-    background-color: #fff;
-}
-
-.m-l-34 {
-    margin-left: 34rpx;
-}
-
-.m-l-50 {
-    margin-left: 50rpx;
-}
-
-.center-box {
-    overflow: hidden;
-    // overflow-y: scroll;
-    // padding-bottom: 12px;
-}
-
-.fixed-bottom-box {
-    position: fixed;
-    width: 100%;
-    background: #fff;
-    bottom: 0;
-    left: 0;
-}
-
-
-.fixed-top-box {
-    position: fixed;
-    width: 100%;
-    z-index: 9;
-    left: 0;
-    top: 0;
-}
-
-//苹果样式
-.iphone-style {
-    .circle {
-        border-radius: 50% !important;
-    }
-
-    .square {
-        border-radius: 16rpx !important;
-    }
-
-    .status-placeholder {
-        background-color: #F7F7F7;
-    }
-
-    .top-box {
-
-        .top-container {
-            padding: 32rpx 24rpx 20rpx;
-            background-color: #F7F7F7;
-            box-shadow: inset 0 -0.3px 0 0 #B5B5B5;
-
-            .left {
-                width: 180rpx;
-
-                image {
-                    width: 40rpx;
-                    height: 40rpx;
-                }
-
-                .number-box {
-                    height: 36rpx;
-                    min-width: 36rpx;
-                    text-align: center;
-                    font-size: 12px;
-                    line-height: 24rpx;
-                    padding: 6rpx 10rpx;
-                    border-radius: 18rpx;
-                    color: #fff;
-                    background-color: #0276FF;
-                    margin-left: 4rpx;
-                    flex-shrink: 0;
-                }
-            }
-
-            .center {
-                height: 96rpx;
-
-                .img {
-                    width: 96rpx;
-                    height: 96rpx;
-                    border-radius: 50%;
-                }
-            }
-
-            .right {
-                width: 180rpx;
-
-            }
-
-            .text-box {
-                margin-top: 10rpx;
-                height: 20rpx;
-
-                .title {
-                    text-align: center;
-                    max-width: 400rpx;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    font-size: 20rpx;
-                    color: #1A1A1A;
-                    left: 20rpx;
-                    margin-right: 6rpx;
-                    font-weight: 500;
-                }
-            }
-        }
-
-
-    }
-
-
-
-    .bottom-box {
-        padding-bottom: 10rpx;
-    }
-
-    .safe-area {
-        padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
-        padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
-    }
-
-    .bottom-container {
-        padding: 10rpx 28rpx 0;
-
-        .add-img {
-            width: 66rpx;
-            height: 66rpx;
-            margin-right: 24rpx;
-        }
-
-        .search-box {
-            min-height: 70rpx;
-            border-radius: 35rpx 35rpx 35rpx 35rpx;
-            border: 2rpx solid #DFDFDF;
-            padding: 8rpx 26rpx;
-
-            ::v-deep .ql-container {
-                // height: 100%;
-                min-height: 48rpx !important;
-                font-size: 32rpx;
-            }
-
-            ::v-deep .ql-blank::before {
-                color: #C3C3C3;
-                font-size: 32rpx;
-                line-height: inherit;
-                font-style: normal;
-            }
-
-            .input {
-                height: 100%;
-                width: auto;
-                min-height: 46rpx;
-                max-height: 160rpx;
-                overflow: hidden;
-                overflow-y: scroll;
-                // min-height: 48rpx !important;
-            }
-
-            .right-icon {
-                width: 32rpx;
-                height: 32rpx;
-                margin-left: 20rpx;
-            }
-
-            .right-send-icon {
-                width: 52rpx;
-                height: 52rpx;
-                margin-left: 20rpx;
-            }
-        }
-
-    }
-}
-
-//小米样式
-.mi-style {
-    background-color: #F7F7F7 !important;
-
-    .top-box {
-
-        .top-container {
-            padding: 0 20rpx 0 52rpx;
-            background-color: #F7F7F7;
-            height: 88rpx;
-
-            .left {
-                width: 80rpx;
-
-                image {
-                    width: 48rpx;
-                    height: 48rpx;
-                }
-
-                .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 {
-                flex: 1;
-                display: flex;
-                align-items: center;
-
-                .title {
-                    flex: 1;
-                    display: block;
-                    font-size: 36rpx;
-                    color: #1A1A1A;
-                    font-weight: 500;
-                    width: 20px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    margin-right: 10rpx;
-                }
-            }
-
-            .right {
-                width: 80rpx;
-                text-align: right;
-
-                .img {
-                    width: 48rpx;
-                    height: 48rpx;
-                }
-
-            }
-
-            .text-box {
-                .title {
-                    font-size: 20rpx;
-                    color: #1A1A1A;
-                    left: 20rpx;
-                    margin-right: 6rpx;
-                }
-            }
-        }
-
-
-    }
-
-    .bottom-box {
-        padding-bottom: 20rpx;
-    }
-
-    .safe-area {
-        padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
-        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-    }
-
-    .bottom-box {
-
-        .bottom-container {
-            padding: 20rpx 28rpx 0;
-
-
-            .add-img {
-                width: 72rpx;
-                height: 72rpx;
-            }
-
-            .search-box {
-                min-height: 96rpx;
-                border-radius: 28rpx;
-                padding: 12rpx 42rpx;
-                margin: 0 20rpx;
-                background-color: #E8E8E8;
-
-                ::v-deep .ql-container {
-                    height: 100%;
-                    min-height: auto;
-                }
-
-                ::v-deep .ql-blank::before {
-                    color: #8B8B8B;
-                    font-size: 30rpx;
-                    line-height: inherit;
-                    font-style: normal;
-                }
-
-                .input {
-                    height: 100%;
-                    width: auto;
-                    min-height: 46rpx;
-                    max-height: 160rpx;
-                    overflow: hidden;
-                    overflow-y: scroll;
-                }
-
-                .right-icon {
-                    width: 32rpx;
-                    height: 32rpx;
-                    margin-left: 20rpx;
-                }
-            }
-
-            .right-icon {
-                width: 72rpx;
-                height: 72rpx;
-            }
-        }
-    }
-
-}
-
-//oppo样式
-.oppo-style {
-    background-color: #F0F1F3 !important;
-
-    .top-box {
-
-        .top-container::after {
-            position: absolute;
-            content: '';
-            width: 100%;
-            height: 1px;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background-color: #D0D1D3;
-            transform: scaleY(0.3);
-        }
-
-        .top-container {
-            position: relative;
-            padding: 0 52rpx;
-            background-color: #F0F1F3;
-            height: 98rpx;
-            padding-top: 6rpx;
-            padding-bottom: 12rpx;
-
-            .left {
-
-                image {
-                    width: 48rpx;
-                    height: 48rpx;
-                }
-
-                .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 {
-                flex: 1;
-                width: 20%;
-                height: 100%;
-                margin: 0 18rpx;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-
-                .title {
-                    width: 100%;
-                    font-size: 36rpx;
-                    color: #1A1A1A;
-                    font-weight: 500;
-                    line-height: 36rpx;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    margin-right: 10rpx;
-                }
-
-                .second-text {
-                    color: #6F6F6F;
-                    font-size: 28rpx;
-                    line-height: 28rpx;
-                    margin-top: 14rpx;
-                }
-            }
-
-            .right {
-                text-align: right;
-
-                .img {
-                    width: 48rpx;
-                    height: 48rpx;
-                }
-
-            }
-
-            .text-box {
-                .title {
-                    font-size: 20rpx;
-                    color: #1A1A1A;
-                    left: 20rpx;
-                    margin-right: 6rpx;
-                }
-            }
-        }
-
-
-    }
-
-    .bottom-box {
-        padding-bottom: 10rpx;
-    }
-
-    .safe-area {
-        padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
-        padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
-    }
-
-
-    .bottom-box {
-        background-color: #FAFAFA;
-
-        .bottom-container {
-            padding: 16rpx 32rpx 0;
-
-            .add-img {
-                width: 84rpx;
-                height: 84rpx;
-            }
-
-            .search-box {
-                min-height: 84rpx;
-                border-radius: 42rpx;
-                margin: 0 16rpx;
-                background-color: #E6E6E6;
-                padding: 12rpx 38rpx;
-
-                ::v-deep .ql-container {
-                    height: 100%;
-                    min-height: auto;
-                }
-
-                ::v-deep .ql-blank::before {
-                    color: #6C6C6E;
-                    font-size: 32rpx;
-                    line-height: inherit;
-                    font-style: normal;
-                }
-
-                .input {
-                    height: 100%;
-                    width: auto;
-                    min-height: 46rpx;
-                    max-height: 160rpx;
-                    overflow: hidden;
-                    overflow-y: scroll;
-                    caret-color: #1ABA11;
-                }
-
-                .right-icon {
-                    width: 32rpx;
-                    height: 40rpx;
-                    margin-right: 14rpx;
-                }
-            }
-
-            .right-icon {
-                width: 84rpx;
-                height: 84rpx;
-            }
-        }
-    }
-
-}
-
-//华为样式
-.huawei-style {
-    background-color: #F1F5F8 !important;
-
-    .top-box {
-
-        .top-container {
-            padding: 0 32rpx;
-            background-color: #F1F5F8;
-            height: 88rpx;
-
-            .left {
-
-                image {
-                    width: 76rpx;
-                    height: 76rpx;
-                }
-
-                .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 {
-                flex: 1;
-                width: 20%;
-                height: 100%;
-                margin: 0 16rpx;
-                display: flex;
-                align-items: center;
-                overflow: hidden;
-
-                .img {
-                    width: 72rpx;
-                    height: 72rpx;
-                    flex-shrink: 0;
-                    margin-right: 18rpx;
-                    border-radius: 50%;
-                }
-
-                .title {
-                    font-size: 40rpx;
-                    color: #1A1A1A;
-                    font-weight: 500;
-                    line-height: 40rpx;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    margin-right: 10rpx;
-                }
-
-                .second-text {
-                    color: #6F6F6F;
-                    font-size: 28rpx;
-                    line-height: 28rpx;
-                    margin-top: 14rpx;
-                }
-            }
-
-            .right {
-                text-align: right;
-
-                .img {
-                    width: 72rpx;
-                    height: 72rpx;
-                }
-
-            }
-
-            .text-box {
-                .title {
-                    font-size: 20rpx;
-                    color: #1A1A1A;
-                    left: 20rpx;
-                    margin-right: 6rpx;
-                }
-            }
-        }
-
-
-    }
-
-    .bottom-box {
-        padding-bottom: 12rpx;
-    }
-
-    .safe-area {
-        padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
-        padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
-    }
-
-    .bottom-box {
-        background-color: #FFFFFF;
-
-        .bottom-container {
-            padding: 12rpx 32rpx 0;
-
-            .add-img {
-                width: 44rpx;
-                height: 44rpx;
-            }
-
-            .search-box {
-                min-height: 76rpx;
-                border-radius: 42rpx;
-                padding: 10rpx 28rpx;
-                margin: 0 30rpx;
-                background-color: #F4F4F4;
-
-                .ka {
-                    width: 44rpx;
-                    height: 44rpx;
-                }
-
-                .down {
-                    width: 24rpx;
-                    height: 24rpx;
-                    margin-left: 10rpx;
-                }
-
-                .input {
-                    height: 100%;
-                    width: auto;
-                    min-height: 46rpx;
-                    max-height: 160rpx;
-                    overflow: hidden;
-                    overflow-y: scroll;
-                    margin-left: 32rpx;
-
-                    ::v-deep .ql-container {
-                        height: 100%;
-                        min-height: auto;
-                    }
-
-                    ::v-deep .ql-blank::before {
-                        color: #606060;
-                        font-size: 30rpx;
-                        line-height: inherit;
-                        font-style: normal;
-                    }
-                }
-
-                .right-icon {
-                    width: 32rpx;
-                    height: 40rpx;
-                    margin-right: 14rpx;
-                }
-            }
-
-            .right-icon {
-                width: 44rpx;
-                height: 44rpx;
-            }
-        }
-    }
-
-}
-
-
-//vivo样式
-.vivo-style {
-    background-color: #F6F6F6 !important;
-
-    .top-box {
-
-        .top-container {
-            padding: 66rpx 52rpx 20rpx 42rpx;
-            background-color: #F6F6F6;
-
-            .left {
-
-                image {
-                    width: 40rpx;
-                    height: 40rpx;
-                }
-            }
-
-            .center {
-                flex: 1;
-                width: 20%;
-                height: 100%;
-                margin: 0 18rpx;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                overflow: hidden;
-
-                .title {
-                    font-size: 34rpx;
-                    color: #1A1A1A;
-                    font-weight: 500;
-                    line-height: 34rpx;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    margin-right: 10rpx;
-                }
-            }
-
-            .right {
-                text-align: right;
-
-                .img {
-                    width: 44rpx;
-                    height: 44rpx;
-                }
-
-            }
-
-            .text-box {
-                .title {
-                    font-size: 20rpx;
-                    color: #1A1A1A;
-                    left: 20rpx;
-                    margin-right: 6rpx;
-                }
-            }
-        }
-
-
-    }
-
-    .bottom-box {
-        padding-bottom: 20rpx;
-    }
-
-    .safe-area {
-        padding-bottom: 20rpx;
-        padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
-        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-    }
-
-    .bottom-box {
-        background-color: #fff;
-
-        .bottom-container {
-            padding: 20rpx 48rpx 0;
-
-            .search-box {
-                min-height: 64rpx;
-                border-radius: 16rpx;
-                padding: 8rpx 18rpx;
-                margin-right: 42rpx;
-                background-color: #F2F2F2;
-
-                .input {
-                    height: 100%;
-                    width: auto;
-                    min-height: 46rpx;
-                    max-height: 160rpx;
-                    overflow: hidden;
-                    overflow-y: scroll;
-
-                    ::v-deep .ql-container {
-                        height: 100%;
-                        min-height: auto;
-                    }
-
-                    ::v-deep .ql-blank::before {
-                        color: #C8C8C8;
-                        font-size: 30rpx;
-                        line-height: inherit;
-                        font-style: normal;
-                    }
-                }
-            }
-
-            .send-text {
-
-                color: #9CC9FF;
-                font-size: 34rpx;
-            }
-
-            .send-text-active {
-                color: #0078FE;
-            }
-        }
-    }
-
-}
-
-.bottom-placeholder {
-    margin-top: env(safe-area-inset-bottom);
-    margin-top: constant(safe-area-inset-bottom);
-}
+	.page-container {
+		width: 100vw;
+		height: 100vh;
+		background-color: #fff;
+	}
+
+	.m-l-34 {
+		margin-left: 34rpx;
+	}
+
+	.m-l-50 {
+		margin-left: 50rpx;
+	}
+
+	.center-box {
+		overflow: hidden;
+		// overflow-y: scroll;
+		// padding-bottom: 12px;
+	}
+
+	.fixed-bottom-box {
+		position: fixed;
+		width: 100%;
+		background: #fff;
+		bottom: 0;
+		left: 0;
+	}
+
+
+	.fixed-top-box {
+		position: fixed;
+		width: 100%;
+		z-index: 9;
+		left: 0;
+		top: 0;
+	}
+
+	//苹果样式
+	.iphone-style {
+		.circle {
+			border-radius: 50% !important;
+		}
+
+		.square {
+			border-radius: 16rpx !important;
+		}
+
+		.status-placeholder {
+			background-color: #F7F7F7;
+		}
+
+		.top-box {
+
+			.top-container {
+				padding: 32rpx 24rpx 20rpx;
+				background-color: #F7F7F7;
+				box-shadow: inset 0 -0.3px 0 0 #B5B5B5;
+
+				.left {
+					width: 180rpx;
+
+					image {
+						width: 40rpx;
+						height: 40rpx;
+					}
+
+					.number-box {
+						height: 36rpx;
+						min-width: 36rpx;
+						text-align: center;
+						font-size: 12px;
+						line-height: 24rpx;
+						padding: 6rpx 10rpx;
+						border-radius: 18rpx;
+						color: #fff;
+						background-color: #0276FF;
+						margin-left: 4rpx;
+						flex-shrink: 0;
+					}
+				}
+
+				.center {
+					height: 96rpx;
+
+					.img {
+						width: 96rpx;
+						height: 96rpx;
+						border-radius: 50%;
+					}
+				}
+
+				.right {
+					width: 180rpx;
+
+				}
+
+				.text-box {
+					margin-top: 10rpx;
+					height: 20rpx;
+
+					.title {
+						text-align: center;
+						max-width: 400rpx;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						font-size: 20rpx;
+						color: #1A1A1A;
+						left: 20rpx;
+						margin-right: 6rpx;
+						font-weight: 500;
+					}
+				}
+			}
+
+
+		}
+
+
+
+		.bottom-box {
+			padding-bottom: 10rpx;
+		}
+
+		.safe-area {
+			padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+		}
+
+		.bottom-container {
+			padding: 10rpx 28rpx 0;
+
+			.add-img {
+				width: 66rpx;
+				height: 66rpx;
+				margin-right: 24rpx;
+			}
+
+			.search-box {
+				min-height: 70rpx;
+				border-radius: 35rpx 35rpx 35rpx 35rpx;
+				border: 2rpx solid #DFDFDF;
+				padding: 8rpx 26rpx;
+
+				::v-deep .ql-container {
+					// height: 100%;
+					min-height: 48rpx !important;
+					font-size: 32rpx;
+				}
+
+				::v-deep .ql-blank::before {
+					color: #C3C3C3;
+					font-size: 32rpx;
+					line-height: inherit;
+					font-style: normal;
+				}
+
+				.input {
+					height: 100%;
+					width: auto;
+					min-height: 46rpx;
+					max-height: 160rpx;
+					overflow: hidden;
+					overflow-y: scroll;
+					// min-height: 48rpx !important;
+				}
+
+				.right-icon {
+					width: 32rpx;
+					height: 32rpx;
+					margin-left: 20rpx;
+				}
+
+				.right-send-icon {
+					width: 52rpx;
+					height: 52rpx;
+					margin-left: 20rpx;
+				}
+			}
+
+		}
+	}
+
+	//小米样式
+	.mi-style {
+		background-color: #F7F7F7 !important;
+
+		.top-box {
+
+			.top-container {
+				padding: 0 20rpx 0 52rpx;
+				background-color: #F7F7F7;
+				height: 88rpx;
+
+				.left {
+					width: 80rpx;
+
+					image {
+						width: 48rpx;
+						height: 48rpx;
+					}
+
+					.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 {
+					flex: 1;
+					display: flex;
+					align-items: center;
+
+					.title {
+						flex: 1;
+						display: block;
+						font-size: 36rpx;
+						color: #1A1A1A;
+						font-weight: 500;
+						width: 20px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						margin-right: 10rpx;
+					}
+				}
+
+				.right {
+					width: 80rpx;
+					text-align: right;
+
+					.img {
+						width: 48rpx;
+						height: 48rpx;
+					}
+
+				}
+
+				.text-box {
+					.title {
+						font-size: 20rpx;
+						color: #1A1A1A;
+						left: 20rpx;
+						margin-right: 6rpx;
+					}
+				}
+			}
+
+
+		}
+
+		.bottom-box {
+			padding-bottom: 20rpx;
+		}
+
+		.safe-area {
+			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
+			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		}
+
+		.bottom-box {
+
+			.bottom-container {
+				padding: 20rpx 28rpx 0;
+
+
+				.add-img {
+					width: 72rpx;
+					height: 72rpx;
+				}
+
+				.search-box {
+					min-height: 96rpx;
+					border-radius: 28rpx;
+					padding: 12rpx 42rpx;
+					margin: 0 20rpx;
+					background-color: #E8E8E8;
+
+					::v-deep .ql-container {
+						height: 100%;
+						min-height: auto;
+					}
+
+					::v-deep .ql-blank::before {
+						color: #8B8B8B;
+						font-size: 30rpx;
+						line-height: inherit;
+						font-style: normal;
+					}
+
+					.input {
+						height: 100%;
+						width: auto;
+						min-height: 46rpx;
+						max-height: 160rpx;
+						overflow: hidden;
+						overflow-y: scroll;
+					}
+
+					.right-icon {
+						width: 32rpx;
+						height: 32rpx;
+						margin-left: 20rpx;
+					}
+				}
+
+				.right-icon {
+					width: 72rpx;
+					height: 72rpx;
+				}
+			}
+		}
+
+	}
+
+	//oppo样式
+	.oppo-style {
+		background-color: #F0F1F3 !important;
+
+		.top-box {
+
+			.top-container::after {
+				position: absolute;
+				content: '';
+				width: 100%;
+				height: 1px;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				background-color: #D0D1D3;
+				transform: scaleY(0.3);
+			}
+
+			.top-container {
+				position: relative;
+				padding: 0 52rpx;
+				background-color: #F0F1F3;
+				height: 98rpx;
+				padding-top: 6rpx;
+				padding-bottom: 12rpx;
+
+				.left {
+
+					image {
+						width: 48rpx;
+						height: 48rpx;
+					}
+
+					.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 {
+					flex: 1;
+					width: 20%;
+					height: 100%;
+					margin: 0 18rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+
+					.title {
+						width: 100%;
+						font-size: 36rpx;
+						color: #1A1A1A;
+						font-weight: 500;
+						line-height: 36rpx;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						margin-right: 10rpx;
+					}
+
+					.second-text {
+						color: #6F6F6F;
+						font-size: 28rpx;
+						line-height: 28rpx;
+						margin-top: 14rpx;
+					}
+				}
+
+				.right {
+					text-align: right;
+
+					.img {
+						width: 48rpx;
+						height: 48rpx;
+					}
+
+				}
+
+				.text-box {
+					.title {
+						font-size: 20rpx;
+						color: #1A1A1A;
+						left: 20rpx;
+						margin-right: 6rpx;
+					}
+				}
+			}
+
+
+		}
+
+		.bottom-box {
+			padding-bottom: 10rpx;
+		}
+
+		.safe-area {
+			padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+		}
+
+
+		.bottom-box {
+			background-color: #FAFAFA;
+
+			.bottom-container {
+				padding: 16rpx 32rpx 0;
+
+				.add-img {
+					width: 84rpx;
+					height: 84rpx;
+				}
+
+				.search-box {
+					min-height: 84rpx;
+					border-radius: 42rpx;
+					margin: 0 16rpx;
+					background-color: #E6E6E6;
+					padding: 12rpx 38rpx;
+
+					::v-deep .ql-container {
+						height: 100%;
+						min-height: auto;
+					}
+
+					::v-deep .ql-blank::before {
+						color: #6C6C6E;
+						font-size: 32rpx;
+						line-height: inherit;
+						font-style: normal;
+					}
+
+					.input {
+						height: 100%;
+						width: auto;
+						min-height: 46rpx;
+						max-height: 160rpx;
+						overflow: hidden;
+						overflow-y: scroll;
+						caret-color: #1ABA11;
+					}
+
+					.right-icon {
+						width: 32rpx;
+						height: 40rpx;
+						margin-right: 14rpx;
+					}
+				}
+
+				.right-icon {
+					width: 84rpx;
+					height: 84rpx;
+				}
+			}
+		}
+
+	}
+
+	//华为样式
+	.huawei-style {
+		background-color: #F1F5F8 !important;
+
+		.top-box {
+
+			.top-container {
+				padding: 0 32rpx;
+				background-color: #F1F5F8;
+				height: 88rpx;
+
+				.left {
+
+					image {
+						width: 76rpx;
+						height: 76rpx;
+					}
+
+					.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 {
+					flex: 1;
+					width: 20%;
+					height: 100%;
+					margin: 0 16rpx;
+					display: flex;
+					align-items: center;
+					overflow: hidden;
+
+					.img {
+						width: 72rpx;
+						height: 72rpx;
+						flex-shrink: 0;
+						margin-right: 18rpx;
+						border-radius: 50%;
+					}
+
+					.title {
+						font-size: 40rpx;
+						color: #1A1A1A;
+						font-weight: 500;
+						line-height: 40rpx;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						margin-right: 10rpx;
+					}
+
+					.second-text {
+						color: #6F6F6F;
+						font-size: 28rpx;
+						line-height: 28rpx;
+						margin-top: 14rpx;
+					}
+				}
+
+				.right {
+					text-align: right;
+
+					.img {
+						width: 72rpx;
+						height: 72rpx;
+					}
+
+				}
+
+				.text-box {
+					.title {
+						font-size: 20rpx;
+						color: #1A1A1A;
+						left: 20rpx;
+						margin-right: 6rpx;
+					}
+				}
+			}
+
+
+		}
+
+		.bottom-box {
+			padding-bottom: 12rpx;
+		}
+
+		.safe-area {
+			padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
+			padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
+		}
+
+		.bottom-box {
+			background-color: #FFFFFF;
+
+			.bottom-container {
+				padding: 12rpx 32rpx 0;
+
+				.add-img {
+					width: 44rpx;
+					height: 44rpx;
+				}
+
+				.search-box {
+					min-height: 76rpx;
+					border-radius: 42rpx;
+					padding: 10rpx 28rpx;
+					margin: 0 30rpx;
+					background-color: #F4F4F4;
+
+					.ka {
+						width: 44rpx;
+						height: 44rpx;
+					}
+
+					.down {
+						width: 24rpx;
+						height: 24rpx;
+						margin-left: 10rpx;
+					}
+
+					.input {
+						height: 100%;
+						width: auto;
+						min-height: 46rpx;
+						max-height: 160rpx;
+						overflow: hidden;
+						overflow-y: scroll;
+						margin-left: 32rpx;
+
+						::v-deep .ql-container {
+							height: 100%;
+							min-height: auto;
+						}
+
+						::v-deep .ql-blank::before {
+							color: #606060;
+							font-size: 30rpx;
+							line-height: inherit;
+							font-style: normal;
+						}
+					}
+
+					.right-icon {
+						width: 32rpx;
+						height: 40rpx;
+						margin-right: 14rpx;
+					}
+				}
+
+				.right-icon {
+					width: 44rpx;
+					height: 44rpx;
+				}
+			}
+		}
+
+	}
+
+
+	//vivo样式
+	.vivo-style {
+		background-color: #F6F6F6 !important;
+
+		.top-box {
+
+			.top-container {
+				padding: 66rpx 52rpx 20rpx 42rpx;
+				background-color: #F6F6F6;
+
+				.left {
+
+					image {
+						width: 40rpx;
+						height: 40rpx;
+					}
+				}
+
+				.center {
+					flex: 1;
+					width: 20%;
+					height: 100%;
+					margin: 0 18rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					overflow: hidden;
+
+					.title {
+						font-size: 34rpx;
+						color: #1A1A1A;
+						font-weight: 500;
+						line-height: 34rpx;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						margin-right: 10rpx;
+					}
+				}
+
+				.right {
+					text-align: right;
+
+					.img {
+						width: 44rpx;
+						height: 44rpx;
+					}
+
+				}
+
+				.text-box {
+					.title {
+						font-size: 20rpx;
+						color: #1A1A1A;
+						left: 20rpx;
+						margin-right: 6rpx;
+					}
+				}
+			}
+
+
+		}
+
+		.bottom-box {
+			padding-bottom: 20rpx;
+		}
+
+		.safe-area {
+			padding-bottom: 20rpx;
+			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
+			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		}
+
+		.bottom-box {
+			background-color: #fff;
+
+			.bottom-container {
+				padding: 20rpx 48rpx 0;
+
+				.search-box {
+					min-height: 64rpx;
+					border-radius: 16rpx;
+					padding: 8rpx 18rpx;
+					margin-right: 42rpx;
+					background-color: #F2F2F2;
+
+					.input {
+						height: 100%;
+						width: auto;
+						min-height: 46rpx;
+						max-height: 160rpx;
+						overflow: hidden;
+						overflow-y: scroll;
+
+						::v-deep .ql-container {
+							height: 100%;
+							min-height: auto;
+						}
+
+						::v-deep .ql-blank::before {
+							color: #C8C8C8;
+							font-size: 30rpx;
+							line-height: inherit;
+							font-style: normal;
+						}
+					}
+				}
+
+				.send-text {
+
+					color: #9CC9FF;
+					font-size: 34rpx;
+				}
+
+				.send-text-active {
+					color: #0078FE;
+				}
+			}
+		}
+
+	}
+
+	.bottom-placeholder {
+		margin-top: env(safe-area-inset-bottom);
+		margin-top: constant(safe-area-inset-bottom);
+	}
 </style>
\ No newline at end of file