1022 lines
28 KiB
Vue
1022 lines
28 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">
|
|
<view class="h100 flex-align-center flex-justify-between">
|
|
<view class="left flex-align-center">
|
|
<image @click="util.goBack()" :src="`/static/image/phone-message/${phone}/back.png`">
|
|
</image>
|
|
<view 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"
|
|
:src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
|
|
</image>
|
|
<text v-if="phone != 'iphone'" class="title">{{ chatInfo.title }}</text>
|
|
<text v-if="phone == 'oppo'" class="second-text">重庆</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">{{ chatInfo.title }}</text>
|
|
<uni-icons type="right" size="10" color="#D8D8D8"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</slot>
|
|
</view>
|
|
<view class="center-box flex-1">
|
|
<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`"></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 class="input flex-1" :placeholder="showInfo.placeholder"></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 + data.keyboardHeight) + 'px' }">
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed, toRefs } from 'vue'
|
|
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
|
|
import { stringUtil, 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
|
|
})
|
|
|
|
let { isSend, content, simIndex, scrollTop } = toRefs(data)
|
|
|
|
const emit = defineEmits(['send'])
|
|
|
|
onMounted(() => {
|
|
// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
|
|
setTimeout(() => {
|
|
data.scrollTop = 99999 + Math.random();
|
|
}, 100);
|
|
})
|
|
|
|
const onInput = (e) => {
|
|
content.value = e.detail.value
|
|
if (content.value.length > 0) {
|
|
isSend.value = true
|
|
} else {
|
|
isSend.value = false
|
|
}
|
|
setTimeout(() => {
|
|
uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
|
|
if (rect) {
|
|
data.bottomBoxHeight = rect.height;
|
|
}
|
|
}).exec();
|
|
}, 50);
|
|
}
|
|
|
|
const onFocus = (e) => {
|
|
if (e.detail.height) {
|
|
data.keyboardHeight = e.detail.height;
|
|
// 键盘弹起时，也需要滚动到底部
|
|
setTimeout(() => {
|
|
data.scrollTop = 99999 + Math.random();
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
const onBlur = () => {
|
|
data.keyboardHeight = 0;
|
|
}
|
|
|
|
/**
|
|
* 切换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
|
|
|
|
// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
|
|
setTimeout(() => {
|
|
data.scrollTop = 99999 + Math.random();
|
|
uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
|
|
if (rect) {
|
|
data.bottomBoxHeight = rect.height;
|
|
}
|
|
}).exec();
|
|
}, 100);
|
|
}
|
|
|
|
// 展示文字信息
|
|
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 }
|
|
})
|
|
|
|
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);
|
|
|
|
})
|
|
|
|
|
|
|
|
</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 {
|
|
|
|
.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;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
padding: 6rpx 10rpx;
|
|
border-radius: 18rpx;
|
|
color: #fff;
|
|
background-color: #0276FF;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
line-height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.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 {
|
|
padding: 0 52rpx;
|
|
background-color: #F0F1F3;
|
|
height: 88rpx;
|
|
box-shadow: inset 0 -0.3px 0 0 #D0D1D3;
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 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: 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |