874 lines
25 KiB
Vue
874 lines
25 KiB
Vue
<template>
|
||
<view>
|
||
<view v-for="(message, index) in displayList" :key="message.id || index" class="message-item" :class="{
|
||
isMe: message.isMe,
|
||
'm-t-16': shouldApplyMt16(index) && !shouldShowTime(index),
|
||
'is-sort-mode': sortMode,
|
||
'sort-dragging': sortMode && dragIndex === index,
|
||
'sort-drop-before': sortMode && dragOverIndex === index && dragIndex !== index && dropPosition === 'before',
|
||
'sort-drop-after': sortMode && dragOverIndex === index && dragIndex !== index && dropPosition === 'after'
|
||
}">
|
||
|
||
<!-- 排序模式下的拖拽手柄 -->
|
||
<view v-if="sortMode" class="sort-handle-wrap" @longpress="onSortLongPress(index, $event)"
|
||
@touchmove.stop.prevent="onSortTouchMove(index, $event)" @touchend.stop="onSortTouchEnd(index, $event)">
|
||
<view class="sort-handle-bar"></view>
|
||
<view class="sort-handle-bar"></view>
|
||
<view class="sort-handle-bar"></view>
|
||
</view>
|
||
|
||
<view style="flex: 1; overflow: hidden;">
|
||
<view class="time m-t-44" v-if="shouldShowTime(index)">
|
||
<view class="top-text" v-if="phone == 'iphone' && index == 0">信息 · 短信</view>
|
||
<view class="top-text" v-if="phone == 'huawei' && index == 0">短信/彩信</view>
|
||
<text v-if="phone == 'huawei'">{{ formatHuaweiTopTime(message.time) }}</text>
|
||
<text v-else>{{ formatChatTime(message.time) }} <text
|
||
v-if="(phone == 'oppo' || (phone == 'vivo' && message.isMe)) && message.simIndex">
|
||
{{ simInfo[`sim${message.simIndex}`] }}
|
||
</text></text>
|
||
|
||
<image style="width: 20rpx;height: 24rpx;margin-left: 8rpx; "
|
||
v-if="phone == 'oppo' || (phone == 'vivo' && message.isMe)"
|
||
:src="`/static/image/phone-message/huawei/chat-ka${message.simIndex}.png`">
|
||
</image>
|
||
</view>
|
||
<view class="chat-box" :id="'msg-' + index" :class="{
|
||
'tail-right': shouldApplyTailRight(index),
|
||
'tail-left': shouldApplyTailLeft(index),
|
||
'delivered': isLastMeMessage(index)
|
||
}" @longpress="!sortMode && onMessageLongPress(index, message)">
|
||
<text v-if="message.isMe && phone == 'mi'" class="send-text">送达</text>
|
||
<view class="chat-bubble">
|
||
<view v-html="formatMessageContent(message.content, message.isMe)"></view>
|
||
</view>
|
||
</view>
|
||
<view v-if="phone == 'huawei'" class="second-info">
|
||
<text>{{ formatHuaweiBottomTime(message.time) }}</text>
|
||
<image :src="`/static/image/phone-message/huawei/chat-ka${message.simIndex}.png`"></image>
|
||
</view>
|
||
<view v-if="(phone == 'oppo' || phone == 'vivo') && message.isMe" class="second-info">
|
||
<text v-if="message.isMe" class="delivered">已送达</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
|
||
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
|
||
import { stringUtil, util } from '@/utils/common.js';
|
||
const props = defineProps({
|
||
// 手机品牌
|
||
phone: {
|
||
type: String,
|
||
default: 'iphone'
|
||
},
|
||
messageList: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
// 是否处于拖拽排序模式
|
||
sortMode: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const SIM_STORAGE_KEY = 'sim_info'
|
||
const emit = defineEmits(['onMessageLongPress', 'sort'])
|
||
|
||
const simInfo = ref({
|
||
sim1: '中国电信',
|
||
sim2: '中国移动'
|
||
})
|
||
|
||
onMounted(() => {
|
||
try {
|
||
const cached = uni.getStorageSync(SIM_STORAGE_KEY)
|
||
simInfo.value = cached ? JSON.parse(cached) : { sim1: '中国电信', sim2: '中国移动' }
|
||
} catch (e) {
|
||
simInfo.value = { sim1: '中国电信', sim2: '中国移动' }
|
||
}
|
||
})
|
||
|
||
// 排序模式下的本地唦本列表
|
||
// 不直接修改 props.messageList，排序完成后 emit 给父组件
|
||
const localSortList = ref([])
|
||
const dragIndex = ref(-1)
|
||
const dragOverIndex = ref(-1)
|
||
const dropPosition = ref('after') // 'before'=插入目标上方, 'after'=插入目标下方
|
||
let isDragging = false
|
||
let sortItemRects = []
|
||
|
||
// 当 sortMode 切换时同步本地副本
|
||
watch(() => props.sortMode, (val) => {
|
||
if (val) {
|
||
localSortList.value = props.messageList.map(item => ({ ...item }))
|
||
} else {
|
||
dragIndex.value = -1
|
||
dragOverIndex.value = -1
|
||
isDragging = false
|
||
sortItemRects = []
|
||
localSortList.value = []
|
||
}
|
||
})
|
||
|
||
// 实际渲染用的列表：排序模式下用内部副本，否则用原始列表
|
||
const displayList = computed(() => {
|
||
if (props.sortMode) return localSortList.value
|
||
return props.messageList
|
||
})
|
||
|
||
// 判断消息isMe==true时上一条消息是否也是isMe==true，如果不是则应用m-t-16样式
|
||
const shouldApplyMt16 = (index) => {
|
||
if (index === 0) return false;
|
||
const currentMsg = displayList.value[index];
|
||
const prevMsg = displayList.value[index - 1];
|
||
if (currentMsg.isMe && !prevMsg.isMe) {
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// 判断消息isMe==true时下一条消息是否也是isMe==true，如果不是则应用m-t-16样式
|
||
const shouldApplyNextIsMe = (index) => {
|
||
const currentMsg = displayList.value[index];
|
||
// 拦截：如果已经是数组的最后一条消息，必然不存在下一条消息
|
||
if (index >= displayList.value.length - 1) return false;
|
||
|
||
const nextMsg = displayList.value[index + 1];
|
||
if (currentMsg.isMe && nextMsg.isMe) {
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// 判断是否为最后一条自己发出的消息
|
||
const isLastMeMessage = (currentIndex) => {
|
||
const currentMsg = displayList.value[currentIndex];
|
||
if (!currentMsg.isMe) return false;
|
||
|
||
// 往后遍历，如果还能找到isMe=true的消息，说明当前这条不是最后一条
|
||
for (let i = currentIndex + 1; i < displayList.value.length; i++) {
|
||
if (displayList.value[i].isMe) {
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
|
||
// 判断 tail-right（右侧我方气泡尾巴）样式是否生效
|
||
const shouldApplyTailRight = (index) => {
|
||
const currentMsg = displayList.value[index];
|
||
if (!currentMsg.isMe) return false; // 不是我发的直接没右侧尾巴
|
||
|
||
// 如果这是整体列表最后一条消息，必然有尾巴
|
||
if (index === displayList.value.length - 1) return true;
|
||
|
||
const nextMsg = displayList.value[index + 1];
|
||
|
||
// 条件 c: 下一条消息 isMe == false (也就是被打断了)
|
||
if (!nextMsg.isMe) return true;
|
||
|
||
// 条件 a: 下一条消息间隔三分钟以上 (180000 毫秒) - 时间分割线导致当前段落结束
|
||
const currentMsgTime = new Date(currentMsg.time.replace(/-/g, '/')).getTime();
|
||
const nextMsgTime = new Date(nextMsg.time.replace(/-/g, '/')).getTime();
|
||
if (!isNaN(currentMsgTime) && !isNaN(nextMsgTime) && (nextMsgTime - currentMsgTime > 180000)) {
|
||
return true;
|
||
}
|
||
|
||
// 其他情况（连绵不断的连发，中间没超时间也没被对方打断），则隐藏中间环节气泡尾巴
|
||
return false;
|
||
}
|
||
|
||
// 判断 tail-left 样式是否生效
|
||
const shouldApplyTailLeft = (index) => {
|
||
const currentMsg = displayList.value[index];
|
||
if (currentMsg.isMe) return false;
|
||
|
||
// 如果这是整体列表最后一条消息，也就符合最后一条isMe==false的特征
|
||
if (index === displayList.value.length - 1) return true;
|
||
|
||
const nextMsg = displayList.value[index + 1];
|
||
|
||
// 条件 c: 下一条消息 isMe == true
|
||
if (nextMsg.isMe) return true;
|
||
|
||
// 条件 a: 下一条消息间隔三分钟以上 (180000 毫秒)
|
||
const currentMsgTime = new Date(currentMsg.time.replace(/-/g, '/')).getTime();
|
||
const nextMsgTime = new Date(nextMsg.time.replace(/-/g, '/')).getTime();
|
||
if (!isNaN(currentMsgTime) && !isNaN(nextMsgTime) && (nextMsgTime - currentMsgTime > 180000)) {
|
||
return true;
|
||
}
|
||
|
||
// 条件 b: 这是最后一条 isMe == false 的消息
|
||
for (let i = index + 1; i < displayList.value.length; i++) {
|
||
if (!displayList.value[i].isMe) {
|
||
return false; // 往后还有不是自己发的消息，所以当前并非最后一条 isMe==false
|
||
}
|
||
}
|
||
|
||
return true;
|
||
}
|
||
|
||
// 获取格式化后的聊天时间显示
|
||
const formatChatTime = (timeStr) => {
|
||
if (!timeStr) return '';
|
||
const date = new Date(timeStr.replace(/-/g, '/'));
|
||
if (isNaN(date.getTime())) return timeStr;
|
||
|
||
const now = new Date();
|
||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||
const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
||
|
||
const diffDays = Math.floor((today.getTime() - target.getTime()) / (1000 * 60 * 60 * 24));
|
||
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const timeNum = `${hours}:${minutes}`;
|
||
|
||
if (diffDays === 0) {
|
||
if (props.phone == 'iphone' || props.phone == 'oppo') return `今天 ${timeNum}`;
|
||
return `${timeNum}`;
|
||
} else if (diffDays === 1) {
|
||
return `昨天 ${timeNum}`;
|
||
} else if (diffDays > 1 && diffDays < 7) {
|
||
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||
return `${weekDays[date.getDay()]} ${timeNum}`;
|
||
} else {
|
||
// 超过一周，同一年显示 月日 时分，跨年显示 年月日 时分
|
||
if (date.getFullYear() === now.getFullYear()) {
|
||
return `${date.getMonth() + 1}月${date.getDate()}日 ${timeNum}`;
|
||
} else {
|
||
return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${timeNum}`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 华为顶部时间栏：只显示日期维度的信息，无具体时分秒
|
||
const formatHuaweiTopTime = (timeStr) => {
|
||
if (!timeStr) return '';
|
||
const date = new Date(timeStr.replace(/-/g, '/'));
|
||
if (isNaN(date.getTime())) return timeStr;
|
||
|
||
const now = new Date();
|
||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||
const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
||
const diffDays = Math.floor((today.getTime() - target.getTime()) / (1000 * 60 * 60 * 24));
|
||
|
||
if (diffDays === 0) {
|
||
return `今天`;
|
||
} else if (diffDays === 1) {
|
||
return `昨天`;
|
||
} else {
|
||
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||
const weekdayStr = weekDays[date.getDay()];
|
||
return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${weekdayStr}`;
|
||
}
|
||
}
|
||
|
||
// 华为底部小尾巴附加时间：上下午时分、或者“刚刚”
|
||
const formatHuaweiBottomTime = (timeStr) => {
|
||
if (!timeStr) return '';
|
||
const date = new Date(timeStr.replace(/-/g, '/'));
|
||
if (isNaN(date.getTime())) return timeStr;
|
||
|
||
const now = new Date();
|
||
// 判断是否在一分钟内（差值在 60000 毫秒以内）
|
||
const diffMs = now.getTime() - date.getTime();
|
||
if (diffMs >= 0 && diffMs <= 60000) {
|
||
return '刚刚';
|
||
}
|
||
|
||
const ampm = date.getHours() >= 12 ? '下午' : '上午';
|
||
// 转换为 12 小时制
|
||
let displayHour = date.getHours() % 12;
|
||
displayHour = displayHour ? displayHour : 12; // 如果是 0(午夜) 则是12
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
|
||
return `${ampm}${displayHour}:${minutes}`;
|
||
}
|
||
|
||
// 判断是否显示时间
|
||
// timeMode: 'show'=强制显示, 'hide'=强制隐藏, 'auto'或无=按间隔逻辑判断
|
||
const shouldShowTime = (index) => {
|
||
const currentMsg = displayList.value[index];
|
||
const mode = currentMsg.timeMode;
|
||
|
||
// 强制隐藏（兼容旧 hideTime 字段）
|
||
if (mode === 'hide' || currentMsg.hideTime) return false;
|
||
|
||
// 强制显示
|
||
if (mode === 'show') return true;
|
||
|
||
// 以下为 auto / 默认 逻辑
|
||
if (index === 0) return true; // 第一条必定显示
|
||
|
||
// 排序模式下每条均显示时间
|
||
if (props.sortMode) return true;
|
||
|
||
const currentMsgTime = new Date(currentMsg.time.replace(/-/g, '/')).getTime();
|
||
const prevMsgTime = new Date(displayList.value[index - 1].time.replace(/-/g, '/')).getTime();
|
||
|
||
if (isNaN(currentMsgTime) || isNaN(prevMsgTime)) return true;
|
||
|
||
// 绝对值比较，兼容排序后时间倒序
|
||
return Math.abs(currentMsgTime - prevMsgTime) > 180000;
|
||
}
|
||
|
||
// 格式化文本：给网址和 5 位以上连续数字加上下划线样式，非我方消息同时赋予文字蓝色
|
||
const formatMessageContent = (content, isMe) => {
|
||
if (!content) return '';
|
||
|
||
// 匹配 url 或 5位以上连续数字
|
||
// URL: http(s)://... 或 xxx.xxx/...
|
||
const combinedRegex = /((?:https?:\/\/)?(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(?:\/[a-zA-Z0-9_/%-]*)*)|(\b\d{5,}(?:\.\d+)?\b)/g;
|
||
|
||
return content.replace(combinedRegex, (match, p1, p2) => {
|
||
// 如果是数字且包含小数点（通常是金额），则不添加下划线样式
|
||
if (p2 && p2.includes('.')) {
|
||
return match;
|
||
}
|
||
|
||
let color = '#3A85F8'
|
||
if (props.phone == 'iphone') color = '#0B7AE3'
|
||
if (props.phone == 'mi') color = '#3A85F8'
|
||
const colorStyle = !isMe ? `color: ${color};` : '';
|
||
return `<span style="text-decoration: underline; ${colorStyle}">${match}</span>`;
|
||
});
|
||
}
|
||
|
||
|
||
/**
|
||
* 长按信息
|
||
* @param index
|
||
* @param message
|
||
*/
|
||
const onMessageLongPress = (index, message) => {
|
||
emit('onLongPress', index, message)
|
||
}
|
||
|
||
// ===================== 拖拽排序逻辑 =====================
|
||
|
||
/**
|
||
* 刷新所有排序条目的 rect 坐标缓存
|
||
*/
|
||
const refreshSortRects = (callback) => {
|
||
const query = uni.createSelectorQuery()
|
||
const len = localSortList.value.length
|
||
let collected = []
|
||
let done = 0
|
||
for (let i = 0; i < len; i++) {
|
||
query.select('#msg-' + i).boundingClientRect(rect => {
|
||
collected[i] = rect
|
||
done++
|
||
if (done === len && callback) callback(collected)
|
||
})
|
||
}
|
||
query.exec()
|
||
}
|
||
|
||
/**
|
||
* 长按手柄开始拖拽
|
||
*/
|
||
const onSortLongPress = (idx, e) => {
|
||
dragIndex.value = idx
|
||
dragOverIndex.value = idx
|
||
isDragging = true
|
||
refreshSortRects(rects => {
|
||
sortItemRects = rects
|
||
})
|
||
uni.vibrateShort({ type: 'medium' })
|
||
}
|
||
|
||
/**
|
||
* 拖拽移动 - 根据触摸点 Y 坐标確定悬停位置和插入方向
|
||
*/
|
||
const onSortTouchMove = (idx, e) => {
|
||
if (!isDragging || dragIndex.value === -1) return
|
||
if (!e.touches || !e.touches[0]) return
|
||
const touchY = e.touches[0].clientY
|
||
if (!sortItemRects || sortItemRects.length === 0) return
|
||
let overIdx = dragOverIndex.value
|
||
for (let i = 0; i < sortItemRects.length; i++) {
|
||
const rect = sortItemRects[i]
|
||
if (rect && touchY >= rect.top && touchY <= rect.bottom) {
|
||
overIdx = i
|
||
// 判断手指在该元素的上半区还是下半区
|
||
const mid = rect.top + rect.height / 2
|
||
dropPosition.value = touchY < mid ? 'before' : 'after'
|
||
break
|
||
}
|
||
}
|
||
dragOverIndex.value = overIdx
|
||
}
|
||
|
||
/**
|
||
* 拖拽结束 - 根据 dropPosition 決定插入到目标的上方还是下方
|
||
*/
|
||
const onSortTouchEnd = (idx, e) => {
|
||
if (!isDragging) return
|
||
const from = dragIndex.value
|
||
const to = dragOverIndex.value
|
||
if (from !== -1 && to !== -1 && from !== to) {
|
||
const list = [...localSortList.value]
|
||
const [removed] = list.splice(from, 1)
|
||
// from 被移除后，如果 to 在 from 后面，to 需要 -1
|
||
let insertAt = to > from ? to - 1 : to
|
||
if (dropPosition.value === 'after') insertAt += 1
|
||
list.splice(insertAt, 0, removed)
|
||
localSortList.value = list
|
||
emit('sort', list.map(item => ({ ...item })))
|
||
nextTick(() => {
|
||
refreshSortRects(rects => {
|
||
sortItemRects = rects
|
||
})
|
||
})
|
||
}
|
||
dragIndex.value = -1
|
||
dragOverIndex.value = -1
|
||
dropPosition.value = 'after'
|
||
isDragging = false
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
/* ===== 排序模式公共样式（跨所有手机品牌通用）===== */
|
||
/* 排序模式下每条消息左右横排（手柄 + 气泡取剩余宽度）*/
|
||
.is-sort-mode {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* 拖拽手柄区域 */
|
||
.sort-handle-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 60rpx;
|
||
flex-shrink: 0;
|
||
padding: 0 8rpx;
|
||
|
||
.sort-handle-bar {
|
||
margin: 3rpx 0;
|
||
}
|
||
}
|
||
|
||
.sort-handle-bar {
|
||
width: 30rpx;
|
||
height: 4rpx;
|
||
border-radius: 2rpx;
|
||
background-color: #CCCCCC;
|
||
}
|
||
|
||
/* 被拖拽中的条目：高亮蓝边 + 轻微缩进 */
|
||
.sort-dragging {
|
||
opacity: 0.7;
|
||
background-color: rgba(0, 122, 255, 0.06) !important;
|
||
border-left: 4rpx solid #007AFF;
|
||
}
|
||
|
||
/* 插入线：将拖拽项放在目标上方 */
|
||
.sort-drop-before {
|
||
border-top: 3rpx dashed #007AFF !important;
|
||
padding-top: 4rpx;
|
||
}
|
||
|
||
/* 插入线：将拖拽项放在目标下方 */
|
||
.sort-drop-after {
|
||
border-bottom: 3rpx dashed #007AFF !important;
|
||
padding-bottom: 4rpx;
|
||
}
|
||
|
||
// 苹果样式
|
||
.iphone-style {
|
||
.m-t-16 {
|
||
margin-top: 16rpx !important;
|
||
}
|
||
|
||
.top-text {
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
color: #838383;
|
||
margin-top: 26rpx;
|
||
}
|
||
|
||
.time {
|
||
color: #838383;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
margin-top: 36rpx;
|
||
}
|
||
|
||
.chat-box {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
|
||
.chat-bubble {
|
||
padding: 18rpx 22rpx;
|
||
background-color: #E9E9EB;
|
||
border-radius: 34rpx;
|
||
max-width: 600rpx;
|
||
font-size: 32rpx;
|
||
line-height: 38rpx;
|
||
color: #1A1A1A;
|
||
margin: 4rpx 30rpx 0;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
|
||
.isMe {
|
||
.chat-box {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.chat-bubble {
|
||
background-color: #34C85A;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.tail-left {
|
||
position: relative;
|
||
}
|
||
|
||
.tail-left::after {
|
||
position: absolute;
|
||
left: 18rpx;
|
||
bottom: 0;
|
||
content: '';
|
||
background: url('/static/image/phone-message/iphone/left-msg-box.png') no-repeat center bottom;
|
||
background-size: 100% 100%;
|
||
width: 28rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.tail-right {
|
||
position: relative;
|
||
}
|
||
|
||
.delivered::before {
|
||
position: absolute;
|
||
right: 18rpx;
|
||
bottom: -12rpx;
|
||
content: '已送达';
|
||
font-size: 20rpx;
|
||
line-height: 20rpx;
|
||
color: #8B8B8B;
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
.tail-right::after {
|
||
position: absolute;
|
||
right: 18rpx;
|
||
bottom: 0;
|
||
content: '';
|
||
background: url('/static/image/phone-message/iphone/right-msg-box.png') no-repeat center bottom;
|
||
background-size: 100% 100%;
|
||
width: 28rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
// 小米样式
|
||
.mi-style {
|
||
.top-text {
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
color: #838383;
|
||
margin-top: 26rpx;
|
||
}
|
||
|
||
.time {
|
||
padding: 0 54rpx;
|
||
color: #646464;
|
||
font-size: 24rpx;
|
||
line-height: 28rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.chat-box {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
|
||
.chat-bubble {
|
||
padding: 22rpx 42rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
font-size: 32rpx;
|
||
line-height: 50rpx;
|
||
color: #1A1A1A;
|
||
max-width: 550rpx;
|
||
margin: 0 24rpx;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.message-item {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.m-t-44 {
|
||
margin-top: 44rpx;
|
||
}
|
||
|
||
|
||
.isMe {
|
||
|
||
.time {
|
||
text-align: right;
|
||
}
|
||
|
||
.chat-box {
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
.send-text {
|
||
color: #646464;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.chat-bubble {
|
||
margin-left: 12rpx;
|
||
background-color: #3681FF;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
// oppo样式
|
||
.oppo-style {
|
||
.m-t-16 {
|
||
margin-top: 24rpx !important;
|
||
}
|
||
|
||
.time {
|
||
color: #727377;
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
margin-top: 48rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.message-item {
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.chat-box {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
|
||
.chat-bubble {
|
||
padding: 28rpx 48rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
max-width: 600rpx;
|
||
font-size: 32rpx;
|
||
line-height: 44rpx;
|
||
color: #1A1A1A;
|
||
margin: 0 32rpx;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
|
||
.isMe {
|
||
.chat-box {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.chat-bubble {
|
||
background-color: #00A1FF;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.second-info {
|
||
font-size: 24rpx;
|
||
text-align: right;
|
||
padding: 0 34rpx;
|
||
margin-top: 14rpx;
|
||
padding-bottom: 6rpx;
|
||
|
||
.delivered {
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
color: #727377;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// 华为样式
|
||
.huawei-style {
|
||
.top-text {
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
line-height: 22rpx;
|
||
color: #545454;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.time {
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
line-height: 22rpx;
|
||
color: #545454;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.chat-box {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
|
||
.chat-bubble {
|
||
padding: 12rpx 24rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 4rpx 28rpx 28rpx 28rpx;
|
||
max-width: 550rpx;
|
||
margin: 0 30rpx;
|
||
margin-top: 34rpx;
|
||
font-size: 30rpx;
|
||
line-height: 38rpx;
|
||
color: #1a1a1a;
|
||
font-weight: 500;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.second-info {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #545454;
|
||
font-size: 20rpx;
|
||
line-height: 24rpx;
|
||
margin-top: 16rpx;
|
||
padding-left: 52rpx;
|
||
padding-right: 56rpx;
|
||
|
||
image {
|
||
width: 14rpx;
|
||
height: 18rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.m-t-44 {
|
||
margin-top: 44rpx;
|
||
}
|
||
|
||
|
||
.isMe {
|
||
.second-info {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.message-item {
|
||
margin-top: 34rpx;
|
||
}
|
||
|
||
.chat-box {
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
.send-text {
|
||
color: #646464;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.chat-bubble {
|
||
margin-left: 12rpx;
|
||
background-color: #3681FF;
|
||
color: #FFFFFF;
|
||
border-radius: 28rpx 4rpx 28rpx 28rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
// vivo样式
|
||
.vivo-style {
|
||
.m-t-16 {
|
||
margin-top: 24rpx !important;
|
||
}
|
||
|
||
.time {
|
||
color: #ACACAC;
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
text-align: center;
|
||
margin: 40rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.message-item {
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.chat-box {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
|
||
.chat-bubble {
|
||
padding: 38rpx 38rpx 32rpx 40rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
max-width: 100%;
|
||
font-size: 36rpx;
|
||
line-height: 48rpx;
|
||
color: #1A1A1A;
|
||
margin: 0 32rpx;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
|
||
.isMe {
|
||
.chat-box {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.chat-bubble {
|
||
background-color: #0078FE;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.second-info {
|
||
font-size: 24rpx;
|
||
text-align: right;
|
||
padding: 0 34rpx;
|
||
margin-top: 12rpx;
|
||
padding-bottom: 6rpx;
|
||
|
||
.delivered {
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
color: #ACACAC;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|