<template>
	<view class="chat">
		<list>
			<cell v-for="(item, index) in 99" :key="index">消息{{index}}</cell>
		</list>
		<view class="footer">
			<input type="text" placeholder="输入聊天消息">
			<view class="">
				表情包组件
			</view>
			<view class="">
				<view>图片</view>
				<view>视频</view>
				<view>音频通话</view>
				<view>视频通话</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.chat{
		background: #ddd;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.chat-soll{
			flex: 1;
			overflow-y: scroll;
		}
		.chat-footer{
			background: white;
			padding: 30rpx 30rpx 60rpx 30rpx;
			.chat-inputs{
				display: flex;
				background: #f6f7f9;
				height: 80rpx;
				border-radius: 40rpx;
				.chat-input{
					width: calc(100% - 240rpx);
					height: 80rpx;
					line-height: 80rpx;
				}
				.chat-icon{
					width: 80rpx;
					image{
						width: 80rpx;
					}
				}
			}
		}
	}
</style>
