1210 lines
24 KiB
Vue
1210 lines
24 KiB
Vue
<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="chooseImage()"></image>
|
|
<image v-if="phone == 'vivo'" class="add-img shrink-0"
|
|
src="/static/image/phone-message/vivo/add.png" @click="chooseImage()"></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
|
|
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" @click="chooseImage()">
|
|
</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
|
|
}
|
|
})
|
|
|
|
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)
|
|
|
|
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
|
|
}
|
|
|
|
/**
|
|
* 发送消息
|
|
*/
|
|
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()
|
|
|
|
// 延迟极小时间确保 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;
|
|
|
|
// 如果两次点击间隔在 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;
|
|
|
|
if (clientX < halfWidth) {
|
|
console.log('双击左侧');
|
|
emit('dblclick-left');
|
|
} else {
|
|
console.log('双击右侧');
|
|
emit('dblclick-right');
|
|
}
|
|
|
|
// 成功触发双击后重置时间，防止连续三次点击触发两次双击
|
|
data.lastClickTime = 0;
|
|
} else {
|
|
data.lastClickTime = now;
|
|
}
|
|
}
|
|
|
|
|
|
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 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 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;
|
|
}
|
|
|
|
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)
|
|
|
|
// 延迟拉动到底部
|
|
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
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
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';
|
|
</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;
|
|
|
|
|
|
.add-img {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
|
|
.bottom-container {
|
|
padding: 20rpx 48rpx 0 56rpx;
|
|
|
|
.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> |