tencent cloud

<!-- 会话列表中单个会话列表项展示 -->
<li ref="content">
    <div class="TUI-conversation-item">
        <aside class="left">
            <!-- 头像 -->
            <img class="avatar" :src="handleConversation?.avator(conversation)">
            <!-- 消息未读数/红点 -->
            <span class="num" v-if="conversation.unreadCount>0 && conversation.messageRemindType !== 'AcceptNotNotify'">
                {{conversation.unreadCount > 99 ? '99+' : conversation.unreadCount}}
            </span>
            <span class="num-notify" v-if="conversation.unreadCount>0 && conversation.messageRemindType === 'AcceptNotNotify'"></span>
        </aside>
        <div class="content">
            <div class="content-header">
                <!-- 会话名称 -->
                <label>
                    <p class="name">{{handleConversation?.name(conversation)}}</p>
                </label>
                <!-- 会话最新消息展示/@提示 -->
                <div class="middle-box">
                    <span class="middle-box-at" v-if="conversation.type === 'GROUP' && conversation.groupAtInfoList.length > 0">{{handleConversation?.showAt(conversation)}}</span>
                    <p>{{handleConversation?.showMessage(conversation)}}</p>
                </div>
            </div>
            <div class="content-footer">
                <!-- 会话最新消息时间 -->
                <span class="time">{{handleConversation?.time(conversation.lastMessage.lastTime)}}</span>
                <!-- 会话是否设置免打扰 -->
                <img v-if="conversation.messageRemindType === 'AcceptNotNotify'" class="mute-icon" src="../../../../assets/icon/mute.svg">
                <i></i>
            </div>
        </div>
    </div>
    <!-- 会话菜单栏 -->
    <div class="dialog dialog-item" v-if="toggle" ref="dialog">...</div>
</li>

.TUI-conversation {
    &-item {
        .left {
            .avatar {
                width: 30px;// 设置头像的宽度
                height: 30px;// 设置头像的高度
                border-radius: 5px;// 设置头像形状为圆角
            }
        }
    }
}

<header class="TUIChat-header">
    <!-- 聊天窗口名/【正在输入中...】状态提示 -->
    <typing-header :needtyping="needTyping" 【正在输入中...】状态提示开关，如需关闭此功能请传入false="" ...="">
    <!-- 群聊天设置（仅限群聊天窗口） -->
    <aside class="setting">
        <manage v-if="conversation.groupProfile" :conversation="conversation" :userinfo="userInfo" :ish5="env.isH5">
    </manage></aside>
</typing-header></header>

.TUIChat {
    &-header {
        background-color: #147AFF;// 设置聊天窗口标题栏背景色
        h1 {
            font-size: 16px;// 设置聊天窗口标题栏字体大小
        }
    }
}

.TUI-message-list {
    background-color: #006EFF;// 设置聊天窗口消息区的背景色
}

.TUI-message-list {
    // 设置聊天窗口消息区的背景图片
    background-image: url(https://qcloudimg.tencent-cloud.cn/raw/176cddbfb778a4bb26a5d423056efe1d.png); 
}

<!-- 设置默认头像路径为https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png  -->
<img class="avatar" :src="message?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'" onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'">

.avatar {
    width: 36px;// 设置头像宽度
    height: 36px;// 设置头像高度
    border-radius: 5px; // 设置头像为圆角
}

.message-area {
    .content {
        &-in {
            background: #fbfbfb;// 设置左边接收对方消息气泡颜色
            border-radius: 0px 10px 10px 10px;
        }
        &-out {
            background: #dceafd;// 设置右边本人发送消息气泡颜色
            border-radius: 10px 0px 10px 10px;
        }
    }
}

.message-area {
    .name {
        font-weight: 400;// 设置发送者昵称字体粗细
        font-size: 0.8rem; // 设置发送者昵称字体大小
        color: #999999;// 设置发送者昵称字体颜色
    }
}

.text-img {
    width: 20px;// 设置聊天内容中emoji表情宽度
    height: 20px;// 设置聊天内容中emoji表情高度
}
.text-box {
    white-space: pre-wrap;
    font-size: 14px;// 设置聊天内容中字体大小
    color: #999999;// 设置聊天内容中字体颜色
}

.message-tip {
    margin: 0 auto;
    color: #999999;// 设置提示信息字体颜色
    font-size: 14px;// 设置提示信息字体大小
    background: red;// 设置提示信息背景颜色
}

let sendComponents: any = {
    Face,// 发送表情功能
    Image,// 发送图片功能
    Video,// 发送视频功能
    File,// 发送文件功能
    Evaluate,// 发送评价功能
    Words,// 发送常用语功能
};